/* =========================================================================
SOMMAIRE
1. Jetons de design (couleurs, typo, espacements, mouvement)
2. Base typographique
3. Boutons
4. En-tête et navigation
5. Blocs réutilisables (sur-titre, script, filet)
6. Motifs de section (hero, origines, histoire, pro)
7. Bande partenaires animée
8. WooCommerce
9. Pied de page
10. Animations d'apparition
11. Réglages responsive
Divi charge ce fichier APRES le style.css du parent (handles
« divi-style-parent » puis « divi-style »). Aucun wp_enqueue_style
du parent n'est donc nécessaire.
========================================================================= */
/* =========================================================================
1. JETONS DE DESIGN
Toute la charte tient ici. Modifier une valeur la propage au site entier.
========================================================================= */
:root {
/* --- Couleurs de marque --- */
--vdm-noir: #14100E; /* brun espresso, fonds sombres */
--vdm-noir-profond: #0C0908; /* aplats les plus sombres */
--vdm-encre: #2A2420; /* texte courant sur fond clair */
--vdm-encre-douce: #6B6259; /* texte secondaire */
--vdm-or: #C9A86A; /* accent principal */
--vdm-or-clair: #E0C88F; /* survols, dégradés */
--vdm-or-sombre: #A8873F; /* états pressés, liens sur fond clair */
--vdm-creme: #F7F3EC; /* fond de section clair */
--vdm-creme-chaud: #FAF7F1; /* alternance */
--vdm-blanc: #FFFFFF;
--vdm-vert-pro: #33402F; /* bande professionnels */
--vdm-ligne: rgba(42, 36, 32, .12);
--vdm-ligne-claire: rgba(255, 255, 255, .16);
/* --- Typographie --- */
--vdm-serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
--vdm-sans: "Jost", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--vdm-script: "Parisienne", "Brush Script MT", cursive;
/* Échelle fluide : s'adapte sans media query */
--vdm-t-display: clamp(2.75rem, 1.6rem + 5.2vw, 6rem);
--vdm-t-h1: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
--vdm-t-h2: clamp(1.85rem, 1.2rem + 2.6vw, 3rem);
--vdm-t-h3: clamp(1.35rem, 1.05rem + 1.3vw, 1.9rem);
--vdm-t-corps: clamp(1rem, .96rem + .22vw, 1.125rem);
--vdm-t-petit: .875rem;
--vdm-t-surtitre: .75rem;
/* --- Espacements --- */
--vdm-e-1: .5rem;
--vdm-e-2: 1rem;
--vdm-e-3: 1.5rem;
--vdm-e-4: 2.5rem;
--vdm-e-5: 4rem;
--vdm-e-6: clamp(4rem, 2rem + 7vw, 8rem);
/* --- Mouvement --- */
--vdm-transition: 420ms cubic-bezier(.22, .61, .36, 1);
--vdm-transition-court: 220ms cubic-bezier(.22, .61, .36, 1);
/* --- Divers --- */
/* Fleur de vanille stylisée, reprise du logo. Servie en masque : la couleur
vient du background-color de l'élément, donc un seul tracé suffit pour
toutes les teintes (or sur fond sombre, or sombre sur fond clair). */
--vdm-fleur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.1'%3E%3Cellipse cx='12' cy='6' rx='2.4' ry='5'/%3E%3Cellipse cx='12' cy='6' rx='2.4' ry='5' transform='rotate(60 12 12)'/%3E%3Cellipse cx='12' cy='6' rx='2.4' ry='5' transform='rotate(120 12 12)'/%3E%3Cellipse cx='12' cy='6' rx='2.4' ry='5' transform='rotate(180 12 12)'/%3E%3Cellipse cx='12' cy='6' rx='2.4' ry='5' transform='rotate(240 12 12)'/%3E%3Cellipse cx='12' cy='6' rx='2.4' ry='5' transform='rotate(300 12 12)'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3C/svg%3E");
--vdm-rayon: 2px; /* volontairement minimal : le luxe évite les angles ronds */
--vdm-ombre: 0 18px 48px -24px rgba(20, 16, 14, .45);
}
/* =========================================================================
2. BASE TYPOGRAPHIQUE
========================================================================= */
body,
body.et_pb_pagebuilder_layout {
font-family: var(--vdm-sans);
font-size: var(--vdm-t-corps);
line-height: 1.75;
color: var(--vdm-encre);
background: var(--vdm-creme-chaud);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3 {
font-family: var(--vdm-serif);
font-weight: 400;
line-height: 1.12;
letter-spacing: -.01em;
color: var(--vdm-encre);
}
h1 { font-size: var(--vdm-t-h1); }
h2 { font-size: var(--vdm-t-h2); }
h3 { font-size: var(--vdm-t-h3); }
p { margin-bottom: var(--vdm-e-2); }
a { color: var(--vdm-or-sombre); transition: color var(--vdm-transition-court); }
a:hover { color: var(--vdm-or); }
/* Fonds sombres : inversion des couleurs de texte */
.vdm-sombre { background-color: var(--vdm-noir); }
.vdm-sombre,
.vdm-sombre h1, .vdm-sombre h2, .vdm-sombre h3, .vdm-sombre h4,
.vdm-sombre p, .vdm-sombre li {
color: var(--vdm-creme);
}
/* =========================================================================
3. BOUTONS
Deux niveaux : plein doré (action principale), contour (secondaire).
========================================================================= */
.et_pb_button,
.et_pb_button:hover,
body.et_pb_pagebuilder_layout .et_pb_button {
font-family: var(--vdm-sans);
font-size: var(--vdm-t-surtitre);
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
padding: 1.05em 2.4em;
border-radius: var(--vdm-rayon);
border: 1px solid transparent;
transition: background-color var(--vdm-transition-court),
color var(--vdm-transition-court),
border-color var(--vdm-transition-court),
transform var(--vdm-transition-court);
}
/* Divi ajoute une flèche via ::after : on la neutralise pour garder un bouton net */
.et_pb_button::after { display: none !important; }
.et_pb_button:hover { padding: 1.05em 2.4em !important; }
.et_pb_button,
.vdm-btn-or {
background-color: var(--vdm-or) !important;
border-color: var(--vdm-or) !important;
color: var(--vdm-noir) !important;
}
.et_pb_button:hover,
.vdm-btn-or:hover {
background-color: var(--vdm-or-clair) !important;
border-color: var(--vdm-or-clair) !important;
transform: translateY(-2px);
}
.vdm-btn-contour {
background-color: transparent !important;
border-color: currentColor !important;
color: var(--vdm-creme) !important;
}
.vdm-btn-contour:hover {
background-color: var(--vdm-creme) !important;
border-color: var(--vdm-creme) !important;
color: var(--vdm-noir) !important;
}
/* =========================================================================
4. EN-TÊTE ET NAVIGATION
========================================================================= */
/* !important assumé : les Options du thème Divi imposent le fond de l'en-tête
avec la même arme (ici un vert #8B9B5A hérité du gabarit d'origine). */
#main-header {
background-color: rgba(255, 255, 255, .96) !important;
backdrop-filter: saturate(140%) blur(10px);
box-shadow: none;
border-bottom: 1px solid var(--vdm-ligne);
transition: background-color var(--vdm-transition),
box-shadow var(--vdm-transition);
}
#main-header.et-fixed-header,
body.vdm-defile #main-header {
box-shadow: 0 1px 24px -12px rgba(20, 16, 14, .35);
}
/* Divi calcule la hauteur d'en-tête en JavaScript et plafonne le logo à 54 %,
ce qui noie une marque au format carré. On impose une hauteur fixe au logo
et on laisse le conteneur s'adapter : la barre s'épaissit en conséquence,
ce qui sert la marque. */
#logo {
max-height: none !important;
height: 72px !important;
width: auto !important;
transition: height var(--vdm-transition);
}
#main-header .logo_container {
height: auto !important;
padding: 10px 0;
}
/* Au défilement, l'en-tête se resserre légèrement. */
.et-fixed-header #logo { height: 54px !important; }
#top-menu li a,
.et-menu li a {
font-family: var(--vdm-sans);
font-size: var(--vdm-t-petit);
font-weight: 400;
letter-spacing: .04em;
color: var(--vdm-encre);
padding-bottom: .5em;
position: relative;
}
/* Soulignement doré qui se déploie depuis le centre */
#top-menu li a::before {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 1px;
background: var(--vdm-or);
transform: translateX(-50%);
transition: width var(--vdm-transition);
}
#top-menu li a:hover::before,
#top-menu li.current-menu-item a::before { width: 100%; }
/* Les Options du thème imposent color:#ffffff sur l'élément de menu actif —
hérité de l'en-tête vert d'origine. Sur en-tête clair, le mot devenait
invisible : seul le soulignement doré restait. On surspécifie avec
html body pour reprendre la main quel que soit l'ordre de chargement. */
html body #top-menu li.current-menu-item > a,
html body #top-menu li.current-menu-ancestor > a,
html body #top-menu li.current_page_item > a,
html body #top-menu li.current-menu-parent > a {
color: var(--vdm-or-sombre) !important;
}
/* =========================================================================
5. BLOCS RÉUTILISABLES
Classes à poser sur un module Divi via Avancé > ID et classes CSS.
========================================================================= */
/* Sur-titre : petites capitales très espacées, façon « NOS ORIGINES » */
.vdm-surtitre,
.vdm-surtitre p {
font-family: var(--vdm-sans);
font-size: var(--vdm-t-surtitre);
font-weight: 400;
letter-spacing: .34em;
text-transform: uppercase;
color: var(--vdm-or-sombre);
margin-bottom: var(--vdm-e-2);
}
.vdm-sombre .vdm-surtitre,
.vdm-sombre .vdm-surtitre p { color: var(--vdm-or); }
/* Accroche manuscrite */
.vdm-script,
.vdm-script p {
font-family: var(--vdm-script);
font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem);
line-height: 1.35;
letter-spacing: 0;
text-transform: none;
color: var(--vdm-or);
}
/* Filet doré centré sous un titre */
.vdm-filet { text-align: center; }
.vdm-filet::after {
content: "";
display: block;
width: 64px;
height: 1px;
margin: var(--vdm-e-3) auto 0;
background: linear-gradient(90deg, transparent, var(--vdm-or), transparent);
}
/* Titre de section complet.
Graisse 600 : la maquette pose un sérif nettement plus dense que le 400 du
corps de texte, et le Cormorant en 400 paraît maigre à cette taille. */
.vdm-titre-section h2 {
font-size: var(--vdm-t-h2);
font-weight: 600;
letter-spacing: -.015em;
margin-bottom: var(--vdm-e-2);
}
.vdm-titre-section p {
max-width: 62ch;
margin-inline: auto;
color: var(--vdm-encre-douce);
}
/* =========================================================================
6. MOTIFS DE SECTION
========================================================================= */
/* --- 6.1 Hero plein écran --- */
/* La photo vit dans le thème, pas dans la médiathèque : le chemin relatif
depuis cette feuille fonctionne à l'identique en local et en production, et
l'image voyage avec le .zip du thème. */
.vdm-hero {
position: relative;
min-height: clamp(560px, 82vh, 900px);
display: flex;
align-items: center;
background-color: var(--vdm-noir);
overflow: hidden;
}
/* La photo vit dans un calque à part, et non dans le fond de la section, pour
pouvoir respirer : un « transform » sur un pseudo-élément est composité par
le GPU, alors qu'animer « background-size » ou « background-position »
force un repeint de toute la section à chaque image. */
.vdm-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image: url("../img/hero-accueil.jpg");
background-size: cover;
background-position: center right;
animation: vdm-respiration 32s ease-in-out infinite alternate;
will-change: transform;
pointer-events: none;
}
/* Zoom très lent, de l'ordre de neuf pour cent sur une demi-minute : à cette
vitesse le mouvement ne se remarque pas, il se ressent. */
@keyframes vdm-respiration {
from { transform: scale(1); }
to { transform: scale(1.09) translate3d(-1.4%, 0, 0); }
}
/* Voile dégradé : garantit la lisibilité quelle que soit la photo.
La photo place le bouquet de gousses au centre-droit et laisse le bois nu à
gauche : le voile n'a donc qu'à renforcer ce que le cadrage donne déjà, sans
noyer le sujet. */
.vdm-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(100deg,
rgba(12, 9, 8, .90) 0%,
rgba(12, 9, 8, .74) 34%,
rgba(12, 9, 8, .30) 62%,
rgba(12, 9, 8, .06) 100%);
pointer-events: none;
}
.vdm-hero > .et_pb_row { position: relative; z-index: 2; }
.vdm-hero h1,
.vdm-hero .vdm-titre-hero {
font-family: var(--vdm-serif);
font-size: var(--vdm-t-display);
line-height: .96;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--vdm-blanc);
margin-bottom: var(--vdm-e-2);
}
/* Sur fond sombre, tout le texte du hero doit basculer en clair : Divi applique
sinon la couleur de corps définie dans les Options du thème, pensée pour un
fond clair, et le paragraphe devient illisible. */
.vdm-hero,
.vdm-hero p,
.vdm-hero .et_pb_text,
.vdm-hero .et_pb_text p {
color: rgba(247, 243, 236, .82);
}
.vdm-hero .vdm-accroche,
.vdm-hero .vdm-accroche p {
font-family: var(--vdm-serif);
font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem);
line-height: 1.35;
color: var(--vdm-creme);
max-width: 30ch;
}
/* Le sur-titre garde sa couleur or malgré la règle générale ci-dessus. */
.vdm-hero .vdm-surtitre,
.vdm-hero .vdm-surtitre p { color: var(--vdm-or); }
/* Filet doré court entre l'accroche et le paragraphe d'appui, comme sur la
maquette : il sépare les deux niveaux de lecture sans ajouter de vide. */
.vdm-hero .vdm-accroche::after {
content: "";
display: block;
width: 56px;
height: 1px;
margin-top: var(--vdm-e-3);
background: var(--vdm-or);
opacity: .65;
}
/* Accroche manuscrite calée dans l'angle haut droit du hero.
Le module est absolu dans la rangée — seul ancrage positionné disponible,
Divi n'acceptant que des rangées dans une section — ce qui l'aligne sur le
bord droit du contenu, à la hauteur du sur-titre.
Décorative : elle disparaît dès que la largeur ne permet plus de la poser
sans chevaucher le titre. */
.vdm-hero-script {
position: absolute;
top: 0;
right: 0;
z-index: 3;
text-align: right;
pointer-events: none;
}
.vdm-hero-script p {
font-family: var(--vdm-script);
font-size: clamp(1.4rem, .9rem + 1.1vw, 2.1rem);
line-height: 1.45;
color: var(--vdm-or);
margin: 0;
}
@media (max-width: 1180px) {
.vdm-hero-script { display: none; }
}
/* --- 6.1 bis Bandeau clair ---
Variante crème, dans l'esprit des maquettes. Tout le traitement de texte
s'inverse : sur fond clair, le blanc devient illisible.
Poser la classe vdm-hero-clair EN PLUS de vdm-hero sur la section. */
.vdm-hero-clair {
background-color: var(--vdm-creme-chaud);
}
.vdm-hero-clair::after {
background-image: url("../img/fond-origines.jpg");
}
/* Voile clair au lieu du voile sombre, pour dégager la zone de titre. */
.vdm-hero-clair::before {
background: linear-gradient(100deg,
rgba(250, 247, 241, .94) 0%,
rgba(250, 247, 241, .80) 34%,
rgba(250, 247, 241, .22) 62%,
rgba(250, 247, 241, 0) 100%);
}
.vdm-hero-clair h1,
.vdm-hero-clair .vdm-titre-hero { color: var(--vdm-encre); }
.vdm-hero-clair,
.vdm-hero-clair p,
.vdm-hero-clair .et_pb_text,
.vdm-hero-clair .et_pb_text p { color: var(--vdm-encre-douce); }
.vdm-hero-clair .vdm-accroche,
.vdm-hero-clair .vdm-accroche p { color: var(--vdm-encre); }
.vdm-hero-clair .vdm-surtitre,
.vdm-hero-clair .vdm-surtitre p { color: var(--vdm-or-sombre); }
/* Le bouton secondaire passe en contour sombre. */
.vdm-hero-clair .vdm-btn-contour {
border-color: var(--vdm-encre) !important;
color: var(--vdm-encre) !important;
}
.vdm-hero-clair .vdm-btn-contour:hover {
background-color: var(--vdm-encre) !important;
border-color: var(--vdm-encre) !important;
color: var(--vdm-creme) !important;
}
/* Le filet et les items de réassurance repassent en encre. */
.vdm-hero-clair .vdm-reassurance { border-top-color: var(--vdm-ligne); }
.vdm-hero-clair .vdm-reassurance .vdm-item { color: var(--vdm-encre); }
.vdm-hero-clair .vdm-icone { color: var(--vdm-or-sombre); }
@media (max-width: 980px) {
.vdm-hero-clair::before {
background: linear-gradient(180deg,
rgba(250, 247, 241, .90) 0%,
rgba(250, 247, 241, .72) 50%,
rgba(250, 247, 241, .92) 100%);
}
}
/* Bandeau de réassurance en pied de hero */
.vdm-reassurance {
border-top: 1px solid var(--vdm-ligne-claire);
padding-top: var(--vdm-e-3);
margin-top: var(--vdm-e-4);
display: flex;
flex-wrap: wrap;
row-gap: var(--vdm-e-2);
}
.vdm-reassurance .vdm-item {
display: flex;
align-items: center;
gap: .7em;
padding-inline: clamp(1rem, 2.2vw, 2.1rem);
font-family: var(--vdm-sans);
font-size: var(--vdm-t-petit);
letter-spacing: .06em;
color: var(--vdm-creme);
}
/* Filets verticaux entre les garanties, comme sur la maquette. */
.vdm-reassurance .vdm-item + .vdm-item {
border-left: 1px solid var(--vdm-ligne-claire);
}
.vdm-reassurance .vdm-item:first-child { padding-left: 0; }
.vdm-reassurance .vdm-item:last-child { padding-right: 0; }
/* Les filets n'ont plus de sens dès que les items passent à la ligne. */
@media (max-width: 1100px) {
.vdm-reassurance { column-gap: var(--vdm-e-4); }
.vdm-reassurance .vdm-item { padding-inline: 0; }
.vdm-reassurance .vdm-item + .vdm-item { border-left: 0; }
}
/* --- 6.2 Section des origines --- */
/* La photo « gousses et carte du monde » tient lieu de fond de section : posée
très en retrait derrière un voile crème, elle donne la profondeur que les
aplats successifs de la page n'apportaient pas.
Poser la classe vdm-section-origines sur la section Divi. */
.vdm-section-origines {
position: relative;
background-color: var(--vdm-creme-chaud);
overflow: hidden;
}
/* La photo occupe la largeur entière, à sa hauteur naturelle, calée en bas —
et non « cover ». Elle fait 2048 x 748 ; en « cover » sur une section deux
fois plus haute, elle est agrandie de trois fois et rognée de moitié : la
fleur et les gousses, tout à gauche, disparaissaient, et il ne restait qu'un
flou. Ici la composition entière est conservée, la fleur en bas à gauche et
la carte à droite, comme sur la maquette.
Elle vit dans un pseudo-élément à ratio fixe, et non dans le fond de la
section, pour une raison précise : le dégradé qui adoucit son bord supérieur
doit être calé sur la photo, pas sur la section. Empilé dans le fond de la
section, un dégradé n'a aucun ratio intrinsèque — « background-size:
100% auto » lui donne alors toute la hauteur de la section, son sommet se
retrouve loin au-dessus de la photo, et le bord franc de l'image barre la
page d'un trait horizontal net. Dans le pseudo-élément, les pourcentages du
dégradé se rapportent à la photo elle-même. */
.vdm-section-origines::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
aspect-ratio: 2048 / 748;
background-image:
linear-gradient(180deg,
var(--vdm-creme-chaud) 0%,
rgba(250, 247, 241, .74) 14%,
rgba(250, 247, 241, .52) 34%,
rgba(250, 247, 241, .46) 100%),
url("../img/fond-origines.jpg");
background-size: cover, cover;
background-position: center, center;
pointer-events: none;
}
.vdm-section-origines > .et_pb_row { position: relative; z-index: 2; }
/* Accroches manuscrites posées dans les marges de la section.
Elles sont absolues dans la rangée — seul ancrage positionné disponible — et
projetées hors de sa largeur par calc(100% + gouttière), ce qui les place
dans la marge de page sans toucher aux cartes.
Purement décoratives : elles s'effacent dès que la marge disparaît. */
.vdm-deco-script {
position: absolute;
z-index: 3;
width: max-content;
text-align: center;
font-family: var(--vdm-script);
font-size: clamp(1.2rem, .7rem + .9vw, 1.75rem);
line-height: 1.5;
color: var(--vdm-or-sombre);
pointer-events: none;
user-select: none;
}
.vdm-deco-script p { margin: 0; font: inherit; color: inherit; }
.vdm-deco-gauche { top: 24%; right: calc(100% + clamp(1rem, 2vw, 2.5rem)); }
.vdm-deco-droite { top: 2%; left: calc(100% + clamp(1rem, 2vw, 2.5rem)); }
/* Sous cette largeur la marge de page ne suffit plus à les recevoir. */
@media (max-width: 1500px) {
.vdm-deco-script { display: none; }
}
/* --- 6.3 Cartes d'origine --- */
/* Grille auto-ajustée : 4 colonnes en grand écran, 2 en tablette, 1 en mobile,
sans aucune media query. */
.vdm-grille-origines {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--vdm-e-2);
}
/* La maquette ne pose pas la légende en incrustation sur la photo : elle la
met dans un bandeau plein, sous l'image, à l'intérieur d'un cadre doré. La
photo garde ainsi toute sa lisibilité, et les quatre légendes s'alignent
même quand les images sont très différentes de valeur. */
.vdm-carte-origine {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(201, 168, 106, .45);
border-radius: var(--vdm-rayon);
background: var(--vdm-noir);
box-shadow: var(--vdm-ombre);
transition: transform var(--vdm-transition),
border-color var(--vdm-transition),
box-shadow var(--vdm-transition);
}
.vdm-carte-origine img {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
transition: transform 900ms cubic-bezier(.22, .61, .36, 1);
}
.vdm-carte-origine:hover { transform: translateY(-6px); border-color: var(--vdm-or); }
.vdm-carte-origine:hover img { transform: scale(1.07); }
/* Bandeau de légende : fleur à gauche, nom et profil empilés à droite. */
.vdm-carte-origine .vdm-legende {
display: flex;
align-items: center;
gap: .85rem;
padding: var(--vdm-e-2) var(--vdm-e-3);
background: var(--vdm-noir);
color: var(--vdm-creme);
}
/* Fleur de vanille stylisée, reprise du logo. */
.vdm-carte-origine .vdm-legende::before {
content: "";
flex: 0 0 auto;
width: 30px;
height: 30px;
background-color: var(--vdm-or);
-webkit-mask: var(--vdm-fleur) center / contain no-repeat;
mask: var(--vdm-fleur) center / contain no-repeat;
}
.vdm-carte-origine .vdm-legende-texte {
display: flex;
flex-direction: column;
min-width: 0;
}
.vdm-carte-origine .vdm-legende strong {
display: block;
font-family: var(--vdm-serif);
font-size: 1.35rem;
font-weight: 500;
line-height: 1.2;
letter-spacing: .09em;
text-transform: uppercase;
}
.vdm-carte-origine .vdm-legende span {
display: block;
font-size: var(--vdm-t-petit);
line-height: 1.4;
color: var(--vdm-or-clair);
}
/* Cartes de rayon de la boutique : même dessin que les origines, mais les
noms sont plus longs — « PROFESSIONNELS » en 1,35 rem très espacé se coupait
au milieu du mot. Un cran plus petit et moins espacé, il tient sur la ligne. */
.vdm-grille-rayons .vdm-legende strong {
font-size: 1.05rem;
letter-spacing: .05em;
}
.vdm-grille-rayons .vdm-legende span { font-size: .8rem; }
/* Emplacement en attente de visuel : un aplat sombre vaut mieux qu'un trou.
Le léger dégradé évite l'effet « bloc mort ». */
.vdm-image-absente {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
background:
radial-gradient(120% 90% at 30% 15%, rgba(201, 168, 106, .16), transparent 60%),
var(--vdm-noir-profond);
}
/* Icônes SVG du bandeau de réassurance */
.vdm-icone {
flex: 0 0 auto;
color: var(--vdm-or);
}
/* --- 6.2 bis Bandeau de titre des pages intérieures ---
Divi ne compile pas les attributs background_color d'un contenu écrit
directement en base : il ne génère ces règles qu'au passage par le builder.
Les fonds de section sont donc pilotés ici, par classe. */
.vdm-bandeau-titre {
background-color: var(--vdm-noir);
background-image:
radial-gradient(90% 120% at 78% 8%, rgba(201, 168, 106, .13), transparent 58%);
}
/* Variante photographique du bandeau de titre : la photo du hero, très
assombrie. À poser en plus de vdm-bandeau-titre. L'aplat noir des pages
intérieures tranchait sèchement avec un accueil devenu photographique. */
.vdm-bandeau-photo {
position: relative;
background-image: url("../img/hero-accueil.jpg");
background-size: cover;
background-position: center;
overflow: hidden;
}
.vdm-bandeau-photo::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(12, 9, 8, .90) 0%,
rgba(12, 9, 8, .78) 55%,
rgba(12, 9, 8, .92) 100%);
pointer-events: none;
}
.vdm-bandeau-photo > .et_pb_row { position: relative; z-index: 2; }
.vdm-bandeau-titre h1,
.vdm-bandeau-titre h2 { color: var(--vdm-blanc); }
.vdm-bandeau-titre p { color: rgba(247, 243, 236, .78); }
.vdm-bandeau-titre .vdm-surtitre,
.vdm-bandeau-titre .vdm-surtitre p { color: var(--vdm-or); }
/* --- 6.3 Section « Notre histoire » : image pleine / texte --- */
.vdm-histoire { background: var(--vdm-creme); }
/* flex-direction: column est indispensable. Sans lui, les modules Divi de la
colonne (sur-titre, texte, bouton) deviennent des éléments flex en ligne et
se retrouvent côte à côte. */
.vdm-histoire .et_pb_column {
display: flex;
flex-direction: column;
justify-content: center;
}
/* L'image est un portrait 3368x6000 : sans bride, la section ferait deux
écrans de haut. On la recadre en remplissant la colonne. */
.vdm-histoire .vdm-image-pleine,
.vdm-histoire .vdm-image-pleine .et_pb_image_wrap {
display: block;
height: 100%;
}
.vdm-histoire .vdm-image-pleine img {
width: 100%;
height: 100%;
min-height: clamp(420px, 56vw, 720px);
max-height: 760px;
object-fit: cover;
object-position: center 38%;
}
/* --- 6.3 bis Image d'appui d'une rangée à deux colonnes ---
La photo P1045131 est un portrait 3368 x 6000 : affichée à 100 % de largeur
elle dépassait le millier de pixels de haut et laissait la colonne de texte
en face d'un vide de plusieurs centaines de pixels. On la recadre en 5/4 et
on centre les deux colonnes l'une sur l'autre. */
.vdm-image-appui img {
width: 100%;
aspect-ratio: 5 / 4;
object-fit: cover;
object-position: center 40%;
border-radius: var(--vdm-rayon);
}
.vdm-rangee-centree .et_pb_column {
display: flex;
flex-direction: column;
justify-content: center;
}
/* --- 6.3 ter Liste filetée sur fond clair ---
Même dessin que vdm-pro-points, qui vit sur la bande verte, mais avec les
valeurs inversées pour un fond crème. */
.vdm-liste-filets ul {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--vdm-ligne);
}
.vdm-liste-filets li {
padding: var(--vdm-e-3) 0;
border-bottom: 1px solid var(--vdm-ligne);
font-size: var(--vdm-t-petit);
line-height: 1.6;
color: var(--vdm-encre-douce);
}
.vdm-liste-filets li strong {
display: block;
margin-bottom: .3rem;
font-family: var(--vdm-serif);
font-size: 1.15rem;
font-weight: 500;
color: var(--vdm-encre);
}
/* --- 6.3 ter bis Coordonnées ---
Trois lignes, une icône dorée alignée sur la première ligne de texte. */
.vdm-coordonnees {
list-style: none;
margin: var(--vdm-e-2) 0 0;
padding: 0;
}
.vdm-coordonnees li {
display: flex;
align-items: center;
gap: .85em;
padding: .5rem 0;
font-family: var(--vdm-sans);
font-size: var(--vdm-t-corps);
color: var(--vdm-encre);
}
.vdm-coordonnees .vdm-icone {
flex: 0 0 auto;
color: var(--vdm-or-sombre);
}
.vdm-coordonnees a {
color: var(--vdm-encre);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color var(--vdm-transition-court), color var(--vdm-transition-court);
}
.vdm-coordonnees a:hover {
color: var(--vdm-or-sombre);
border-bottom-color: var(--vdm-or);
}
/* --- 6.3 quater Formulaire de contact ---
Divi sert ses champs en aplats gris à coins arrondis, hérités du gabarit de
démo. On les remet dans la charte : fond blanc, filet fin, or au focus. */
.vdm-formulaire .et_pb_contact_field .input,
.vdm-formulaire .et_pb_contact_field textarea,
.vdm-formulaire .et_pb_contact_field input[type="text"],
.vdm-formulaire .et_pb_contact_field input[type="email"] {
background-color: var(--vdm-blanc) !important;
border: 1px solid var(--vdm-ligne) !important;
border-radius: var(--vdm-rayon) !important;
padding: 1em 1.1em !important;
font-family: var(--vdm-sans);
font-size: var(--vdm-t-corps);
color: var(--vdm-encre) !important;
transition: border-color var(--vdm-transition-court),
box-shadow var(--vdm-transition-court);
}
.vdm-formulaire .et_pb_contact_field .input:focus,
.vdm-formulaire .et_pb_contact_field textarea:focus,
.vdm-formulaire .et_pb_contact_field input:focus {
border-color: var(--vdm-or) !important;
box-shadow: 0 0 0 3px rgba(201, 168, 106, .18);
outline: none;
}
.vdm-formulaire .et_pb_contact_field .input::placeholder,
.vdm-formulaire .et_pb_contact_field textarea::placeholder {
color: var(--vdm-encre-douce);
opacity: .8;
}
.vdm-formulaire .et_pb_contact_submit {
border-radius: var(--vdm-rayon) !important;
font-size: var(--vdm-t-surtitre) !important;
letter-spacing: .16em !important;
text-transform: uppercase;
}
/* --- 6.4 Bande professionnels --- */
.vdm-pro {
position: relative;
background-color: var(--vdm-vert-pro);
background-size: cover;
background-position: center;
}
.vdm-pro::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,
rgba(26, 33, 24, .94) 0%,
rgba(26, 33, 24, .55) 60%,
rgba(26, 33, 24, .15) 100%);
}
.vdm-pro > .et_pb_row { position: relative; z-index: 2; }
.vdm-pro h2, .vdm-pro p { color: var(--vdm-creme); }
/* La bande pro s'étend parfois sur toute la largeur : sans limite, la ligne de
texte dépasse largement la longueur confortable de lecture. */
.vdm-pro h2 { max-width: 20ch; }
.vdm-pro p { max-width: 62ch; }
.vdm-pro .vdm-pro-points p { max-width: none; }
/* Arguments de la colonne droite : la bande professionnels laissait une demi-
largeur vide, ce qui donnait au bloc un air inachevé. */
.vdm-pro-points ul {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--vdm-ligne-claire);
}
.vdm-pro-points li {
padding: var(--vdm-e-3) 0;
border-bottom: 1px solid var(--vdm-ligne-claire);
font-size: var(--vdm-t-petit);
line-height: 1.6;
color: rgba(247, 243, 236, .72);
}
.vdm-pro-points li strong {
display: block;
margin-bottom: .35rem;
font-family: var(--vdm-serif);
font-size: 1.2rem;
font-weight: 500;
letter-spacing: .02em;
color: var(--vdm-or-clair);
}
/* =========================================================================
7. BANDE PARTENAIRES ANIMÉE
Le JS duplique la piste pour obtenir un défilement continu sans couture.
========================================================================= */
.vdm-partenaires { overflow: hidden; }
/* Dégradés latéraux : les logos s'effacent au lieu d'être coupés net */
.vdm-partenaires .vdm-cadre {
position: relative;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* Vue grille, pour la page dédiée : mêmes vignettes, disposées et non animées.
Le bloc .vdm-partenaires garde overflow:hidden pour la bande ; on le rétablit
ici, sinon les ombres et le survol seraient rognés. */
/* Le minmax valait 180px tant que les vignettes ne portaient qu'une légende :
les cinq partenaires tenaient alors sur une ligne dans une rangée Divi de
1240px. Depuis que chaque partenaire a une description (11/10/2026), une
colonne de 180px donnerait une colonne de texte de huit caractères. On passe
donc à 300px, soit trois cartes par rangée sur grand écran, deux sur
tablette, une sur téléphone — et la grille s'en charge seule.
auto-fit plutôt que auto-fill : avec six partenaires dont la dernière rangée
n'est pas pleine, auto-fill laisserait des colonnes vides en bout de ligne. */
.vdm-partenaires-grille {
overflow: visible;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--vdm-e-3);
margin-top: var(--vdm-e-5);
}
/* Colonne flex : le logo garde son format, la légende suit, et la description
occupe le reste. Sans cela les cartes d'une même rangée — qui s'étirent à la
hauteur de la plus haute — laisseraient le texte flotter au milieu du vide. */
.vdm-partenaires-grille .vdm-logo {
width: auto;
background: var(--vdm-blanc);
display: flex;
flex-direction: column;
}
/* Sur la page dédiée, la légende porte trois niveaux — enseigne, métier,
ville — là où la bande animée n'en montre que deux. Sans hiérarchie, les
trois lignes se valent et la vignette n'a pas de point d'entrée. */
.vdm-partenaires-grille .vdm-logo-legende {
padding: var(--vdm-e-3) var(--vdm-e-2);
font-size: .8rem;
letter-spacing: .1em;
}
.vdm-partenaires-grille .vdm-metier {
margin-top: .5em;
font-size: .78rem;
letter-spacing: .06em;
color: var(--vdm-or-sombre);
}
.vdm-partenaires-grille .vdm-ville {
margin-top: .15em;
font-size: .72rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--vdm-encre-douce);
}
/* Sur la page dédiée, les logos sont en couleur d'emblée : c'est leur page. */
.vdm-partenaires-grille .vdm-logo img {
filter: none;
opacity: 1;
}
/* --- Description du partenaire, page dédiée uniquement ---
Texte fourni par le client, repris de l'ancien site. Il est aligné à gauche
alors que la légende est centrée : un paragraphe de cinq lignes centré se
lit mal, les débuts de ligne n'étant jamais au même endroit. La légende, qui
tient sur trois mots, garde son centrage.
flex:1 pousse le fond de carte vers le bas pour que les cartes d'une rangée
se terminent au même niveau même quand les textes sont de longueurs
différentes — ce qui est le cas, de 280 à 400 caractères. */
.vdm-partenaires-grille .vdm-partenaire-texte {
flex: 1;
margin: 0;
padding: 0 var(--vdm-e-3) var(--vdm-e-3);
font-family: var(--vdm-sans);
font-size: .82rem;
font-weight: 300;
line-height: 1.75;
letter-spacing: 0;
text-align: left;
text-transform: none;
color: var(--vdm-encre-douce);
}
/* La légende perd son trait de séparation quand une description la suit :
deux filets rapprochés hachent la carte. */
.vdm-partenaires-grille .vdm-logo-decrit .vdm-logo-legende {
padding-bottom: var(--vdm-e-2);
}
/* --- Vue alternée : la mise en page de l'ancienne page partenaires ---
Une rangée par partenaire, visuel d'un côté et texte de l'autre, l'ordre
s'inversant à chaque rangée. Demandée par le client le 11/10/2026 à la
place de la grille : une carte de 300 px donnait une colonne de texte
trop étroite pour des descriptions de 280 à 400 caractères.
L'alternance passe par `order` sur le visuel, pas par un changement de
`grid-template-columns` : les deux colonnes gardent ainsi la même largeur
d'une rangée à l'autre, et le regard retrouve le texte au même endroit.
------------------------------------------------------------------------ */
.vdm-partenaires-liste {
overflow: visible;
display: flex;
flex-direction: column;
gap: var(--vdm-e-6);
margin-top: var(--vdm-e-5);
}
.vdm-partenaire {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--vdm-e-5);
align-items: center;
}
/* Une rangée sur deux inverse l'ordre. On ne déplace que le visuel : le
corps de texte suit naturellement dans la colonne restante. */
.vdm-partenaire:nth-child(even) .vdm-partenaire-visuel {
order: 2;
}
.vdm-partenaire-visuel {
background: var(--vdm-blanc);
box-shadow: var(--vdm-ombre);
aspect-ratio: 3 / 2;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.vdm-partenaire-visuel img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Sans logo fourni, le monogramme occupe le bloc — même format, même poids
visuel dans la rangée, pour que l'absence ne se lise pas comme un oubli. */
.vdm-partenaire-visuel .vdm-logo-texte {
font-family: var(--vdm-serif);
font-size: clamp(3rem, 1.5rem + 5vw, 5.5rem);
font-weight: 300;
letter-spacing: .06em;
color: var(--vdm-or);
background: var(--vdm-creme);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.vdm-partenaire-nom {
font-family: var(--vdm-serif);
font-size: var(--vdm-t-h3);
font-weight: 400;
line-height: 1.2;
color: var(--vdm-encre);
margin: 0;
}
.vdm-partenaire-meta {
margin: var(--vdm-e-1) 0 0;
font-family: var(--vdm-sans);
font-size: var(--vdm-t-petit);
}
.vdm-partenaire-meta .vdm-metier {
display: inline;
margin: 0;
color: var(--vdm-or-sombre);
}
/* Le point médian sépare métier et ville sans ajouter de balise, et
disparaît de lui-même quand l'un des deux manque — Le Biscuit n'a pas de
ville connue, Secrets des Saveurs pas encore de métier affiché. */
.vdm-partenaire-meta .vdm-metier + .vdm-ville::before {
content: " · ";
color: var(--vdm-ligne);
}
.vdm-partenaire-meta .vdm-ville {
display: inline;
margin: 0;
font-size: var(--vdm-t-surtitre);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--vdm-encre-douce);
}
/* Filet doré court, repris du reste du site : il sépare l'identité du
partenaire de sa description sans peser comme une bordure pleine. */
.vdm-partenaire-corps .vdm-partenaire-texte {
position: relative;
margin: var(--vdm-e-3) 0 0;
padding-top: var(--vdm-e-3);
font-family: var(--vdm-sans);
font-size: var(--vdm-t-corps);
font-weight: 300;
line-height: 1.85;
text-align: left;
color: var(--vdm-encre-douce);
}
.vdm-partenaire-corps .vdm-partenaire-texte::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 56px;
height: 1px;
background: var(--vdm-or);
}
.vdm-metier {
display: block;
font-family: var(--vdm-sans);
font-size: var(--vdm-t-petit);
font-weight: 400;
letter-spacing: .04em;
text-transform: none;
color: var(--vdm-or-sombre);
margin-top: .25em;
}
.vdm-piste {
display: flex;
gap: var(--vdm-e-4);
width: max-content;
animation: vdm-defilement var(--vdm-duree, 38s) linear infinite;
}
.vdm-partenaires:hover .vdm-piste { animation-play-state: paused; }
@keyframes vdm-defilement {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Vignette : bloc de marque à fond perdu en haut, légende dessous.
Les logos fournis ont chacun leur fond — gris, blanc, photo d'enseigne. Les
poser détourés dans une boîte blanche faisait ressortir ces fonds comme des
accidents ; à fond perdu et tous au même format, ils deviennent une bande de
couleur assumée. Les fichiers sont préparés par outils/normaliser-logos.php,
qui les repose sur une toile 3/2. */
.vdm-logo {
flex: 0 0 auto;
width: clamp(160px, 18vw, 220px);
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--vdm-blanc);
border: 1px solid var(--vdm-ligne);
border-radius: var(--vdm-rayon);
transition: border-color var(--vdm-transition-court),
box-shadow var(--vdm-transition-court),
transform var(--vdm-transition-court);
}
.vdm-logo img {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
filter: grayscale(1);
opacity: .72;
transition: filter var(--vdm-transition-court), opacity var(--vdm-transition-court);
}
/* Repli sans logo : un monogramme sérif, doré, sur fond crème.
Le nom complet est déjà dans la légende, inutile de le répéter ici. */
.vdm-logo-texte {
display: grid;
place-items: center;
width: 100%;
aspect-ratio: 3 / 2;
font-family: var(--vdm-serif);
font-size: clamp(2.2rem, 1.4rem + 2.2vw, 3.2rem);
font-weight: 400;
letter-spacing: .06em;
line-height: 1;
color: var(--vdm-or-sombre);
background:
radial-gradient(120% 120% at 50% 0%, rgba(201, 168, 106, .14), transparent 65%),
var(--vdm-creme);
}
.vdm-logo-legende {
flex: 1 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--vdm-e-3) var(--vdm-e-2);
border-top: 1px solid var(--vdm-ligne);
font-family: var(--vdm-sans);
font-size: var(--vdm-t-surtitre);
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
text-align: center;
line-height: 1.5;
color: var(--vdm-encre);
}
.vdm-logo-legende span {
display: block;
font-weight: 400;
letter-spacing: .06em;
text-transform: none;
color: var(--vdm-encre-douce);
}
.vdm-logo:hover {
border-color: var(--vdm-or);
box-shadow: var(--vdm-ombre);
transform: translateY(-4px);
}
.vdm-logo:hover img { filter: grayscale(0); opacity: 1; }
/* =========================================================================
8. WOOCOMMERCE
========================================================================= */
/* --- 8.0 Grille produit ---
Divi dispose les produits en flottants de largeur fixe. Deux conséquences
qu'on ne peut pas corriger autrement : les cartes d'une même rangée n'ont
pas la même hauteur — un titre de quatre lignes fait dépasser sa carte — et
les marges en pourcentage se règlent par classe `columns-N`.
On repasse en grille CSS. `auto-fill` avec un minimum de 220 px retombe seul
sur trois puis deux puis une colonne, sans media query, et toutes les cartes
d'une rangée s'étirent à la même hauteur. Les `!important` sont nécessaires :
Divi pose ces largeurs depuis sa feuille compilée, injectée après celle-ci. */
.woocommerce ul.products,
body.woocommerce ul.products,
.et_pb_shop ul.products,
.et_pb_wc_related_products ul.products {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--vdm-e-3);
margin: 0 !important;
padding: 0;
list-style: none;
}
.woocommerce ul.products li.product,
body.woocommerce ul.products li.product,
.et_pb_shop ul.products li.product,
.et_pb_wc_related_products ul.products li.product {
width: auto !important;
margin: 0 !important;
float: none !important;
clear: none !important;
}
/* Divi insère des séparateurs de rangée pour rattraper ses flottants ; en
grille ils créeraient des trous. */
.et_pb_shop ul.products::before,
.et_pb_shop ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; }
/* --- 8.1 Vignette produit ---
Divi sert les produits en liste flottante, sans cadre : une photo, un titre,
un prix posés sur le fond de page. On en fait une carte, dans le même
vocabulaire que les cartes d'origine — cadre fin, photo rognée, légende sur
fond plein.
Le cadre est posé sur le li que Divi dimensionne en pourcentage ; box-sizing
est en border-box sur tout WordPress, le bord d'un pixel ne casse donc pas
la grille. */
.woocommerce ul.products li.product,
.et_pb_shop ul.products li.product {
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--vdm-blanc);
border: 1px solid var(--vdm-ligne);
border-radius: var(--vdm-rayon);
transition: border-color var(--vdm-transition),
box-shadow var(--vdm-transition),
transform var(--vdm-transition);
}
.woocommerce ul.products li.product:hover,
.et_pb_shop ul.products li.product:hover {
border-color: var(--vdm-or);
box-shadow: var(--vdm-ombre);
transform: translateY(-4px);
}
/* Divi enferme toute la carte — photo, titre, prix — dans un seul lien. Ce
lien doit donc porter la colonne flex, sinon le « margin-top: auto » du prix
n'a rien contre quoi pousser et les prix ne s'alignent pas en bas. */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link,
.et_pb_shop ul.products li.product > a.woocommerce-LoopProduct-link {
display: flex;
flex: 1 1 auto;
flex-direction: column;
height: 100%;
color: inherit;
text-decoration: none;
}
/* Produit épuisé : WooCommerce pose la classe sur le li mais Divi n'en fait
rien. Le signaler sur la vignette évite un clic pour rien. */
.woocommerce ul.products li.product.outofstock,
.et_pb_shop ul.products li.product.outofstock { position: relative; }
.woocommerce ul.products li.product.outofstock::before,
.et_pb_shop ul.products li.product.outofstock::before {
content: "Épuisé";
position: absolute;
top: var(--vdm-e-2);
left: var(--vdm-e-2);
z-index: 2;
padding: .35em 1em;
background: rgba(12, 9, 8, .82);
color: var(--vdm-creme);
font-family: var(--vdm-sans);
font-size: var(--vdm-t-surtitre);
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
border-radius: var(--vdm-rayon);
}
.woocommerce ul.products li.product.outofstock img,
.et_pb_shop ul.products li.product.outofstock img { opacity: .55; }
/* Boîte photo à format fixe : les visuels produit du catalogue ont des
proportions très inégales, et sans bride les titres ne s'alignent plus d'une
vignette à l'autre. */
.woocommerce ul.products li.product .et_shop_image,
.et_pb_shop ul.products li.product .et_shop_image,
.woocommerce ul.products li.product > a:first-of-type > img,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail {
display: block;
overflow: hidden;
margin: 0;
}
.woocommerce ul.products li.product img,
.et_pb_shop ul.products li.product img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
margin: 0;
}
/* Titre et prix : une zone de légende, pas des éléments posés dans le vide.
Le titre doit être visé par sa CLASSE, pas par la balise h2. WooCommerce
pose `.woocommerce ul.products li.product .woocommerce-loop-product__title
{ padding: .5em 0 }` — quatre classes. Un sélecteur en `html body … h2` n'en
compte que trois et perd, quel que soit l'ordre des feuilles : ici ce n'est
pas le problème Divi habituel, c'est une vraie question de spécificité, et
ajouter des balises au sélecteur n'y change rien. */
html body .woocommerce ul.products li.product .woocommerce-loop-product__title,
html body.woocommerce ul.products li.product .woocommerce-loop-product__title,
html body .woocommerce ul.products li.product h2,
html body .woocommerce ul.products li.product h3,
html body .et_pb_shop ul.products li.product .woocommerce-loop-product__title {
font-family: var(--vdm-serif);
font-size: 1.15rem;
font-weight: 500;
line-height: 1.3;
color: var(--vdm-encre);
padding: var(--vdm-e-3) var(--vdm-e-3) 0;
margin: 0;
overflow-wrap: anywhere;
}
html body .woocommerce ul.products li.product .price,
html body.woocommerce ul.products li.product .price,
html body .et_pb_shop ul.products li.product .price {
font-family: var(--vdm-sans);
font-size: var(--vdm-t-petit);
font-weight: 500;
letter-spacing: .04em;
color: var(--vdm-or-sombre);
padding: .6rem var(--vdm-e-3) var(--vdm-e-3);
margin: 0;
/* Pousse le prix en bas : les titres font une à quatre lignes selon le
produit, et sans ça les prix dansent d'une vignette à l'autre. */
margin-top: auto;
}
/* Prix barré d'une promotion : discret, le prix courant doit primer. */
.woocommerce ul.products li.product .price del,
.et_pb_shop ul.products li.product .price del {
color: var(--vdm-encre-douce);
opacity: .7;
margin-right: .5em;
}
.woocommerce ul.products li.product .price ins,
.et_pb_shop ul.products li.product .price ins {
text-decoration: none;
font-weight: 600;
}
/* Divi superpose une loupe au survol de la photo : elle jure avec le reste. */
.et_pb_shop ul.products li.product .et_overlay { display: none !important; }
/* --- 8.2 Bouton d'achat sur la vignette ---
Posé par le JS, après le lien de Divi (voir vdm.js, section 3 bis).
Le comportement suit la capacité du pointeur, pas la largeur d'écran :
`hover: hover` désigne une souris, `hover: none` un doigt. Un écran large
tactile aurait donc le bon comportement, ce qu'une media query en pixels
ne saurait pas faire. */
.vdm-achat { margin-top: auto; }
html body .woocommerce ul.products li.product a.vdm-btn-panier,
html body .et_pb_shop ul.products li.product a.vdm-btn-panier {
display: block;
width: 100%;
padding: .95em 1em;
background-color: var(--vdm-or);
color: var(--vdm-noir);
font-family: var(--vdm-sans);
font-size: var(--vdm-t-surtitre);
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
text-align: center;
text-decoration: none;
border: 0;
border-radius: 0;
transition: background-color var(--vdm-transition-court);
}
html body .woocommerce ul.products li.product a.vdm-btn-panier:hover,
html body .et_pb_shop ul.products li.product a.vdm-btn-panier:hover {
background-color: var(--vdm-or-clair);
}
/* Par défaut le bouton est dans le flux, toujours visible : c'est l'état juste
pour un écran tactile, où rien ne se révèle au survol — un bouton caché y
serait un bouton inexistant.
Le glissement au survol n'est activé qu'ensuite, et seulement si les DEUX
conditions sont réunies : un vrai pointeur et un écran large. Deux signaux
valent mieux qu'un — `hover` seul se trompe sur les portables tactiles, et
la largeur seule se trompe sur une tablette au clavier. */
@media (hover: hover) and (min-width: 641px) {
.woocommerce ul.products li.product,
.et_pb_shop ul.products li.product { position: relative; }
.vdm-achat {
position: absolute;
inset: auto 0 0 0;
transform: translateY(100%);
transition: transform var(--vdm-transition);
will-change: transform;
}
.woocommerce ul.products li.product:hover .vdm-achat,
.et_pb_shop ul.products li.product:hover .vdm-achat,
.vdm-achat:focus-within { transform: translateY(0); }
}
/* États servis par WooCommerce pendant l'ajout. */
html body .woocommerce ul.products li.product a.vdm-btn-panier.loading {
opacity: .7;
pointer-events: none;
}
html body .woocommerce ul.products li.product a.vdm-btn-panier.added {
background-color: var(--vdm-vert-pro);
color: var(--vdm-creme);
}
/* WooCommerce ajoute un lien « Voir le panier » après l'ajout : il doublerait
le bouton. L'information est dans le compteur de l'en-tête. */
html body .woocommerce ul.products li.product a.added_to_cart { display: none; }
.woocommerce div.product p.price {
font-family: var(--vdm-sans);
font-weight: 500;
color: var(--vdm-encre);
}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button.alt {
font-family: var(--vdm-sans);
font-size: var(--vdm-t-surtitre);
letter-spacing: .14em;
text-transform: uppercase;
background-color: var(--vdm-or);
color: var(--vdm-noir);
border-radius: var(--vdm-rayon);
transition: background-color var(--vdm-transition-court);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover { background-color: var(--vdm-or-clair); }
/* Pastille « Promo ! » : WooCommerce la sert en saumon, seule tache de couleur
vive du site. Elle est très visible sur mobile, où deux produits par ligne
la placent en haut de chaque vignette.
Divi la repeint depuis sa propre feuille, injectée après celle-ci : il faut
surspécifier avec html body, et forcer les deux couleurs. */
/* Les variantes `body.woocommerce` ne sont pas un doublon : sur une fiche
produit, WooCommerce pose la classe sur le lui-même, et un sélecteur
`html body .woocommerce` ne la trouve jamais — un élément n'est pas son
propre descendant. Sans ces lignes, les pastilles restaient saumon sur les
fiches produit alors qu'elles étaient corrigées partout ailleurs. */
html body .woocommerce span.onsale,
html body .woocommerce ul.products li.product .onsale,
html body.woocommerce span.onsale,
html body.woocommerce ul.products li.product .onsale,
html body .et_pb_shop .onsale,
html body .et_pb_wc_images .onsale,
html body .et_pb_wc_related_products .onsale {
background-color: var(--vdm-noir) !important;
color: var(--vdm-or) !important;
}
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.et_pb_shop .onsale {
background-color: var(--vdm-noir);
color: var(--vdm-or);
font-family: var(--vdm-sans);
font-size: var(--vdm-t-surtitre);
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
border-radius: var(--vdm-rayon);
padding: .35em 1em;
min-height: 0;
min-width: 0;
line-height: 1.6;
}
/* --- 8.5 Panier : mise à jour automatique ---
La classe .vdm-panier-auto est posée sur par le JS, jamais par le
HTML. Sans JavaScript elle est absente, le bouton reste donc visible et le
panier fonctionne comme WooCommerce l'a prévu — c'est la porte de secours.
Le bouton est masqué, pas supprimé : cart.js s'en sert comme déclencheur
(voir initPanierAuto dans vdm.js). Le retirer du DOM casserait la mise à
jour au lieu de l'automatiser.
La rangée .actions qui le contient accueille aussi le champ de code promo.
On ne la replie donc que si ce champ est absent, sinon on ferait
disparaître les codes promo en même temps que le bouton. :has() n'est pas
universel : la règle sur le bouton seul reste le plancher, et au pire il
reste une rangée vide plutôt qu'un bouton trompeur.
------------------------------------------------------------------------ */
/* Deux sélecteurs, parce que Divi en pose un plus fort sous le seuil mobile :
.et_pb_wc_cart_products.et_pb_row_layout_vertical table.cart td.actions .button
{ display: block; width: 100% }
Quatre classes contre les trois du sélecteur simple ci-dessous : le bouton
restait donc visible sur téléphone alors qu'il disparaissait sur bureau.
Le premier sélecteur monte à quatre classes et trois balises pour reprendre
la main. `!important` en ceinture : la règle de Divi est générée par le
module, et ses réglages peuvent en changer la forme à tout moment. */
html.vdm-panier-auto .et_pb_wc_cart_products table.cart td.actions [name="update_cart"],
html.vdm-panier-auto .woocommerce-cart-form [name="update_cart"] {
display: none !important;
}
/* La rangée .actions n'accueille plus que ce bouton, les codes promo étant
désactivés. On la replie entièrement — sur téléphone elle devient
`display:block` et laisserait sinon une bande vide sous le tableau.
`:has()` garde la porte ouverte : le jour où un champ de code promo
revient, la règle cesse de s'appliquer d'elle-même. */
html.vdm-panier-auto .woocommerce-cart-form .actions:not(:has(#coupon_code)),
html.vdm-panier-auto .et_pb_wc_cart_products table.cart td.actions:not(:has(#coupon_code)) {
display: none !important;
}
/* Pendant la requête, WooCommerce pose un voile blockUI sur le formulaire et
sur le total. On l'adoucit : le voile par défaut est opaque et donne
l'impression que la page a sauté. */
html.vdm-panier-auto .woocommerce-cart-form .blockUI.blockOverlay,
html.vdm-panier-auto .cart_totals .blockUI.blockOverlay {
background: #FFFFFF !important;
opacity: .45 !important;
transition: opacity .2s ease;
}
/* Le sélecteur de quantité devient le seul point de commande de la rangée :
il mérite d'être visible et confortable au doigt. */
html.vdm-panier-auto .woocommerce-cart-form .quantity input.qty {
min-height: 44px;
}
/* =========================================================================
9. PIED DE PAGE
========================================================================= */
/* --- Pied de page construit avec le Theme Builder ---
Un pied Theme Builder ne sort PAS dans #main-footer : c'est une suite de
sections Divi ordinaires. D'où la classe .vdm-footer posée sur la section. */
.vdm-footer h4 {
font-family: var(--vdm-sans);
font-size: var(--vdm-t-surtitre);
font-weight: 500;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--vdm-encre);
margin-bottom: var(--vdm-e-2);
}
/* wpautop transforme en la ligne vide qui précède un shortcode dans un
module texte. Invisible mais pas sans effet : la colonne Contact du pied de
page démarrait une ligne plus bas que ses voisines. */
.vdm-footer .vdm-footer-colonne p:empty { display: none; }
.vdm-footer .vdm-footer-colonne ul {
list-style: none;
padding: 0;
margin: 0;
}
.vdm-footer .vdm-footer-colonne li {
padding: 0;
margin-bottom: .55em;
line-height: 1.5;
}
.vdm-footer .vdm-footer-colonne a,
.vdm-footer .vdm-footer-colonne li {
font-size: var(--vdm-t-petit);
color: var(--vdm-encre-douce);
}
.vdm-footer .vdm-footer-colonne a:hover { color: var(--vdm-or-sombre); }
/* Le contact peut contenir de longues adresses : on évite le débordement. */
.vdm-footer-contact a { overflow-wrap: anywhere; }
.vdm-footer-baseline p {
font-family: var(--vdm-serif);
font-size: 1.15rem;
line-height: 1.45;
color: var(--vdm-encre-douce);
max-width: 26ch;
}
/* Icônes sociales : les aplats bleu et rose de Divi jurent avec la charte.
On les neutralise en contour discret qui se remplit d'or au survol. */
.vdm-footer-social .et_pb_social_media_follow_network_0 a.icon,
.vdm-footer-social li a.icon {
background-color: transparent !important;
border: 1px solid var(--vdm-ligne);
border-radius: 50%;
transition: border-color var(--vdm-transition-court),
background-color var(--vdm-transition-court);
}
.vdm-footer-social li a.icon::before { color: var(--vdm-encre-douce); }
.vdm-footer-social li a.icon:hover {
background-color: var(--vdm-or) !important;
border-color: var(--vdm-or);
}
.vdm-footer-social li a.icon:hover::before { color: var(--vdm-noir); }
/* Barre basse : mention légale à gauche, signature manuscrite à droite. */
.vdm-footer-bas { border-top: 1px solid var(--vdm-ligne); }
.vdm-footer-bas .et_pb_text_inner {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--vdm-e-2);
}
.vdm-footer-bas p { margin: 0; }
.vdm-copyright {
font-size: var(--vdm-t-petit);
color: var(--vdm-encre-douce);
}
.vdm-signature { line-height: 1.2; }
#main-footer { background-color: var(--vdm-creme); }
#main-footer,
#main-footer p,
#main-footer li a { color: var(--vdm-encre-douce); font-size: var(--vdm-t-petit); }
#main-footer h4,
#main-footer .widgettitle {
font-family: var(--vdm-sans);
font-size: var(--vdm-t-surtitre);
font-weight: 500;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--vdm-encre);
}
#main-footer li a:hover { color: var(--vdm-or-sombre); }
#footer-bottom {
background-color: var(--vdm-creme);
border-top: 1px solid var(--vdm-ligne);
}
/* =========================================================================
10. ANIMATIONS D'APPARITION
Posées par le JS. Dégradation propre si le JS ne tourne pas :
sans la classe .vdm-js sur , tout reste visible.
========================================================================= */
.vdm-js [data-vdm-reveal],
.vdm-js .vdm-reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 760ms cubic-bezier(.22, .61, .36, 1),
transform 760ms cubic-bezier(.22, .61, .36, 1);
transition-delay: var(--vdm-retard, 0ms);
will-change: opacity, transform;
}
.vdm-js [data-vdm-reveal].vdm-visible,
.vdm-js .vdm-reveal.vdm-visible {
opacity: 1;
transform: none;
}
/* --- 10.1 Entrée du bandeau ---
Le hero est visible dès le chargement : l'observateur de défilement y
déclencherait tout d'un bloc. On le joue donc à l'ouverture, en cascade.
La classe vdm-entree est posée par le JS une image après le chargement,
pour que la transition parte bien de l'état caché. */
.vdm-js .vdm-hero .et_pb_module {
opacity: 0;
transform: translateY(24px);
transition: opacity 900ms cubic-bezier(.22, .61, .36, 1),
transform 900ms cubic-bezier(.22, .61, .36, 1);
transition-delay: var(--vdm-retard, 0ms);
}
.vdm-js .vdm-hero.vdm-entree .et_pb_module {
opacity: 1;
transform: none;
}
/* --- 10.2 Filet doré qui se trace ---
Le trait sous les sur-titres se dessine du centre vers les bords quand la
section apparaît, au lieu d'être là d'emblée. */
.vdm-js .vdm-filet::after {
width: 0;
transition: width 900ms cubic-bezier(.22, .61, .36, 1) 260ms;
}
.vdm-js .vdm-filet.vdm-visible::after { width: 64px; }
/* --- 10.3 Soulignement doré de la navigation ---
Le trait passe par ::before et non ::after : Divi dessine le chevron des
sous-menus avec le ::after de l'ancre, et le lui prendre fait disparaître la
flèche de « Boutique ». */
#top-menu li > a {
position: relative;
}
#top-menu li > a::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -.35em;
height: 1px;
background: var(--vdm-or);
transform: scaleX(0);
transform-origin: center;
transition: transform var(--vdm-transition-court);
}
#top-menu li > a:hover::before,
#top-menu li.current-menu-item > a::before { transform: scaleX(1); }
/* --- 10.4 Vignettes produit ---
Léger rapprochement de la photo au survol, comme sur les cartes d'origine :
la boutique doit répondre de la même façon que le reste du site. */
.woocommerce ul.products li.product a img,
.et_pb_shop ul.products li.product a img {
transition: transform 700ms cubic-bezier(.22, .61, .36, 1);
}
.woocommerce ul.products li.product:hover a img,
.et_pb_shop ul.products li.product:hover a img { transform: scale(1.05); }
/* Le conteneur doit rogner le débordement, sinon l'image passe sous le titre. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.et_pb_shop ul.products li.product a.woocommerce-LoopProduct-link {
display: block;
overflow: hidden;
border-radius: var(--vdm-rayon);
}
/* --- 10.5 Vignettes partenaires --- */
.vdm-logo { will-change: transform; }
/* Respect absolu de la préférence système.
Tout ce qui bouge de lui-même s'arrête ; les états de survol restent, ils
répondent à une action de l'utilisateur et ne surprennent personne. */
@media (prefers-reduced-motion: reduce) {
.vdm-js [data-vdm-reveal],
.vdm-js .vdm-reveal { opacity: 1; transform: none; transition: none; }
.vdm-js .vdm-hero .et_pb_module { opacity: 1; transform: none; transition: none; }
.vdm-js .vdm-filet::after { width: 64px; transition: none; }
.vdm-piste { animation: none; }
.vdm-hero::after { animation: none; }
.vdm-carte-origine img { transition: none; }
}
/* =========================================================================
11. RESPONSIVE
========================================================================= */
@media (max-width: 980px) {
/* Sur un écran étroit et haut, « cover » ne laisse voir qu'un dixième de la
largeur d'une photo en 2048 x 748 : cadrée à droite on ne retenait que la
toile de jute. Recentrée, on garde le bouquet et la fleur. */
/* 72vh nu n'a pas de garde-fou : sur une tablette en portrait ou un écran
très haut, le bandeau occupait deux fois la hauteur utile avant que le
premier titre n'apparaisse. On borne des deux côtés. */
.vdm-hero { min-height: clamp(460px, 72vh, 640px); text-align: center; }
.vdm-hero::after { background-position: center center; }
/* Le centrage posé sur la section ne descendait pas jusqu'au texte : Divi
pose text-align sur chaque module, et une règle explicite sur l'enfant bat
l'héritage quel que soit l'ordre des feuilles. On vise donc les modules. */
html body .vdm-hero .et_pb_text,
html body .vdm-hero .et_pb_text_inner,
html body .vdm-hero .et_pb_button_module_wrapper { text-align: center; }
.vdm-hero .vdm-accroche::after { margin-inline: auto; }
.vdm-hero::before {
background: linear-gradient(180deg,
rgba(12, 9, 8, .82) 0%,
rgba(12, 9, 8, .62) 50%,
rgba(12, 9, 8, .88) 100%);
}
.vdm-hero .vdm-accroche { max-width: none; margin-inline: auto; }
.vdm-reassurance { justify-content: center; gap: var(--vdm-e-3); }
.vdm-histoire .et_pb_column { display: block; }
/* Partenaires en vue alternée : une seule colonne, et le visuel repasse
TOUJOURS avant le texte. Sans cette remise à zéro de `order`, une rangée
sur deux commencerait par un paragraphe, le logo arrivant après — on ne
saurait plus de quelle maison on parle avant d'avoir fini de lire. */
.vdm-partenaire {
grid-template-columns: 1fr;
gap: var(--vdm-e-3);
}
.vdm-partenaire:nth-child(even) .vdm-partenaire-visuel { order: 0; }
.vdm-partenaires-liste { gap: var(--vdm-e-5); }
}
@media (max-width: 640px) {
.vdm-reassurance { flex-direction: column; align-items: center; gap: var(--vdm-e-2); }
.vdm-logo { width: 140px; }
.et_pb_button { width: 100%; text-align: center; }
/* Une colonne : la photo en 3/2 pleine largeur donne déjà des cartes courtes,
rien à raccourcir de plus. La légende se resserre simplement. */
.vdm-carte-origine .vdm-legende { padding: var(--vdm-e-2); }
/* WooCommerce charge woocommerce-smallscreen.css, servi avec un attribut
media sous 768 px, qui repasse les produits en flottants :
« .woocommerce ul.products[class*=columns-] li.product
{ width: 48%; float: left; clear: both } ».
Cette largeur l'emportait en pratique sur le « width: auto !important » de
la section 8.0 — vérifié en posant des contours temporaires sur le
conteneur et sur les cartes : la grille était bien là, deux colonnes
pleines, mais chaque carte n'occupait que 48 % de sa colonne. Il a fallu
reprendre les quatre propriétés ici, dans la même tranche de largeur, en
reprenant la forme de leur sélecteur. */
html body .woocommerce ul.products[class*="columns-"] li.product,
html body .woocommerce-page ul.products[class*="columns-"] li.product,
html body .et_pb_shop ul.products[class*="columns-"] li.product {
width: auto !important;
float: none !important;
clear: none !important;
margin: 0 !important;
}
.woocommerce ul.products,
.et_pb_shop ul.products { grid-template-columns: repeat(2, 1fr); }
/* Les cinq partenaires empilés sur toute la largeur faisaient quinze cents
pixels de défilement pour cinq logos. Deux colonnes en donnent une lecture
d'un coup d'œil, comme sur grand écran. */
.vdm-partenaires-grille {
grid-template-columns: repeat(2, 1fr);
gap: var(--vdm-e-2);
}
.vdm-partenaires-grille .vdm-logo-legende {
padding: var(--vdm-e-2) .5rem;
font-size: .68rem;
letter-spacing: .08em;
}
}
/* --- 8.3 Compteur du panier ---
Posé par le JS dans l'icône de Divi, rafraîchi par les fragments
WooCommerce. Caché tant que le panier est vide : un « 0 » permanent est du
bruit, et son apparition est justement le signal qu'on attend. */
#main-header .et-cart-info { position: relative; }
.vdm-panier-compte {
position: absolute;
top: -.35em;
right: -.7em;
min-width: 1.5em;
height: 1.5em;
padding: 0 .35em;
display: grid;
place-items: center;
background: var(--vdm-or);
color: var(--vdm-noir);
font-family: var(--vdm-sans);
font-size: .65rem;
font-weight: 600;
line-height: 1;
letter-spacing: 0;
border-radius: 1em;
pointer-events: none;
}
.vdm-panier-compte.vdm-vide { display: none; }
/* Divi dessine l'icône du panier avec `.et-cart-info span:before { content:
"07a" }` — un sélecteur qui vise N'IMPORTE QUEL span du lien. La pastille
en est un : elle héritait donc d'un second chariot, collé au premier.
On neutralise le pseudo-élément sur elle seule. */
#main-header .et-cart-info .vdm-panier-compte::before {
content: none;
display: none;
margin: 0;
}
/* --- 8.4 Fiche produit ---
Seul écran encore servi tel quel par Divi et WooCommerce. C'est pourtant
celui où l'on achète.
Rappel pour toute retouche ici : sur une fiche produit, la classe
`woocommerce` est posée sur le . Les sélecteurs doivent donc s'écrire
`body.woocommerce …` et non `.woocommerce …` imbriqué. */
/* Le titre sortait en --vdm-t-h1, jusqu'à 4 rem : un nom de produit long y
occupait quatre lignes et écrasait le prix.
Il faut viser le module Divi `et_pb_wc_title` : celui-ci rend un NU,
sans la classe `product_title` de WooCommerce. Un sélecteur sur
`.product_title` ne trouve rien sur cette page. */
body.single-product .et_pb_wc_title h1,
body.single-product .et_pb_wc_title h2,
body.single-product .product_title,
body.single-product h1.product_title {
font-family: var(--vdm-serif);
font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.8rem);
font-weight: 500;
line-height: 1.2;
letter-spacing: 0;
color: var(--vdm-encre);
margin-bottom: var(--vdm-e-2);
}
body.single-product div.product p.price,
body.single-product div.product span.price {
font-family: var(--vdm-sans);
font-size: 1.35rem;
font-weight: 500;
letter-spacing: .02em;
color: var(--vdm-or-sombre);
margin-bottom: var(--vdm-e-3);
}
body.single-product div.product p.price del { opacity: .6; font-size: .8em; }
body.single-product div.product p.price ins { text-decoration: none; }
body.single-product div.product .woocommerce-product-details__short-description {
font-size: var(--vdm-t-corps);
line-height: 1.75;
color: var(--vdm-encre-douce);
max-width: 56ch;
}
/* « Rupture de stock » sortait en rouge vif. */
body.single-product .stock.out-of-stock {
display: inline-block;
padding: .4em 1em;
background: var(--vdm-noir);
color: var(--vdm-creme);
font-family: var(--vdm-sans);
font-size: var(--vdm-t-surtitre);
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
border-radius: var(--vdm-rayon);
}
body.single-product .stock.in-stock {
color: var(--vdm-vert-pro);
font-family: var(--vdm-sans);
font-size: var(--vdm-t-petit);
}
/* Galerie : Divi encadre chaque vignette d'un liseré doré épais. */
body.single-product .woocommerce-product-gallery img,
body.single-product .flex-control-thumbs img {
border: 1px solid var(--vdm-ligne) !important;
border-radius: var(--vdm-rayon);
padding: 0 !important;
}
body.single-product .flex-control-thumbs li { margin-right: var(--vdm-e-1); }
body.single-product .woocommerce-product-gallery__trigger {
background: rgba(255, 255, 255, .92);
border-radius: 50%;
box-shadow: var(--vdm-ombre);
}
/* Quantité et bouton d'achat. */
body.single-product .quantity input.qty {
height: 3.2em;
padding: 0 .5em;
font-family: var(--vdm-sans);
border: 1px solid var(--vdm-ligne);
border-radius: var(--vdm-rayon);
background: var(--vdm-blanc);
color: var(--vdm-encre);
}
html body.single-product .single_add_to_cart_button {
padding: 1.05em 2.4em;
background-color: var(--vdm-or) !important;
color: var(--vdm-noir) !important;
font-family: var(--vdm-sans);
font-size: var(--vdm-t-surtitre);
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
border: 0;
border-radius: var(--vdm-rayon);
transition: background-color var(--vdm-transition-court);
}
html body.single-product .single_add_to_cart_button:hover {
background-color: var(--vdm-or-clair) !important;
}
/* Onglets : Divi les sert en encadré doré avec un onglet vert. */
body.single-product .woocommerce-tabs {
border: 0 !important;
padding: 0 !important;
}
body.single-product .woocommerce-tabs ul.tabs {
padding: 0 !important;
margin: 0 0 var(--vdm-e-3);
border-bottom: 1px solid var(--vdm-ligne);
}
body.single-product .woocommerce-tabs ul.tabs::before { display: none; }
body.single-product .woocommerce-tabs ul.tabs li {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
margin: 0 var(--vdm-e-3) 0 0 !important;
padding: 0 !important;
}
body.single-product .woocommerce-tabs ul.tabs li::before,
body.single-product .woocommerce-tabs ul.tabs li::after { display: none !important; }
body.single-product .woocommerce-tabs ul.tabs li a {
display: inline-block;
padding: .7em 0 !important;
font-family: var(--vdm-sans);
font-size: var(--vdm-t-surtitre);
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--vdm-encre-douce) !important;
border-bottom: 2px solid transparent;
}
body.single-product .woocommerce-tabs ul.tabs li.active a {
color: var(--vdm-encre) !important;
border-bottom-color: var(--vdm-or);
}
body.single-product .woocommerce-tabs .panel {
font-size: var(--vdm-t-corps);
line-height: 1.75;
color: var(--vdm-encre-douce);
max-width: 78ch;
}
body.single-product .woocommerce-tabs .panel h2 { display: none; }
/* Fil d'Ariane. */
body.single-product .woocommerce-breadcrumb {
font-family: var(--vdm-sans);
font-size: var(--vdm-t-petit);
letter-spacing: .04em;
color: var(--vdm-encre-douce);
margin-bottom: var(--vdm-e-3);
}
body.single-product .woocommerce-breadcrumb a { color: var(--vdm-or-sombre); }
/* Produits similaires : même titre de section que le reste du site. */
body.single-product .related > h2,
body.single-product .et_pb_wc_related_products h2 {
font-family: var(--vdm-serif);
font-size: var(--vdm-t-h3);
font-weight: 500;
text-align: center;
margin-bottom: var(--vdm-e-4);
}
/* Divi encadre le module d'un liseré. */
body.single-product .et_pb_wc_related_products.et_pb_with_border { border: 0 !important; }
@media (max-width: 980px) {
body.single-product .product_title { text-align: left; }
body.single-product div.product .woocommerce-product-details__short-description { max-width: none; }
}
/* Le cadre doré de 4 px autour des onglets vient d'un réglage du module dans
le Theme Builder, pas d'une feuille de style : Divi le compile en
`.et_pb_wc_tabs_0_tb_body.et_pb_tabs{border-width:4px;border-color:#C9A86A}`.
On le ramène à un filet. À terme, le bon endroit pour corriger ça est le
gabarit 165 lui-même. */
html body.single-product .et_pb_wc_tabs.et_pb_tabs {
border-width: 1px !important;
border-color: var(--vdm-ligne) !important;
border-radius: var(--vdm-rayon) !important;
}
html body.single-product .et_pb_wc_tabs .et_pb_tabs_controls {
background: transparent;
border-bottom: 1px solid var(--vdm-ligne);
}
html body.single-product .et_pb_wc_tabs .et_pb_tabs_controls li {
background: transparent !important;
border: 0 !important;
font-family: var(--vdm-sans);
font-size: var(--vdm-t-surtitre);
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
}
html body.single-product .et_pb_wc_tabs .et_pb_tabs_controls li a { color: var(--vdm-encre-douce); }
html body.single-product .et_pb_wc_tabs .et_pb_tabs_controls li.et_pb_tab_active {
background: transparent !important;
border-bottom: 2px solid var(--vdm-or) !important;
}
html body.single-product .et_pb_wc_tabs .et_pb_tabs_controls li.et_pb_tab_active a { color: var(--vdm-encre); }
html body.single-product .et_pb_wc_tabs .et_pb_all_tabs { background: transparent; }
/* Divi impose la couleur des libellés d'onglet depuis le Theme Builder :
`.et-db #et-boc .et-l .et_pb_wc_tabs_0_tb_body.et_pb_tabs .et_pb_tabs_controls
li a { color:#FFFFFF !important }`. Du blanc, hérité de l'onglet vert
d'origine. Une fois le fond rendu transparent, le libellé devenait blanc sur
blanc — invisible.
Leur sélecteur porte un identifiant ET six classes : il faut en aligner
autant pour reprendre la main. Le vrai bon endroit pour corriger ça reste
le réglage du module dans le gabarit 165 ; ceci est le correctif de
secours. */
html body.et-db.single-product #et-boc .et-l .et_pb_wc_tabs.et_pb_tabs .et_pb_tabs_controls li a {
color: var(--vdm-encre-douce) !important;
}
html body.et-db.single-product #et-boc .et-l .et_pb_wc_tabs.et_pb_tabs .et_pb_tabs_controls li.et_pb_tab_active a {
color: var(--vdm-encre) !important;
}
/* =========================================================================
12. BOUTON WHATSAPP
Posé par vdm_bouton_whatsapp() en pied de page, donc sur tout le site.
========================================================================= */
.vdm-whatsapp {
position: fixed;
z-index: 9999;
right: clamp(1rem, 2vw, 1.75rem);
/* env() tient compte de la barre de geste des iPhone : sans ça le bouton
se retrouve à moitié dessous. */
bottom: calc(clamp(1rem, 2vw, 1.75rem) + env(safe-area-inset-bottom, 0px));
display: grid;
place-items: center;
width: 54px;
height: 54px;
background: var(--vdm-noir);
color: var(--vdm-or);
border-radius: 50%;
box-shadow: 0 10px 28px -10px rgba(20, 16, 14, .55);
transition: transform var(--vdm-transition-court),
background-color var(--vdm-transition-court),
color var(--vdm-transition-court);
}
.vdm-whatsapp:hover,
.vdm-whatsapp:focus-visible {
transform: translateY(-3px);
background: var(--vdm-or);
color: var(--vdm-noir);
}
.vdm-whatsapp svg { display: block; }
/* Un halo discret qui bat lentement : assez pour attirer l'œil une fois,
trop lent pour agacer. */
@keyframes vdm-halo {
0%, 70%, 100% { box-shadow: 0 10px 28px -10px rgba(20, 16, 14, .55), 0 0 0 0 rgba(201, 168, 106, .5); }
35% { box-shadow: 0 10px 28px -10px rgba(20, 16, 14, .55), 0 0 0 14px rgba(201, 168, 106, 0); }
}
.vdm-whatsapp { animation: vdm-halo 4.5s ease-out infinite; }
@media (max-width: 640px) {
.vdm-whatsapp { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
.vdm-whatsapp { animation: none; transition: none; }
}
/* Sur écran étroit, Divi colle l'icône du panier au bouton menu : la pastille,
décalée vers la droite, venait mordre sur les barres du menu. */
@media (max-width: 980px) {
#main-header .et-cart-info { margin-right: .9em; }
.vdm-panier-compte { top: -.3em; right: -.55em; font-size: .6rem; }
}