/**
* OHLYA — Foundation CSS
*
* Charte construite à partir des prototypes HTML (dossier "Pages HTML/").
* Charge la palette, la typographie, les utilitaires et les composants
* partagés (announce bar, header, footer, newsletter, product card).
*
* Les styles spécifiques à une page (fiche produit, panier, checkout, etc.)
* sont définis dans des fichiers dédiés et chargés conditionnellement.
*/
/* ════════════════════════════════════════════════════════
1. VARIABLES OHLYA
══════════════════════════════════════════════════════════ */
:root {
/* Palette officielle (Charte/) */
--ohlya-aubergine: #320130;
--ohlya-violet: #432E6F;
--ohlya-lavande: #B197E7;
--ohlya-rouge: #BC2D29;
--ohlya-orange: #F87300;
--ohlya-ambre: #FFC25A;
--ohlya-creme: #F5EACE;
--ohlya-charcoal: #1C1814;
--ohlya-ivoire: #F5F0E8;
--ohlya-or: #B08D57;
/* Aliases courts (utilisés dans tous les prototypes) */
--dark: #320130;
--pu: #432E6F;
--lav: #B197E7;
--red: #BC2D29;
--or: #F87300;
--amb: #FFC25A;
--cr: #F5EACE;
--cr2: #EDE4CE;
--cr3: #E0D6BE;
--wh: #FFFFFF;
--mi: #7A6870; /* Mid grey */
--li: #B8B0B8; /* Light grey */
--ok: #15803D; /* Green confirmation */
/* Gradient signature */
--grad: linear-gradient(90deg, #F5EACE 0%, #FFC25A 25%, #F87300 50%, #B197E7 75%, #320130 100%);
/* Typo */
--serif: 'Cormorant Garamond', Georgia, serif;
--sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Easing courant */
--ease: cubic-bezier(.4, 0, .2, 1);
}
/* ════════════════════════════════════════════════════════
2. BASE & TYPO
══════════════════════════════════════════════════════════ */
/* On ne touche pas au reset global de WoodMart, on cible uniquement
les éléments qui ont un style OHLYA-spécifique. */
body.ohlya,
body {
font-family: var(--sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: var(--dark);
}
/* Titres en serif */
.ohlya h1, .ohlya h2, .ohlya h3, .ohlya h4,
.entry-title, .product_title, .woocommerce-Reviews-title,
.ohlya-serif {
font-family: var(--serif);
font-weight: 300;
letter-spacing: -.005em;
color: var(--dark);
}
/* Italique élégant */
.ohlya em, em.ohlya-em {
font-style: italic;
color: var(--or);
font-weight: 300;
}
/* ════════════════════════════════════════════════════════
3. UTILITAIRES
══════════════════════════════════════════════════════════ */
.w {
max-width: 1260px;
margin: 0 auto;
padding: 0 2.5rem;
}
/* Lien utilitaire — petit, souligné, orange, animation gap au hover */
.lnk {
font-size: .65rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--or);
display: inline-flex;
align-items: center;
gap: .5rem;
border-bottom: 1px solid currentColor;
padding-bottom: .1rem;
transition: gap .25s;
text-decoration: none;
}
.lnk:hover { gap: .9rem; color: var(--or); }
/* Eyebrow — petit label orange */
.ey {
font-size: .6rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--or);
font-weight: 500;
display: inline-block;
}
/* Reveal au scroll — bascule en .in via IntersectionObserver (ohlya.js) */
.rv {
opacity: 0;
transform: translateY(18px);
transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.rv.in {
opacity: 1;
transform: none;
}
.rv.d1 { transition-delay: .1s; }
.rv.d2 { transition-delay: .2s; }
.rv.d3 { transition-delay: .3s; }
.rv.d4 { transition-delay: .4s; }
/* ════════════════════════════════════════════════════════
4. BOUTONS OHLYA
══════════════════════════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4rem;
font-size: .68rem;
letter-spacing: .12em;
text-transform: uppercase;
padding: .78rem 1.8rem;
transition: all .3s var(--ease);
font-weight: 500;
cursor: pointer;
border-radius: 2px;
text-decoration: none;
border: none;
font-family: var(--sans);
}
/* Variant orange — CTA principal. Spécificité renforcée + !important
pour battre les .btn par défaut de WoodMart/Elementor. */
.btn-or,
a.btn-or,
.btn.btn-or,
a.btn.btn-or {
background: var(--or) !important;
background-color: var(--or) !important;
color: #fff !important;
border: none !important;
}
.btn-or:hover,
a.btn-or:hover,
.btn.btn-or:hover,
a.btn.btn-or:hover {
background: #D66800 !important;
background-color: #D66800 !important;
transform: translateY(-2px);
color: #fff !important;
}
/* Variant aubergine — CTA secondaire fond sombre. */
.btn-dark,
a.btn-dark,
.btn.btn-dark,
a.btn.btn-dark {
background: var(--dark) !important;
background-color: var(--dark) !important;
color: #fff !important;
border: none !important;
}
.btn-dark:hover,
a.btn-dark:hover,
.btn.btn-dark:hover,
a.btn.btn-dark:hover {
background: #200020 !important;
background-color: #200020 !important;
transform: translateY(-2px);
color: #fff !important;
}
/* Variant violet (purple) — CTA parrainage. */
.btn-pu,
a.btn-pu,
.btn.btn-pu,
a.btn.btn-pu {
background: var(--pu) !important;
background-color: var(--pu) !important;
color: #fff !important;
border: none !important;
}
.btn-pu:hover,
a.btn-pu:hover,
.btn.btn-pu:hover,
a.btn.btn-pu:hover {
background: #321958 !important;
background-color: #321958 !important;
transform: translateY(-2px);
color: #fff !important;
}
/* Variant outline aubergine — utilisée pour "Voir tout" sur fond clair.
Spécificité renforcée + !important pour passer devant les .btn de
WoodMart/Elementor qui imposent un fond gris. */
.btn-out,
.btn-out-dark,
a.btn-out,
a.btn-out-dark,
.sh a.btn-out-dark {
border: 1.5px solid var(--dark) !important;
color: var(--dark) !important;
background: transparent !important;
background-color: transparent !important;
}
.btn-out:hover,
.btn-out-dark:hover,
a.btn-out:hover,
a.btn-out-dark:hover,
.sh a.btn-out-dark:hover {
background: var(--dark) !important;
background-color: var(--dark) !important;
color: #fff !important;
border-color: var(--dark) !important;
}
/* Variant ghost — bordure blanche fine, fond transparent, texte blanc.
Utilisé sur fonds sombres (hero, univers, brand story…).
Spécificité renforcée + !important pour battre WoodMart/Elementor. */
.btn-ghost,
a.btn-ghost,
.btn.btn-ghost,
a.btn.btn-ghost {
border: 1px solid rgba(255,255,255,.45) !important;
color: #fff !important;
background: transparent !important;
background-color: transparent !important;
}
.btn-ghost:hover,
a.btn-ghost:hover,
.btn.btn-ghost:hover,
a.btn.btn-ghost:hover {
background: rgba(255,255,255,.1) !important;
background-color: rgba(255,255,255,.1) !important;
border-color: rgba(255,255,255,.7) !important;
color: #fff !important;
}
.btn-amb { background: var(--amb); color: var(--dark); }
.btn-amb:hover { background: #FFD480; transform: translateY(-2px); }
.btn-lg { padding: 1rem 2.4rem; font-size: .74rem; }
/* ════════════════════════════════════════════════════════
5. ANNOUNCE BAR (ticker scroll)
══════════════════════════════════════════════════════════ */
.ann {
height: 36px;
overflow: hidden;
background: var(--dark);
position: relative;
}
.ann::after {
content: '';
position: absolute;
inset: 0;
background: var(--grad);
opacity: .1;
pointer-events: none;
}
.ann-t {
display: flex;
height: 100%;
align-items: center;
animation: ohlya-tk 32s linear infinite;
width: max-content;
position: relative;
z-index: 1;
}
.ann-t:hover { animation-play-state: paused; }
.ai {
font-size: .63rem;
letter-spacing: .11em;
color: rgba(255,255,255,.65);
padding: 0 2rem;
white-space: nowrap;
}
.ai strong { color: var(--amb); }
.as { color: rgba(255,255,255,.2); }
@keyframes ohlya-tk {
to { transform: translateX(-50%); }
}
/* ════════════════════════════════════════════════════════
6. HEADER
══════════════════════════════════════════════════════════ */
.ohlya-hd {
position: sticky;
top: 0;
z-index: 500;
background: rgba(245, 234, 206, .97);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(50, 1, 48, .08);
transition: box-shadow .3s;
}
.ohlya-hd.sc {
box-shadow: 0 2px 28px rgba(50, 1, 48, .1);
}
.ohlya-hd .hdi {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
height: 70px;
gap: 2rem;
}
.ohlya-hd .logo,
.ohlya-hd a.logo,
.ohlya-hd .custom-logo-link,
.ohlya-hd a.custom-logo-link {
display: inline-flex !important;
align-items: center !important;
line-height: 0 !important;
text-decoration: none !important;
height: auto !important;
}
.ohlya-hd .logo img,
.ohlya-hd .custom-logo-link img,
.ohlya-hd img.custom-logo {
height: 48px !important;
width: auto !important;
max-height: 48px !important;
max-width: 280px !important;
display: block !important;
object-fit: contain !important;
}
.ohlya-hd .nav {
display: flex;
justify-content: center;
gap: 2rem;
}
.ohlya-hd .nav a {
font-size: .82rem;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--mi);
transition: color .2s;
padding: .3rem 0;
position: relative;
text-decoration: none;
}
.ohlya-hd .nav a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1.5px;
background: var(--or);
transform: scaleX(0);
transform-origin: left;
transition: transform .3s var(--ease);
}
.ohlya-hd .nav a:hover { color: var(--dark); }
.ohlya-hd .nav a:hover::after { transform: scaleX(1); }
/* WP émet du via wp_nav_menu : on neutralise les puces + indicateur
de page courante (.current-menu-item est appliqué au parent). */
.ohlya-hd .nav li,
.ohlya-hd .nav .menu-item {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
.ohlya-hd .nav li::before,
.ohlya-hd .nav li::marker,
.ohlya-hd .nav .menu-item::before,
.ohlya-hd .nav .menu-item::marker {
content: none;
display: none;
}
.ohlya-hd .nav a.current,
.ohlya-hd .nav a.current-menu-item,
.ohlya-hd .nav .current-menu-item > a,
.ohlya-hd .nav .current-menu-parent > a,
.ohlya-hd .nav .current_page_item > a { color: var(--dark); }
.ohlya-hd .nav a.current::after,
.ohlya-hd .nav a.current-menu-item::after,
.ohlya-hd .nav .current-menu-item > a::after,
.ohlya-hd .nav .current-menu-parent > a::after,
.ohlya-hd .nav .current_page_item > a::after { transform: scaleX(1); }
.ohlya-hd .hd-r {
display: flex;
align-items: center;
gap: 1.4rem;
}
.ohlya-hd .ic {
color: var(--mi);
transition: color .2s;
display: flex;
align-items: center;
gap: .25rem;
font-size: .7rem;
position: relative;
text-decoration: none;
}
.ohlya-hd .ic:hover { color: var(--dark); }
.ohlya-hd .ic svg {
width: 17px; height: 17px;
stroke: currentColor; fill: none;
stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.ohlya-hd .cb {
position: absolute;
top: -4px;
right: -6px;
background: var(--or);
color: #fff;
font-size: .42rem;
width: 12px; height: 12px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
}
/* ════════════════════════════════════════════════════════
7. PRODUCT CARD (réutilisée partout)
══════════════════════════════════════════════════════════ */
.pc {
background: var(--wh);
position: relative;
overflow: hidden;
transition: transform .3s var(--ease);
}
.pc:hover { transform: translateY(-4px); z-index: 2; }
.pc:hover .pco { opacity: 1; transform: translateY(0); }
.pc:hover .ph,
.pc:hover .pci img { transform: scale(1.06); }
.pci {
aspect-ratio: 3/4;
overflow: hidden;
position: relative;
background: var(--cr2);
}
.pci img,
.ph {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .6s var(--ease);
}
.ph { background: linear-gradient(145deg, #F5EACE, #EDE0C8); }
.pb {
position: absolute;
top: .65rem;
left: .65rem;
font-size: .52rem;
letter-spacing: .1em;
text-transform: uppercase;
padding: .2rem .55rem;
z-index: 2;
font-weight: 500;
}
.bn { background: var(--dark); color: #fff; }
.bp { background: var(--or); color: #fff; }
.bs { background: var(--red); color: #fff; }
.bb { background: var(--pu); color: #fff; }
.ba { background: var(--amb); color: var(--dark); }
.pw {
position: absolute;
top: .65rem;
right: .65rem;
width: 28px; height: 28px;
background: rgba(255,255,255,.95);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
opacity: 0;
transition: opacity .3s;
cursor: pointer;
}
.pw svg {
width: 13px; height: 13px;
stroke: var(--dark); fill: none;
stroke-width: 1.5;
}
.pc:hover .pw { opacity: 1; }
.pco {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(50, 1, 48, .92);
padding: .65rem;
display: flex;
gap: .3rem;
opacity: 0;
transform: translateY(100%);
transition: all .35s var(--ease);
}
.po {
flex: 1;
font-size: .56rem;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(255,255,255,.82);
padding: .45rem;
border: 1px solid rgba(255,255,255,.18);
text-align: center;
transition: all .2s;
cursor: pointer;
text-decoration: none;
}
.po:hover {
background: var(--or);
border-color: var(--or);
color: #fff;
}
.pi { padding: .85rem .9rem .75rem; }
.pcat {
font-size: .55rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--or);
margin-bottom: .22rem;
font-weight: 500;
}
.pn {
font-family: var(--serif);
font-size: .95rem;
font-weight: 400;
color: var(--dark);
line-height: 1.3;
margin-bottom: .3rem;
}
.pst {
display: flex;
gap: 1px;
margin-bottom: .22rem;
}
.star {
font-size: .58rem;
color: var(--or);
}
.pp {
font-size: .82rem;
color: var(--dark);
}
.pp s {
color: var(--li);
font-size: .72rem;
margin-right: .22rem;
}
/* ════════════════════════════════════════════════════════
8. NEWSLETTER
══════════════════════════════════════════════════════════ */
.nl-s {
padding: 5rem 0;
background: var(--dark);
position: relative;
overflow: hidden;
}
.nl-s::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 80% 50%, rgba(248, 115, 0, .08), transparent 55%);
}
.nl-s::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--grad);
}
.nli {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5.5rem;
align-items: center;
position: relative;
z-index: 1;
}
.nltt {
font-family: var(--serif);
font-size: clamp(1.7rem, 2.7vw, 2.4rem);
font-weight: 300;
color: #fff;
margin-bottom: .7rem;
line-height: 1.2;
}
.nlsb {
font-size: .85rem;
color: rgba(255,255,255,.42);
line-height: 1.9;
}
.nlfm {
display: flex;
flex-direction: column;
gap: .7rem;
}
.nlrw { display: flex; }
/* Champ email — spécificité renforcée pour battre les form WoodMart */
.nl-s .nlin,
.nl-s input.nlin,
.nl-s input[type="email"].nlin {
flex: 1 !important;
background: rgba(255,255,255,.07) !important;
background-color: rgba(255,255,255,.07) !important;
border: 1px solid rgba(255,255,255,.14) !important;
border-right: none !important;
color: #fff !important;
font-family: var(--sans) !important;
font-size: .84rem !important;
padding: .88rem 1.2rem !important;
outline: none !important;
transition: border-color .2s !important;
border-radius: 0 !important;
box-shadow: none !important;
min-width: 0 !important;
height: auto !important;
line-height: 1.2 !important;
}
.nl-s .nlin::placeholder,
.nl-s input.nlin::placeholder { color: rgba(255,255,255,.28) !important; }
.nl-s .nlin:focus,
.nl-s input.nlin:focus { border-color: rgba(248, 115, 0, .5) !important; }
/* Bouton S'abonner — orange forcé pour battre WoodMart button {} */
.nl-s .nlbt,
.nl-s button.nlbt,
.nl-s button[type="submit"].nlbt,
.nl-s .nlfm .nlbt {
background: var(--or) !important;
background-color: var(--or) !important;
color: #fff !important;
font-family: var(--sans) !important;
font-size: .62rem !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
padding: .88rem 1.5rem !important;
cursor: pointer !important;
transition: background .2s !important;
border: none !important;
border-radius: 0 !important;
font-weight: 500 !important;
box-shadow: none !important;
line-height: 1.2 !important;
height: auto !important;
min-height: 0 !important;
}
.nl-s .nlbt:hover,
.nl-s button.nlbt:hover,
.nl-s button[type="submit"].nlbt:hover {
background: #D66800 !important;
background-color: #D66800 !important;
color: #fff !important;
}
.nlnt {
font-size: .62rem;
color: rgba(255,255,255,.22);
line-height: 1.7;
}
.nlnt a { color: rgba(255, 194, 90, .65); }
.nlcr {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(255,255,255,.07);
font-size: .75rem;
color: rgba(255,255,255,.3);
}
.nlcr a {
color: var(--amb);
border-bottom: 1px solid rgba(255, 194, 90, .3);
}
/* ════════════════════════════════════════════════════════
9. FOOTER
══════════════════════════════════════════════════════════ */
.ft {
background: var(--dark);
border-top: 1px solid rgba(255,255,255,.05);
padding: 4rem 0 1.8rem;
color: rgba(255,255,255,.7);
}
.ftg {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 3rem;
margin-bottom: 3.5rem;
}
.ft-logo {
height: 30px;
width: auto;
margin-bottom: 1.2rem;
}
.fttg {
font-size: .9rem;
color: rgba(255,255,255,.7);
line-height: 1.8;
max-width: 260px;
margin-bottom: 1.6rem;
}
.ftpy img {
max-width: 160px;
opacity: .55;
filter: grayscale(1);
}
.ftct {
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--or);
margin-bottom: 1.1rem;
font-weight: 500;
}
.ftlks {
display: flex;
flex-direction: column;
gap: .6rem;
}
.ftlk {
font-size: .88rem;
color: rgba(255,255,255,.72);
transition: color .2s;
text-decoration: none;
}
.ftlk:hover { color: #fff; }
.ftsoc {
display: flex;
gap: .7rem;
margin-top: 1.4rem;
}
.ftsc {
width: 36px; height: 36px;
border: 1px solid rgba(255,255,255,.25);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.72);
transition: all .25s;
border-radius: 2px;
}
.ftsc:hover {
border-color: var(--or);
color: var(--or);
}
.ftsc svg {
width: 15px; height: 15px;
stroke: currentColor; fill: none;
stroke-width: 1.8;
}
.ft-grad-bar {
height: 2px;
background: var(--grad);
margin-bottom: 1.6rem;
}
.ftbt {
display: flex;
align-items: center;
justify-content: space-between;
}
.ftcp {
font-size: .78rem;
color: rgba(255,255,255,.55);
}
.ftle {
display: flex;
gap: 1.3rem;
}
.ftll {
font-size: .76rem;
color: rgba(255,255,255,.55);
transition: color .2s;
text-decoration: none;
}
.ftll:hover { color: #fff; }
/* ════════════════════════════════════════════════════════
10. RESPONSIVE BASE
══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
.nli { grid-template-columns: 1fr; gap: 2rem; }
.ftg { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
.w { padding: 0 1.5rem; }
.ohlya-hd .nav { display: none; }
.ftg { grid-template-columns: 1fr; }
.ftbt { flex-direction: column; gap: .7rem; text-align: center; }
}
/* ════════════════════════════════════════════════════════
11. WOODMART / WOOCOMMERCE — OVERRIDES TYPO & COULEURS
WoodMart applique sa propre CSS sur les éléments WooCommerce avec
une spécificité forte. On force la typographie et la palette OHLYA
ici, en se contentant de !important sur les propriétés strictement
nécessaires (font-family, color principal).
══════════════════════════════════════════════════════════ */
/* ─── Titres WooCommerce : forcer Cormorant Garamond ─── */
body .product_title,
body h1.product_title,
body .entry-title,
body .woocommerce-loop-product__title,
body .products .product h2,
body .products .product h3,
body .woocommerce-Tabs-panel h2,
body .cart_totals h2,
body .cross-sells h2,
body .upsells h2,
body .related h2,
body .woocommerce-billing-fields h3,
body .woocommerce-shipping-fields h3,
body .woocommerce-additional-fields h3,
body #order_review_heading,
body .woocommerce-MyAccount-content h2,
body .woocommerce-MyAccount-content h3,
body .widget-title,
body .wd-widget-title,
body .section-title,
body .title-text,
body .wd-section-title {
font-family: var(--serif) !important;
font-weight: 400;
color: var(--dark);
letter-spacing: -.005em;
}
/* ─── Titres en gros : poids plus léger, italique optionnel ─── */
body .product_title,
body h1.product_title,
body .entry-title {
font-weight: 300;
line-height: 1.1;
}
/* ─── Prix produit : Cormorant + couleur OHLYA ─── */
body .price,
body .woocommerce-Price-amount,
body .product .price .woocommerce-Price-amount {
font-family: var(--serif);
color: var(--dark);
font-weight: 400;
}
body .price del,
body .price s {
color: var(--li);
}
body .price ins,
body .price ins .woocommerce-Price-amount {
color: var(--or);
text-decoration: none;
font-weight: 500;
}
/* ─── Marque / méta produit : DM Sans, ambre ─── */
body .product_meta,
body .product_meta .sku,
body .product_meta .posted_in,
body .product_meta .tagged_as {
font-family: var(--sans);
font-size: .78rem;
color: var(--mi);
}
body .product_meta a {
color: var(--or);
border-bottom: 1px dotted rgba(248, 115, 0, .3);
text-decoration: none;
}
/* ─── Boutons WooCommerce : palette OHLYA ─── */
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce #respond input#submit,
body .woocommerce-page a.button,
body .woocommerce-page button.button,
body .woocommerce-page input.button,
body .button.alt,
body button.single_add_to_cart_button {
background: var(--or) !important;
color: #fff !important;
font-family: var(--sans) !important;
font-size: .7rem !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
padding: .85rem 1.8rem !important;
border-radius: 2px !important;
font-weight: 500 !important;
border: none !important;
transition: background .2s, transform .2s !important;
}
body .woocommerce a.button:hover,
body .woocommerce button.button:hover,
body .woocommerce input.button:hover,
body .woocommerce-page a.button:hover,
body .button.alt:hover,
body button.single_add_to_cart_button:hover {
background: #D66800 !important;
transform: translateY(-1px);
color: #fff !important;
}
/* ─── Onglets fiche produit (Description, Avis…) ─── */
body .woocommerce-tabs ul.tabs li a,
body .woocommerce div.product .woocommerce-tabs ul.tabs li a {
font-family: var(--sans);
font-size: .68rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mi);
font-weight: 500;
}
body .woocommerce-tabs ul.tabs li.active a {
color: var(--dark);
}
/* ─── Liens d'arborescence (catégories, breadcrumb) ─── */
body .woocommerce-breadcrumb,
body .woocommerce-breadcrumb a {
font-family: var(--sans);
font-size: .68rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mi);
}
body .woocommerce-breadcrumb a:hover {
color: var(--or);
}
/* ─── Formulaires (panier, checkout, mon compte) ─── */
body .woocommerce form .form-row label {
font-family: var(--sans);
font-size: .62rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--dark);
font-weight: 500;
}
body .woocommerce form .form-row input.input-text,
body .woocommerce form .form-row select,
body .woocommerce form .form-row textarea {
font-family: var(--sans);
font-size: .86rem;
color: var(--dark);
border-radius: 0;
}
/* ─── Notices WC (succès, erreurs, info) ─── */
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error {
font-family: var(--sans);
font-size: .82rem;
border-radius: 0;
border-top-color: var(--or);
}
/* ─── Sale flash (badge promo sur fiche produit) ─── */
body .onsale,
body .product .onsale {
background: var(--red);
color: #fff;
font-family: var(--sans);
font-size: .55rem;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 500;
border-radius: 0;
padding: .25rem .65rem;
min-width: 0;
min-height: 0;
line-height: 1.4;
}
/* ─── Quantité (input number sur fiche/panier) ─── */
body .woocommerce .quantity .qty,
body .woocommerce-page .quantity .qty {
font-family: var(--sans);
border: 1px solid var(--cr3);
border-radius: 0;
background: var(--wh);
color: var(--dark);
}
/* ─── Étoiles d'avis ─── */
body .star-rating::before,
body .star-rating span::before {
color: var(--or);
}
/* ─── Sidebar / widgets ─── */
body .widget_product_search button {
background: var(--dark);
color: #fff;
}
body .widget ul li a {
color: var(--mi);
transition: color .2s;
}
body .widget ul li a:hover {
color: var(--or);
}
/* ════════════════════════════════════════════════════════
12. OVERRIDES TRÈS SPÉCIFIQUES — TITRE PRODUIT WOODMART
WoodMart utilise .wd-entities-title et applique parfois des styles
en inline ou via le theme customizer. On force avec une spécificité
maximale + !important sur les propriétés critiques.
NB : pour un fix propre, aller aussi dans :
WP Admin → WoodMart → Theme Settings → Typography → Product title
et choisir "Cormorant Garamond"
══════════════════════════════════════════════════════════ */
body.woocommerce-page .product_title,
body.single-product .product_title,
body.single-product h1.product_title,
body.single-product .summary .product_title,
body .wd-entities-title,
body h1.wd-entities-title,
body .product-title.wd-entities-title,
body.single-product .entry-summary .product_title,
body.single-product h1.entry-title,
html body .product_title.wd-entities-title,
html body[class] .wd-entities-title {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
color: var(--dark) !important;
letter-spacing: -.01em !important;
line-height: 1.1 !important;
font-style: normal !important;
text-transform: none !important;
}
/* Sur les cartes produit dans les loops (boutique, catégorie, related) */
body .products .product .wd-entities-title,
body .products .product .wd-entities-title a,
body .wd-products .product-element-top + .wd-entities-title,
body .products .product .woocommerce-loop-product__title {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 400 !important;
color: var(--dark) !important;
font-style: normal !important;
}
/* Couleurs spécifiques WoodMart sur titres (au cas où) */
body .product_title,
body .wd-entities-title,
body .wd-entities-title a {
color: var(--dark) !important;
}
body .wd-entities-title a:hover {
color: var(--or) !important;
}
/* ════════════════════════════════════════════════════════
13. CARTES PRODUIT — Loop WoodMart restylé OHLYA
Transforme la carte WoodMart par défaut (.products .product)
pour matcher le prototype .pc/.pci/.pi/.pn/.pp.
Image en aspect 3/4 cover, badge top-left, overlay hover
aubergine avec CTA orange, eyebrow catégorie au-dessus
du titre, typo Cormorant + DM Sans.
══════════════════════════════════════════════════════════ */
/* Overflow visible sur TOUTE la chaîne grille → carte → wrappers internes
pour que le bouton AJOUTER AU PANIER ne se fasse pas clipper en bas.
Le zoom image reste contenu via overflow:hidden sur .product-element-top. */
body .products,
body .wd-products,
body .wd-products .row,
body .products .col,
body .products [class*="col-"],
body .wd-products [class*="col-"],
body .elementor-widget-wp-widget-woocommerce_products,
body .elementor-widget-woocommerce-products {
overflow: visible !important;
}
/* Carte */
body .products .product,
body .wd-products .product {
background: var(--wh) !important;
position: relative;
overflow: visible !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
box-shadow: 0 1px 0 rgba(50,1,48,.04);
}
body .products .product:hover {
transform: translateY(-4px);
z-index: 2;
box-shadow: 0 10px 28px -12px rgba(50,1,48,.18);
}
/* Tous les wrappers internes : hauteur auto + overflow visible */
body .products .product > *,
body .products .product .product-wrapper,
body .products .product .product-element-bottom,
body .products .product .hover-content,
body .products .product .wd-products-grid,
body .products .product .product-card-summary,
body .products .product .product-info,
body .products .product .product-summary {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
/* Image : aspect 3/4 + cover sur les images, sans toucher au Swiper. */
body .products .product .product-element-top {
aspect-ratio: 3/4;
overflow: hidden;
position: relative;
background: var(--cr);
margin: 0 !important;
border-radius: 0 !important;
}
body .products .product .product-element-top img,
body .products .product .product-element-top .wp-post-image,
body .products .product .product-element-top .attachment-woocommerce_thumbnail {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
transition: transform .6s var(--ease);
}
/* Forcer toute la chaîne du slider WoodMart à remplir le conteneur 3/4
(sans toucher au display:flex de Swiper) */
body .products .product .product-element-top > a,
body .products .product .product-element-top .wd-product-grid-slider,
body .products .product .product-element-top .swiper,
body .products .product .product-element-top .swiper-container,
body .products .product .product-element-top .swiper-wrapper,
body .products .product .product-element-top .swiper-slide,
body .products .product .product-element-top .product-image-link {
height: 100% !important;
}
body .products .product:hover .product-element-top img {
transform: scale(1.06);
}
/* Badge (sale / featured / labels custom) — top-left */
body .products .product .product-labels,
body .products .product .wd-product-labels {
position: absolute !important;
top: .65rem !important;
left: .65rem !important;
right: auto !important;
bottom: auto !important;
z-index: 3 !important;
display: flex !important;
flex-direction: column !important;
gap: .25rem !important;
}
body .products .product .product-labels .onsale,
body .products .product .product-label-text,
body .products .product .product-label,
body .products .product .product-labels span {
background: var(--red) !important;
color: var(--wh) !important;
font-family: var(--sans) !important;
font-size: .52rem !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
padding: .2rem .55rem !important;
font-weight: 500 !important;
border-radius: 0 !important;
line-height: 1.4 !important;
min-height: auto !important;
width: auto !important;
height: auto !important;
display: inline-block !important;
}
/* Featured = Populaire = orange */
body .products .product .product-labels .featured {
background: var(--or) !important;
color: var(--wh) !important;
}
/* Nouveau = aubergine */
body .products .product .product-labels .new-label,
body .products .product .product-labels .new {
background: var(--dark) !important;
color: var(--wh) !important;
}
/* Overlay hover : barre aubergine en bas de l'image.
Layout prototype : un bouton large "Sélectionner" (transparent avec bordure,
devient orange au hover) + un bouton carré 32px à droite (quick view).
Wishlist / compare masqués sur la carte loop. */
body .products .product .wd-buttons {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
background: rgba(50, 1, 48, .92) !important;
padding: .65rem !important;
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
justify-content: center !important;
gap: .3rem !important;
opacity: 0;
transform: translateY(100%);
transition: opacity .35s var(--ease), transform .35s var(--ease);
margin: 0 !important;
width: 100% !important;
border-radius: 0 !important;
}
body .products .product:hover .wd-buttons {
opacity: 1;
transform: translateY(0);
}
/* Wishlist + compare : masqués sur le loop (gardés sur la fiche produit).
On utilise visibility + width:0 en plus de display:none pour battre les
éventuels display:inline-flex inline de WoodMart. */
body .products .product .wd-buttons .wd-wishlist-btn,
body .products .product .wd-buttons .wd-compare-btn,
body .products .product .wd-buttons .wd-action-btn.wd-wishlist-btn,
body .products .product .wd-buttons .wd-action-btn.wd-compare-btn,
body .products .product .wd-buttons > .wd-wishlist-btn,
body .products .product .wd-buttons > .wd-compare-btn {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
position: absolute !important;
left: -9999px !important;
}
/* Bouton "Ajouter au panier" — transparent avec bordure blanche, devient orange au hover */
body .products .product .wd-buttons .wd-add-btn,
body .products .product .wd-buttons .wd-add-btn-replace,
body .products .product .wd-buttons > .add_to_cart_button,
body .products .product .wd-buttons > .button {
flex: 1 1 auto !important;
display: block !important;
width: auto !important;
margin: 0 !important;
}
body .products .product .wd-buttons .wd-add-btn > a,
body .products .product .wd-buttons .wd-add-btn-replace > a,
body .products .product .wd-buttons > .button,
body .products .product .wd-buttons > .add_to_cart_button,
body .products .product .wd-buttons a.add_to_cart_button,
body .products .product .wd-buttons span.add_to_cart_button {
background: transparent !important;
color: rgba(255,255,255,.82) !important;
font-family: var(--sans) !important;
font-size: .56rem !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
padding: .45rem .55rem !important;
border-radius: 0 !important;
border: 1px solid rgba(255,255,255,.18) !important;
text-align: center !important;
transition: all .2s !important;
line-height: 1.2 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
body .products .product .wd-buttons .wd-add-btn > a:hover,
body .products .product .wd-buttons .wd-add-btn-replace > a:hover,
body .products .product .wd-buttons > .button:hover,
body .products .product .wd-buttons > .add_to_cart_button:hover {
background: var(--or) !important;
border-color: var(--or) !important;
color: var(--wh) !important;
}
/* Label "Ajouter au panier" visible inline (pas en tooltip) */
body .products .product .wd-buttons .wd-add-btn .wd-tooltip-label,
body .products .product .wd-buttons .wd-add-btn-replace .wd-tooltip-label {
display: inline !important;
background: transparent !important;
color: inherit !important;
padding: 0 !important;
position: static !important;
font-size: inherit !important;
font-family: inherit !important;
letter-spacing: inherit !important;
text-transform: inherit !important;
border: none !important;
box-shadow: none !important;
pointer-events: auto !important;
opacity: 1 !important;
visibility: visible !important;
white-space: nowrap !important;
}
/* Icône panier dans le bouton — visible, blanche */
body .products .product .wd-buttons .wd-add-btn > a > i,
body .products .product .wd-buttons .wd-add-btn > a > svg,
body .products .product .wd-buttons .wd-add-btn-replace > a > i,
body .products .product .wd-buttons .wd-add-btn-replace > a > svg,
body .products .product .wd-buttons .add_to_cart_button > i,
body .products .product .wd-buttons .add_to_cart_button > svg {
display: inline-block !important;
color: var(--wh) !important;
fill: var(--wh) !important;
stroke: var(--wh) !important;
font-size: .95rem !important;
width: auto !important;
height: auto !important;
margin: 0 .4em 0 0 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Bouton quick-view : petit carré 32px à droite */
body .products .product .wd-buttons .wd-quick-view-btn,
body .products .product .wd-buttons .wd-action-btn.wd-style-icon {
flex: 0 0 32px !important;
width: 32px !important;
display: flex !important;
align-items: stretch !important;
margin: 0 !important;
}
body .products .product .wd-buttons .wd-quick-view-btn > a,
body .products .product .wd-buttons .wd-quick-view-btn a {
background: transparent !important;
color: var(--wh) !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
border-radius: 0 !important;
padding: 0 !important;
width: auto !important;
height: auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: opacity .2s, transform .2s !important;
}
body .products .product .wd-buttons .wd-quick-view-btn > a:hover,
body .products .product .wd-buttons .wd-quick-view-btn a:hover {
background: transparent !important;
border: none !important;
color: var(--or) !important;
transform: scale(1.1);
}
body .products .product .wd-buttons .wd-quick-view-btn > a:hover svg,
body .products .product .wd-buttons .wd-quick-view-btn > a:hover i,
body .products .product .wd-buttons .wd-quick-view-btn a:hover * {
color: var(--or) !important;
fill: var(--or) !important;
stroke: var(--or) !important;
}
body .products .product .wd-buttons .wd-quick-view-btn svg,
body .products .product .wd-buttons .wd-quick-view-btn i,
body .products .product .wd-buttons .wd-quick-view-btn svg *,
body .products .product .wd-buttons .wd-quick-view-btn a svg,
body .products .product .wd-buttons .wd-quick-view-btn a i {
width: auto !important;
height: auto !important;
font-size: 1rem !important;
margin: 0 !important;
color: #fff !important;
fill: #fff !important;
stroke: #fff !important;
display: inline-block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Icône via pseudo-élément (font icon WoodMart) ou via SVG inline.
On force le blanc partout : color (font), fill/stroke (SVG inline),
et filter brightness(0) invert(1) pour les SVG masqués/images. */
body .products .product .wd-buttons .wd-quick-view-btn,
body .products .product .wd-buttons .wd-quick-view-btn *,
body .products .product .wd-buttons .wd-quick-view-btn > a,
body .products .product .wd-buttons .wd-quick-view-btn a,
body .products .product .wd-buttons .wd-quick-view-btn a::before,
body .products .product .wd-buttons .wd-quick-view-btn a::after,
body .products .product .wd-buttons .wd-quick-view-btn i::before,
body .products .product .wd-buttons .wd-quick-view-btn span,
body .products .product .wd-buttons .wd-quick-view-btn span::before {
color: #fff !important;
fill: #fff !important;
stroke: #fff !important;
border-color: rgba(255,255,255,.4) !important;
}
/* Pour les SVG en background-image ou les ![]()
*/
body .products .product .wd-buttons .wd-quick-view-btn img,
body .products .product .wd-buttons .wd-quick-view-btn svg use {
filter: brightness(0) invert(1) !important;
}
body .products .product .wd-buttons .wd-quick-view-btn .wd-tooltip-label {
display: none !important;
}
/* Bloc info — flux naturel : titre, eyebrow, prix empilés. */
body .products .product .product-wrapper,
body .products .product .hover-content {
background: var(--wh) !important;
padding: .85rem .9rem .9rem !important;
text-align: left !important;
}
/* WooCommerce loop wrapper (ul.products / li.product) */
ul.products,
ul.products > li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
overflow: visible !important;
height: auto !important;
align-self: flex-start !important;
}
/* ════════════════════════════════════════════════════════
HOVER PATTERN — "Ajouter au panier" remplace le prix
─────────────────────────────────────────────────────────
Le bouton WC .wd-add-btn est déplacé par JS de l'overlay image
vers la zone info (sibling du .price) et marqué .ohlya-cart-relocated.
Au hover : le prix fade out, le lien "Ajouter au panier" fade in
à la place. Pas de bouton orange — juste un lien texte aubergine.
══════════════════════════════════════════════════════════ */
/* Container info en position relative pour ancrer l'absolute du wd-add-btn */
html body .products .product .product-wrapper,
html body .products .product .hover-content {
position: relative !important;
}
/* Le wd-add-btn relocalisé : caché par défaut, en position absolue
sur la zone du prix (bottom du .product-wrapper) */
html body .products .product .wd-add-btn.ohlya-cart-relocated {
display: block !important;
position: absolute !important;
left: .9rem !important;
right: .9rem !important;
bottom: .9rem !important;
top: auto !important;
z-index: 5 !important;
opacity: 0 !important;
visibility: hidden !important;
transition: opacity .25s ease, visibility .25s ease !important;
margin: 0 !important;
padding: 0 !important;
background: var(--wh) !important;
transform: none !important;
height: auto !important;
min-height: 0 !important;
box-shadow: none !important;
border: none !important;
flex: none !important;
width: auto !important;
}
/* Au hover de la carte : afficher le lien Ajouter au panier */
html body .products .product:hover .wd-add-btn.ohlya-cart-relocated {
opacity: 1 !important;
visibility: visible !important;
}
/* Le prix s'efface au hover (le lien le remplace visuellement) */
html body .products .product .price {
transition: opacity .25s ease !important;
}
html body .products .product:hover .price {
opacity: 0 !important;
}
/* Style du lien interne : texte simple aubergine souligné, pas de bouton */
html body .products .product .wd-add-btn.ohlya-cart-relocated > a,
html body .products .product .wd-add-btn.ohlya-cart-relocated a.add_to_cart_button,
html body .products .product .wd-add-btn.ohlya-cart-relocated a.ajax_add_to_cart,
html body .products .product .wd-add-btn.ohlya-cart-relocated > a.button {
display: block !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
color: var(--dark) !important;
font-family: var(--sans) !important;
font-size: .85rem !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-decoration: underline !important;
text-underline-offset: 4px !important;
text-decoration-thickness: 1px !important;
text-align: left !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
line-height: 1.4 !important;
}
html body .products .product .wd-add-btn.ohlya-cart-relocated > a:hover,
html body .products .product .wd-add-btn.ohlya-cart-relocated a.add_to_cart_button:hover,
html body .products .product .wd-add-btn.ohlya-cart-relocated a.ajax_add_to_cart:hover {
color: var(--or) !important;
background: transparent !important;
border: none !important;
transform: none !important;
}
/* Pas d'icône (texte seul) */
html body .products .product .wd-add-btn.ohlya-cart-relocated > a > i,
html body .products .product .wd-add-btn.ohlya-cart-relocated > a > svg,
html body .products .product .wd-add-btn.ohlya-cart-relocated .wd-tooltip-label {
display: none !important;
}
/* Pendant qu'il est encore dans .wd-buttons (avant relocalisation JS) : caché */
html body .products .product .wd-buttons > .wd-add-btn:not(.ohlya-cart-relocated) {
display: none !important;
}
/* Catégorie eyebrow — couleur/typo OHLYA, position naturelle (avant titre) */
body .products .product .wd-product-cats {
font-family: var(--sans) !important;
font-size: .55rem !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: var(--or) !important;
margin: 0 0 .25rem 0 !important;
padding: 0 !important;
line-height: 1.4 !important;
display: block !important;
text-align: left !important;
}
/* Eyebrow catégorie visible sur toutes les pages (conformément au prototype) */
body .products .product .wd-product-cats a {
color: var(--or) !important;
text-decoration: none !important;
}
body .products .product .wd-product-cats a:hover {
color: var(--dark) !important;
}
/* Titre carte (override Section 12 pour la taille spécifique loop) */
body .products .product .wd-entities-title,
body .products .product .woocommerce-loop-product__title,
body .products .product h3.wd-entities-title {
font-family: var(--serif) !important;
font-size: 1rem !important;
font-weight: 400 !important;
line-height: 1.3 !important;
color: var(--dark) !important;
margin: 0 0 .35rem 0 !important;
padding: 0 !important;
text-align: left !important;
text-transform: none !important;
letter-spacing: -.005em !important;
}
body .products .product .wd-entities-title a {
color: var(--dark) !important;
}
/* Prix */
body .products .product .price,
body .products .product .wrap-price,
body .products .product .price-wrapper {
font-family: var(--sans) !important;
font-size: .85rem !important;
color: var(--dark) !important;
font-weight: 500 !important;
text-align: left !important;
margin: 0 !important;
padding: 0 !important;
letter-spacing: 0 !important;
}
body .products .product .price ins,
body .products .product .price .woocommerce-Price-amount {
color: var(--dark) !important;
text-decoration: none !important;
background: transparent !important;
font-weight: 500 !important;
}
body .products .product .price del,
body .products .product .price del .woocommerce-Price-amount {
color: var(--li) !important;
font-size: .75rem !important;
opacity: .8 !important;
margin-right: .3rem !important;
}
body .products .product .price ins .woocommerce-Price-amount {
color: var(--or) !important;
font-weight: 600 !important;
}
/* Notes/étoiles : cachées (prototype n'en montre pas) */
body .products .product .wd-product-rating,
body .products .product .star-rating,
body .products .product .wd-star-rating {
display: none !important;
}
/* Stock status / "Rupture" : discret sous le prix */
body .products .product .stock {
font-family: var(--sans) !important;
font-size: .65rem !important;
text-transform: uppercase !important;
letter-spacing: .1em !important;
margin-top: .3rem !important;
color: var(--mi) !important;
}
body .products .product .stock.out-of-stock {
color: var(--red) !important;
}
/* Grille : espacement entre cartes */
body .products,
body .wd-products .row {
gap: 1.25rem !important;
row-gap: 2rem !important;
}
/* Section 14 supprimée — bouton "Ajouter au panier" masqué sur le loop.
Cf. Section 13 : .wd-add-btn { display: none } pour le pattern jewellery premium
(ajout au panier uniquement depuis la fiche produit). */
/* ════════════════════════════════════════════════════════
15. HOMEPAGE — Sections dédiées (Hero, Strip, Univers, etc.)
Classes utilisées par les widgets HTML Elementor de la home.
Chaque sous-section correspond à un widget différent.
══════════════════════════════════════════════════════════ */
/* ─── 15.1 HERO SLIDER ─── */
.hero {
position: relative;
height: 92vh;
min-height: 580px;
overflow: hidden;
}
.h-slides {
display: flex;
height: 100%;
position: absolute;
inset: 0;
transition: transform .9s cubic-bezier(.77, 0, .175, 1);
}
.h-slide {
flex: 0 0 100%;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
}
.h-photo {
position: absolute;
inset: 0;
background-size: cover;
background-position: center center;
transition: transform 8s ease;
}
.h-slide.active .h-photo { transform: scale(1.06); }
.h-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(105deg, rgba(50,1,48,.88) 0%, rgba(50,1,48,.72) 40%, rgba(50,1,48,.35) 70%, rgba(50,1,48,.15) 100%),
linear-gradient(to bottom, rgba(50,1,48,.2) 0%, transparent 50%, rgba(50,1,48,.4) 100%);
}
.h-glow {
position: absolute;
inset: 0;
z-index: 2;
background: radial-gradient(ellipse at 12% 82%, rgba(248,115,0,.18) 0%, transparent 45%);
}
.h-vline {
position: absolute;
left: 60%;
top: 0; bottom: 0;
width: 1px;
background: linear-gradient(transparent 5%, rgba(255,194,90,.3) 50%, transparent 95%);
z-index: 3;
}
.h-ct {
position: relative;
z-index: 4;
padding: 0 2.5rem;
max-width: 680px;
margin-left: max(2.5rem, calc((100% - 1260px)/2 + 2.5rem));
}
.h-ey {
font-size: .6rem;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--amb);
margin-bottom: 1.6rem;
display: flex;
align-items: center;
gap: .8rem;
opacity: .9;
}
.h-ey::before {
content: '';
width: 24px;
height: 1px;
background: var(--or);
}
.h-tt {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(2.4rem, 5vw, 4.5rem);
color: #fff;
line-height: 1.05;
margin-bottom: 1.5rem;
letter-spacing: -.02em;
text-shadow: 0 2px 20px rgba(50,1,48,.5);
}
.h-tt em { font-style: italic; color: var(--amb); }
.h-sb {
font-size: .92rem;
color: rgba(255,255,255,.65);
line-height: 1.9;
margin-bottom: 2.6rem;
max-width: 440px;
font-weight: 300;
}
.h-sb em { color: rgba(255,255,255,.9); font-style: italic; }
.h-ctas { display: flex; gap: .8rem; flex-wrap: wrap; }
.h-bar {
position: absolute;
bottom: 0; left: 0; right: 0;
z-index: 5;
border-top: 1px solid rgba(255,255,255,.08);
display: flex;
align-items: center;
padding: .9rem max(2.5rem, calc((100% - 1260px)/2 + 2.5rem));
gap: 1.5rem;
background: rgba(50,1,48,.25);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Spécificité renforcée : préfixe .hero + !important pour passer devant
les styles WoodMart/Elementor de boutons (.btn, button{}, etc.) */
.hero .hdot,
.ohlya-hd ~ * .hero .hdot,
.hero button.hdot {
width: 22px !important;
height: 1.5px !important;
background: rgba(255,255,255,.25) !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
box-shadow: none !important;
transition: all .4s !important;
cursor: pointer !important;
font-size: 0 !important;
line-height: 0 !important;
text-indent: 0 !important;
}
.hero .hdot.on,
.hero button.hdot.on { background: var(--or) !important; width: 44px !important; }
.hero .h-scroll {
font-size: .55rem;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.3);
display: flex;
align-items: center;
gap: .5rem;
margin-left: auto;
}
.hero .h-scroll::after {
content: '';
display: block;
width: 1px; height: 26px;
background: linear-gradient(var(--or), transparent);
}
.hero .h-arr { display: flex; gap: .4rem; }
.hero .ha,
.hero button.ha {
width: 36px !important;
height: 36px !important;
border: 1px solid rgba(255,255,255,.18) !important;
border-radius: 0 !important;
color: rgba(255,255,255,.5) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all .3s !important;
background: transparent !important;
cursor: pointer !important;
padding: 0 !important;
margin: 0 !important;
min-width: 0 !important;
box-shadow: none !important;
}
.hero .ha:hover,
.hero button.ha:hover { border-color: var(--or) !important; color: var(--or) !important; background: transparent !important; }
.hero .ha svg {
width: 12px !important;
height: 12px !important;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
display: block;
}
/* CTAs Hero : forcer .btn-or et .btn-ghost à passer devant WoodMart */
.hero .h-ctas .btn,
.hero .h-ctas a.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .9rem 1.8rem;
border-radius: 0 !important;
font-family: var(--sans);
font-size: .75rem;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
text-decoration: none !important;
transition: all .3s ease;
cursor: pointer;
line-height: 1;
border: none;
}
.hero .h-ctas .btn-or,
.hero .h-ctas a.btn-or {
background: var(--or) !important;
color: #fff !important;
border: none !important;
}
.hero .h-ctas .btn-or:hover,
.hero .h-ctas a.btn-or:hover {
background: #D66800 !important;
color: #fff !important;
transform: translateY(-2px);
}
.hero .h-ctas .btn-ghost,
.hero .h-ctas a.btn-ghost {
background: transparent !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,.45) !important;
}
.hero .h-ctas .btn-ghost:hover,
.hero .h-ctas a.btn-ghost:hover {
background: rgba(255,255,255,.1) !important;
border-color: rgba(255,255,255,.7) !important;
color: #fff !important;
}
/* ─── 15.2 STRIP 4 ENGAGEMENTS ─── */
.strip {
background: var(--pu);
padding: 1.5rem 0;
position: relative;
overflow: hidden;
}
.strip::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: var(--grad);
}
.sg {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.si {
display: flex;
align-items: center;
gap: .85rem;
padding: 0 2rem;
border-right: 1px solid rgba(255,255,255,.09);
}
.si:last-child { border: none; }
.si svg {
width: 20px; height: 20px;
stroke: var(--amb);
fill: none;
stroke-width: 1.3;
stroke-linecap: round;
flex-shrink: 0;
}
.si strong {
display: block;
font-size: .7rem;
color: #fff;
margin-bottom: .1rem;
}
.si span {
font-size: .6rem;
color: rgba(255,255,255,.38);
}
/* ─── 15.3 SECTION HEADER (Coups de cœur, Nouveautés, etc.) ─── */
.ps {
padding: 5.5rem 0;
}
.sh {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 3rem;
}
.st {
font-family: var(--serif);
font-size: clamp(1.5rem, 2.4vw, 2.2rem);
font-weight: 300;
color: var(--dark);
margin-top: .4rem;
line-height: 1.2;
}
/* ─── 15.4 GRILLE PRODUITS HOMEPAGE (statique, prototype) ─── */
.pg {
display: grid;
gap: 2px;
background: var(--cr2);
}
.pg5 { grid-template-columns: repeat(5, 1fr); }
.pg4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
.pg5, .pg4 { grid-template-columns: repeat(2, 1fr); }
}
/* ─── 15.4b STRIP HOMEPAGE — override des cartes WC en mode "strip"
─────────────────────────────────────────────────────────────
Section.homepage-strip wrapping un [products] shortcode :
- Cartes collées (gap 2px, séparateur cream visible)
- Image area en aspect-ratio 3/4 avec fond cream
- Lift -4px au hover de la carte
Reset les règles globales de Section 13 (gap 1.25rem) pour la home. */
.homepage-strip .products,
.homepage-strip ul.products,
.homepage-strip .wd-products .row {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 2px !important;
row-gap: 2px !important;
background: var(--cr2) !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
/* Reset cartes WC (margins, borders) + ÉTIRER à la même hauteur dans la grille */
.homepage-strip .products .product,
.homepage-strip ul.products li.product,
.homepage-strip .wd-products .product {
background: var(--wh) !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
list-style: none !important;
width: auto !important;
max-width: none !important;
flex: none !important;
transition: transform .3s var(--ease) !important;
align-self: stretch !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
/* Product-wrapper occupe toute la hauteur de la carte, prix en bas */
.homepage-strip .products .product .product-wrapper,
.homepage-strip .products .product .hover-content {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
}
/* Titres : 2 lignes minimum pour aligner toutes les cartes */
.homepage-strip .products .product .wd-entities-title,
.homepage-strip .products .product .woocommerce-loop-product__title,
.homepage-strip .products .product h3.wd-entities-title {
min-height: 2.6em !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Le prix reste en bas de la carte */
.homepage-strip .products .product .price,
.homepage-strip .products .product .wrap-price {
margin-top: auto !important;
}
/* Lift au hover */
.homepage-strip .products .product:hover,
.homepage-strip ul.products li.product:hover {
transform: translateY(-4px) !important;
}
/* Zone image : aspect-ratio portrait 3/4, fond cream visible
pendant le chargement / si pas d'image */
.homepage-strip .products .product .product-element-top {
aspect-ratio: 3/4 !important;
background: var(--cr) !important;
overflow: hidden !important;
position: relative !important;
}
.homepage-strip .products .product .product-element-top > a,
.homepage-strip .products .product .product-element-top > a.product-image-link {
display: block !important;
width: 100% !important;
height: 100% !important;
}
.homepage-strip .products .product .product-element-top img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform .6s var(--ease) !important;
}
.homepage-strip .products .product:hover .product-element-top img {
transform: scale(1.06) !important;
}
/* Responsive : 2 colonnes en mobile/tablet */
@media (max-width: 1024px) {
.homepage-strip .products,
.homepage-strip ul.products {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 540px) {
.homepage-strip .products,
.homepage-strip ul.products {
grid-template-columns: 1fr !important;
}
}
/* ─── 15.6 SECTION 2 UNIVERS ───
Bandeau cream avec label "OHLYA — Deux Univers" + 2 grandes cartes
(Cadeaux de cœur / Cadeaux d'entreprise) en 460px de haut, avec
gradient brand en fond et CTA ghost. */
.uv-wrap {
padding: 1.5rem 0 5rem;
background: var(--cr);
}
.uv-lbl {
text-align: center;
margin-bottom: 2rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1.2rem;
}
.uv-lbl::before,
.uv-lbl::after {
content: '';
flex: 1;
max-width: 60px;
height: 1px;
background: var(--cr3);
}
.uv-lbl span {
font-size: .58rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--li);
}
.uv {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px;
}
.uc {
position: relative;
height: 460px;
overflow: hidden;
display: flex;
align-items: flex-end;
}
.ubg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform .7s var(--ease);
}
.uc:hover .ubg { transform: scale(1.04); }
.uc:nth-child(1) .ubg { background: linear-gradient(135deg, #432E6F, #320130); }
.uc:nth-child(2) .ubg { background: linear-gradient(135deg, #BC2D29, #432E6F); }
.uov {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(50,1,48,.9) 0%, rgba(50,1,48,.2) 55%, transparent 100%);
}
.unm {
position: absolute;
top: 1.8rem;
right: 2rem;
font-family: var(--serif);
font-size: 5rem;
font-weight: 300;
color: rgba(255,194,90,.08);
line-height: 1;
pointer-events: none;
}
.uct {
position: relative;
z-index: 2;
padding: 2.2rem 2.8rem;
width: 100%;
}
.utag {
font-size: .58rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--amb);
margin-bottom: .7rem;
}
.utt {
font-family: var(--serif);
font-size: 2rem;
font-weight: 300;
color: #fff;
line-height: 1.15;
margin-bottom: .6rem;
}
.usb {
font-size: .8rem;
color: rgba(255,255,255,.5);
margin-bottom: 1.6rem;
line-height: 1.7;
max-width: 320px;
}
/* Responsive 2 univers : 1 colonne en mobile/tablet */
@media (max-width: 768px) {
.uv { grid-template-columns: 1fr; }
.uc { height: 380px; }
.uct { padding: 1.8rem 1.6rem; }
.utt { font-size: 1.6rem; }
}
/* ─── 15.7 INSTAGRAM @ohlya.gift ───
Bandeau blanc avec eyebrow + handle Instagram + 9 tuiles carrées
en grille (9 col desktop, 6 tablet, 3 mobile). Overlay aubergine
au hover sur chaque tuile. */
.ig-s {
padding: 3.5rem 0;
background: #fff;
}
.igh {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.4rem;
}
.igl {
display: flex;
align-items: center;
gap: 1rem;
}
.igl svg {
width: 16px;
height: 16px;
stroke: var(--dark);
fill: none;
stroke-width: 1.5;
}
.igl span {
font-size: .78rem;
color: var(--mi);
}
.igg {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 2px;
}
.igc {
aspect-ratio: 1;
overflow: hidden;
background: var(--cr);
position: relative;
cursor: pointer;
display: block;
}
.igc::after {
content: '';
position: absolute;
inset: 0;
background: rgba(50, 1, 48, .45);
opacity: 0;
transition: opacity .3s;
}
.igc:hover::after { opacity: 1; }
.igp {
width: 100%;
height: 100%;
background: linear-gradient(145deg, var(--cr2), #E8DCCC);
}
@media (max-width: 1024px) {
.igg { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 540px) {
.igg { grid-template-columns: repeat(3, 1fr); }
}
/* ─── 15.8 CTA CADEAUX D'ENTREPRISE ───
Section sombre aubergine, 2 colonnes (texte/image), avec
double radial-gradient (orange + lavande) et barre dégradée
en bas. Image avec bordure offset orange. */
.ent-s {
background: var(--dark);
padding: 7rem 0;
position: relative;
overflow: hidden;
}
.ent-s::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 68% 50%, rgba(248,115,0,.12), transparent 60%),
radial-gradient(ellipse at 10% 80%, rgba(177,151,231,.08), transparent 50%);
}
.ent-s::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: var(--grad);
}
.enti {
display: grid;
grid-template-columns: 1fr 380px;
gap: 6rem;
align-items: center;
position: relative;
z-index: 1;
}
.enttt {
font-family: var(--serif);
font-size: clamp(2rem, 3.4vw, 3.1rem);
font-weight: 300;
color: #fff;
line-height: 1.12;
margin: 1rem 0 1.5rem;
}
.entbd {
font-size: .88rem;
color: rgba(255,255,255,.52);
line-height: 1.95;
margin-bottom: .5rem;
}
.entbd strong {
color: rgba(255,255,255,.88);
font-weight: 400;
}
.entls {
margin: 1.6rem 0 2.4rem;
display: flex;
flex-direction: column;
gap: .55rem;
}
.entli {
font-size: .78rem;
color: rgba(255,255,255,.4);
display: flex;
align-items: center;
gap: .75rem;
}
.entli::before {
content: '';
width: 16px;
height: 1px;
background: var(--or);
flex-shrink: 0;
}
.entim {
position: relative;
}
.entim img {
width: 100%;
aspect-ratio: 4/5;
object-fit: cover;
display: block;
}
.entim::after {
content: '';
position: absolute;
top: 1rem;
left: 1rem;
right: -1rem;
bottom: -1rem;
border: 1px solid rgba(248,115,0,.22);
pointer-events: none;
z-index: -1;
}
/* Responsive */
@media (max-width: 900px) {
.enti { grid-template-columns: 1fr; gap: 3rem; }
.entim::after { display: none; }
.ent-s { padding: 4.5rem 0; }
}
/* ─── 15.9 BRAND STORY (artisane) ───
Section cream, 2 colonnes (image portrait + texte).
Image avec bordure offset orange, titre serif, citation italique,
signature Ohlya en filigrane violet. */
.sty-s {
padding: 7rem 0;
background: var(--cr);
position: relative;
overflow: hidden;
}
.styi {
display: grid;
grid-template-columns: 380px 1fr;
gap: 6rem;
align-items: center;
}
.styim {
aspect-ratio: 3/4;
background: linear-gradient(145deg, #EDE0C8, #DDD0E8);
position: relative;
overflow: hidden;
}
.styim img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.styiph {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.styiph svg {
width: 56px;
height: 56px;
stroke: rgba(50,1,48,.15);
fill: none;
stroke-width: .8;
}
.styim::after {
content: '';
position: absolute;
bottom: -1.3rem;
right: -1.3rem;
width: 130px;
height: 130px;
border: 1px solid rgba(248,115,0,.22);
pointer-events: none;
z-index: -1;
}
.styel {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.8rem;
}
.styel::before {
content: '';
width: 24px;
height: 1px;
background: var(--or);
}
.stytt {
font-family: var(--serif);
font-size: clamp(1.8rem, 2.8vw, 2.6rem);
font-weight: 300;
color: var(--dark);
line-height: 1.15;
margin-bottom: 1.4rem;
}
.styit {
font-family: var(--serif);
font-size: 1.6rem;
font-style: italic;
font-weight: 300;
color: var(--mi);
line-height: 1.5;
margin-bottom: 1.6rem;
}
.stybd {
font-size: .88rem;
color: var(--mi);
line-height: 2;
}
.stybd p + p { margin-top: .9rem; }
.stybd strong {
color: var(--dark);
font-weight: 400;
}
.stysg {
font-family: var(--serif);
font-size: 2.4rem;
font-weight: 300;
font-style: italic;
color: var(--pu);
margin-top: 2.2rem;
opacity: .18;
}
@media (max-width: 900px) {
.styi { grid-template-columns: 1fr; gap: 3rem; }
.sty-s { padding: 4.5rem 0; }
.styim { max-width: 320px; margin: 0 auto; }
}
/* ─── 15.10 BLOG (Histoires & idées) ───
Section blanche, header standard + grille 4 articles avec image
4/3 placeholder cream, eyebrow orange, titre serif, lien "Lire la suite". */
.bl-s {
padding: 6.5rem 0;
background: #fff;
}
.blg {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.8rem;
margin-top: 3rem;
}
.blc {
cursor: pointer;
transition: transform .3s;
text-decoration: none;
display: block;
}
.blc:hover { transform: translateY(-4px); }
.blim {
aspect-ratio: 4/3;
overflow: hidden;
background: var(--cr);
margin-bottom: 1.1rem;
}
.blim img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s var(--ease);
}
.blc:hover .blim img { transform: scale(1.04); }
.bliph {
width: 100%;
height: 100%;
background: linear-gradient(145deg, #F5EACE, #DDD0E8);
display: flex;
align-items: center;
justify-content: center;
}
.bliph svg {
width: 26px;
height: 26px;
stroke: rgba(50,1,48,.15);
fill: none;
stroke-width: 1;
}
.blcat {
font-size: .56rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--or);
margin-bottom: .4rem;
}
.bltt {
font-family: var(--serif);
font-size: 1rem;
font-weight: 400;
color: var(--dark);
line-height: 1.5;
margin-bottom: .8rem;
}
.bllk {
font-size: .6rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--or);
display: inline-flex;
align-items: center;
gap: .4rem;
transition: gap .2s;
text-decoration: none;
}
.bllk::after { content: '→'; }
.blc:hover .bllk { gap: .8rem; }
@media (max-width: 900px) {
.blg { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.bl-s { padding: 4.5rem 0; }
}
@media (max-width: 540px) {
.blg { grid-template-columns: 1fr; }
}
/* ─── 15.11 PARRAINAGE ───
Section cream, encart blanc en 2 colonnes (texte / fond violet)
avec étapes numérotées et CTA violet. */
.rf-s {
padding: 4.5rem 0;
background: var(--cr);
}
.rfi {
background: #fff;
display: grid;
grid-template-columns: 1fr 280px;
overflow: hidden;
box-shadow: 0 2px 40px rgba(50,1,48,.06);
}
.rfct {
padding: 3rem 3.5rem;
}
.rftt {
font-family: var(--serif);
font-size: 1.9rem;
font-weight: 300;
color: var(--dark);
margin: .4rem 0 1.8rem;
}
.rfsp {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
}
.rfst {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.rfn {
width: 26px;
height: 26px;
background: var(--pu);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: .6rem;
flex-shrink: 0;
margin-top: .15rem;
}
.rftx {
font-size: .85rem;
color: var(--mi);
line-height: 1.7;
padding-top: .12rem;
}
.rfnt {
font-size: .72rem;
color: var(--li);
margin-top: .9rem;
}
.rfnt a {
color: var(--or);
border-bottom: 1px solid currentColor;
text-decoration: none;
}
.rfbg {
background: linear-gradient(145deg, #DDD0E8, #432E6F);
}
@media (max-width: 768px) {
.rfi { grid-template-columns: 1fr; }
.rfbg { display: none; }
.rfct { padding: 2rem 1.6rem; }
.rf-s { padding: 3rem 0; }
}
/* ─── 15.5 RESPONSIVE HERO + STRIP ─── */
@media (max-width: 768px) {
.hero { height: 78vh; min-height: 480px; }
.h-tt { font-size: clamp(2rem, 8vw, 2.8rem); }
.h-ct { padding: 0 1.5rem; margin-left: 1.5rem; }
.sg { grid-template-columns: repeat(2, 1fr); }
.si { padding: 1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.09); }
.si:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.09); }
.si:nth-child(3), .si:nth-child(4) { border-bottom: none; }
.h-bar { padding: .7rem 1.5rem; gap: .8rem; }
.h-scroll { display: none; }
}
/* ════════════════════════════════════════════════════════
16. PAGE "QUI SOMMES-NOUS"
─────────────────────────────────────────────────────────
9 sections : page-hero, pull-quote, 2 splits, valeurs,
mission (full banner), pourquoi, galerie, page-cta.
La newsletter et le footer réutilisent les styles existants.
══════════════════════════════════════════════════════════ */
/* ─── 16.1 PAGE HERO ─── */
.page-hero {
background: linear-gradient(120deg, var(--dark) 0%, var(--pu) 60%, #5A3880 100%);
padding: 7rem 0 6rem;
position: relative;
overflow: hidden;
text-align: center;
}
.page-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 20% 80%, rgba(248,115,0,.14), transparent 50%),
radial-gradient(ellipse at 80% 20%, rgba(177,151,231,.1), transparent 45%);
}
.page-hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: var(--grad);
}
.hero-deco {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 0;
}
.hero-deco-text {
font-family: var(--serif);
font-size: clamp(8rem, 18vw, 22rem);
font-weight: 300;
color: rgba(248,115,0,.04);
letter-spacing: .05em;
line-height: 1;
white-space: nowrap;
}
.page-hero-inner { position: relative; z-index: 1; }
.breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
font-size: .6rem;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255,255,255,.35);
margin-bottom: 2rem;
}
.breadcrumb a {
color: rgba(255,255,255,.4);
transition: color .2s;
text-decoration: none;
}
.breadcrumb a:hover { color: rgba(255,255,255,.7); }
.breadcrumb span { color: rgba(255,255,255,.2); }
.page-hero h1 {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(2.8rem, 6vw, 5.5rem);
color: #fff;
line-height: 1.05;
letter-spacing: -.02em;
margin-bottom: 1.6rem;
}
.page-hero h1 em {
font-style: italic;
color: var(--amb);
}
.page-hero-sub {
font-size: 1rem;
color: rgba(255,255,255,.55);
max-width: 520px;
margin: 0 auto;
line-height: 1.8;
font-weight: 300;
}
/* ─── 16.2 PULL QUOTE ─── */
.pull-quote {
background: var(--wh);
padding: 4rem 0;
text-align: center;
position: relative;
}
.pull-quote::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--grad);
}
.pq-inner { max-width: 800px; margin: 0 auto; }
.pq-mark {
font-family: var(--serif);
font-size: 5rem;
line-height: .5;
color: var(--or);
opacity: .25;
display: block;
margin-bottom: .5rem;
}
.pq-text {
font-family: var(--serif);
font-size: clamp(1.4rem, 2.5vw, 2.1rem);
font-weight: 300;
font-style: italic;
color: var(--dark);
line-height: 1.5;
}
/* ─── 16.3 SPLIT SECTIONS ─── */
.split { padding: 6rem 0; }
.split-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
}
.split-grid.reverse { direction: rtl; }
.split-grid.reverse > * { direction: ltr; }
.split-img {
position: relative;
overflow: hidden;
}
.split-img img {
width: 100%;
aspect-ratio: 4/5;
object-fit: cover;
display: block;
}
.split-img::after {
content: '';
position: absolute;
bottom: -1.2rem;
right: -1.2rem;
width: 120px;
height: 120px;
border: 1px solid rgba(248,115,0,.25);
pointer-events: none;
z-index: -1;
}
.split-img-caption {
position: absolute;
bottom: 1.2rem;
left: 1.2rem;
background: rgba(50,1,48,.8);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: .5rem 1rem;
font-size: .62rem;
letter-spacing: .08em;
color: rgba(255,255,255,.7);
}
.split-text .section-label {
font-size: .6rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--or);
margin-bottom: .7rem;
}
.split-text h2 {
font-family: var(--serif);
font-size: clamp(1.8rem, 2.8vw, 2.6rem);
font-weight: 300;
color: var(--dark);
line-height: 1.15;
margin-bottom: 1.5rem;
}
.split-text p {
font-size: .92rem;
color: var(--mi);
line-height: 1.95;
margin-bottom: .9rem;
}
.split-text p strong {
color: var(--dark);
font-weight: 400;
}
.callout-box {
background: var(--cr);
border-left: 3px solid var(--or);
padding: 1.2rem 1.5rem;
margin-top: 1.8rem;
}
.callout-box h4 {
font-family: var(--serif);
font-size: 1rem;
font-weight: 400;
color: var(--dark);
margin-bottom: .5rem;
}
.callout-box p {
font-size: .85rem;
color: var(--mi);
line-height: 1.8;
margin: 0;
}
/* ─── 16.4 VALEURS ─── */
.valeurs {
background: var(--pu);
padding: 7rem 0;
position: relative;
overflow: hidden;
}
.valeurs::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 80% 20%, rgba(248,115,0,.1), transparent 55%);
}
.valeurs::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: var(--grad);
}
.valeurs-header {
text-align: center;
max-width: 600px;
margin: 0 auto 4rem;
position: relative;
z-index: 1;
}
.valeurs-header .ey { color: var(--or); }
.valeurs-header h2 {
font-family: var(--serif);
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 300;
color: #fff;
margin-top: .6rem;
line-height: 1.15;
}
.valeurs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(255,255,255,.08);
position: relative;
z-index: 1;
}
.valeur-card {
background: rgba(50,1,48,.4);
padding: 2.5rem 2rem;
transition: background .3s;
}
.valeur-card:hover { background: rgba(50,1,48,.65); }
.valeur-icon {
width: 48px;
height: 48px;
background: rgba(248,115,0,.15);
border: 1px solid rgba(248,115,0,.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.2rem;
font-size: 1.2rem;
}
.valeur-num {
font-size: .55rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--or);
margin-bottom: .4rem;
}
.valeur-name {
font-family: var(--serif);
font-size: 1.05rem;
font-weight: 400;
color: #fff;
line-height: 1.4;
}
/* ─── 16.5 MISSION (Full banner) ─── */
.mission {
position: relative;
overflow: hidden;
min-height: 540px;
display: flex;
align-items: center;
}
.mission-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
}
.mission-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mission-overlay {
position: absolute;
inset: 0;
background: linear-gradient(105deg, rgba(50,1,48,.92) 0%, rgba(67,46,111,.85) 50%, rgba(50,1,48,.75) 100%);
}
.mission-glow {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 15% 70%, rgba(248,115,0,.18), transparent 50%);
}
.mission-inner {
position: relative;
z-index: 2;
padding: 5rem 0;
}
.mission-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
}
.mission-text .ey { color: var(--or); }
.mission-text h2 {
font-family: var(--serif);
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 300;
color: #fff;
line-height: 1.1;
margin: .8rem 0 .5rem;
}
.mission-text .mission-tagline {
font-family: var(--serif);
font-size: 1.1rem;
font-style: italic;
color: var(--amb);
margin-bottom: 1.5rem;
}
.mission-text p {
font-size: .9rem;
color: rgba(255,255,255,.6);
line-height: 1.95;
margin-bottom: .7rem;
}
.mission-text p strong {
color: rgba(255,255,255,.9);
font-weight: 400;
}
.mission-quote {
border-left: 2px solid var(--or);
padding-left: 1.5rem;
margin-top: 2rem;
}
.mission-quote p {
font-family: var(--serif);
font-size: 1.1rem;
font-style: italic;
font-weight: 300;
color: rgba(255,255,255,.7);
line-height: 1.6;
margin: 0;
}
.mission-visual { position: relative; }
.mission-visual img {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
display: block;
opacity: .7;
}
.mission-visual::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to bottom, transparent 50%, rgba(50,1,48,.5) 100%);
}
/* ─── 16.6 POURQUOI OHLYA ─── */
.pourquoi {
padding: 6.5rem 0;
background: var(--cr);
}
.pourquoi-header {
text-align: center;
max-width: 600px;
margin: 0 auto 4rem;
}
.pourquoi-header h2 {
font-family: var(--serif);
font-size: clamp(1.8rem, 3vw, 2.8rem);
font-weight: 300;
color: var(--dark);
margin-top: .6rem;
line-height: 1.15;
}
.engagements {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
background: var(--cr3);
}
.eng-card {
background: var(--wh);
padding: 2.5rem 2rem;
transition: transform .3s var(--ease), box-shadow .3s;
}
.eng-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 32px rgba(50,1,48,.1);
z-index: 2;
position: relative;
}
.eng-icon {
width: 52px;
height: 52px;
background: rgba(248,115,0,.08);
border: 1px solid rgba(248,115,0,.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.3rem;
font-size: 1.3rem;
}
.eng-title {
font-family: var(--serif);
font-size: 1.05rem;
font-weight: 400;
color: var(--dark);
line-height: 1.3;
margin-bottom: .6rem;
}
.eng-desc {
font-size: .82rem;
color: var(--mi);
line-height: 1.7;
}
.eng-num {
font-size: .55rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--or);
margin-bottom: .5rem;
}
/* ─── 16.7 GALERIE ─── */
.galerie {
padding: 5rem 0;
background: var(--wh);
}
.galerie-header {
text-align: center;
margin-bottom: 3rem;
}
.galerie-header h2 {
font-family: var(--serif);
font-size: clamp(1.6rem, 2.5vw, 2.3rem);
font-weight: 300;
color: var(--dark);
margin-top: .5rem;
}
.galerie-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3px;
}
.galerie-img {
overflow: hidden;
aspect-ratio: 3/4;
position: relative;
cursor: pointer;
}
.galerie-img img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
aspect-ratio: auto !important;
transition: transform .7s var(--ease);
}
.galerie-img:hover img { transform: scale(1.07); }
.galerie-img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(50,1,48,.55) 0%, transparent 50%);
opacity: 0;
transition: opacity .4s;
}
.galerie-img:hover::after { opacity: 1; }
.galerie-caption {
position: absolute;
bottom: 1rem;
left: 1rem;
right: 1rem;
z-index: 2;
font-family: var(--serif);
font-style: italic;
font-size: .8rem;
color: rgba(255,255,255,.85);
opacity: 0;
transition: opacity .4s;
}
.galerie-img:hover .galerie-caption { opacity: 1; }
/* ─── 16.8 PAGE CTA ─── */
.page-cta {
background: var(--dark);
padding: 6rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.page-cta::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 50%, rgba(248,115,0,.1), transparent 65%);
}
.page-cta::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--grad);
}
.cta-inner {
position: relative;
z-index: 1;
max-width: 600px;
margin: 0 auto;
}
.cta-inner .ey { color: var(--or); }
.cta-inner h2 {
font-family: var(--serif);
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 300;
color: #fff;
margin: .8rem 0 1rem;
line-height: 1.15;
}
.cta-inner p {
font-size: .9rem;
color: rgba(255,255,255,.5);
line-height: 1.9;
margin-bottom: 2.2rem;
}
.cta-buttons {
display: flex;
gap: .8rem;
justify-content: center;
flex-wrap: wrap;
}
/* ─── 16.9 RESPONSIVE ─── */
@media (max-width: 1100px) {
.split-grid,
.split-grid.reverse {
grid-template-columns: 1fr;
gap: 2.5rem;
direction: ltr;
}
.split-img { max-width: 480px; margin: 0 auto; }
.mission-layout { grid-template-columns: 1fr; }
.mission-visual { display: none; }
.engagements { grid-template-columns: repeat(2, 1fr); }
.galerie-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.valeurs-grid { grid-template-columns: 1fr 1fr; }
.engagements { grid-template-columns: 1fr 1fr; }
.galerie-grid { grid-template-columns: 1fr 1fr; }
.page-hero { padding: 4.5rem 0 4rem; }
.split { padding: 4rem 0; }
.valeurs { padding: 4.5rem 0; }
.pourquoi { padding: 4.5rem 0; }
}
/* ════════════════════════════════════════════════════════
17. PAGES CATÉGORIES (Art, Bien-être, Artisanat, Gastronomie, B2B)
─────────────────────────────────────────────────────────
3 widgets HTML par page : cat-hero (full-width photo +
breadcrumb + H1 + desc + counter) / cat-edito (image + texte
éditorial sur fond aubergine) / other-cats (4 cartes
passerelles vers autres univers).
Le shop/grille produit entre les 2 premiers est rendu par
WoodMart, pas par ces widgets.
══════════════════════════════════════════════════════════ */
/* ─── 17.1 CATEGORY HERO ─── */
.cat-hero {
position: relative;
height: 72vh;
min-height: 480px;
overflow: hidden;
display: flex;
align-items: flex-end;
}
.cat-hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
}
.cat-hero-bg img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block;
transition: transform 8s ease;
max-width: none !important;
max-height: none !important;
aspect-ratio: auto !important;
}
.cat-hero:hover .cat-hero-bg img { transform: scale(1.04); }
.cat-hero-ov {
position: absolute;
inset: 0;
background:
linear-gradient(to top, rgba(50,1,48,.95) 0%, rgba(50,1,48,.65) 45%, rgba(50,1,48,.25) 100%),
linear-gradient(to right, rgba(50,1,48,.4) 0%, transparent 60%);
}
.cat-hero-glow {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 10% 90%, rgba(248,115,0,.15), transparent 50%);
}
.cat-hero-content {
position: relative;
z-index: 2;
padding: 0 2.5rem 3.5rem;
max-width: 1260px;
margin: 0 auto;
width: 100%;
display: grid;
grid-template-columns: 1fr auto;
align-items: flex-end;
gap: 3rem;
}
.cat-breadcrumb {
font-size: .58rem;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255,255,255,.35);
margin-bottom: 1.2rem;
display: flex;
align-items: center;
gap: .5rem;
}
.cat-breadcrumb a {
color: rgba(255,255,255,.4);
transition: color .2s;
text-decoration: none;
}
.cat-breadcrumb a:hover { color: rgba(255,255,255,.7); }
.cat-breadcrumb span { color: rgba(255,255,255,.2); }
.cat-eyebrow {
font-size: .6rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--or);
margin-bottom: .8rem;
display: flex;
align-items: center;
gap: .7rem;
}
.cat-eyebrow::before {
content: '';
width: 20px;
height: 1px;
background: var(--or);
}
.cat-hero h1 {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(3rem, 7vw, 6rem);
color: #fff;
line-height: 1;
letter-spacing: -.02em;
margin-bottom: .8rem;
}
.cat-hero-desc {
font-size: .95rem;
color: rgba(255,255,255,.6);
max-width: 420px;
line-height: 1.8;
margin-bottom: 1.8rem;
font-weight: 300;
}
.cat-hero-right { text-align: right; }
.cat-count {
font-family: var(--serif);
font-size: 4rem;
font-weight: 300;
color: rgba(248,115,0,.25);
line-height: 1;
}
.cat-count-label {
font-size: .6rem;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.3);
margin-top: .2rem;
}
.cat-hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: var(--grad);
}
/* ─── 17.2 SECTION ÉDITORIALE ─── */
.cat-edito {
background: var(--dark);
padding: 6rem 0;
position: relative;
overflow: hidden;
}
.cat-edito::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 70% 50%, rgba(248,115,0,.1), transparent 60%);
}
.cat-edito::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--grad);
}
.edito-inner {
display: grid;
grid-template-columns: 1fr 420px;
gap: 6rem;
align-items: center;
position: relative;
z-index: 1;
}
.edito-img {
position: relative;
overflow: hidden;
}
.edito-img img {
width: 100% !important;
aspect-ratio: 4/3;
object-fit: cover !important;
display: block;
opacity: .75;
height: auto !important;
max-width: none !important;
}
.edito-img::after {
content: '';
position: absolute;
top: .9rem;
right: -.9rem;
bottom: -.9rem;
left: .9rem;
border: 1px solid rgba(248,115,0,.2);
pointer-events: none;
z-index: -1;
}
.edito-text .ey { color: var(--or); }
.edito-text h2 {
font-family: var(--serif);
font-size: clamp(1.9rem, 3vw, 2.8rem);
font-weight: 300;
color: #fff;
line-height: 1.15;
margin: .8rem 0 1.4rem;
}
.edito-text p {
font-size: .9rem;
color: rgba(255,255,255,.52);
line-height: 1.95;
margin-bottom: .7rem;
}
.edito-text p strong {
color: rgba(255,255,255,.88);
font-weight: 400;
}
.edito-tags {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin: 1.8rem 0 2.2rem;
}
.edito-tag {
font-size: .62rem;
letter-spacing: .06em;
padding: .3rem .85rem;
border: 1px solid rgba(255,255,255,.15);
color: rgba(255,255,255,.5);
}
/* ─── 17.3 AUTRES CATÉGORIES ─── */
.other-cats {
padding: 5rem 0;
background: var(--cr);
}
.other-cats-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 2.8rem;
}
.other-cats h2 {
font-family: var(--serif);
font-size: clamp(1.4rem, 2.2vw, 2rem);
font-weight: 300;
color: var(--dark);
margin-top: .3rem;
}
.cats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3px;
background: var(--cr3);
}
.cat-card {
position: relative;
overflow: hidden;
cursor: pointer;
background: var(--wh);
}
.cat-card:hover .cat-card-img,
.cat-card:hover .cat-card-img img { transform: scale(1.06); }
.cat-card-img {
aspect-ratio: 3/4;
overflow: hidden;
width: 100%;
transition: transform .7s var(--ease);
background: linear-gradient(145deg, var(--cr2), #DDD0E8);
position: relative;
}
.cat-card-img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block;
transition: transform .7s var(--ease);
max-width: none !important;
max-height: none !important;
aspect-ratio: auto !important;
}
.cat-card-ov {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(50,1,48,.88) 0%, rgba(50,1,48,.15) 60%, transparent 100%);
transition: opacity .3s;
}
.cat-card:hover .cat-card-ov { opacity: .75; }
.cat-card-info {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 1.5rem;
z-index: 2;
}
.cat-card-name {
font-family: var(--serif);
font-size: 1.2rem;
font-weight: 300;
color: #fff;
margin-bottom: .3rem;
}
.cat-card-desc {
font-size: .7rem;
color: rgba(255,255,255,.55);
line-height: 1.5;
margin-bottom: .8rem;
}
.cat-card-link {
font-size: .6rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--or);
display: inline-flex;
align-items: center;
gap: .4rem;
transition: gap .2s;
text-decoration: none;
}
.cat-card-link::after { content: '→'; }
.cat-card:hover .cat-card-link { gap: .7rem; }
/* ─── 17.4 RESPONSIVE ─── */
@media (max-width: 1100px) {
.edito-inner { grid-template-columns: 1fr; gap: 2.5rem; }
.edito-img { max-width: 480px; margin: 0 auto; }
.cats-grid { grid-template-columns: repeat(2, 1fr); }
.cat-hero { height: auto; min-height: 420px; }
.cat-hero-content { padding: 4rem 1.5rem 2.5rem; }
}
@media (max-width: 720px) {
.cat-hero-right { display: none; }
.cat-hero-content { grid-template-columns: 1fr; gap: 1.5rem; }
.cats-grid { grid-template-columns: 1fr 1fr; }
.cat-edito { padding: 4rem 0; }
}
/* ═══════════════════════════════════════════════
18 — GASTRONOMIE (sections spécifiques)
═══════════════════════════════════════════════
Sections additionnelles pour la page catégorie
Gastronomie : strip terroir, coffrets signature,
régions/terroir. Le cat-hero / cat-edito / other-cats
sont déjà couverts par la Section 17.
═══════════════════════════════════════════════ */
/* ─── 18.PRE — Suppression du vide blanc entre dernière section et footer ─── */
body.ohlya-category-page .main-page-wrapper,
body.ohlya-category-page .site-content,
body.ohlya-category-page .content-area,
body.ohlya-category-page #wrapper,
body.ohlya-category-page #main,
body.ohlya-category-page main {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Sécurité : la dernière section Elementor colle au footer */
body.ohlya-category-page .elementor-section:last-of-type {
margin-bottom: 0 !important;
}
/* ─── 18.0 SHOP WRAPPER (grille produits catégorie) ─── */
.shop-wrap {
padding: 4rem 0 6rem;
background: var(--cr);
overflow: hidden;
}
.shop-wrap > .elementor-container,
.shop-wrap .elementor-widget-shortcode {
max-width: 1260px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 2.5rem !important;
padding-right: 2.5rem !important;
box-sizing: border-box !important;
}
/* Masque les éléments WooCommerce natifs non désirés */
.shop-wrap .woocommerce-result-count,
.shop-wrap .woocommerce-ordering,
.shop-wrap .woocommerce-notices-wrapper,
.shop-wrap .wd-products-per-page,
.shop-wrap .breadcrumb,
.shop-wrap .woocommerce-breadcrumb {
display: none !important;
}
/* Force la grille à 4 colonnes propres et SANS débordement */
.shop-wrap .products.columns-4,
.shop-wrap ul.products {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 1.5rem !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
width: 100% !important;
}
.shop-wrap .products .product {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
float: none !important;
flex: 0 0 auto !important;
box-sizing: border-box !important;
}
/* Pagination WooCommerce stylée OHLYA */
.shop-wrap .woocommerce-pagination {
margin-top: 3rem !important;
text-align: center !important;
}
.shop-wrap .woocommerce-pagination ul {
border: none !important;
display: inline-flex !important;
gap: 0.4rem !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.shop-wrap .woocommerce-pagination ul li {
border: none !important;
margin: 0 !important;
}
.shop-wrap .woocommerce-pagination ul li a,
.shop-wrap .woocommerce-pagination ul li span {
width: 36px !important;
height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0.7rem !important;
border: 1px solid var(--cr3) !important;
background: var(--wh, #FFFFFF) !important;
color: var(--mi) !important;
padding: 0 !important;
transition: all 0.2s !important;
}
.shop-wrap .woocommerce-pagination ul li a:hover {
border-color: var(--or, #F87300) !important;
color: var(--or, #F87300) !important;
}
.shop-wrap .woocommerce-pagination ul li span.current {
background: var(--dark) !important;
border-color: var(--dark) !important;
color: #fff !important;
}
@media (max-width: 1100px) {
.shop-wrap .products.columns-4,
.shop-wrap ul.products {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 720px) {
.shop-wrap { padding: 3rem 0 4rem; }
.shop-wrap > .elementor-container,
.shop-wrap .elementor-widget-shortcode {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
.shop-wrap .products.columns-4,
.shop-wrap ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 1rem !important;
}
}
/* ─── 18.1 STRIP TERROIR ─── */
.terroir-strip {
background: var(--dark);
padding: 1.6rem 0;
border-bottom: 1px solid rgba(248, 115, 0, 0.12);
}
.terroir-inner {
display: flex;
align-items: center;
gap: 3.5rem;
justify-content: center;
flex-wrap: wrap;
}
.terroir-item {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.68rem;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
}
.terroir-icon {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(248, 115, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
color: var(--ohlya-orange, #F87300);
font-size: 0.8rem;
flex-shrink: 0;
}
.terroir-item strong {
color: rgba(255, 255, 255, 0.8);
display: block;
font-size: 0.65rem;
letter-spacing: 0.1em;
}
.terroir-sep {
width: 1px;
height: 28px;
background: rgba(255, 255, 255, 0.08);
}
/* ─── 18.2 COFFRETS SIGNATURE ─── */
.coffrets-s {
padding: 5rem 0;
background: var(--cr);
}
.coffrets-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 3rem;
gap: 2rem;
flex-wrap: wrap;
}
.coffrets-header h2 {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(2rem, 4vw, 3rem);
color: var(--dark);
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0;
}
.coffrets-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.coffret-card {
background: var(--wh, #FFFFFF);
overflow: hidden;
position: relative;
cursor: pointer;
transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.coffret-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 60px rgba(50, 1, 48, 0.12);
}
.cc-img {
aspect-ratio: 4 / 3;
overflow: hidden;
position: relative;
}
.cc-img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
aspect-ratio: auto !important;
transition: transform 0.7s var(--ease);
}
.coffret-card:hover .cc-img img { transform: scale(1.06); }
.cc-ov {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(50, 1, 48, 0.8) 0%, transparent 60%);
}
.cc-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--or, #F87300);
color: #fff;
font-size: 0.55rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.3rem 0.75rem;
font-weight: 500;
}
.cc-body { padding: 1.4rem 1.6rem 1.8rem; }
.cc-tag {
font-size: 0.58rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--or, #F87300);
margin-bottom: 0.45rem;
}
.cc-name {
font-family: var(--serif);
font-size: 1.3rem;
font-weight: 400;
color: var(--dark);
margin-bottom: 0.5rem;
line-height: 1.3;
}
.cc-desc {
font-size: 0.78rem;
color: var(--mi);
line-height: 1.7;
margin-bottom: 1rem;
}
.cc-contains {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin-bottom: 1.2rem;
}
.cc-contains span {
font-size: 0.58rem;
padding: 0.18rem 0.55rem;
border: 1px solid var(--cr3);
color: var(--mi);
letter-spacing: 0.04em;
}
.cc-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.cc-price {
font-size: 1.05rem;
font-weight: 500;
color: var(--dark);
}
.cc-cta {
font-size: 0.6rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--or, #F87300);
display: flex;
align-items: center;
gap: 0.35rem;
transition: gap 0.25s;
}
.coffret-card:hover .cc-cta { gap: 0.6rem; }
.cc-cta svg {
width: 12px;
height: 12px;
stroke: var(--or, #F87300);
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ─── 18.3 RÉGIONS / TERROIR ─── */
.regions-s {
padding: 5rem 0;
background: var(--dark);
position: relative;
overflow: hidden;
}
.regions-s::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 80% 50%, rgba(248, 115, 0, 0.07), transparent 60%),
radial-gradient(ellipse at 20% 80%, rgba(177, 151, 231, 0.05), transparent 50%);
pointer-events: none;
}
.regions-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
position: relative;
z-index: 2;
}
.regions-txt .ey { color: var(--amb, #FFC25A); }
.regions-txt h2 {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(2rem, 4vw, 3.2rem);
color: #fff;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0.8rem 0 1.2rem;
}
.regions-txt p {
font-size: 0.88rem;
color: rgba(255, 255, 255, 0.5);
line-height: 1.9;
margin-bottom: 1.8rem;
font-weight: 300;
}
.regions-list {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin-bottom: 2rem;
}
.reg-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.7rem 0.9rem;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.02);
transition: all 0.3s var(--ease);
cursor: default;
}
.reg-item:hover {
border-color: rgba(248, 115, 0, 0.25);
background: rgba(248, 115, 0, 0.04);
}
.reg-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--or, #F87300);
flex-shrink: 0;
opacity: 0.7;
}
.reg-name {
font-family: var(--serif);
font-size: 1rem;
color: rgba(255, 255, 255, 0.75);
font-style: italic;
}
.reg-spec {
font-size: 0.6rem;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.35);
text-transform: uppercase;
margin-left: auto;
}
.regions-map { position: relative; }
.map-frame {
aspect-ratio: 4 / 5;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.map-frame img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
aspect-ratio: auto !important;
opacity: 0.45;
filter: sepia(40%) hue-rotate(290deg) saturate(0.6);
}
.map-ov {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(50, 1, 48, 0.1), rgba(50, 1, 48, 0.6));
}
.map-label {
position: absolute;
bottom: 2rem;
left: 2rem;
right: 2rem;
font-family: var(--serif);
font-size: 1.4rem;
color: #fff;
font-weight: 300;
font-style: italic;
line-height: 1.4;
}
.map-label span {
display: block;
font-family: var(--sans);
font-size: 0.58rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--or, #F87300);
margin-bottom: 0.4rem;
font-style: normal;
}
/* ─── 18.4 RESPONSIVE Gastronomie ─── */
@media (max-width: 1100px) {
.coffrets-grid { grid-template-columns: 1fr 1fr; }
.regions-inner { grid-template-columns: 1fr; gap: 3rem; }
.regions-map { max-width: 480px; margin: 0 auto; }
}
@media (max-width: 720px) {
.terroir-inner { gap: 1.5rem; }
.terroir-sep { display: none; }
.coffrets-grid { grid-template-columns: 1fr; }
.coffrets-s { padding: 3.5rem 0; }
.regions-s { padding: 3.5rem 0; }
}
/* ════════════════════════════════════════════════════════
SECTION 19 — QUI SOMMES-NOUS
Préfixe .qsn- pour isolation
═══════════════════════════════════════════════════════════ */
.qsn-w {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
/* 19.1 — HERO */
.qsn-hero {
background: linear-gradient(120deg, var(--ohlya-aubergine) 0%, var(--ohlya-violet) 60%, #5A3880 100%);
padding: 7rem 0 6rem;
position: relative;
overflow: hidden;
text-align: center;
}
.qsn-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 20% 80%, rgba(248, 115, 0, .14), transparent 50%),
radial-gradient(ellipse at 80% 20%, rgba(177, 151, 231, .1), transparent 45%);
}
.qsn-hero::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(to right, #F5EACE, #FFC25A, #F87300, #B197E7, #320130);
}
.qsn-hero-deco {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 0;
}
.qsn-hero-deco-text {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(8rem, 18vw, 22rem);
font-weight: 300;
color: rgba(248, 115, 0, .04);
letter-spacing: .05em;
line-height: 1;
white-space: nowrap;
}
.qsn-hero-inner {
position: relative;
z-index: 1;
}
.qsn-breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
font-size: .6rem;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255, 255, 255, .35);
margin-bottom: 2rem;
font-family: 'DM Sans', sans-serif;
}
.qsn-breadcrumb a {
color: rgba(255, 255, 255, .4);
transition: color .2s;
text-decoration: none;
}
.qsn-breadcrumb a:hover {
color: rgba(255, 255, 255, .7);
}
.qsn-breadcrumb span {
color: rgba(255, 255, 255, .2);
}
.qsn-breadcrumb .qsn-current {
color: rgba(255, 255, 255, .6);
}
.qsn-hero h1 {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(2.8rem, 6vw, 5.5rem);
color: #fff;
line-height: 1.05;
letter-spacing: -.02em;
margin: 0 0 1.6rem;
}
.qsn-hero h1 em {
font-style: italic;
color: var(--ohlya-ambre);
}
.qsn-hero-sub {
font-size: 1rem;
color: rgba(255, 255, 255, .55);
max-width: 520px;
margin: 0 auto;
line-height: 1.8;
font-weight: 300;
font-family: 'DM Sans', sans-serif;
}
/* Responsive Hero */
@media (max-width: 720px) {
.qsn-hero { padding: 5rem 0 4rem; }
.qsn-w { padding: 0 1.5rem; }
}
/* 19.2 — PULL QUOTE */
.qsn-pullquote {
background: var(--ohlya-ivoire);
padding: 4rem 0;
text-align: center;
position: relative;
}
.qsn-pullquote::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(to right, #F5EACE, #FFC25A, #F87300, #B197E7, #320130);
}
.qsn-pq-inner { max-width: 800px; margin: 0 auto; }
.qsn-pq-mark {
font-family: 'Cormorant Garamond', serif;
font-size: 5rem;
line-height: .5;
color: var(--ohlya-orange);
opacity: .25;
display: block;
margin-bottom: .5rem;
}
.qsn-pq-text {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.4rem, 2.5vw, 2.1rem);
font-weight: 300;
font-style: italic;
color: var(--ohlya-aubergine);
line-height: 1.5;
margin: 0;
}
/* 19.3 — SPLIT SECTIONS (Amoureux de l'art & Comment est née Ohlya) */
.qsn-split { padding: 6rem 0; }
.qsn-split.qsn-bg-creme { background: var(--ohlya-creme); }
.qsn-split.qsn-bg-ivoire { background: var(--ohlya-ivoire); }
.qsn-split-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
}
.qsn-split-grid.reverse { direction: rtl; }
.qsn-split-grid.reverse > * { direction: ltr; }
.qsn-split-img { position: relative; overflow: hidden; }
.qsn-split-img img {
width: 100%;
aspect-ratio: 4/5;
object-fit: cover;
display: block;
}
.qsn-split-img::after {
content: '';
position: absolute;
bottom: -1.2rem;
right: -1.2rem;
width: 120px;
height: 120px;
border: 1px solid rgba(248, 115, 0, .25);
pointer-events: none;
z-index: -1;
}
.qsn-split-img-caption {
position: absolute;
bottom: 1.2rem;
left: 1.2rem;
background: rgba(50, 1, 48, .8);
backdrop-filter: blur(6px);
padding: .5rem 1rem;
font-size: .62rem;
letter-spacing: .08em;
color: rgba(255, 255, 255, .7);
font-family: 'DM Sans', sans-serif;
}
.qsn-split-label {
font-size: .6rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--ohlya-orange);
margin-bottom: .7rem;
font-family: 'DM Sans', sans-serif;
font-weight: 500;
}
.qsn-split-text h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.8rem, 2.8vw, 2.6rem);
font-weight: 300;
color: var(--ohlya-aubergine);
line-height: 1.15;
margin: 0 0 1.5rem;
}
.qsn-split-text p {
font-size: .92rem;
color: var(--ohlya-charcoal);
line-height: 1.95;
margin-bottom: .9rem;
font-family: 'DM Sans', sans-serif;
}
.qsn-split-text p strong {
color: var(--ohlya-aubergine);
font-weight: 400;
}
.qsn-callout {
background: var(--ohlya-creme);
border-left: 3px solid var(--ohlya-orange);
padding: 1.2rem 1.5rem;
margin-top: 1.8rem;
}
.qsn-callout h4 {
font-family: 'Cormorant Garamond', serif;
font-size: 1rem;
font-weight: 400;
color: var(--ohlya-aubergine);
margin: 0 0 .5rem;
}
.qsn-callout p {
font-size: .85rem;
color: var(--ohlya-charcoal);
line-height: 1.8;
margin: 0;
}
/* 19.4 — VALEURS */
.qsn-valeurs {
background: var(--ohlya-violet);
padding: 7rem 0;
position: relative;
overflow: hidden;
}
.qsn-valeurs::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 80% 20%, rgba(248, 115, 0, .1), transparent 55%);
}
.qsn-valeurs::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(to right, #F5EACE, #FFC25A, #F87300, #B197E7, #320130);
}
.qsn-valeurs-header {
text-align: center;
max-width: 600px;
margin: 0 auto 4rem;
position: relative;
z-index: 1;
}
.qsn-ey {
font-size: .6rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--ohlya-orange);
font-weight: 500;
font-family: 'DM Sans', sans-serif;
}
.qsn-valeurs-header h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 300;
color: #fff;
margin: .6rem 0 0;
line-height: 1.15;
}
.qsn-valeurs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(255, 255, 255, .08);
position: relative;
z-index: 1;
}
.qsn-valeur-card {
background: rgba(50, 1, 48, .4);
padding: 2.5rem 2rem;
transition: background .3s;
}
.qsn-valeur-card:hover {
background: rgba(50, 1, 48, .65);
}
.qsn-valeur-icon {
width: 48px;
height: 48px;
background: rgba(248, 115, 0, .15);
border: 1px solid rgba(248, 115, 0, .25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.2rem;
font-size: 1.2rem;
}
.qsn-valeur-num {
font-size: .55rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ohlya-orange);
margin-bottom: .4rem;
font-family: 'DM Sans', sans-serif;
}
.qsn-valeur-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.05rem;
font-weight: 400;
color: #fff;
line-height: 1.4;
}
/* 19.5 — MISSION (Full banner) */
.qsn-mission {
position: relative;
overflow: hidden;
min-height: 540px;
display: flex;
align-items: center;
}
.qsn-mission-bg { position: absolute; inset: 0; }
.qsn-mission-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.qsn-mission-overlay {
position: absolute;
inset: 0;
background: linear-gradient(105deg, rgba(50, 1, 48, .92) 0%, rgba(67, 46, 111, .85) 50%, rgba(50, 1, 48, .75) 100%);
}
.qsn-mission-glow {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 15% 70%, rgba(248, 115, 0, .18), transparent 50%);
}
.qsn-mission-inner {
position: relative;
z-index: 2;
padding: 5rem 0;
width: 100%;
}
.qsn-mission-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
}
.qsn-mission-text h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 300;
color: #fff;
line-height: 1.1;
margin: .8rem 0 .5rem;
}
.qsn-mission-tagline {
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
font-style: italic;
color: var(--ohlya-ambre);
margin-bottom: 1.5rem;
}
.qsn-mission-text p {
font-size: .9rem;
color: rgba(255, 255, 255, .6);
line-height: 1.95;
margin-bottom: .7rem;
font-family: 'DM Sans', sans-serif;
}
.qsn-mission-text p strong {
color: rgba(255, 255, 255, .9);
font-weight: 400;
}
.qsn-mission-quote {
border-left: 2px solid var(--ohlya-orange);
padding-left: 1.5rem;
margin-top: 2rem;
}
.qsn-mission-quote p {
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
font-style: italic;
font-weight: 300;
color: rgba(255, 255, 255, .7);
line-height: 1.6;
margin: 0;
}
.qsn-mission-visual { position: relative; }
.qsn-mission-visual img {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
display: block;
opacity: .7;
}
.qsn-mission-visual::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to bottom, transparent 50%, rgba(50, 1, 48, .5) 100%);
}
/* 19.6 — POURQUOI OHLYA */
.qsn-pourquoi {
padding: 6.5rem 0;
background: var(--ohlya-creme);
}
.qsn-pourquoi-header {
text-align: center;
max-width: 600px;
margin: 0 auto 4rem;
}
.qsn-pourquoi-header h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.8rem, 3vw, 2.8rem);
font-weight: 300;
color: var(--ohlya-aubergine);
margin: .6rem 0 0;
line-height: 1.15;
}
.qsn-engagements {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
background: #E8D9B8;
}
.qsn-eng-card {
background: var(--ohlya-ivoire);
padding: 2.5rem 2rem;
transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.qsn-eng-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 32px rgba(50, 1, 48, .1);
z-index: 2;
position: relative;
}
.qsn-eng-icon {
width: 52px;
height: 52px;
background: rgba(248, 115, 0, .08);
border: 1px solid rgba(248, 115, 0, .2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.3rem;
font-size: 1.3rem;
}
.qsn-eng-num {
font-size: .55rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ohlya-orange);
margin-bottom: .5rem;
font-family: 'DM Sans', sans-serif;
}
.qsn-eng-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.05rem;
font-weight: 400;
color: var(--ohlya-aubergine);
line-height: 1.3;
margin-bottom: .6rem;
}
.qsn-eng-desc {
font-size: .82rem;
color: var(--ohlya-charcoal);
line-height: 1.7;
font-family: 'DM Sans', sans-serif;
}
/* 19.7 — GALERIE */
.qsn-galerie {
padding: 5rem 0;
background: var(--ohlya-ivoire);
}
.qsn-galerie-header {
text-align: center;
margin-bottom: 3rem;
}
.qsn-galerie-header h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.6rem, 2.5vw, 2.3rem);
font-weight: 300;
color: var(--ohlya-aubergine);
margin: .5rem 0 0;
}
.qsn-galerie-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3px;
}
.qsn-galerie-img {
overflow: hidden;
aspect-ratio: 3/4;
position: relative;
cursor: pointer;
background: var(--ohlya-creme);
}
.qsn-galerie-grid .qsn-galerie-img img,
.qsn-galerie-img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
max-width: none !important;
transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.qsn-galerie-img:hover img { transform: scale(1.07); }
.qsn-galerie-img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(50, 1, 48, .55) 0%, transparent 50%);
opacity: 0;
transition: opacity .4s;
}
.qsn-galerie-img:hover::after { opacity: 1; }
.qsn-galerie-caption {
position: absolute;
bottom: 1rem;
left: 1rem;
right: 1rem;
z-index: 2;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: .8rem;
color: rgba(255, 255, 255, .8);
opacity: 0;
transition: opacity .4s;
}
.qsn-galerie-img:hover .qsn-galerie-caption { opacity: 1; }
/* 19.8 — CTA */
.qsn-cta {
background: var(--ohlya-aubergine);
padding: 6rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.qsn-cta::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 50%, rgba(248, 115, 0, .1), transparent 65%);
}
.qsn-cta::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(to right, #F5EACE, #FFC25A, #F87300, #B197E7, #320130);
}
.qsn-cta-inner {
position: relative;
z-index: 1;
max-width: 600px;
margin: 0 auto;
}
.qsn-cta-inner h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 300;
color: #fff;
margin: .8rem 0 1rem;
line-height: 1.15;
}
.qsn-cta-inner p {
font-size: .9rem;
color: rgba(255, 255, 255, .5);
line-height: 1.9;
margin-bottom: 2.2rem;
font-family: 'DM Sans', sans-serif;
}
.qsn-cta-buttons {
display: flex;
gap: .8rem;
justify-content: center;
flex-wrap: wrap;
}
/* 19.9 — RESPONSIVE QSN */
@media (max-width: 1100px) {
.qsn-split-grid,
.qsn-split-grid.reverse {
grid-template-columns: 1fr;
gap: 2.5rem;
direction: ltr;
}
.qsn-split-img { max-width: 480px; }
.qsn-mission-layout { grid-template-columns: 1fr; }
.qsn-mission-visual { display: none; }
.qsn-engagements { grid-template-columns: repeat(2, 1fr); }
.qsn-galerie-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.qsn-split { padding: 4rem 0; }
.qsn-valeurs { padding: 5rem 0; }
.qsn-valeurs-grid { grid-template-columns: 1fr 1fr; }
.qsn-engagements { grid-template-columns: 1fr 1fr; }
.qsn-galerie-grid { grid-template-columns: 1fr 1fr; }
.qsn-cta { padding: 4rem 0; }
.qsn-pourquoi { padding: 4rem 0; }
}
/* ════════════════════════════════════════════════════════
SECTION 20 — NEWSLETTER (réutilisable sur toutes pages)
Préfixe .ohlya-nl-
═══════════════════════════════════════════════════════════ */
.ohlya-nl {
padding: 5rem 0;
background: var(--ohlya-violet);
position: relative;
overflow: hidden;
}
.ohlya-nl::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 80% 50%, rgba(248, 115, 0, .1), transparent 55%);
}
.ohlya-nl::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(to right, #F5EACE, #FFC25A, #F87300, #B197E7, #320130);
}
.ohlya-nl-w {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 1;
}
.ohlya-nl-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5.5rem;
align-items: center;
}
.ohlya-nl-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.7rem, 2.7vw, 2.4rem);
font-weight: 300;
color: #fff;
margin: 0 0 .7rem;
line-height: 1.2;
}
.ohlya-nl-sub {
font-size: .85rem;
color: rgba(255, 255, 255, .42);
line-height: 1.9;
font-family: 'DM Sans', sans-serif;
margin: 0;
}
.ohlya-nl-form {
display: flex;
flex-direction: column;
gap: .7rem;
}
.ohlya-nl-row {
display: flex;
}
.ohlya-nl-input {
flex: 1;
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .14);
border-right: none;
color: #fff;
font-family: 'DM Sans', sans-serif;
font-size: .84rem;
padding: .88rem 1.2rem;
outline: none;
transition: border-color .2s;
}
.ohlya-nl-input::placeholder { color: rgba(255, 255, 255, .28); }
.ohlya-nl-input:focus { border-color: rgba(248, 115, 0, .5); }
.ohlya-nl-btn {
background: var(--ohlya-orange);
color: #fff;
font-family: 'DM Sans', sans-serif;
font-size: .62rem;
letter-spacing: .14em;
text-transform: uppercase;
padding: .88rem 1.5rem;
cursor: pointer;
transition: background .2s;
border: none;
}
.ohlya-nl-btn:hover { background: #D66800; }
.ohlya-nl-note {
font-size: .62rem;
color: rgba(255, 255, 255, .22);
line-height: 1.7;
font-family: 'DM Sans', sans-serif;
margin: 0;
}
.ohlya-nl-note a {
color: rgba(255, 194, 90, .65);
text-decoration: none;
}
.ohlya-nl-note a:hover { color: var(--ohlya-ambre); }
.ohlya-nl-creator {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, .07);
font-size: .75rem;
color: rgba(255, 255, 255, .3);
font-family: 'DM Sans', sans-serif;
}
.ohlya-nl-creator a {
color: var(--ohlya-ambre);
border-bottom: 1px solid rgba(255, 194, 90, .3);
text-decoration: none;
}
.ohlya-nl-creator em {
font-style: italic;
}
@media (max-width: 1100px) {
.ohlya-nl-inner {
grid-template-columns: 1fr;
gap: 2rem;
}
}
@media (max-width: 720px) {
.ohlya-nl { padding: 4rem 0; }
.ohlya-nl-w { padding: 0 1.5rem; }
}
/* ════════════════════════════════════════════════════════
SECTION 21 — CADEAUX D'ENTREPRISE (B2B)
Préfixe .b2b-
═══════════════════════════════════════════════════════════ */
.b2b-w {
max-width: 1260px;
margin: 0 auto;
padding: 0 2rem;
}
/* 21.1 — HERO (background image via Section Elementor) */
.b2b-hero {
position: relative;
min-height: 78vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.b2b-hero-ov,
.b2b-hero-glow {
z-index: 1;
}
.b2b-hero-content,
.b2b-hero-trust {
position: relative;
z-index: 2;
}
.b2b-hero-content {
flex: 1 0 auto;
}
.b2b-hero:hover .b2b-hero-bg img { transform: scale(1.04); }
.b2b-hero-ov {
position: absolute;
inset: 0;
background:
linear-gradient(to top, rgba(50,1,48,.96) 0%, rgba(50,1,48,.5) 55%, rgba(50,1,48,.2) 100%),
linear-gradient(to right, rgba(50,1,48,.7) 0%, rgba(50,1,48,.1) 70%);
}
.b2b-hero-glow {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 12% 90%, rgba(248,115,0,.18), transparent 55%),
radial-gradient(ellipse at 95% 30%, rgba(176,141,87,.12), transparent 55%);
}
.b2b-hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(to right, #F5EACE, #FFC25A, #F87300, #B197E7, #320130);
z-index: 3;
}
.b2b-hero-content {
position: relative;
z-index: 2;
padding: 5rem 2.5rem 4rem;
max-width: 1260px;
margin: 0 auto;
width: 100%;
}
.b2b-bc {
font-size: .58rem;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.32);
margin-bottom: 1.4rem;
display: flex;
align-items: center;
gap: .5rem;
font-family: 'DM Sans', sans-serif;
}
.b2b-bc a {
color: rgba(255,255,255,.4);
transition: color .2s;
text-decoration: none;
}
.b2b-bc a:hover { color: rgba(255,255,255,.75); }
.b2b-bc span { color: rgba(255,255,255,.18); }
.b2b-eyebrow {
font-size: .62rem;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--ohlya-ambre);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: .7rem;
font-weight: 500;
font-family: 'DM Sans', sans-serif;
}
.b2b-eyebrow::before {
content: '';
width: 24px;
height: 1px;
background: var(--ohlya-ambre);
}
.b2b-h1-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 3rem;
align-items: flex-end;
}
.b2b-hero h1 {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(2.6rem, 5.6vw, 4.6rem);
color: #fff;
line-height: 1;
letter-spacing: -.02em;
margin: 0 0 .6rem;
}
.b2b-hero h1 em {
font-style: italic;
color: var(--ohlya-ambre);
font-weight: 300;
}
.b2b-hero-sub {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-style: italic;
font-size: clamp(1.1rem, 1.6vw, 1.5rem);
color: rgba(255,255,255,.62);
line-height: 1.45;
margin: 0 0 1.6rem;
max-width: 580px;
}
.b2b-hero-desc {
font-size: .92rem;
color: rgba(255,255,255,.55);
max-width: 560px;
line-height: 1.85;
margin: 0 0 2rem;
font-weight: 300;
font-family: 'DM Sans', sans-serif;
}
.b2b-hero-cta {
display: flex;
gap: .7rem;
flex-wrap: wrap;
margin-bottom: 2.5rem;
}
.b2b-hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
}
.b2b-hero-bottom {
display: grid;
grid-template-columns: minmax(280px, auto) 1fr;
gap: 3rem;
align-items: end;
padding-top: 1.6rem;
border-top: 1px solid rgba(255,255,255,.08);
margin-top: .5rem;
}
.b2b-hero-trust-inline {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
align-items: center;
}
.b2b-hero-trust-inline .b2b-trust-it {
display: flex;
align-items: center;
gap: .7rem;
padding: 0;
border: none;
}
.b2b-hero-trust-inline .b2b-trust-ic {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(248,115,0,.12);
border: 1px solid rgba(248,115,0,.25);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.b2b-stat strong {
font-family: 'Cormorant Garamond', serif;
font-size: 1.8rem;
font-weight: 300;
color: var(--ohlya-ambre);
line-height: 1;
display: block;
}
.b2b-stat span {
font-size: .6rem;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.35);
margin-top: .35rem;
display: block;
line-height: 1.5;
font-family: 'DM Sans', sans-serif;
}
/* Trust Strip */
.b2b-hero-trust {
position: relative;
z-index: 2;
background: rgba(50,1,48,.6);
backdrop-filter: blur(12px);
border-top: 1px solid rgba(255,255,255,.08);
}
.b2b-trust-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
padding: 1.4rem 0;
max-width: 1260px;
margin: 0 auto;
}
.b2b-trust-it {
display: flex;
align-items: center;
gap: .9rem;
padding: 0 1.6rem;
border-right: 1px solid rgba(255,255,255,.06);
}
.b2b-trust-it:last-child { border-right: none; }
.b2b-trust-ic {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(248,115,0,.12);
border: 1px solid rgba(248,115,0,.25);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.b2b-trust-ic svg {
width: 16px;
height: 16px;
stroke: var(--ohlya-ambre);
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.b2b-trust-tx {
font-size: .74rem;
color: #fff;
font-weight: 500;
line-height: 1.35;
font-family: 'DM Sans', sans-serif;
}
.b2b-trust-tx small {
display: block;
color: rgba(255,255,255,.5);
font-weight: 400;
font-size: .62rem;
margin-top: .15rem;
}
/* 21.2 — OCCASIONS */
.b2b-occ-s {
padding: 5rem 0 2rem;
background: var(--ohlya-creme);
}
.b2b-occ-h {
text-align: center;
max-width: 680px;
margin: 0 auto 3rem;
}
.b2b-ey {
font-size: .6rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--ohlya-orange);
font-weight: 500;
font-family: 'DM Sans', sans-serif;
}
.b2b-occ-h h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.7rem, 2.8vw, 2.4rem);
font-weight: 300;
color: var(--ohlya-aubergine);
margin: .5rem 0 0;
line-height: 1.15;
}
.b2b-occ-h p {
font-size: .88rem;
color: var(--ohlya-charcoal);
line-height: 1.85;
margin-top: .8rem;
font-weight: 300;
font-family: 'DM Sans', sans-serif;
}
.b2b-occ-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3px;
background: #E8D9B8;
}
.b2b-occ-card {
position: relative;
overflow: hidden;
cursor: pointer;
background: #FAF4E4;
aspect-ratio: 3/4;
text-decoration: none;
display: block;
}
.b2b-occ-card-bg {
position: absolute;
inset: 0;
transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.b2b-occ-card:hover .b2b-occ-card-bg { transform: scale(1.06); }
.b2b-occ-card-bg img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block;
}
.b2b-occ-card-ov {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(50,1,48,.92) 0%, rgba(50,1,48,.4) 55%, rgba(50,1,48,.1) 100%);
z-index: 1;
}
.b2b-occ-card-info {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 1.7rem 1.5rem;
z-index: 2;
}
.b2b-occ-card-num {
font-size: .55rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ohlya-ambre);
margin-bottom: .5rem;
font-family: 'DM Sans', sans-serif;
}
.b2b-occ-card-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.4rem;
font-weight: 300;
color: #fff;
margin-bottom: .4rem;
line-height: 1.15;
}
.b2b-occ-card-desc {
font-size: .7rem;
color: rgba(255,255,255,.55);
line-height: 1.6;
margin-bottom: .9rem;
font-weight: 300;
font-family: 'DM Sans', sans-serif;
}
.b2b-occ-card-cnt {
font-size: .6rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ohlya-orange);
display: inline-flex;
align-items: center;
gap: .4rem;
transition: gap .2s;
font-weight: 500;
font-family: 'DM Sans', sans-serif;
}
.b2b-occ-card-cnt::after { content: '→'; }
.b2b-occ-card:hover .b2b-occ-card-cnt { gap: .7rem; }
/* 21.3 — PROCESS */
.b2b-proc-s {
padding: 6rem 0;
background: #FAF4E4;
position: relative;
overflow: hidden;
}
.b2b-proc-s::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(to right, transparent, #E8D9B8, transparent);
}
.b2b-proc-h {
text-align: center;
margin-bottom: 4rem;
}
.b2b-proc-h h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.7rem, 2.8vw, 2.4rem);
font-weight: 300;
color: var(--ohlya-aubergine);
margin: .5rem 0 0;
line-height: 1.15;
}
.b2b-proc-h p {
font-size: .88rem;
color: var(--ohlya-charcoal);
max-width: 540px;
margin: .7rem auto 0;
line-height: 1.8;
font-weight: 300;
font-family: 'DM Sans', sans-serif;
}
.b2b-proc-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
position: relative;
}
.b2b-proc-step {
padding: 0 1.5rem;
text-align: center;
position: relative;
z-index: 1;
}
.b2b-proc-num {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--ohlya-ivoire);
border: 2px solid var(--ohlya-orange);
color: var(--ohlya-orange);
font-family: 'Cormorant Garamond', serif;
font-size: 1.5rem;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.4rem;
transition: all .3s cubic-bezier(.2,.7,.2,1);
}
.b2b-proc-step:hover .b2b-proc-num {
background: var(--ohlya-orange);
border-color: var(--ohlya-orange);
color: #fff;
transform: scale(1.05);
}
.b2b-proc-step h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 1.25rem;
font-weight: 400;
color: var(--ohlya-aubergine);
margin: 0 0 .6rem;
line-height: 1.3;
}
.b2b-proc-step p {
font-size: .82rem;
color: var(--ohlya-charcoal);
line-height: 1.85;
font-weight: 300;
font-family: 'DM Sans', sans-serif;
margin: 0;
}
.b2b-proc-step p strong {
color: var(--ohlya-aubergine);
font-weight: 500;
}
/* 21.4 — COFFRETS B2B (grid produits) */
.b2b-cof-s {
padding: 6rem 0 5rem;
background: var(--ohlya-creme);
}
.b2b-cof-h {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 2.8rem;
flex-wrap: wrap;
gap: 1rem;
}
.b2b-cof-h h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.7rem, 2.8vw, 2.4rem);
font-weight: 300;
color: var(--ohlya-aubergine);
margin: .5rem 0 0;
line-height: 1.15;
}
.b2b-cof-h p {
font-size: .85rem;
color: var(--ohlya-charcoal);
max-width: 380px;
margin: .5rem 0 0;
line-height: 1.7;
font-family: 'DM Sans', sans-serif;
}
.b2b-cof-filters {
display: flex;
gap: .4rem;
flex-wrap: wrap;
}
.b2b-cof-fbtn,
button.b2b-cof-fbtn {
padding: .55rem 1rem !important;
background: transparent !important;
background-color: transparent !important;
border: 1px solid #E8D9B8 !important;
color: var(--ohlya-charcoal) !important;
font-size: .68rem !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: all .2s !important;
font-weight: 500 !important;
font-family: 'DM Sans', sans-serif !important;
border-radius: 0 !important;
box-shadow: none !important;
height: auto !important;
min-height: auto !important;
}
.b2b-cof-fbtn.on,
button.b2b-cof-fbtn.on {
background: var(--ohlya-aubergine) !important;
background-color: var(--ohlya-aubergine) !important;
border-color: var(--ohlya-aubergine) !important;
color: #fff !important;
}
.b2b-cof-fbtn:hover:not(.on),
button.b2b-cof-fbtn:hover:not(.on) {
border-color: var(--ohlya-orange) !important;
color: var(--ohlya-aubergine) !important;
background: transparent !important;
transform: none !important;
}
.b2b-cof-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
background: #E8D9B8;
}
.b2b-pc {
background: var(--ohlya-ivoire);
position: relative;
overflow: hidden;
transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.b2b-pc:hover { transform: translateY(-4px); z-index: 2; }
.b2b-pc:hover .b2b-pco { opacity: 1; transform: translateY(0); }
.b2b-pc:hover .b2b-ph { transform: scale(1.06); }
.b2b-pci {
aspect-ratio: 3/4;
overflow: hidden;
position: relative;
background: #FAF4E4;
}
.b2b-ph {
width: 100%;
height: 100%;
transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.b2b-pb {
position: absolute;
top: .65rem;
left: .65rem;
font-size: .52rem;
letter-spacing: .1em;
text-transform: uppercase;
padding: .2rem .55rem;
z-index: 2;
font-weight: 500;
font-family: 'DM Sans', sans-serif;
}
.b2b-pb.bp { background: var(--ohlya-orange); color: #fff; }
.b2b-pb.bb { background: var(--ohlya-violet); color: #fff; }
.b2b-pb.bn { background: var(--ohlya-lavande); color: var(--ohlya-aubergine); }
.b2b-pb.ba { background: var(--ohlya-ambre); color: var(--ohlya-aubergine); }
.b2b-pco {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(50,1,48,.92);
padding: .65rem;
display: flex;
gap: .3rem;
opacity: 0;
transform: translateY(100%);
transition: all .35s cubic-bezier(.2,.7,.2,1);
}
.b2b-po {
flex: 1;
font-size: .56rem;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(255,255,255,.82);
padding: .45rem;
border: 1px solid rgba(255,255,255,.18);
text-align: center;
transition: all .2s;
cursor: pointer;
font-family: 'DM Sans', sans-serif;
text-decoration: none;
display: block;
}
.b2b-po:hover {
background: var(--ohlya-orange);
border-color: var(--ohlya-orange);
color: #fff;
}
.b2b-pi { padding: .95rem 1rem .85rem; }
.b2b-pcat {
font-size: .55rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ohlya-orange);
margin-bottom: .22rem;
font-family: 'DM Sans', sans-serif;
}
.b2b-pn {
font-family: 'Cormorant Garamond', serif;
font-size: .95rem;
font-weight: 400;
color: var(--ohlya-aubergine);
line-height: 1.3;
margin-bottom: .3rem;
}
.b2b-pmin {
font-size: .62rem;
color: var(--ohlya-charcoal);
margin-bottom: .3rem;
font-family: 'DM Sans', sans-serif;
}
.b2b-pp {
font-size: .82rem;
color: var(--ohlya-aubergine);
font-family: 'DM Sans', sans-serif;
}
.b2b-pp small {
font-size: .62rem;
color: var(--ohlya-charcoal);
font-weight: 400;
margin-left: .2rem;
}
.b2b-cof-footer {
display: flex;
justify-content: center;
margin-top: 3rem;
}
/* 21.5 — FAQ */
.b2b-faq-s {
padding: 6rem 0;
background: #FAF4E4;
}
.b2b-faq-w {
display: grid;
grid-template-columns: 380px 1fr;
gap: 5rem;
align-items: start;
}
.b2b-faq-side { position: sticky; top: 90px; }
.b2b-faq-side h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.6rem, 2.5vw, 2.1rem);
font-weight: 300;
color: var(--ohlya-aubergine);
margin: .5rem 0 0;
line-height: 1.15;
}
.b2b-faq-side p {
font-size: .85rem;
color: var(--ohlya-charcoal);
line-height: 1.85;
margin-top: 1rem;
font-weight: 300;
font-family: 'DM Sans', sans-serif;
}
.b2b-faq-side-cta {
display: flex;
flex-direction: column;
gap: .5rem;
margin-top: 1.6rem;
}
.b2b-faq-list {
display: flex;
flex-direction: column;
gap: .4rem;
}
.b2b-faq-item {
background: var(--ohlya-ivoire);
border: 1px solid #E8D9B8;
transition: border-color .2s;
}
.b2b-faq-item.open { border-color: var(--ohlya-orange); }
.b2b-faq-q,
button.b2b-faq-q {
width: 100% !important;
text-align: left !important;
padding: 1.3rem 1.6rem !important;
font-family: 'Cormorant Garamond', serif !important;
font-size: 1.08rem !important;
font-weight: 400 !important;
color: var(--ohlya-aubergine) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 1.5rem !important;
cursor: pointer !important;
line-height: 1.35 !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
text-transform: none !important;
letter-spacing: normal !important;
height: auto !important;
min-height: auto !important;
}
.b2b-faq-q:hover,
button.b2b-faq-q:hover {
background: transparent !important;
color: var(--ohlya-orange) !important;
transform: none !important;
}
.b2b-faq-q-ic {
flex-shrink: 0;
width: 24px;
height: 24px;
border: 1px solid #E8D9B8;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all .2s;
}
.b2b-faq-item.open .b2b-faq-q-ic {
background: var(--ohlya-orange);
border-color: var(--ohlya-orange);
transform: rotate(45deg);
}
.b2b-faq-q-ic svg {
width: 11px;
height: 11px;
stroke: var(--ohlya-charcoal);
fill: none;
stroke-width: 2;
stroke-linecap: round;
}
.b2b-faq-item.open .b2b-faq-q-ic svg { stroke: #fff; }
.b2b-faq-a {
max-height: 0;
overflow: hidden;
transition: max-height .35s cubic-bezier(.2,.7,.2,1);
padding: 0 1.6rem;
}
.b2b-faq-item.open .b2b-faq-a {
max-height: 600px;
padding: 0 1.6rem 1.4rem;
}
.b2b-faq-a p {
font-size: .86rem;
color: var(--ohlya-charcoal);
line-height: 1.85;
font-weight: 300;
font-family: 'DM Sans', sans-serif;
margin: 0;
}
.b2b-faq-a p strong {
color: var(--ohlya-aubergine);
font-weight: 500;
}
/* 21.6 — DEVIS (formulaire) */
.b2b-devis-s {
padding: 6rem 0;
background: var(--ohlya-aubergine);
position: relative;
overflow: hidden;
}
.b2b-devis-s::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(to right, #F5EACE, #FFC25A, #F87300, #B197E7, #320130);
}
.b2b-devis-s::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 80% 30%, rgba(248,115,0,.12), transparent 55%),
radial-gradient(ellipse at 10% 80%, rgba(176,141,87,.1), transparent 55%);
}
.b2b-devis-w {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 5rem;
align-items: flex-start;
position: relative;
z-index: 1;
}
.b2b-devis-side h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.8rem, 3vw, 2.6rem);
font-weight: 300;
color: #fff;
margin: .5rem 0 0;
line-height: 1.1;
}
.b2b-devis-side h2 em {
font-style: italic;
color: var(--ohlya-ambre);
}
.b2b-devis-side p {
font-size: .92rem;
color: rgba(255,255,255,.55);
line-height: 1.85;
margin-top: 1.2rem;
font-weight: 300;
font-family: 'DM Sans', sans-serif;
}
.b2b-devis-bullets {
margin: 1.8rem 0;
padding-top: 1.8rem;
border-top: 1px solid rgba(255,255,255,.08);
}
.b2b-devis-bullet {
display: flex;
align-items: flex-start;
gap: .8rem;
margin-bottom: 1rem;
font-size: .84rem;
color: rgba(255,255,255,.7);
line-height: 1.6;
font-weight: 300;
font-family: 'DM Sans', sans-serif;
}
.b2b-devis-bullet-ic {
width: 22px;
height: 22px;
background: rgba(248,115,0,.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: .1rem;
}
.b2b-devis-bullet-ic svg {
width: 10px;
height: 10px;
stroke: var(--ohlya-orange);
fill: none;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.b2b-devis-bullet strong {
color: #fff;
font-weight: 500;
}
.b2b-devis-contact {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
padding: 1.4rem;
margin-top: 2rem;
}
.b2b-devis-contact-row {
display: flex;
align-items: center;
gap: .7rem;
font-size: .8rem;
color: rgba(255,255,255,.7);
margin-bottom: .5rem;
font-weight: 300;
font-family: 'DM Sans', sans-serif;
}
.b2b-devis-contact-row:last-child { margin-bottom: 0; }
.b2b-devis-contact-row a {
color: var(--ohlya-ambre);
transition: color .2s;
text-decoration: none;
}
.b2b-devis-contact-row a:hover { color: #fff; }
.b2b-devis-contact-row svg {
width: 14px;
height: 14px;
stroke: var(--ohlya-orange);
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
}
.b2b-devis-form {
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
padding: 2.4rem;
border-radius: 2px;
}
.b2b-devis-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
.b2b-devis-row.full { grid-template-columns: 1fr; }
.b2b-devis-fld { margin-bottom: 1rem; }
.b2b-devis-fld label {
display: block;
font-size: .6rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ohlya-ambre);
margin-bottom: .45rem;
font-weight: 500;
font-family: 'DM Sans', sans-serif;
}
.b2b-devis-fld input,
.b2b-devis-fld textarea,
.b2b-devis-fld select,
.b2b-devis-form input,
.b2b-devis-form textarea,
.b2b-devis-form select {
width: 100% !important;
background: rgba(255,255,255,.09) !important;
background-color: rgba(255,255,255,.09) !important;
border: 1px solid rgba(255,255,255,.2) !important;
color: #fff !important;
font-family: 'DM Sans', sans-serif !important;
font-size: .9rem !important;
padding: .85rem 1.1rem !important;
outline: none !important;
transition: border-color .2s, background .2s !important;
box-sizing: border-box !important;
border-radius: 0 !important;
box-shadow: none !important;
height: auto !important;
min-height: auto !important;
line-height: 1.5 !important;
}
.b2b-devis-fld input:focus,
.b2b-devis-fld textarea:focus,
.b2b-devis-fld select:focus,
.b2b-devis-form input:focus,
.b2b-devis-form textarea:focus,
.b2b-devis-form select:focus {
border-color: var(--ohlya-orange) !important;
background: rgba(255,255,255,.13) !important;
background-color: rgba(255,255,255,.13) !important;
box-shadow: none !important;
outline: none !important;
}
.b2b-devis-fld input::placeholder,
.b2b-devis-fld textarea::placeholder,
.b2b-devis-form input::placeholder,
.b2b-devis-form textarea::placeholder {
color: rgba(255,255,255,.5) !important;
opacity: 1 !important;
}
.b2b-devis-fld select,
.b2b-devis-form select {
color: rgba(255,255,255,.7) !important;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFC25A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 1rem center !important;
background-size: 14px !important;
padding-right: 2.5rem !important;
}
.b2b-devis-fld textarea {
resize: vertical;
min-height: 110px;
line-height: 1.6;
}
.b2b-devis-fld select option {
background: var(--ohlya-aubergine);
color: #fff;
}
.b2b-devis-perso {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .6rem;
margin-bottom: 1.2rem;
}
.b2b-devis-pchk,
button.b2b-devis-pchk {
display: flex !important;
align-items: center !important;
gap: .6rem !important;
font-size: .72rem !important;
color: rgba(255,255,255,.6) !important;
padding: .7rem .85rem !important;
border: 1px solid rgba(255,255,255,.1) !important;
cursor: pointer !important;
transition: all .2s !important;
font-weight: 500 !important;
font-family: 'DM Sans', sans-serif !important;
background: transparent !important;
background-color: transparent !important;
text-align: left !important;
text-transform: none !important;
letter-spacing: normal !important;
border-radius: 0 !important;
box-shadow: none !important;
line-height: 1.35 !important;
width: 100% !important;
min-height: auto !important;
height: auto !important;
}
.b2b-devis-pchk:hover,
button.b2b-devis-pchk:hover {
border-color: rgba(248,115,0,.4) !important;
color: #fff !important;
background: transparent !important;
background-color: transparent !important;
transform: none !important;
}
.b2b-devis-pchk-box {
width: 14px !important;
height: 14px !important;
min-width: 14px !important;
border: 1.5px solid rgba(255,255,255,.3) !important;
background: transparent !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
transition: all .2s !important;
border-radius: 0 !important;
}
.b2b-devis-pchk.on,
button.b2b-devis-pchk.on {
color: #fff !important;
border-color: var(--ohlya-orange) !important;
background: transparent !important;
background-color: transparent !important;
}
.b2b-devis-pchk.on .b2b-devis-pchk-box {
background: var(--ohlya-orange) !important;
background-color: var(--ohlya-orange) !important;
border-color: var(--ohlya-orange) !important;
}
.b2b-devis-pchk.on .b2b-devis-pchk-box::after {
content: '✓';
color: #fff;
font-size: .62rem;
line-height: 1;
}
.b2b-devis-rgpd {
font-size: .65rem;
color: rgba(255,255,255,.4);
line-height: 1.7;
margin-top: .8rem;
padding-top: .8rem;
border-top: 1px solid rgba(255,255,255,.08);
font-family: 'DM Sans', sans-serif;
}
.b2b-devis-rgpd a {
color: var(--ohlya-ambre);
border-bottom: 1px solid rgba(255,194,90,.3);
text-decoration: none;
}
.b2b-devis-submit,
button.b2b-devis-submit {
width: 100% !important;
background: var(--ohlya-orange) !important;
background-color: var(--ohlya-orange) !important;
color: #fff !important;
font-family: 'DM Sans', sans-serif !important;
font-size: .72rem !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
padding: 1.05rem !important;
cursor: pointer !important;
transition: background .2s !important;
border: none !important;
border-radius: 0 !important;
font-weight: 500 !important;
margin-top: 1.2rem !important;
box-shadow: none !important;
height: auto !important;
min-height: auto !important;
}
.b2b-devis-submit:hover,
button.b2b-devis-submit:hover {
background: #D66800 !important;
background-color: #D66800 !important;
transform: none !important;
}
/* 21.7 — BUTTONS LG (utilisé sur hero B2B) */
.btn.btn-lg,
a.btn.btn-lg {
padding: 1rem 2.2rem;
font-size: .76rem;
}
/* 21.8 — RESPONSIVE B2B */
@media (max-width: 1300px) {
.b2b-hero-bottom { grid-template-columns: 1fr; gap: 2rem; }
.b2b-hero-trust-inline { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1100px) {
.b2b-h1-row { grid-template-columns: 1fr; gap: 1.5rem; }
.b2b-trust-row { grid-template-columns: repeat(2, 1fr); gap: 1rem 0; }
.b2b-trust-it:nth-child(2) { border-right: none; }
.b2b-hero-trust-inline { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.b2b-occ-grid { grid-template-columns: repeat(2, 1fr); }
.b2b-proc-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem 0; }
.b2b-cof-grid { grid-template-columns: repeat(3, 1fr); }
.b2b-faq-w { grid-template-columns: 1fr; gap: 2.5rem; }
.b2b-faq-side { position: static; }
.b2b-devis-w { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 720px) {
.b2b-trust-row { grid-template-columns: 1fr; padding: 1rem 0; }
.b2b-trust-it { padding: .7rem 1.5rem; border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); }
.b2b-trust-it:last-child { border-bottom: none; }
.b2b-hero-stats { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.b2b-hero-trust-inline { grid-template-columns: 1fr; gap: 1rem; }
.b2b-occ-grid { grid-template-columns: 1fr; }
.b2b-proc-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.b2b-cof-grid { grid-template-columns: repeat(2, 1fr); }
.b2b-devis-row { grid-template-columns: 1fr; }
.b2b-devis-perso { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════
SECTION 22 — BOUTIQUE /shop/
Préfixe .shop- (injection via hooks WooCommerce)
═══════════════════════════════════════════════════════════ */
/* 22.0 — Reset wrapper WoodMart sur /shop/ pour permettre full-bleed */
body.ohlya-shop-page .main-page-wrapper,
body.ohlya-shop-page .site-content,
body.ohlya-shop-page .content-area,
body.ohlya-shop-page #wrapper,
body.ohlya-shop-page #main,
body.ohlya-shop-page main {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
body.ohlya-shop-page .container,
body.ohlya-shop-page .row {
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.shop-w {
max-width: 1260px;
margin: 0 auto;
padding: 0 2rem;
}
.shop-ey {
font-size: .6rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--ohlya-orange);
font-weight: 500;
font-family: 'DM Sans', sans-serif;
}
/* 22.1 — HERO */
.shop-hero {
position: relative;
min-height: 65vh;
overflow: hidden;
display: flex;
align-items: flex-end;
background: var(--ohlya-aubergine);
}
.shop-hero-bg {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 0 !important;
overflow: hidden;
}
.shop-hero-bg img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position: center center !important;
opacity: .45 !important;
transition: transform 8s ease;
display: block !important;
}
.shop-hero-ov {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to top, rgba(50,1,48,.95) 0%, rgba(50,1,48,.5) 55%, rgba(50,1,48,.2) 100%);
}
.shop-hero-glow {
position: absolute;
inset: 0;
z-index: 1;
background: radial-gradient(ellipse at 15% 90%, rgba(248,115,0,.16), transparent 55%);
}
.shop-hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(to right, #F5EACE, #FFC25A, #F87300, #B197E7, #320130);
z-index: 3;
}
.shop-hero-content {
position: relative;
z-index: 2;
padding: 5rem 2.5rem 4rem;
max-width: 1260px;
margin: 0 auto;
width: 100%;
}
.shop-bc {
font-size: .58rem;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.32);
margin-bottom: 1.4rem;
display: flex;
align-items: center;
gap: .5rem;
font-family: 'DM Sans', sans-serif;
}
.shop-bc a {
color: rgba(255,255,255,.4);
text-decoration: none;
transition: color .2s;
}
.shop-bc a:hover { color: rgba(255,255,255,.75); }
.shop-bc span { color: rgba(255,255,255,.18); }
.shop-eyebrow {
font-size: .6rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--ohlya-orange);
margin-bottom: .8rem;
display: flex;
align-items: center;
gap: .7rem;
font-family: 'DM Sans', sans-serif;
font-weight: 500;
}
.shop-eyebrow::before {
content: '';
width: 20px;
height: 1px;
background: var(--ohlya-orange);
}
.shop-hero h1 {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(2.4rem, 5vw, 4.2rem);
color: #fff;
line-height: 1.05;
letter-spacing: -.02em;
margin: 0 0 1rem;
}
.shop-hero h1 em {
font-style: italic;
color: var(--ohlya-ambre);
}
.shop-hero-desc {
font-size: .92rem;
color: rgba(255,255,255,.55);
max-width: 560px;
line-height: 1.85;
margin: 0 0 1.8rem;
font-weight: 300;
font-family: 'DM Sans', sans-serif;
}
.shop-hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
max-width: 560px;
margin-top: 2rem;
padding-top: 1.6rem;
border-top: 1px solid rgba(255,255,255,.08);
}
.shop-stat strong {
font-family: 'Cormorant Garamond', serif;
font-size: 1.8rem;
font-weight: 300;
color: var(--ohlya-ambre);
line-height: 1;
display: block;
}
.shop-stat span {
font-size: .6rem;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.35);
margin-top: .35rem;
display: block;
line-height: 1.5;
font-family: 'DM Sans', sans-serif;
}
/* 22.2 — CATEGORY SHOWCASE */
.shop-cs {
padding: 5rem 0;
background: var(--ohlya-creme);
}
.shop-cs-h {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 2.5rem;
gap: 2rem;
flex-wrap: wrap;
}
.shop-cs-h h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.6rem, 2.6vw, 2.3rem);
font-weight: 300;
color: var(--ohlya-aubergine);
margin: .3rem 0 0;
line-height: 1.15;
}
.shop-cs-h p {
font-size: .82rem;
color: var(--ohlya-charcoal);
max-width: 340px;
line-height: 1.7;
font-family: 'DM Sans', sans-serif;
margin: 0;
}
.shop-cs-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
gap: 3px;
background: #E8D9B8;
min-height: 380px;
}
.shop-cs-card {
position: relative;
overflow: hidden;
cursor: pointer;
background: #FAF4E4;
text-decoration: none;
display: block;
}
.shop-cs-card-bg {
position: absolute;
inset: 0;
transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.shop-cs-card:hover .shop-cs-card-bg { transform: scale(1.05); }
.shop-cs-card-bg img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block;
}
.shop-cs-card-ov {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(50,1,48,.85) 0%, rgba(50,1,48,.35) 60%, rgba(50,1,48,.05) 100%);
transition: background .4s;
z-index: 1;
}
.shop-cs-card:hover .shop-cs-card-ov {
background: linear-gradient(to top, rgba(50,1,48,.92) 0%, rgba(50,1,48,.45) 65%, rgba(50,1,48,.1) 100%);
}
.shop-cs-card-info {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 1.6rem 1.4rem;
z-index: 2;
}
.shop-cs-card-tag {
font-size: .52rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ohlya-ambre);
margin-bottom: .4rem;
font-weight: 500;
font-family: 'DM Sans', sans-serif;
}
.shop-cs-card-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.5rem;
font-weight: 300;
color: #fff;
margin-bottom: .3rem;
line-height: 1.15;
}
.shop-cs-card-desc {
font-size: .7rem;
color: rgba(255,255,255,.55);
line-height: 1.55;
margin-bottom: .8rem;
font-weight: 300;
max-width: 280px;
font-family: 'DM Sans', sans-serif;
}
.shop-cs-card-cnt {
font-size: .6rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ohlya-orange);
display: inline-flex;
align-items: center;
gap: .4rem;
transition: gap .2s;
font-weight: 500;
font-family: 'DM Sans', sans-serif;
}
.shop-cs-card-cnt::after { content: '→'; }
.shop-cs-card:hover .shop-cs-card-cnt { gap: .7rem; }
.shop-cs-card.featured .shop-cs-card-name { font-size: 1.85rem; }
.shop-cs-card.featured .shop-cs-card-desc { font-size: .78rem; max-width: 340px; }
/* 22.3 — FEATURED STRIP */
.shop-fs {
padding: 5rem 0;
background: var(--ohlya-ivoire);
}
.shop-fs-h {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 2.2rem;
gap: 2rem;
flex-wrap: wrap;
}
.shop-fs-h h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.5rem, 2.4vw, 2.1rem);
font-weight: 300;
color: var(--ohlya-aubergine);
margin: .3rem 0 0;
}
/* Le shortcode [products] génère son propre markup .woocommerce ul.products */
.shop-fs-grid .woocommerce { width: 100%; }
.shop-fs-grid ul.products {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 2px !important;
background: #E8D9B8 !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.shop-fs-grid ul.products::before,
.shop-fs-grid ul.products::after { display: none !important; }
.shop-fs-grid ul.products li.product {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: var(--ohlya-ivoire);
float: none !important;
clear: none !important;
}
/* 22.4 — SHOP MAIN WRAP (intro + layout sidebar+grille) */
.shop-main-wrap {
background: var(--ohlya-creme);
padding: 4rem 0 5rem;
/* Breakout : section pleine largeur même imbriquée dans le conteneur WoodMart */
position: relative;
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.shop-intro {
text-align: center;
max-width: 640px;
margin: 0 auto 3rem;
}
.shop-intro h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
font-weight: 300;
color: var(--ohlya-aubergine);
margin: .4rem 0 0;
line-height: 1.2;
}
.shop-intro p {
font-size: .85rem;
color: var(--ohlya-charcoal);
line-height: 1.85;
margin-top: .8rem;
font-weight: 300;
font-family: 'DM Sans', sans-serif;
}
/* 22.5 — LAYOUT sidebar + grille produits */
.shop-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 2.5rem;
align-items: start;
}
/* SIDEBAR */
.shop-sidebar {
display: flex;
flex-direction: column;
gap: 2rem;
}
.shop-filter-grp {
background: var(--ohlya-ivoire);
padding: 1.4rem 1.2rem;
border: 1px solid #E8D9B8;
}
.shop-filter-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: .9rem;
}
.shop-filter-lbl {
font-size: .6rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ohlya-charcoal);
font-weight: 500;
font-family: 'DM Sans', sans-serif;
margin-bottom: .9rem;
}
.shop-filter-head .shop-filter-lbl { margin: 0; }
.shop-filter-reset {
font-size: .6rem;
color: var(--ohlya-orange);
letter-spacing: .1em;
text-transform: uppercase;
text-decoration: none;
font-family: 'DM Sans', sans-serif;
}
.shop-filter-reset:hover { color: var(--ohlya-aubergine); }
/* Tabs Univers */
.shop-univers-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border: 1px solid #E8D9B8;
}
.shop-univers-tab,
button.shop-univers-tab {
padding: .6rem !important;
background: transparent !important;
border: none !important;
color: var(--ohlya-charcoal) !important;
font-size: .65rem !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
cursor: pointer !important;
font-family: 'DM Sans', sans-serif !important;
font-weight: 500 !important;
border-radius: 0 !important;
transition: all .2s !important;
height: auto !important;
}
.shop-univers-tab.on,
button.shop-univers-tab.on {
background: var(--ohlya-aubergine) !important;
color: #fff !important;
}
/* Liste filtres (Catégories, Disponibilité) */
.shop-filter-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: .55rem;
}
.shop-filter-list li { margin: 0; }
.shop-filter-list a {
display: flex;
align-items: center;
gap: .6rem;
font-size: .78rem;
color: var(--ohlya-charcoal);
text-decoration: none;
font-family: 'DM Sans', sans-serif;
transition: color .2s;
}
.shop-filter-list a:hover { color: var(--ohlya-aubergine); }
.shop-fchk {
width: 14px;
height: 14px;
border: 1.5px solid #C9B98E;
background: transparent;
flex-shrink: 0;
transition: all .2s;
}
.shop-filter-list a:hover .shop-fchk { border-color: var(--ohlya-orange); }
.shop-filter-list a.active .shop-fchk,
.shop-filter-list .active .shop-fchk {
background: var(--ohlya-orange);
border-color: var(--ohlya-orange);
position: relative;
}
.shop-filter-list a.active .shop-fchk::after,
.shop-filter-list .active .shop-fchk::after {
content: '✓';
color: #fff;
font-size: .62rem;
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.shop-fname { flex: 1; }
.shop-fcount {
font-size: .68rem;
color: rgba(28, 24, 20, .5);
font-family: 'DM Sans', sans-serif;
}
/* Price slider (cosmétique) */
.shop-price-slider { padding: .3rem 0; }
.shop-price-track {
position: relative;
height: 3px;
background: #E8D9B8;
margin-bottom: .8rem;
}
.shop-price-fill {
position: absolute;
top: 0;
left: 10%;
width: 65%;
height: 3px;
background: var(--ohlya-orange);
}
.shop-price-track::before,
.shop-price-track::after {
content: '';
position: absolute;
width: 14px;
height: 14px;
background: var(--ohlya-orange);
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.shop-price-track::before { left: 10%; }
.shop-price-track::after { left: 75%; }
.shop-price-vals {
display: flex;
justify-content: space-between;
font-size: .7rem;
color: var(--ohlya-charcoal);
font-family: 'DM Sans', sans-serif;
}
/* Style tags */
.shop-style-tags {
display: flex;
flex-wrap: wrap;
gap: .35rem;
}
.shop-style-tag,
button.shop-style-tag {
padding: .35rem .7rem !important;
background: transparent !important;
border: 1px solid #E8D9B8 !important;
color: var(--ohlya-charcoal) !important;
font-size: .65rem !important;
letter-spacing: .05em !important;
text-transform: none !important;
cursor: pointer !important;
font-family: 'DM Sans', sans-serif !important;
border-radius: 0 !important;
height: auto !important;
transition: all .2s !important;
}
.shop-style-tag:hover { border-color: var(--ohlya-orange) !important; color: var(--ohlya-orange) !important; }
.shop-style-tag.on,
button.shop-style-tag.on {
background: var(--ohlya-aubergine) !important;
border-color: var(--ohlya-aubergine) !important;
color: #fff !important;
}
/* TOP BAR */
.shop-top {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.4rem;
padding-bottom: 1.2rem;
border-bottom: 1px solid #E8D9B8;
}
.shop-count {
font-size: .82rem;
color: var(--ohlya-charcoal);
font-family: 'DM Sans', sans-serif;
}
.shop-count strong {
color: var(--ohlya-aubergine);
font-weight: 500;
}
.shop-top-actions {
display: flex;
align-items: center;
gap: 1rem;
}
.shop-top-actions .woocommerce-ordering select {
background: transparent !important;
border: 1px solid #E8D9B8 !important;
color: var(--ohlya-aubergine) !important;
font-family: 'DM Sans', sans-serif !important;
font-size: .78rem !important;
padding: .55rem 2.4rem .55rem 1rem !important;
border-radius: 0 !important;
cursor: pointer !important;
}
/* GRILLE PRODUITS (3 colonnes dans le layout sidebar) */
.shop-products-wrapper .woocommerce {
width: 100%;
}
.shop-products-wrapper .products,
body.ohlya-shop-page .shop-products-wrapper ul.products {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 2px !important;
background: #E8D9B8 !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.shop-products-wrapper .products::before,
.shop-products-wrapper .products::after { display: none !important; }
.shop-products-wrapper .products li.product {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: var(--ohlya-ivoire) !important;
float: none !important;
clear: none !important;
list-style: none !important;
}
/* Override styles produits WooCommerce dans .shop-products-wrapper */
.shop-products-wrapper .products li.product a.woocommerce-LoopProduct-link {
display: block;
text-decoration: none;
}
.shop-products-wrapper .products li.product .woocommerce-loop-product__title {
font-family: 'Cormorant Garamond', serif !important;
font-size: 1rem !important;
font-weight: 400 !important;
color: var(--ohlya-aubergine) !important;
text-transform: none !important;
letter-spacing: 0 !important;
padding: .8rem .9rem .3rem !important;
margin: 0 !important;
}
.shop-products-wrapper .products li.product .price {
font-family: 'DM Sans', sans-serif !important;
color: var(--ohlya-aubergine) !important;
font-size: .85rem !important;
padding: 0 .9rem .9rem !important;
margin: 0 !important;
display: block;
}
.shop-products-wrapper .products li.product img {
aspect-ratio: 3/4 !important;
object-fit: cover !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
display: block !important;
}
.shop-products-wrapper .products li.product .button {
margin: 0 .9rem .9rem !important;
}
/* Pagination */
body.ohlya-shop-page .woocommerce-pagination {
margin-top: 2.5rem !important;
text-align: center;
}
body.ohlya-shop-page .woocommerce-pagination ul {
border: none !important;
display: inline-flex;
gap: .3rem;
}
body.ohlya-shop-page .woocommerce-pagination ul li {
border: none !important;
}
body.ohlya-shop-page .woocommerce-pagination ul li a,
body.ohlya-shop-page .woocommerce-pagination ul li span {
background: var(--ohlya-ivoire) !important;
border: 1px solid #E8D9B8 !important;
color: var(--ohlya-aubergine) !important;
padding: .55rem .9rem !important;
font-family: 'DM Sans', sans-serif !important;
font-size: .78rem !important;
border-radius: 0 !important;
}
body.ohlya-shop-page .woocommerce-pagination ul li span.current {
background: var(--ohlya-aubergine) !important;
color: #fff !important;
border-color: var(--ohlya-aubergine) !important;
}
/* 22.6 — ÉDITORIAL */
.shop-edito {
background: var(--ohlya-aubergine);
padding: 6rem 0;
position: relative;
overflow: hidden;
}
.shop-edito::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 30% 50%, rgba(248,115,0,.1), transparent 60%);
}
.shop-edito::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(to right, #F5EACE, #FFC25A, #F87300, #B197E7, #320130);
}
.shop-edito-inner {
display: grid;
grid-template-columns: 420px 1fr;
gap: 6rem;
align-items: center;
position: relative;
z-index: 1;
}
.shop-edito-img { position: relative; overflow: hidden; }
.shop-edito-img img {
width: 100% !important;
aspect-ratio: 4/5;
object-fit: cover !important;
opacity: .78;
display: block;
}
.shop-edito-text h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.8rem, 3vw, 2.6rem);
font-weight: 300;
color: #fff;
line-height: 1.1;
margin: .5rem 0 1.2rem;
}
.shop-edito-text h2 em {
font-style: italic;
color: var(--ohlya-ambre);
}
.shop-edito-text p {
font-size: .92rem;
color: rgba(255,255,255,.6);
line-height: 1.85;
margin-bottom: 1rem;
font-weight: 300;
font-family: 'DM Sans', sans-serif;
}
.shop-edito-text p strong {
color: rgba(255,255,255,.9);
font-weight: 500;
}
.shop-edito-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
padding: 1.5rem 0;
border-top: 1px solid rgba(255,255,255,.08);
border-bottom: 1px solid rgba(255,255,255,.08);
margin: 1.5rem 0 2rem;
}
.shop-edito-stat strong {
font-family: 'Cormorant Garamond', serif;
font-size: 1.8rem;
font-weight: 300;
color: var(--ohlya-ambre);
line-height: 1;
display: block;
}
.shop-edito-stat span {
font-size: .6rem;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.32);
margin-top: .35rem;
display: block;
font-family: 'DM Sans', sans-serif;
}
/* 22.7 — RESPONSIVE */
@media (max-width: 1100px) {
.shop-cs-grid { grid-template-columns: repeat(2, 1fr); }
.shop-cs-card.featured { grid-column: span 2; }
.shop-fs-grid ul.products { grid-template-columns: repeat(2, 1fr) !important; }
.shop-edito-inner { grid-template-columns: 1fr; gap: 3rem; }
.shop-edito-img { max-width: 420px; margin: 0 auto; }
.shop-layout { grid-template-columns: 1fr; }
.shop-sidebar { order: 2; }
.shop-main-content { order: 1; }
.shop-products-wrapper .products,
body.ohlya-shop-page .shop-products-wrapper ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 720px) {
.shop-hero { min-height: 55vh; }
.shop-hero-content { padding: 4rem 1.5rem 3rem; }
.shop-hero-stats { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.shop-cs-grid { grid-template-columns: 1fr; }
.shop-cs-card.featured { grid-column: span 1; }
.shop-fs-grid ul.products { grid-template-columns: repeat(2, 1fr) !important; }
.shop-edito { padding: 4rem 0; }
.shop-products-wrapper .products,
body.ohlya-shop-page .shop-products-wrapper ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}