/**
* DJ Fenêtres — raccord mini-panier & wishlist au header
* ----------------------------------------------------------------------
* Chargé APRÈS style.css et wishlist-custom.css (enqueue dans dj-header.php) :
* surcharge propre, AUCUNE modification de style.css.
* Langage visuel = les « fenêtres » : blanc, angles droits, entête Playfair
* petites capitales, lignes produit avec survol crème, boutons 1ʳᵉ personne
* (plein rose / contour).
*
* ⚠️ Tout le bloc mini-panier est préfixé `html body` : style.css peut sortir APRÈS
* cette feuille selon l'ordre d'impression, on gagne par la SPÉCIFICITÉ.
* ⚠️ Les trois boutons des deux fenêtres ont une hauteur POSÉE (38px) et un corps de
* 12px ; le bouton wishlist exige un sélecteur à 3 classes + `html body` pour
* battre le CSS inline du plugin MoreConvert.
*
* @version 1.0.18 — cache-buster : DJ_HEADER_VERSION (includes/dj-header.php)
*/
/* ==========================================================================
ICÔNES DU HEADER — survol uniforme
⚠️ Préfixe .et-db #et-boc .et-l OBLIGATOIRE : les couleurs saisies dans les
modules Divi sortent en CSS à spécificité ID + !important (et-core-unified)
et battent tout sélecteur à classes. Constaté : la bordure du panier restait
foncée (elle est en currentColor → couleur de texte Divi #D4A5A5).
========================================================================== */
/* Repos du panier : assorti à la clé (bordure claire, pas d'ombre) */
.et-db #et-boc .et-l .molti-header-9-10 .custom-mini-cart a.mini-cart-link {
border-color: #E8D5CF !important; /* = bordure de la clé, relevée en prod */
box-shadow: none !important;
}
/* Repos du ❤ : sa bordure Divi DISPARAÎT sur les gabarits PRODUIT.
Mesuré en test, même viewport, en comparant les styles calculés
de tout le header entre l'accueil et une fiche :
borderTopWidth accueil 1px → fiche 0px
borderTopColor accueil #E8D5CF → fiche #333 (le défaut)
Le réglage EST bien posé dans le Theme Builder (le module porte
`et_pb_with_border`), mais Divi le génère avec des sélecteurs faibles qui
perdent la cascade dès que le conteneur du builder gagne la classe `product`.
On repose donc la bordure ici — exactement ce qu'on a déjà dû faire pour le
panier juste au-dessus, et pour la même raison.
⚠️ CETTE RÈGLE DOIT RESTER AVANT LE BLOC DE SURVOL : elle a la MÊME
spécificité (1,5,0) que « .molti-wishlist:hover » ci-dessous. À égalité, c'est
le dernier écrit qui gagne — la placer après éteindrait la bordure rose au
survol. Ne pas la déplacer plus bas. */
.et-db #et-boc .et-l .molti-header-9-10 .et_pb_module.molti-wishlist {
border: 1px solid #E8D5CF !important;
}
/* Bouton Compte : la boîte reste figée et le titre reste HORS CHAMP.
Même mécanisme que la bordure du ❤ ci-dessus. Ces réglages vivent dans
dj-header.css (Lot A) mais y perdent la cascade sur les gabarits produit, et
l'ancien comportement du thème Molti reprend alors le dessus : au survol,
l'emoji 🗝 glisse à left:25% POUR LAISSER APPARAÎTRE le titre du blurb
(« Compte »), qui se superpose à l'icône. Constaté sur une
fiche produit, invisible sur l'accueil.
⭐ On ne VIDE PAS le titre dans le Theme Builder : c'est le seul nom que le
lien offre aux lecteurs d'écran. On le garde, et on le maintient hors champ.
Même fenêtre que dj-header.css : ≥1025px (sous 1024, la feuille mobile prend
le relais avec une tout autre mise en page). */
@media (min-width: 1025px) {
.et-db #et-boc .et-l .molti-header-9-10 .et_pb_row:has(.dj-search) .et_pb_module.account-link {
width: 40px !important;
flex: 0 0 40px !important;
overflow: hidden !important;
margin-left: 0 !important;
}
/* bat le « left:25% !important » de style.css, en (1,5,1) contre (0,3,1) */
.et-db #et-boc .et-l .molti-header-9-10 .account-link:hover::after {
left: 50% !important;
}
}
/* Survol : bordure rose vif + ombre renforcée, pour les trois icônes */
.et-db #et-boc .et-l .molti-header-9-10 a.account-link:hover,
.et-db #et-boc .et-l .molti-header-9-10 .molti-wishlist:hover,
.et-db #et-boc .et-l .molti-header-9-10 .custom-mini-cart a.mini-cart-link:hover {
border-color: var(--dj-rose-vif) !important;
box-shadow: 0 8px 25px rgba(216, 153, 153, 0.6) !important;
}
/* Le ❤ centré dans son cadre. Deux causes réelles :
1. wpautop glisse un VIDE de 14px au-dessus du compteur dans le module
Divi → le cœur est poussé en bas, à cheval sur la bordure ;
2. la case elle-même ne centrait pas son contenu. */
.molti-header-9-10 .molti-wishlist .et_pb_text_inner > p:empty {
display: none !important;
}
.molti-header-9-10 .molti-wishlist {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
}
.molti-wishlist .wlfmc-counter-wrapper,
.molti-wishlist .wlfmc-counter-icon {
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Le plugin met `gap:5px` entre l'icône et le span de texte du compteur —
span VIDE chez nous, mais le gap décale quand même le ❤ */
.molti-wishlist .wlfmc-counter-wrapper .wlfmc-counter {
gap: 0 !important;
}
.molti-wishlist .wlfmc-counter .wlfmc-counter-text:empty {
display: none !important;
}
/* Les 3 cases NIVELÉES sur la même ligne (constaté : clé y81 · panier y84 ·
❤ y86). Marges VERTICALES Divi remises à zéro — les horizontales
restent intactes. ⚠️ `.account-link` est posé SUR le module lui-même
(un :has() seul ne suffit pas, d'où les deux écritures). */
.et-db #et-boc .et-l .molti-header-9-10 .et_pb_row:has(.dj-search) .et_pb_module.account-link,
.et-db #et-boc .et-l .molti-header-9-10 .et_pb_row:has(.dj-search) .et_pb_module:has(.account-link),
.et-db #et-boc .et-l .molti-header-9-10 .et_pb_row:has(.dj-search) .et_pb_module.molti-wishlist,
.et-db #et-boc .et-l .molti-header-9-10 .et_pb_row:has(.dj-search) .et_pb_module.molti-cart-launcher {
margin-top: 0 !important;
margin-bottom: 0 !important;
align-self: center !important;
}
/* Le module texte du panier gardait 3px d'espace de ligne au-dessus du
wrapper inline-block → flex (qui supprime les line-boxes) suffit.
⛔ SURTOUT PAS de line-height:0 ici : la FENÊTRE mini-panier vit dans ce
même module et en hérite (boutons écrasés à 18px — cassé en v1.0.3). */
.molti-header-9-10 .molti-cart-launcher .et_pb_text_inner {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* ==========================================================================
FENÊTRE MINI-PANIER (.mini-cart-dropdown — HTML maison, mini-cart.php)
========================================================================== */
/* ⚠️ préfixe `html body` sur TOUT le bloc mini-panier — style.css
peut sortir APRÈS cette feuille selon l'ordre d'impression (constaté ailleurs,
même symptôme relevé ici : encart de survol sans padding) : on gagne
par la SPÉCIFICITÉ, comme le bloc wishlist qui n'a jamais bougé. */
html body .mini-cart-dropdown {
width: 380px !important;
max-width: calc(100vw - 30px) !important;
background: #fff;
border: 1px solid var(--dj-fond-secondaire);
border-radius: 0 !important;
box-shadow: 0 30px 60px rgba(212, 165, 165, 0.25) !important; /* rosée, comme le header */
margin-top: 12px;
}
/* Entête de fenêtre (le
ajouté par mini-cart.php).
⚠️ taille en !important OBLIGATOIRE : les styles h3 de Divi surclassent toute
valeur posée en classes seules (c'est ce qui gonflait l'entête à 20px).
13px = `.dj-colonne-titre` du méga-menu (dj-header.css), pour assortir.
Épinglé explicitement pour que les DEUX fenêtres l'aient à l'identique. */
html body .mini-cart-titre {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 600;
font-size: 13px !important;
line-height: 1.2 !important;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--dj-texte-fonce) !important;
margin: 0;
padding: 18px 20px 14px;
border-bottom: 1px solid var(--dj-fond-secondaire);
}
html body .mini-cart-items {
padding: 8px 10px;
}
html body .mini-cart-item {
padding: 10px;
margin-bottom: 0;
align-items: center;
transition: background .2s ease;
}
html body .mini-cart-item:hover {
background: var(--dj-fond-clair);
}
html body .mini-cart-item-image {
width: 54px;
height: 54px;
}
html body .mini-cart-item-name {
font-family: 'Lora', Georgia, serif;
font-weight: 600;
font-size: 13.5px;
line-height: 1.35;
}
html body .mini-cart-item-quantity {
color: var(--dj-rose-principal);
}
html body .mini-cart-footer {
padding: 14px 20px 18px;
border-top: 1px solid var(--dj-fond-secondaire);
}
html body .mini-cart-subtotal {
font-size: 14px;
color: var(--dj-texte-fonce);
margin-bottom: 12px;
}
html body .mini-cart-subtotal .subtotal-amount {
font-size: 16px;
}
/* Boutons : « Mon panier » en contour, « Je commande » en plein — comme la maquette.
⚠️ HAUTEUR POSÉE, jamais déduite du padding : « Voir » porte une
bordure de 1px, donc 2px de plus que « Je commande », et le flex du pied
étirait les deux à cette hauteur-là. Résultat : 47,8px ici contre 38px pour
le bouton de la wishlist. `height` + centrage flex donnent la même valeur
aux trois boutons, bordure comprise (box-sizing: border-box hérité). */
html body .mini-cart-dropdown .mini-cart-buttons .button {
display: flex !important;
align-items: center;
justify-content: center;
height: 38px;
padding: 0 8px !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 1.2px !important;
line-height: 1 !important;
text-transform: uppercase !important;
white-space: nowrap;
border-radius: 0 !important;
}
html body .mini-cart-dropdown .mini-cart-buttons .view-cart {
background: transparent !important;
color: var(--dj-texte-fonce) !important;
border: 1px solid var(--dj-rose-principal) !important;
box-shadow: none !important;
}
html body .mini-cart-dropdown .mini-cart-buttons .view-cart:hover {
border-color: var(--dj-rose-vif) !important;
background: var(--dj-fond-clair) !important;
transform: none;
}
html body .mini-cart-dropdown .mini-cart-buttons .checkout {
background: var(--dj-rose-principal) !important;
color: #fff !important;
box-shadow: none !important;
}
html body .mini-cart-dropdown .mini-cart-buttons .checkout:hover {
background: var(--dj-rose-vif) !important;
box-shadow: 0 6px 18px var(--dj-glow-rose) !important;
transform: none;
}
/* ==========================================================================
FENÊTRE WISHLIST (dropdown du compteur MoreConvert — surcharge uniquement,
on ne touche jamais au markup du plugin)
⚠️ Spécificité : le dropdown est un ENFANT de .wlfmc-counter-wrapper, donc
les règles du thème/plugin à 2-3 classes battent un sélecteur à 1 classe
même avec !important (vignettes qui débordaient sur les titres, padding
20px, titres roses — constaté en test). Parade validée en direct :
préfixe `html body` + les classes chaînées du dropdown lui-même.
========================================================================== */
html body .wlfmc-counter-items.wlfmc-counter-dropdown {
background: #fff !important;
border: 1px solid var(--dj-fond-secondaire) !important;
border-radius: 0 !important;
box-shadow: 0 30px 60px rgba(212, 165, 165, 0.25) !important; /* rosée, comme le header */
padding: 0 !important;
margin-top: 12px !important;
}
html body .wlfmc-counter-items.wlfmc-counter-dropdown .wlfmc-counter-content {
gap: 0 !important;
}
/* Entête de fenêtre, même langage que « Ma commande » (le plugin n'en a pas :
ajoutée en pur CSS) */
.wlfmc-counter-dropdown::before {
content: 'Ma wishlist';
display: block;
font-family: 'Playfair Display', Georgia, serif;
font-weight: 600;
font-size: 13px !important; /* = .mini-cart-titre et .dj-colonne-titre */
line-height: 1.2 !important;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--dj-texte-fonce) !important;
padding: 18px 20px 14px;
border-bottom: 1px solid var(--dj-fond-secondaire);
}
html body .wlfmc-counter-items.wlfmc-counter-dropdown .wlfmc-mini-wishlist-list {
padding: 8px 10px !important;
/* 370px = les 4 items du réglage plugin ENTIERS (74px + gaps —
à 320 le 4e était coupé sous le bouton, relevé) + séparateur façon
pied de fenêtre mini-panier */
max-height: 370px;
overflow-y: auto;
border-bottom: 1px solid var(--dj-fond-secondaire);
}
html body .wlfmc-counter-items.wlfmc-counter-dropdown .wlfmc-counter-item {
padding: 10px !important;
align-items: center;
border: none !important;
transition: background .2s ease;
}
html body .wlfmc-counter-items.wlfmc-counter-dropdown .wlfmc-counter-item:hover {
background: var(--dj-fond-clair);
}
.wlfmc-counter-dropdown .wlfmc-remove-from-list,
.wlfmc-counter-dropdown .wlfmc-icon-close {
color: var(--dj-rose-principal) !important;
}
/* Vignettes : 54px carrées, l'image NE DÉBORDE PLUS de son cadre.
⚠️ Le plugin impose `height:auto!important` via un sélecteur gonflé aux :not() :
`.wlfmc-counter-wrapper .wlfmc-counter-dropdown a:not(x):not(y):not(z)` = (0,5,1).
Il faut donc 5 classes + élément ci-dessous (0,5,3) — vérifié en direct :
avec moins, la vignette retombe à 30px de haut. */
html body .wlfmc-counter-items.wlfmc-counter-dropdown.wlfmc-products-counter-dropdown.wlfmc-products-counter-wishlist a.product-thumbnail {
flex: 0 0 54px !important;
width: 54px !important;
height: 54px !important;
min-width: 54px !important;
max-width: 54px !important;
overflow: hidden !important;
display: block !important;
padding: 0 !important;
}
html body .wlfmc-counter-items.wlfmc-counter-dropdown.wlfmc-products-counter-dropdown.wlfmc-products-counter-wishlist a.product-thumbnail img {
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
max-width: none !important;
object-fit: cover !important;
display: block !important;
}
html body .wlfmc-counter-items.wlfmc-counter-dropdown .wlfmc-counter-item .max-100 {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
overflow: hidden !important;
}
/* Titres : Lora taupe — écrase la couleur accent (.molti-wishlist a) et les roses du plugin */
html body .wlfmc-counter-items.wlfmc-counter-dropdown.wlfmc-products-counter-dropdown .product-name,
html body .wlfmc-counter-items.wlfmc-counter-dropdown.wlfmc-products-counter-dropdown a.product-name,
html body .wlfmc-counter-items.wlfmc-counter-dropdown.wlfmc-products-counter-dropdown .product-name a {
font-family: 'Lora', Georgia, serif;
font-weight: 600;
font-size: 13.5px !important;
line-height: 1.35;
color: var(--dj-texte-fonce) !important;
text-decoration: none;
}
/* Ligne de total : même langage que le sous-total du panier */
html body .wlfmc-counter-items.wlfmc-counter-dropdown .total-products {
padding: 0 20px 12px !important;
}
.wlfmc-counter-dropdown .wlfmc-total-title,
.wlfmc-counter-dropdown .wlfmc-total-count {
font-family: 'Lora', Georgia, serif;
font-size: 14px;
color: var(--dj-texte-fonce);
}
.wlfmc-counter-dropdown .wlfmc-total-count {
color: var(--dj-rose-vif);
font-weight: 700;
}
/* ==========================================================================
MOBILE ≤ 1024px — fenêtres en PLEIN ÉCRAN
Le tap remplace le survol : js/dj-fenetres.js pose .dj-ouvert et injecte la
barre ✕ (.dj-fenetre-fermer). L'auto-ouverture du mini-panier après ajout
(classe is-open du thème) passe aussi plein écran.
========================================================================== */
@media (max-width: 1024px) {
/* le tap est le SEUL mode d'ouverture : toute apparition « hover » du
thème/plugin est neutralisée (l'inline display:block perd contre le
!important de feuille) */
.mini-cart-dropdown:not(.dj-ouvert):not(.is-open),
html body .wlfmc-counter-items.wlfmc-counter-dropdown.wlfmc-products-counter-dropdown:not(.dj-ouvert) {
display: none !important;
}
/* ⚠️ préfixe lourd sur la wishlist : le plugin positionne son dropdown
(top/right/width 350px) en !important à 3-4 classes — constaté : ouvert
à 315px de large au lieu du plein écran avec un simple .dj-ouvert */
.mini-cart-dropdown.dj-ouvert,
.mini-cart-dropdown.is-open,
html body .wlfmc-counter-items.wlfmc-counter-dropdown.wlfmc-products-counter-dropdown.wlfmc-products-counter-wishlist.dj-ouvert {
display: flex !important;
flex-direction: column !important;
opacity: 1 !important;
visibility: visible !important;
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
height: 100dvh !important;
/* ⚠️ le thème borne le dropdown panier à max-height 500px : sans ces
deux lignes la fenêtre s'arrêtait aux 5/8 de l'écran */
max-height: none !important;
min-height: 100dvh !important;
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
transform: none !important;
z-index: 100002 !important;
}
body.dj-fenetre-ouverte {
overflow: hidden;
}
/* ⚠️ La fenêtre wishlist reste DANS le header (pas de portal, fragments
du plugin obligent) : sa colonne Divi (z:2) emprisonne son z-index et
le LOGO passait au-dessus.
Même parade que la feuille du menu : élever TOUTE la chaîne pendant
l'ouverture. */
body.dj-fenetre-ouverte .molti-header-9-10 .et_pb_row:has(.wlfmc-counter-dropdown.dj-ouvert),
body.dj-fenetre-ouverte .molti-header-9-10 .et_pb_column:has(.wlfmc-counter-dropdown.dj-ouvert),
body.dj-fenetre-ouverte .molti-header-9-10 .et_pb_module.molti-wishlist {
z-index: 100001 !important;
position: relative;
}
/* ⚠️ Le module Divi du ❤ porte un transform scale(0.9) (réglage taille
d'icône) : un ancêtre transformé devient le RÉFÉRENTIEL du
position:fixed → la fenêtre « plein écran » restait piégée dans le
module. On neutralise le transform
du module UNIQUEMENT pendant que sa fenêtre est ouverte (l'icône est
recouverte à ce moment-là, aucun effet visible). */
.et-db #et-boc .et-l .molti-header-9-10 .et_pb_module.molti-wishlist:has(.wlfmc-counter-dropdown.dj-ouvert),
.et-db #et-boc .et-l .molti-header-9-10 .et_pb_module.molti-cart-launcher:has(.mini-cart-dropdown.dj-ouvert),
.et-db #et-boc .et-l .molti-header-9-10 .et_pb_module.molti-cart-launcher:has(.mini-cart-dropdown.is-open) {
transform: none !important;
}
.dj-fenetre-fermer {
display: flex;
justify-content: flex-end;
padding: 12px 16px 0;
}
.dj-fenetre-fermer button {
width: 40px;
height: 40px;
border: 1px solid var(--dj-bordure);
border-radius: 0;
background: #fff;
font-size: 16px;
color: var(--dj-texte-fonce);
cursor: pointer;
}
/* BOUTONS COLLÉS EN BAS de l'écran : fenêtres en flex
column → la liste prend l'espace et défile, le pied reste en bas. */
.mini-cart-dropdown.dj-ouvert .mini-cart-items,
.mini-cart-dropdown.is-open .mini-cart-items {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0;
/* style.css borne la liste à 300px : « le scroll fait la moitié de la
fenêtre » — en plein écran elle prend TOUTE la place restante */
max-height: none !important;
}
.mini-cart-dropdown.dj-ouvert .mini-cart-footer,
.mini-cart-dropdown.is-open .mini-cart-footer {
margin-top: auto;
}
html body .wlfmc-counter-items.wlfmc-counter-dropdown.wlfmc-products-counter-dropdown.dj-ouvert .wlfmc-counter-content {
flex: 1 1 auto;
display: flex !important;
flex-direction: column !important;
min-height: 0;
}
/* en plein écran, la liste n'est plus bridée à 320px : elle grandit et défile */
html body .wlfmc-counter-items.wlfmc-counter-dropdown.wlfmc-products-counter-dropdown.dj-ouvert .wlfmc-mini-wishlist-list {
flex: 1 1 auto;
max-height: none !important;
overflow-y: auto;
min-height: 0;
/* 14px d'air au-dessus du trait aussi,
symétrique des 14px entre le trait et le bouton */
padding-bottom: 14px !important;
}
html body .wlfmc-counter-items.wlfmc-counter-dropdown.wlfmc-products-counter-dropdown.dj-ouvert .wlfmc-view-wishlist-link {
margin: auto 20px 18px !important; /* auto en haut = collé en bas du flex */
}
}
/* desktop : la barre ✕ (injectée par JS dès le chargement mobile, mais aussi
présente si on repasse desktop après rotation) ne s'affiche jamais */
@media (min-width: 1025px) {
.dj-fenetre-fermer {
display: none !important;
}
}
/* « Voir ma wishlist » : bouton plein rose, plus jamais taupe */
.wlfmc-counter-dropdown .wlfmc-view-wishlist-link {
display: block;
margin: 14px 20px 18px; /* 14px d'air, comme le pied du mini-panier */
padding: 11px 8px !important;
text-align: center;
background: var(--dj-rose-principal) !important;
color: #fff !important;
border: none !important;
border-radius: 0 !important;
font-family: 'Lora', Georgia, serif;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 1.2px;
text-transform: uppercase;
transition: var(--dj-transition);
}
/* LE MÊME BOUTON QUE LE MINI-PANIER, pour de vrai.
⚠️ Le `font-size: 12px !important` du bloc ci-dessus ne passait PAS : le CSS
inline du plugin (`#wlfmc-main-inline-css`) pose 14px sur
`.wlfmc-products-counter-wrapper:not(.is-elementor) .wlfmc-view-wishlist-link`
— trois classes, donc plus spécifique que nos deux, et l'!important des deux
côtés ne départage rien. `wishlist-custom.css` s'y casse les dents pareil avec
son 13px. Il faut trois classes NOUS AUSSI + `html body` pour reprendre la
main ; le bloc au-dessus est laissé tel quel, il décrit l'intention.
La hauteur est posée ici comme côté mini-panier : le plugin force
`display: flex` sur ce lien, une hauteur déduite du padding n'y tombe pas
sur la même valeur qu'un bouton en display: block. */
html body .wlfmc-counter-wrapper .wlfmc-counter-items .wlfmc-view-wishlist-link {
display: flex !important;
align-items: center;
justify-content: center;
height: 38px;
padding: 0 8px !important;
font-size: 12px !important;
line-height: 1 !important;
}
.wlfmc-counter-dropdown .wlfmc-view-wishlist-link:hover {
background: var(--dj-rose-vif) !important;
box-shadow: 0 6px 18px var(--dj-glow-rose);
}