/* ========================================================================== Les 3 Blasons — habillage de la marque sur Impreza (thème enfant). À régler d'abord dans Impreza, sans code : - Options du thème › Couleurs (couleurs « L3B » nommées), Typographie (polices hébergées), Boutons, Champs, Mise en page ; - En-têtes (« En-tête Les 3 Blasons »), Blocs réutilisables (pied de page, réassurance…), Modèles de pages (catégories, fiche produit, articles), Grilles (cartes). Ce fichier ne contient que ce que ces réglages ne couvrent pas. Sommaire 1. Jetons 2. Base 3. En-tête 4. Pied de page 5. Réassurance 6. Boutique : fil d'Ariane et filtres 7. Cartes produits 8. Encarts de la grille 9. Fiche produit 10. Accueil 11. Contact et blog 12. Page Boutique (présentation) 13. Blocs de la marque : classes utilitaires 14. Panier, commande, compte et panier latéral ========================================================================== */ /* 1. Jetons --------------------------------------------------------------- Les couleurs pointent sur les couleurs globales d'Impreza (Options du thème › Couleurs) : changer une couleur là-bas la change partout. Les polices suivent la typographie d'Impreza. */ :root { --l3b-vert: var(--color-l3b-vert, #095540); --l3b-vert-fonce: var(--color-l3b-vert-fonce, #07402F); --l3b-orange: var(--color-l3b-orange, #FF6000); --l3b-orange-texte: var(--color-l3b-orange-texte, #BF4800); /* sur-titres et petits textes sur fond clair */ --l3b-jaune: var(--color-l3b-jaune, #FFB719); --l3b-citron: var(--color-l3b-citron, #B1BC00); --l3b-dore: var(--color-l3b-dore, #B79154); --l3b-noir: var(--color-l3b-noir, #090909); --l3b-gris: var(--color-l3b-gris, #F7F7F7); --l3b-gris-ligne: var(--color-l3b-gris-ligne, #DEDEDE); --l3b-gris-texte: var(--color-l3b-gris-texte, #6B6B6B); --l3b-creme: var(--color-l3b-creme, #FFF5DF); --l3b-peche: var(--color-l3b-peche, #FFC9A3); --l3b-gris-fonce: var(--color-l3b-gris-fonce, #333333); --l3b-gris-moyen: var(--color-l3b-gris-moyen, #767676); --l3b-gris-contour: var(--color-l3b-gris-contour, #8A8A8A); --l3b-creme-clair: var(--color-l3b-creme-clair, #FEF8F0); --l3b-rayon: 20px; --l3b-titre: var(--h1-font-family, "Bricolage Grotesque"), "Arial Narrow", Arial, sans-serif; --l3b-texte: var(--font-family, "Figtree"), Arial, Helvetica, sans-serif; } /* 2. Base ----------------------------------------------------------------- */ /* Barre de défilement verticale toujours présente, comme l'ancien thème : les tailles en vw (titres des héros) et la largeur utile restent les mêmes d'une page à l'autre, même quand une page est plus courte que l'écran. */ html { overflow-x: hidden; overflow-y: scroll; scrollbar-gutter: stable; } /* place de la barre gardée quand le menu mobile bloque le défilement */ body { overflow-x: clip; } /* Fenêtre d'Impreza ouverte (ex. connexion) sur une page courte : Impreza masque la barre sans compenser sa largeur ; on la laisse en place pour que la page ne se décale pas (sur une page longue, Impreza compense lui-même). */ html.us_popup_is_opened:not([style*="--scrollbar-width"]) { scrollbar-width: auto; } /* En-tête fixe : sa place est réservée au-dessus du contenu. Impreza la met par défaut en haut de la première rangée, dont le fond passe alors sous l'en-tête : l'image de fond d'un héros placé en haut de page était cadrée sur une hauteur plus grande que la partie visible (plus zoomée qu'avec l'ancien thème). Même place, mêmes positions. */ .header_hor .l-header.pos_fixed ~ .l-main { padding-top: var(--header-height); } .header_hor .l-header.pos_fixed ~ .l-main > .l-section:first-of-type > .l-section-h, .header_hor .l-header.pos_fixed ~ .l-main > form > .l-section:first-of-type > .l-section-h { padding-top: 0; } /* Titres en Bricolage Grotesque (graisse 800) : dessin de la taille optique 14, celui de l'ancien site, qui utilisait pour cette graisse la police statique de Google Fonts. Sans cette ligne, la police variable resserre ses lettres dans les grands titres (taille optique automatique). */ h1, h2, h3, h4, h5, h6, .l3b-hero__titre { font-variation-settings: "opsz" 14; } a { text-decoration: none; } /* Contour au clavier : réglé dans Impreza (Options du thème › Général › Accessibilité clavier : vert, 3 px). Sur fond foncé (classe l3b-fond-fonce sur la rangée, la colonne ou le bloc ; pied de page), il passe en jaune pour rester visible. */ :is(.l3b-fond-fonce, .l3b-pied) :focus-visible { outline-color: var(--l3b-jaune); } /* Vague des héros et des bandeaux (forme personnalisée des rangées) : elle couvre toute la hauteur réglée dans la rangée, même sur téléphone où sa hauteur naturelle est plus petite (sinon une bande du fond reste visible dessous). */ .l-section-shape.type_custom svg { width: 100%; min-height: 100%; } /* Paiement express Stripe (Apple Pay, Google Pay, Link) sous le bouton d'achat : Impreza donne aux champs Stripe une marge intérieure pensée pour la carte bancaire de la page de paiement ; ici, elle laissait un vide de 26 px quand aucun bouton express n'est proposé. Sans marge, comme l'ancien site. (!important : celui d'Impreza en a un.) */ #wc-stripe-express-checkout-element .StripeElement { padding: 0 !important; } /* Une seule police d'icônes : Font Awesome Light, celle de l'en-tête. Le style Regular est désactivé dans Impreza (Options du thème › Icônes › Font Awesome Regular : Aucun), son fichier n'est plus chargé ; les icônes « far » qu'Impreza écrit lui-même (cœur « Ajouter aux favoris » des cartes) s'affichent donc en Light. Les croix des panneaux, réglées par Impreza en graisse 400, prennent d'elles-mêmes le dessin Light, le plus proche disponible. */ .far { font-family: "fontawesome"; font-weight: 300; } /* 3. En-tête --------------------------------------------------------------- Logo, menu, icônes, hauteurs : Impreza › En-têtes › « En-tête Les 3 Blasons ». Pour caler un élément du menu à droite (comme « Contact ») : Apparence › Menus, classe CSS « l3b-menu-droite » sur l'élément. Classe « l3b-mobile-seulement » : élément affiché seulement dans le menu mobile (ex. « Liste de souhaits »). */ /* Ombre de l'en-tête : celle de la maquette (Figma « Drop shadow » : X 0, Y 4, flou 15, noir à 25 %). */ .l-header { box-shadow: 0 4px 15px rgba(0, 0, 0, .25); } /* Marges de la rangée : celles de l'ancien en-tête, qui occupait 95 % de la fenêtre (au moins 1 222 px) avec 15 px de marge intérieure, et 15 px sous 1 222 px. Remplace les marges fixes d'Impreza (51, 45 et 15 px selon l'écran). */ .l-subheader.at_middle { padding-left: calc(15px + max(0px, min(100% - 1222px, 5%)) / 2); padding-right: calc(15px + max(0px, min(100% - 1222px, 5%)) / 2); } /* L'en-tête passe en version mobile (icônes + menu en panneau) sous 1280 px : réglage « Tablettes » de l'en-tête. */ @media (min-width: 1280px) { .l-subheader.at_middle .l-subheader-cell.at_left { flex-grow: 1; } .l-subheader.at_middle .l-subheader-cell.at_right { flex-grow: 0; } .l-subheader-cell.at_left > .l3b-menu-principal.type_desktop { flex-grow: 1; margin-right: 0; } .l3b-menu-principal.type_desktop > .w-nav-list.level_1 { display: flex; width: 100%; } .l3b-menu-principal.type_desktop .w-nav-item.l3b-menu-droite { margin-left: auto; } .l3b-menu-principal.type_desktop .w-nav-item.l3b-mobile-seulement { display: none; } } .l3b-menu-principal.type_desktop .w-nav-item.level_1:is(.current-menu-item, .current-menu-ancestor, .current-product_cat-ancestor) > .w-nav-anchor, .no-touch .l3b-menu-principal.type_desktop .w-nav-item.level_1 > .w-nav-anchor:hover { color: var(--l3b-vert); } /* D-20261021-36 : couleur seule, plus de gras (les libellés bougeaient au survol) */ .l3b-menu-principal.type_desktop .w-nav-item.level_1.l3b-menu-droite > .w-nav-anchor { font-weight: 500; color: var(--color-header-middle-text); } /* Icônes compte, favoris, panier : nues, 39 px de large chacune, sans compteur (comme l'ancien site). */ .l-subheader.at_middle .l-subheader-cell.at_right { margin-right: -10px; } /* (marges gauche et droite des trois icônes à 0 : onglet Design de chaque élément de l'en-tête, D-20261018-28) */ .l3b-entete-compte .w-dropdown-h { margin: 0; } .l3b-entete-compte .w-dropdown-item-title:empty { display: none; } .l3b-entete-compte .w-dropdown-current .w-dropdown-item::after { display: none; } .l3b-entete-compte .w-dropdown-current .w-dropdown-item i { margin-right: 0; width: auto; } .l3b-entete-compte :is(.w-popup-trigger, .w-dropdown-current .w-dropdown-item), .l3b-entete-favoris .w-favs-counter-link, .l3b-entete-panier .w-cart-link { padding-left: 10px; padding-right: 10px; color: inherit; } .l3b-entete-favoris .w-favs-counter-icon, .l3b-entete-panier .w-cart-icon { width: auto; min-width: 0; padding: 0; } .l-header :is(.w-cart-quantity, .w-favs-counter-quantity) { display: none !important; } /* Icônes : celles d'Impreza (Font Awesome Light : utilisateur, cœur, chariot ; menu : trois traits), choisies et dimensionnées dans les réglages des éléments de l'en-tête (décision de Hugues du 17/10/2026). */ /* Fenêtre « Se connecter » (icône compte, bloc réutilisable « En-tête — Connexion (panneau) », élément Connexion d'Impreza) : bouton « Se connecter » sur toute la largeur, « Mot de passe oublié ? » centré dessous, sur une ligne (Hugues, 18/10, D-20261018-26). L'élément Connexion n'a pas de réglage pour la largeur du bouton ni la place du lien. (!important : Impreza passe cette ligne en bloc sous 480 px, avec !important : lien collé au bouton, à gauche.) */ .w-form.for_login .w-form-row.for_submit { display: flex !important; flex-direction: column; align-items: stretch; gap: 14px; } .w-form.for_login .w-form-row.for_submit > * { margin-inline-end: 0; } .w-form.for_login .w-form-row.for_submit > .w-btn { width: 100%; } .w-form.for_login .w-form-row.for_submit > .w-form-row-link { align-self: center; white-space: nowrap; } /* Mobile (≤ 1279 px) : compte, panier et menu à droite, 39 px chacun (Impreza décale le menu de 12,8 px : retiré). Panneau du menu comme l'ancien site : à gauche, 300 px au plus et 80 % de l'écran, sans ombre, ligne « Fermer » en tête (élément « fermer » d'Impreza, affiché ici), lignes de 50 px en capitales séparées par un filet, « Liste de souhaits » précédée du cœur, page assombrie et immobile derrière le panneau. Entre 1 025 et 1 279 px, l'ancien menu passait sur deux lignes et débordait de l'en-tête : ici, version mobile. */ body.header_hor .l-subheader-cell.at_right .w-nav.l3b-menu-principal:last-child .w-nav-control { margin-inline-end: 0; } @media (max-width: 1279px) { /* Bouton du menu : zone de toucher de 44 px de haut (l'icône de 19 px ne bouge pas). */ .l3b-menu-principal .w-nav-control { display: flex; align-items: center; min-height: 44px; padding-left: 10px; padding-right: 10px; } .w-nav.l3b-menu-principal.type_mobile.m_layout_panel .w-nav-list.level_1 { display: flex; flex-direction: column; width: min(300px, 80vw); min-width: 0; /* Impreza impose 270 px */ max-width: none; padding: 0; box-shadow: none; transition: transform .5s cubic-bezier(.19, 1, .22, 1), visibility .5s; } .w-nav.l3b-menu-principal.type_mobile.m_layout_panel .w-nav-list.level_1 > li { flex: 0 0 auto; } .l-header .l3b-menu-principal.type_mobile .w-nav-anchor.level_1 { min-height: 50px; margin-left: 0; margin-right: 0; padding-left: 20px; padding-right: 20px; border-bottom: 1px solid rgba(0, 0, 0, .105); font-weight: 600; text-transform: uppercase; } .l-header .l3b-menu-principal.type_mobile .w-nav-anchor.level_1 .w-nav-title > i { margin-right: 7px; } /* icône du libellé (Apparence › Menus) */ .l3b-menu-principal.type_mobile .w-nav-list.level_1 > .w-nav-close { order: -1; display: flex; position: relative; align-items: center; justify-content: flex-end; gap: .3em; box-sizing: content-box; width: auto; height: 25px; padding: 20px 15px; border-bottom: 1px solid rgba(0, 0, 0, .105); font-size: 16px; line-height: 1; text-align: left; color: var(--l3b-gris-fonce); opacity: 1; } .l3b-menu-principal.type_mobile .w-nav-list.level_1 > .w-nav-close::before { font-size: 1.1em; font-weight: 300; } .l3b-menu-principal.type_mobile .w-nav-list.level_1 > .w-nav-close::after { content: "Fermer"; font-weight: 600; } .no-touch .l3b-menu-principal.type_mobile .w-nav-close:hover::before, .no-touch .l3b-menu-principal.type_mobile .w-nav-close:hover::after { opacity: .7; } .l-header::after { content: ""; position: fixed; inset: -150px 0 0; z-index: 2; background: rgba(0, 0, 0, .7); opacity: 0; visibility: hidden; transition: opacity .5s cubic-bezier(.19, 1, .22, 1), visibility .5s; } html.w-nav-open .l-header::after { opacity: 1; visibility: visible; } html.w-nav-open { overflow: hidden; } } /* 4. Pied de page ------------------------------------------------------------ Contenu : Impreza › Blocs réutilisables › « Pied de page » (logo, téléphone, adresse, liens). Coordonnées : page d'options « Les 3 Blasons » (jetons {{l3b_telephone}}…). Liens : Apparence › Menus › « Pied de page — liens » et « Pied de page — mentions ». Marges, colonnes, largeur du logo, tailles de texte, couleur des mentions et leurs paliers (1 100 et 767 px, ceux de l'ancien site ; palier « Portables » d'Impreza réglé à 1 100 px), retraits des liens des mentions (0) : réglages des éléments du bloc. */ .l3b-pied a:hover { text-decoration: underline; } .l3b-pied-mentions .w-menu a { color: inherit; } /* Mentions (bas du pied) : une ligne de texte centrée, qui passe à la ligne mot à mot comme l'ancien pied de page (Impreza met le menu en colonne sous 600 px : on le garde au fil du texte). */ .l3b-pied-mentions { display: block; text-align: center; } .l3b-pied-mentions > :is(.w-menu, .w-text) { display: inline; } .l3b-pied-mentions .w-menu .menu { display: inline !important; } .l3b-pied-mentions .w-menu .menu > li { display: inline; } .l3b-pied-mentions .w-menu li + li::before, .l3b-pied-mentions > .w-text::before { content: " - "; } /* Téléphone sur mobile : 8 px entre le picto et le texte (l'écart de l'enveloppe n'a pas de réglage par écran). */ @media (max-width: 767px) { .w-hwrapper.l3b-pied-tel { --hwrapper-gap: 8px !important; } } /* 5. Réassurance -------------------------------------------------------------- Bloc réutilisable « Réassurance (boutique) », placé en bas des modèles de la boutique et du panier. Livraison offerte : titre et seuil lus dans les réglages WooCommerce (jetons {{l3b_livraison_titre}}…). Hauteur des pictos (88 px, 72 px sur mobile) et taille des titres (28 px, 24 px sous 1 100 px) : réglages des éléments du bloc. Titres en graisse 700 : taille optique automatique (l'ancien site n'utilisait la police statique que pour la graisse 800). */ .l3b-reassurance h3 { font-variation-settings: normal; } /* 6. Boutique : fil d'Ariane et filtres ---------------------------------------- Modèle « Catégorie de produits » (Impreza › Modèles de pages) : héros, fil d'Ariane, barre des filtres, liste de produits, liens « Explorer », réassurance. Barre des filtres (maquette Figma « ENTREE - CAFES ») : enveloppe verticale « l3b-filtres » qui contient - la pilule « l3b-filtres-barre » (enveloppe horizontale) : fond blanc, arrondi, marges intérieures, hauteur et ombre réglés dans ses options de mise en forme (sans fond ni ombre sur tablettes et mobiles) ; dedans, un filtre de liste Impreza par catégorie (affiché selon la catégorie : onglet « Logique d'affichage ») ; - sous la pilule, l'élément « Réinitialiser les filtres » : valeurs choisies séparées par « / » (un clic sur une valeur la retire), « Réinitialiser × » à droite (retire tout) ; masqué tant qu'aucune valeur n'est choisie ; - la note « mouture » (cafés). La pilule prend la largeur de ses filtres : 99 px entre deux filtres (maquette), moins quand la place manque, à écarts égaux (intervalles « l3b-ecart » ajoutés par le thème enfant, functions.php ; écart maximal : --l3b-filtres-ecart ci-dessous). La ligne des valeurs et la note prennent la largeur de la pilule. Filtre oui / non (« Assemblages ») : case à cocher dans la barre, sans liste ; régions du filtre « Origine » : assets/js/l3b-filtres.js. Tablettes et mobiles (≤ 1024 px) : vue mobile native du filtre de liste (réglage « Mobiles » de l'élément : bouton « Filtres » avec le nombre de valeurs choisies, panneau plein écran), valeurs choisies centrées dessous. */ /* Fil d'Ariane (élément « Fil d'Ariane » du modèle, classe l3b-fil) : taille et interligne dans l'onglet Design de l'élément, séparateur « / » dans ses réglages, texte de la couleur du site. Ici : liens en gris moyen (vert au survol), page en cours en gras, 8 px de part et d'autre du séparateur. */ .g-breadcrumbs.l3b-fil .g-breadcrumbs-item a { color: var(--l3b-gris-moyen); } .no-touch .g-breadcrumbs.l3b-fil .g-breadcrumbs-item a:hover { color: var(--l3b-vert); } .g-breadcrumbs.l3b-fil .g-breadcrumbs-item:last-child { font-weight: 600; } .g-breadcrumbs.l3b-fil .g-breadcrumbs-separator { margin: 0 8px; padding: 0; } /* Liens « Explorer » sous la liste de produits (pages de filtres indexées, calculées par le module « SEO des filtres » ; élément « Explorer (liens SEO de la catégorie) » du modèle, code court [l3b_explorer]) : encadré blanc, liens en pastilles, aux couleurs des Options du thème. */ .l3b-explorer { margin: 48px 0 16px; padding: 24px; border: 1px solid var(--l3b-gris-ligne); border-radius: 16px; background: #fff; } .l3b-explorer__titre { margin: 0 0 12px; font-size: 22px; } .l3b-explorer__groupe { margin-top: 14px; } .l3b-explorer__groupe h3 { margin: 0 0 8px; font-size: 15px; text-transform: none; } .l3b-explorer ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .l3b-explorer li { margin: 0; } .l3b-explorer a { display: inline-block; padding: 6px 14px; border: 1px solid var(--l3b-gris-ligne); border-radius: 999px; font-size: 14px; line-height: 1.4; } .no-touch .l3b-explorer a:hover, .l3b-explorer a[aria-current] { border-color: var(--l3b-vert); color: var(--l3b-vert); } .l3b-explorer a span { opacity: .6; } /* Enveloppe : largeur de la pilule (au plus celle de la colonne), centrée. La ligne des valeurs et la note s'alignent sur elle sans l'élargir (largeur 0, puis 100 %). Écarts : 19 px sous la pilule, 14 px avant la note, 63 px entre les valeurs et les produits (maquette ; 40 px réglés dans l'enveloppe, plus 23 px ici). Largeur (fit-content ; auto sur tablettes et mobiles), largeur maximale (100 %) et centrage (marges auto) : onglet Design de l'enveloppe. */ .w-vwrapper.l3b-filtres { --l3b-filtres-ecart: 99px; } .l3b-filtres > :is(.l3b-filtres-reset, .l3b-mouture-note) { width: 0; min-width: 100%; box-sizing: border-box; } .l3b-filtres > .l3b-mouture-note { margin-top: 19px; } .l3b-filtres > .l3b-filtres-reset:not(.hidden) + .l3b-mouture-note { margin-top: 14px; } .l3b-filtres > .l3b-filtres-reset:last-child { margin-bottom: 23px; } /* Filtres dans la pilule : le filtre se resserre avec la pilule (intervalles de 99 px à 24 px). */ .l3b-filtres-barre > .w-filter { min-width: 0; } .l3b-ecart { display: none; } .w-filter.l3b-filtre.state_desktop.layout_hor .w-filter-list:has(> .l3b-ecart) { flex-wrap: nowrap; gap: 0; } .w-filter.l3b-filtre.state_desktop.layout_hor .w-filter-list > .w-filter-item { flex: 0 0 auto; } .w-filter.l3b-filtre.state_desktop.layout_hor .w-filter-list > .l3b-ecart { display: block; flex: 0 1 auto; width: var(--l3b-filtres-ecart, 99px); min-width: 24px; } /* Titres des filtres : Bricolage Grotesque 20 px, chevron fin à 8 px (maquette) ; vert quand une valeur est choisie ou au survol. */ .w-filter.l3b-filtre.state_desktop.mod_dropdown .w-filter-item-title { height: 74px; min-height: 0; padding: 0 18px 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-family: var(--l3b-titre); font-size: 20px; font-weight: 600; line-height: 74px; letter-spacing: normal; text-transform: none; color: var(--l3b-noir); transition: color .15s; } .w-filter.l3b-filtre.state_desktop.mod_dropdown .w-filter-item:is(.l3b-actif, .has_value) .w-filter-item-title, .no-touch .w-filter.l3b-filtre.state_desktop.mod_dropdown .w-filter-item-title:hover { color: var(--l3b-vert); } .l3b-filtre .w-filter-item-title > span { display: none; } /* valeurs choisies : affichées sous la pilule */ .l3b-filtre .w-filter-item-reset { display: none !important; } .w-filter.l3b-filtre.state_desktop.mod_dropdown .w-filter-item .w-filter-item-title::after { visibility: visible; top: 50%; right: 0; inset-inline-end: 0; width: 10px; height: 6px; margin: -3px 0 0; border: 0; border-radius: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat; transform: none; transition: transform .2s; } .w-filter.l3b-filtre.state_desktop.mod_dropdown .w-filter-item.expand .w-filter-item-title::after { transform: rotate(180deg); } /* Filtre oui / non (une seule valeur, ex. « Assemblages ») : case de 12 px à 5 px du titre (maquette « Blends »), cochée en vert ; un clic sur le titre coche ou décoche, sans liste (assets/js/l3b-filtres.js). */ .w-filter.l3b-filtre.state_desktop.mod_dropdown .w-filter-item.l3b-case-unique .w-filter-item-title { padding-right: 17px; } .w-filter.l3b-filtre.state_desktop.mod_dropdown .w-filter-item.l3b-case-unique .w-filter-item-title::after { width: 12px; height: 12px; margin-top: -6px; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 3px; background: transparent; -webkit-mask: none; mask: none; transform: none; } .w-filter.l3b-filtre.state_desktop.mod_dropdown .w-filter-item.l3b-case-unique:is(.l3b-actif, .has_value) .w-filter-item-title::after { border-color: var(--l3b-vert); background: var(--l3b-vert) url("data:image/svg+xml;utf8,") center / 8px no-repeat; } .w-filter.l3b-filtre.state_desktop .w-filter-item.l3b-case-unique .w-filter-item-content { display: none !important; } /* Liste déroulante des valeurs (ouverte au clic) : carte blanche à 6 px sous la pilule, cases alignées sur le titre ; celle du dernier filtre s'ouvre vers la gauche (bord droit de l'écran). */ .l3b-filtre.state_desktop.mod_dropdown .w-filter-item-content { top: calc(100% + 6px); inset-inline-start: -18px; min-width: 230px; max-width: min(340px, calc(100vw - 32px)); padding: 8px 0; border-radius: 12px; box-shadow: 0 0 10px rgba(0, 0, 0, .15); font-size: 16px; line-height: 1.3; } .l3b-filtre.state_desktop.mod_dropdown .w-filter-item:last-of-type .w-filter-item-content { inset-inline-start: auto; inset-inline-end: -18px; } .l3b-filtre .w-filter-item-value { margin: 0; } .l3b-filtre .w-filter-item-value > label, .l3b-filtre .l3b-region { display: flex; align-items: center; gap: 9px; padding: 8px 18px; color: var(--l3b-gris-moyen); cursor: pointer; } .l3b-filtre .w-filter-item-values input[type=checkbox], .l3b-filtre .l3b-region-case { appearance: none; -webkit-appearance: none; flex: 0 0 15px; width: 15px; height: 15px; margin: 0; padding: 0; border: 2px solid var(--l3b-gris-contour); border-radius: 3px; background: #fff; box-shadow: none; cursor: pointer; transition: border-color .15s, background-color .15s; } .l3b-filtre .w-filter-item-values input[type=checkbox]::before { display: none; } .l3b-filtre .w-filter-item-value:hover :is(input[type=checkbox], .l3b-region-case) { border-color: var(--l3b-vert); } .l3b-filtre .w-filter-item-values input[type=checkbox]:checked, .l3b-filtre .l3b-region-case[aria-checked="true"] { border-color: var(--l3b-vert); background: var(--l3b-vert) url("data:image/svg+xml;utf8,") center / 9px no-repeat; } .l3b-filtre .l3b-region-case[aria-checked="mixed"] { border-color: var(--l3b-vert); background: #fff linear-gradient(var(--l3b-vert), var(--l3b-vert)) center / 7px 2px no-repeat; } .l3b-filtre .w-filter-item-values input:checked ~ .w-filter-item-value-label { color: var(--l3b-vert); } /* Filtre « Origine » regroupé par région : titre de région en gras, pays en retrait. */ .l3b-filtre .l3b-region { margin-top: 6px; font-weight: 700; color: var(--l3b-vert); } .l3b-filtre .l3b-region:first-child { margin-top: 0; } .l3b-filtre .l3b-pays > label { padding-left: 38px; } /* Valeurs choisies (Figtree 18 px, à 37 px du bord de la pilule) : « Brésil / Doux / Fruité » ; un clic retire la valeur (barrée au survol). Le nom du filtre reste lu par les lecteurs d'écran. « Réinitialiser × » à droite. Police, taille, interligne, couleur, marge du haut et retraits (et leurs valeurs sur tablettes et mobiles) : onglet Design de l'élément « Réinitialiser les filtres ». */ .w-filter-reset.l3b-filtres-reset { align-items: baseline; gap: 0; } .l3b-filtres-reset :is(.w-filter-reset-single, .w-filter-reset-all).style_1 { padding: 0; border-radius: 0; background: none; color: inherit; font: inherit; line-height: inherit; text-transform: none; } .l3b-filtres-reset .w-filter-reset-single .w-btn-label::after { content: none; } /* croix d'Impreza */ .l3b-filtres-reset .w-filter-reset-single t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .l3b-filtres-reset .w-filter-reset-single + .w-filter-reset-single { margin-inline-start: .88em; } .l3b-filtres-reset .w-filter-reset-single + .w-filter-reset-single::before { content: "/"; position: absolute; top: 0; inset-inline-end: 100%; width: .88em; text-align: center; pointer-events: none; } .no-touch .l3b-filtres-reset .w-filter-reset-single.style_1:hover { background: none; color: var(--l3b-vert); text-decoration: line-through; } .w-filter-reset.l3b-filtres-reset.show_selected_values .w-filter-reset-all.style_1, .w-filter-reset.l3b-filtres-reset .w-filter-reset-all.style_1 { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; padding-inline-start: 24px; font-weight: 600; } .l3b-filtres-reset .w-filter-reset-all::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat; } .no-touch .l3b-filtres-reset .w-filter-reset-all.style_1:hover { color: var(--l3b-vert); } /* Tablettes et mobiles : bouton « Filtres » centré, valeurs choisies centrées dessous. */ @media (max-width: 1024px) { .w-filter-reset.l3b-filtres-reset { justify-content: center; row-gap: 6px; } .w-filter-reset.l3b-filtres-reset.show_selected_values .w-filter-reset-all.style_1, .w-filter-reset.l3b-filtres-reset .w-filter-reset-all.style_1 { margin-inline-start: 0; padding-inline-start: 20px; } .l3b-filtres > .l3b-mouture-note { margin-top: 14px; } } /* 7. Cartes produits ----------------------------------------------------------- Grille « Carte produit (boutique) » (Impreza › Grilles) : image, favori, catégorie, titre, prix, panier. Fond, arrondi, tailles, couleurs et positions : réglages de la grille et de ses éléments (onglet Design). Cœur : élément « Ajouter aux favoris » d'Impreza, en icône seule (libellés vides ; les lecteurs d'écran annoncent « Ajouter aux favoris ») ; produit dans les favoris : cœur plein, de la couleur principale du site. Produit en rupture : bouton panier remplacé par la mention « Rupture de stock » de WooCommerce (conditions d'affichage de la grille, sans code). Hauteur du corps (100 %), arrondi et fond gris de la photo, police du titre, marge au-dessus du prix (10 px, 7 px sur mobile) : réglages des éléments de la grille. Ici : ce que la grille ne règle pas. */ /* Photo posée sur le gris de la carte (le blanc des photos s'y fond). Toutes les cartes (demande de Hugues du 21/10, D-20261021-01) : cadre carré, photo entière et à ses proportions (ni recadrée ni étirée), centrée ; même hauteur de photo partout, donc textes toujours alignés. Cafés : visuel du sachet agrandi × 1,18 autour de son centre (seules les marges blanches du visuel sortent du cadre ; avant le 21/10 : cadre 243 × 302 et × 1,29). */ /* Mention « Rupture de stock » (21/10) : toujours sur une ligne ; sur les cartes trop étroites pour la mettre à côté du prix, elle passe entière sous le prix. */ .l3b-carte-pied { flex-wrap: wrap; row-gap: 2px; } .l3b-carte-stock { white-space: nowrap; } .l3b-carte-image :is(a, img) { display: block; } .l3b-carte-image img { mix-blend-mode: multiply; } /* largeur 100 % : réglage « Étirer » de l'élément */ .l3b-carte-image { aspect-ratio: 1 / 1; overflow: hidden; } .l3b-carte-image :is(a, img) { width: 100%; height: 100%; } .l3b-carte-image img { object-fit: contain; object-position: 50% 50%; } .w-grid-item:is(.product_cat-cafes, .product_cat-epices) .l3b-carte-image img { transform: scale(1.18); transform-origin: 50% 50%; } /* sachets des cafés et des épices */ /* Classe l3b-carte-favori (élément « Ajouter aux favoris ») : au survol de la souris, le cœur pâlit, quelle que soit sa couleur (gris moyen sur le gris de la carte, comme l'ancien site). */ .no-touch .w-btn-wrapper.l3b-carte-favori > .w-btn:hover { opacity: .65; } /* Classe l3b-carte-panier (élément « Ajouter au panier ») : bouton carré, icône seule (chariot de Font Awesome, celui de l'en-tête), Impreza ne proposant pas d'icône pour ce bouton. Couleurs, arrondi et survol : style des boutons principaux de la boutique (Options du thème › Boutons, « Vert plein (principal) ») ; côté du carré (Largeur) et taille de l'icône (Taille du texte) : onglet Design de l'élément. */ .w-grid .w-btn-wrapper.l3b-carte-panier > .button { aspect-ratio: 1; padding: 0; } .w-btn-wrapper.l3b-carte-panier > .button::before { content: "\f07a"; display: flex; align-items: center; justify-content: center; font-family: fontawesome; font-weight: 300; line-height: 1; } .w-btn-wrapper.l3b-carte-panier > .button .w-btn-label { display: none; } /* nom pour les lecteurs d'écran : celui de WooCommerce (aria-label) */ .w-btn-wrapper.l3b-carte-panier > .button .g-preloader { font-size: 1em; } .w-btn-wrapper.l3b-carte-panier > .button.loading::before { visibility: hidden; } /* Prix des listes « dès X € » (extension « Site ») : « dès » un peu plus petit. */ .price .l3b-des { margin-right: .1em; font-size: .9em; font-weight: 500; } /* 8. Encarts de la grille -------------------------------------------------------- Saisis dans la catégorie (Produits › Catégories › la catégorie, onglet « Encarts » : position, icône, sur-titre, titre, description, filtre au clic), insérés par l'extension « Site » à la place d'une carte, sur la 1re page de la liste sans filtre. D'après la maquette : carte crème de la taille d'une carte produit (même arrondi), contenu centré ; tailles proportionnelles à la largeur de la carte (unités cqi). Avec un filtre au clic, toute la carte est un lien (titre souligné au survol). Orange du sur-titre : « Orange (textes sur fond clair) », lisible. */ .w-grid-item.l3b-encart-item .w-grid-item-h { height: 100%; padding: 0; border-radius: 20px; background: var(--l3b-creme); container-type: inline-size; } .l3b-encart { display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; height: 100%; padding: 12cqi 16cqi; color: var(--l3b-vert); text-align: center; text-decoration: none; } .l3b-encart:is(a) { color: var(--l3b-vert); } .l3b-encart__icone { width: 15cqi; height: 15cqi; margin-bottom: 7cqi; object-fit: contain; } /* Icône du thème (Font Awesome au trait, choisie dans Les 3 Blasons › Encarts de la grille) : même place qu'un picto */ .l3b-encart__icone--theme { display: flex; align-items: center; justify-content: center; font-size: 12cqi; line-height: 1; color: var(--l3b-vert); } .l3b-encart__sur { font-size: max(13px, 5.4cqi); font-weight: 500; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; color: var(--l3b-orange-texte); } .l3b-encart__titre { margin: 1cqi 0 6cqi; font-family: var(--l3b-titre); font-size: 12.5cqi; font-weight: 700; font-variation-settings: "opsz" 14; line-height: 1.1; letter-spacing: -0.01em; } .l3b-encart__texte { font-size: max(13px, 5.2cqi); line-height: 1.55; } .no-touch a.l3b-encart:hover .l3b-encart__titre { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; } @container (max-width: 240px) { .l3b-encart { padding: 10cqi 8cqi; } /* Téléphone : picto d'au moins 32 px (15 % d'une carte de 175 px ne faisait que 26 px). */ .l3b-encart__icone { width: max(32px, 15cqi); height: max(32px, 15cqi); margin-bottom: 5cqi; } .l3b-encart__icone--theme { font-size: max(26px, 12cqi); } .l3b-encart__titre { margin-bottom: 4cqi; font-size: 13cqi; } .l3b-encart__texte { font-size: 12px; line-height: 1.45; } } /* 9. Fiche produit ----------------------------------------------------------------- Modèle de page « Fiche produit » (Impreza › Modèles de pages), d'après la maquette « Piste 3 » (Figma) : photo à gauche, achat à droite, accordéon, produits apparentés. Colonnes et écarts, polices, tailles, couleurs et marges des textes (titre, prix, accroche, description, indicateurs, titres de l'accordéon, « Vous aimeriez aussi ») : réglages des éléments du modèle (onglet Design de chaque élément), modifiables dans l'Éditeur visuel. Ici : ce que ces réglages ne couvrent pas — pastilles et valeurs des indicateurs, boutons de choix du formulaire d'achat de WooCommerce (Format, Mouture : extension « Site », réglages dans Les 3 Blasons › Réglages de la boutique › Fiche produit), quantité et bouton, accordéon, liste des moutures, flèches du carrousel. (sélecteurs renforcés quand les styles d'Impreza ou de WooCommerce passent sinon devant) */ /* Photo : entière, sans fond ni arrondi (les photos des produits sont sur fond blanc), comme la maquette. Miniatures (produit à plusieurs photos) : position et nombre dans Options du thème › WooCommerce. */ .l3b-fiche-photos .woocommerce-product-gallery { background: none; } /* Une seule photo : pas de place réservée aux miniatures à gauche (Impreza la réserve même sans miniature). */ .l3b-fiche-photos .woocommerce-product-gallery.type_slider.thumbpos_left:not(:has(ol)) { padding-inline-start: 0; } .l3b-fiche-photos .woocommerce-product-gallery ol > li img { border: 0; border-radius: 6px; } .l3b-fiche-photos .woocommerce-product-gallery ol > li img.flex-active { opacity: .5; } /* Hauteur de la galerie : celle de la plus grande photo, sans saut d'une photo à l'autre. (!important : le diaporama écrit sa hauteur dans la page.) */ .l3b-fiche-photos .woocommerce-product-gallery .flex-viewport { height: auto !important; } @media (max-width: 767px) { /* téléphone : photo moins haute ; le nom, le prix et le début de la description restent visibles à l'arrivée sur la page */ .l3b-fiche-photos .woocommerce-product-gallery__image img { max-height: 42vh; width: auto; margin: 0 auto; object-fit: contain; } /* Cafés : visuel « sachet » (1600 × 2200 px, sachet au centre sur fond blanc) recadré sur le sachet, sans ses marges blanches (un sachet entier, moins haut). */ .product_cat-cafes .l3b-fiche-photos .woocommerce-product-gallery__image img { width: 100%; max-height: none; aspect-ratio: 7 / 6; object-fit: cover; object-position: 50% 45%; } } /* Titre et prix sur une ligne (prix calé à droite ; l'un sous l'autre sur téléphone). Marges du titre et du prix (0) : onglet Design des éléments. */ .w-post-elm.l3b-fiche-prix { white-space: nowrap; } .l3b-fiche-prix .l3b-des { font-size: .6em; font-weight: 600; } @media (max-width: 767px) { .w-hwrapper.l3b-fiche-tete { flex-direction: column; gap: 4px; } } /* Accroche et description (textes d'Airtable). */ .l3b-fiche-accroche p { margin: 0; } .l3b-fiche-description p { margin: 0 0 10px; } .l3b-fiche-description > :last-child { margin-bottom: 0; } /* Indicateurs (Intensité, Arômes, Idéal pour) : un par ligne (enveloppe verticale du modèle, écart réglable), libellé en gras dans une colonne de 108 px comme « Format » et « Mouture » plus bas, puis pastilles ou valeurs (une valeur trop longue passe à la ligne sous les valeurs). Couleur des pastilles : classe de l'élément — l3b-indic--vert, l3b-indic--jaune, l3b-indic--citron (sinon vert). Intensité : jeton {{l3b_intensite_pastilles}} (note sur 10 en 5 pastilles) ; Arômes, Idéal pour : éléments « Taxonomie » (valeurs du produit ; la virgule entre deux valeurs est remplacée par l'écart). */ .l3b-indic { --l3b-indic: var(--l3b-vert); margin: 0; padding-left: 108px; line-height: 19px; } .w-vwrapper.l3b-fiche-indicateurs > .l3b-indic:not(:last-child) { margin-bottom: var(--vwrapper-gap); } .l3b-indic.l3b-indic--jaune { --l3b-indic: var(--l3b-jaune); } .l3b-indic.l3b-indic--citron { --l3b-indic: var(--l3b-citron); } .l3b-indic strong, .l3b-indic .w-post-elm-before { display: inline-block; box-sizing: border-box; min-width: 108px; margin: 0 0 0 -108px; padding-right: 12px; color: var(--l3b-noir); font-weight: 600; } .l3b-pastilles { display: inline-flex; gap: 6px; vertical-align: -2px; } .l3b-pastille { width: 14px; height: 14px; border-radius: 50%; background: var(--l3b-gris-ligne); } .l3b-pastille--pleine { background: var(--l3b-indic); } .l3b-pastille--demi { background: linear-gradient(90deg, var(--l3b-indic) 50%, var(--l3b-gris-ligne) 50%); } .w-post-elm.post_taxonomy.l3b-indic > b { display: none; } .w-post-elm.post_taxonomy.l3b-indic > span:not(.w-post-elm-before) { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; white-space: nowrap; } .w-post-elm.post_taxonomy.l3b-indic > span:not(.w-post-elm-before)::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--l3b-indic); } .w-post-elm.post_taxonomy.l3b-indic > span:last-child { margin-right: 0; } /* Formulaire d'achat (WooCommerce, élément « Ajouter au panier » d'Impreza) : choix en boutons, quantité, bouton. Sa largeur décide de la présentation des moutures (une ligne, ou trois par ligne sous 600 px). */ .w-post-elm.l3b-fiche-achat { container: l3b-achat / inline-size; } .l3b-fiche-achat form.cart { margin: 0; } .w-post-elm.l3b-fiche-achat table.variations { width: 100%; margin: 0; border: 0; } .w-post-elm.l3b-fiche-achat table.variations tbody { display: grid; gap: 30px; } .w-post-elm.l3b-fiche-achat table.variations tr { display: grid; grid-template-columns: 108px minmax(0, 1fr); /* libellé, puis les choix (alignés sur la maquette) */ align-items: start; border: 0; background: none; } .w-post-elm.l3b-fiche-achat table.variations :is(th, td) { display: block; padding: 0; border: 0; background: none; text-align: left; } .w-post-elm.l3b-fiche-achat table.variations th.label { padding-top: 10px; color: var(--l3b-noir); font-size: 16px; font-weight: 600; line-height: 19px; white-space: nowrap; } .w-post-elm.l3b-fiche-achat table.variations th.label label { display: inline; padding: 0; font-weight: inherit; line-height: inherit; } .w-post-elm.l3b-fiche-achat table.variations th.label label::after { content: "\00a0:"; } /* Choix avec images (mouture) : libellé au niveau des noms, sous les images (49 px + 7 px + 6 px). */ .w-post-elm.l3b-fiche-achat table.variations tr:has(.l3b-choix__option--image) th.label { padding-top: 62px; } /* Menu de WooCommerce remplacé par les boutons (il reste dans la page : c'est lui qui part avec la commande). */ .w-post-elm.l3b-fiche-achat td.value:has(> .l3b-choix) > .woocommerce-select { display: none; } .w-post-elm.l3b-fiche-achat .reset_variations { display: none !important; } /* WooCommerce l'affiche par un style écrit dans la page */ /* Boutons de choix : texte gris, choix en cours sur fond plein (orange pour le format, vert pour la mouture). */ .l3b-choix { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 21px; } .w-post-elm.l3b-fiche-achat .l3b-choix__option { display: inline-flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: 7px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--l3b-gris-texte); font-family: var(--l3b-texte); font-size: 16px; font-weight: 400; line-height: 19px; letter-spacing: normal; text-transform: none; cursor: pointer; } .l3b-choix__texte { display: block; padding: 10px; text-align: center; white-space: nowrap; transition: background-color .2s, color .2s; } .l3b-choix__option--long .l3b-choix__texte { width: min-content; white-space: normal; } /* nom long (plus de 10 lettres) : sur deux lignes */ /* Choix manquant (« Ajouter au panier » sans mouture) : message sous les choix, écrit par assets/fiche.js. */ .l3b-choix__message { margin: 10px 0 0; color: var(--l3b-orange-texte); font-size: 14px; font-weight: 600; line-height: 1.3; } .l3b-choix__image { display: block; width: 54px; height: 49px; object-fit: contain; } .no-touch .w-post-elm.l3b-fiche-achat .l3b-choix__option:not(:disabled):hover { background: none; color: var(--l3b-noir); } .w-post-elm.l3b-fiche-achat .l3b-choix__option[aria-checked="true"] .l3b-choix__texte { background: var(--l3b-orange); color: #fff; } .w-post-elm.l3b-fiche-achat .l3b-choix__option:focus-visible { outline: 0; } .w-post-elm.l3b-fiche-achat .l3b-choix__option:focus-visible .l3b-choix__texte { outline: 3px solid var(--l3b-vert); outline-offset: 2px; } .w-post-elm.l3b-fiche-achat .l3b-choix__option:disabled { cursor: default; opacity: .35; } .w-post-elm.l3b-fiche-achat .l3b-choix__option[hidden] { display: none; } /* Mouture : images au-dessus des noms, sur toute la largeur ; trois par ligne quand le formulaire a moins de 600 px. */ .l3b-choix[data-attribut="pa_mouture"] { flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: 10px 4px; } .l3b-choix[data-attribut="pa_mouture"] .l3b-choix__texte { padding: 6px 8px; } .w-post-elm.l3b-fiche-achat .l3b-choix[data-attribut="pa_mouture"] .l3b-choix__option[aria-checked="true"] .l3b-choix__texte { background: var(--l3b-vert); } /* Trait sous les choix, puis quantité et bouton. */ .w-post-elm.l3b-fiche-achat table.variations + * { margin-top: 0; } .l3b-fiche-achat .variations_form .single_variation_wrap { margin-top: 19px; padding-top: 24px; border-top: 1px solid var(--l3b-gris-ligne); } .l3b-fiche-achat .woocommerce-variation-price { display: none; } /* le prix du choix s'affiche en haut de la fiche */ .l3b-fiche-achat .woocommerce-variation-availability p { margin: 0 0 12px; font-size: 15px; } .l3b-fiche-achat .woocommerce-variation-add-to-cart, .l3b-fiche-achat form.cart:not(.variations_form) { --l3b-qte: 94px; --l3b-ecart: 16px; position: relative; display: flex; align-items: center; gap: var(--l3b-ecart); margin: 0; } /* Paiement express Stripe (Apple Pay…), dès qu'un choix complet est fait et si l'appareil en propose. Sur la ligne du bouton (réglage « Paiement express à côté du bouton », extension Site ; demande de Hugues du 17/10/2026) : « Ajouter au panier » 2/3, paiement express 1/3 ; tant que Stripe n'affiche rien, le bouton prend toute la place ; formulaire de moins de 560 px : dessous, sur toute la largeur. Sinon (réglage Non) : sous le formulaire, à 20 px. (!important : Stripe écrit sa marge dans la page.) */ .l3b-fiche-achat #wc-stripe-express-checkout-element { margin-top: 20px !important; } .l3b-fiche-achat :is(.woocommerce-variation-add-to-cart, form.cart:not(.variations_form)) #wc-stripe-express-checkout-element { flex: 0 0 calc((100% - var(--l3b-qte) - 2 * var(--l3b-ecart)) / 3); min-width: 0; margin: 0 !important; clear: none !important; } .l3b-fiche-achat :is(.woocommerce-variation-add-to-cart, form.cart:not(.variations_form)) #wc-stripe-express-checkout-element > div { flex: 1 1 100%; min-width: 0; } /* Stripe : 260 px au moins, pensé pour toute la largeur */ /* Masquée par Stripe (choix incomplet : la mouture n'est jamais présélectionnée), la case garde sa largeur, invisible et hors de la ligne : sans largeur, Stripe n'y dessine pas ses boutons, même une fois la case affichée. */ .l3b-fiche-achat :is(.woocommerce-variation-add-to-cart, form.cart:not(.variations_form)) #wc-stripe-express-checkout-element:is([style*="display:none"], [style*="display: none"]) { display: flex !important; position: absolute !important; top: 0; right: 0; width: calc((100% - var(--l3b-qte) - 2 * var(--l3b-ecart)) / 3); visibility: hidden; pointer-events: none; } .l3b-fiche-achat :is(.woocommerce-variation-add-to-cart, form.cart:not(.variations_form)) > wc-order-attribution-inputs { display: none; } /* champs cachés de Stripe : pas de place dans la ligne */ /* Quantité : style 3 de l'élément (− 1 +), sans cadre, comme la maquette. */ .w-post-elm.add_to_cart.l3b-fiche-achat .quantity { display: flex; flex: 0 0 var(--l3b-qte, 94px); align-items: center; justify-content: center; height: 44px; margin: 0; border: 0; } .w-post-elm.add_to_cart.l3b-fiche-achat .quantity input:is(.minus, .plus), .w-post-elm.add_to_cart.l3b-fiche-achat .quantity input.qty { min-height: 0; height: 44px; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--l3b-noir); font-family: var(--l3b-texte); font-size: 18px; font-weight: 600; line-height: 1; } .w-post-elm.add_to_cart.l3b-fiche-achat .quantity input:is(.minus, .plus) { width: 26px; padding: 0; } .w-post-elm.add_to_cart.l3b-fiche-achat .quantity input.qty { width: 34px; padding: 0; text-align: center; } .no-touch .w-post-elm.add_to_cart.l3b-fiche-achat .quantity input:is(.minus, .plus):hover { background: none; color: var(--l3b-gris-moyen); } /* Bouton : couleurs du style des boutons de la boutique (Options du thème) ; mesures de la maquette. */ .w-post-elm.l3b-fiche-achat .single_add_to_cart_button.button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 5px 20px; border-radius: 6px; font-size: 17px; font-weight: 500; line-height: 1.2; letter-spacing: normal; text-transform: none; } @container l3b-achat (max-width: 599px) { .l3b-choix[data-attribut="pa_mouture"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 6px; justify-items: center; } } @container l3b-achat (max-width: 559px) { .l3b-fiche-achat :is(.woocommerce-variation-add-to-cart, form.cart:not(.variations_form)):has(#wc-stripe-express-checkout-element) { flex-wrap: wrap; row-gap: 12px; } .l3b-fiche-achat :is(.woocommerce-variation-add-to-cart, form.cart:not(.variations_form)) #wc-stripe-express-checkout-element { flex-basis: 100%; } .l3b-fiche-achat :is(.woocommerce-variation-add-to-cart, form.cart:not(.variations_form)) #wc-stripe-express-checkout-element:is([style*="display:none"], [style*="display: none"]) { width: 100%; } } @media (max-width: 767px) { .w-post-elm.l3b-fiche-achat table.variations tr { grid-template-columns: 1fr; } .w-post-elm.l3b-fiche-achat table.variations th.label, .w-post-elm.l3b-fiche-achat table.variations tr:has(.l3b-choix__option--image) th.label { padding: 0 0 8px; } .l3b-fiche-achat :is(.woocommerce-variation-add-to-cart, form.cart:not(.variations_form)) { --l3b-qte: 84px; } } /* Accordéon (Quelle mouture choisir ? — cafés ; Conseils de préparation — produits qui en ont ; Livraison et retrait). Titres : taille et graisse réglées dans l'accordéon (16 px) ; la section ouverte a son titre en jaune, plus grand, comme la maquette ; filet sous chaque section, de la couleur des bordures du site (Options du thème › Couleurs). Textes : modèle de page (sections) ; livraison : bloc réutilisable « Livraison et retrait ». */ .w-tabs.accordion.l3b-fiche-onglets > .w-tabs-sections > .w-tabs-section { margin: 0; border: 0; border-bottom: 1px solid var(--color-content-border); } .w-tabs.accordion.l3b-fiche-onglets .w-tabs-section-header { gap: 12px; width: 100%; padding: 18px 0; border: 0; background: none; color: var(--l3b-noir); text-align: left; } .no-touch .w-tabs.accordion.l3b-fiche-onglets .w-tabs-section-header:hover { background: none; } .w-tabs.accordion.l3b-fiche-onglets .w-tabs-section-title { flex: 1 1 0; color: var(--l3b-noir); font-family: var(--l3b-texte); font-weight: 600; line-height: 19px; transition: color .2s; } .w-tabs.accordion.l3b-fiche-onglets .w-tabs-section.active .w-tabs-section-title { color: var(--l3b-jaune); font-family: var(--l3b-titre); font-size: 22px; font-weight: 600; font-variation-settings: "opsz" 14; line-height: 28px; } /* Chevron : icône « chevron » d'Impreza (réglage Icône de l'accordéon, à droite), en noir, aux trois quarts du texte (12 px) ; vers le bas quand la section est ouverte, vers le haut fermée, comme la maquette (Impreza fait l'inverse). */ .w-tabs.accordion.l3b-fiche-onglets > .w-tabs-sections.icon_chevron > div > .w-tabs-section-header .w-tabs-section-control { color: var(--l3b-noir); font-size: .75em; transform: rotate(180deg); } .w-tabs.accordion.l3b-fiche-onglets > .w-tabs-sections.icon_chevron > .w-tabs-section.active > .w-tabs-section-header .w-tabs-section-control { transform: rotate(0deg); } /* rotation toujours présente : elle sert de repère aux deux traits du chevron */ .w-tabs.accordion.l3b-fiche-onglets > .w-tabs-sections > .w-tabs-section > .w-tabs-section-content { padding: 5px 0 27px; } .l3b-fiche-onglets .wpb_text_column p:last-child { margin-bottom: 0; } /* Liste des moutures : nom (puce et texte verts) à gauche, conseil à droite (à 212 px du bord, comme la maquette), quand l'accordéon a plus de 440 px ; sinon l'un sous l'autre (tablettes en portrait, téléphones), comme dans l'éditeur de texte de WPBakery, où la liste reste ainsi lisible et facile à modifier (pas de conteneur). */ .w-tabs.l3b-fiche-onglets { container-type: inline-size; } .l3b-moutures, .l3b-livraison { display: grid; margin: 0; padding: 0; list-style: none; } .l3b-moutures { gap: 18px; } .l3b-moutures > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0; padding: 0; } .l3b-moutures > li > strong { position: relative; padding-left: 23px; color: var(--l3b-vert); font-family: var(--l3b-titre); font-size: 17px; font-weight: 800; font-variation-settings: "opsz" 14; line-height: 22px; } .l3b-moutures > li > strong::before { content: ""; position: absolute; top: 9px; left: 6px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .l3b-moutures li b { display: block; color: var(--l3b-noir); font-size: 16px; font-weight: 600; line-height: 19px; } .l3b-moutures li small { display: block; color: var(--l3b-noir); font-size: 14px; line-height: 17px; } .l3b-moutures li :is(b, small) { padding-left: 23px; } .l3b-livraison { gap: 10px; font-size: 15px; line-height: 1.6; } .l3b-livraison > li { margin: 0; padding: 0; } .l3b-livraison strong { color: var(--l3b-vert); font-weight: 600; } @container (min-width: 441px) { .l3b-moutures > li { grid-template-columns: 212px minmax(0, 1fr); gap: 0; } .l3b-moutures li :is(b, small) { padding-left: 0; } } /* Produits apparentés : titre et bouton « Voir tous les cafés » (réglages des éléments), carrousel « Carte produit (boutique) » ; flèches : classe l3b-carrousel (§ 10). Marges du titre (0) : onglet Design de l'élément. Celles du bouton restent ici : l'onglet Design d'un bouton règle le bouton, pas son enveloppe (0,3 rem en haut et en bas). */ .w-hwrapper.l3b-fiche-associes-tete { row-gap: 16px; } .w-hwrapper.l3b-fiche-associes-tete > .w-btn-wrapper { margin: 0; } /* bouton calé sur le haut du titre */ /* La carte suivante dépasse dans la marge de droite (maquette) ; à gauche, les cartes s'arrêtent au bord de la grille (écart des cartes : var(--gap), réglage du carrousel). La rangée coupe ce qui sort de l'écran : pas de défilement. */ .l-section.l3b-fiche-associes { overflow-x: clip; } .w-grid.l3b-fiche-associes-liste, .l3b-fiche-associes-liste .owl-stage-outer { overflow: visible; } .l3b-fiche-associes-liste .owl-stage-outer { clip-path: inset(-40px -100vw -40px var(--gap, 10px)); } @media (max-width: 767px) { /* téléphone (23/10, Hugues) : 2 cartes entières par vue, sans bout de la 3e (réglage du carrousel : 2 cartes, décalage 0) */ .l3b-fiche-associes-liste .owl-stage-outer { overflow: hidden; clip-path: none; } } /* 10. Accueil ----------------------------------------------------------------------- Page d'accueil (WPBakery), d'après la maquette Figma : héros, pavés, engagements, onglets produits, bandeau, boutique, partenaires et blog = éléments d'Impreza, réglés dans chaque élément (textes, images, tailles, couleurs, marges). Ici : ce que ces réglages ne couvrent pas, sous forme de classes à poser sur un élément. */ /* Mots en couleur dans un titre : … (aussi l3b-jaune, l3b-orange, l3b-vert). */ .l3b-citron { color: var(--l3b-citron); } .l3b-jaune { color: var(--l3b-jaune); } .l3b-orange { color: var(--l3b-orange); } .l3b-vert { color: var(--l3b-vert); } /* Classe l3b-onglets-boutons (élément Onglets ; accueil : Cafés / Thés & Tisanes) : onglets présentés comme les boutons du site (Options du thème › Boutons) : l'onglet affiché comme « Vert plein », les autres comme « Contour vert » (au survol : fond vert, texte blanc). Impreza n'a pas de réglage « style de bouton » pour les onglets : si ces boutons changent, ajuster ici (contour 2 px, coins 6 px, marges 0,85 em / 1,25 em). Taille et graisse du texte : réglages de l'élément Onglets (16 px, 600). Sélecteurs plus précis que ceux du style « Par défaut » des onglets d'Impreza, qui sinon gagnent : fond gris clair au survol (texte blanc illisible) et onglet affiché blanc avec un trait en haut. */ .w-tabs.l3b-onglets-boutons > .w-tabs-list { margin-bottom: 44px; background: none; } .w-tabs.l3b-onglets-boutons > .w-tabs-list .w-tabs-list-h { gap: 21px; } .w-tabs.style_default.l3b-onglets-boutons > .w-tabs-list .w-tabs-item { padding: .85em 1.25em; border: 0; border-radius: 6px; background: none; box-shadow: inset 0 0 0 2px var(--l3b-vert); color: var(--l3b-vert); line-height: 1.2; transition: background-color .2s, color .2s; } .w-tabs.l3b-onglets-boutons > .w-tabs-list .w-tabs-item::before, .w-tabs.l3b-onglets-boutons > .w-tabs-list .w-tabs-item::after, .w-tabs.l3b-onglets-boutons > .w-tabs-list .w-tabs-list-bar { display: none; } .w-tabs.style_default.l3b-onglets-boutons > .w-tabs-list .w-tabs-item.active, .no-touch .w-tabs.style_default.l3b-onglets-boutons > .w-tabs-list .w-tabs-item:not(.active):hover, .w-tabs.style_default.l3b-onglets-boutons > .w-tabs-list .w-tabs-item:not(.active):focus-visible { background: var(--l3b-vert); color: #fff; } /* Flèches des carrousels de produits (classe l3b-carrousel du carrousel : accueil, produits apparentés de la fiche) : carrés blancs à bordure grise, sous les cartes à droite (maquettes). Couleurs, bordure, arrondi et survol : style de bouton « Flèches des carrousels » (Options du thème › Boutons), choisi dans le carrousel (Navigation › Style des flèches) avec la taille de l'icône (24 px, soit un carré de 60 px), la position et l'écart ; flèche inactive pâlie (réglage du carrousel). Ici : la largeur du bouton, égale à sa hauteur (Impreza ne fait de carrés qu'avec ses styles « Carrés » et « Cercles », sans réglage de couleur). */ .w-grid.l3b-carrousel .owl-nav button { min-width: var(--btn-height); padding-inline: 0; } /* Logos des partenaires : 64 px de haut, entiers (48 px sur téléphone). Fond blanc de certains logos fondu dans le fond crème de la rangée (mode « produit » : le blanc disparaît, les couleurs restent). */ .l3b-accueil-logos .w-post-elm.post_image img { width: 100%; height: 64px; object-fit: contain; mix-blend-mode: multiply; } @media (max-width: 767px) { .l3b-accueil-logos .w-post-elm.post_image img { height: 48px; } } /* Bandeau image ou vidéo (modèle « L3B — Bandeau image ou vidéo pleine largeur (accueil) ») : image et vidéo se choisissent dans la rangée, sans code : Arrière-plan › Image (médiathèque) ; Arrière-plan › Slider / Vidéo = Vidéo, avec le lien du fichier (médiathèque › Copier l'URL) ; « Aucun » pour l'image seule. Vidéo masquée à 600 px et moins (réglage de la rangée) : l'image seule sur téléphone, sans téléchargement de la vidéo (extension l3b-site, inc/video-fond.php). Ici, pour toute vidéo de fond : masquée aussi quand l'appareil demande moins d'animations (réglage d'accessibilité du système) ; l'image reste. */ @media (prefers-reduced-motion: reduce) { .l-section-video { display: none !important; } } /* Cartes des articles (grille « Carte article ») : liseré et ombre légère, léger soulèvement au survol. */ .w-grid.l3b-carte-article .w-grid-item-h { box-shadow: 0 0 0 1px var(--l3b-gris-ligne), 0 4px 14px rgba(0, 0, 0, .06); transition: transform .2s, box-shadow .2s; } .no-touch .w-grid.l3b-carte-article .w-grid-item-h:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--l3b-gris-ligne), 0 10px 24px rgba(0, 0, 0, .1); } /* 11. Contact et blog --------------------------------------------------------------- Page Contact (WPBakery) : photo = fond de la colonne de gauche ; à droite, textes et formulaire Contact Form 7 (« Contact professionnels », 16416). Champs : style de champ « Formulaire de contact » (Options du thème › Champs), appliqué par la classe us-field-style_2 du cadre du formulaire ; bouton : style « Vert compact (formulaires) » (Options du thème › Boutons), appliqué par les classes w-btn et us-btn-style_7 du bouton (balise [submit] du formulaire). Ici : la disposition (classes l3b-form, l3b-form__2col, l3b-form__rgpd du formulaire). */ .l3b-form p { margin: 0 0 14px; } .l3b-form label { display: block; font-size: 13px; font-weight: 500; color: var(--l3b-noir); } .l3b-form__2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .l3b-form .wpcf7-form-control-wrap { display: block; margin-top: 4px; } .l3b-form textarea { height: auto; min-height: 96px; resize: vertical; } .l3b-form :is(input, textarea):focus-visible { outline: 0; } /* champ actif : bordure et halo du style de champ */ .l3b-form input[type="submit"] { width: 100%; } .l3b-form .l3b-form__rgpd { margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--l3b-gris-moyen); } .l3b-form .l3b-form__rgpd a, .l3b-contact-particuliers a { color: inherit; text-decoration: underline; } .l3b-form .wpcf7-spinner { display: block; margin: 8px auto 0; } .l3b-form .wpcf7-not-valid-tip { font-size: 12px; color: #c0392b; } /* rouge des erreurs (aucune couleur d'alerte dans la palette) */ .wpcf7 form .wpcf7-response-output { margin: 12px 0 0; padding: 10px 14px; border-radius: 6px; font-size: 14px; } @media (max-width: 767px) { .l3b-form__2col { grid-template-columns: 1fr; gap: 0; } } /* Photo collée au pied de page (maquette) : sur ordinateur et tablette (photo et formulaire côte à côte), la rangée Contact remonte le pied de page de la hauteur de ses vagues (80 px à 1 440 px de large, proportionnel) et le pied de page passe au-dessus, sans son fond blanc : la photo continue sous les vagues, sans bande blanche. La colonne du texte garde sous son contenu une marge égale à cette hauteur (réglage de la colonne : calc(64px + 5.556vw)), pour que la dernière ligne ne passe pas sous les vagues. (Téléphone : photo au-dessus du formulaire, rien ne change.) Marge négative sous la rangée Contact : onglet Design de la rangée (calc(-80vw / 14.4) ; 0 sur mobile). Ici : le pied de page passé au-dessus, sans fond. */ @media (min-width: 768px) { body:has(.l-section.l3b-contact) .l-footer { position: relative; z-index: 1; background: transparent; } } /* Blog : lien « En savoir plus > » des cartes (grille « Carte article (avec lien) »), souligné. */ .l3b-article-plus a { text-decoration: underline; text-underline-offset: 3px; } /* Blog et catégories (modèles « Blog — liste des articles » et « Blog — catégorie ») : catégories en pastilles sous le titre (élément Menu d'Impreza, menu « Blog — catégories » : Apparence › Menus), centrées, à la ligne si besoin. */ .l3b-blog-categories { display: flex; justify-content: center; } .l3b-blog-categories .menu { flex-wrap: wrap; justify-content: center; } .l3b-blog-categories .menu-item > a { border-radius: 999px; } /* Article (modèle « Article », D-20261018-18) : catégorie centrée dans le bandeau ; photo au format 16:9 (recadrée au centre), 4:3 sur téléphone : onglet Design de l'élément Image de l'article (Proportions), 900 px de large au plus et 40 px sous le bandeau : réglages de la rangée « photo » (D-20261018-23, D-20261018-28) ; article précédent / suivant en deux cartes. Le reste (textes, couleurs, marges, encart, « À lire aussi ») : réglages des éléments du modèle. Ligne « Classé dans » et boutons de partage retirés (Hugues, 18/10, D-20261018-27). */ .l3b-article .l3b-article-categorie { justify-content: center; } /* Précédent / suivant (D-20261018-24) : deux cartes blanches à fin contour, flèche dans un rond crème (vert au survol), sur-titre orange, titre de l'article en Bricolage sur deux lignes au plus ; au survol, contour vert et légère élévation. */ .l3b-article-navigation { gap: 20px; } .post_navigation.layout_simple.l3b-article-navigation .post_navigation-item { position: relative; display: flex; flex: 1 1 0; flex-direction: column; justify-content: center; min-height: 104px; padding: 20px 24px 20px 86px; border: 1px solid var(--l3b-gris-ligne); border-radius: 16px; background: #fff; color: var(--l3b-vert); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .post_navigation.layout_simple.l3b-article-navigation .post_navigation-item.to_next { align-items: flex-end; padding: 20px 86px 20px 24px; text-align: right; } .post_navigation.layout_simple.l3b-article-navigation .post_navigation-item-arrow { position: absolute; top: 50%; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: 0; border-radius: 50%; background: var(--l3b-creme); color: var(--l3b-vert); font-size: 17px; line-height: 1; opacity: 1; transform: translateY(-50%); transition: background-color .25s ease, color .25s ease, transform .25s ease; } /* Impreza pâlit la flèche (30 %) */ .post_navigation.layout_simple.l3b-article-navigation .post_navigation-item-arrow::before { font-size: 17px; line-height: 1; } .post_navigation.layout_simple.l3b-article-navigation .to_prev .post_navigation-item-arrow { left: 22px; right: auto; } .post_navigation.layout_simple.l3b-article-navigation .to_next .post_navigation-item-arrow { right: 22px; left: auto; } .post_navigation.layout_simple.l3b-article-navigation .post_navigation-item-meta { margin: 0 0 6px; color: var(--l3b-orange-texte); font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; } .post_navigation.layout_simple.l3b-article-navigation .post_navigation-item-title { display: -webkit-box; overflow: hidden; color: var(--l3b-vert); font-family: var(--l3b-titre); font-size: 18px; font-weight: 700; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .post_navigation.layout_simple.l3b-article-navigation .post_navigation-item-title span { color: inherit; } @media (hover: hover) { .post_navigation.layout_simple.l3b-article-navigation a.post_navigation-item:hover { border-color: var(--l3b-vert); box-shadow: var(--l3b-carte-ombre); transform: translateY(-2px); } .post_navigation.layout_simple.l3b-article-navigation a.post_navigation-item:hover .post_navigation-item-arrow { background: var(--l3b-vert); color: #fff; } .post_navigation.layout_simple.l3b-article-navigation a.to_prev:hover .post_navigation-item-arrow { transform: translate(-3px, -50%); } .post_navigation.layout_simple.l3b-article-navigation a.to_next:hover .post_navigation-item-arrow { transform: translate(3px, -50%); } } .post_navigation.layout_simple.l3b-article-navigation div.post_navigation-item:empty { visibility: hidden; } /* premier ou dernier article : pas de carte vide */ @media (max-width: 767px) { .l3b-article-navigation { flex-direction: column; gap: 10px; } .post_navigation.layout_simple.l3b-article-navigation div.post_navigation-item:empty { display: none; } .post_navigation.layout_simple.l3b-article-navigation .post_navigation-item-title { display: -webkit-box; font-size: 16px; } /* Impreza le masque sous 480 px */ /* cartes l'une sous l'autre : hauteur selon le contenu (le titre sur deux lignes n'est plus coupé) */ .post_navigation.layout_simple.l3b-article-navigation .post_navigation-item { flex: 0 0 auto; min-height: 88px; padding: 16px 18px 16px 72px; } .post_navigation.layout_simple.l3b-article-navigation .post_navigation-item.to_next { padding: 16px 72px 16px 18px; } .post_navigation.layout_simple.l3b-article-navigation .post_navigation-item-arrow { width: 40px; height: 40px; } .post_navigation.layout_simple.l3b-article-navigation .to_prev .post_navigation-item-arrow { left: 16px; } .post_navigation.layout_simple.l3b-article-navigation .to_next .post_navigation-item-arrow { right: 16px; } } /* Recette (modèle « Article — recette », attribué à la catégorie Recettes dans Articles › Catégories › Recettes, D-20261018-23) : repères en pastilles (« Préparation : 30 min »…), ingrédients dans la carte crème (collante sur ordinateur), étapes numérotées dans des ronds orange, encadré « Astuces et variantes ». Contenus : champs ACF « Recette » de l'article ; un champ vide ne s'affiche pas, et les rangées « repères » et « ingrédients et préparation » disparaissent si tous leurs champs sont vides (conditions d'affichage). */ .l3b-recette-reperes { row-gap: 10px; } .g-cols > .wpb_column.l3b-recette-ingredients { align-self: start; } /* la carte suit sa liste (et reste collante) au lieu de prendre la hauteur des étapes */ /* Pastilles des repères : contour, arrondi, fond, retraits, couleur et taille du texte (et leurs valeurs sur mobile) dans l'onglet Design de chacun des 5 champs (D-20261018-30) ; ici, la disposition de l'icône et du libellé. */ .l3b-recette-repere { display: inline-flex; align-items: center; gap: 8px; } .l3b-recette-repere > i { color: var(--l3b-orange-texte); font-size: 16px; } .l3b-recette-repere .w-post-elm-before { margin: 0; color: var(--l3b-gris-texte); font-weight: 400; } .l3b-recette-repere .w-post-elm-before::after { content: "\00a0:"; } .l3b-recette-pour .w-post-elm-before { margin: 0; } .l3b-recette-liste ul { margin: 0; padding: 0; list-style: none; } .l3b-recette-liste li { position: relative; margin: 0; padding: 10px 0 10px 24px; border-bottom: 1px dashed rgba(9, 85, 64, .25); line-height: 1.45; } .l3b-recette-liste li:last-child { border-bottom: 0; } .l3b-recette-liste li::before { content: ""; position: absolute; top: calc(10px + .45em); left: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--l3b-orange); } .l3b-recette-liste p { margin: 14px 0 2px; } .l3b-recette-etapes ol { margin: 0; padding: 0; list-style: none; counter-reset: l3b-etape; } .l3b-recette-etapes li { position: relative; min-height: 40px; margin: 0 0 22px; padding: 7px 0 0 58px; font-size: 16px; line-height: 1.65; counter-increment: l3b-etape; } .l3b-recette-etapes li:last-child { margin-bottom: 0; } .l3b-recette-etapes li p { margin: 0; } .l3b-recette-astuces .w-post-elm-before { display: block; margin: 0 0 6px; color: var(--l3b-vert); font-family: var(--l3b-titre); font-size: 18px; font-weight: 700; } .l3b-recette-astuces p { margin: 0 0 8px; } .l3b-recette-astuces p:last-child { margin-bottom: 0; } .l3b-recette-etapes li::before { content: counter(l3b-etape); position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--l3b-orange); color: var(--l3b-noir); font-family: var(--l3b-titre); font-size: 18px; font-weight: 800; line-height: 1; } @media (max-width: 767px) { .w-hwrapper.l3b-recette-reperes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } /* repères en grille de 2 sur téléphone */ .l3b-recette-repere { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; } .l3b-recette-repere > i { grid-row: span 2; } .l3b-recette-repere .w-post-elm-before { font-size: 12px; line-height: 1.2; } .l3b-recette-repere .w-post-elm-before::after { content: none; } .l3b-recette-etapes li { padding-left: 50px; font-size: 15px; } .l3b-recette-etapes li::before { width: 36px; height: 36px; font-size: 16px; } } /* 12. Page Boutique (présentation) ------------------------------------------------------------------------------ Modèle « Boutique — présentation Lens 2 » (Impreza › Modèles de pages), attribué à la page Boutique : héros, pavés, tuiles des rayons, infos pratiques, plan d'accès (dans la fenêtre « Voir le plan d'accès »), engagements et cartes « Uniquement en boutique » = éléments d'Impreza, réglés dans chaque élément (blocs de la marque, voir § 13). Seule règle propre : l'alignement des cartes « Uniquement en boutique » (classe l3b-carte-info, § 13). */ /* Page Boutique repensée (D-20261019-26) : 6 tuiles des rayons sur 3 colonnes, moins hautes sur grand écran ; questions fréquentes (accordéon, classes l3b-fiche-onglets l3b-faq) sur une colonne de lecture, question ouverte en vert (le jaune de la fiche produit est peu lisible sur fond blanc pour un titre de cette taille). */ @media (min-width: 1025px) { .l3b-boutique-rayons .w-vwrapper.l3b-tuile { aspect-ratio: 4 / 3 !important; } } /* Téléphone (22/10, Hugues : « trop espacés verticalement icônes écritures », icône Accessoires coupée) : tuiles à la hauteur de leur contenu (plus de carré), icône 40 px, 4 px entre icône, titre et sous-titre ; les deux tuiles d'une même ligne gardent la même hauteur. */ @media (max-width: 767px) { .l3b-boutique-rayons .g-cols.via_grid { align-items: stretch; } .l3b-boutique-rayons .wpb_column > .vc_column-inner { height: 100%; } .l3b-boutique-rayons .w-vwrapper.l3b-tuile { --vwrapper-gap: 4px !important; gap: 4px; height: 100%; min-height: 0; aspect-ratio: auto !important; padding: 16px 10px !important; justify-content: center; } .l3b-boutique-rayons .l3b-tuile > .w-image:not(.l3b-tuile-photo) { width: 40px !important; margin-bottom: 4px !important; } } .l3b-boutique-faq .w-tabs.l3b-faq { max-width: 860px; margin-left: auto; margin-right: auto; } .w-tabs.accordion.l3b-fiche-onglets.l3b-faq .w-tabs-section.active .w-tabs-section-title { color: var(--l3b-vert); font-size: 20px; line-height: 26px; } @media (max-width: 600px) { /* services sur 2 colonnes au téléphone : pictos et titres plus petits */ .l3b-boutique-engagements .w-image img { max-height: 64px !important; width: auto; height: auto; } .l3b-boutique-engagements h3.w-text { font-size: 20px !important; } } /* 13. Blocs de la marque : classes utilitaires ----------------------------------------------------------------------- Les blocs (pavés, tuiles, héros…) sont faits avec les éléments d'Impreza et se règlent dans leurs éléments. Ces classes ne portent que ce qu'un élément ne règle pas ; elles se posent dans le champ « Classe(s) de l'élément » (onglet Paramètres CSS) ou dans le texte (bouton « Texte » de l'éditeur). - l3b-pave-texte (bloc de texte) : paragraphes séparés de 14 px au lieu de 1,5 rem. - l3b-pave-item (paragraphe) : ligne « Ici, … » d'un pavé : 14 px, mots en gras en capitales. - l3b-tag (mot) : étiquette pleine (vert, texte blanc) ; ajouter l3b-tag--jaune pour une étiquette jaune. - l3b-fond-fonce (rangée, colonne ou bloc à fond vert ou noir) : contour au clavier jaune au lieu de vert (§ 2). */ .l3b-pave-texte p { margin: 0 0 14px; } .l3b-pave-texte p:last-child { margin-bottom: 0; } .l3b-pave-texte p.l3b-pave-item, .l3b-pave-item { margin-bottom: 18px; font-size: 14px; line-height: 1.5; } .l3b-pave-item strong { font-size: 14px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; } .l3b-tag { display: inline-block; margin-right: 6px; padding: 0 6px 1px; border-radius: 3px; background: var(--l3b-vert); color: #fff; font-weight: 700; line-height: 1.35; } .l3b-tag.l3b-tag--jaune { background: var(--l3b-jaune); color: var(--l3b-vert); } /* - l3b-carte-info (colonne) : carte d'une rangée de cartes (ex. « Uniquement en boutique » de la page Boutique), faite de 4 éléments : icône, titre, texte, mention (orange). Les cartes d'une rangée partagent les mêmes lignes (grille « subgrid ») : icônes posées en bas d'une zone de 64 px, titres, textes et mentions alignés d'une carte à l'autre, même quand un titre passe sur deux lignes ; la mention est toujours en bas. */ .g-cols > .wpb_column.l3b-carte-info { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; } .g-cols > .wpb_column.l3b-carte-info > .vc_column-inner { display: contents; } .l3b-carte-info > .vc_column-inner > .w-image:first-child, .l3b-carte-info > .vc_column-inner > .w-image:first-child > .w-image-h { display: flex; align-items: flex-end; height: 64px; } .l3b-carte-info > .vc_column-inner > .w-image:first-child img { width: auto; height: auto; max-width: 100%; max-height: 64px; } .l3b-carte-info > .vc_column-inner > .w-text:last-child { align-self: end; } /* - l3b-carrousel-deborde (carrousel de produits ou d'articles) : à droite, le carrousel va jusqu'au bord de l'écran ; la carte suivante est coupée par l'écran et non par la largeur du site, comme la maquette (Impreza n'a pas de réglage pour cela : « Décalage de l'élément suivant » montre seulement un bout de la carte suivante dans la largeur du site). À gauche, rien ne dépasse. */ .l3b-carrousel-deborde .owl-stage-outer { overflow: visible; clip-path: inset(-100vh -100vw -100vh 0); } @media (max-width: 767px) { /* téléphone (23/10, Hugues : « 2 cartes par page, pas 2,5 ») : pas de débordement, cartes entières seulement */ .l3b-carrousel-deborde .owl-stage-outer { overflow: hidden; clip-path: none; } } /* - l3b-br (retour à la ligne dans un titre,
) : gardé sur ordinateur et tablette, ignoré sur téléphone (le titre passe à la ligne de lui-même). */ @media (max-width: 767px) { .l3b-br { display: none; } } /* Tuile avec photo au survol (page Boutique, « Choisissez votre rayon » ; D-20261018-24) : sur un Bloc vertical avec lien, classe l3b-tuile ; son 1er élément est une Image (la photo du rayon, choisie dans l'élément) avec la classe l3b-tuile-photo. Au survol ou au clavier, la photo apparaît en fondu à la place de la couleur et se recadre doucement, un voile sombre garde le texte lisible, le pictogramme et les textes passent en blanc. Sur un écran tactile (pas de survol), la tuile reste colorée ; la photo n'est pas chargée sur téléphone (« Masquer sur : téléphones »). */ .w-vwrapper.l3b-tuile { overflow: hidden; isolation: isolate; } .l3b-tuile > .w-image.l3b-tuile-photo { position: absolute; inset: 0; z-index: -1; margin: 0 !important; opacity: 0; transform: scale(1.12); transition: opacity .5s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1); pointer-events: none; } .l3b-tuile > .l3b-tuile-photo .w-image-h, .l3b-tuile > .l3b-tuile-photo img { display: block; width: 100%; height: 100%; } .l3b-tuile > .l3b-tuile-photo img { object-fit: cover; } .l3b-tuile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(9, 9, 9, .48); opacity: 0; transition: opacity .5s ease; pointer-events: none; } .l3b-tuile > .w-image:not(.l3b-tuile-photo) img { transition: filter .35s ease, transform .5s cubic-bezier(.2, .7, .2, 1); } .l3b-tuile > .w-text { transition: color .35s ease; } @media (hover: hover) { .w-vwrapper.l3b-tuile:is(:hover, :focus-within) > .l3b-tuile-photo { opacity: 1; transform: scale(1); } .w-vwrapper.l3b-tuile:is(:hover, :focus-within)::after { opacity: 1; } .w-vwrapper.l3b-tuile:is(:hover, :focus-within) > .w-image:not(.l3b-tuile-photo) img { filter: brightness(0) invert(1); transform: translateY(-4px) scale(1.06); } .w-vwrapper.l3b-tuile:is(:hover, :focus-within) > .w-text { color: #fff !important; text-shadow: 0 1px 12px rgba(9, 9, 9, .35); } } @media (prefers-reduced-motion: reduce) { .l3b-tuile > .w-image.l3b-tuile-photo { transform: none; transition: opacity .25s ease; } .l3b-tuile > .w-image:not(.l3b-tuile-photo) img { transition: filter .25s ease; } .w-vwrapper.l3b-tuile:is(:hover, :focus-within) > .w-image:not(.l3b-tuile-photo) img { transform: none; } } /* 14. Panier, commande, compte et panier latéral ------------------------------------------------------------------- Pages Panier, Validation de la commande et Mon compte (WPBakery) : bandeau crème (sur-titre, titre, étapes de la commande, vague), contenu de WooCommerce sur fond crème clair, réassurance. Textes, couleurs de fond et marges : réglages des rangées et des éléments. Champs et boutons : Options du thème (Champs ; Boutons ; boutons de la boutique dans l'onglet WooCommerce). Page de confirmation : même page, rangée « Merci » affichée par la classe l3b-commande-recue de l'extension Site (voir la fin de la section ; le modèle « Commande » d'Impreza n'est pas utilisé). Disposition du panier en deux colonnes : seulement avec la mise en page « Compacte » du panier (Options du thème › WooCommerce). Icônes : jeux Font Awesome Light et Regular d'Impreza (à garder actifs). Ici : la mise en forme du contenu de WooCommerce (codes courts du panier, de la commande et du compte, sans réglages dans Impreza), par la classe de la colonne qui le contient — l3b-panier, l3b-commande, l3b-compte —, et le panier latéral de l'en-tête (classe l3b-entete-panier de l'élément Panier). */ /* Étapes de la commande (bandeau) : liste
    dans un bloc de texte ; étape en cours : classe l3b-etape-active sur son
  1. , étapes passées : l3b-etape-faite (coche). */ .l3b-etapes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; padding: 0; list-style: none; counter-reset: l3b-etape; color: var(--l3b-gris-moyen); font-size: 15px; font-weight: 600; line-height: 1.3; } .l3b-etapes li { display: flex; align-items: center; gap: 10px; margin: 0; counter-increment: l3b-etape; } .l3b-etapes li::before { content: counter(l3b-etape); display: inline-flex; flex: 0 0 32px; align-items: center; justify-content: center; box-sizing: border-box; width: 32px; height: 32px; border: 2px solid currentColor; border-radius: 50%; font-size: 14px; } .l3b-etapes li:not(:last-child)::after { content: ""; width: 36px; height: 2px; margin-left: 4px; background: currentColor; opacity: .35; } .l3b-etapes li:is(.l3b-etape-active, .l3b-etape-faite) { color: var(--l3b-vert); } .l3b-etapes li.l3b-etape-active::before { border-color: var(--l3b-vert); background: var(--l3b-vert); color: #fff; } .l3b-etapes li.l3b-etape-faite::before { content: "\f00c"; font-family: fontawesome; font-weight: 400; } .l3b-etapes a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 767px) { .l3b-etapes { gap: 8px; font-size: 13px; } .l3b-etapes li { gap: 6px; } .l3b-etapes li::before { flex-basis: 26px; width: 26px; height: 26px; font-size: 12px; } .l3b-etapes li:not(:last-child)::after { width: 12px; margin-left: 2px; } /* Sur mobile, seule l'étape en cours garde son nom (les autres : numéro ou coche ; le lien couvre toute l'étape). */ .l3b-etapes li:not(.l3b-etape-active) { position: relative; gap: 0; font-size: 0; } .l3b-etapes li:not(.l3b-etape-active):not(:last-child)::after { margin-left: 8px; } .l3b-etapes li:not(.l3b-etape-active) a { position: absolute; inset: 0; } } /* Cartes : blanc, coins de la marque, ombre verte légère (récapitulatifs : crème). */ :is(.l3b-panier, .l3b-commande, .l3b-compte, .l3b-entete-panier) { --l3b-carte-ombre: 0 2px 10px color-mix(in srgb, var(--l3b-vert) 6%, transparent); /* discrète (Hugues, 18/10 ; avant 0 8px 30px, 8 %) */ --l3b-filet: color-mix(in srgb, var(--l3b-vert) 12%, transparent); } .l3b-panier-articles > .vc_column-inner, .l3b-commande form.checkout > #customer_details, .l3b-compte .woocommerce-MyAccount-navigation, .l3b-compte .woocommerce-MyAccount-content, .l3b-compte #customer_login > .u-column1 { box-sizing: border-box; padding: 28px 32px; border-radius: var(--l3b-rayon); background: #fff; box-shadow: var(--l3b-carte-ombre); } :is(.l3b-panier, .l3b-commande, .l3b-compte) .woocommerce :is(h2, h3) { margin: 0 0 16px; } /* tailles : Typographie d'Impreza */ :is(.l3b-panier, .l3b-commande, .l3b-compte) :is(.woocommerce, .w-wc-notices) :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) { margin: 0 0 24px; border-radius: 0 12px 12px 0; /* angles droits du côté de la bordure de couleur (Hugues, 18/10) */ border-left: 4px solid var(--l3b-vert); background: #fff; color: var(--l3b-noir); box-shadow: var(--l3b-carte-ombre); } :is(.l3b-panier, .l3b-commande, .l3b-compte) :is(.woocommerce, .w-wc-notices) .woocommerce-error { border-left-color: #c0392b; } /* Toutes les alertes de WooCommerce (information, confirmation, erreur), partout sur le site : angles droits à gauche, 12 px à droite (le message « panier vide », carte sans bordure de couleur, garde ses propres angles). */ :is(.woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-notice):not(.cart-empty) { border-radius: 0 12px 12px 0; } /* Messages à l'intérieur d'une carte : à plat, sur fond crème clair. */ :is(.woocommerce-MyAccount-content, #customer_details) :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) { background: var(--l3b-creme-clair); box-shadow: none; } .woocommerce-MyAccount-content > :is(.woocommerce-info, .woocommerce-message, .woocommerce-error):last-child { margin-bottom: 0; } /* Panier : éléments d'Impreza (Tableau du panier — boutons − / + comme la fiche, mise à jour automatique —, Code promo, Total du panier) dans la rangée « L3B — Panier (articles et total) » de la page Panier : articles dans une carte blanche à gauche, total crème à droite (une colonne sur tablette et téléphone : réglages de la rangée). La rangée « L3B — Panier vide » s'affiche seule quand le panier est vide (condition d'affichage « État du panier »). Classes des colonnes : l3b-panier + l3b-panier-articles, l3b-panier-totaux ou l3b-panier-vide (D-20261018-15). Carte crème du total (fond, arrondi, retraits ; 460 px au plus, calée à droite sur tablette et mobile) et marge sous le tableau (20 px) : onglet Design des éléments « Total du panier » et « Tableau du panier » (D-20261018-28). La carte blanche des articles reste ici : réglée sur la colonne, elle prendrait la hauteur de la carte du total. */ .l3b-panier-articles > .vc_column-inner { padding-top: 8px; } .l3b-panier .w-cart-table .shop_table.cart { width: 100%; margin: 0; } .l3b-panier .w-wc-coupon-form .coupon { display: flex; flex-wrap: wrap; gap: 10px; } .l3b-panier .w-wc-coupon-form .coupon input { flex: 1 1 200px; min-width: 0; } /* Mouture et autres choix sous le nom : « Mouture : Extra fine » sur sa ligne (panier, panier latéral, commande). */ /* Grille libellé / valeur : chaque choix sur sa ligne (D-20261021-15 : l'ancien saut de ligne par un libellé de hauteur nulle faisait chevaucher « Mouture : » et la ligne suivante dès le deuxième choix, ex. coffret découverte). */ :is(.l3b-panier, .l3b-commande, .l3b-entete-panier) dl.variation { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px .3em; align-items: baseline; margin: 4px 0 0; font-size: 14px; line-height: 1.4; } :is(.l3b-panier, .l3b-commande, .l3b-entete-panier) dl.variation dt { grid-column: 1; float: none; margin: 0; padding: 0; color: var(--l3b-gris-moyen); font-weight: 400; } :is(.l3b-panier, .l3b-commande, .l3b-entete-panier) dl.variation dd { grid-column: 2; float: none; margin: 0; padding: 0; color: var(--l3b-noir); font-weight: 600; } :is(.l3b-panier, .l3b-commande, .l3b-entete-panier) dl.variation dd p { margin: 0; } /* Coffret découverte : « 10 cafés de 100 g : » puis un café par ligne, sur toute la largeur. */ :is(.l3b-panier, .l3b-commande, .l3b-entete-panier) dl.variation dt:has(+ dd .l3b-coffret-liste), :is(.l3b-panier, .l3b-commande, .l3b-entete-panier) dl.variation dd:has(.l3b-coffret-liste) { grid-column: 1 / -1; } :is(.l3b-panier, .l3b-commande, .l3b-entete-panier) dl.variation dd:has(.l3b-coffret-liste) { margin-bottom: 4px; } .l3b-coffret-liste { display: block; } .l3b-panier table.cart th { padding: 16px 10px; border: 0; border-bottom: 1px solid var(--l3b-gris-ligne); color: var(--l3b-gris-moyen); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .l3b-panier table.cart td { padding: 18px 10px; border: 0; border-bottom: 1px solid var(--l3b-gris-ligne); } .l3b-panier table.cart tr:last-child td { border-bottom: 0; } .l3b-panier td.product-thumbnail a { display: block; width: 76px; border-radius: 12px; overflow: hidden; background: var(--l3b-gris); } .l3b-panier td.product-thumbnail img { display: block; width: 76px; height: auto; mix-blend-mode: multiply; } .l3b-panier td.product-name a { color: var(--l3b-vert); font-weight: 600; } .l3b-panier td.product-subtotal { color: var(--l3b-noir); font-weight: 700; } :is(.l3b-panier, .l3b-commande, .l3b-compte) a.remove { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: none; color: var(--l3b-gris-fonce); font-size: 24px; line-height: 1; } .no-touch :is(.l3b-panier, .l3b-commande, .l3b-compte) a.remove:hover { background: none; color: var(--l3b-noir) !important; } /* comme le panier latéral */ .l3b-panier .cart_totals tr { padding: 10px 0; border-bottom: 1px solid var(--l3b-filet); } .l3b-panier .cart_totals tr.order-total { border-bottom: 0; } :is(.l3b-panier .cart_totals, .l3b-commande #order_review) tr.order-total :is(th, td strong) { color: var(--l3b-vert); font-family: var(--l3b-titre); font-size: 22px; font-variation-settings: "opsz" 14; } :is(.l3b-panier .cart_totals, .l3b-commande #order_review) tr.order-total .includes_tax { display: block; margin-top: 2px; color: var(--l3b-gris-moyen); font-family: var(--l3b-texte); font-size: 13px; font-weight: 400; } /* Panier vide : message et bouton « Retour à la boutique » dans une carte centrée. */ .l3b-panier-vide :is(.wc-empty-cart-message, .return-to-shop) { max-width: 640px; margin-inline: auto; } .l3b-panier-vide .wc-empty-cart-message { margin-block: 0; } .l3b-panier-vide .cart-empty.woocommerce-info { margin: 0; padding: 40px 24px 16px; border: 0; border-radius: var(--l3b-rayon) var(--l3b-rayon) 0 0; box-shadow: none; background: #fff; /* message en carte blanche (Impreza teinte les messages en vert) */ color: var(--l3b-vert); font-family: var(--l3b-titre); font-size: 22px; font-weight: 700; text-align: center; } .l3b-panier-vide .cart-empty.woocommerce-info::before { content: "\f07a"; display: block; position: static; margin: 0 0 12px; font-family: fontawesome; font-size: 40px; font-weight: 300; } .l3b-panier-vide .return-to-shop { margin-block: 0; padding: 8px 24px 40px; border-radius: 0 0 var(--l3b-rayon) var(--l3b-rayon); background: #fff; text-align: center; } @media (max-width: 767px) { .l3b-panier-articles > .vc_column-inner, .l3b-commande form.checkout > #customer_details, .l3b-compte .woocommerce-MyAccount-content { padding: 20px 18px; } .l3b-panier table.cart tbody tr:first-child { border-top: 0; } .l3b-panier table.cart tr:last-child { margin-bottom: 0; } } /* Validation de la commande : coordonnées dans une carte blanche, « Votre commande » et paiement dans une carte crème (colonnes d'Impreza). */ .l3b-commande form.checkout > #order_review_heading { margin: 0; padding: 28px 28px 8px; border-radius: var(--l3b-rayon) var(--l3b-rayon) 0 0; background: var(--l3b-creme); } .l3b-commande form.checkout > #order_review { padding: 8px 28px 28px; border-radius: 0 0 var(--l3b-rayon) var(--l3b-rayon); background: var(--l3b-creme); } .l3b-commande #order_review table.shop_table { margin-bottom: 20px; } .l3b-commande #order_review table.shop_table :is(th, td) { border-color: var(--l3b-filet); } /* Modes de livraison : libellé et prix sur une ligne (« Mondial Relay : 4,40 € » passait sur deux lignes à 1440 px). */ :is(.l3b-commande #order_review, .l3b-panier .cart_totals) #shipping_method label { white-space: nowrap; } /* « Livraison offerte » au-dessus des choix de livraison (l3b-site inc/panier.php ; Hugues, 18/10, D-20261018-12) : les modes gardent leur nom (Livraison à domicile, Livraison en point relais, Retrait en magasin). */ :is(.cart_totals, .woocommerce-checkout-review-order-table) tr.l3b-livraison-offerte td { width: 100%; padding: 14px 0 6px; border: 0; text-align: start; } :is(.cart_totals, .woocommerce-checkout-review-order-table) tr.l3b-livraison-offerte + tr.shipping :is(th, td) { border-top: 0; } .l3b-panier .cart_totals tr.l3b-livraison-offerte { border-bottom: 0; } .l3b-livraison-offerte__texte { display: inline-flex; align-items: center; gap: 8px; color: var(--l3b-vert); font-size: 15px; line-height: 1.4; } .l3b-livraison-offerte__texte::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.6 14.2 3.4 10l1.4-1.4 2.8 2.8 7.6-7.6 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.6 14.2 3.4 10l1.4-1.4 2.8 2.8 7.6-7.6 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat; } .l3b-livraison-offerte__texte strong { font-weight: 700; } .l3b-livraison-offerte__texte .amount { font-weight: 700; white-space: nowrap; } /* Choix de livraison : nom à gauche, prix calculé à droite, alignés (l3b-site inc/panier.php ; Hugues, 18/10). */ :is(.cart_totals, #order_review) #shipping_method { width: 100%; } :is(.cart_totals, #order_review) #shipping_method li { display: flex; align-items: center; gap: 8px; } :is(.cart_totals, #order_review) #shipping_method li > input { flex: none; margin: 0; } :is(.cart_totals, #order_review) #shipping_method li > label { display: flex; flex: 1; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 0; margin: 0; } .l3b-mode__nom { white-space: nowrap; } /* une seule ligne (Hugues, 25/10) */ @media (max-width: 359px) { .l3b-mode__nom { min-width: 0; white-space: normal; } } .l3b-mode__prix { flex: none; font-weight: 700; text-align: end; white-space: nowrap; } .l3b-mode__prix--offert { color: var(--l3b-vert); } /* Choix de livraison et de paiement : le choix sélectionné sur fond orange de la charte (Hugues, 18/10). */ :is(.woocommerce-cart, .woocommerce-checkout) :is(#shipping_method, .wc_payment_methods) input[type="radio"]:checked { border-color: var(--l3b-orange); background-color: var(--l3b-orange); } .l3b-commande #payment { padding: 22px 24px; border-radius: 14px; background: #fff; } /* contenu décollé du bord de la carte */ .l3b-commande #payment .place-order .button { width: 100%; } /* Case des conditions générales : la case à gauche, l'astérisque à la suite du texte. */ .l3b-commande .woocommerce-terms-and-conditions-wrapper label.checkbox { display: block; position: relative; padding-left: 30px; } .l3b-commande .woocommerce-terms-and-conditions-wrapper label.checkbox > input { position: absolute; left: 0; top: .2em; margin: 0; } @media (max-width: 767px) { .l3b-commande form.checkout > #order_review_heading { padding: 22px 18px 6px; } .l3b-commande form.checkout > #order_review { margin: 0; padding: 6px 18px 22px; } /* Impreza la colle aux bords sous 480 px */ .l3b-commande form.checkout > #customer_details { margin-bottom: 20px; } /* cartes l'une sous l'autre : un espace entre elles */ .l3b-commande #payment { padding: 18px 16px; } } /* Formulaires mis en boîte par Impreza (connexion, inscription, mot de passe perdu ; code promo et connexion de la page de commande) : aux couleurs des cartes ; dans les cartes de connexion et d'inscription, sans seconde boîte. */ :is(.l3b-compte, .l3b-commande) form:is(.login, .register, .lost_reset_password, .checkout_coupon) { border-radius: var(--l3b-rayon); background: #fff; box-shadow: var(--l3b-carte-ombre); } .l3b-compte #customer_login form { margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; } /* Mon compte : connexion (carte blanche) et inscription (carte crème) côte à côte ; une fois connecté, menu à gauche (icônes de Font Awesome, rubrique ouverte en vert) et contenu à droite. */ .l3b-compte #customer_login > .u-column2 { box-sizing: border-box; padding: 28px 32px; border-radius: var(--l3b-rayon); background: var(--l3b-creme); } /* Connecté : menu (260 px) et contenu côte à côte, à la place des colonnes de 20 % et 75 % d'Impreza. */ .l3b-compte .woocommerce:has(> .woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; } .l3b-compte .woocommerce > :is(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) { float: none; width: auto; margin: 0; } .l3b-compte .woocommerce-MyAccount-navigation { padding: 12px; } .l3b-compte .woocommerce-MyAccount-navigation ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .l3b-compte .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; border: 0; } .l3b-compte .woocommerce-MyAccount-navigation li a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; color: var(--l3b-noir); font-weight: 600; line-height: 1.3; transition: background-color .2s, color .2s; } .l3b-compte .woocommerce-MyAccount-navigation li a::before { flex: 0 0 20px; color: var(--l3b-vert); font-family: fontawesome; font-weight: 300; text-align: center; } .l3b-compte .woocommerce-MyAccount-navigation-link--dashboard a::before { content: "\f015"; } .l3b-compte .woocommerce-MyAccount-navigation-link--orders a::before { content: "\f290"; } .l3b-compte .woocommerce-MyAccount-navigation-link--downloads a::before { content: "\f019"; } .l3b-compte .woocommerce-MyAccount-navigation-link--edit-address a::before { content: "\f3c5"; } .l3b-compte .woocommerce-MyAccount-navigation-link--payment-methods a::before { content: "\f09d"; } .l3b-compte .woocommerce-MyAccount-navigation-link--edit-account a::before { content: "\f007"; } .l3b-compte .woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "\f2f5"; } .no-touch .l3b-compte .woocommerce-MyAccount-navigation li:not(.is-active) a:hover { background: var(--l3b-creme); } .l3b-compte .woocommerce-MyAccount-navigation li.is-active a { background: var(--l3b-vert); color: #fff; } .l3b-compte .woocommerce-MyAccount-navigation li.is-active a::before { color: inherit; } .l3b-compte .woocommerce-MyAccount-content table.shop_table :is(th, td) { padding: 14px 10px; border-color: var(--l3b-gris-ligne); } .l3b-compte .woocommerce-Addresses .woocommerce-Address { box-sizing: border-box; padding: 20px 22px; border-radius: 14px; background: var(--l3b-creme-clair); } .l3b-compte .woocommerce-MyAccount-content mark { padding: 0 4px; border-radius: 4px; background: var(--l3b-creme); color: var(--l3b-vert); font-weight: 600; } @media (max-width: 767px) { .l3b-compte .woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-columns: minmax(0, 1fr); gap: 20px; } .l3b-compte #customer_login > :is(.u-column1, .u-column2) { padding: 20px 18px; } .l3b-compte .woocommerce-MyAccount-navigation ul { gap: 2px; } .l3b-compte .woocommerce-MyAccount-navigation li a { padding: 10px 12px; } } /* Panier latéral de l'en-tête (élément Panier, mise en page « Panneau à droite ») : fond crème clair, titre « Votre panier » et nombre d'articles (extension Site), produits en cartes, sous-total en vert ; boutons : styles de la boutique (Options du thème). */ .l3b-entete-panier .w-cart-content { width: min(380px, 100vw); padding: 28px 24px 24px; background: var(--l3b-creme-clair); line-height: 1.5; } .l3b-entete-panier .w-cart-closer { color: var(--l3b-vert); } .l3b-mini-panier__titre { margin: 0 0 18px; padding-right: 44px; color: var(--l3b-vert); font-family: var(--l3b-titre); font-size: 26px; font-weight: 700; font-variation-settings: "opsz" 14; line-height: 1.2; } .l3b-mini-panier__nombre { display: block; margin-top: 2px; color: var(--l3b-gris-moyen); font-family: var(--l3b-texte); font-size: 15px; font-weight: 500; } /* à la ligne, sous « Votre panier » */ .l3b-entete-panier ul.woocommerce-mini-cart { display: grid; grid-auto-rows: max-content; align-content: start; gap: 10px; margin-inline: -6px; padding: 2px 6px 16px; } /* place pour l'ombre des cartes (liste à défilement d'Impreza) ; rangées à la hauteur de leur contenu, sinon les cartes hautes (coffret) sont coupées au lieu de faire défiler la liste (D-20261021-15) */ .l3b-entete-panier li.woocommerce-mini-cart-item { min-height: 64px; padding: 12px 44px 12px 12px; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--l3b-vert) 7%, transparent); } .l3b-entete-panier li.woocommerce-mini-cart-item img { margin-right: 12px; border-radius: 10px; object-fit: contain; } .l3b-entete-panier li.woocommerce-mini-cart-item > a:not(.remove) { padding-right: 0; color: var(--l3b-vert); font-size: 15px; font-weight: 600; line-height: 1.3; } .l3b-entete-panier li.woocommerce-mini-cart-item .quantity { margin-top: 4px; color: var(--l3b-gris-moyen); font-size: 14px; } .l3b-entete-panier li.woocommerce-mini-cart-item .quantity .amount { margin-left: .25em; color: var(--l3b-noir); font-weight: 700; } /* Boutons − / + discrets en bas à droite de chaque article (extension Site, inc/panier.php ; Hugues, 18/10). */ .l3b-qte-mini { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .l3b-qte-mini > .quantity { margin-top: 0 !important; } .l3b-qte-mini__boutons { display: inline-flex; gap: 6px; margin-left: auto; } .l3b-qte-mini__bouton { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 26px; height: 26px; padding: 0; border: 1px solid var(--l3b-gris-ligne); border-radius: 50%; background: #fff; color: var(--l3b-vert); font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer; } .no-touch .l3b-qte-mini__bouton:not(:disabled):hover { border-color: var(--l3b-vert); } .l3b-qte-mini__bouton:disabled { opacity: .35; cursor: default; } .l3b-qte-mini__bouton:focus-visible { outline: 2px solid var(--l3b-vert); outline-offset: 2px; } /* Croix « retirer » : seule, gris foncé, plus foncée au survol (sans rond de couleur, demande de Hugues du 18/10). */ .l3b-entete-panier li.woocommerce-mini-cart-item a.remove { top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: none; color: var(--l3b-gris-fonce); font-size: 22px; line-height: 1; } .no-touch .l3b-entete-panier li.woocommerce-mini-cart-item a.remove:hover { background: none; color: var(--l3b-noir); } .l3b-entete-panier .woocommerce-mini-cart__total { display: flex; align-items: baseline; justify-content: space-between; margin: 0; padding: 16px 0; border-top: 1px solid var(--l3b-filet); } .l3b-entete-panier .woocommerce-mini-cart__total strong { font-weight: 600; } .l3b-entete-panier .woocommerce-mini-cart__total .amount { color: var(--l3b-vert); font-family: var(--l3b-titre); font-size: 24px; font-weight: 700; font-variation-settings: "opsz" 14; } .l3b-entete-panier .woocommerce-mini-cart__buttons { display: grid; gap: 10px; } .l3b-entete-panier .woocommerce-mini-cart__buttons .button { width: 100%; margin: 0; } .l3b-entete-panier .woocommerce-mini-cart__empty-message { margin: 24px 0 0; color: var(--l3b-gris-moyen); text-align: center; } .l3b-entete-panier .woocommerce-mini-cart__empty-message::before { content: "\f07a"; display: block; margin-bottom: 10px; color: var(--l3b-vert); font-family: fontawesome; font-size: 36px; font-weight: 300; } /* Page de confirmation (même page, adresse « commande reçue ») : bandeau « Merci pour votre commande ! » à la place de « Finaliser ma commande » (classes des rangées : l3b-si-commande, l3b-si-commande-recue ; classe de la page l3b-commande-recue posée par l'extension Site), récapitulatif de la commande dans une carte. */ body:not(.l3b-commande-recue) .l-section.l3b-si-commande-recue, body.l3b-commande-recue .l-section.l3b-si-commande { display: none; } .l3b-commande .woocommerce-order { box-sizing: border-box; padding: 32px; border-radius: var(--l3b-rayon); background: #fff; box-shadow: var(--l3b-carte-ombre); } @media (max-width: 767px) { .l3b-commande .woocommerce-order { padding: 20px 18px; } } .l3b-commande .woocommerce-thankyou-order-received { margin: 0 0 24px; color: var(--l3b-vert); font-family: var(--l3b-titre); font-size: 24px; font-weight: 700; font-variation-settings: "opsz" 14; } .l3b-commande ul.woocommerce-order-overview { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 32px; padding: 0; list-style: none; } .l3b-commande ul.woocommerce-order-overview li { flex: 1 1 160px; margin: 0; padding: 14px 16px; border: 0; border-radius: 12px; background: var(--l3b-creme); color: var(--l3b-gris-moyen); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; } .l3b-commande ul.woocommerce-order-overview li strong { display: block; margin-top: 4px; color: var(--l3b-vert); font-size: 16px; letter-spacing: 0; text-transform: none; } /* 15. Produits en rupture (demande de Hugues du 19/10/2026) --------------------------------------------------------- Affichés après les produits disponibles (extension l3b-site, réglage « Produits en stock d'abord »), sans bouton d'achat (logique d'affichage d'Impreza sur _stock_status), photo en noir et blanc quand le réglage « Produits en rupture en noir et blanc » est sur Oui (classe l3b-ruptures-nb du body). */ .l3b-ruptures-nb .w-grid-item.outofstock img, .l3b-ruptures-nb.l3b-fiche-rupture .w-post-elm.product_gallery img, .l3b-ruptures-nb.l3b-fiche-rupture .woocommerce-product-gallery img { filter: grayscale(1); } .l3b-ruptures-nb .w-grid-item.outofstock img { opacity: .85; } /* 16. Coffret découverte sur-mesure (D-20261019-16) ------------------------------------------------------------- Bouton [l3b_coffret], bandeau [l3b_coffret type="carte"], encart de grille (Les 3 Blasons › Encarts de la grille, « Au clic » : Ouvrir le coffret découverte) et bouton de la fiche du coffret : ils ouvrent la fenêtre du coffret (extension Site, inc/coffret.php ; la fenêtre a sa propre feuille, assets/coffret.css, chargée au premier clic). Visuel : réglage « Visuel des boutons » (Les 3 Blasons › Coffret découverte), sachets en éventail sur fond transparent, posé sur le vert uni de la marque (plus de halo en dégradé depuis le 20/10/2026, D-20261020-01). */ .l3b-coffret-visuel { display: block; width: 100%; height: auto; } /* Encart de grille : carte grise des cartes produit, bordée de vert (demande de Hugues du 21/10, D-20261021-01 ; carte verte pleine avant). Elle ne fixe jamais la hauteur de la rangée : contenu posé par-dessus, visuel réduit si la place manque ; seule sur sa rangée, elle reste carrée. */ .w-grid-item.l3b-encart-item--coffret .w-grid-item-h { position: relative; overflow: hidden; background: var(--l3b-gris); box-shadow: inset 0 0 0 2px var(--l3b-vert); } .w-grid-item.l3b-encart-item--coffret .w-grid-item-h::before { content: ""; display: block; padding-top: 100%; } .w-grid-item.l3b-encart-item--coffret .l3b-encart--coffret { position: absolute; inset: 0; } .l3b-encart.l3b-encart--coffret { justify-content: flex-start; padding: 5cqi 9cqi 9cqi; background: transparent; color: var(--l3b-vert); } .l3b-encart.l3b-encart--coffret:is(a) { color: var(--l3b-vert); } .l3b-coffret-encart__visuel { display: block; width: 114%; margin: 0 -7% 2cqi; transition: transform .3s ease; } .l3b-encart--coffret .l3b-coffret-encart__visuel { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; min-height: 0; } .l3b-encart--coffret .l3b-coffret-encart__visuel img { width: 100%; height: 100%; object-fit: contain; transform: translateX(4%); } /* sachets un peu décalés vers la droite (21/10) */ /* Carte carrée : titre sur deux lignes et sans la phrase de détail (elle est dans la fenêtre), pour laisser la place aux sachets. */ .l3b-encart--coffret .l3b-encart__titre { font-size: 10.5cqi; text-wrap: balance; } .l3b-encart--coffret .l3b-encart__texte { display: none; } .no-touch a.l3b-encart--coffret:hover .l3b-coffret-encart__visuel { transform: scale(1.04) rotate(-1deg); } .l3b-encart--coffret .l3b-encart__sur { color: var(--l3b-vert); } /* jaune illisible sur le gris : vert (21/10) */ .l3b-encart--coffret .l3b-encart__titre { margin-bottom: 3cqi; color: var(--l3b-vert); } .l3b-encart--coffret .l3b-encart__texte { color: var(--l3b-gris-texte); } .l3b-coffret-encart__pied { display: flex; align-items: center; justify-content: center; gap: 5cqi; margin-top: auto; padding-top: 6cqi; } .l3b-coffret-encart__prix { font-family: var(--l3b-titre); font-size: max(18px, 9cqi); font-weight: 700; line-height: 1; color: var(--l3b-vert); } .l3b-coffret-encart__bouton { padding: max(9px, 3cqi) max(16px, 7cqi); border-radius: 999px; background: var(--l3b-jaune); /* jaune à la place de l'orange (Hugues, 21/10) */ font-size: max(13px, 5.4cqi); font-weight: 700; line-height: 1.2; color: var(--l3b-vert); transition: background .15s, color .15s; } .no-touch a.l3b-encart--coffret:hover .l3b-encart__titre { text-decoration: none; } .no-touch a.l3b-encart--coffret:hover .l3b-coffret-encart__bouton { background: var(--l3b-vert); color: var(--l3b-jaune); } a.l3b-encart--coffret:focus-visible { outline: 3px solid var(--l3b-orange); outline-offset: -3px; border-radius: 20px; } .l3b-coffret-encart__fleche { display: none; } @container (max-width: 240px) { .l3b-encart.l3b-encart--coffret { padding: 4cqi 7cqi 8cqi; } .l3b-encart--coffret .l3b-encart__texte { display: none; } /* Carte étroite (téléphone) : prix à gauche, simple flèche à droite, comme le bouton panier des cartes produit */ .l3b-coffret-encart__pied { justify-content: space-between; gap: 8px; width: 100%; } .l3b-coffret-encart__bouton { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border-radius: 6px; } .l3b-coffret-encart__libelle { display: none; } .l3b-coffret-encart__fleche { display: block; width: 20px; height: 20px; } } /* Encart seul ([l3b_coffret type="encart"]), hors grille : largeur d'une carte */ .l3b-coffret-encart-seul { max-width: 340px; } .l3b-coffret-encart-seul .w-grid-item { width: 100%; padding: 0; } .l3b-coffret-encart-seul .w-grid-item-h { aspect-ratio: 3 / 4.4; } /* Bandeau [l3b_coffret type="carte"] */ .l3b-coffret-carte { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 20px 40px; overflow: hidden; padding: 36px 52px 36px 28px; border-radius: var(--l3b-rayon); background: var(--l3b-vert); color: var(--l3b-creme); text-align: left; } .l3b-coffret-carte::before { content: ""; position: absolute; left: -6%; bottom: -58%; z-index: -1; width: 56%; aspect-ratio: 1; border-radius: 50%; background: var(--l3b-jaune); } .l3b-coffret-carte__visuel .l3b-coffret-visuel { max-width: 560px; margin-inline: auto; } .l3b-coffret-carte .l3b-coffret-carte__sur { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; color: var(--l3b-jaune); } .l3b-coffret-carte .l3b-coffret-carte__titre { margin: 0 0 12px; padding: 0; font-family: var(--l3b-titre); font-size: clamp(28px, 3.2vw, 44px); font-weight: 700; font-variation-settings: "opsz" 14; line-height: 1.06; letter-spacing: -.01em; color: #fff; } .l3b-coffret-carte .l3b-coffret-carte__texte { max-width: 470px; margin: 0 0 24px; font-size: 17px; line-height: 1.5; color: color-mix(in srgb, var(--l3b-creme) 92%, transparent); } .l3b-coffret-carte__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; } .l3b-coffret-carte__prix { font-family: var(--l3b-titre); font-size: 36px; font-weight: 700; line-height: 1; color: var(--l3b-jaune); } .l3b-coffret-carte .w-btn.l3b-coffret-bouton { border-color: var(--l3b-jaune); background: var(--l3b-jaune); color: var(--l3b-vert); } /* jaune à la place de l'orange (21/10) */ .no-touch .l3b-coffret-carte .w-btn.l3b-coffret-bouton:hover { border-color: #fff; background: #fff; color: var(--l3b-vert); } @media (max-width: 767px) { .l3b-coffret-carte { grid-template-columns: 1fr; padding: 22px 20px 30px; text-align: center; } .l3b-coffret-carte::before { top: -18%; bottom: auto; left: 50%; width: 92%; transform: translateX(-50%); } .l3b-coffret-carte .l3b-coffret-carte__texte { margin-inline: auto; font-size: 16px; } .l3b-coffret-carte__pied { justify-content: center; } } /* Fiche du produit coffret : bouton pleine largeur à la place du formulaire d'achat */ .l3b-coffret-fiche { margin-bottom: 8px; } .l3b-coffret-fiche .w-btn.l3b-coffret-bouton { display: flex; justify-content: center; width: 100%; min-height: 54px; font-size: 16px; } .l3b-coffret-fiche__aide { margin: 10px 0 0; font-size: 14px; color: var(--l3b-gris-texte); } /* 17. Retrait en boutique uniquement (D-20261019-23, demande de Hugues du 19/10/2026) ------------------------------ Étiquette sur la carte (inc/retrait.php, listes d'Impreza) et encadré de la fiche, au-dessus du bouton d'achat. */ .w-grid-item-h:has(> .l3b-retrait-etiquette) { position: relative; } .l3b-retrait-etiquette { position: absolute; z-index: 3; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 64px); padding: 4px 10px 4px 8px; border-radius: 12px; background: var(--l3b-vert); color: #fff; font-family: var(--l3b-texte); font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; /* une seule ligne (21/10) */ pointer-events: none; } .l3b-retrait-etiquette svg { flex: none; } /* Cartes (21/10) : article à retirer en boutique = icône boutique (Font Awesome « store ») à la place du chariot. */ .l3b-retrait-seul .w-btn-wrapper.l3b-carte-panier > .button::before { content: "\f54e"; } /* Bouton jaune léger (le crème de l'encadré « Retrait en boutique uniquement » de la fiche), icône verte (demandes de Hugues du 21/10, D-20261021-01) : on ne le confond pas avec le panier vert. */ .w-grid .l3b-retrait-seul .w-btn-wrapper.l3b-carte-panier > .button { border: 1px solid color-mix(in srgb, var(--l3b-jaune) 45%, var(--l3b-creme)); background: var(--l3b-creme); color: var(--l3b-vert); } .no-touch .w-grid .l3b-retrait-seul .w-btn-wrapper.l3b-carte-panier > .button:hover { border-color: var(--l3b-vert); background: var(--l3b-vert); color: var(--l3b-creme); } .w-grid .l3b-retrait-seul .w-btn-wrapper.l3b-carte-panier > .button::before { color: var(--l3b-vert); } .no-touch .w-grid .l3b-retrait-seul .w-btn-wrapper.l3b-carte-panier > .button:hover::before { color: var(--l3b-creme); } .l3b-retrait-fiche { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; padding: 14px 16px; border-left: 4px solid var(--l3b-vert); background: var(--l3b-creme); color: var(--l3b-gris-fonce); } .l3b-retrait-fiche svg { flex: none; margin-top: 1px; color: var(--l3b-vert); } .l3b-retrait-fiche p { margin: 0; font-size: 15px; line-height: 1.5; } .l3b-retrait-fiche strong { display: block; margin-bottom: 2px; color: var(--l3b-vert); } @media (max-width: 599px) { .l3b-retrait-etiquette { top: 10px; left: 10px; padding: 3px 8px 3px 6px; font-size: 11px; } } .l3b-retrait-ligne td { padding: 0 0 12px !important; border: 0 !important; } .l3b-retrait-panier { padding: 12px 14px; border-left: 4px solid var(--l3b-vert); background: var(--l3b-creme); font-size: 14px; line-height: 1.45; color: var(--l3b-gris-fonce); text-align: left; } .l3b-retrait-panier strong { display: block; margin-bottom: 2px; color: var(--l3b-vert); } /* Fil d'Ariane en haut des pages, de la page Boutique, des fiches produits et du blog (D-20261020-06 ; blocs réutilisables « L3B — Fil d'Ariane », affichés par l'extension l3b-site, inc/fil-ariane.php). Retour à la ligne des noms longs sur téléphone. */ .l3b-fil-ligne .g-breadcrumbs.l3b-fil { flex-wrap: wrap; row-gap: 2px; } .l3b-fil-ligne .g-breadcrumbs.l3b-fil .g-breadcrumbs-item { min-width: 0; overflow-wrap: anywhere; } /* Fil d'Ariane (suite, D-20261020-06) : même largeur que les fiches produits et le blog (1300 px), et moins d'espace entre le fil et le haut de la fiche ou du blog (leur marge haute servait à les écarter de l'en-tête). */ body:is(.single-product, .blog, .category, .tag) .l3b-fil-ligne > .l-section-h { max-width: 1300px; } .l3b-fil-ligne ~ section:is(.l3b-fiche, .l3b-blog) { padding-top: 16px !important; } @media (max-width: 600px) { .l3b-fil-ligne ~ section:is(.l3b-fiche, .l3b-blog) { padding-top: 4px !important; } } /* 18. Blog : encadré « En bref », tableaux et questions fréquentes des recettes (D-20261020-14, 21/10/2026) ----------- Encadré « En bref » des guides : bloc Groupe de l'éditeur avec la classe l3b-en-bref (premier paragraphe en gras = titre). Tableaux des articles (bloc Tableau) : lignes fines, en-tête crème, défilement horizontal sur téléphone. Questions fréquentes des recettes : champ recette_faq, élément du modèle « Article — recette » (classe l3b-recette-faq), sous les astuces. */ .l3b-en-bref { margin: 28px 0; padding: 20px 24px; border-radius: 16px; background: var(--l3b-creme); } .l3b-en-bref > p:first-child, .l3b-en-bref > .wp-block-group__inner-container > p:first-child { margin: 0 0 10px; color: var(--l3b-vert); font-family: var(--l3b-titre); font-size: 19px; line-height: 1.2; } .l3b-en-bref ul { margin-bottom: 0; } .l3b-en-bref li { margin-bottom: 6px; } .l3b-en-bref li:last-child { margin-bottom: 0; } .l3b-article-texte .wp-block-table { margin: 24px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .l3b-article-texte .wp-block-table table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 15px; line-height: 1.45; } .l3b-article-texte .wp-block-table :is(th, td) { padding: 10px 12px; border: 1px solid var(--l3b-gris-ligne); text-align: left; vertical-align: top; } .l3b-article-texte .wp-block-table thead th { background: var(--l3b-creme); color: var(--l3b-vert); font-weight: 700; } .l3b-article-texte .wp-block-table thead { border-bottom: 2px solid var(--l3b-vert); } /* au lieu du trait noir de 3 px de WordPress */ .l3b-recette-faq h2 { margin: 0 0 8px; color: var(--l3b-vert); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; } .l3b-recette-faq h3 { margin: 20px 0 6px; color: var(--l3b-vert); font-size: 17px; line-height: 1.3; } .l3b-recette-faq p { margin: 0; } /* 19. Stock des produits vendus à l'unité (D-20261021-11, demande de Hugues du 21/10/2026) ------------------------------ Pastille sur la photo des cartes (« Plus que 2 en stock », « 5 en stock »), stock de la caisse envoyé par le pilotage (inc/stock-ventes.php) ; fiche produit : texte de disponibilité de WooCommerce. */ .w-grid-item .w-post-elm.post_image { position: relative; } .l3b-stock-pastille { position: absolute; left: 8px; bottom: 8px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--l3b-vert); font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; box-shadow: 0 1px 4px rgba(9, 9, 9, .12); pointer-events: none; } .l3b-stock-pastille--dernier { color: #B3261E; } /* 1 ou 2 en stock : rouge (Hugues, 21/10) */ @media (max-width: 600px) { .l3b-stock-pastille { left: 6px; bottom: 6px; padding: 3px 8px; font-size: 11px; } } .single-product .stock.l3b-stock-unites { color: var(--l3b-vert); font-weight: 600; } .single-product .stock.l3b-stock-dernier { color: #B3261E; } /* 20. Cartes des cafés : origine et intensité en points, sous le nom, à la place du libellé « Cafés » (D-20261021-16, demande de Hugues du 21/10/2026, même présentation que la fenêtre du coffret découverte) ---------------------------- */ .l3b-carte-cafe { display: flex; flex-direction: column; gap: 3px; margin: 4px 0 8px; } .l3b-carte-cafe__origine { color: var(--l3b-gris-moyen); font-size: 13px; line-height: 1.35; } .l3b-carte-cafe__intensite { display: flex; align-items: center; gap: 6px; color: var(--l3b-vert); font-size: 13px; font-weight: 600; line-height: 1.3; } .l3b-carte-cafe__points { display: inline-flex; flex: none; gap: 3px; } .l3b-carte-cafe__points i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--l3b-vert) 18%, transparent); } .l3b-carte-cafe__points i.is-plein { background: var(--l3b-vert); } @media (max-width: 600px) { .l3b-carte-cafe__origine, .l3b-carte-cafe__intensite { font-size: 12px; } .l3b-carte-cafe { margin-bottom: 6px; } } /* 21. Catégories : tri dans la barre des filtres (D-20261021-17) ------------------------------------------------------ */ .l3b-filtres-barre .w-order.l3b-tri { display: flex; align-items: center; gap: 8px; margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--l3b-gris-ligne); } .l3b-tri .w-order-label { color: var(--l3b-gris-moyen); font-size: 15px; white-space: nowrap; } .l3b-tri .w-order-select { position: relative; flex: 0 1 auto; min-width: 0; } .l3b-tri .w-order-select::after { right: 14px; border-top-color: var(--l3b-vert); pointer-events: none; } /* flèche dans le champ, en vert */ .l3b-tri .w-order-select select { min-height: 40px; padding: 6px 34px 6px 14px; border: 1px solid var(--l3b-gris-ligne); border-radius: 999px; background-color: #fff; color: var(--l3b-noir); font-size: 15px; font-weight: 600; cursor: pointer; } /* Tablette et téléphone : « Filtres » et le tri côte à côte, le tri dessiné comme le bouton (icône de tri, libellé « Trier par » lu par les lecteurs d'écran seulement). */ @media (max-width: 1024px) { .l3b-filtres-barre { flex-wrap: nowrap; justify-content: center; gap: 10px; } .l3b-filtres-barre > .w-filter { flex: none; } /* le bouton « Filtres » garde sa largeur */ .l3b-filtres-barre .w-order.l3b-tri { flex: 1 1 auto; max-width: 320px; min-width: 0; margin-left: 10px; padding-left: 0; border-left: 0; } .l3b-tri .w-order-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .l3b-tri .w-order-select { flex: 1 1 auto; min-width: 0; } .l3b-tri .w-order-select select { width: 100%; height: 46px; min-height: 0; padding: 0 34px 0 40px; border: 0; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--l3b-vert); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23095540' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3 8l4-4 4 4M17 20V4M13 16l4 4 4-4'/%3E%3C/svg%3E") no-repeat 13px center / 18px 18px; color: var(--l3b-vert); font-size: 16px; font-weight: 600; text-overflow: ellipsis; } } /* 22. Page du coffret découverte : photo entière, sans le recadrage des sachets de café (D-20261021-18) --------------- */ .l3b-fiche-coffret .l3b-fiche-photos .woocommerce-product-gallery__image img { width: 100%; height: auto; max-height: none; aspect-ratio: 430 / 390; object-fit: cover; object-position: 50% 51.4%; } /* cadre entier : la photo (1600 × 2200) a des marges blanches en haut et en bas */ /* 23. Meilleures ventes (D-20261021-19) : sur téléphone et tablette, les onglets de l'accueil deviennent un accordéon ; place sous le carrousel pour ses flèches, qui chevauchaient le titre de l'onglet suivant. ---------------------------- */ .w-tabs.accordion.l3b-onglets-boutons .w-tabs-section-content-h { padding-bottom: 72px; } .l3b-boutique-meilleures-ventes .l3b-meilleures-ventes { margin-top: 24px; margin-bottom: 56px; } /* 24. Accueil sur téléphone (D-20261021-21, Hugues : « meilleures ventes uniquement sur mobile, pas d'accordéon ») : onglets et accordéon masqués, seul le carrousel « Meilleures ventes » reste, avec son titre ; place pour ses flèches. */ .l3b-mv-titre { display: none; } @media (max-width: 767px) { .l3b-onglets-boutons .w-tabs-list, .l3b-onglets-boutons .w-tabs-section-header, .l3b-onglets-boutons .w-tabs-section:not(#meilleures-ventes) { display: none !important; } .l3b-onglets-boutons #meilleures-ventes, .l3b-onglets-boutons #meilleures-ventes > .w-tabs-section-content { display: block !important; height: auto !important; opacity: 1 !important; visibility: visible !important; } .l3b-onglets-boutons #meilleures-ventes .w-tabs-section-content-h { padding: 0 0 72px; } .l3b-onglets-boutons.accordion > .w-tabs-sections { border: 0; } .l3b-onglets-boutons #meilleures-ventes { border: 0; } .l3b-mv-titre { display: block; margin: 0 0 24px; color: var(--l3b-vert); font-family: var(--l3b-texte), Figtree, sans-serif; font-size: 26px; font-weight: 600; line-height: 1.25; text-align: center; } } /* 25. Fiche produit : « Idées recettes et conseils » (D-20261021-25), rangée masquée quand aucun contenu ne cite le produit. */ .l3b-fiche-articles:not(:has(.l3b-articles-lies)) { display: none !important; } .l3b-fiche-articles.l3b-fiche-articles { padding-top: 64px !important; } /* place pour les flèches du carrousel « Vous aimeriez aussi » */ /* Téléphone : les cartes défilent de côté (une carte et le début de la suivante) au lieu de s'empiler. */ @media (max-width: 767px) { .l3b-articles-lies .w-grid-list { display: flex !important; gap: 10px; margin: 0 -20px; padding: 0 20px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .l3b-articles-lies .w-grid-list::-webkit-scrollbar { display: none; } .l3b-articles-lies .w-grid-item { flex: 0 0 82%; width: 82% !important; scroll-snap-align: start; } } /* 26. Pied de page : titres des colonnes « Nos rayons » / « La maison » (D-20261021-26). */ .l3b-pied-titre { margin: 0 0 8px !important; color: var(--l3b-jaune) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em; line-height: 1.3 !important; text-transform: uppercase; } @media (max-width: 767px) { .l3b-pied-titre { margin-top: 8px !important; text-align: center; } } /* 27. Barre des filtres sur ordinateur (D-20261021-37) ----------------------------------------------------------------- Intervalle « l3b-ecart » masqué quand il ne sépare rien (filtre sans valeur retiré par Impreza : il laissait un vide de 99 px, ex. Accessoires sans rayon). Tri au même dessin que les filtres : texte du filtre (Bricolage 20 px), même chevron, icône de tri verte devant, sans pastille ; « Trier par » lu par les lecteurs d'écran seulement. */ .w-filter-list-closer + .l3b-ecart, .w-filter-list > .l3b-ecart:last-child, .l3b-ecart + .l3b-ecart { display: none !important; } @media (min-width: 1025px) { .l3b-filtres-barre .w-order.l3b-tri { gap: 0; margin-left: 44px; padding-left: 40px; height: 34px; } .l3b-tri .w-order-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .l3b-tri .w-order-select::after { display: none; } .l3b-tri .w-order-select select { height: 34px; min-height: 0; padding: 0 20px 0 30px; border: 0; border-radius: 0; box-shadow: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23095540' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3 8l4-4 4 4M17 20V4M13 16l4 4 4-4'/%3E%3C/svg%3E") no-repeat 0 50% / 20px 20px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23090909' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 100% 50% / 10px 6px; color: var(--l3b-noir, #090909); font-family: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 34px; } .no-touch .l3b-tri .w-order-select select:hover { color: var(--l3b-vert); } } /* 28. Cartes : « Rupture de stock » sur la ligne de base du prix (D-20261021-35 ; le prix garde sa marge haute, prévue pour le bouton panier absent des ruptures). */ .l3b-carte-pied:has(> .l3b-carte-stock.out-of-stock) { align-items: baseline; } /* D-20261021-39 : la liste de tri garde sa largeur (son texte était coupé quand la barre manquait de place). */ @media (min-width: 1025px) { .l3b-filtres-barre .l3b-tri, .l3b-tri .w-order-select { flex: none; } } /* 29. En-tête sur ordinateur (D-20261023-07, Hugues, 23 et 24/10) : loupe d'origine, en tête des icônes de droite ; la citrouille d'Halloween se range tout à droite, après le panier (extension l3b-site, inc/moment.php). Place pour les icônes (loupe, compte, favoris, panier, citrouille) : écart du menu réduit dans le réglage de l'élément Menu de l'en-tête (« clamp(12px, calc(5.6vw - 64px), 20px) ») et texte du menu à 16 px de 1 280 à 1 365 px (contrôlé de 1 280 à 1 920 px, client connecté ou non : « Contact » ne touche pas les icônes). !important : réglage d'Impreza (.ush_menu_1). */ @media (min-width: 1280px) and (max-width: 1365px) { .l-header .l3b-menu-principal.type_desktop { font-size: 16px !important; } } /* Loupe : même écart avec l'icône suivante (compte) qu'entre les autres icônes, qui ont 10 px de retrait de chaque côté (la loupe n'en a pas ; sa marge est fixée à 0 dans les réglages d'Impreza). */ .l-header .l3b-entete-recherche { padding-right: 10px; } /* D-20261025-19 (Hugues, 25/10) : Mon compte › Commandes, boutons « Voir » et « Facture » espacés (ils se touchaient). */ .woocommerce-orders-table__cell-order-actions .woocommerce-button, .woocommerce-orders-table__cell-order-actions .button { margin: 3px 0 3px 8px; vertical-align: middle; } .woocommerce-orders-table__cell-order-actions .woocommerce-button:first-child, .woocommerce-orders-table__cell-order-actions .button:first-child { margin-left: 0; } /* Bloc « Facture » de la page de la commande (demande à la boutique en attendant le modèle de facture). */ .l3b-facture { margin: 28px 0; padding: 18px 20px; background: #FFF5DF; border-left: 4px solid #095540; scroll-margin-top: 120px; } .l3b-facture .l3b-facture__titre { margin: 0 0 6px; font-size: 1.2rem; } .l3b-facture p { margin: 0 0 12px; } .l3b-facture .l3b-facture__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; } .l3b-facture--attente { padding: 14px 18px; }