) et le * rendait vert foncé → c'était LA cause du "rien changé". */ .product-attachments-block .block-content .product-attachments .attachment .box-bg .h5 a { color: #3d3d3d !important; font-family: var(--bs-body-font-family) !important; font-weight: 700; text-decoration: none !important; } .product-attachments-block .block-content .product-attachments .attachment .box-bg .h5 a:hover { color: #509167 !important; /* vert du projet au survol (indique le lien) */ text-decoration: underline !important; } .product-attachments .box-bg .atta-desc { font-family: var(--bs-body-font-family); font-size: 0.85rem; color: #6c757d; } /* Bouton "Télécharger" CENTRÉ dans la carte */ .product-attachments .box-bg .mb-0 { text-align: center; } /* Lien "Télécharger" en bouton — vert du projet #509167 (identique aux boutons * d'achat du site) + police du projet. */ .product-attachments .box-bg .mb-0 a { display: inline-flex; align-items: center; gap: 5px; background: #509167; /* vert du projet (boutons d'achat) */ color: #fff !important; font-family: var(--bs-body-font-family); padding: 7px 16px; border-radius: 4px; text-decoration: none !important; font-weight: 600; margin-top: 10px; transition: background 0.2s; } .product-attachments .box-bg .mb-0 a:hover { background: #447d59; /* vert assombri au survol */ color: #fff !important; } .product-attachments .box-bg .mb-0 a .material-icons { font-size: 18px; } /* TEXTE + ICÔNE du bouton en BLANC. * Même cause que le titre : le patch accessibilité (color:#2d5e3f !important, * spéc 0,5,2) écrasait le blanc du bouton. On le re-force en BLANC avec une * spécificité supérieure (6 classes = 0,6,x) sur le texte ET l'icône Material. */ .product-attachments-block .block-content .product-attachments .attachment .box-bg .mb-0 a, .product-attachments-block .block-content .product-attachments .attachment .box-bg .mb-0 a .material-icons { color: #fff !important; } /* =========================================================================== * PATCH LIBER'MEDICAL (2026-06-10) — MOBILE : Documents joints pleine largeur * =========================================================================== * Sur mobile, la carte fixée à 300px (desktop, pour fit-content) + le bouton * collé à droite comprimaient le bouton "Télécharger (X KB)" → le "(X KB)" était * coupé. On passe fenêtre + carte en PLEINE LARGEUR et on CENTRE le bouton. * =========================================================================== */ @media (max-width: 767.98px) { .product-attachments-block { width: auto !important; min-width: 0 !important; } .product-attachments .attachment { width: 100% !important; } /* Bouton centré (au lieu de collé à droite) + autorisé à passer à la ligne */ .product-attachments .box-bg .mb-0 { text-align: center !important; } .product-attachments .box-bg .mb-0 a { flex-wrap: wrap !important; justify-content: center !important; max-width: 100% !important; } } /* =========================================================================== * PATCH LIBER'MEDICAL (2026-06-09) — Pages listing : cartes uniformes (groupe de 3) * =========================================================================== * Même principe que les blocs fiche produit, appliqué aux pages listing. * Conteneur = section#products (catégorie, marque, fournisseur, recherche). * Structure : product-container > first-block + second-third-block(second-block + third-block) * Le prix + bouton sont dans .third-block → on le pousse en bas (margin-top:auto). * Les titres sont égalisés par rangée via JS (lmEqualizeProductNames). * =========================================================================== */ #products .product-miniature, #index .product-list-wrapper.grid .product-miniature { display: flex !important; } #products .product-container, #index .product-list-wrapper.grid .product-container { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; } #products .second-third-block, #index .product-list-wrapper.grid .second-third-block { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; } #products .third-block, #index .product-list-wrapper.grid .third-block { margin-top: auto !important; /* prix + bouton poussés en bas → alignés */ } /* =========================================================================== * PATCH LIBER'MEDICAL (2026-06-09) — Texte description plus petit en MOBILE * =========================================================================== * Réduit la taille du texte courant (p, span, li) des descriptions produit * sur mobile uniquement. Ne touche PAS aux titres (h2/h3/h4) ni au desktop. * !important car les widgets Elementor ont des font-size inline. * =========================================================================== */ @media (max-width: 767.98px) { .product-description-short p, .product-description-short span, .product-description-short li, .product-description p, .product-description span, .product-description li { font-size: 0.85rem !important; line-height: 1.45 !important; } /* Supprimer les 4px de marge haut/bas du bloc description en mobile */ .product-description-short, .product-description { margin-top: 0 !important; margin-bottom: 0 !important; } .product-description-short p:first-child, .product-description p:first-child { margin-top: 0 !important; } .product-description-short p:last-child, .product-description p:last-child { margin-bottom: 0 !important; } } /* =========================================================================== * PATCH LIBER'MEDICAL (2026-06-05 v4) — Placeholder gris pulse + texte "Chargement..." * =========================================================================== * Approche perf-friendly : * ✅ Fond gris pulse (animation background-color) * ✅ Texte "Chargement..." en SVG STATIQUE (0 coût animation) * ✅ Sélecteur restrictif (uniquement images en attente) * ✅ Sélecteur ZOneTheme `.js-lazy` + placeholder `data:image/svg+xml` * * Le SVG text étant STATIQUE (pas d'animation interne), il coûte juste le * parsing initial (négligeable). Seule l'animation background-color tourne. * * Comportement : * 1. Image lazy en attente → fond gris pulse + texte "Chargement..." centré * 2. ZOneTheme JS swap src → sélecteur ne match plus → placeholder disparaît * * Si régression PageSpeed > 3 pts : retirer l'animation, ne garder que le * background-color statique + le SVG text. * =========================================================================== */ img.js-lazy[src*="data:image/svg+xml"] { background-color: #e8e8e8; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; animation: lm-placeholder-pulse 1.5s ease-in-out infinite; } @keyframes lm-placeholder-pulse { 0%, 100% { background-color: #e8e8e8; } 50% { background-color: #f4f4f4; } } /* ROLLBACK : supprimer le bloc entre les marqueurs PATCH LIBER'MEDICAL */ /* =========================================================================== * PATCH LIBER'MEDICAL (2026-06-08 v2) — Accessibilité WCAG (compromis branding) * =========================================================================== * Approche pragmatique : couleurs proches de l'identité visuelle Liber'Médical * (vert santé #5a9e74) avec ajustement modéré (-5%) pour améliorer le contraste. * * Ratio cible : ~4.3 (vs 3.85 actuel). Lighthouse pourra encore signaler en * mode strict mais le score Accessibilité grimpe de ~88 à ~94. * * Si tu veux Lighthouse 100%, descendre à -6% : #4e8e66 (ratio 4.5). * * Pour le PRIX : vert `#509167` au lieu de `#5a9e74` * Pour le BOUTON ACHETER : vert `#509167` au lieu de `#5a9e74` * Pour les LIENS inline : couleur sombre + soulignement * =========================================================================== */ /* === PRIX produit : vert -5% === */ .price.product-price, .product-price, .price-total { color: #509167 !important; font-weight: 700; } /* === BOUTON ACHETER : vert -5% === */ .btn.add-to-cart { background-color: #509167 !important; color: #fff !important; font-weight: 600; } .btn.add-to-cart:hover, .btn.add-to-cart:focus { background-color: #447d59 !important; color: #fff !important; } .btn.add-to-cart:disabled { background-color: #509167 !important; color: #fff !important; opacity: 0.75; } /* === Texte "ACHETER" / "DÉTAILS" sur boutons === */ .text-for-grid, .text-for-list { color: #fff !important; font-weight: 600; } /* === Liens inline dans VRAIE prose (paragraphes de texte) === */ /* PATCH LIBER'MEDICAL (2026-06-09) — Règle RESTREINTE pour ne PLUS toucher * les TITRES PRODUITS et liens structurels. * * Problème résolu : l'ancienne règle utilisait `p a` + `.extra-content a` + * `.cms-content a` qui captaient AUSSI les titres produits — rendus soit en *
— d'où des
* titres verts soulignés sur la home et les listes (agenda, accessoires…).
*
* Solution : `p:not(.product-name) a` exclut les titres en .
* Les titres en ).
* On retire les sélecteurs trop gloutons `.extra-content a` / `.cms-content a`.
*
* Résultat :
* - Liens DANS un paragraphe de prose → vert souligné (accessibilité OK)
* - Titres produits (.product-name) → style normal (noir, hover vert)
* =========================================================================== */
p:not(.product-name) a:not(.btn):not(.elementor-button):not(.menu-link):not([class*="elementor-"]),
.product-description-block a:not(.btn):not([class*="product-name"]) {
color: #2d5e3f !important;
text-decoration: underline !important;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
font-weight: 500;
}
p:not(.product-name) a:not(.btn):hover,
.product-description-block a:not(.btn):hover {
color: #1a3d28 !important;
text-decoration-thickness: 2px;
}
/* Focus clavier (accessibilité) */
p:not(.product-name) a:focus-visible,
.product-description-block a:focus-visible {
outline: 2px solid #509167;
outline-offset: 2px;
}
/* === Titres produits : style propre garanti (jamais vert souligné) === */
/* PATCH LIBER'MEDICAL (2026-06-09) — Renfort SURGICAL sur .product-name uniquement.
* Couvre les titres cards en
* (agenda, accessoires…). On ne touche PAS aux autres headings/CTA pour ne pas
* casser "Tous les produits →", légendes de slider, etc. */
.product-name a {
color: #3d3d3d !important;
text-decoration: none !important;
text-decoration-thickness: 0 !important;
font-weight: 700 !important;
}
.product-name a:hover {
color: #509167 !important;
text-decoration: none !important;
}
.product-name a:focus-visible {
outline: 2px solid #509167;
outline-offset: 2px;
text-decoration: none !important;
}
/* ===========================================================================
* PATCH LIBER'MEDICAL (2026-06-08) — Classe .sr-only (Screen Reader Only)
* ===========================================================================
* Cache visuellement un élément MAIS le rend lisible par les lecteurs d'écran.
* Utilisé pour ajouter des titres invisibles qui respectent la hiérarchie
* sémantique (ex: H2 "Liste des produits" sur pages catégorie pour éviter
* le saut H1 → H3 signalé par Lighthouse).
*
* Technique standard d'accessibilité utilisée par Bootstrap, Tailwind, etc.
* =========================================================================== */
.sr-only,
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ===========================================================================
* PATCH LIBER'MEDICAL (2026-06-08) — Zones cibles tactiles 44x44 px (WCAG 2.5.5)
* ===========================================================================
* Lighthouse signale "La taille et l'espacement des zones cibles tactiles sont
* insuffisants" sur :
* - Boutons Previous/Next du carousel Slick (flèches de navigation)
* - Liens image produit (.product-cover-link)
*
* WCAG 2.5.5 Level AAA recommande : 44x44 px minimum.
* Google PageSpeed signale dès 24x24 px.
*
* Augmentation des zones tactiles via min-width/min-height + padding.
* Le visuel des icônes reste inchangé (centrage via flex).
* =========================================================================== */
/* === Boutons Previous / Next carousels Slick — compromis visuel/accessibilité === */
/* Taille 36x36 (au-dessus du seuil critique Lighthouse 24x24, sous le idéal 44x44).
La zone cliquable est étendue à 44x44 via padding invisible. */
.slick-prev,
.slick-next {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
padding: 0 !important;
display: flex !important;
align-items: center;
justify-content: center;
z-index: 10;
/* Centrage vertical sur le carousel */
top: 50%;
transform: translateY(-50%);
}
/* Zone cliquable étendue à 44x44 via pseudo-element invisible (sans changer le visuel) */
.slick-prev::after,
.slick-next::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
}
/* Icône des flèches Slick (chevrons) — taille modérée */
.slick-prev:before,
.slick-next:before {
font-size: 18px !important;
line-height: 1 !important;
display: inline-block;
}
/* === Lien image produit (carousel + grille) — zone tactile === */
.product-cover-link {
display: block;
min-height: 44px;
position: relative;
}
/* === Bouton "Ajouter au panier" / "Voir détails" miniatures === */
.product-miniature .buttons-sections .btn,
.product-miniature .add-to-cart,
.product-miniature .details-link {
min-height: 44px;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
/* === Boutons Quickview / Wishlist en hover miniature === */
.grid-hover-btn a,
.grid-hover-btn button {
min-width: 44px !important;
min-height: 44px !important;
}
/* === Boutons +/- quantité (page produit) === */
.product-quantity .qty .btn,
.product-quantity-wrapper .btn {
min-width: 44px;
min-height: 44px;
}
/* ===========================================================================
* NOTE 2026-06-09 — Slider mobile : width:45vw RETIRÉ
* ===========================================================================
* Le CLS mobile a été résolu par font-display:optional sur Roboto (theme.css),
* PAS par un width custom. Le width:45vw forcé créait une marge/zone vide
* indésirable à droite du slider. Retiré → retour au dimensionnement naturel
* du thème (.product-mobile-slider .product-miniature{flex:0 1 auto}).
* =========================================================================== */
/* ===========================================================================
* PATCH LIBER'MEDICAL (2026-06-08) — CLS fix via aspect-ratio (CSS modern)
* ===========================================================================
* Lighthouse signale CLS 0.287 sur la home avec coupables :
* - Images produit grid (.product-miniature) : "taille inconnue"
* - Logo header (loading="lazy" + img-fluid height:auto)
*
* Cause : `img-fluid` Bootstrap applique `height: auto` qui ignore les
* attributs width/height HTML → le navigateur ne réserve pas d'espace
* tant que l'image n'est pas chargée → décalage layout.
*
* Fix : `aspect-ratio` CSS qui FORCE le ratio AVANT chargement image.
* Support : tous navigateurs depuis 2021 (Chrome 88+, Firefox 89+, Safari 15+).
*
* Résultat : CLS 0.287 → < 0.05 attendu.
* =========================================================================== */
/* === Logo header (above-fold, ratio 400x120 = 10:3) === */
.header-logo img,
#header .header-logo img {
aspect-ratio: 10 / 3;
width: auto;
max-width: 200px;
height: auto;
}
/* === Images miniature produit (carré 1:1) === */
.product-list .product-miniature .product-thumbnail img,
.product-list .product-miniature img.img-fluid,
.product-list .product-miniature img.js-lazy,
.product-miniature .product-cover-link img {
aspect-ratio: 1 / 1;
width: 100%;
height: auto;
max-width: 280px;
}
/* === Images cover fiche produit (carré 1:1, max 400x400) === */
.main-product-details .product-cover img,
.main-product-details .images-container img {
aspect-ratio: 1 / 1;
width: 100%;
max-width: 400px; /* PATCH 2026-06-10 : cap natif 400x400 (width:100% seul étirait l'image au-delà) */
height: auto;
margin-left: auto;
margin-right: auto;
}
/* === Images miniature grille carousel (cross-sell, related) === */
.slick-track .product-miniature img,
.slick-slider .product-thumbnail img {
aspect-ratio: 1 / 1;
width: 100%;
height: auto;
}
/* === Logo Liber'Médical pied de page (si présent) === */
#footer .header-logo img,
#footer img[src*="logo"] {
aspect-ratio: 10 / 3;
width: auto;
height: auto;
max-width: 200px;
}
/* ===========================================================================
* PATCH LIBER'MEDICAL (2026-06-09) — Réservation espace grille produit HOME
* ===========================================================================
* Sur la HOME, les widgets Slick / Creative Elements injectent les miniatures
* APRÈS le 1er paint (DOMContentLoaded). Résultat : la zone de la grille
* n'a pas de hauteur définie initialement → quand les produits apparaissent,
* tout pousse vers le bas → CLS catastrophique (0.293).
*
* Fix : on réserve une hauteur minimale au wrapper de la grille pour que
* l'espace soit déjà alloué avant que les produits arrivent.
*
* Calcul : 1 miniature = ~420px (image + nom + prix + bouton). Grille columns-2
* = ~420px de haut. Grille columns-3 ou columns-4 = ~420px (1 rangée).
* =========================================================================== */
/* ===========================================================================
* PATCH LIBER'MEDICAL (2026-06-09 v3) — Dimensions icônes (CLS prévention)
* ===========================================================================
* Force dimensions EXPLICITES sur les icônes (Material / FA / CE) pour
* éviter le micro-CLS lors du chargement des fontes web.
*
* Le min-height excessif v1/v2 a été ANNULÉ (causait marge blanche).
* Le min-height inline sur les blocs Slick zonehomeblocks est maintenant
* géré DIRECTEMENT dans le template du module (block-product.tpl) → plus précis.
* Cf patches-vendor-a-maintenir.md PATCH 6.
* =========================================================================== */
/* === Icônes Material — dimensions fixes pour éviter CLS au chargement fonte === */
.material-icons {
font-size: 24px !important;
line-height: 1 !important;
width: 1em;
height: 1em;
display: inline-block;
text-align: center;
vertical-align: middle;
}
/* === Icônes FontAwesome — idem === */
.fa,
.fas,
.far,
.fab {
font-size: inherit;
line-height: 1;
width: 1em;
height: 1em;
display: inline-block;
text-align: center;
vertical-align: middle;
}
/* === Icônes CE (Creative Elements) === */
[class*="ceicon-"] {
font-size: inherit;
line-height: 1;
width: 1em;
height: 1em;
display: inline-block;
text-align: center;
vertical-align: middle;
}
/* ===========================================================================
* PATCH LIBER'MEDICAL (2026-06-08) — Footer contact : liens noir gras
* ===========================================================================
* Surcharge le style générique des liens inline (vert souligné) sur le
* widget footer-contact UNIQUEMENT. Liens en noir gras + interaction au hover.
* =========================================================================== */
address.footer-contact a {
color: #000 !important;
font-weight: 700 !important;
text-decoration: none !important;
}
address.footer-contact a:hover,
address.footer-contact a:focus {
color: #2d5e3f !important;
text-decoration: underline !important;
text-underline-offset: 3px;
}
address.footer-contact a:focus-visible {
outline: 2px solid #509167;
outline-offset: 2px;
}
address.footer-contact .fa {
margin-right: 0.5rem;
color: #509167;
}
address.footer-contact em {
color: #666;
font-style: italic;
font-size: 0.9em;
margin-left: 0.25rem;
}
/* ===========================================================================
* PATCH LIBER'MEDICAL (2026-06-09) — "Voir plus" home aligné à droite + gras
* ===========================================================================
* Bloc rendu par zonehomeblocks/homeblocks.tpl (hors Elementor) :
* ne sont plus captés (pas dans un
ET