/* =========================================================
VAYZONE — CSS principal
Direction visuelle : alternance sombre/crème, Atelier dominant
========================================================= */
:root {
/* Palette */
--vz-cream: #f5ebde;
--vz-cream-light: #fbf5ec;
--vz-cream-warm: #ede0cc;
--vz-terracotta: #c97b63;
--vz-terracotta-dk: #a8624d;
--vz-sage: #8a9a85;
--vz-charcoal: #1a1612;
--vz-charcoal-soft: #221c16;
--vz-ivory: #f5e9d4;
--vz-gold: #c9a96e;
--vz-gold-soft: #d9bf94;
--vz-brown-dark: #3a2e25;
--vz-text-dark: #2d241c;
--vz-text-muted: #6b5d4e;
--vz-border-soft: rgba(45, 36, 28, 0.12);
/* Typo */
--vz-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
--vz-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
/* Échelle */
--vz-radius: 8px;
--vz-radius-lg: 18px;
--vz-radius-arch: 50% 50% 8px 8px / 35% 35% 8px 8px;
--vz-shadow-soft: 0 4px 24px rgba(45, 36, 28, 0.08);
--vz-shadow-card: 0 8px 32px rgba(45, 36, 28, 0.10);
--vz-shadow-deep: 0 16px 48px rgba(0, 0, 0, 0.35);
/* Layout */
--vz-container: 1280px;
--vz-gutter: clamp(1.25rem, 4vw, 3rem);
}
/* -------- Reset léger -------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html {
/* Fond sombre derrière le footer — évite la bande blanche en bas de page */
background: var(--vz-charcoal);
}
body {
font-family: var(--vz-font-sans);
font-size: 16px;
line-height: 1.6;
color: var(--vz-text-dark);
background: var(--vz-cream-light);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
.entry-title, .ast-archive-title {
font-family: var(--vz-font-serif);
font-weight: 400;
font-variation-settings: "opsz" 144, "SOFT" 50;
line-height: 1.1;
color: var(--vz-charcoal);
letter-spacing: -0.01em;
}
h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
a { color: inherit; text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--vz-terracotta); }
/* Surlignage de sélection de texte aux couleurs de marque. Astra réinjecte un
::selection bleu en CSS inline dans le (background:var(--ast-global-color-0)),
imprimé APRÈS notre feuille → à spécificité égale il gagnait. D'où !important,
qui le bat quel que soit l'ordre de chargement. Ce bleu apparaissait notamment
quand on tape une entrée du menu mobile, dont le texte se sélectionne. */
::selection { background: var(--vz-terracotta) !important; color: var(--vz-cream-light) !important; }
::-moz-selection { background: var(--vz-terracotta) !important; color: var(--vz-cream-light) !important; }
img { max-width: 100%; height: auto; display: block; }
.vz-container {
max-width: var(--vz-container);
margin-inline: auto;
padding-inline: var(--vz-gutter);
}
.vz-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--vz-font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--vz-terracotta);
}
.vz-eyebrow::before {
content: '';
width: 28px;
height: 1px;
background: currentColor;
}
.vz-section--dark .vz-eyebrow { color: var(--vz-gold); }
.vz-title-accent {
font-style: italic;
color: var(--vz-terracotta);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.vz-section--dark .vz-title-accent { color: var(--vz-gold); }
.vz-title-underline {
position: relative;
display: inline-block;
}
.vz-title-underline::after {
content: '';
position: absolute;
left: 6%;
right: 6%;
bottom: 4px;
height: 8px;
background: var(--vz-terracotta);
opacity: .35;
z-index: -1;
border-radius: 4px;
}
/* -------- Boutons -------- */
.vz-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--vz-font-sans);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 16px 28px;
border-radius: var(--vz-radius);
border: 1px solid transparent;
cursor: pointer;
transition: all .3s ease;
line-height: 1;
}
.vz-btn--primary {
background: var(--vz-terracotta);
color: var(--vz-cream-light);
}
.vz-btn--primary:hover {
background: var(--vz-terracotta-dk);
color: var(--vz-cream-light);
transform: translateY(-1px);
}
.vz-btn--sage {
background: var(--vz-sage);
color: var(--vz-cream-light);
}
.vz-btn--sage:hover { background: #6f8170; color: var(--vz-cream-light); }
.vz-btn--ghost {
background: transparent;
color: var(--vz-ivory);
border-color: var(--vz-gold-soft);
}
.vz-btn--ghost:hover {
background: var(--vz-gold);
color: var(--vz-charcoal);
border-color: var(--vz-gold);
}
.vz-btn--ghost-dark {
background: var(--vz-cream-light);
color: var(--vz-charcoal);
border-color: var(--vz-charcoal);
}
.vz-btn--ghost-dark:hover { background: var(--vz-charcoal); color: var(--vz-cream-light); }
/* -------- Sections -------- */
.vz-section {
padding: clamp(4rem, 9vw, 7rem) 0;
}
.vz-section--dark {
background: var(--vz-charcoal);
color: var(--vz-ivory);
}
.vz-section--dark h1,
.vz-section--dark h2,
.vz-section--dark h3 { color: var(--vz-ivory); }
.vz-section--cream { background: var(--vz-cream-light); }
.vz-section--cream-warm { background: var(--vz-cream); }
.vz-section__head {
max-width: 720px;
margin: 0 auto clamp(2.5rem, 5vw, 4rem);
text-align: center;
}
.vz-section__head .vz-eyebrow { margin-bottom: 1.25rem; }
.vz-section__head h2 { margin-bottom: 1rem; }
.vz-section__head p {
font-size: 1.05rem;
color: var(--vz-text-muted);
max-width: 580px;
margin: 0 auto;
}
.vz-section--dark .vz-section__head p { color: rgba(245, 233, 212, 0.7); }
/* ========== 1. HERO ÉDITORIAL ========== */
.vz-hero {
position: relative;
min-height: 92vh;
background: var(--vz-charcoal);
color: var(--vz-ivory);
overflow: hidden;
display: flex;
flex-direction: column;
}
.vz-hero__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
}
.vz-hero__bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to right,
rgba(26, 22, 18, 0.85) 0%,
rgba(26, 22, 18, 0.55) 40%,
rgba(26, 22, 18, 0.25) 100%
);
}
.vz-hero__topbar {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
padding: 2rem var(--vz-gutter) 0;
font-family: var(--vz-font-serif);
font-style: italic;
font-size: 14px;
color: var(--vz-gold-soft);
}
.vz-hero__topbar small {
display: block;
font-style: normal;
font-family: var(--vz-font-sans);
letter-spacing: 0.25em;
font-size: 10px;
text-transform: uppercase;
color: var(--vz-gold);
margin-bottom: 4px;
}
.vz-hero__inner {
position: relative;
z-index: 2;
flex: 1;
display: flex;
align-items: center;
padding: 4rem var(--vz-gutter);
max-width: var(--vz-container);
margin-inline: auto;
width: 100%;
}
.vz-hero__content { max-width: 760px; }
.vz-hero__baseline {
color: var(--vz-gold);
font-family: var(--vz-font-sans);
font-size: 12px;
letter-spacing: 0.3em;
text-transform: uppercase;
margin-bottom: 1.5rem;
display: inline-flex;
align-items: center;
gap: 14px;
}
.vz-hero__baseline::before {
content: '';
display: inline-block;
width: 32px;
height: 2px;
background: var(--vz-gold);
}
.vz-hero__title {
font-family: var(--vz-font-serif);
font-size: clamp(4.5rem, 12vw, 11rem);
font-weight: 300;
font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1;
line-height: 0.95;
letter-spacing: -0.04em;
color: var(--vz-cream-light);
margin: 0;
}
.vz-hero__title-dot { color: var(--vz-gold); }
.vz-hero__desc {
font-family: var(--vz-font-serif);
font-style: italic;
font-size: clamp(1.1rem, 1.8vw, 1.4rem);
line-height: 1.5;
color: rgba(245, 233, 212, 0.85);
max-width: 560px;
margin: 2rem 0 2.5rem;
}
.vz-hero__cta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.vz-hero__credit {
position: absolute;
bottom: 1.5rem;
right: var(--vz-gutter);
z-index: 2;
text-align: right;
font-family: var(--vz-font-serif);
font-style: italic;
font-size: 14px;
color: rgba(245, 233, 212, 0.7);
max-width: 280px;
}
.vz-hero__credit small {
display: block;
font-style: normal;
font-family: var(--vz-font-sans);
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--vz-gold);
margin-bottom: 4px;
}
/* ========== 1.5. NOUVEAUTÉS DE NOS CRÉATRICES ========== */
.vz-new { background: var(--vz-cream-light); }
.vz-new__tabs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.5rem 2rem;
margin-bottom: 3rem;
}
.vz-new__tab,
.vz-new__tab:hover,
.vz-new__tab:focus,
.vz-new__tab:active,
.vz-new__tab.is-active {
font-family: var(--vz-font-sans) !important;
font-size: 11px !important;
letter-spacing: 0.25em !important;
text-transform: uppercase !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 8px 4px !important;
cursor: pointer;
position: relative;
transition: color .2s ease;
border-radius: 0 !important;
color: var(--vz-text-muted) !important;
}
.vz-new__tab:hover { color: var(--vz-charcoal) !important; }
.vz-new__tab.is-active {
color: var(--vz-charcoal) !important;
font-weight: 600 !important;
}
.vz-new__tab.is-active::after {
content: '';
position: absolute;
left: 4px;
right: 4px;
bottom: 0;
height: 1px;
background: var(--vz-terracotta);
}
.vz-new__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.vz-prod {
display: block;
transition: transform .35s ease;
}
.vz-prod.is-hidden { display: none; }
.vz-prod:hover { transform: translateY(-4px); }
.vz-prod__media {
aspect-ratio: 4 / 5;
background-color: var(--vz-cream-warm);
background-size: cover;
background-position: center;
border-radius: var(--vz-radius);
position: relative;
overflow: hidden;
margin-bottom: 1rem;
}
.vz-prod__badge {
position: absolute;
top: 14px;
left: 14px;
font-family: var(--vz-font-sans);
font-size: 10px;
letter-spacing: 0.25em;
text-transform: uppercase;
background: var(--vz-cream-light);
color: var(--vz-charcoal);
padding: 5px 10px;
border-radius: 3px;
}
.vz-prod__info { text-align: left; }
.vz-prod__vendor {
font-family: var(--vz-font-sans);
font-size: 10px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--vz-text-muted);
display: block;
margin-bottom: 0.4rem;
}
.vz-prod__name {
font-family: var(--vz-font-serif);
font-size: 1.1rem;
color: var(--vz-charcoal);
margin: 0 0 0.3rem;
}
.vz-prod__price {
font-family: var(--vz-font-sans);
font-size: 14px;
color: var(--vz-text-dark);
font-weight: 500;
}
/* ========== 2. CATÉGORIES — « NOS ESSENTIELS » (rectangles + numéro) ========== */
.vz-essentials { background: var(--vz-cream); }
.vz-essentials__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.vz-ess {
display: block;
text-align: left;
}
.vz-ess__media {
aspect-ratio: 3 / 4;
background-color: var(--vz-cream-warm);
background-size: cover;
background-position: center;
border-radius: var(--vz-radius);
position: relative;
overflow: hidden;
transition: transform .5s ease, box-shadow .5s ease;
}
.vz-ess:hover .vz-ess__media {
transform: translateY(-4px);
box-shadow: var(--vz-shadow-card);
}
.vz-ess__num {
position: absolute;
top: 14px;
left: 14px;
font-family: var(--vz-font-serif);
font-style: italic;
font-size: 0.95rem;
color: var(--vz-cream-light);
background: rgba(26, 22, 18, 0.55);
padding: 4px 12px;
border-radius: 3px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.vz-ess__title {
font-family: var(--vz-font-serif);
font-size: 1.5rem;
margin: 1.25rem 0 0.5rem;
color: var(--vz-charcoal);
}
.vz-ess__cta {
font-family: var(--vz-font-sans);
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--vz-terracotta);
font-weight: 500;
}
/* Petit diviseur décoratif (utilisé sur "Nos essentiels") */
.vz-deco-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin: 1rem 0 1.5rem;
}
.vz-deco-divider span {
width: 48px;
height: 1px;
background: var(--vz-terracotta);
opacity: .5;
}
.vz-deco-divider i {
width: 5px;
height: 5px;
background: var(--vz-terracotta);
transform: rotate(45deg);
}
/* ========== 2bis. ANCIENNES CATÉGORIES — ARCHES (gardées au cas où) ========== */
.vz-categories {
background: var(--vz-cream);
}
.vz-categories__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(1rem, 2vw, 2rem);
}
.vz-cat {
display: block;
text-align: center;
}
.vz-cat__media {
aspect-ratio: 3 / 4;
background: var(--vz-cream-warm);
background-size: cover;
background-position: center;
border-radius: var(--vz-radius-arch);
overflow: hidden;
position: relative;
transition: transform .5s ease, box-shadow .5s ease;
}
.vz-cat:hover .vz-cat__media {
transform: translateY(-6px);
box-shadow: var(--vz-shadow-card);
}
.vz-cat__media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(45,36,28,0.25));
}
.vz-cat__title {
font-family: var(--vz-font-serif);
font-size: 1.6rem;
margin: 1.5rem 0 0.5rem;
color: var(--vz-charcoal);
}
.vz-cat__count {
font-family: var(--vz-font-serif);
font-style: italic;
font-size: 0.95rem;
color: var(--vz-text-muted);
}
/* ========== 3. VENDEUSES — CARDS ATELIER ========== */
.vz-vendors { background: var(--vz-cream-light); }
.vz-vendors__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.vz-vendor {
background: var(--vz-cream);
border-radius: var(--vz-radius-lg);
padding: 2rem 1.5rem;
text-align: center;
transition: transform .3s ease, box-shadow .3s ease;
}
.vz-vendor:hover {
transform: translateY(-4px);
box-shadow: var(--vz-shadow-card);
}
.vz-vendor__avatar {
width: 90px;
height: 90px;
border-radius: 50%;
background: var(--vz-cream-warm);
background-size: cover;
background-position: center;
margin: 0 auto 1.25rem;
border: 3px solid var(--vz-cream-light);
box-shadow: 0 0 0 1px var(--vz-border-soft);
}
.vz-vendor__name {
font-family: var(--vz-font-serif);
font-size: 1.35rem;
color: var(--vz-charcoal);
margin: 0 0 0.4rem;
}
.vz-vendor__meta {
font-family: var(--vz-font-serif);
font-style: italic;
font-size: 0.9rem;
color: var(--vz-text-muted);
margin-bottom: 1.25rem;
}
.vz-vendor__meta .star { color: var(--vz-terracotta); }
.vz-vendor__stats {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px solid var(--vz-border-soft);
padding-top: 1.25rem;
margin-bottom: 1.25rem;
}
.vz-vendor__stat { text-align: center; }
.vz-vendor__stat-num {
font-family: var(--vz-font-serif);
font-size: 1.5rem;
color: var(--vz-terracotta);
display: block;
line-height: 1;
margin-bottom: 4px;
}
.vz-vendor__stat-label {
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--vz-text-muted);
}
.vz-vendor__cta {
font-family: var(--vz-font-sans);
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--vz-terracotta);
font-weight: 500;
}
.vz-vendor__cta::after { content: ' →'; }
.vz-vendors__more {
text-align: center;
margin-top: 3rem;
}
/* Swiper customisation pour la section Créatrices */
.vz-vendors__swiper {
position: relative;
padding: 0 0 3.5rem;
overflow: hidden;
}
.vz-vendors__swiper .swiper-wrapper {
display: flex;
align-items: stretch;
}
.vz-vendors__swiper .vz-vendor {
height: auto;
display: flex;
flex-direction: column;
}
.vz-vendors__nav {
position: absolute;
top: 45%;
transform: translateY(-50%);
width: 44px;
height: 44px;
background: var(--vz-cream-light) !important;
border: 1px solid var(--vz-border-soft);
border-radius: 50%;
color: var(--vz-charcoal) !important;
z-index: 10;
box-shadow: var(--vz-shadow-soft);
cursor: pointer;
transition: all .2s ease;
}
.vz-vendors__nav:hover {
background: var(--vz-terracotta) !important;
color: var(--vz-cream-light) !important;
border-color: var(--vz-terracotta);
}
.vz-vendors__nav::after {
font-size: 16px !important;
font-weight: 700;
}
.vz-vendors__nav--prev { left: -8px; }
.vz-vendors__nav--next { right: -8px; }
@media (max-width: 700px) {
.vz-vendors__nav { display: none; } /* swipe touch suffit sur mobile */
}
.vz-vendors__pagination {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.vz-vendors__pagination .swiper-pagination-bullet {
width: 8px;
height: 8px;
background: var(--vz-text-muted);
opacity: 0.35;
transition: all .2s ease;
}
.vz-vendors__pagination .swiper-pagination-bullet-active {
background: var(--vz-terracotta);
opacity: 1;
width: 24px;
border-radius: 4px;
}
.vz-pill {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--vz-font-sans);
font-size: 14px;
background: var(--vz-cream-light);
border: 1px solid var(--vz-border-soft);
padding: 14px 28px;
border-radius: 999px;
color: var(--vz-charcoal);
transition: all .25s ease;
}
.vz-pill:hover {
background: var(--vz-terracotta);
color: var(--vz-cream-light);
border-color: var(--vz-terracotta);
}
.vz-pill::after { content: '→'; }
/* ========== 4. SPLIT ACHETEUSES / VENDEUSES ========== */
.vz-split {
background: var(--vz-cream);
}
.vz-split__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.vz-split__col {
border-radius: var(--vz-radius-lg);
padding: clamp(2rem, 4vw, 3.5rem);
}
.vz-split__col--light {
background: var(--vz-cream-light);
color: var(--vz-text-dark);
}
.vz-split__col--dark {
background: var(--vz-brown-dark);
color: var(--vz-cream-light);
}
.vz-split__col--dark h2,
.vz-split__col--dark h3 { color: var(--vz-cream-light); }
.vz-split__col h2 {
font-size: clamp(1.7rem, 2.5vw, 2.3rem);
line-height: 1.15;
margin: 1rem 0 2rem;
}
.vz-steps { list-style: none; margin: 0; padding: 0; }
.vz-step {
display: grid;
grid-template-columns: 48px 1fr;
gap: 1.25rem;
padding: 1.25rem 0;
border-bottom: 1px solid currentColor;
border-color: rgba(45, 36, 28, 0.12);
}
.vz-split__col--dark .vz-step { border-color: rgba(245, 233, 212, 0.15); }
.vz-step:last-child { border-bottom: none; padding-bottom: 1.5rem; }
.vz-step__num {
font-family: var(--vz-font-serif);
font-style: italic;
font-size: 1.5rem;
color: var(--vz-terracotta);
line-height: 1;
}
.vz-split__col--dark .vz-step__num { color: var(--vz-gold); }
.vz-step h3 {
font-size: 1.1rem;
margin: 0 0 0.4rem;
}
.vz-step p {
font-size: 0.95rem;
color: var(--vz-text-muted);
margin: 0;
}
.vz-split__col--dark .vz-step p { color: rgba(245, 233, 212, 0.7); }
/* ========== 5. POURQUOI VAYZONE — SOMBRE ========== */
.vz-pillars__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: rgba(245, 233, 212, 0.1);
border-radius: var(--vz-radius-lg);
overflow: hidden;
}
.vz-pillar {
background: var(--vz-charcoal-soft);
padding: 2.5rem 2rem;
transition: background .3s ease;
}
.vz-pillar:hover { background: #2a2218; }
.vz-pillar__icon {
width: 36px;
height: 36px;
color: var(--vz-gold);
margin-bottom: 1.5rem;
}
.vz-pillar h3 {
font-size: 1.25rem;
color: var(--vz-ivory);
margin: 0 0 0.75rem;
}
.vz-pillar p {
font-size: 0.95rem;
color: rgba(245, 233, 212, 0.65);
line-height: 1.55;
margin: 0 0 1.25rem;
}
.vz-pillar__badge {
display: inline-block;
font-family: var(--vz-font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--vz-gold);
border: 1px solid var(--vz-gold);
padding: 6px 14px;
border-radius: 4px;
}
/* Pourquoi-section : titre central éditorial */
.vz-pillars-title {
text-align: center;
margin-bottom: 4rem;
}
.vz-pillars-title h2 {
font-size: clamp(2rem, 4vw, 3rem);
color: var(--vz-cream-light);
margin-bottom: 0;
}
.vz-pillars-title__deco {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 1.25rem;
}
.vz-pillars-title__deco span {
width: 60px;
height: 1px;
background: var(--vz-gold);
}
.vz-pillars-title__deco i {
width: 6px;
height: 6px;
background: var(--vz-gold);
transform: rotate(45deg);
}
/* ========== HEADER VAYZONE ========== */
.vz-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--vz-cream-light);
border-bottom: 1px solid var(--vz-border-soft);
}
.vz-header__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 1.25rem var(--vz-gutter);
max-width: var(--vz-container);
margin-inline: auto;
gap: 2rem;
}
.vz-header__nav {
display: flex;
gap: 2rem;
list-style: none;
margin: 0;
padding: 0;
}
.vz-header__nav a {
font-family: var(--vz-font-sans);
font-size: 12px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--vz-charcoal);
font-weight: 500;
}
.vz-header__brand {
font-family: var(--vz-font-serif);
font-size: 1.8rem;
letter-spacing: 0.15em;
color: var(--vz-charcoal);
text-transform: uppercase;
font-weight: 400;
}
.vz-header__utils {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 1.25rem;
}
.vz-header__util {
font-family: var(--vz-font-sans);
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.vz-header__icon {
width: 22px; height: 22px;
color: var(--vz-charcoal);
}
/* ===== Sélecteur de langues ===== */
.vz-langswitch { position: relative; }
.vz-langswitch__toggle {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--vz-cream);
border: 0;
padding: 8px 14px;
border-radius: 999px;
font-family: var(--vz-font-sans);
font-size: 12px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--vz-charcoal);
cursor: pointer;
transition: background .2s ease;
}
.vz-langswitch__toggle:hover { background: var(--vz-cream-warm); }
.vz-langswitch__icon {
width: 18px;
height: 18px;
color: var(--vz-sage);
}
.vz-langswitch__menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: var(--vz-cream-light);
border: 1px solid var(--vz-border-soft);
border-radius: var(--vz-radius);
box-shadow: var(--vz-shadow-card);
min-width: 180px;
padding: 0.5rem;
list-style: none;
margin: 0;
z-index: 110;
}
.vz-langswitch__menu[hidden] { display: none; }
.vz-langswitch__menu li { list-style: none; margin: 0; }
.vz-langswitch__opt {
display: block;
padding: 10px 14px;
font-family: var(--vz-font-sans);
font-size: 14px;
color: var(--vz-text-dark);
border-radius: 6px;
transition: background .15s ease;
}
.vz-langswitch__opt:hover { background: var(--vz-cream); color: var(--vz-terracotta); }
.vz-langswitch__opt.is-active { color: var(--vz-text-muted); pointer-events: none; }
/* Version stacked (mobile menu) */
.vz-langswitch--stacked {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(245,233,212,0.15);
}
.vz-mobile-menu .vz-langswitch--stacked .vz-langswitch__opt {
font-family: var(--vz-font-sans);
font-size: 13px;
letter-spacing: 0.15em;
text-transform: uppercase;
background: rgba(245,233,212,0.08);
color: var(--vz-cream-light);
padding: 8px 16px;
border-radius: 999px;
}
.vz-mobile-menu .vz-langswitch--stacked .vz-langswitch__opt.is-active {
background: var(--vz-gold);
color: var(--vz-charcoal);
}
.vz-mobile-menu__langs { list-style: none; }
.vz-burger {
display: none;
background: none;
border: 0;
cursor: pointer;
padding: 8px;
}
.vz-burger span {
display: block;
width: 24px;
height: 2px;
background: var(--vz-charcoal);
margin: 5px 0;
transition: transform .3s, opacity .3s;
}
/* ========== FOOTER ========== */
.vz-footer {
background: var(--vz-charcoal);
color: rgba(245, 233, 212, 0.7);
padding: 4rem 0 2rem;
}
.vz-footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
margin-bottom: 3rem;
}
.vz-footer__brand {
font-family: var(--vz-font-serif);
font-size: 2rem;
color: var(--vz-cream-light);
letter-spacing: 0.1em;
margin-bottom: 1rem;
}
.vz-footer h4 {
font-family: var(--vz-font-sans);
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--vz-gold);
margin: 0 0 1.25rem;
font-weight: 500;
}
.vz-footer ul { list-style: none; margin: 0; padding: 0; }
.vz-footer li { margin-bottom: 0.6rem; font-size: 14px; }
.vz-footer__bottom {
border-top: 1px solid rgba(245, 233, 212, 0.1);
padding-top: 1.5rem;
display: flex;
justify-content: space-between;
font-size: 12px;
color: rgba(245, 233, 212, 0.4);
}
/* ========== RESPONSIVE ========== */
@media (max-width: 980px) {
.vz-categories__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.vz-vendors__grid { grid-template-columns: repeat(2, 1fr); }
.vz-pillars__grid { grid-template-columns: repeat(2, 1fr); }
.vz-new__grid { grid-template-columns: repeat(2, 1fr); }
.vz-essentials__grid { grid-template-columns: repeat(2, 1fr); }
.vz-split__grid { grid-template-columns: 1fr; }
.vz-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.vz-header__inner { grid-template-columns: auto 1fr auto; gap: 1rem; }
.vz-header__nav-wrap { order: -1; }
.vz-header__nav { display: none; }
.vz-header__brand { font-size: 1.4rem; letter-spacing: 0.12em; text-align: center; }
.vz-burger { display: block; }
.vz-header__util { display: none; } /* on garde uniquement les icônes en mobile */
.vz-header__utils { gap: 0.9rem; }
.vz-hero { min-height: 78vh; }
.vz-hero__title { font-size: clamp(3.5rem, 14vw, 8rem); }
}
@media (max-width: 600px) {
.vz-categories__grid,
.vz-vendors__grid,
.vz-pillars__grid {
grid-template-columns: 1fr;
}
/* « Nos essentiels » reste en 2 colonnes en mobile pour l'esthétique
(demande cliente 2026-05-17 : rendu plus compact comme la section Nouveautés) */
.vz-essentials__grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.vz-ess__title { font-size: 1.1rem; margin: 0.9rem 0 0.3rem; }
.vz-ess__cta { font-size: 10px; letter-spacing: 0.25em; }
.vz-ess__num { font-size: 0.8rem; padding: 3px 8px; top: 10px; left: 10px; }
.vz-new__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.vz-new__tabs { gap: 0.25rem 1.25rem; margin-bottom: 2rem; }
.vz-prod__name { font-size: 0.95rem; }
.vz-prod__price { font-size: 13px; }
.vz-footer__grid { grid-template-columns: 1fr; }
.vz-hero__inner { padding: 2.5rem var(--vz-gutter); }
.vz-hero__title {
font-size: clamp(2.8rem, 16vw, 5.5rem);
line-height: 1;
}
.vz-hero__desc { font-size: 1rem; }
.vz-hero__topbar { padding-top: 1.25rem; font-size: 12px; }
.vz-hero__credit { position: static; text-align: left; max-width: none; padding: 1.5rem var(--vz-gutter) 2rem; }
.vz-hero__cta { flex-direction: column; align-items: stretch; }
.vz-hero__cta .vz-btn { justify-content: center; }
.vz-footer__bottom { flex-direction: column; gap: 0.5rem; }
.vz-header { padding-block: 0; }
.vz-header__inner { padding: 0.9rem var(--vz-gutter); gap: 0.5rem; }
.vz-header__brand { font-size: 1.15rem; letter-spacing: 0.1em; }
.vz-header__icon { width: 20px; height: 20px; }
}
/* ========== WooCommerce — overrides Vayzone ========== */
/* Messages info / no products — habillés Vayzone */
.woocommerce-info,
.woocommerce-message,
.woocommerce-noreviews,
.woocommerce-no-products-found {
background: var(--vz-cream) !important;
border: 1px solid var(--vz-border-soft) !important;
border-top: none !important;
border-left: 3px solid var(--vz-terracotta) !important;
color: var(--vz-text-dark) !important;
padding: 2rem 2.25rem !important;
border-radius: var(--vz-radius) !important;
font-family: var(--vz-font-sans);
font-size: 1rem;
display: flex;
align-items: center;
gap: 1rem;
box-shadow: var(--vz-shadow-soft);
margin: 2rem 0 !important;
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-noreviews::before,
.woocommerce-no-products-found::before {
content: '' !important;
display: inline-block;
width: 32px;
height: 32px;
background: var(--vz-terracotta);
-webkit-mask: url("data:image/svg+xml;utf8,") center / 60% no-repeat;
mask: url("data:image/svg+xml;utf8,") center / 60% no-repeat;
flex-shrink: 0;
color: inherit;
border: 0;
border-radius: 50%;
position: static;
}
/* Cas spécifique : "Aucun produit ne correspond à votre sélection" */
.woocommerce-info[role="status"]::before {
-webkit-mask: url("data:image/svg+xml;utf8,") center / 60% no-repeat;
mask: url("data:image/svg+xml;utf8,") center / 60% no-repeat;
}
/* Page boutique / catégorie — head plus aéré + wrapper container */
.archive.woocommerce .ast-woocommerce-container,
.woocommerce-page .ast-woocommerce-container,
.woocommerce-page #primary,
.woocommerce-page .site-content,
.single-product .ast-woocommerce-container {
padding-top: clamp(2rem, 5vw, 4rem) !important;
padding-bottom: clamp(3rem, 6vw, 5rem) !important;
background: var(--vz-cream-light);
}
.archive.woocommerce .ast-woocommerce-container,
.woocommerce-page .ast-woocommerce-container,
.single-product .ast-woocommerce-container {
max-width: var(--vz-container) !important;
margin-inline: auto !important;
padding-inline: var(--vz-gutter) !important;
}
.woocommerce-products-header__title.page-title,
.archive.woocommerce h1.page-title,
.woocommerce-page h1.entry-title {
font-family: var(--vz-font-serif) !important;
font-size: clamp(2.2rem, 4vw, 3rem) !important;
color: var(--vz-charcoal) !important;
margin-bottom: 1.5rem !important;
}
.woocommerce-result-count {
font-family: var(--vz-font-sans);
font-size: 12px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--vz-text-muted) !important;
}
.woocommerce-ordering select {
border: 1px solid var(--vz-border-soft) !important;
background: var(--vz-cream-light) !important;
font-family: var(--vz-font-sans);
padding: 8px 12px;
border-radius: var(--vz-radius);
}
/* Onglets fiche produit (Description, Avis, etc.) — palette Vayzone au lieu du bleu Astra */
.woocommerce-tabs.wc-tabs-wrapper .wc-tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs {
border-bottom: 1px solid var(--vz-border-soft) !important;
padding-left: 0 !important;
}
.woocommerce-tabs.wc-tabs-wrapper .wc-tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: transparent !important;
border: 0 !important;
border-top: 2px solid transparent !important;
border-radius: 0 !important;
margin: 0 1.5rem 0 0 !important;
padding: 0 !important;
}
.woocommerce-tabs.wc-tabs-wrapper .wc-tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
font-family: var(--vz-font-sans) !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
color: var(--vz-text-muted) !important;
padding: 14px 0 !important;
display: inline-block;
}
.woocommerce-tabs.wc-tabs-wrapper .wc-tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
border-top: 2px solid var(--vz-terracotta) !important;
}
.woocommerce-tabs.wc-tabs-wrapper .wc-tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--vz-charcoal) !important;
}
.woocommerce-tabs.wc-tabs-wrapper .wc-tabs li::before,
.woocommerce-tabs.wc-tabs-wrapper .wc-tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
display: none !important;
}
/* Cards produit grille — habillage Vayzone */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: var(--vz-font-serif);
color: var(--vz-charcoal) !important;
}
.woocommerce ul.products li.product .price {
color: var(--vz-text-dark) !important;
font-size: 1rem !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 1.15rem !important;
padding: 0.5em 0 0.3em !important;
}
/* Boutons WC (Lire la suite, Ajouter au panier, etc.) — palette Vayzone */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .button.product_type_simple,
.woocommerce .button.add_to_cart_button {
background: var(--vz-charcoal) !important;
color: var(--vz-cream-light) !important;
font-family: var(--vz-font-sans) !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
padding: 12px 24px !important;
border-radius: var(--vz-radius) !important;
border: 0 !important;
box-shadow: none !important;
transition: background .2s ease !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce .button.add_to_cart_button:hover {
background: var(--vz-terracotta) !important;
color: var(--vz-cream-light) !important;
}
.woocommerce a.button.added::after {
border-color: var(--vz-cream-light);
}
/* Breadcrumb WooCommerce */
.woocommerce-breadcrumb {
font-family: var(--vz-font-sans);
font-size: 12px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--vz-text-muted);
}
.woocommerce-breadcrumb a:hover { color: var(--vz-terracotta); }
/* ========== YITH Wishlist — styling Vayzone ========== */
/* Bouton wishlist — approche radicale :
1) tout est reset à l'intérieur du wrapper YITH
2) seul le wrapper externe reçoit le pill outline terracotta */
/* 1) Reset complet */
.yith-wcwl-add-to-wishlist,
.yith-wcwl-add-to-wishlist *,
.yith-add-to-wishlist-button-block,
.yith-add-to-wishlist-button-block * {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
padding: 0 !important;
margin: 0 !important;
font-family: var(--vz-font-sans) !important;
color: var(--vz-terracotta) !important;
text-decoration: none !important;
}
/* 2) Seul le wrapper externe a le pill */
.yith-wcwl-add-to-wishlist,
.yith-add-to-wishlist-button-block {
display: inline-flex !important;
align-items: center;
gap: 8px !important;
padding: 10px 18px !important;
border: 1px solid var(--vz-terracotta) !important;
border-radius: 999px !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
transition: all .2s ease !important;
cursor: pointer;
}
.yith-wcwl-add-to-wishlist:hover,
.yith-wcwl-add-to-wishlist:hover *,
.yith-add-to-wishlist-button-block:hover,
.yith-add-to-wishlist-button-block:hover * {
background: var(--vz-terracotta) !important;
color: var(--vz-cream-light) !important;
}
/* Cœur SVG/icône à l'intérieur */
.yith-wcwl-add-to-wishlist svg,
.yith-wcwl-add-to-wishlist .yith-wcwl-icon,
.yith-add-to-wishlist-button-block svg,
.yith-add-to-wishlist-button-block i {
color: inherit !important;
fill: currentColor !important;
width: 14px !important;
height: 14px !important;
}
/* Cœur (icône) — couleur palette */
.yith-wcwl-add-to-wishlist .yith-wcwl-icon {
color: inherit !important;
font-size: 14px !important;
}
/* Mini "wishlist count" si présent dans le header */
.vz-header__util .yith-wcwl-items-count {
font-family: var(--vz-font-sans);
font-size: 11px;
background: var(--vz-terracotta);
color: var(--vz-cream-light);
padding: 2px 6px;
border-radius: 999px;
margin-left: 4px;
}
/* CTA « Parcourir la boutique » sous la wishlist (relie la page au catalogue) */
.vz-fav-cta {
margin: 2.5rem 0 1rem;
text-align: center;
}
.vz-fav-cta.is-empty {
padding: 2rem 1.5rem;
background: var(--vz-cream-light);
border: 1px solid var(--vz-border-soft);
border-radius: var(--vz-radius-lg);
}
.vz-fav-cta__text {
color: var(--vz-text-muted);
margin: 0 0 1.2rem;
font-size: 1rem;
}
.vz-fav-cta__btn {
display: inline-block;
background: var(--vz-charcoal);
color: var(--vz-ivory) !important;
text-decoration: none !important;
padding: .9rem 1.9rem;
border-radius: var(--vz-radius);
text-transform: uppercase;
letter-spacing: .06em;
font-size: .85rem;
font-weight: 600;
transition: background .2s ease;
}
.vz-fav-cta__btn:hover {
background: var(--vz-brown-dark);
}
/* Page Favoris elle-même — habillage du tableau */
.wishlist_table {
border: 1px solid var(--vz-border-soft);
border-radius: var(--vz-radius);
overflow: hidden;
background: var(--vz-cream-light) !important;
}
.wishlist_table thead tr,
.wishlist_table thead th,
.wishlist_table thead th.product-thumbnail {
background: var(--vz-cream) !important;
border-bottom: 1px solid var(--vz-border-soft) !important;
font-family: var(--vz-font-sans) !important;
font-size: 11px !important;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--vz-charcoal) !important;
padding: 14px 18px !important;
}
.wishlist_table thead th.product-thumbnail { width: 70px; }
.wishlist_table .wishlist-empty {
text-align: center !important;
padding: 2.5rem 1rem !important;
font-family: var(--vz-font-serif);
font-style: italic;
color: var(--vz-text-muted) !important;
background: var(--vz-cream-light) !important;
}
.wishlist-title-container h2,
h2.wishlist-title {
font-family: var(--vz-font-serif) !important;
font-size: clamp(1.6rem, 2.5vw, 2.2rem) !important;
color: var(--vz-charcoal) !important;
margin-bottom: 1.5rem !important;
}
/* ========== Page boutique vendeuse — masquer le toggle "Store Closed / horaires" ========== */
/* Demande cliente : les vendeuses risquent de mal configurer ce statut. */
.dokan-store-open-close,
.store-open-close-notice,
.dokan-store-times-wrapper {
display: none !important;
}
/* Bouton "Aller au tableau de bord" sur Mon compte — plus visible (palette Vayzone) */
.woocommerce-MyAccount-content .dokan-account-migration-button,
.woocommerce-MyAccount-content a.button[href*="dashboard"],
.woocommerce-MyAccount-content a.button[href*="tableau-de-bord"] {
background: var(--vz-terracotta) !important;
color: var(--vz-cream-light) !important;
font-family: var(--vz-font-sans) !important;
font-size: 13px !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
padding: 14px 28px !important;
border-radius: var(--vz-radius) !important;
display: inline-block !important;
margin-top: 0.5rem !important;
}
.woocommerce-MyAccount-content a.button[href*="dashboard"]:hover,
.woocommerce-MyAccount-content a.button[href*="tableau-de-bord"]:hover {
background: var(--vz-charcoal) !important;
}
/* ========== Inscription vendeuse — masquer le champ "URL de la boutique" ========== */
/* Le slug est auto-généré depuis le nom de la boutique (voir vayzone.js).
Demande cliente 2026-05-17 : formulaire le plus simple possible. */
.form-row:has(#seller-url),
p.form-row:has(#seller-url) {
display: none !important;
}
/* ========================================================================
Tableau de bord vendeuse Dokan — habillage Vayzone
Dokan lit des variables CSS d'apparence (fallback violet #7047eb / indigo
#322067). On les redéfinit avec la palette Vayzone : boutons, liens et
menu latéral passent en terracotta/charbon d'un coup.
======================================================================== */
:root {
/* Boutons principaux */
--dokan-button-background-color: #c97b63; /* terracotta */
--dokan-button-hover-background-color: #a8624d; /* terracotta foncé */
--dokan-button-text-color: #fbf5ec;
--dokan-button-hover-text-color: #ffffff;
--dokan-button-border-color: #c97b63;
--dokan-button-hover-border-color: #a8624d;
/* Boutons secondaires (contour) */
--dokan-button-secondary-text-color: #a8624d;
--dokan-button-secondary-hover-text-color: #a8624d;
--dokan-button-secondary-border-color: #c97b63;
--dokan-button-secondary-hover-border-color:#a8624d;
/* Liens & onglets */
--dokan-link-color: #a8624d;
--dokan-link-hover-color: #1a1612;
/* Menu latéral */
--dokan-sidebar-background-color: #1a1612; /* charbon */
--dokan-sidebar-hover-background-color: #c97b63; /* item actif terracotta */
--dokan-sidebar-hover-text-color: #ffffff;
}
/* ===== Pleine largeur du tableau de bord =====
Le dashboard est rendu via page.php, dont le .vz-container porte un style
INLINE `max-width:880px` (pensé pour les pages de texte légales). C'est lui
qui bridait le module Dokan à 880px centré et coupait les tableaux. On
élargit donc le conteneur sur le dashboard — le !important bat le style
inline — et on laisse le wrap Dokan occuper toute la largeur disponible. */
body.dokan-dashboard .vz-container {
max-width: 100% !important;
padding-inline: clamp(1rem, 2.5vw, 2.5rem);
}
body.dokan-dashboard .vz-page-content { max-width: 100%; }
/* Filet de sécurité si une vue passe par les conteneurs Astra */
body.dokan-dashboard .ast-container,
body.dokan-dashboard .site-content > .ast-container,
body.dokan-dashboard #primary,
body.dokan-dashboard .entry-content,
body.dokan-dashboard .ast-article-single,
body.dokan-dashboard article.page {
max-width: 100% !important;
width: 100% !important;
padding-inline: 0 !important;
}
body.dokan-dashboard .dokan-dashboard-wrap {
max-width: none; /* remplit toute la largeur du conteneur */
margin: 1.5rem 0;
padding: 0;
font-family: var(--vz-font-sans);
}
/* Tableaux du dashboard : pleine largeur, et défilement horizontal si le
contenu dépasse — au lieu d'être coupé (colonnes Prix/Stock tronquées). */
body.dokan-dashboard .dokan-dashboard-content .dokan-table { width: 100%; }
body.dokan-dashboard .dokan-product-listing-area,
body.dokan-dashboard .dokan-dashboard-product-listing-wrapper,
body.dokan-dashboard .dokan-orders-content,
body.dokan-dashboard .dokan-coupons-content {
overflow-x: auto;
}
/* Titres de section du dashboard en serif Vayzone */
body.dokan-dashboard .dokan-dashboard-content .entry-title,
body.dokan-dashboard .dokan-dashboard-content h1.entry-title {
font-family: var(--vz-font-serif);
color: var(--vz-charcoal);
}
/* Boutons CTA Dokan — le violet #7047EB est codé en dur dans style.css
(pas via variable), on le force donc explicitement en terracotta. */
body.dokan-dashboard input[type='submit'].dokan-btn-theme,
body.dokan-dashboard button.dokan-btn-theme,
body.dokan-dashboard a.dokan-btn-theme,
body.dokan-dashboard .dokan-btn-theme {
background-color: var(--vz-terracotta) !important;
border-color: var(--vz-terracotta) !important;
color: #fff !important;
}
body.dokan-dashboard .dokan-btn-theme:hover,
body.dokan-dashboard .dokan-btn-theme:focus,
body.dokan-dashboard .dokan-btn-theme:active,
body.dokan-dashboard .dokan-btn-theme.active,
body.dokan-dashboard a.dokan-btn-theme:hover {
background-color: var(--vz-terracotta-dk) !important;
border-color: var(--vz-terracotta-dk) !important;
color: #fff !important;
}
body.dokan-dashboard .dokan-btn-theme .badge { color: var(--vz-terracotta) !important; }
/* Filet de sécurité : items de menu latéral (actif + survol, codés en dur) */
body.dokan-dashboard .dokan-dashboard-menu li.active,
body.dokan-dashboard .dokan-dashboard-menu li.active > a,
body.dokan-dashboard .dokan-dashboard-menu li:hover,
body.dokan-dashboard .dokan-dashboard-menu li:hover > a,
body.dokan-dashboard .dokan-dashboard-menu li.dokan-common-links a:hover {
background-color: var(--vz-terracotta) !important;
color: #fff !important;
}
/* Onglets de filtre actifs (Tous / Publié / Approuvés…) */
body.dokan-dashboard .dokan-listing-filter .dokan-left li.active a,
body.dokan-dashboard .dokan-listing-filter li.active a {
color: var(--vz-terracotta-dk) !important;
border-color: var(--vz-terracotta) !important;
}
/* ========== Champ « État de l'article » (Seconde main) ========== */
.vz-condition-field { display: none; }
.vz-condition-field.is-visible { display: block; }
.vz-condition-badge {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 12px 0;
padding: 6px 14px;
border: 1px solid var(--vz-sage);
border-radius: 999px;
font-family: var(--vz-font-sans);
font-size: 13px;
color: var(--vz-text-dark);
background: rgba(138, 154, 133, 0.10);
}
.vz-condition-badge__label {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 11px;
color: var(--vz-sage);
font-weight: 600;
}
/* ========== Barre de catégories + méga-menu (desktop) ========== */
.vz-catbar {
position: relative;
border-top: 1px solid var(--vz-border-soft);
background: var(--vz-cream-light);
}
.vz-catbar__list {
display: flex;
justify-content: center;
flex-wrap: wrap;
/* Gap resserré pour faire tenir 9 catégories sur une ligne en desktop ;
flex-wrap garde un repli centré propre si une langue (RU) déborde. */
gap: clamp(0.6rem, 1.5vw, 1.5rem);
list-style: none;
margin: 0 auto;
padding: 0 var(--vz-gutter);
max-width: var(--vz-container);
}
.vz-catbar__item { position: relative; }
.vz-catbar__link {
display: block;
padding: 13px 2px;
font-family: var(--vz-font-sans);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--vz-charcoal);
white-space: nowrap;
}
.vz-catbar__item:hover .vz-catbar__link,
.vz-catbar__item:focus-within .vz-catbar__link { color: var(--vz-terracotta); }
.vz-mega {
position: absolute;
left: 0; top: 100%;
max-width: 92vw;
background: var(--vz-cream-light);
border: 1px solid var(--vz-border-soft);
border-top: 2px solid var(--vz-terracotta);
box-shadow: var(--vz-shadow-card);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
z-index: 150;
}
/* Les derniers items s'ouvrent vers la gauche pour ne pas déborder à droite */
.vz-catbar__item:nth-last-child(-n+2) .vz-mega { left: auto; right: 0; }
.vz-catbar__item:hover .vz-mega,
.vz-catbar__item:focus-within .vz-mega {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.vz-mega__inner {
padding: 1.6rem 2rem;
display: flex;
gap: 2.5rem;
}
.vz-mega__inner--flat {
display: grid;
grid-template-columns: repeat(2, minmax(150px, 1fr));
gap: 0.5rem 2rem;
}
.vz-mega__head {
display: block;
font-family: var(--vz-font-serif);
font-size: 1.05rem;
color: var(--vz-charcoal);
margin-bottom: 0.6rem;
}
.vz-mega__head:hover { color: var(--vz-terracotta); }
.vz-mega__inner--flat .vz-mega__head { font-size: 0.95rem; margin-bottom: 0; }
.vz-mega__sub { list-style: none; margin: 0; padding: 0; }
.vz-mega__sub li { margin-bottom: 0.35rem; }
.vz-mega__sub a {
font-family: var(--vz-font-sans);
font-size: 13px;
color: var(--vz-text-muted);
}
.vz-mega__sub a:hover { color: var(--vz-terracotta-dk); }
/* Accordéon catégories dans le menu mobile */
.vz-macc__toggle {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
background: none;
border: 0;
color: var(--vz-cream-light);
font-family: var(--vz-font-serif);
font-size: 1.5rem;
padding: 0.3rem 0;
cursor: pointer;
text-align: left;
}
/* Navigation mobile : taper une entrée ne doit jamais sélectionner son texte
(sinon surlignage de sélection bleu disgracieux) ni laisser de halo tactile.
On applique sur tout le panneau + descendants, en !important pour battre
toute règle concurrente. */
.vz-mobile-menu,
.vz-mobile-menu * {
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
-webkit-tap-highlight-color: transparent !important;
}
/* Et par sécurité : aucun fond ne doit colorer l'entrée focus/active/pressée. */
.vz-mobile-menu .vz-macc__toggle,
.vz-mobile-menu .vz-macc__toggle:hover,
.vz-mobile-menu .vz-macc__toggle:focus,
.vz-mobile-menu .vz-macc__toggle:focus-visible,
.vz-mobile-menu .vz-macc__toggle:active,
.vz-mobile-menu a:focus,
.vz-mobile-menu a:active {
background: transparent !important;
box-shadow: none !important;
outline: none !important;
color: var(--vz-cream-light) !important;
}
.vz-macc__chev { transition: transform .2s ease; font-size: 1.6rem; line-height: 1; }
.vz-macc.is-open .vz-macc__chev { transform: rotate(45deg); }
.vz-macc__panel {
list-style: none;
margin: 0 0 0.5rem;
padding-left: 1rem;
max-height: 0;
overflow: hidden;
transition: max-height .35s ease;
}
.vz-macc.is-open .vz-macc__panel { max-height: 2000px; }
.vz-macc__panel li { margin: 0.5rem 0; }
.vz-macc__panel a { font-size: 1.05rem; }
.vz-macc__gc a { font-size: 0.92rem; opacity: 0.8; padding-left: 0.8rem; }
@media (max-width: 980px) {
.vz-catbar { display: none; }
}
/* ========== Pastilles couleur (swatches type Vinted) ========== */
.vz-swatches {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 8px 0;
}
.vz-swatches--labeled {
gap: 8px;
margin: 14px 0;
}
.vz-swatches__title {
font-family: var(--vz-font-sans);
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--vz-text-muted);
margin-right: 4px;
}
.vz-swatch {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1px solid rgba(45, 36, 28, 0.25);
box-shadow: inset 0 0 0 2px #fff;
flex: 0 0 auto;
cursor: default;
}
.vz-swatches--labeled .vz-swatch {
width: 22px;
height: 22px;
}
.vz-swatch__name {
font-family: var(--vz-font-sans);
font-size: 13px;
color: var(--vz-text-dark);
margin-right: 6px;
}
/* Carte boutique : pastilles compactes, sans saut de ligne disgracieux */
.woocommerce ul.products li.product .vz-swatches {
justify-content: center;
margin-top: 6px;
}
/* ---- Sélecteur de variation cliquable (fiche produit variable) ---- */
/* On masque le menu déroulant natif quand on a injecté des pastilles */
.woocommerce .variations td.value:has(.vz-vswatches) > select,
.woocommerce .variations td.value:has(.vz-vswatches) > .stock,
.variations .value:has(.vz-vswatches) select {
display: none !important;
}
.vz-vswatches {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 4px 0;
}
/* Pastilles couleur */
.vz-vswatch--color {
width: 30px;
height: 30px;
padding: 0;
border-radius: 50%;
border: 1px solid rgba(45, 36, 28, 0.25);
box-shadow: inset 0 0 0 2px #fff;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease;
}
.vz-vswatch--color:hover { transform: scale(1.08); }
.vz-vswatch--color.is-selected {
box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--vz-terracotta);
border-color: var(--vz-terracotta);
}
/* Boutons taille */
.vz-vswatch--size {
min-width: 44px;
padding: 8px 14px;
border: 1px solid var(--vz-border-soft);
background: #fff;
border-radius: var(--vz-radius);
font-family: var(--vz-font-sans);
font-size: 14px;
color: var(--vz-text-dark);
cursor: pointer;
transition: all .15s ease;
}
.vz-vswatch--size:hover { border-color: var(--vz-terracotta); }
.vz-vswatch--size.is-selected {
background: var(--vz-terracotta);
border-color: var(--vz-terracotta);
color: #fff;
}
/* État indisponible (combinaison non vendable) */
.vz-vswatch.is-disabled {
opacity: 0.35;
cursor: not-allowed;
position: relative;
}
.vz-vswatch--color.is-disabled::after {
content: '';
position: absolute;
inset: 50% 0 auto 0;
height: 1px;
background: rgba(45, 36, 28, 0.6);
transform: rotate(-45deg);
}
/* ========== Widget Favoris (tableau de bord vendeuse) ========== */
body.dokan-dashboard .vz-favorites .widget-title i { color: var(--vz-terracotta); }
body.dokan-dashboard .vz-fav-body { padding: 16px 20px; font-family: var(--vz-font-sans); }
body.dokan-dashboard .vz-fav-count {
font-family: var(--vz-font-serif);
font-size: 2rem;
color: var(--vz-terracotta);
font-weight: 600;
margin-right: 4px;
}
body.dokan-dashboard .vz-fav-line { font-size: 15px; color: var(--vz-text-dark); margin: 0 0 10px; line-height: 1.4; }
body.dokan-dashboard .vz-fav-top { font-size: 14px; color: var(--vz-text-muted); margin: 0; }
body.dokan-dashboard .vz-fav-top a { color: var(--vz-terracotta-dk); font-weight: 600; }
body.dokan-dashboard .vz-fav-topcount { color: var(--vz-text-muted); }
body.dokan-dashboard .vz-fav-empty { font-size: 14px; color: var(--vz-text-muted); margin: 0; }
/* ========== Mobile menu overlay (active via JS) ========== */
.vz-mobile-menu {
position: fixed;
inset: 0;
background: var(--vz-charcoal);
color: var(--vz-cream-light);
padding: 5rem 2rem;
transform: translateX(100%);
transition: transform .35s ease;
z-index: 200;
/* Le menu peut dépasser la hauteur de l'écran (catégories + sous-catégories) :
on le rend défilable au doigt. overscroll-behavior évite que le scroll
"déborde" sur la page derrière. */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.vz-mobile-menu.is-open { transform: translateX(0); }
.vz-mobile-menu ul { list-style: none; padding: 0; margin: 0; }
.vz-mobile-menu li { margin-bottom: 1.25rem; }
.vz-mobile-menu a {
font-family: var(--vz-font-serif);
font-size: 1.6rem;
color: var(--vz-cream-light);
}
.vz-mobile-menu .vz-close {
/* fixed (et non absolute) : reste accessible en haut même quand on fait
défiler la liste des catégories. Le parent étant transformé, fixed se
positionne par rapport au panneau, pas à la page. */
position: fixed;
top: 1.5rem;
right: 1.5rem;
background: none;
border: 0;
color: var(--vz-cream-light);
font-size: 2rem;
cursor: pointer;
z-index: 1;
}
/* Bouton « haut de page » d'Astra : par défaut sur la couleur de lien (bleu).
On l'aligne sur la palette Vayzone (terracotta) pour une teinte plus douce
et cohérente avec le reste du site. */
#ast-scroll-top {
background-color: var(--vz-terracotta) !important;
color: var(--vz-cream-light) !important;
}
#ast-scroll-top:hover {
background-color: var(--vz-terracotta-dk) !important;
color: var(--vz-cream-light) !important;
}
/* ============================================================
Panier & commande classiques (shortcodes WooCommerce)
Le thème était conçu pour les blocs Gutenberg ; ces styles
habillent le checkout/panier classiques aux couleurs Vayzone.
============================================================ */
.woocommerce-cart .ast-container,
.woocommerce-checkout .ast-container {
max-width: var(--vz-container);
}
/* --- Checkout : deux colonnes équilibrées --- */
.woocommerce-checkout form.checkout.woocommerce-checkout::after {
content: "";
display: table;
clear: both;
}
.woocommerce-checkout #customer_details {
float: left;
width: 57%;
}
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
float: right;
width: 39%;
clear: right;
}
.woocommerce-checkout #order_review_heading {
margin: 0 0 1rem;
}
/* Titres de sections */
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-cart h1,
.woocommerce-cart h2 {
font-family: var(--vz-font-serif);
font-weight: 600;
color: var(--vz-charcoal);
}
/* Récap commande = carte crème */
.woocommerce-checkout #order_review {
background: var(--vz-cream-light);
border: 1px solid var(--vz-border-soft);
border-radius: var(--vz-radius-lg);
padding: 1.5rem 1.4rem;
box-shadow: var(--vz-shadow-soft);
}
.woocommerce-checkout #order_review table.shop_table {
border: 0;
margin: 0;
}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
border-top: 1px solid var(--vz-border-soft);
padding: .7rem .25rem;
color: var(--vz-text-dark);
}
.woocommerce-checkout #order_review .order-total .amount {
color: var(--vz-charcoal);
font-size: 1.15rem;
}
/* Options de livraison : lisibles, alignées à gauche */
.woocommerce-checkout #order_review ul#shipping_method {
margin: 0;
padding: 0;
list-style: none;
}
.woocommerce-checkout #order_review ul#shipping_method li {
margin: .4rem 0;
text-align: left;
line-height: 1.45;
}
.woocommerce-checkout #order_review ul#shipping_method li label {
display: inline;
margin: 0;
}
/* Champs de formulaire */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-container .select2-selection,
.woocommerce-checkout select {
border: 1px solid var(--vz-border-soft) !important;
border-radius: var(--vz-radius) !important;
background: #fff !important;
padding: .65rem .8rem !important;
min-height: 2.7rem;
}
.woocommerce-checkout .form-row label {
color: var(--vz-text-dark);
font-weight: 500;
}
/* --- Panier --- */
.woocommerce-cart .cart_totals {
background: var(--vz-cream-light);
border: 1px solid var(--vz-border-soft);
border-radius: var(--vz-radius-lg);
padding: 1.4rem;
box-shadow: var(--vz-shadow-soft);
}
.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td {
border-color: var(--vz-border-soft);
}
/* --- Boutons à la palette (au lieu du bleu par défaut) --- */
.woocommerce-checkout #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart table.cart .button,
.woocommerce-checkout button.button.alt {
background: var(--vz-charcoal) !important;
color: var(--vz-ivory) !important;
border: 0 !important;
border-radius: var(--vz-radius) !important;
text-transform: uppercase;
letter-spacing: .06em;
font-weight: 600;
padding: .95rem 1.6rem !important;
box-shadow: none;
text-shadow: none;
}
.woocommerce-checkout #place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout button.button.alt:hover {
background: var(--vz-brown-dark) !important;
color: var(--vz-ivory) !important;
}
/* Liens à la palette */
.woocommerce-checkout a:not(.button),
.woocommerce-cart a:not(.button) {
color: var(--vz-terracotta-dk);
}
/* --- Responsive : on empile sous 768px --- */
@media (max-width: 768px) {
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
float: none;
width: 100%;
}
.woocommerce-checkout #order_review_heading {
margin-top: 1.5rem;
}
}
/* Étiquette de retour (action discrète dans l'onglet Livraison du dashboard) */
.vz-liv-return { margin-top: .45rem; }
.vz-liv-return form { margin: 0; }
.vz-liv-return button,
.vz-liv-return a {
background: none;
border: 0;
padding: 0;
margin: 0;
font: inherit;
font-size: .85em;
color: var(--vz-terracotta-dk);
text-decoration: underline;
cursor: pointer;
}
.vz-liv-return button:hover,
.vz-liv-return a:hover { color: var(--vz-terracotta); }
/* ========================================================================
FILET DE SÉCURITÉ COULEURS — homogénéisation sur la palette Vayzone
Neutralise les couleurs hors-thème injectées par les plugins/Astra :
bleu WP-admin (#2271b1 / #007cba / #0073aa), violet WooCommerce (#7f54b3),
bleu d'accent Astra (#0274be), encadrés et contrôles Dokan.
Couvre le dashboard vendeuse ET les pages publiques (boutique/produit).
======================================================================== */
/* -- Contrôles de formulaire : accent terracotta (cases, radios, range, barres) -- */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
accent-color: var(--vz-terracotta);
}
/* -- Accent global Astra (#0274be) -> terracotta. !important pour battre le CSS
inline qu'Astra réinjecte dans le après notre feuille. -- */
:root {
--ast-global-color-0: var(--vz-terracotta) !important; /* couleur de thème / liens */
}
/* -- Boutons « bleu WP-admin » dans le dashboard (ex. « Modifier » du permalien) -- */
body.dokan-dashboard .button-primary,
body.dokan-dashboard #edit-slug-buttons .button,
body.dokan-dashboard #edit-slug-buttons .button-primary {
background: var(--vz-terracotta) !important;
border-color: var(--vz-terracotta-dk) !important;
color: #fff !important;
box-shadow: none !important;
text-shadow: none !important;
}
body.dokan-dashboard .button-primary:hover,
body.dokan-dashboard #edit-slug-buttons .button:hover {
background: var(--vz-terracotta-dk) !important;
}
/* -- Focus des champs : contour terracotta au lieu du bleu -- */
body.dokan-dashboard input:focus,
body.dokan-dashboard select:focus,
body.dokan-dashboard textarea:focus,
body.dokan-dashboard .dokan-form-control:focus,
body.dokan-dashboard .select2-container--focus .select2-selection,
body.dokan-dashboard .select2-container--open .select2-selection {
border-color: var(--vz-terracotta) !important;
box-shadow: 0 0 0 2px rgba(201, 123, 99, 0.18) !important;
outline: none !important;
}
/* -- Encadrés d'info Dokan (bleu) -> sauge/crème (ex. « ajoute d'abord des
attributs de variation… ») -- */
.dokan-alert-info,
#dokan-info-message.dokan-alert-info,
.dokan-info {
background: rgba(138, 154, 133, 0.12) !important;
border-color: var(--vz-sage) !important;
color: var(--vz-text-dark) !important;
}
.dokan-alert-info a,
.dokan-info a { color: var(--vz-terracotta-dk) !important; }
/* -- Liens « bleu Dokan » dans le contenu du dashboard -> terracotta foncé -- */
body.dokan-dashboard .dokan-dashboard-content a:not(.dokan-btn):not(.button):not(.dokan-btn-theme):not(.ast-button),
body.dokan-dashboard .dokan-table a:not(.dokan-btn) {
color: var(--vz-terracotta-dk);
}
body.dokan-dashboard .dokan-dashboard-content a:not(.dokan-btn):not(.button):not(.dokan-btn-theme):hover {
color: var(--vz-charcoal);
}
/* -- Interrupteurs (toggles) Dokan à l'état « on » -> terracotta -- */
body.dokan-dashboard input:checked + .dokan-switch-slider,
body.dokan-dashboard input:checked + .slider,
body.dokan-dashboard .dokan-switch input:checked + .dokan-switch-slider {
background-color: var(--vz-terracotta) !important;
}
/* -- WooCommerce : violet #7f54b3 résiduel (select2, surbrillance) -- */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
background-color: var(--vz-terracotta) !important;
color: #fff !important;
}
/* Étoiles d'avis en doré (et non violet/bleu) */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before,
.woocommerce p.stars a:hover::before { color: var(--vz-gold) !important; }
/* -- YITH liste de souhaits : cœur/lien en terracotta -- */
.yith-wcwl-add-to-wishlist a,
.yith-wcwl-wishlistexistsbrowse a,
.yith-wcwl-add-button a { color: var(--vz-terracotta) !important; }
/* ========================================================================
Page boutique publique d'une vendeuse (body.dokan-store)
- Cache la sidebar Dokan : elle servait à afficher des blocs Gutenberg
« Archives » / « Categories » génériques (en anglais en plus) — sans
intérêt sur une page boutique qui doit mettre en avant la créatrice.
- Etend l'override .dokan-btn-theme (couleurs) aux pages publiques :
le bouton « Partager » en haut de la boutique a cette classe et
restait en violet Dokan car notre règle était scopée au dashboard.
- Complète l'override .dokan-info (notice) : Dokan met le bleu #109ae7
en dur sur le border-top et sur l'icône ::before, non couverts jusqu'ici.
======================================================================== */
/* Cache la sidebar Dokan sur la page boutique + zone principale pleine largeur */
body.dokan-store #dokan-secondary { display: none !important; }
body.dokan-store #dokan-primary,
body.dokan-store .dokan-store-wrap.layout-left .dokan-store-tabs,
body.dokan-store .dokan-store-wrap.layout-left .dokan-store-products-filter-area,
body.dokan-store .dokan-store-wrap.layout-left .dokan-store-products-area {
width: 100% !important;
max-width: 100% !important;
float: none !important;
}
/* Bouton .dokan-btn-theme : override des couleurs ÉTENDU à tout le site
(pages publiques de boutique, formulaires d'inscription vendeuse, etc.).
La règle dashboard existante (plus spécifique) reste prioritaire là-bas. */
input[type="submit"].dokan-btn-theme,
button.dokan-btn-theme,
a.dokan-btn-theme,
.dokan-btn-theme {
background-color: var(--vz-terracotta) !important;
border-color: var(--vz-terracotta) !important;
color: #fff !important;
}
.dokan-btn-theme:hover,
.dokan-btn-theme:focus,
.dokan-btn-theme:active {
background-color: var(--vz-terracotta-dk) !important;
border-color: var(--vz-terracotta-dk) !important;
color: #fff !important;
}
/* Notice .dokan-info : compléter l'override (bordure haute + icône ::before
qui étaient encore en bleu #109ae7). */
.dokan-info { border-top-color: var(--vz-sage) !important; }
.dokan-info::before,
.dokan-info:before {
background-color: var(--vz-sage) !important;
color: #fff !important;
}