/* ========================================================================== La Boutique du Pro — base.css (chargé sur toutes les pages) Tokens, reset, typographie, composants communs : boutons, champs, badges, délai, pastilles, notices, fil d'Ariane, pagination, carte produit, en-tête, méga-menu, tiroir mobile, panier latéral, pied de page, gabarits génériques. Mobile d'abord. Points de rupture : 768 px (tablette), 1024 px (ordinateur). Seul le module « socle » modifie ce fichier ; chaque gabarit a sa propre feuille. ========================================================================== */ /* 1. Tokens ---------------------------------------------------------------- */ :root { --lbdp-orange: #FF4613; --lbdp-orange-survol: #E03A0B; --lbdp-orange-clair: #FFF3EE; --lbdp-orange-bord: #FFD6C7; --lbdp-orange-texte: #B32F05; /* petit texte orange sur fond orange clair (badges, pastilles) : 5,8:1, 4,7:1 sur #FFD6C7 */ --lbdp-texte: #1A1A1A; --lbdp-texte-2: #424242; --lbdp-texte-3: #616161; --lbdp-bord: #E6E6E6; --lbdp-champ: #D6D6D6; --lbdp-fond: #F5F5F5; --lbdp-fond-entete: #F7F7F7; /* fond de l'en-tête et de la barre de menu (site officiel) */ --lbdp-pastille: #F0F0F0; --lbdp-vert: #1F8A4C; --lbdp-vert-clair: #E8F5EC; --lbdp-gris-delai: #9E9E9E; --lbdp-bord-survol: #A6A6A6; /* contour des cartes et tuiles au survol (sans ombre) */ --lbdp-r-badge: 4px; --lbdp-r: 6px; --lbdp-r-carte: 8px; --lbdp-conteneur: 1600px; /* 1360 avant le 04/10/2026 : sur un écran de 1920 px, le site paraissait petit au milieu (Enes) */ --lbdp-gouttiere: clamp(1rem, 3vw, 2.5rem); --lbdp-section: 4rem; /* Compléments tirés du HANDOFF / des maquettes */ --lbdp-halo: #FFE3D9; /* halo de focus des champs (HANDOFF) */ --lbdp-vert-fonce: #1B6B3A; /* texte vert sur fond vert clair (maquette panier) */ --lbdp-erreur: #C62828; /* messages d'erreur (contraste AA) */ --lbdp-erreur-clair: #FDECEA; --lbdp-ombre: 0 6px 20px rgba(0, 0, 0, .08); --lbdp-ombre-panneau: 0 20px 40px rgba(0, 0, 0, .12); --lbdp-voile: rgba(26, 26, 26, .45); --lbdp-police: "Poppins", "Poppins repli", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* 2. Reset léger ----------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; } /* pas de saut de mise en page quand le défilement est bloqué */ html.lbdp-bloque { overflow: hidden; } body { margin: 0; background: #fff; color: var(--lbdp-texte); font-family: var(--lbdp-police); font-size: .9375rem; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { max-width: 100%; height: auto; } img { vertical-align: middle; } figure { margin: 0 0 1rem; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } [hidden] { display: none !important; } /* utilitaire : l'attribut hidden l'emporte toujours */ /* 3. Typographie (Poppins, tailles en rem) ---------------------------------- */ h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; color: var(--lbdp-texte); font-weight: 600; line-height: 1.25; } h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); font-weight: 700; line-height: 1.15; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } h4 { font-size: 1rem; } h5, h6 { font-size: .9375rem; } p { margin: 0 0 1em; } small { font-size: .8125rem; } strong, b { font-weight: 600; } @media (min-width: 1024px) { h2 { font-size: 1.75rem; } } a { color: var(--lbdp-orange); text-decoration-thickness: 1px; text-underline-offset: .15em; } a:hover { color: var(--lbdp-orange-texte); } :focus-visible { outline: 2px solid var(--lbdp-orange); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* 4. Utilitaires -------------------------------------------------------------- */ /* Navigateurs sans natif (iOS avant 15.4) : un menu ou un panier fermé ne reste pas affiché sur la page. */ dialog:not([open]) { display: none; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; word-wrap: normal !important; } .lbdp-evitement { position: absolute; left: 1rem; top: -100px; z-index: 100; padding: .75rem 1rem; border-radius: var(--lbdp-r); background: var(--lbdp-texte); color: #fff; font-weight: 600; text-decoration: none; } .lbdp-evitement:focus { top: 1rem; color: #fff; } .lbdp-conteneur { width: 100%; max-width: var(--lbdp-conteneur); margin-inline: auto; padding-inline: var(--lbdp-gouttiere); } .lbdp-icone { flex: none; display: inline-block; vertical-align: middle; } .lbdp-section { padding-top: 2.5rem; } .lbdp-section__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.5rem; } .lbdp-section__titre { margin: 0; font-size: 1.5rem; font-weight: 600; } @media (min-width: 1024px) { .lbdp-section { padding-top: var(--lbdp-section); } .lbdp-section__titre { font-size: 1.75rem; } } .lbdp-lien-fleche { display: inline-flex; align-items: center; gap: .375rem; color: var(--lbdp-orange); font-size: .875rem; font-weight: 600; text-decoration: none; } .lbdp-lien-fleche:hover { color: var(--lbdp-orange-survol); } .lbdp-lien-fleche .lbdp-icone { transition: transform .2s; } .lbdp-lien-fleche:hover .lbdp-icone { transform: translateX(3px); } /* 5. Boutons --------------------------------------------------------------- */ .lbdp-bouton, .button, :where(.wp-element-button), .single_add_to_cart_button, .checkout-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .625rem 1.5rem; border: 1.5px solid var(--lbdp-orange); border-radius: var(--lbdp-r); background: var(--lbdp-orange); color: #fff; font-family: var(--lbdp-police); font-size: .9375rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; } .lbdp-bouton:hover, .button:hover, :where(.wp-element-button):hover, .single_add_to_cart_button:hover, .checkout-button:hover { background: var(--lbdp-orange-survol); border-color: var(--lbdp-orange-survol); color: #fff; } .lbdp-bouton--secondaire, .button.wc-forward:not(.checkout) { background: transparent; border-color: var(--lbdp-texte); color: var(--lbdp-texte); } .lbdp-bouton--secondaire:hover, .button.wc-forward:not(.checkout):hover { background: transparent; border-color: var(--lbdp-orange); color: var(--lbdp-orange); } .lbdp-bouton--bloc { display: flex; width: 100%; } .lbdp-bouton--grand { min-height: 52px; font-size: 1rem; } .lbdp-bouton:disabled, .button:disabled, .button.disabled, [aria-disabled="true"].lbdp-bouton { opacity: .5; cursor: not-allowed; } .lbdp-bouton-rond { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--lbdp-fond); color: var(--lbdp-texte); cursor: pointer; } .lbdp-bouton-rond:hover { color: var(--lbdp-orange); } /* 6. Champs de formulaire ---------------------------------------------------- */ :where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="date"], select, textarea) { width: 100%; min-height: 48px; padding: .625rem .875rem; border: 1px solid var(--lbdp-champ); border-radius: var(--lbdp-r); background: #fff; color: var(--lbdp-texte); font-size: 1rem; line-height: 1.4; /* 16 px sur mobile : pas de zoom iOS au focus */ transition: border-color .15s, box-shadow .15s; } :where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="date"], select, textarea):focus { outline: none; border-color: var(--lbdp-orange); box-shadow: 0 0 0 3px var(--lbdp-halo); } :where(textarea) { min-height: 8rem; resize: vertical; } :where(select) { appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .875rem center; } ::placeholder { color: var(--lbdp-texte-3); opacity: 1; } label { font-size: .875rem; font-weight: 500; } input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--lbdp-orange); } .qty { max-width: 5rem; text-align: center; } @media (min-width: 1024px) { :where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="date"], select, textarea) { font-size: .9375rem; } } /* Au doigt : un champ écrit sous 16 px fait zoomer la page de l'iPhone dès qu'on le touche (champ de la FAQ, Enes 05/10/2026). Tous les champs à 16 px au moins sur écran tactile ; !important passe devant les tailles des modules. */ @media (pointer: coarse) { input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), select, textarea { font-size: max(16px, 1em) !important; } } /* 7. Badges, délai, pastilles, étiquettes ------------------------------------ */ .lbdp-badge, .onsale { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .5rem; border-radius: var(--lbdp-r-badge); font-size: .75rem; font-weight: 600; line-height: 1.3; white-space: nowrap; } .lbdp-badge--promo, .onsale { background: var(--lbdp-orange); color: #fff; } .onsale .sale-icon { display: none; } .lbdp-delai { display: flex; align-items: center; gap: .375rem; margin: 0; color: var(--lbdp-texte-2); font-size: .75rem; line-height: 1.4; } .lbdp-delai::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lbdp-gris-delai); } .lbdp-delai--stock::before { background: var(--lbdp-vert); } /* Article sur commande dans le panier latéral (délai de la ligne, maquette panier du 02/10/2026) : ambre */ .lbdp-mini-panier__details .lbdp-delai--commande { color: #8A4F00; } .lbdp-mini-panier__details .lbdp-delai--commande::before { background: #B86A00; } /* Variante « barre » (fiche produit) : .lbdp-delai.lbdp-delai--barre */ .lbdp-delai--barre { padding: .625rem .875rem; border-radius: var(--lbdp-r); background: var(--lbdp-pastille); font-size: .8125rem; font-weight: 500; } .lbdp-delai--barre.lbdp-delai--stock { background: var(--lbdp-vert-clair); color: var(--lbdp-vert-fonce); } /* Pastilles de couleur des cartes : elles rétrécissent un peu plutôt que de déborder d'une carte étroite */ .lbdp-pastilles { display: flex; align-items: center; gap: 6px; min-height: 32px; margin: 0; } .lbdp-pastille { flex: 0 1 32px; min-width: 0; aspect-ratio: 1 / 1; border-radius: var(--lbdp-r); overflow: hidden; /* carré aux coins arrondis */ background: var(--lbdp-c, var(--lbdp-pastille)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); } .lbdp-pastille--bicolore { background: linear-gradient(135deg, var(--lbdp-c) 50%, var(--lbdp-c2) 50%); } .lbdp-pastille--image { border: 1px solid var(--lbdp-bord); background: #fff; box-shadow: none; } .lbdp-pastille--image img { display: block; width: 100%; height: 100%; padding: 2px; object-fit: contain; } /* produit entier, jamais coupé (vignettes non recadrées) */ .lbdp-pastilles__plus { flex: none; color: var(--lbdp-texte-3); font-size: .8125rem; line-height: 1; } @media (min-width: 768px) { .lbdp-pastilles { gap: 7px; min-height: 40px; } .lbdp-pastille { flex-basis: 40px; } } .lbdp-etiquette { display: inline-flex; align-items: center; gap: .375rem; min-height: 36px; padding: 0 .875rem; border: 0; border-radius: 999px; background: var(--lbdp-pastille); color: var(--lbdp-texte); font-size: .8125rem; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; } .lbdp-etiquette:hover { background: var(--lbdp-bord); color: var(--lbdp-texte); } .lbdp-etiquette.est-active, .lbdp-etiquette[aria-current] { background: var(--lbdp-orange-clair); color: var(--lbdp-orange-texte); box-shadow: inset 0 0 0 1px var(--lbdp-orange-bord); } /* 8. Notices WooCommerce, fil d'Ariane, pagination ----------------------------- */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 1.5rem; padding: .875rem 1rem; list-style: none; border: 1px solid var(--lbdp-orange-bord); border-radius: var(--lbdp-r); background: var(--lbdp-orange-clair); color: var(--lbdp-texte); font-size: .875rem; } .woocommerce-message { border-color: transparent; background: var(--lbdp-vert-clair); color: var(--lbdp-vert-fonce); } .woocommerce-error { flex-direction: column; align-items: flex-start; border-color: transparent; background: var(--lbdp-erreur-clair); color: var(--lbdp-erreur); } .woocommerce-error li { margin: 0; } .woocommerce-message .button, .woocommerce-info .button { order: 2; margin-left: auto; min-height: 40px; padding: .375rem 1rem; font-size: .875rem; } .woocommerce-notices-wrapper:empty { display: none; } /* Fil d'Ariane. Balisage de Yoast (lbdp_fil_ariane()) : > (seul enfant) > … « > » … « > » . Les séparateurs de Yoast sont du texte nu entre les maillons : taille 0, remplacés par « › » en CSS (décoratif, non lu). Tablette et ordinateur : une seule ligne, liens entiers, seul le dernier maillon (la page) se coupe avec « … ». Téléphone : le seul lien du parent direct, « ‹ Chaussures de sécurité basses » ; les autres maillons sont masqués à l'écran mais restent lus par les lecteurs d'écran (le BreadcrumbList de Google n'est pas concerné). Repli de WooCommerce (sans Yoast, plusieurs enfants dans le

) : non touché. */ .lbdp-fil-ariane { --lbdp-fil-taille: .8125rem; position: relative; margin: 1rem 0; color: var(--lbdp-texte-3); font-size: var(--lbdp-fil-taille); line-height: 1.5; } .lbdp-fil-ariane__liste { margin: 0; } .lbdp-fil-ariane a { color: var(--lbdp-texte-3); text-decoration: none; } .lbdp-fil-ariane a:hover { color: var(--lbdp-orange); } .lbdp-fil-ariane .breadcrumb_last { color: var(--lbdp-texte); } .lbdp-fil-ariane__liste > span:only-child { display: flex; align-items: baseline; min-width: 0; overflow: hidden; font-size: 0; white-space: nowrap; } .lbdp-fil-ariane__liste > span:only-child > * { flex: none; font-size: var(--lbdp-fil-taille); } .lbdp-fil-ariane__liste > span:only-child > * + *::before { content: "›"; content: "›" / ""; margin-inline: .5em; color: var(--lbdp-texte-3); } .lbdp-fil-ariane__liste > span:only-child > :last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 767.98px) { .lbdp-fil-ariane__liste > span:only-child > :not(:nth-last-child(2), :only-child) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .lbdp-fil-ariane__liste > span:only-child > :nth-last-child(2) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .lbdp-fil-ariane__liste > span:only-child > :nth-last-child(2)::before { content: "‹"; content: "‹" / ""; margin: 0 .4em 0 0; } } .woocommerce-pagination, .lbdp-pagination { margin-top: 2.5rem; } .woocommerce-pagination ul.page-numbers, .lbdp-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; } a.page-numbers, span.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 .5rem; border: 1px solid var(--lbdp-bord); border-radius: var(--lbdp-r); color: var(--lbdp-texte); font-size: .875rem; font-weight: 500; text-decoration: none; } a.page-numbers:hover { border-color: var(--lbdp-orange); color: var(--lbdp-orange); } span.page-numbers.current { border-color: var(--lbdp-orange); background: var(--lbdp-orange); color: #fff; } span.page-numbers.dots { border-color: transparent; } /* Téléphone (Enes, 04/10/2026 : « la navigation de 1 à 47, c'est pas fou ») : tout sur UNE ligne. Chiffres sans cadre et plus étroits, page en cours pleine, flèches encadrées aux deux bouts, « … » étroits. */ @media (max-width: 767.98px) { .woocommerce-pagination ul.page-numbers, .lbdp-pagination .nav-links { flex-wrap: nowrap; align-items: center; gap: 4px; } .woocommerce-pagination ul.page-numbers > li { flex: none; margin: 0; } .woocommerce-pagination a.page-numbers, .woocommerce-pagination span.page-numbers, .lbdp-pagination a.page-numbers, .lbdp-pagination span.page-numbers { min-width: 34px; height: 40px; padding: 0 4px; border-color: transparent; font-size: .9375rem; } .woocommerce-pagination a.page-numbers:is(.prev, .next), .lbdp-pagination a.page-numbers:is(.prev, .next) { min-width: 40px; border-color: var(--lbdp-bord); } .woocommerce-pagination span.page-numbers.dots, .lbdp-pagination span.page-numbers.dots { min-width: 14px; padding: 0; } } /* 9. Prix (HTML de lbdp-core : .price-wrapper > .price-ttc [.orig-price]
.price-ht) ----- */ .price-wrapper { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; line-height: 1.3; } .price-wrapper br { display: none; } .price-wrapper .amount { margin-right: .25em; } .price-ttc { color: var(--lbdp-texte); font-size: .75rem; } .price-ttc .amount { font-size: 1.0625rem; font-weight: 700; } .price-a-partir { color: var(--lbdp-texte-2); font-weight: 400; } /* « À partir de » (déclinaisons à prix différents) */ .orig-price { color: var(--lbdp-texte-3); font-size: .8125rem; text-decoration: line-through; } .orig-price .amount { margin-right: .15em; } .price-ht { flex-basis: 100%; color: var(--lbdp-texte-3); font-size: .75rem; } .est-promo .price-ttc .amount { color: var(--lbdp-orange); } @media (min-width: 768px) { .price-ttc .amount { font-size: 1.25rem; } } /* 10. Carte produit + grille -------------------------------------------------- */ ul.products, .lbdp-grille-produits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { ul.products, .lbdp-grille-produits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } @media (min-width: 1024px) { ul.products, .lbdp-grille-produits { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .lbdp-carte-produit { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; border: 1px solid var(--lbdp-bord); border-radius: var(--lbdp-r-carte); background: #fff; overflow: hidden; transition: border-color .2s; } /* Survol : pas d'ombre, un contour gris plus foncé (demande d'Enes) */ .lbdp-carte-produit:hover { border-color: var(--lbdp-bord-survol); } .lbdp-carte-produit:focus-within { box-shadow: 0 0 0 2px var(--lbdp-orange); } .lbdp-carte-produit__media { position: relative; aspect-ratio: 1 / 1; background: #fff; } /* Photo entière (contain) dans le carré : positionnée pour que son format n'agrandisse jamais le carré */ .lbdp-carte-produit__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 6px; object-fit: contain; /* photos plus grandes dans la carte */ } /* Badges de la photo : « -X % » puis « Déstockage » à sa droite (template-parts/carte-produit.php). Petits (Enes, 04/10/2026 : en 15 px gras, « Déstockage » cachait le haut des produits). */ .lbdp-carte-produit__badges { position: absolute; top: 6px; right: 6px; left: 6px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; } .lbdp-carte-produit__badges > :is(.onsale, .lbdp-badge) { padding: 2px 6px; font-size: .6875rem; font-weight: 700; } .lbdp-badge--destockage { background: var(--lbdp-texte); color: #fff; } .lbdp-carte-produit__corps { display: flex; flex: 1; flex-direction: column; gap: 5px; padding: 2px 10px 12px; } .lbdp-carte-produit__marque { margin: 0; color: var(--lbdp-texte-3); font-size: .75rem; font-weight: 500; line-height: 1.3; text-transform: uppercase; } .lbdp-carte-produit__titre { /* 3 lignes aussi sur téléphone : à 2, « Chaussures de sécurité basses… » cachait le modèle sur toutes les cartes */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0; font-size: .8125rem; font-weight: 500; line-height: 1.35; } .lbdp-carte-produit__lien { color: var(--lbdp-texte); text-decoration: none; } /* Note Avis Vérifiés sur la carte (inc/carte-produit.php, lbdp_carte_note_html) : étoiles orange + « 5,0 (2) » */ .lbdp-carte-produit__note { display: flex; align-items: center; gap: 4px; margin: 0; color: var(--lbdp-texte); font-size: .75rem; font-weight: 600; line-height: 1; } .lbdp-carte-produit__etoiles { display: inline-flex; gap: 1px; color: var(--lbdp-orange); } .lbdp-carte-produit__etoiles .est-pleine { fill: currentColor; } .lbdp-carte-produit__nb-avis { color: var(--lbdp-texte-3); font-weight: 500; } .lbdp-carte-produit__lien::after { content: ""; position: absolute; inset: 0; z-index: 1; } .lbdp-carte-produit__lien:hover { color: var(--lbdp-texte); } .lbdp-carte-produit__lien:focus-visible { outline: none; } /* Pastilles, délai et prix descendent ensemble en bas de la carte : alignés d'une carte à sa voisine quel que soit le nombre de lignes du titre (2 ou 3 : ≈ 20 px de décalage avant ; lot front n° 15, 05/10/2026). */ .lbdp-carte-produit__titre + * { margin-top: auto; } .lbdp-carte-produit__prix { padding-top: 2px; } @media (min-width: 768px) { .lbdp-carte-produit__image { padding: 10px; } .lbdp-carte-produit__badges { top: 10px; right: 10px; left: 10px; gap: 5px; } .lbdp-carte-produit__badges > :is(.onsale, .lbdp-badge) { padding: 3px 8px; font-size: .75rem; } .lbdp-carte-produit__corps { gap: 7px; padding: 4px 16px 16px; } .lbdp-carte-produit__titre { -webkit-line-clamp: 3; font-size: .875rem; line-height: 1.4; } } /* Listes sans colonne de filtres (recherche de 2 à 8 résultats, petites catégories) : 5 colonnes dès 1 280 px, la même carte que les listes filtrées (≈ 291 px à 1 920 au lieu de 368 ; page de résultats du 05/10/2026). */ @media (min-width: 1280px) { .lbdp-boutique--sans-filtres ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* Une seule rangée pleine à chaque largeur (« Produits similaires », « Nos coups de cœur » des résultats) : 4 sur téléphone (2 × 2), 3 sur tablette, 4 de 1 024 à 1 279 px, 5 au-delà ; les cartes en trop sont masquées. */ @media (max-width: 767.98px) { .lbdp-grille-produits--rangee > :nth-child(n+5) { display: none; } } @media (min-width: 768px) and (max-width: 1023.98px) { .lbdp-grille-produits--rangee > :nth-child(n+4) { display: none; } } @media (min-width: 1024px) and (max-width: 1279.98px) { .lbdp-grille-produits--rangee > :nth-child(n+5) { display: none; } } @media (min-width: 1280px) { .lbdp-grille-produits.lbdp-grille-produits--rangee { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* plus fort que « ul.products » (4 colonnes) */ .lbdp-grille-produits--rangee > :nth-child(n+6) { display: none; } } /* 10 bis. Encart d'appel à l'action (fond orange clair) : pages éditoriales, devis, pages secondaires, page de résultats. Déplacé de pages.css le 05/10/2026 (page de résultats), sans changement. */ .lbdp-encart { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; padding: 1.25rem; border-radius: var(--lbdp-r-carte); background: var(--lbdp-orange-clair); } .lbdp-encart__texte { min-width: 0; } @media (min-width: 1024px) { .lbdp-encart { flex-direction: row; align-items: center; justify-content: space-between; gap: 2.5rem; padding: 2.5rem; } .lbdp-encart__bouton { flex: none; } } /* 11. Barre haute orange ------------------------------------------------------- */ .lbdp-barre-haute { background: var(--lbdp-orange); color: #fff; font-size: .8125rem; font-weight: 500; } @media (max-width: 374.98px) { .lbdp-barre-haute { font-size: .71875rem; } } /* 360 px : « … d'achat en Fra… » coupé (05/10/2026) */ .lbdp-barre-haute__interieur { display: flex; align-items: center; justify-content: center; min-height: 32px; } /* Comme le site actuel : messages centrés (émojis compris), séparés par un point ; mobile = 1er message seul */ /* Jamais plus large que l'écran (revue du 02/10/2026 : à 1024–1067 px, les 3 messages débordaient de 14 px et la page défilait de côté ; à 320 px, le 1er seul débordait) : un message trop long finit par « … ». */ .lbdp-barre-haute__messages { display: flex; align-items: center; justify-content: center; min-width: 0; max-width: 100%; margin: 0; padding: 0; list-style: none; text-align: center; } .lbdp-barre-haute__message { display: none; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .lbdp-barre-haute__message:first-child { display: block; } .lbdp-barre-haute a { color: #fff; text-decoration: none; } .lbdp-barre-haute a:hover { color: #fff; text-decoration: underline; } @media (min-width: 1024px) { .lbdp-barre-haute { font-size: .9375rem; } .lbdp-barre-haute__interieur { min-height: 36px; } .lbdp-barre-haute__message:nth-child(-n+2) { display: block; } /* 2 messages de 1024 à 1199 px, les 3 au-delà */ .lbdp-barre-haute__message + .lbdp-barre-haute__message::before { content: "•"; margin: 0 1.25rem; opacity: .75; } } @media (min-width: 1200px) { .lbdp-barre-haute__message { display: block; } } /* 12. En-tête ------------------------------------------------------------------ */ /* En-tête collant. Mobile : fond gris clair du site officiel ; ordinateur : design de base de la maquette (blanc, filet fin), demande d'Enes du 01/10 (le soulignement orange du menu au survol est gardé). Sur ordinateur, seule la barre de menu reste en haut en descendant : l'en-tête colle avec un décalage négatif égal à la rangée logo / recherche / raccourcis (--lbdp-entete-rangee), qui sort donc de l'écran. Sur mobile, tout reste. Mesures réelles publiées par base.js (valeurs de secours ici) : --lbdp-entete-h = partie qui reste visible ; les autres éléments collants (filtres, galerie, sommaires…) se posent dessous avec --lbdp-sous-entete. */ /* Téléphone et tablette : 59 px = barre compacte (12 ter), seule à rester en haut en descendant (avant : 111 px, l'en-tête complet restait collé). */ :root { --lbdp-entete-h: 59px; --lbdp-entete-rangee: 0px; scroll-padding-top: var(--lbdp-entete-h); } body { --lbdp-barre-admin: 0px; --lbdp-sous-entete: calc(var(--lbdp-barre-admin) + var(--lbdp-entete-h)); } @media (min-width: 601px) { body.admin-bar { --lbdp-barre-admin: var(--wp-admin--admin-bar--height, 32px); } } @media (min-width: 1024px) { :root { --lbdp-entete-h: 54px; --lbdp-entete-rangee: 70px; } } .lbdp-entete { position: sticky; top: calc(var(--lbdp-barre-admin) - var(--lbdp-entete-rangee)); z-index: 40; /* Blanc sur téléphone aussi (Enes, 05/10/2026 : « j'aime pas le gris en fond sur le header ») : fin trait et ombre légère. */ background: #fff; border-bottom: 1px solid var(--lbdp-bord); box-shadow: 0 2px 8px rgba(0, 0, 0, .06); } @media (min-width: 1024px) { .lbdp-entete { background: #fff; border-bottom: 1px solid var(--lbdp-bord); box-shadow: none; } } /* Téléphone et tablette, en haut de page, comme boulanger.com (Enes, 05/10/2026) : logo en haut à gauche, compte et panier à droite ; dessous, le menu (☰) à gauche de la recherche. Même hauteur qu'avant (2 rangées de 44 px). */ .lbdp-entete__interieur { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo logo actions" "burger recherche recherche"; align-items: center; column-gap: .25rem; padding: .375rem .5rem .625rem; } .lbdp-entete__burger { grid-area: burger; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--lbdp-texte); } .lbdp-entete__logo { grid-area: logo; display: flex; justify-self: start; margin-left: .5rem; } /* aligné sur l'icône ☰ dessous */ .lbdp-entete__logo-image { display: block; width: auto; height: 30px; } .lbdp-entete__actions { grid-area: actions; display: flex; align-items: center; gap: .25rem; } .lbdp-entete__action { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--lbdp-texte); text-decoration: none; } .lbdp-entete__action:hover { color: var(--lbdp-orange); } .lbdp-entete__action--faq, .lbdp-entete__action--contact, .lbdp-entete__action--devis { display: none; } /* mobile : dans le tiroir */ .lbdp-entete__libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; } .lbdp-entete__icone-panier { position: relative; display: inline-flex; } .lbdp-panier-compteur { position: absolute; top: -8px; right: -10px; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--lbdp-orange); color: #fff; font-size: .75rem; font-weight: 600; line-height: 1; } .lbdp-panier-compteur[data-nombre="0"] { display: none; } @media (min-width: 768px) { .lbdp-entete__action--faq, .lbdp-entete__action--contact, .lbdp-entete__action--devis { display: flex; } } @media (min-width: 1024px) { .lbdp-entete__interieur { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo recherche actions"; column-gap: 26px; padding: 14px var(--lbdp-gouttiere); } .lbdp-entete__burger { display: none; } .lbdp-entete__logo { margin: 0; } .lbdp-entete__logo-image { height: 46px; } /* Raccourcis de la maquette : icône 22 px, libellé dessous, l'icône monte d'un cran au survol */ .lbdp-entete__actions { align-items: flex-start; gap: 1.625rem; } .lbdp-entete__action { flex-direction: column; gap: 3px; width: auto; height: auto; color: var(--lbdp-texte); font-size: .8125rem; font-weight: 500; line-height: 1.2; transition: color .2s; } .lbdp-entete__action .lbdp-icone { width: 22px; height: 22px; transition: transform .2s; } .lbdp-entete__action:hover .lbdp-icone { transform: translateY(-2px); } .lbdp-entete__libelle { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; } .lbdp-panier-compteur { top: -7px; right: -9px; min-width: 17px; height: 17px; border-radius: 999px; font-size: 10px; font-weight: 500; } } /* 12 bis. Panneau du compte (template-parts/entete/actions.php). Ordinateur à la souris : au survol, CSS seul. Téléphone, tablette et écrans tactiles : le même panneau s'ouvre au toucher de l'icône (base.js 1 bis, classe est-ouvert ; Enes, 05/10/2026 : « mets le panneau comme sur PC »), sous l'en-tête, calé à droite. */ .lbdp-entete__compte { position: relative; display: flex; } .lbdp-compte-survol { display: none; } .lbdp-compte-survol__titre { margin: 0 0 8px; padding: 0 4px; font-size: .9375rem; font-weight: 600; line-height: 1.4; } .lbdp-compte-survol__bouton { display: flex; justify-content: center; width: 100%; } .lbdp-compte-survol__inscription { margin: 10px 0 0; padding: 0 4px; color: var(--lbdp-texte-3); font-size: .8125rem; line-height: 1.4; } .lbdp-compte-survol__inscription a { color: var(--lbdp-texte); font-weight: 600; text-decoration: none; } .lbdp-compte-survol__inscription a:hover { color: var(--lbdp-orange); } .lbdp-compte-survol__liens { margin: 12px 0 0; padding: 6px 0 0; border-top: 1px solid var(--lbdp-bord); list-style: none; } .lbdp-compte-survol__lien { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 4px; color: var(--lbdp-texte); font-size: .875rem; font-weight: 400; line-height: 1.3; text-decoration: none; } .lbdp-compte-survol__lien .lbdp-icone { flex: none; color: var(--lbdp-texte-3); } .lbdp-compte-survol__lien:hover, .lbdp-compte-survol__lien:hover .lbdp-icone { color: var(--lbdp-orange); } @media not all and (min-width: 1024px) and (hover: hover) { /* Panneau calé à droite sous la rangée des icônes (compte, panier), par-dessus la recherche (Enes : « fais-le monter »). */ .lbdp-entete__actions { position: relative; } .lbdp-entete__compte { position: static; } .lbdp-entete__compte.est-ouvert .lbdp-compte-survol { display: block; position: absolute; top: calc(100% + 4px); right: 0; z-index: 60; width: min(300px, calc(100vw - 16px)); max-height: calc(100dvh - var(--lbdp-sous-entete) - 16px); overflow-y: auto; padding: 14px; border: 1px solid var(--lbdp-bord); border-radius: var(--lbdp-r-carte); background: #fff; box-shadow: 0 16px 28px rgba(0, 0, 0, .14); text-align: left; } .lbdp-compte-survol__lien { min-height: 44px; } /* Voile noir léger derrière le panneau ouvert (Enes, 05/10/2026) ; le toucher dessus referme (base.js 1 bis). */ html.lbdp-compte-ouvert .lbdp-entete__actions::before { content: ""; position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, .35); } } @media (prefers-reduced-motion: no-preference) { /* classe posée seulement au doigt (base.js 1 bis) */ html.lbdp-compte-ouvert .lbdp-entete__actions::before { animation: lbdp-voile-entree .2s ease-out; } } @keyframes lbdp-voile-entree { from { opacity: 0; } } @media (min-width: 1024px) and (hover: hover) { .lbdp-compte-survol { /* Aligné sur le bord GAUCHE de « Compte » (demande d'Enes, 01/10/2026) : il s'ouvre vers la droite, sous les autres raccourcis. */ display: block; position: absolute; top: calc(100% + 10px); left: -1.25rem; z-index: 60; width: 290px; padding: 14px; border: 1px solid var(--lbdp-bord); border-radius: var(--lbdp-r-carte); background: #fff; box-shadow: 0 16px 28px rgba(0, 0, 0, .12); text-align: left; visibility: hidden; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility 0s linear .15s; } /* Pont invisible entre l'icône et le panneau : le survol ne se perd pas en descendant */ .lbdp-compte-survol::before { content: ""; position: absolute; right: 0; bottom: 100%; left: 0; height: 12px; } .lbdp-entete__compte:hover .lbdp-compte-survol, .lbdp-entete__compte:focus-within .lbdp-compte-survol { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; } /* Échap (base.js, 1 bis) : fermé jusqu'au prochain survol ou au prochain focus venu d'ailleurs (WCAG 1.4.13). */ .lbdp-entete__compte.est-ferme .lbdp-compte-survol { visibility: hidden; opacity: 0; transform: translateY(4px); } } /* 12 ter. En-tête compact, téléphone et tablette (demande d'Enes du 05/10/2026, comme boulanger.com) ------------- En haut de page : l'en-tête complet, collé en haut comme avant (jamais coupé). Une fois descendu plus bas que lui, base.js (5 bis) le resserre en une barre fine, toujours collée : ☰, la recherche au milieu (même champ arrondi, mêmes suggestions), compte et panier ; sans logo ni barre orange. Une cale rend la hauteur perdue : rien ne bouge. La barre glisse depuis le haut (coupé avec « réduire les animations », section 19). Elle passe sous les panneaux (tiroir, panier latéral, « Couleur et taille » :

au premier plan ; filtres : z-index 60) ; ordinateur inchangé. */ @media (max-width: 1023.98px) { .lbdp-entete.est-compact { animation: lbdp-entete-entree .2s ease-out; } .lbdp-entete.est-compact .lbdp-entete__interieur { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "burger recherche actions"; padding: .375rem .5rem; } .lbdp-entete.est-compact .lbdp-entete__logo, .lbdp-entete.est-compact :is(.lbdp-entete__action--faq, .lbdp-entete__action--contact, .lbdp-entete__action--devis) { display: none; } /* Pas la recherche plein écran ouverte depuis la barre fine : elle garde sa propre barre (recherche.css). */ .lbdp-entete.est-compact .lbdp-recherche:not(.lbdp-recherche--plein-ecran) { height: 40px; margin: 0 .25rem; padding-left: .75rem; } .lbdp-entete.est-compact .lbdp-entete__actions { gap: 0; } } @keyframes lbdp-entete-entree { from { transform: translateY(-100%); } } /* 13. Recherche (champ + panneau vide ; le contenu du panneau appartient au module recherche) ---- */ .lbdp-recherche { grid-area: recherche; position: relative; display: flex; align-items: center; gap: .625rem; height: 44px; margin: .25rem .25rem 0; padding: 0 .375rem 0 1rem; border: 1px solid var(--lbdp-bord); border-radius: 999px; background: #fff; /* champ blanc arrondi du site officiel */ transition: border-color .15s, box-shadow .15s; } .lbdp-recherche:focus-within { border-color: var(--lbdp-orange); box-shadow: 0 0 0 1px var(--lbdp-orange); } .lbdp-recherche__champ { flex: 1; min-width: 0; height: 100%; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--lbdp-texte); font-size: 1rem; outline: none; appearance: none; } /* Le contour orange est porté par le formulaire (:focus-within) : pas de halo des champs à l'intérieur. */ .lbdp-recherche__champ:focus { outline: none; border: 0; box-shadow: none; } .lbdp-recherche__champ::placeholder { font-size: .875rem; text-overflow: ellipsis; } /* Pas de croix native du navigateur (absente de la maquette ; Échap vide et ferme le panneau). */ .lbdp-recherche__champ::-webkit-search-cancel-button, .lbdp-recherche__champ::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .lbdp-recherche__bouton { order: -1; flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 36px; padding: 0; border: 0; background: none; color: var(--lbdp-texte); } /* Panneau des suggestions : défini dans recherche.css (chargée sur toutes les pages). */ @media (min-width: 1024px) { /* Champ gris de la maquette, bouton orange carré (le style arrondi reste sur mobile) */ .lbdp-recherche { width: 100%; height: 48px; margin: 0; padding: 0 6px 0 18px; gap: .75rem; border: 0; border-radius: var(--lbdp-r); background: var(--lbdp-pastille); } .lbdp-recherche:focus-within { background: #fff; border: 0; box-shadow: 0 0 0 2px var(--lbdp-orange); } .lbdp-recherche__champ { font-size: .875rem; } .lbdp-recherche__bouton { order: 0; width: 38px; height: 38px; border-radius: var(--lbdp-r-badge); background: var(--lbdp-orange); color: #fff; transition: background-color .15s; } .lbdp-recherche__bouton:hover { background: var(--lbdp-orange-survol); } } /* 14. Navigation : tiroir mobile (), comme sur le site actuel --------------- Balisage : template-parts/entete/tiroir.php + LBDP_Menu_Tiroir_Walker ; comportement : base.js, section 2. Chaque niveau est un panneau plein écran posé sur son parent ; il attend à droite et glisse à l'entrée. */ .lbdp-nav { display: none; } .lbdp-tiroir { position: fixed; inset: 0 auto 0 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; overflow: hidden; background: #fff; color: var(--lbdp-texte); } .lbdp-tiroir[open] { display: flex; animation: lbdp-glisse-droite .3s ease; } .lbdp-tiroir::backdrop { background: var(--lbdp-voile); } @keyframes lbdp-glisse-droite { from { transform: translateX(-100%); } to { transform: none; } } .lbdp-tiroir__boite { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; } .lbdp-tiroir__tete { flex: none; display: flex; align-items: center; gap: 6px; min-height: 61px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--lbdp-bord); } .lbdp-tiroir__retour, .lbdp-tiroir__fermer { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--lbdp-texte); } .lbdp-tiroir__retour { margin-left: -10px; } .lbdp-tiroir__fermer { margin-left: auto; } .lbdp-tiroir__logo { display: flex; } .lbdp-tiroir__logo-image { display: block; width: auto; height: 30px; } .lbdp-tiroir__titre { min-width: 0; margin: 0; overflow: hidden; font-size: 1.125rem; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .lbdp-tiroir__nav { position: relative; flex: 1; min-height: 0; overflow: hidden; } .lbdp-tiroir__niveau { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; overflow: hidden auto; overscroll-behavior: contain; background: #fff; list-style: none; } /* Sortie : « visibility » attend la fin du glissement, sinon le niveau disparaîtrait d'un coup. */ .lbdp-tiroir__niveau .lbdp-tiroir__niveau { z-index: 2; transform: translateX(100%); visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s; } .lbdp-tiroir__niveau .lbdp-tiroir__niveau.est-ouvert { transform: none; visibility: visible; transition: transform .28s ease, visibility 0s; } .lbdp-tiroir__lien { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; min-height: 56px; padding: 15px 18px; border: 0; border-bottom: 1px solid var(--lbdp-bord); background: none; color: var(--lbdp-texte); font-family: var(--lbdp-police); font-size: 1rem; font-weight: 500; line-height: 1.5; text-align: left; text-decoration: none; } .lbdp-tiroir__lien[aria-current="page"] { color: var(--lbdp-orange); } .lbdp-tiroir__chevron { flex: none; } .lbdp-tiroir__item.mobile-titre > .lbdp-tiroir__lien { font-weight: 700; } /* Niveau « logos » (marques) : 3 tuiles par ligne ; niveau « cartes » (Personnalisation, Métiers) : 2 par ligne */ .lbdp-tiroir__niveau--logos, .lbdp-tiroir__niveau--cartes { display: grid; align-content: start; gap: 10px; padding: 14px; } .lbdp-tiroir__niveau--logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lbdp-tiroir__niveau--cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .lbdp-tiroir__item--large { grid-column: 1 / -1; } .lbdp-tiroir__item--large > .lbdp-tiroir__lien { min-height: 44px; padding: 2px 2px 12px; font-size: 1.0625rem; } .lbdp-tiroir__tuile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 84px; padding: 6px; border: 1px solid var(--lbdp-bord); border-radius: var(--lbdp-r-carte); background: #fff; color: var(--lbdp-texte-2); font-size: .6875rem; font-weight: 500; line-height: 1.15; text-align: center; text-decoration: none; } .lbdp-tiroir__tuile-image { width: 82%; height: 34px; object-fit: contain; } .lbdp-tiroir__carte { position: relative; display: flex; align-items: flex-end; height: 120px; overflow: hidden; border-radius: 10px; background: var(--lbdp-bord); color: #fff; font-size: .8125rem; font-weight: 700; line-height: 1.2; text-decoration: none; } .lbdp-tiroir__carte-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Voile sombre en bas de la photo : le nom reste lisible sur toutes les photos */ .lbdp-tiroir__carte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 65%); } .lbdp-tiroir__carte-nom { position: relative; z-index: 1; padding: 8px 10px; } .lbdp-tiroir__raccourcis { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 8px 14px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--lbdp-bord); } .lbdp-tiroir__raccourci { display: flex; align-items: center; gap: 8px; min-height: 36px; color: var(--lbdp-texte-3); font-size: .8125rem; text-decoration: none; } /* Orange au survol seulement avec une souris : pas de « survol collé » au doigt */ @media (hover: hover) { .lbdp-tiroir__lien:hover, .lbdp-tiroir__raccourci:hover, .lbdp-tiroir__tuile:hover { color: var(--lbdp-orange); } .lbdp-tiroir__tuile:hover { border-color: var(--lbdp-bord-survol); } } /* Grand téléphone et tablette : le tiroir laisse voir la page assombrie à droite, texte plus grand */ @media (min-width: 600px) { .lbdp-tiroir { width: 75%; } } @media (min-width: 768px) { .lbdp-tiroir__lien { min-height: 64px; padding: 18px 26px 18px 22px; font-size: 1.1875rem; } .lbdp-tiroir__raccourci { min-height: 48px; font-size: 1rem; } .lbdp-tiroir__logo-image { height: 35px; } } /* Logos de marques (méga-menu, accueil…) : noirs par défaut, couleur réelle au survol */ .lbdp-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .lbdp-logo { display: flex; align-items: center; justify-content: center; height: 52px; padding: 8px 10px; border: 1px solid var(--lbdp-bord); border-radius: var(--lbdp-r); background: #fff; color: var(--lbdp-texte); font-size: .75rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; transition: border-color .2s; } /* NB : le HANDOFF indique grayscale(1) brightness(0) ; plusieurs logos du site sont des pastilles à fond plein (Blaklader, Mascot, Payper, Ducati…) qui deviendraient des blocs noirs illisibles. On garde donc le rendu monochrome sombre sans écraser le fond : niveaux de gris contrastés, couleur au survol. */ .lbdp-logo__image { width: auto; max-width: 100%; height: auto; max-height: 28px; object-fit: contain; filter: grayscale(1) contrast(1.2) brightness(.8); opacity: .85; transition: filter .2s, opacity .2s; } .lbdp-logo:hover, .lbdp-logo:focus-visible { border-color: var(--lbdp-bord-survol); color: var(--lbdp-texte); } /* survol sans ombre : contour gris plus foncé */ .lbdp-logo:hover .lbdp-logo__image, .lbdp-logo:focus-visible .lbdp-logo__image { filter: none; opacity: 1; } /* 15. Navigation : barre + méga-menu (ordinateur), comme sur le site actuel ---------- Balisage : template-parts/entete/navigation.php + LBDP_Menu_Walker ; comportement : base.js, section 1. */ @media (min-width: 1024px) { .lbdp-nav { display: block; } .lbdp-nav__interieur { display: flex; align-items: center; max-width: var(--lbdp-conteneur); margin-inline: auto; padding: 0 calc(var(--lbdp-gouttiere) - .75rem); } .lbdp-menu { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; } /* Comme le site officiel : libellé orange et trait orange qui se déroule dessous (survol, panneau ouvert, rubrique en cours) */ .lbdp-menu__item { display: flex; align-items: center; } .lbdp-menu__lien { position: relative; flex: none; display: flex; align-items: center; gap: .375rem; padding: .9375rem .75rem; border: 0; background: none; color: var(--lbdp-texte); font-family: var(--lbdp-police); font-size: .9375rem; font-weight: 500; line-height: 1.3; text-decoration: none; white-space: nowrap; transition: color .2s; } .lbdp-menu__lien::after { content: ""; position: absolute; left: .75rem; right: calc(100% - .75rem); bottom: .5rem; height: 2px; background: var(--lbdp-orange); transition: right .25s; } .lbdp-menu__item:hover > .lbdp-menu__lien, .lbdp-menu__item.est-ouvert > .lbdp-menu__lien, .lbdp-menu__item.current-menu-item > .lbdp-menu__lien, .lbdp-menu__item.current-menu-ancestor > .lbdp-menu__lien { color: var(--lbdp-orange); } .lbdp-menu__item:hover > .lbdp-menu__lien::after, .lbdp-menu__item.est-ouvert > .lbdp-menu__lien::after, .lbdp-menu__item.current-menu-item > .lbdp-menu__lien::after, .lbdp-menu__item.current-menu-ancestor > .lbdp-menu__lien::after { right: .75rem; } .lbdp-menu__lien + .lbdp-menu__bascule { display: flex; align-items: center; justify-content: center; margin-left: -.625rem; padding: .875rem .625rem .875rem .25rem; border: 0; background: none; } .lbdp-menu__chevron { width: 14px; height: 14px; color: var(--lbdp-texte); transition: transform .2s, color .2s; } .lbdp-menu__item:hover .lbdp-menu__chevron, .lbdp-menu__item.est-ouvert .lbdp-menu__chevron { color: var(--lbdp-orange); } .lbdp-menu__item.est-ouvert > .lbdp-menu__bascule .lbdp-menu__chevron { transform: rotate(180deg); } /* « Déstockage » (ou « Promos », « Soldes ») : en orange, poussé à droite de la barre (inc/menu-walker.php) */ .lbdp-menu__item--droite { margin-left: auto; } /* Logo à gauche de la barre de menu collante, une fois la rangée logo / recherche sortie de l'écran (Enes, 06/10/2026). Il entre en glissant (largeur 0 → largeur du logo, 5 × sa hauteur) ; à partir de 1280 px (24 px de haut), 30 px de haut dès 1440 px : en dessous, le menu ne tiendrait plus sur une ligne. */ .lbdp-nav__interieur > .lbdp-menu { flex: 1; min-width: 0; } .lbdp-nav__logo { display: none; } } @media (min-width: 1280px) { .lbdp-nav__logo { --lbdp-nav-logo-h: 24px; display: flex; align-items: center; flex: none; overflow: hidden; max-width: 0; opacity: 0; visibility: hidden; margin-left: .75rem; transition: max-width .25s ease, opacity .2s ease, margin-right .25s ease, visibility 0s .25s; } .lbdp-nav__logo-image { display: block; width: auto; max-width: none; height: var(--lbdp-nav-logo-h); } .lbdp-entete.est-defile .lbdp-nav__logo { max-width: calc(var(--lbdp-nav-logo-h) * 5); opacity: 1; visibility: visible; margin-right: .5rem; transition: max-width .25s ease, opacity .2s ease, margin-right .25s ease, visibility 0s; } } @media (min-width: 1440px) { .lbdp-nav__logo { --lbdp-nav-logo-h: 30px; } } @media (min-width: 1024px) { .lbdp-menu__item--promo > .lbdp-menu__lien { color: var(--lbdp-orange); font-weight: 600; } .lbdp-menu__item--promo:hover > .lbdp-menu__lien { color: var(--lbdp-orange-survol); } .lbdp-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; max-height: calc(100vh - var(--lbdp-sous-entete) - var(--lbdp-entete-rangee) - 5rem); overflow-y: auto; border-top: 1px solid rgba(0, 0, 0, .08); background: #fff; box-shadow: 0 16px 28px rgba(0, 0, 0, .12); } .lbdp-mega__interieur { max-width: var(--lbdp-conteneur); margin-inline: auto; padding: 1rem var(--lbdp-gouttiere) 1.625rem; } /* Panneau colonnes : grand titre « Tous nos … » + filet, groupes empilés sur 3 colonnes (2 s'il y en a 4 au plus), marques à droite sur une largeur fixe comme le site officiel : 2 colonnes (340 px) ou 3 colonnes (540 px). */ .lbdp-mega__entete { display: block; margin: 0 0 1.5rem; padding-bottom: 1.125rem; border-bottom: 1px solid var(--lbdp-bord); color: var(--lbdp-texte); font-size: 1.4375rem; font-weight: 700; line-height: 1.2; text-decoration: none; } .lbdp-mega__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } .lbdp-mega--avec-marques .lbdp-mega__grille { grid-template-columns: minmax(0, 1fr) 340px; } .lbdp-mega--2-colonnes.lbdp-mega--avec-marques .lbdp-mega__grille { grid-template-columns: minmax(0, 1fr) min(540px, 48%); } .lbdp-mega--avec-visuels .lbdp-mega__grille { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .lbdp-mega--avec-marques.lbdp-mega--avec-visuels .lbdp-mega__grille { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 1.6fr); } .lbdp-mega__colonnes { columns: 3; column-gap: 40px; } .lbdp-mega--2-colonnes .lbdp-mega__colonnes { columns: 2; } .lbdp-mega__groupe { display: flex; flex-direction: column; align-items: flex-start; break-inside: avoid; margin-bottom: 1.125rem; } .lbdp-mega__titre { display: block; margin: 0 0 .75rem; color: var(--lbdp-texte); font-size: 1.0625rem; font-weight: 700; line-height: 1.5; text-decoration: none; } .lbdp-mega__liens { margin: 0; padding: 0; list-style: none; } .lbdp-mega__lien { display: inline-block; padding: 4px 0; color: var(--lbdp-texte); font-size: .9375rem; line-height: 1.3; text-decoration: none; } .lbdp-mega__entete:hover, a.lbdp-mega__titre:hover, .lbdp-mega__lien:hover { color: var(--lbdp-orange); } .lbdp-mega__tout { display: flex; align-items: center; gap: .375rem; grid-column: 1 / -1; align-self: start; margin-top: .5rem; color: var(--lbdp-orange); font-size: .875rem; font-weight: 600; text-decoration: none; } .lbdp-mega__tout:hover { color: var(--lbdp-orange-survol); } /* Colonne Marques : toutes les marques du menu, mini-logo + nom */ .lbdp-mega__marques .lbdp-mega__titre { margin-bottom: .5rem; } .lbdp-mega__marques-liste { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 1.875rem; } .lbdp-mega--2-colonnes .lbdp-mega__marques-liste { columns: 3; } .lbdp-mega__marques-liste li { break-inside: avoid; } .lbdp-mega__marque { display: flex; align-items: center; gap: .625rem; min-height: 32px; padding: 2px 0; color: var(--lbdp-texte-2); font-size: .9375rem; line-height: 1.3; text-decoration: none; white-space: nowrap; } .lbdp-mega__marque:hover, .lbdp-mega__marque:focus-visible { color: var(--lbdp-orange); } /* Logos en gris comme le site officiel, en couleur au survol */ .lbdp-mega__marque-logo { flex: none; width: 44px; height: 28px; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; } .lbdp-mega__marque:hover .lbdp-mega__marque-logo, .lbdp-mega__marque:focus-visible .lbdp-mega__marque-logo { filter: none; opacity: 1; } .lbdp-mega__visuels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; margin: 0; padding: 0; list-style: none; } .lbdp-visuel { display: flex; flex-direction: column; gap: 8px; color: var(--lbdp-texte); font-size: .875rem; font-weight: 600; text-decoration: none; } .lbdp-visuel:hover { color: var(--lbdp-orange); } .lbdp-visuel__cadre { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--lbdp-r-carte); background: var(--lbdp-fond); } .lbdp-visuel__image { width: 75%; height: 75%; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s; } .lbdp-visuel:hover .lbdp-visuel__image { transform: scale(1.04); } /* Panneau logos (Marques) */ .lbdp-logos--grand { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } /* Hauteur de référence des panneaux Marques, Personnalisation et Métiers : 4 rangées de logos de 94 px (4 × 94 + 3 × 12 = 412 px). Les cartes des deux autres panneaux se calent dessus (voir plus bas). */ .lbdp-logos--grand .lbdp-logo { height: 94px; padding: 12px 18px; } .lbdp-logos--grand .lbdp-logo__image { max-height: 54px; } /* Panneau cartes (Personnalisation, Métiers) */ /* Même hauteur de panneau que Marques (demande d'Enes) : 412 px de logos − 42 px du lien « Tout voir » = 370 px de cartes, réparties en rangées égales (2 rangées pour 6 ou 8 cartes) ; la photo remplit la carte. */ .lbdp-mega__cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; height: 370px; margin: 0; padding: 0; list-style: none; } .lbdp-mega__cartes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lbdp-mega__cartes--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } /* plus de 12 cartes (Métiers) */ .lbdp-mega__cartes > li { min-height: 0; } .lbdp-mega__cartes .lbdp-carte-menu { height: 100%; aspect-ratio: auto; } .lbdp-carte-menu { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--lbdp-r-carte); background: var(--lbdp-fond); text-decoration: none; } .lbdp-carte-menu__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .lbdp-carte-menu:hover .lbdp-carte-menu__image { transform: scale(1.04); } .lbdp-carte-menu__titre { position: absolute; left: 10px; bottom: 10px; padding: 7px 12px; border-radius: var(--lbdp-r); background: #fff; color: var(--lbdp-texte); font-size: .8125rem; font-weight: 600; line-height: 1.3; } .lbdp-carte-menu:hover .lbdp-carte-menu__titre { color: var(--lbdp-orange); } .lbdp-mega__pied { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-top: 1.25rem; } .lbdp-mega__pied .lbdp-mega__lien { padding: 0; } .lbdp-mega__pied .lbdp-mega__tout { margin: 0; } } @media (min-width: 1500px) { .lbdp-menu__lien { font-size: 1.03125rem; } /* 16,5 px comme le site officiel sur grand écran */ } @media (min-width: 1024px) and (max-width: 1279.98px) { .lbdp-menu__lien { padding-inline: .5rem; font-size: .875rem; } .lbdp-menu__lien + .lbdp-menu__bascule { margin-left: -.5rem; padding-right: .375rem; } .lbdp-logos--grand .lbdp-logo { padding: 12px 14px; } .lbdp-logos--grand .lbdp-logo__image { max-height: 48px; } } /* 15 bis. Boutons flottants en bas à droite : panier (ordinateur) et retour en haut ------ Balisage : template-parts/flottants.php ; comportement : base.js, section 3 bis. */ .lbdp-flottants { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 35; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: opacity .2s, visibility .2s, translate .2s; } .lbdp-flottant { position: relative; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--lbdp-bord); border-radius: var(--lbdp-r-carte); background: #fff; color: var(--lbdp-texte); box-shadow: 0 2px 10px rgba(0, 0, 0, .1); cursor: pointer; text-decoration: none; transition: border-color .2s, background-color .2s; } .lbdp-flottant:hover, .lbdp-flottant:focus-visible { border-color: var(--lbdp-bord-survol); color: var(--lbdp-texte); } /* Panier flottant : ordinateur seulement. Sur téléphone et tablette, l'en-tête (complet ou compact) garde le panier sous le pouce (Enes, 05/10/2026 : « le panier en bas à droite sur mobile, pas besoin »). */ @media (max-width: 1023.98px) { .lbdp-flottant--panier { display: none; } } .lbdp-flottant--panier .lbdp-panier-compteur { top: -8px; right: auto; left: -8px; } .lbdp-flottant--haut { border-color: var(--lbdp-orange); background: var(--lbdp-orange); color: #fff; } .lbdp-flottant--haut:hover, .lbdp-flottant--haut:focus-visible { border-color: var(--lbdp-orange-survol); background: var(--lbdp-orange-survol); color: #fff; } @media (max-width: 1023.98px) { /* Fiche produit : au-dessus de la barre d'achat collante */ body.single-product:has(.lbdp-barre-achat.est-visible) .lbdp-flottants { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); } } /* Ils s'effacent quand ils cacheraient quelque chose (audit du 01/10/2026) : - fiche produit sur téléphone, tant que les choix couleur / taille sont à l'écran (classe posée par produit.js) ; - panier et commande : la flèche « remonter » couvrait les boutons de paiement en bas de page. */ @media (max-width: 1023.98px) { html.lbdp-choix-visibles .lbdp-flottants { visibility: hidden; opacity: 0; pointer-events: none; } body.woocommerce-cart .lbdp-flottant--haut, body.woocommerce-checkout .lbdp-flottant--haut { display: none; } } /* 15 ter. Badge Avis Vérifiés (widget du module, en bas à gauche), ORDINATEUR seulement : sous 1 024 px il est masqué et remplacé par la pastille (15 ter bis). Taille : demande d'Enes du 01/10/2026 au soir, plus petit (150 px réglés chez Avis Vérifiés). Le widget pose sa largeur dans sa propre feuille : !important nécessaire. Il s'efface quand un panneau est ouvert (menu, filtres, panier latéral) et quand la visionneuse photo est ouverte. (Les anciennes règles « téléphone » du badge, sans effet depuis la pastille, ont été retirées le 06/10/2026.) */ [class^="skeepers-widget-wrapper"] { width: 116px !important; transition: opacity .2s, visibility .2s, translate .2s; } html.lbdp-bloque [class^="skeepers-widget-wrapper"] { visibility: hidden; opacity: 0; pointer-events: none; } /* Visionneuse photo de la fiche (PhotoSwipe de WooCommerce) ouverte : le badge et les boutons flottants passaient par-dessus (contrôle du 04/10/2026). */ html:has(.pswp--open) :is([class^="skeepers-widget-wrapper"], .lbdp-flottants) { visibility: hidden; opacity: 0; pointer-events: none; } /* Téléphone, fiche produit et page Devis : les boutons flottants couvraient le titre et les encarts dès le premier écran (contrôle du 05/10/2026). La barre d'achat collante remplace le panier flottant, le devis a ses boutons. */ @media (max-width: 767.98px) { body.single-product .lbdp-flottants, body[class*="page-template-page-demande-devis"] .lbdp-flottants { display: none; } } /* 15 ter bis. Pastille Avis Vérifiés du téléphone et de la tablette (template-parts/flottants.php) : une ligne de 30 px « ★ 4,7/5 Avis Vérifiés » à la place du grand badge du widget (Enes, 05/10/2026 : « plus simple, moins de place en longueur »). Elle disparaît là où le badge disparaissait (panneaux ouverts, choix de taille, panier, commande, fiche, devis, défilement des listes, visionneuse). */ .lbdp-avis-pastille { display: none; } @media (max-width: 1023.98px) { [class^="skeepers-widget-wrapper"] { display: none !important; } /* Aux couleurs d'Avis Vérifiés (bleu, texte blanc), sur deux lignes : « ★ 4,7/5 » puis « Avis Vérifiés » (Enes). */ .lbdp-avis-pastille { position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 34; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 5px 9px; border-radius: var(--lbdp-r); background: #1A5FD0; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); color: #fff; line-height: 1.1; text-decoration: none; white-space: nowrap; transition: opacity .2s, visibility .2s; } .lbdp-avis-pastille:hover, .lbdp-avis-pastille:focus-visible { color: #fff; } .lbdp-avis-pastille__note { display: inline-flex; align-items: center; gap: 5px; font-size: .8125rem; } .lbdp-avis-pastille__note strong { font-weight: 700; } /* Étoiles : rangée pâle dessous, rangée blanche dessus coupée à la note (4,7 / 5 = 94 %) */ .lbdp-avis-pastille__etoiles { position: relative; display: inline-block; color: rgba(255, 255, 255, .35); font-size: .9375rem; line-height: 1; } .lbdp-avis-pastille__etoiles > span { position: absolute; inset: 0 auto 0 0; width: var(--lbdp-note, 100%); overflow: hidden; color: #fff; white-space: nowrap; } .lbdp-avis-pastille__nom { font-size: .625rem; font-weight: 600; letter-spacing: .01em; opacity: .95; } html.lbdp-bloque .lbdp-avis-pastille, html.lbdp-choix-visibles .lbdp-avis-pastille, html:has(.pswp--open) .lbdp-avis-pastille, body.woocommerce-cart .lbdp-avis-pastille, body.woocommerce-checkout .lbdp-avis-pastille, body.single-product .lbdp-avis-pastille, body[class*="page-template-page-demande-devis"] .lbdp-avis-pastille, /* Pages faites de cartes produit : cachée tant que le visiteur n'a pas défilé (html.lbdp-a-defile, base.js 3 bis) ; au premier écran d'un téléphone de 375 px elle couvrait le prix de la 1re carte (audit du 09/10/2026, M12). */ html:not(.lbdp-a-defile) body.lbdp-liste-produits .lbdp-avis-pastille { visibility: hidden; opacity: 0; pointer-events: none; } } /* 15 quater. Pages faites de cartes produit sur téléphone (body.lbdp-liste-produits : listes, recherche, Promotions, accueil) : boutons flottants et badge Avis Vérifiés effacés PENDANT le défilement, de retour 600 ms après l'arrêt (classe html.lbdp-defilement, base.js 3 bis ; point D1 du 03/10/2026) : ils se posaient sur les prix des cartes. Le panier flottant reste affiché à l'arrêt ; la taille du badge ne change pas (elle se règle chez Avis Vérifiés). Fondu + léger glissement vers le bas, fondu seul si l'appareil demande moins d'animations. Fin de page : les mentions du pied gardent la hauteur des boutons (16 + 46 + 10 + 46 px) en marge basse, pour qu'à l'arrêt tout en bas les boutons ne couvrent plus aucun texte ni lien. */ @media (max-width: 767.98px) { /* Flèche « remonter » et pastille Avis Vérifiés : plus effacées pendant le défilement (Enes, 05/10/2026 : « laisse les étoiles affichées tout le temps sur tel, et le remonter aussi ») ; le grand badge du widget reste masqué. */ html.lbdp-defilement body.lbdp-liste-produits [class^="skeepers-widget-wrapper"] { visibility: hidden; opacity: 0; pointer-events: none; } body.lbdp-liste-produits .lbdp-pied__legal { padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) { html.lbdp-defilement body.lbdp-liste-produits [class^="skeepers-widget-wrapper"] { translate: 0 12px; } } @media (min-width: 1024px) { .lbdp-flottants { right: 24px; bottom: 24px; gap: 12px; } .lbdp-flottant { width: 52px; height: 52px; } /* Panier : même taille que le bouton « remonter » juste dessous (demande d'Enes, 01/10/2026) */ .lbdp-flottant--panier { display: flex; box-shadow: 0 4px 16px rgba(0, 0, 0, .16); } .lbdp-flottant--panier .lbdp-icone { width: 24px; height: 24px; } .lbdp-flottant--panier .lbdp-panier-compteur { top: -9px; left: -9px; min-width: 22px; height: 22px; border-radius: 11px; font-size: .75rem; } } /* 16. Panier latéral () et mini-panier ------------------------------------ */ .lbdp-panier { position: fixed; inset: 0 0 0 auto; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; overflow: hidden; background: #fff; color: var(--lbdp-texte); } .lbdp-panier[open] { display: flex; animation: lbdp-glisse-gauche .25s ease-out; } .lbdp-panier::backdrop { background: rgba(26, 26, 26, .4); animation: lbdp-fondu .25s ease-out; } /* Fermeture (base.js) : le panneau repart vers la droite et le voile s'efface avant la fermeture du */ .lbdp-panier.est-en-fermeture { animation: lbdp-sortie-droite .22s ease-in forwards; } .lbdp-panier.est-en-fermeture::backdrop { animation: lbdp-fondu .22s ease-in reverse forwards; } @keyframes lbdp-glisse-gauche { from { transform: translateX(100%); } to { transform: none; } } @keyframes lbdp-sortie-droite { from { transform: none; } to { transform: translateX(100%); } } @keyframes lbdp-fondu { from { opacity: 0; } to { opacity: 1; } } @media (min-width: 768px) { .lbdp-panier { width: 420px; max-width: 92vw; box-shadow: -12px 0 40px rgba(0, 0, 0, .12); } } .lbdp-panier__boite { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; } /* Panneau resserré (retour d'Enes du 01/10/2026 : trop d'espace en haut et en bas, peu d'articles visibles) : en-tête de 56 px, barre de livraison, articles et bas du panneau plus serrés. */ .lbdp-panier__tete { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .375rem .5rem .375rem 1rem; border-bottom: 1px solid var(--lbdp-bord); } .lbdp-panier__titre { margin: 0; font-size: 1.125rem; font-weight: 600; } .lbdp-panier__nombre { color: var(--lbdp-texte-3); font-size: .875rem; font-weight: 500; } .lbdp-panier .widget_shopping_cart_content { display: flex; flex: 1; flex-direction: column; min-height: 0; transition: opacity .15s; } .lbdp-panier .widget_shopping_cart_content.est-en-cours { opacity: .55; pointer-events: none; } @media (min-width: 768px) { .lbdp-panier__tete { padding: .375rem .75rem .375rem 1.5rem; } } .lbdp-livraison-offerte { flex: none; display: flex; flex-direction: column; gap: .375rem; padding: .625rem 1rem; background: var(--lbdp-orange-clair); color: var(--lbdp-texte); font-size: .8125rem; } .lbdp-livraison-offerte.est-offerte { background: var(--lbdp-vert-clair); color: var(--lbdp-vert-fonce); } .lbdp-livraison-offerte__texte { display: flex; align-items: center; gap: .5rem; margin: 0; font-weight: 500; } .lbdp-livraison-offerte__barre { display: block; width: 100%; height: 6px; overflow: hidden; border: 0; border-radius: 3px; background: #fff; appearance: none; } .lbdp-livraison-offerte__barre::-webkit-progress-bar { border-radius: 3px; background: #fff; } .lbdp-livraison-offerte__barre::-webkit-progress-value { border-radius: 3px; background: var(--lbdp-orange); } .lbdp-livraison-offerte__barre::-moz-progress-bar { border-radius: 3px; background: var(--lbdp-orange); } .est-offerte .lbdp-livraison-offerte__barre::-webkit-progress-value { background: var(--lbdp-vert); } .est-offerte .lbdp-livraison-offerte__barre::-moz-progress-bar { background: var(--lbdp-vert); } .lbdp-mini-panier__liste { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 0 1rem; list-style: none; overscroll-behavior: contain; } .lbdp-mini-panier__article { position: relative; display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--lbdp-bord); } .lbdp-mini-panier__vignette { flex: none; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; padding: 4px; border: 1px solid var(--lbdp-bord); border-radius: var(--lbdp-r); background: #fff; } .lbdp-mini-panier__vignette img { width: 100%; height: 100%; object-fit: contain; } .lbdp-mini-panier__infos { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; padding-right: 2.25rem; } .lbdp-mini-panier__nom { color: var(--lbdp-texte); font-size: .8125rem; font-weight: 500; line-height: 1.35; text-decoration: none; } .lbdp-mini-panier__nom:hover { color: var(--lbdp-orange); } /* Déclinaison, délai (point vert = en stock) et économie sur une même ligne, qui passe à la ligne si besoin */ .lbdp-mini-panier__details { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .lbdp-mini-panier__declinaison, .lbdp-mini-panier__donnees { color: var(--lbdp-texte-3); font-size: .75rem; } /* « 2 disponibles au maximum » : le « + » est grisé. Même ambre que « Quantité maximale » de la fiche (lot front n° 2) */ .lbdp-mini-panier__max { color: #7A4B00; font-size: .75rem; font-weight: 600; } /* Économie d'un article en promotion : badge orange clair (même badge que la page Panier, panier.css) */ .lbdp-mini-panier__economie { display: inline-block; padding: 2px 8px; border-radius: var(--lbdp-r-badge); /* pas de flex : il supprimerait l'espace avant le montant */ background: var(--lbdp-orange-clair); color: var(--lbdp-orange-texte); font-size: .75rem; font-weight: 600; line-height: 1.4; white-space: nowrap; } .lbdp-mini-panier__economie .amount { color: inherit; font-weight: inherit; } .lbdp-mini-panier__ligne { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 2px; } .lbdp-quantite { display: inline-flex; align-items: center; height: 36px; border: 1px solid var(--lbdp-champ); border-radius: var(--lbdp-r); background: #fff; } .lbdp-quantite__bouton { display: flex; align-items: center; justify-content: center; width: 34px; height: 100%; padding: 0; border: 0; background: none; color: var(--lbdp-texte); } .lbdp-quantite__bouton:hover { color: var(--lbdp-orange); } .lbdp-quantite__bouton--retirer:hover { color: var(--lbdp-erreur); } /* à 1 : corbeille (retire l'article) */ .lbdp-quantite__bouton:disabled { opacity: .35; cursor: not-allowed; } /* Écran tactile : boutons −/+ de 40 px (34 px auparavant, audit A5) */ @media (pointer: coarse), (max-width: 767.98px) { .lbdp-quantite { height: 40px; } .lbdp-quantite__bouton { width: 40px; } } .lbdp-quantite .lbdp-quantite__valeur { width: 44px; height: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--lbdp-texte); font-size: .8125rem; font-weight: 600; text-align: center; appearance: textfield; -moz-appearance: textfield; } .lbdp-quantite .lbdp-quantite__valeur::-webkit-inner-spin-button, .lbdp-quantite .lbdp-quantite__valeur::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; } .lbdp-quantite .lbdp-quantite__valeur:focus-visible { outline: 2px solid var(--lbdp-orange); outline-offset: -2px; } .lbdp-quantite--fixe { padding: 0 .75rem; font-size: .8125rem; } .lbdp-mini-panier__prix { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; white-space: nowrap; } .lbdp-mini-panier__barre { color: var(--lbdp-texte-3); font-size: .75rem; } .lbdp-mini-panier__ttc { font-size: .9375rem; font-weight: 700; } .lbdp-mini-panier__ttc.est-promo { color: var(--lbdp-orange); } .lbdp-mini-panier__ht { display: none; color: var(--lbdp-texte-3); font-size: .75rem; } /* affiché sur téléphone seulement (plus bas) */ .lbdp-mini-panier__supprimer { position: absolute; top: .5rem; right: -.5rem; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--lbdp-r); color: var(--lbdp-texte-3); text-decoration: none; /* 6,2:1 sur blanc (gris des délais : 2,7:1, revue WEB-19) */ } .lbdp-mini-panier__supprimer:hover { background: var(--lbdp-fond); color: var(--lbdp-erreur); } .lbdp-mini-panier__pied { flex: none; display: flex; flex-direction: column; gap: .625rem; padding: .75rem 1rem max(.75rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--lbdp-bord); background: #fff; } .lbdp-mini-panier__totaux { display: flex; flex-direction: column; gap: 2px; } .lbdp-mini-panier__total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0; font-size: .8125rem; } .lbdp-mini-panier__total--remise { color: var(--lbdp-vert-fonce); } .lbdp-mini-panier__total--ttc span:first-child { font-size: .9375rem; font-weight: 600; } .lbdp-mini-panier__total--ttc span:last-child { font-size: 1.25rem; font-weight: 700; } .lbdp-mini-panier__total--ttc .lbdp-mini-panier__note { color: var(--lbdp-texte-3); font-size: .75rem; font-weight: 400; } .lbdp-mini-panier__confiance { display: contents; } /* ordinateur : réassurance sur deux lignes, comme avant */ /* Téléphone : bas du panneau plus court (Enes, 05/10/2026) : le HT sous le total au lieu de sa propre ligne, boutons de 44 px, « Paiement sécurisé » et la note Avis Vérifiés sur UNE ligne sans les logos (ils restent sur les pages Panier et Commande). */ @media (max-width: 767.98px) { /* Séparation nette avec les articles qui défilent au-dessus : ombre vers le haut (Enes : « plus clair »). */ .lbdp-mini-panier__pied { gap: .375rem; padding-top: .5rem; box-shadow: 0 -8px 16px -8px rgba(0, 0, 0, .14); } .lbdp-mini-panier__totaux > .lbdp-mini-panier__total:first-child { display: none; } /* « > span » : seulement le bloc du montant, jamais les morceaux du prix (le « € » passait à la ligne). */ .lbdp-mini-panier__total--ttc > span:last-child { display: flex; flex-direction: column; align-items: flex-end; font-size: 1.125rem; line-height: 1.15; } .lbdp-mini-panier__total--ttc > span:first-child { font-size: .875rem; } .lbdp-mini-panier__ht { display: block; color: var(--lbdp-texte-3); font-size: .6875rem; font-weight: 400; } .lbdp-mini-panier__boutons .lbdp-bouton { min-height: 40px; font-size: .875rem; } .lbdp-mini-panier__confiance { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 12px; } .lbdp-mini-panier__securite .lbdp-logos-paiement, .lbdp-mini-panier__avis-detail { display: none; } .lbdp-mini-panier__securite, .lbdp-mini-panier__avis { font-size: .6875rem; line-height: 1.3; } } /* « Voir le panier » et « Commander » côte à côte (Commander, plus large, à droite) */ .lbdp-mini-panier__boutons { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: .5rem; margin: 0; } .lbdp-mini-panier__boutons .lbdp-bouton { padding-inline: .75rem; } .lbdp-mini-panier__securite { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin: 0; color: var(--lbdp-texte-3); font-size: .75rem; line-height: 1.5; text-align: center; } .lbdp-mini-panier__securise { display: inline-flex; align-items: center; gap: 5px; } /* Les 9 logos sur UNE ligne, rétrécis à la largeur du panneau (Enes, 06/10/2026 : « pas sur 2 lignes ») */ .lbdp-mini-panier__securite .lbdp-logos-paiement { display: grid; flex: 0 0 100%; grid-template-columns: repeat(9, minmax(0, 38px)); justify-content: center; gap: 4px; } .lbdp-mini-panier__securite .lbdp-logos-paiement img { width: 100%; } /* Note Avis Vérifiés : étoile orange, lien vers la page Avis clients */ .lbdp-mini-panier__avis { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--lbdp-texte-2); font-size: .75rem; line-height: 1.5; text-decoration: none; } .lbdp-mini-panier__avis:hover { color: var(--lbdp-orange); } .lbdp-mini-panier__avis strong { color: var(--lbdp-texte); font-weight: 600; } .lbdp-mini-panier__avis .lbdp-icone { flex: none; color: var(--lbdp-orange); fill: currentColor; } /* « Complétez votre tenue » (template-parts/panier-suggestions.php) : 2 lignes compactes à la fin de la liste des articles, qui défilent avec elle (le bas du panneau et le bouton Payer ne bougent pas). */ .lbdp-mini-panier__suggestions { padding: 1rem 0 .5rem; } .lbdp-mini-panier__suggestions-titre { margin: 0 0 .25rem; color: var(--lbdp-texte); font-size: .875rem; font-weight: 600; } .lbdp-mini-panier__suggestions-liste { margin: 0; padding: 0; list-style: none; } .lbdp-mini-panier__suggestion { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; } .lbdp-mini-panier__suggestion + .lbdp-mini-panier__suggestion { border-top: 1px solid var(--lbdp-bord); } .lbdp-mini-panier__suggestion .lbdp-mini-panier__vignette { width: 56px; height: 56px; } .lbdp-mini-panier__suggestion-infos { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; } .lbdp-mini-panier__suggestion .lbdp-mini-panier__nom { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .lbdp-mini-panier__suggestion .price-ttc .amount { font-size: .875rem; } .lbdp-mini-panier__suggestion .lbdp-bouton { flex: none; min-height: 36px; padding: .375rem .75rem; font-size: .8125rem; } @media (pointer: coarse) { .lbdp-mini-panier__suggestion .lbdp-bouton { min-height: 40px; } } .lbdp-mini-panier__vide { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem 1rem; color: var(--lbdp-texte-3); text-align: center; } .lbdp-mini-panier__vide p { margin: 0; color: var(--lbdp-texte); font-weight: 500; } @media (min-width: 768px) { .lbdp-livraison-offerte { padding: .625rem 1.5rem; } .lbdp-mini-panier__liste { padding: 0 1.5rem; } .lbdp-mini-panier__vignette { width: 76px; height: 76px; } .lbdp-mini-panier__pied { padding: .875rem 1.5rem 1rem; } .lbdp-mini-panier__total { font-size: .875rem; } .lbdp-mini-panier__total--ttc span:first-child { font-size: 1rem; } .lbdp-mini-panier__total--ttc span:last-child { font-size: 1.375rem; } } /* 17. Pied de page ------------------------------------------------------------------ */ .lbdp-pied { margin-top: 2.5rem; background: var(--lbdp-fond); } @media (min-width: 1024px) { .lbdp-pied { margin-top: var(--lbdp-section); } } /* Bande orange pleine : 3 réassurances, texte blanc, filets blancs */ .lbdp-bande-orange { background: var(--lbdp-orange); color: #fff; } .lbdp-bande-orange__liste { display: flex; flex-direction: column; margin-block: 0; padding-block: .375rem; list-style: none; } .lbdp-bande-orange__item + .lbdp-bande-orange__item { border-top: 1px solid rgba(255, 255, 255, .35); } .lbdp-bande-orange__lien { display: flex; align-items: center; gap: .875rem; padding: .875rem 0; color: #fff; text-decoration: none; } .lbdp-bande-orange__lien:hover { color: #fff; } .lbdp-bande-orange__lien:hover .lbdp-bande-orange__titre { text-decoration: underline; text-underline-offset: .2em; } .lbdp-bande-orange__lien:focus-visible { outline-color: #fff; } .lbdp-bande-orange__icone { width: 28px; height: 28px; } .lbdp-bande-orange__textes { display: flex; flex-direction: column; gap: 1px; } .lbdp-bande-orange__titre { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; } .lbdp-bande-orange__precision { font-size: .8125rem; font-weight: 500; line-height: 1.4; } @media (min-width: 1024px) { .lbdp-bande-orange__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 1.625rem; } .lbdp-bande-orange__item + .lbdp-bande-orange__item { border-top: 0; border-left: 1px solid rgba(255, 255, 255, .35); } .lbdp-bande-orange__lien { justify-content: center; gap: 1rem; padding: .125rem 1rem; } .lbdp-bande-orange__icone { width: 34px; height: 34px; } .lbdp-bande-orange__titre { font-size: 1.125rem; } .lbdp-bande-orange__precision { font-size: .875rem; } } /* Contact + 4 colonnes */ .lbdp-pied__haut { display: flex; flex-direction: column; padding-block: .5rem 0; } .lbdp-pied__contact { order: 1; display: flex; flex-direction: column; gap: .5rem; padding-block: 1.5rem; font-size: .875rem; line-height: 1.6; } .lbdp-pied__logo { display: flex; align-self: flex-start; margin-bottom: .25rem; } .lbdp-pied__logo-image { display: block; width: auto; height: 30px; } .lbdp-pied__adresse { display: flex; align-items: flex-start; gap: .5rem; margin: 0; color: var(--lbdp-texte-2); } .lbdp-pied__adresse .lbdp-icone { margin-top: .25em; color: var(--lbdp-orange); } .lbdp-pied__email { display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; max-width: 100%; color: var(--lbdp-texte); font-size: 1rem; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; } .lbdp-pied__email .lbdp-icone { color: var(--lbdp-orange); } .lbdp-pied__email:hover { color: var(--lbdp-orange); } .lbdp-pied__delai { margin: 0; color: var(--lbdp-texte-3); } .lbdp-pied__colonne { border-bottom: 1px solid var(--lbdp-bord); } .lbdp-pied__titre { display: flex; align-items: center; justify-content: space-between; min-height: 52px; list-style: none; cursor: pointer; font-size: .9375rem; font-weight: 600; } .lbdp-pied__titre::-webkit-details-marker { display: none; } .lbdp-pied__chevron { color: var(--lbdp-orange); transition: transform .2s; } .lbdp-pied__colonne[open] .lbdp-pied__chevron { transform: rotate(180deg); } .lbdp-pied__liens { display: flex; flex-direction: column; margin: 0; padding: 0 0 1rem; list-style: none; } .lbdp-pied__liens a { display: inline-flex; align-items: center; min-height: 36px; color: var(--lbdp-texte-2); font-size: .8125rem; text-decoration: none; } .lbdp-pied__liens a:hover { color: var(--lbdp-orange); } /* Téléphone : base.js replie les colonnes (ouvertes dans le HTML pour l'ordinateur et sans JavaScript). En attendant, leur contenu est déjà caché (classe lbdp-js posée dans le ) : le pied ne se replie plus sous les yeux après le chargement (audit E2). */ @media (max-width: 1023.98px) { html.lbdp-js .lbdp-pied__colonne:not([data-lbdp-pret]) > .lbdp-pied__liens { display: none; } html.lbdp-js .lbdp-pied__colonne:not([data-lbdp-pret]) .lbdp-pied__chevron { transform: none; } } @media (min-width: 1024px) { .lbdp-pied__haut { display: grid; grid-template-columns: minmax(260px, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 2.5rem; padding-block: 3.25rem 2rem; } .lbdp-pied__contact { order: 0; gap: .75rem; padding: 0; } .lbdp-pied__logo-image { height: 40px; } .lbdp-pied__delai { margin-top: -.375rem; } .lbdp-pied__colonne { border: 0; } .lbdp-pied__titre { min-height: 0; margin-bottom: .75rem; cursor: default; pointer-events: none; } .lbdp-pied__chevron { display: none; } .lbdp-pied__liens { gap: .625rem; padding: 0; } .lbdp-pied__liens a { min-height: 0; } } /* Paiement, réseaux */ .lbdp-pied__milieu { display: flex; flex-direction: column; gap: 1.5rem; padding-block: 1.5rem; border-top: 1px solid var(--lbdp-bord); } .lbdp-pied__sous-titre { display: block; margin: 0 0 .5rem; font-size: .875rem; font-weight: 600; } .lbdp-paiements { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; } .lbdp-paiement { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 36px; padding: 0 .5rem; border: 1px solid var(--lbdp-bord); border-radius: var(--lbdp-r-badge); background: #fff; color: var(--lbdp-texte-2); font-size: .75rem; font-weight: 600; white-space: nowrap; } /* Logos de paiement : image de la médiathèque (lbdp_logos_paiement_html()), les pastilles texte restent en secours */ /* Logos de paiement : un SVG par moyen (format carte 48 × 32, lbdp_logos_paiement_html()), pastilles texte en secours */ /* Logos agrandis (retour d'Enes du 02/10/2026) ; pas d'arrondi ajouté : chaque fichier a déjà son cadre arrondi. Sur téléphone : deux rangées de quatre plutôt qu'une rangée de six et une de deux. */ .lbdp-logos-paiement { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; } .lbdp-logos-paiement li { display: block; } .lbdp-logos-paiement img { display: block; width: 54px; height: auto; border-radius: 0; } .lbdp-contenu .lbdp-logos-paiement img { border-radius: 0; } /* pas l'arrondi des images de contenu (.lbdp-contenu img) */ @media (max-width: 599.98px) { .lbdp-logos-paiement { display: grid; grid-template-columns: repeat(5, max-content); } /* 9 logos depuis le 06/10/2026 (Virement) : 5 + 4 */ } .lbdp-logos-paiement-bloc { display: flex; justify-content: center; margin-top: 1rem; } .lbdp-reseaux { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; } .lbdp-reseaux a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--lbdp-texte); text-decoration: none; transition: color .15s, box-shadow .15s; } .lbdp-reseaux a:hover { color: var(--lbdp-orange); box-shadow: inset 0 0 0 1px var(--lbdp-orange-bord); } @media (min-width: 1024px) { /* paiement (colonne souple, pastilles à la ligne si besoin) | réseaux */ .lbdp-pied__milieu { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 2rem; } } /* Mentions */ .lbdp-pied__legal { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; padding-block: .75rem 2.5rem; color: var(--lbdp-texte-3); font-size: .75rem; } .lbdp-pied__copyright { margin: 0; } .lbdp-pied__legal-liste { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0; padding: 0; list-style: none; } .lbdp-pied__legal-liste a { display: inline-flex; align-items: center; min-height: 32px; color: var(--lbdp-texte-3); } .lbdp-pied__legal-liste a:hover { color: var(--lbdp-orange); } /* 18. Gabarits génériques (page, articles, 404) et habillage Woo minimal --------------- */ .lbdp-principal { display: block; min-height: 40vh; } .lbdp-titre-page { margin: 0 0 1.5rem; } .lbdp-page, .lbdp-liste, .lbdp-article, .lbdp-woo { padding-bottom: 1rem; } .lbdp-contenu { color: var(--lbdp-texte-2); font-size: .9375rem; line-height: 1.7; } .lbdp-contenu > :first-child { margin-top: 0; } .lbdp-contenu h2, .lbdp-contenu h3, .lbdp-contenu h4 { margin: 2rem 0 .75rem; } .lbdp-contenu ul, .lbdp-contenu ol { margin: 0 0 1em; padding-left: 1.25rem; } .lbdp-contenu li + li { margin-top: .25rem; } .lbdp-contenu img { height: auto; border-radius: var(--lbdp-r-carte); } .lbdp-contenu table { width: 100%; margin: 0 0 1.5rem; border-collapse: collapse; font-size: .875rem; } .lbdp-contenu th, .lbdp-contenu td { padding: .625rem .75rem; border-bottom: 1px solid var(--lbdp-bord); text-align: left; vertical-align: top; } .lbdp-contenu th { color: var(--lbdp-texte); font-weight: 600; } .lbdp-contenu blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--lbdp-orange); background: var(--lbdp-orange-clair); color: var(--lbdp-texte); } .lbdp-contenu iframe { max-width: 100%; } .lbdp-liste__vide { color: var(--lbdp-texte-3); } .lbdp-grille-articles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } @media (min-width: 768px) { .lbdp-grille-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .lbdp-grille-articles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } } .lbdp-carte-article { position: relative; display: flex; flex-direction: column; gap: .75rem; } .lbdp-carte-article__image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--lbdp-r-carte); } .lbdp-carte-article__corps { display: flex; flex-direction: column; gap: .375rem; } .lbdp-carte-article__date { color: var(--lbdp-texte-3); font-size: .75rem; } .lbdp-carte-article__titre { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; } .lbdp-carte-article__lien { color: var(--lbdp-texte); text-decoration: none; } .lbdp-carte-article__lien::after { content: ""; position: absolute; inset: 0; } .lbdp-carte-article:hover .lbdp-carte-article__lien { color: var(--lbdp-orange); } .lbdp-carte-article__extrait { margin: 0; color: var(--lbdp-texte-2); font-size: .875rem; } .lbdp-article__corps { max-width: 860px; margin-inline: auto; } .lbdp-article__meta { color: var(--lbdp-texte-3); font-size: .8125rem; } .lbdp-article__image img { width: 100%; border-radius: var(--lbdp-r-carte); } .lbdp-article__nav { max-width: 860px; margin: 2.5rem auto 0; } .lbdp-article__nav .nav-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; } .lbdp-article__nav a { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.25rem; border: 1px solid var(--lbdp-bord); border-radius: var(--lbdp-r-carte); color: var(--lbdp-texte); text-decoration: none; } .lbdp-article__nav a:hover { border-color: var(--lbdp-orange); } .lbdp-article__nav-libelle { color: var(--lbdp-texte-3); font-size: .75rem; } .lbdp-article__nav-titre { font-weight: 600; } .lbdp-introuvable { padding-block: 3rem 1rem; text-align: center; } .lbdp-introuvable__code { margin: 0; color: var(--lbdp-orange); font-size: 4rem; font-weight: 700; line-height: 1; } .lbdp-introuvable__texte { max-width: 560px; margin: 0 auto 1.5rem; color: var(--lbdp-texte-2); } .lbdp-introuvable__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; } /* Listing WooCommerce par défaut (en attendant boutique.css) */ .woocommerce-products-header__title { margin: 0 0 1rem; } .woocommerce-result-count { margin: 0 0 1rem; color: var(--lbdp-texte-3); font-size: .8125rem; } .woocommerce-ordering { margin: 0 0 1.5rem; } .woocommerce-ordering select { width: auto; min-height: 44px; } .lbdp-woo .term-description { color: var(--lbdp-texte-2); font-size: .875rem; } /* 18 bis. Texte SEO replié (« Lire la suite » en bas de l'accueil, des catégories et de la page Devis) --------- UN seul composant pour les trois pages (06/10/2026 ; avant : trois copies qui avaient divergé). Rendu de référence : celui des catégories. Balisage :
> (titre .lbdp-seo__titre + chevron) puis
(inc/boutique.php, page-demande-devis.php, template-parts/accueil/seo.php). .lbdp-seo = espace au-dessus de la section (catégories, Devis ; l'accueil garde l'espacement de ses sections, .lbdp-section). Placé après .lbdp-contenu (section 18) pour passer devant ses marges. */ .lbdp-seo { padding-top: 2.5rem; } .lbdp-seo__details { border: 1px solid var(--lbdp-bord); border-radius: var(--lbdp-r-carte); } .lbdp-seo__resume { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1rem 1.125rem; list-style: none; cursor: pointer; } .lbdp-seo__resume::-webkit-details-marker { display: none; } .lbdp-seo__titre { margin: 0; font-size: .9375rem; font-weight: 600; line-height: 1.4; } .lbdp-seo__chevron { color: var(--lbdp-orange); transition: transform .2s; } .lbdp-seo__details[open] .lbdp-seo__chevron { transform: rotate(180deg); } .lbdp-seo__resume:hover .lbdp-seo__titre { color: var(--lbdp-orange); } .lbdp-seo__texte { padding: 0 1.125rem 1.25rem; font-size: .875rem; line-height: 1.7; } /* « .lbdp-seo__details » devant : passe aussi devant les titres de pages.css (chargée après base.css sur la page Devis) */ .lbdp-seo__details .lbdp-seo__texte :is(h2, h3, h4) { margin: 1.25rem 0 .5rem; font-size: 1rem; font-weight: 600; } .lbdp-seo__texte p { margin: 0 0 .75rem; } @media (min-width: 1024px) { .lbdp-seo { padding-top: 3.5rem; } .lbdp-seo__resume { padding: 1.375rem 1.75rem; } .lbdp-seo__titre { font-size: 1rem; } .lbdp-seo__texte { padding: 0 1.75rem 1.5rem; } } /* 19. Mouvements réduits ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }