@charset "UTF-8";
/* ==========================================================================
Sacoche Monsieur, refonte responsive mobile-first
--------------------------------------------------------------------------
Deployee le 07/08/2026. Ce fichier remplace le champ "CSS additionnel" du
Customizer, qui vivait hors du depot, hors relecture et hors historique.
Trois regles ont guide l'ecriture :
1. La direction artistique ne change pas. Toutes les valeurs ci-dessous
(encre, or, vert de confiance, rayons, police) ont ete relevees sur le
site vivant, aucune n'est inventee.
2. Les ruptures sont celles de Flatsome, 549 et 850 px. L'ancien CSS
cassait a 768 px, une valeur qui ne correspond a aucune colonne du
theme : les regles s'appliquaient donc au milieu d'une grille.
3. Rien n'est masque. Aucun `display: none` sur du contenu que Google lit,
sur un prix, sur une mention legale ou sur une promesse de livraison.
Ce qui doit disparaitre visuellement se contracte ou se replie.
Le fichier est mobile-first : la base decrit le telephone, et les blocs
`min-width` ajoutent le confort des ecrans larges. Jamais l'inverse.
========================================================================== */
/* ==========================================================================
0. Jetons
========================================================================== */
:root {
/* Couleurs, relevees sur le rendu du 07/08/2026 */
--sm-encre: #1b1b1b;
--sm-encre-forte: #000;
--sm-texte: #2b2b2b;
--sm-texte-doux: #5a6270;
--sm-or: #dd9933; /* bouton du pack "achetes ensemble" */
--sm-or-fonce: #c0801f;
--sm-confiance: #00b67a; /* etoiles et barres de note */
--sm-fond: #fff;
--sm-fond-doux: #f4f4f4;
--sm-bord: #e3e6ea;
/* Rayons deja en usage sur le site */
--sm-r-image: 10px;
--sm-r-bouton: 8px;
--sm-r-carte: 20px;
--sm-r-pilule: 999px;
/* Rythme 4 / 8 */
--sm-e1: 4px; --sm-e2: 8px; --sm-e3: 12px;
--sm-e4: 16px; --sm-e5: 24px; --sm-e6: 32px; --sm-e7: 48px;
/* Cible tactile minimale, Apple HIG et Material */
--sm-cible: 44px;
--sm-ombre: 0 6px 18px rgba(0, 0, 0, .08);
--sm-ombre-forte: 0 10px 28px rgba(0, 0, 0, .14);
--sm-transition: 180ms cubic-bezier(.2, .7, .3, 1);
}
/* ==========================================================================
1. Socle
========================================================================== */
/* Debordement horizontal. La ligne ci-dessous est un garde-fou, pas un
correctif : chaque bloc qui debordait est corrige a sa source plus bas.
`clip` et non `hidden`, parce que `hidden` sur body cree un contexte de
defilement qui casse `position: sticky` sur les descendants. */
html { overflow-x: clip; }
/* Confort de lecture. Le corps de texte reste a 16 px minimum sur mobile :
en dessous, iOS agrandit la page tout seul au premier champ touche. */
body { text-rendering: optimizeLegibility; }
/* Les prix, les notes et les compteurs sont des chiffres alignes en colonne.
Sans chasse fixe, ils dansent d'une ligne a l'autre et la grille parait
bancale. */
.woocommerce-Price-amount,
.price,
.product_list_widget .amount,
.cuw-product-price,
.sm-achat-collant__prix,
.crstar-rating,
.cr-summaryBox-wrap { font-variant-numeric: tabular-nums; }
/* Focus clavier. Flatsome retire l'anneau par defaut sur plusieurs
composants : on le remet partout, avec un contraste suffisant sur fond
clair comme sur fond noir. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--sm-encre);
outline-offset: 2px;
border-radius: var(--sm-r-bouton);
}
.dark a:focus-visible,
.footer-2 a:focus-visible,
.absolute-footer a:focus-visible,
#header a:focus-visible { outline-color: #fff; }
/* Cibles tactiles. Les fleches de carrousel et la pagination tombaient sous
44 px. `flickity-prev-next-button` est pose a l'execution par Flickity, il
n'apparait donc pas dans le HTML servi : c'est normal. */
.flickity-prev-next-button,
.woocommerce-pagination a,
.woocommerce-pagination span {
min-width: var(--sm-cible);
min-height: var(--sm-cible);
}
/* Le selecteur de langue est le seul chemin vers les quatre autres marches.
La classe `sm-lang-link` est posee par le mu-plugin multilingue, relevee
sur le rendu du 07/08/2026. Le doigt doit l'atteindre sans zoom. */
a.sm-lang-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--sm-cible);
min-height: var(--sm-cible);
}
a.sm-lang-link img {
min-width: 26px;
min-height: 18px;
}
/* Mouvement. Toute animation reste sous 300 ms et se coupe entierement si le
systeme le demande. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* RETIRE le 07/08/2026, apres constat sur le rendu.
*
* Il y avait ici un `content-visibility: auto` sur les sections basses, pour
* n'en payer la peinture qu'a l'approche. Deux blocs en sont sortis deformes,
* "Produits similaires" et "Achetes ensemble" : prix demesures et bouton
* chevauchant le prix.
*
* La raison tient a ce que ces deux blocs sont pilotes par du JavaScript qui
* MESURE ses cellules (Flickity pour l'un, le greffon pour l'autre). Un
* conteneur dont le contenu n'est pas rendu ne se mesure pas : les largeurs
* calculees sont fausses. Et sur WebKit, un bloc mal mesure declenche en plus
* l'agrandissement automatique du texte, d'ou les prix demesures.
*
* Le gain etait de quelques millisecondes de peinture. Il ne vaut pas deux
* blocs casses sur le chemin d'achat. Ne pas le remettre sans verifier le
* rendu des deux carrousels sur un vrai telephone.
*
* Le garde-fou ci-dessous reste, lui : il empeche WebKit de gonfler le texte
* de son propre chef, ce qui est une cause classique de mise en page cassee
* sur telephone. */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* ==========================================================================
2. Reprise du CSS additionnel du Customizer
--------------------------------------------------------------------------
Toutes les regles de l'ancien champ sont ici, regroupees par sujet, avec
les ruptures ramenees a celles du theme. Deux blocs identiques y etaient
ecrits deux fois (les etoiles natives) : ils sont fusionnes.
========================================================================== */
/* Pastille de remise, masquee a la demande du proprietaire. Le prix barre
reste affiche : c'est lui qui porte l'information, pas la pastille. */
.badge-inner.secondary.on-sale { display: none; }
/* Separateur du bouton de paiement express Stripe. Seul le TRAIT est masque,
pas le bouton. */
body #wc-stripe-payment-request-button-separator { display: none !important; }
/* ── Paiement express, zone protegee ─────────────────────────────────────
Apple Pay, Google Pay et Link passent par le conteneur ci-dessous, actif
sur la fiche produit (wc_stripe_express_checkout_params.is_product_page
vaut 1 au 07/08/2026). C'est un chemin d'achat en un geste, et le plus
court du site sur mobile.
NE JAMAIS lui appliquer display:none, visibility:hidden, opacity:0,
height:0 ni pointer-events:none, et ne jamais le recouvrir. La barre
d'achat collante est en bas d'ecran et ne le chevauche pas ; le
remplissage bas pose sur le corps garantit qu'il reste atteignable.
Stripe pilote lui-meme l'affichage du conteneur : on ne force donc pas
son display, on se contente de garantir sa largeur et son espacement.
──────────────────────────────────────────────────────────────────────── */
#wc-stripe-express-checkout-element {
width: 100%;
max-width: 100%;
clear: both;
margin-top: var(--sm-e3);
}
#wc-stripe-express-checkout-element,
#wc-stripe-express-checkout-element * { pointer-events: auto; }
/* Badge reCAPTCHA, rendu discret sans etre masque, comme l'exigent les
conditions d'utilisation de Google. */
.grecaptcha-badge {
opacity: .5;
right: 10px;
bottom: 10px;
}
.grecaptcha-badge:hover,
.grecaptcha-badge:focus-within { opacity: 1; }
/* Legendes de la visionneuse d'images. */
.pswp__caption__center { display: none; }
/* Retour en haut, au-dessus des widgets flottants. */
.back-to-top.button.icon.invert.plain.fixed.bottom.is-outline.left.circle.active { z-index: 9999; }
/* Titres de produit en grille : noir, pas la couleur de lien du theme. */
.title-wrapper .product-title a.woocommerce-loop-product__link { color: var(--sm-encre-forte); }
/* Galerie d'images dans les avis produit. */
.description .adsw-gallery li a img {
width: 100%;
height: auto;
max-width: 150px;
}
/* Vert de confiance sur les etoiles et les barres de repartition.
CORRECTION du 07/08/2026 : la regle d'origine visait `.crstar-rating`, une
classe que le greffon n'emet PAS. Les etoiles sont rendues en SVG sous
`.crstar-rating-svg`, avec `stroke="currentColor"` et un remplissage sur la
couche de premier plan. Elles restaient donc jaunes pendant que le badge de
confiance, lui, etait vert : deux systemes d'etoiles differents sur la meme
page. On aligne les deux sur le vert du site. */
.crstar-rating,
.crstar-rating-svg { color: var(--sm-confiance) !important; }
.crstar-rating-svg .cr-rating-icon-frnt svg,
.crstar-rating-svg .cr-rating-icon-frnt svg path:not([fill="none"]) {
fill: var(--sm-confiance) !important;
stroke: var(--sm-confiance) !important;
}
.crstar-rating-svg .cr-rating-icon-base > svg.cr-rating-icon-bg,
.crstar-rating-svg .cr-rating-icon-bg { stroke: #cfd6dd; }
.cr-rating-act { color: var(--sm-confiance) !important; }
.cr-rating-deact { color: #cfd6dd !important; }
.ivole-meter .ivole-meter-bar { background: var(--sm-confiance) !important; }
/* Boutons. La transition ne porte plus sur `all`, qui forcait le navigateur a
surveiller toutes les proprietes, y compris celles qui declenchent un
recalcul de mise en page. */
.primary,
input[type="submit"],
input[type="submit"].button {
border-radius: var(--sm-r-bouton);
transition: background-color var(--sm-transition),
border-color var(--sm-transition),
color var(--sm-transition),
box-shadow var(--sm-transition);
}
/* Champ de quantite, porte a la cible tactile. */
.quantity input[type="number"] {
height: var(--sm-cible);
min-height: var(--sm-cible);
}
/* Widgets du programme de fidelite. */
#gr-am-widgetbar_58833 > div { margin-bottom: .5em; }
div#gr_paybypoints_widget.grPbyP-left { bottom: 1em !important; }
/* Bandeau de consentement, remonte au-dessus des widgets flottants. */
.axeptio_widget { transform: translateY(-80px) !important; }
/* Rayons d'image, homogenes sur tout le catalogue. */
.wp-post-image.ux-skip-lazy,
.woocommerce div.product div.images img,
.woocommerce ul.products li.product img,
.product-small .box-image img { border-radius: var(--sm-r-image); }
.woocommerce-product-gallery__image { background-color: #fff !important; }
/* Etoiles natives WooCommerce, remplacees par le pictogramme du site. Le bloc
etait ecrit deux fois a l'identique dans l'ancien champ. */
.star-rating::before,
.star-rating span::before { content: none !important; }
.star-rating {
background: url("https://www.sacoche-monsieur.com/wp-content/uploads/2025/09/logo-avis-tp.svg") repeat-x;
background-size: 16px 16px;
height: 16px;
position: relative;
}
.star-rating span {
background: url("https://www.sacoche-monsieur.com/wp-content/uploads/2025/09/logo-avis-tp.svg") repeat-x;
background-size: 16px 16px;
height: 16px;
display: block;
}
/* Colonne etroite de la fiche produit. */
.product-section .large-2.col.pb-0.mb-0 {
flex: 0 0 12% !important;
max-width: 100% !important;
}
/* Texte des avis, noir plein. */
.review-text,
.review-text p { color: var(--sm-encre-forte) !important; }
/* Cartes d'avis arrondies. */
.cr-review-card-inner { border-radius: var(--sm-r-carte) !important; }
/* Alertes de stock, alignement naturel sur petit ecran. Rupture ramenee de
768 a 849 px, la colonne du theme. */
@media (max-width: 849px) {
.hot-text-alert { text-align: inherit !important; }
}
/* ==========================================================================
3. Capture 4 et 5, haut de la fiche produit
--------------------------------------------------------------------------
L'ordre de lecture sur mobile decide de la vente. Baymard mesure que 62 %
des fiches produit mobiles sont en UX mediocre ou pire, et la cause la plus
frequente est un prix ou une note repousses sous la ligne de flottaison.
========================================================================== */
/* Galerie. L'ancien CSS posait `min-height: 300px` sur l'image et 320 px sur
le conteneur : deux valeurs differentes, donc un ecart de 20 px qui sautait
au chargement. Un rapport de forme fixe reserve la place exacte et supprime
le decalage cumulatif. */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img {
width: 100%;
height: auto;
object-fit: contain;
}
@media (max-width: 849px) {
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
aspect-ratio: 1 / 1;
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img {
height: 100%;
object-fit: contain;
}
}
/* Bloc d'achat. Hierarchie : titre, note, prix, variantes, bouton.
Conteneurs releves sur le rendu du 07/08/2026 : `product-title-container`,
`woocommerce-product-rating`, `product-price-container` > `price-wrapper`.
Le theme n'expose PAS de `.product-info` sur ce gabarit. */
@media (max-width: 849px) {
.single-product .product-title-container .product_title {
font-size: clamp(1.35rem, 1.1rem + 2vw, 1.75rem);
line-height: 1.2;
letter-spacing: -.01em;
margin-bottom: var(--sm-e2);
}
.single-product .product-price-container .price,
.single-product .price-wrapper .price {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: var(--sm-e2);
}
/* La note renvoie aux avis. C'est un lien, il doit se toucher. */
.single-product .woocommerce-product-rating {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sm-e2);
min-height: var(--sm-cible);
margin-bottom: var(--sm-e2);
}
/* CORRECTION du 07/08/2026 : ce lien etait en `inline-flex`, ce qui
transforme ses enfants en elements de flux et SUPPRIME l'espace entre le
compteur et le mot qui suit. Le rendu donnait "(17avis client)".
Un `inline-block` garde l'espace, et le remplissage vertical assure la
cible tactile sans passer par le flux. */
.single-product .woocommerce-review-link {
display: inline-block;
padding: 10px 0;
text-decoration: underline;
text-underline-offset: 3px;
}
}
/* Variantes. Les pastilles de couleur et les listes deroulantes tombaient
sous la cible tactile, ce qui produit des selections involontaires, donc
des paniers avec la mauvaise reference. */
.variations td.value select,
.variations_form select {
min-height: var(--sm-cible);
font-size: 16px; /* sous 16 px, iOS zoome au focus et casse la mise en page */
}
.woo-variation-swatches .variable-items-wrapper .variable-item {
min-width: var(--sm-cible);
min-height: var(--sm-cible);
}
.woo-variation-swatches .variable-items-wrapper .variable-item + .variable-item { margin-left: var(--sm-e2); }
/* Lien "Effacer la selection", garde son allure de pilule d'origine. */
.variations_form a.reset_variations {
display: inline-flex;
align-items: center;
gap: .45em;
min-height: var(--sm-cible);
padding: .7em 1em;
background: var(--sm-encre) !important;
color: #fff !important;
border: 1px solid rgba(0, 0, 0, .06);
border-radius: var(--sm-r-pilule);
font-weight: 600;
text-decoration: none;
box-shadow: 0 6px 8px rgba(0, 0, 0, .12);
transition: filter var(--sm-transition), box-shadow var(--sm-transition);
}
.variations_form a.reset_variations::before {
content: "\21BA";
transform: translateY(1px);
}
.variations_form a.reset_variations:hover {
filter: brightness(.92);
box-shadow: 0 6px 14px rgba(0, 0, 0, .16);
}
.variations_form a.reset_variations:focus-visible {
outline: 3px solid var(--sm-encre);
outline-offset: 2px;
}
/* WooCommerce force parfois la visibilite en style en ligne. */
.variations_form a.reset_variations[style*="visibility"] { visibility: visible !important; }
/* Bouton d'achat principal. Reprend la forme actuelle (pleine largeur, 56 px,
pilule) et ajoute l'etat presse, qui manquait : sans retour visuel au
doigt, l'acheteur appuie deux fois. */
.single-product form.cart .single_add_to_cart_button,
.single-product form.cart .ux-buy-now-button {
width: 100%;
height: 56px;
margin: 0;
border-radius: var(--sm-r-pilule);
font-size: 16px;
font-weight: 600;
transition: transform var(--sm-transition), box-shadow var(--sm-transition), filter var(--sm-transition);
}
.single-product form.cart .single_add_to_cart_button:active,
.single-product form.cart .ux-buy-now-button:active { transform: scale(.985); }
body .single_add_to_cart_button.button.alt { margin-top: 5px !important; }
.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed { margin-top: 20px; }
/* Etat desactive lisible : sans opacite reduite ni curseur distinct, le
bouton parait cliquable et ne repond pas. */
.single-product form.cart .single_add_to_cart_button.disabled,
.single-product form.cart .single_add_to_cart_button[disabled] {
opacity: .45;
cursor: not-allowed;
}
/* Encart garanties et bonus. Sur grand ecran il laissait la moitie gauche de
la ligne vide ; sur mobile il s'etirait sur toute la largeur sans cadre. */
@media (max-width: 849px) {
.single-product .col-inner > .icon-box,
.single-product [class*="garantie"] {
background: var(--sm-fond-doux);
border-radius: var(--sm-r-carte);
padding: var(--sm-e4);
}
}
/* ==========================================================================
4. Capture 1, bandeau de confiance et carrousel d'avis de la fiche
--------------------------------------------------------------------------
ATTENTION avant de modifier ce bloc. Le HTML SERVI par la fiche produit ne
contient QUE le badge de confiance (`cr-trustbadgef`, `cr-badge`,
`cr-trustbadge-border`) et le formulaire d'avis. Les trois cartes visibles
a l'ecran sont injectees APRES coup par le greffon, en JavaScript. On ne
peut donc pas lire leurs classes dans la source : les regles ci-dessous
restent volontairement independantes de la bibliotheque de carrousel
employee, et se contentent des classes stables du greffon.
Defaut le plus couteux du bloc : une carte d'avis sans texte reserve quand
meme la hauteur du texte, ce qui produit trois cartes a 90 px de vide.
Baymard note qu'un avis sans corps fait douter de l'authenticite. On ne le
masque pas (ce serait retirer un avis reel), on le contracte.
========================================================================== */
/* ── Badge de confiance ──────────────────────────────────────────────────
CORRECTION du 07/08/2026. La version precedente ajoutait du remplissage a
`.cr-badge`, qui porte une LARGEUR FIXE posee par le greffon. La carte
devenait donc plus large que sa colonne, et sur la fiche produit elle
debordait par la gauche : le nom de la boutique s'affichait "onsieur" et
la note "tion (622 avis)", avec une bande grise a cote.
D'ou les deux regles qui comptent ici : `box-sizing: border-box` pour que
le remplissage rentre dans la largeur, et `max-width: 100%` pour qu'il ne
sorte jamais de sa colonne, quelle qu'elle soit.
──────────────────────────────────────────────────────────────────────── */
.cr-trustbadgef {
display: flex;
justify-content: center;
margin-bottom: var(--sm-e5);
max-width: 100%;
}
/* Le greffon pose `font-size: 0` sur `.cr-badge` pour supprimer les espaces
entre blocs en ligne. On passe en grille, ou ce bricolage n'a plus lieu
d'etre, donc on retablit une taille de reference : sans elle, tout enfant
auquel le greffon ne donne pas de taille serait invisible. */
.cr-trustbadgef .cr-badge,
.cr-trustbadge-border {
box-sizing: border-box;
width: auto;
max-width: 100%;
display: grid;
gap: var(--sm-e3);
font-size: 1rem;
border-radius: var(--sm-r-carte);
border: 1px solid var(--sm-bord);
box-shadow: var(--sm-ombre);
padding: var(--sm-e5);
background: var(--sm-fond);
}
/* CORRECTION du 07/08/2026, deuxieme passe : le badge restait tronque a
droite, "Ce que disen" au lieu de "Ce que disent nos clients".
La cause est dans le greffon, et `max-width` ne pouvait pas y suffire :
`badges.css` pose `white-space: nowrap` sur `.badge__nowrap` ET sur
`.badge__store`, avec cinq etoiles de 36 px plus 24 px de marge, soit une
ligne d'environ 380 px qui n'a AUCUN droit de se replier. Dans la colonne
d'une fiche produit, elle sort forcement.
On rend donc le repli possible. C'est la seule facon de faire tenir le
badge dans une colonne etroite sans rien masquer. */
.cr-trustbadgef .badge__store,
.cr-trustbadgef .badge__nowrap {
white-space: normal !important;
}
/* Ligne du milieu : les etoiles, puis la mention de confiance. Elles se
suivent tant que la place existe, et passent l'une sous l'autre sinon. */
.cr-trustbadgef .badge__nowrap {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sm-e3);
}
.cr-trustbadgef .badge__stars {
display: inline-flex;
align-items: center;
gap: 3px;
margin: 0 !important;
white-space: nowrap;
}
.cr-trustbadgef .badge__star { margin-right: 0 !important; }
/* La mention devient une pastille, pas une ligne de texte posee la. */
.cr-trustbadgef .badge__verified {
display: inline-flex;
align-items: center;
gap: var(--sm-e2);
max-width: 100%;
padding: var(--sm-e2) var(--sm-e3);
border-radius: var(--sm-r-pilule);
background: #eef7f2;
}
.cr-trustbadgef .verified__text {
white-space: normal;
font-size: .92rem;
font-weight: 600;
color: var(--sm-encre);
}
/* Premiere ligne : le nom de la boutique, en titre de carte. */
.cr-trustbadgef .badge__store {
font-weight: 700;
font-size: 1.05rem;
line-height: 1.2;
margin: 0 !important;
color: var(--sm-encre);
}
/* Derniere ligne : la note, puis le nombre d'avis en retrait. C'est le
chiffre qui compte, il ne doit pas se lire comme du texte courant. */
.cr-trustbadgef .badge__rating {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--sm-e2);
margin: 0 !important;
}
.cr-trustbadgef .rating__store {
font-weight: 700;
font-size: 1rem;
color: var(--sm-encre);
}
.cr-trustbadgef .rating__reviews {
font-size: .92rem;
color: var(--sm-texte-doux);
}
/* La carte entiere est un lien vers la page d'avis. */
.cr-trustbadgef a { min-height: var(--sm-cible); }
.cr-trustbadgef .cr-badge { transition: box-shadow var(--sm-transition), border-color var(--sm-transition); }
.cr-trustbadgef .cr-badge:hover {
border-color: #cfd6dd;
box-shadow: var(--sm-ombre-forte);
}
/* Dans une colonne etroite, les etoiles de 36 px du greffon prennent a elles
seules 180 px. On les reduit plutot que de laisser le bloc deborder. */
@media (max-width: 849px) {
.cr-trustbadgef .cr-badge { padding: var(--sm-e4); }
.cr-trustbadgef .badge__star {
width: 30px !important;
height: 30px !important;
}
}
@media (max-width: 549px) {
.cr-trustbadgef .badge__star {
width: 26px !important;
height: 26px !important;
}
.cr-trustbadgef .verified__text { font-size: .88rem; }
}
/* Hors fiche produit (accueil, rayons), la colonne est large : le badge peut
respirer. Il paraissait trop petit pour un element de reassurance place au
centre de la page sous un titre "Ils nous font confiance". */
body:not(.single-product) .cr-trustbadgef .cr-badge {
padding: var(--sm-e5) var(--sm-e6);
}
body:not(.single-product) .cr-trustbadgef .badge__store { font-size: 1.2rem; }
body:not(.single-product) .cr-trustbadgef .badge__star { transform: scale(1.15); }
body:not(.single-product) .cr-trustbadgef .badge__stars { gap: 2px; }
body:not(.single-product) .cr-trustbadgef .badge__rating,
body:not(.single-product) .cr-trustbadgef .verified__text { font-size: 1rem; }
/* Le carrousel est un Slick (`data-slick` sur `.cr-reviews-slider`), avec
3 vignettes au-dessus de 800 px, 2 en dessous, 1 sous 650 px et plus de
fleches sous 450 px. Ses classes n'apparaissent pas dans le HTML servi
parce qu'elles sont posees a l'execution : c'est normal, ce n'est pas une
erreur de selecteur. */
/* ── Carrousel d'avis, refait ────────────────────────────────────────────
Reecrit le 07/08/2026 apres retour du proprietaire. Ce qui n'allait pas,
et ce qui le remplace :
| Defaut | Correctif |
|-------------------------------------------|------------------------------|
| double cadre : celui du bloc + celui des cartes | un seul niveau, les cartes |
| pastilles chevauchant le bord du bloc | elles sortent du flux absolu |
| corps d'avis en rectangle gris, meme vide | fond transparent, plus de boite |
| cartes de hauteurs inegales | etirees a la meme hauteur |
| lien produit en orange sur gris | encre, pied de carte discret |
Classes relevees dans le greffon lui-meme (css/frontend.css) et non
devinees : `cr-review-card`, `cr-review-card-inner`, `cr-review-card-content`,
`cr-slider-details`, `cr-slider-read-more`.
──────────────────────────────────────────────────────────────────────── */
.cr-reviews-slider {
margin: var(--sm-e5) 0 0;
padding: 0 0 var(--sm-e7); /* la place des pastilles, sous les cartes */
border: 0;
background: none;
}
/* Cartes de hauteur egale : sans cela, une carte a texte long etire la ligne
et les cartes courtes flottent au milieu du vide. */
.cr-reviews-slider .slick-track { display: flex; align-items: stretch; }
.cr-reviews-slider .slick-slide { height: auto; float: none; }
.cr-reviews-slider .slick-slide > div { height: 100%; padding: 0 var(--sm-e2); }
.cr-reviews-slider .cr-review-card { height: 100%; }
.cr-reviews-slider .cr-review-card-inner {
display: flex;
flex-direction: column;
height: 100%;
padding: var(--sm-e4);
background: var(--sm-fond);
border: 1px solid var(--sm-bord);
border-radius: var(--sm-r-carte) !important;
box-shadow: none;
transition: box-shadow var(--sm-transition), border-color var(--sm-transition);
}
.cr-reviews-slider .cr-review-card-inner:hover {
border-color: #cfd6dd;
box-shadow: var(--sm-ombre);
}
/* En-tete : avatar, nom, qualite. */
.cr-reviews-slider .cr-avatar,
.cr-reviews-slider .cr-avatar img {
width: 40px;
height: 40px;
border-radius: var(--sm-r-pilule);
}
.cr-reviews-slider .cr-comment-head-text { line-height: 1.3; }
/* Corps de l'avis. Le rectangle gris etait le defaut le plus voyant : il
restait dessine meme quand il n'y avait rien a lire, ce qui donnait trois
boites vides cote a cote. Fond transparent, plus de hauteur reservee, et
le texte plafonne a quatre lignes pour que les cartes restent comparables. */
.cr-reviews-slider .cr-review-card-content {
flex: 1 1 auto;
background: none !important;
border: 0 !important;
padding: var(--sm-e3) 0 !important;
margin: 0;
min-height: 0 !important;
}
.cr-reviews-slider .cr-comment-text {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: .95rem;
line-height: 1.6;
color: var(--sm-texte);
}
.cr-reviews-slider .cr-slider-details {
font-size: .8rem;
color: var(--sm-texte-doux);
}
.cr-reviews-slider .cr-slider-read-more,
.cr-reviews-slider .cr-slider-read-less {
display: inline-flex;
align-items: center;
min-height: var(--sm-cible);
color: var(--sm-encre);
text-decoration: underline;
text-underline-offset: 3px;
}
/* Pied de carte : le produit concerne. Il etait en orange sur fond gris, ce
qui tirait l'oeil loin de l'avis lui-meme. */
.cr-reviews-slider .cr-product-name-picture,
.cr-reviews-slider .cr-rating-product-name {
margin-top: auto;
padding-top: var(--sm-e3);
border-top: 1px solid var(--sm-bord);
background: none !important;
}
.cr-reviews-slider .cr-comment-productname-a {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--sm-texte) !important;
font-size: .85rem;
line-height: 1.35;
text-decoration: none;
}
.cr-reviews-slider .cr-comment-productname-a:hover { color: var(--sm-encre) !important; text-decoration: underline; }
.cr-reviews-slider .cr-product-thumbnail img {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: var(--sm-r-bouton);
}
/* Fleches : cercles a 44 px, posees hors des cartes. */
.cr-reviews-slider .slick-prev,
.cr-reviews-slider .slick-next {
width: var(--sm-cible);
height: var(--sm-cible);
border-radius: var(--sm-r-pilule);
background: var(--sm-fond);
border: 1px solid var(--sm-bord);
box-shadow: var(--sm-ombre);
z-index: 2;
top: calc(50% - var(--sm-e6));
}
.cr-reviews-slider .slick-prev { left: -22px; }
.cr-reviews-slider .slick-next { right: -22px; }
.cr-reviews-slider .slick-prev::before,
.cr-reviews-slider .slick-next::before {
color: var(--sm-encre);
opacity: 1;
font-size: 18px;
}
.cr-reviews-slider .slick-prev:hover,
.cr-reviews-slider .slick-next:hover { border-color: var(--sm-encre); }
/* Pastilles. Slick les place en absolu a `bottom: -25px`, d'ou le
chevauchement avec le bord du bloc. On les remet dans le flux : elles
occupent le remplissage bas reserve plus haut, et ne peuvent plus mordre
sur quoi que ce soit. */
.cr-reviews-slider .slick-dots {
position: static;
display: flex !important;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--sm-e1);
margin: var(--sm-e4) 0 0;
padding: 0;
width: 100%;
}
.cr-reviews-slider .slick-dots li {
width: var(--sm-cible);
height: var(--sm-cible);
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.cr-reviews-slider .slick-dots li button {
width: var(--sm-cible);
height: var(--sm-cible);
padding: 0;
}
.cr-reviews-slider .slick-dots li button::before {
content: "";
width: 8px;
height: 8px;
top: 50%;
left: 50%;
margin: -4px 0 0 -4px;
border-radius: var(--sm-r-pilule);
background: #cfd6dd;
opacity: 1;
transition: background-color var(--sm-transition), transform var(--sm-transition);
}
.cr-reviews-slider .slick-dots li.slick-active button::before {
background: var(--sm-confiance);
transform: scale(1.25);
}
@media (max-width: 849px) {
/* Sous 450 px le greffon retire lui-meme les fleches. Entre les deux, on
les ramene dans la largeur pour qu'elles ne sortent pas de l'ecran. */
.cr-reviews-slider .slick-prev { left: 0; }
.cr-reviews-slider .slick-next { right: 0; }
}
.cr-summaryBox-wrap {
border-radius: var(--sm-r-carte);
padding: var(--sm-e4);
}
.cr-summaryBox-wrap .crstar-rating { font-size: 1.15rem; }
/* Le corps d'avis vide ne reserve plus de hauteur. Le bloc reste dans le
document, il n'est ni supprime ni masque : il se replie. */
.cr-review-card-inner .cr-comment-text:empty,
.cr-review-card-inner .cr-review-content:empty,
.cr-review-card-inner p:empty {
min-height: 0;
height: 0;
margin: 0;
padding: 0;
}
.cr-review-card-inner {
padding: var(--sm-e4);
border: 1px solid var(--sm-bord);
box-shadow: none;
}
/* Commandes de navigation du greffon, portees a la cible tactile. Ce sont
les seules classes de navigation que CusRev expose de facon stable. */
.cr-nav-left,
.cr-nav-right {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--sm-cible);
min-height: var(--sm-cible);
border-radius: var(--sm-r-pilule);
}
@media (max-width: 549px) {
/* Une carte pleine largeur, lisible sans zoom, au lieu de trois cartes
ecrasees a un tiers de l'ecran. */
.cr-review-card,
.cr-review-card-inner { width: 100% !important; }
.cr-summaryBox-wrap { padding: var(--sm-e3); }
}
/* ==========================================================================
5. Capture 6, avis natifs WooCommerce
========================================================================== */
/* Le bloc utilise DEJA la grille flex de Flatsome :
`.comment_container.review-item.flex-row.align-top` contenant un
`.flex-col` pour l'avatar et un `.comment-text.flex-col.flex-grow` pour le
corps. On ne remplace pas cette mecanique par une grille CSS, on l'ajuste :
forcer `display: grid` ici neutraliserait les classes flex du theme et
ferait dependre le rendu d'hypotheses invisibles dans le HTML. */
#reviews .commentlist { padding-left: 0; margin-left: 0; }
#reviews .commentlist > li { list-style: none; }
#reviews .comment_container {
gap: var(--sm-e3);
padding: var(--sm-e4) 0;
border-bottom: 1px solid var(--sm-bord);
}
#reviews .commentlist > li:last-child .comment_container { border-bottom: 0; }
#reviews .comment_container img.avatar {
width: 40px;
height: 40px;
border-radius: var(--sm-r-pilule);
margin: 0;
}
#reviews .comment-text { margin: 0; padding: 0; border: 0; min-width: 0; }
#reviews .comment-text .meta { margin: var(--sm-e1) 0; line-height: 1.4; }
#reviews .comment-text .description p { margin: .35em 0 0; line-height: 1.6; }
#reviews .woocommerce-Reviews-title {
font-size: clamp(1.2rem, 1rem + 1.6vw, 1.75rem);
line-height: 1.25;
}
/* Le formulaire d'avis est un chemin de contribution : ses champs doivent se
toucher, et rester a 16 px pour ne pas declencher le zoom d'iOS. */
#reviews #respond input[type="text"],
#reviews #respond input[type="email"],
#reviews #respond textarea {
min-height: var(--sm-cible);
font-size: 16px;
}
#reviews #respond .form-submit input[type="submit"] {
min-height: var(--sm-cible);
width: 100%;
}
@media (min-width: 550px) {
#reviews #respond .form-submit input[type="submit"] { width: auto; padding-inline: var(--sm-e6); }
}
/* ==========================================================================
6. Capture 7, "Produits frequemment achetes ensemble"
--------------------------------------------------------------------------
Le greffon pose ses styles EN LIGNE (`display: flex` sur le formulaire,
`width: 200px` sur chaque carte). Les surcharges ci-dessous portent donc
`!important` : c'est le seul moyen de battre un attribut `style`.
Sur mobile la ligne "produit + produit + produit" force un defilement
horizontal de la page entiere. On la passe en pile verticale.
========================================================================== */
.cuw-fbt-products {
background: var(--sm-fond);
border: 1px solid var(--sm-bord) !important;
border-radius: var(--sm-r-carte);
padding: var(--sm-e5) !important;
}
.cuw-fbt-products .cuw-heading {
font-size: clamp(1.2rem, 1rem + 1.4vw, 1.6rem);
line-height: 1.25;
font-weight: 700;
}
.cuw-fbt-products .cuw-product-title {
font-size: .92rem;
line-height: 1.35;
color: var(--sm-texte);
}
.cuw-fbt-products .cuw-product-price { font-weight: 700; }
.cuw-fbt-products .cuw-product-price del { opacity: .55; font-weight: 400; margin-right: .35em; }
.cuw-fbt-products .cuw-product-image img { border-radius: var(--sm-r-image); }
/* Le separateur "+" etait un caractere brut colle aux images. */
.cuw-fbt-products .cuw-product-separator {
color: var(--sm-texte-doux);
font-size: 1.5rem;
line-height: 1;
padding: 0 var(--sm-e2);
}
/* ── Le bouton du pack ──────────────────────────────────────────────────
Il etait carre, sans rayon, sans etat, avec son libelle casse sur deux
lignes par la largeur imposee. On le remet dans le systeme : rayon 8 px
comme les autres boutons du site (PAS une pilule, elle faisait ballon sur
mobile), or #dd9933 conserve, libelle sur une ligne, etats presse et
survol, cible tactile respectee. */
.cuw-fbt-products .cuw-total-price-section { line-height: 1.4; }
.cuw-fbt-products .cuw-total-price {
font-size: 1.35rem;
font-weight: 800;
color: var(--sm-encre);
}
.cuw-fbt-products .cuw-total-price del { opacity: .55; font-weight: 400; margin-right: .4em; }
.cuw-fbt-products .cuw-add-to-cart {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 var(--sm-e5);
background: var(--sm-or);
color: #fff;
border: 0;
border-radius: var(--sm-r-bouton);
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
text-align: center;
white-space: normal;
box-shadow: 0 6px 16px rgba(221, 153, 51, .28);
transition: background-color var(--sm-transition), box-shadow var(--sm-transition), transform var(--sm-transition);
}
.cuw-fbt-products .cuw-add-to-cart:hover,
.cuw-fbt-products .cuw-add-to-cart:focus-visible {
background: var(--sm-or-fonce);
box-shadow: 0 10px 22px rgba(221, 153, 51, .36);
}
.cuw-fbt-products .cuw-add-to-cart:active { transform: scale(.985); }
/* La case a cocher est la commande la plus importante du bloc : c'est elle
qui compose le panier, et elle mesurait quelques pixels. */
.cuw-fbt-products .cuw-product-checkbox {
width: 24px !important;
height: 24px !important;
margin: var(--sm-e2) !important;
accent-color: var(--sm-encre);
}
@media (max-width: 849px) {
.cuw-fbt-products .cuw-form { display: block !important; }
/* `cuw-gird` est bien la graphie du greffon, faute de frappe comprise. */
.cuw-fbt-products .cuw-gird {
display: grid !important;
grid-template-columns: 1fr;
gap: var(--sm-e3);
}
.cuw-fbt-products .cuw-column { margin-bottom: 0 !important; }
/* ── La carte produit ────────────────────────────────────────────────
CORRECTION du 07/08/2026. La version precedente posait une grille a deux
colonnes en supposant deux enfants. La carte en a QUATRE, releves sur le
rendu : `cuw-product-actions` (la case a cocher), `cuw-product-image`,
`cuw-product-title`, `cuw-product-price`. Le placement automatique les
repartissait donc n'importe comment, et l'image gardait ses 200 px
imposes en style en ligne, ce qui ecrasait le titre a "Sacoche
Bandoulier...".
Ici chaque enfant est place EXPLICITEMENT. Aucun placement automatique,
donc aucune surprise si le greffon en ajoute un cinquieme. */
.cuw-fbt-products .cuw-product-wrapper { display: block !important; }
.cuw-fbt-products .cuw-product-card {
width: 100% !important;
display: grid !important;
grid-template-columns: 28px 88px minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: var(--sm-e3);
row-gap: var(--sm-e1);
align-items: center;
padding: var(--sm-e3);
background: var(--sm-fond);
border: 1px solid var(--sm-bord);
border-radius: var(--sm-r-image);
text-align: left;
}
/* La case a cocher : sortie du positionnement absolu du greffon, elle
reprend sa place dans la grille au lieu de flotter sur l'image. */
.cuw-fbt-products .cuw-product-actions {
position: static !important;
grid-column: 1;
grid-row: 1 / span 2;
justify-self: center;
}
.cuw-fbt-products .cuw-product-actions > div { position: static !important; }
.cuw-fbt-products .cuw-product-checkbox { float: none !important; }
.cuw-fbt-products .cuw-product-image {
grid-column: 2;
grid-row: 1 / span 2;
width: 88px !important;
height: 88px !important;
}
.cuw-fbt-products .cuw-product-image img {
width: 88px;
height: 88px;
object-fit: contain;
border-radius: var(--sm-r-bouton);
}
.cuw-fbt-products .cuw-product-title {
grid-column: 3;
grid-row: 1;
text-align: left !important;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.35;
}
.cuw-fbt-products .cuw-product-price {
grid-column: 3;
grid-row: 2;
text-align: left !important;
}
.cuw-fbt-products .cuw-product-variants {
grid-column: 1 / -1;
grid-row: 3;
}
.cuw-fbt-products .cuw-product-variants select {
min-height: var(--sm-cible);
font-size: 16px;
max-width: 100%;
}
/* Le separateur entre deux produits n'a de sens qu'en ligne. En pile, il
se centre au lieu de trainer sur le cote. */
.cuw-fbt-products .cuw-product-separator {
display: flex;
justify-content: center;
}
/* Le total et le bouton ferment le bloc, centres, pleine largeur.
La premiere version laissait le bouton en pilule pleine largeur, ce qui
donnait un enorme ballon decale sur telephone. */
.cuw-fbt-products {
padding: var(--sm-e4) !important;
text-align: center;
}
/* Le greffon pose `max-width: 256px` EN LIGNE sur la section d'achat.
C'est ce qui enfermait le total et le bouton dans une boite etroite au
milieu de l'ecran, avec le libelle casse sur trois lignes. Une largeur
a 100 % ne suffit pas a s'en defaire : il faut lever le plafond. */
.cuw-fbt-products .cuw-buy-section {
max-width: none !important;
width: 100% !important;
padding: var(--sm-e4) 0 0 !important;
margin-top: var(--sm-e3);
border-top: 1px solid var(--sm-bord);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sm-e3);
}
.cuw-fbt-products .cuw-actions {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sm-e3);
}
.cuw-fbt-products .cuw-total-price-section {
width: 100%;
justify-content: center;
margin-top: 0 !important;
}
.cuw-fbt-products .cuw-actions > div { width: 100%; }
.cuw-fbt-products .cuw-add-to-cart {
width: 100% !important;
max-width: 420px; /* au-dela, le bouton parait etire et perd sa forme */
margin-inline: auto;
border-radius: var(--sm-r-bouton);
white-space: nowrap; /* le libelle tient sur une ligne a cette largeur */
}
.cuw-fbt-products .cuw-product-card { text-align: left; }
}
/* ==========================================================================
7. Capture 8, produits similaires
--------------------------------------------------------------------------
Ce bloc est deja un carrousel Flickity (`data-flickity-options` sur la
ligne). On ne le remplace donc PAS par un defilement CSS : les deux
mecaniques se battraient et le bloc se retrouverait vide. On travaille
dedans.
========================================================================== */
.related .product-section-title {
font-size: clamp(1.05rem, .95rem + 1vw, 1.35rem);
letter-spacing: .04em;
}
/* Titres de carte : deux lignes, coupees proprement, hauteur reservee pour
que les prix et les boutons restent alignes d'une carte a l'autre. */
.related .product-small .name.product-title,
.woocommerce ul.products .product-small .name.product-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.6em;
line-height: 1.3;
}
/* Fleches du carrousel : elles mesuraient moins de 44 px et se superposaient
a la premiere carte. */
.related .flickity-prev-next-button {
width: var(--sm-cible);
height: var(--sm-cible);
background: #fff;
border: 1px solid var(--sm-bord);
box-shadow: var(--sm-ombre);
}
/* Bouton de carte.
Ce bloc a ete repris DEUX fois, et la lecon vaut d'etre ecrite. La premiere
version posait `line-height: 44px` pour la cible tactile : sur un libelle
qui passe a la ligne, comme "Selectionner une option", elle donnait un
bouton de 88 px, plus haut que la vignette. La deuxieme forcait
`width: 100%` et `display: flex` : le bouton s'est mis a chevaucher le prix.
Flatsome ne pose AUCUNE regle sur `.add-to-cart-button` (verifie dans
flatsome.css et flatsome-shop.css) : sa mise en page vient de la cascade
generale du theme, qu'une largeur imposee suffit a desequilibrer.
On ne touche donc plus qu'a la hauteur, par le remplissage, ce qui atteint
la cible tactile sans rien dire de la largeur ni du flux. */
@media (max-width: 849px) {
.related .product-small .add-to-cart-button a,
.woocommerce ul.products .product-small .add-to-cart-button a {
padding-top: var(--sm-e3);
padding-bottom: var(--sm-e3);
line-height: 1.25;
}
}
/* ==========================================================================
8. Capture 2 et 8, colonnes "Les plus recents / Meilleures ventes /
Les mieux notes"
--------------------------------------------------------------------------
Sur grand ecran les trois colonnes fonctionnent et ne changent pas. Sur
mobile elles s'empilaient en une liste de neuf produits aux vignettes
minuscules et aux zones cliquables de la taille du texte.
========================================================================== */
/* CORRECTION du 07/08/2026. La premiere version de ce bloc a casse le
tryptique, de deux facons, et c'est le proprietaire qui l'a vu :
1. Elle restylait `.widget-title`. Flatsome gerait deja ces trois intitules
de facon homogene ; la surcharge en a desaccorde la taille et la graisse.
On n'y touche plus du tout.
2. Elle posait une grille sur le lien en supposant que l'image ne flottait
pas. Flatsome la fait flotter a gauche avec une marge negative : la
vignette passait donc PAR-DESSUS le titre. Il faut neutraliser le
flottement explicitement, et avec assez de specificite pour gagner.
Structure reelle du , relevee sur le rendu :
![]()