/* Accueil (zone home) : remplacement du JavaScript Elementor/Swiper par du CSS, rien d'autre.
Portee : .elementor-10 et les IDs d'elements d'origine (post-10.css reste la source du dessin). */
/* Regle imprimee en ligne par Elementor sur le rendu d'origine (elementor-frontend-inline-css), absente en natif. */
.elementor-10 .e-heading-base a,
.elementor-10 .e-paragraph-base a {
all: unset;
cursor: pointer;
}
/* ---- Hero : fond mobile ----
Le fond desktop est pose en style inline sur le conteneur (qm_img_url('hero')) ; sous 768px on lui substitue
la variable --qm-hero-mobile posee dans le meme attribut style (repli : la meme image que le desktop).
!important : indispensable pour passer devant le background-image inline ; post-10.css ne porte plus d'URL. */
@media (max-width: 767px) {
.elementor-10 .elementor-element.elementor-element-71dc978 {
background-image: var(--qm-hero-mobile, none) !important;
}
}
/* ---- Carrousels imbriques (puces 3b767ba, « pourquoi » 3bfaae0, temoignages 3fa80c4) ----
La piste .swiper-wrapper devient une grille a colonnes implicites : N vignettes visibles, N lu dans les variables
qu'Elementor a ecrites dans post-10.css (6/3/2, 3/2/1, 1/1/1 selon l'ecran). Quand tout ne tient pas (tablette,
mobile) la piste defile horizontalement avec scroll-snap, sans autoplay ni fleches. */
.elementor-10 .elementor-widget-n-carousel {
--e-n-carousel-swiper-slides-to-display: 3; /* defaut Elementor : widget-nested-carousel.min.css n'est pas charge */
--e-n-carousel-swiper-slides-gap: 10px;
}
.elementor-10 .elementor-widget-n-carousel > .e-n-carousel {
display: block;
min-width: 0;
}
.elementor-10 .elementor-widget-n-carousel > .e-n-carousel > .swiper-wrapper {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc( ( 100% - ( var(--e-n-carousel-swiper-slides-to-display) - 1 ) * var(--e-n-carousel-swiper-slides-gap) ) / var(--e-n-carousel-swiper-slides-to-display) );
column-gap: var(--e-n-carousel-swiper-slides-gap);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.elementor-10 .elementor-widget-n-carousel > .e-n-carousel > .swiper-wrapper::-webkit-scrollbar {
display: none;
}
.elementor-10 .elementor-widget-n-carousel > .e-n-carousel > .swiper-wrapper > .swiper-slide {
min-width: 0;
scroll-snap-align: start;
height: var(--e-n-carousel-slide-height, auto);
}
.elementor-10 .elementor-widget-n-carousel > .e-n-carousel > .swiper-wrapper > .swiper-slide > .e-con {
height: var(--e-n-carousel-slide-container-height, initial);
max-width: 100%;
}
/* ---- Temoignages : 1 diapositive par vue, puces = ancres (#qm-avis-N), etat actif via :target ----
Pagination « outside » : elle suit la piste dans le flux, 6px de puce et 10px d'ecart comme Elementor.
Les cartes ont la meme hauteur par construction : une seule rangee de grille, --e-n-carousel-slide-height:auto
et --e-n-carousel-slide-container-height:100% (post-10.css) font remplir la rangee par chaque conteneur. */
.elementor-10 .elementor-element.elementor-element-3fa80c4 .swiper-slide {
scroll-margin-top: 120px; /* l'ancre ne doit pas se caler sous l'en-tete collant */
}
.elementor-10 .elementor-element.elementor-element-3fa80c4 .swiper-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
height: 6px;
margin-top: 10px;
font-size: 6px;
line-height: 6px;
}
.elementor-10 .elementor-element.elementor-element-3fa80c4 .swiper-pagination-bullet {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--e-n-carousel-dots-normal-color, #000);
opacity: .2;
cursor: pointer;
}
.elementor-10 .elementor-element.elementor-element-3fa80c4 .swiper-pagination-bullet:hover,
.elementor-10 .elementor-element.elementor-element-3fa80c4 .swiper-pagination-bullet:first-child {
opacity: 1;
}
.elementor-10 .elementor-element.elementor-element-3fa80c4:has(.swiper-slide:target) .swiper-pagination-bullet:first-child {
opacity: .2;
}
.elementor-10 .elementor-element.elementor-element-3fa80c4:has(#qm-avis-1:target) .swiper-pagination-bullet:nth-child(1),
.elementor-10 .elementor-element.elementor-element-3fa80c4:has(#qm-avis-2:target) .swiper-pagination-bullet:nth-child(2),
.elementor-10 .elementor-element.elementor-element-3fa80c4:has(#qm-avis-3:target) .swiper-pagination-bullet:nth-child(3) {
opacity: 1;
}
/* ---- Blog (loop-carousel ecfb9db) : 3/2/1 articles visibles (variables de post-10.css), grille + scroll-snap ---- */
.elementor-10 .elementor-widget-loop-carousel {
--swiper-slides-to-display: 3; /* defaut Elementor : widget-loop-carousel.min.css n'est pas charge */
--swiper-slides-gap: 10px;
}
.elementor-10 .elementor-widget-loop-carousel > .swiper {
display: block; /* .elementor-grid (frontend.min.css) le passait en grid : un seul enfant, la piste */
}
.elementor-10 .elementor-widget-loop-carousel > .swiper > .swiper-wrapper {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc( ( 100% - ( var(--swiper-slides-to-display) - 1 ) * var(--swiper-slides-gap) ) / var(--swiper-slides-to-display) );
column-gap: var(--swiper-slides-gap);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.elementor-10 .elementor-widget-loop-carousel > .swiper > .swiper-wrapper::-webkit-scrollbar {
display: none;
}
.elementor-10 .elementor-widget-loop-carousel > .swiper > .swiper-wrapper > .swiper-slide {
min-width: 0;
scroll-snap-align: start;
}
/* ---- Hierarchie des titres (SEO) : balises changees, rendu identique ----
Les tailles par balise viennent du kit Elementor (post-7.css : .elementor-kit-7 h1 40/50, h2 32/42 400, h3 20/30 600,
h5 16/26, h6 15/25 400) et de reset.css (font-weight:500 quand le kit ne le fixe pas). Un a la place d'un titre
prend la taille du corps (13px / 21px) et le line-height:1 de .elementor-heading-title : d'ou des valeurs explicites.
Les regles ci-dessous reproduisent sur la nouvelle balise la typographie de l'ancienne ; couleurs, polices et graisses
deja posees par post-10.css / loop-739.css / local-10 (par classe) ne dependent pas de la balise et restent telles quelles. */
/* Surtitre-lien du hero : ex-h6 (15px / 25px / 400) devenu
. */
.elementor-10 p.e-2d74693-526e100 {
font-size: 15px;
line-height: 25px;
font-weight: 400;
}
/* Titre du hero : ex-h2 (32px / 42px) devenu h1 ; Roboto 400 et couleur restent posees par post-10.css. */
.elementor-10 .elementor-element.elementor-element-0144711 h1.elementor-heading-title {
font-size: 32px;
line-height: 42px;
}
/* Cartes produit de la grille 739 : ex-
(13px / 400 / line-height 1) devenu h3 ; couleur accent toujours par loop-739.css. */
.elementor-10 .elementor-739 .elementor-element.elementor-element-5f3de7e h3.elementor-heading-title {
font-size: 13px;
font-weight: 400;
line-height: 1;
}
/* Troisieme carte « pourquoi » : ex-h5 (16px / 26px / 500) devenue h3 comme ses deux voisines (qui restent 20px / 600). */
.elementor-10 h3.e-030fe9c-24c4ed9 {
font-size: 16px;
line-height: 26px;
font-weight: 500;
}
/* Temoignages : titre ex-h6 (15px / 25px, graisse 600 par post-10.css) devenu h3 ; citation et auteur ex-h6 (15px / 25px / 400) devenus
. */
.elementor-10 .elementor-element.elementor-element-c97b8d3 h3.elementor-heading-title,
.elementor-10 .elementor-element.elementor-element-ba704ce h3.elementor-heading-title,
.elementor-10 .elementor-element.elementor-element-7be253e h3.elementor-heading-title {
font-size: 15px;
line-height: 25px;
}
.elementor-10 .elementor-element.elementor-element-7f78f9d p.elementor-heading-title,
.elementor-10 .elementor-element.elementor-element-cbd61c0 p.elementor-heading-title,
.elementor-10 .elementor-element.elementor-element-05da01d p.elementor-heading-title,
.elementor-10 .elementor-element.elementor-element-fa51fdc p.elementor-heading-title,
.elementor-10 .elementor-element.elementor-element-b5f5add p.elementor-heading-title,
.elementor-10 .elementor-element.elementor-element-119aec9 p.elementor-heading-title {
font-size: 15px;
line-height: 25px;
font-weight: 400;
}
/* Bloc editorial SEO (conteneur fa10ada) : 5 titres ex-h5 (16px / 26px / 500) devenus h2. */
.elementor-10 .elementor-element.elementor-element-fa10ada h2.e-heading-base {
font-size: 16px;
line-height: 26px;
font-weight: 500;
}
/* ---- QM HERO OVERLAY : debut du bloc ajoute aux feuilles compilees (rejouable, reecrit a l'identique).
Marqueur : .qm-hero-overlay-build
Le texte du hero est blanc sur la photo, et la photo est un bain tres clair : mesure au navigateur,
en masquant le texte pour ne photographier que le fond, le H1 de 32px etait a 1,74:1 de moyenne et
1,16:1 au pire en desktop (le voile du kit valait --overlay-opacity:0 la, et 0,5 seulement en mobile).
On ne pose PAS de pseudo-element : le kit a deja son ::before de voile pilote par --overlay-opacity,
dans la couleur sombre du site. On regle donc simplement la variable, ce qui garde le mecanisme
d'origine et reste vrai si le kit est regenere.
A 0,5 : H1 environ 4,5:1 de moyenne et 3,3:1 au pire, soit le seuil AA du grand texte (3:1), sans
transformer la photo en rectangle sombre. Le bouton a son propre fond (4,94:1), il ne bouge pas. ---- */
.qm-hero-overlay-build{--qm-hero-overlay:1}
.qm-native .elementor-10 .elementor-element.elementor-element-71dc978{--overlay-opacity:.5}
/* ---- QM HERO OVERLAY : fin du bloc. ---- */
/* ==== QM ACCUEIL CARTES : debut ==== */
/* Cartes de l'accueil alignees sur la geometrie de reference des pages collection
(.qm-pcard, bloc « QM PCARD » de qm-archive.css). Rien n'est reecrit : ce bloc est ajoute
en fin de feuille et ne fait que reprendre, pour les cartes de l'accueil, les mesures deja
retenues pour la grille d'archive.
Ecarts mesures au navigateur avant correction (accueil, viewport 390) :
- « .elementor-739 .elementor-element-b24d855 img{height:352px} » et sa variante mobile
« height:157px » imposaient une hauteur de visuel en pixels. Sous 768px le visuel ne
faisait plus que 157px de large dans un emplacement de 175px : deux bandes creme de 9px
de part et d'autre, et un rapport visuel/carte de 0,559 contre 0,718 en collection.
C'est l'ecart exact deja corrige pour la grille d'archive.
- Le du widget image est un inline-block qui se retracte sur le visuel : le bloc-lien
ne remplissait pas la carte. Meme cause pour les cartes du bloc blog en desktop, ou le
lien mesurait 447px dans un emplacement de 460px.
- « .elementor-element-5b95e15 » posait un filet 1px tout autour de la carte, qui volait
2px de largeur au visuel.
- La grille laissait chaque rangee se dimensionner sur son contenu : la rangee dont un
titre passe sur deux lignes mesurait 270px face a 249px pour l'autre. Dans cette rangee,
la carte au titre court gardait un .e-con de 249px sous un article de grille de 270px,
laissant 21px de creme sous elle : deux cartes voisines de hauteurs visibles differentes.
- Le bloc titre + prix etait cale en haut, avec un retrait dissymetrique (20/20/6) et un
ecart de 10px : les prix de deux cartes voisines se decalaient de 21px.
- Les puces de categorie ne remplissaient pas leur emplacement sous 768px : boite interne
de 82px (libelle sur deux lignes) ou 53px (une ligne) dans un emplacement de 93px.
Reference tenue : visuel carre plein cadre (aspect-ratio 1/1, object-fit cover, donc rapport
d'aspect respecte et aucune deformation), bloc titre + prix cale en bas, ecart de grille
clamp(8px,.55vw,10px), retrait 20px (12px sous 768px), ecart interne 4px.
Portee : toutes les regles partent de « .elementor-10 », l'enveloppe Elementor de la page
d'accueil (page-id-10). Verifie au navigateur : ces selecteurs visent 4 cartes produit,
26 puces et 3 cartes blog sur l'accueil, et ZERO element sur une page collection, qui rend
.elementor-979 / .qm-pcard. Les pages collection ne peuvent donc pas etre touchees.
Couleurs : aucune couleur nouvelle. Seule --e-global-color-primary (encre #2B2B2E, deja le
fond du bloc titre + prix) est reprise en repli ; le filet est retire, pas recolore. */
.qm-accueil-cartes-build{--qm-accueil-cartes:1}
/* ---- Grille « nos incontournables » : ecart de reference et rangees de hauteur egale.
grid-auto-rows:1fr aligne toutes les rangees sur la plus haute, sans tronquer aucun titre. ---- */
.elementor-10 .elementor-element-52741b8 .elementor-loop-container.elementor-grid{
--grid-row-gap:clamp(8px,.55vw,10px);--grid-column-gap:clamp(8px,.55vw,10px);
gap:clamp(8px,.55vw,10px);row-gap:clamp(8px,.55vw,10px);column-gap:clamp(8px,.55vw,10px);
grid-auto-rows:1fr;align-items:stretch}
/* ---- Carte : l'article de grille et le conteneur interne remplissent toute la rangee.
Sans cela le .e-con gardait sa hauteur de contenu et laissait un liset creme sous la carte. ---- */
.elementor-10 .elementor-element-52741b8 .elementor-loop-container>.elementor-739{
display:flex;flex-direction:column;height:100%;min-height:0}
.elementor-10 .elementor-739 .elementor-element.elementor-element-5b95e15{
flex:1 1 auto;height:100%;min-height:0;overflow:hidden;border-radius:0;
border-width:0;border-style:none;
--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;
background-color:var(--e-global-color-primary,#2B2B2E)}
.elementor-10 .elementor-739 .elementor-element.elementor-element-5b95e15>.e-con-inner{
display:flex;flex-direction:column;flex:1 1 auto;height:100%;min-height:0;
gap:0;row-gap:0;column-gap:0;--gap:0px 0px;--row-gap:0px;--column-gap:0px;
padding:0;max-width:none}
/* ---- Visuel : carre plein cadre, cale au bord de la carte. ---- */
.elementor-10 .elementor-739 .elementor-element.elementor-element-b24d855{
position:relative;flex:0 0 auto;width:100%;
aspect-ratio:1/1;height:auto;min-height:0;
overflow:hidden;padding:0;margin:0;line-height:0}
.elementor-10 .elementor-739 .elementor-element.elementor-element-b24d855>a{
position:absolute;inset:0;display:block;width:100%;height:100%}
.elementor-10 .elementor-739 .elementor-element.elementor-element-b24d855 img{
position:absolute;inset:0;display:block;
width:100%;height:100%;max-width:none;margin:0;padding:0;
object-fit:cover;object-position:center center;border-radius:0;box-shadow:none}
/* ---- Bloc titre + prix : cale en bas, retrait et ecart de la reference.
Le calage en bas aligne les prix de deux cartes voisines quel que soit le nombre de lignes du titre. ---- */
.elementor-10 .elementor-739 .elementor-element.elementor-element-4c3e953{
flex:1 1 auto;min-height:0;
display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
gap:4px;row-gap:4px;column-gap:4px;--gap:4px 4px;--row-gap:4px;--column-gap:4px;
padding:20px;
--padding-top:20px;--padding-right:20px;--padding-bottom:20px;--padding-left:20px}
.elementor-10 .elementor-739 .elementor-element.elementor-element-5f3de7e,
.elementor-10 .elementor-739 .elementor-element.elementor-element-fd7f37b{
width:100%;margin:0;padding:0}
.elementor-10 .elementor-739 .elementor-element.elementor-element-fd7f37b .price{
margin:0;padding:0}
@media (max-width:767px){
.elementor-10 .elementor-739 .elementor-element.elementor-element-4c3e953{
padding:12px;
--padding-top:12px;--padding-right:12px;--padding-bottom:12px;--padding-left:12px}
}
/* ---- Puces de categorie : chaque puce remplit son emplacement, donc toutes la meme hauteur.
Le widget image ne se retracte plus (il passait de 50 a 47px quand le libelle etait long,
alors que le visuel gardait ses 50px et depassait de 3px). ---- */
.elementor-10 .elementor-element-3b767ba .swiper-wrapper>.swiper-slide{
display:flex;align-items:stretch}
.elementor-10 .elementor-element-3b767ba .swiper-slide>.e-con{
flex:1 1 auto;height:100%;min-height:0}
.elementor-10 .elementor-element-3b767ba .swiper-slide .e-con-inner{
height:100%;min-height:0;align-items:stretch}
.elementor-10 .elementor-element-3b767ba .swiper-slide .e-con-inner>.e-con-full{
flex:1 1 auto;height:100%;min-height:0}
.elementor-10 .elementor-element-3b767ba .swiper-slide .elementor-widget-image{
flex:0 0 auto}
.elementor-10 .elementor-element-3b767ba .swiper-slide .elementor-widget-image img{
object-fit:cover;object-position:center center}
/* ---- Cartes blog : le lien redevient un bloc pleine largeur, le visuel remplit la carte
(447px sur 460px en desktop avant correction). ---- */
.elementor-10 .elementor-364 .elementor-element.elementor-element-5a250ca>a{
display:block;width:100%;line-height:0}
.elementor-10 .elementor-364 .elementor-element.elementor-element-5a250ca img{
display:block;width:100%;max-width:none;margin:0;
object-fit:cover;object-position:center center}
/* ==== QM ACCUEIL CARTES : fin ==== */
/* ==== QM ACCUEIL RYTHME : debut ==== */
/* Rythme vertical de l'accueil, 02/09/2026. Bloc ajoute en fin de feuille source (csslib/qm-home.css)
ET de la feuille servie (build/home.css) ; css_build.py n'est pas rejoue, rien n'est reecrit.
1) Hero mobile mal centre. Sous 768px le kit calait le contenu en bas du visuel
(--justify-content:flex-end, --padding-top:0px, --padding-bottom:40px) : a 390px le groupe
surtitre + h1 + bouton avait 196px d'air au-dessus et 60px en dessous (154px / 60px a 360px),
alors que le desktop est deja centre au pixel (260px / 260px a 1600px, 218px / 218px a 768px).
On reprend le reglage du desktop, --justify-content:center, avec une marge interieure
symetrique 40px / 40px : l'air du haut et celui du bas deviennent egaux quelle que soit la
hauteur du texte, et --min-height laisse le conteneur grandir si le h1 passe sur plus de lignes. */
@media (max-width: 767px) {
.elementor-10 .elementor-element.elementor-element-71dc978 {
--justify-content: center;
--padding-top: 40px;
--padding-bottom: 40px;
}
}
/* 2) Listes a puces du bloc editorial SEO (conteneur fa10ada) : aucune marge verticale, ni en haut
ni en bas (reset.css met margin-block a 0 sur ul/ol). Resultat, le paragraphe qui suit la liste
de 5664af9 la touchait (0px), et sous 1025px la liste de d735f24, derniere de sa colonne,
touchait la photo (0px). On leur donne la respiration deja utilisee par les paragraphes du site
(p{margin-block-end:.9rem}), en haut comme en bas : meme valeur pour les deux listes, symetrique.
Les marges de blocs voisins fusionnent : l'ecart paragraphe / liste reste .9rem, il ne double pas. */
.elementor-10 .elementor-element.elementor-element-fa10ada ul:not(.elementor-icon-list-items),
.elementor-10 .elementor-element.elementor-element-fa10ada ol:not(.elementor-icon-list-items) {
margin-block-start: .9rem;
margin-block-end: .9rem;
}
/* 3) La marge basse du dernier bloc de la colonne texte pendait sous la colonne et faisait varier
l'ecart texte / photo d'une rangee a l'autre (20px, 0px, 14,4px, 14,4px). On la neutralise sur
le seul dernier widget de la colonne : c'est l'ecart de la rangee, et lui seul, qui separe la
colonne texte de la colonne photo. Les ecarts entre un paragraphe et le titre suivant, eux, ne
bougent pas (widgets qui ne sont pas derniers de leur colonne). */
.elementor-10 .elementor-element.elementor-element-fa10ada .elementor-widget-text-editor:last-child > :last-child {
margin-block-end: 0;
}
/* 4) Sous 1025px les deux colonnes de chaque rangee s'empilent. Trois rangees sur quatre etaient a
--row-gap:0px, la premiere a 20px (valeur du kit, --widgets-spacing-column). On aligne les quatre
sur 20px : meme air entre le texte et la photo partout, que le texte finisse par une liste a
puces ou par un paragraphe. --column-gap n'est pas touche : la mise en page desktop cote a cote
garde exactement les memes largeurs. */
@media (max-width: 1024px) {
.elementor-10 .elementor-element.elementor-element-941ad5d,
.elementor-10 .elementor-element.elementor-element-5228267,
.elementor-10 .elementor-element.elementor-element-8f320d7 {
--row-gap: 20px;
}
}
/* ==== QM ACCUEIL RYTHME : fin ==== */
/* ==== QM ACCUEIL BLOG : debut ==== */
/* Bloc « Ratgeber & Inspiration » de l'accueil (widget loop-carousel ecfb9db) : la piste qui defilait
horizontalement devient une liste empilee, un article sous l'autre.
JavaScript : ce bloc n'en chargeait aucun. Le rendu natif ne sert ni swiper.min.js ni elementor-frontend ;
la piste etait deja un simple conteneur CSS (grid-auto-flow:column + overflow-x:auto + scroll-snap).
Il n'y avait donc rien a desenqueuer, seule la mise en page change.
Portee : le seul widget ecfb9db. Les carrousels imbriques de l'accueil (puces de categories 3b767ba,
« pourquoi nous » 3bfaae0, temoignages 3fa80c4) et ceux des fiches produit gardent leurs regles.
Choix de dessin : au-dessus de 767px, carte horizontale photo a gauche / titre a droite, le vocabulaire
deja employe par les blocs editoriaux de l'accueil qui alternent image et texte. Une pile de photos
pleine largeur aurait donne 1440px de large sur 810px de haut par article, illisible sur grand ecran.
Sous 768px, pile verticale simple : photo puis titre.
Images : rapport 16/9 impose, celui des visuels d'articles (1376x768 = 1,792), au lieu d'une hauteur
figee a 250px. Le recadrage tombe a 0,8% de la hauteur, contre environ 20% de la largeur rognee
aujourd'hui en mobile (358x250 affiche pour un original en 1,79). */
/* 1. La piste : ni grille en colonnes, ni defilement horizontal, ni scroll-snap. */
.elementor-10 .elementor-element.elementor-element-ecfb9db > .swiper > .swiper-wrapper {
display: block;
column-gap: 0;
overflow: visible;
scroll-snap-type: none;
max-width: 1120px;
margin-inline: auto;
}
.elementor-10 .elementor-element.elementor-element-ecfb9db > .swiper > .swiper-wrapper > .swiper-slide {
width: auto;
height: auto;
scroll-snap-align: none;
}
.elementor-10 .elementor-element.elementor-element-ecfb9db .swiper-slide > .elementor-element {
height: auto;
}
/* 2. Rythme : un filet entre deux articles, jamais apres le dernier. */
.elementor-10 .elementor-element.elementor-element-ecfb9db .swiper-slide + .swiper-slide {
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid #EEEAE3;
}
/* 3. Photo : hauteur libre au rapport d'origine, plus de hauteur figee a 250px. */
.elementor-10 .elementor-element.elementor-element-ecfb9db .elementor-element.elementor-element-5a250ca img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* 4. A partir de 768px : photo a gauche, titre a droite, centre sur la hauteur de la photo. */
@media (min-width: 768px) {
.elementor-10 .elementor-element.elementor-element-ecfb9db .swiper-slide > .elementor-element.elementor-element-095a18d {
flex-direction: row;
align-items: center;
gap: 40px;
}
.elementor-10 .elementor-element.elementor-element-ecfb9db .elementor-element.elementor-element-1f4b157 {
flex: 0 0 40%;
max-width: 448px;
}
.elementor-10 .elementor-element.elementor-element-ecfb9db .elementor-element.elementor-element-f11b2b1 {
flex: 1 1 auto;
min-width: 0;
padding: 0;
}
}
/* ==== QM ACCUEIL BLOG : fin ==== */
/* ==== QM ACCUEIL CARTES (suite) : debut ==== */
/* Puces de categorie, sous 768px seulement : le kit fige y met « flex-wrap:wrap » alors que le
desktop est en « nowrap ». Mesure au navigateur : dans une puce de 174px, le contenu utile fait
158px et il faut icone 35 + ecart 8 + libelle 140 = 183px pour « Große Badezimmerteppiche ».
Le libelle passait donc sur une deuxieme ligne de flex, sous l'icone, au lieu de rester a cote
d'elle : les icones ne s'alignaient plus d'une puce a l'autre (y 702 contre 719).
On repasse en « nowrap » comme en desktop et on laisse le libelle se replier tout seul dans la
place restante (il a deja min-width:0), ce qui remet toutes les icones sur la meme ligne.
Aucune couleur, aucun libelle : disposition uniquement. Portee identique au bloc precedent
(« .elementor-10 » = accueil, page-id-10) : zero element vise sur une page collection. */
@media (max-width:767px){
.elementor-10 .elementor-element-3b767ba .swiper-slide .e-con-inner>.e-con-full{
flex-wrap:nowrap;--flex-wrap:nowrap}
.elementor-10 .elementor-element-3b767ba .swiper-slide .elementor-widget-text-editor{
flex:1 1 auto;min-width:0}
}
/* ==== QM ACCUEIL CARTES (suite) : fin ==== */
/* ==== QM ACCUEIL BLOG (chapeau) : debut ==== */
/* Colonne de texte de la carte d'article : titre, chapeau (extrait) et lien de lecture.
Le titre seul laissait 200px de vide a droite de la photo sur grand ecran ; l'extrait et le lien
remplissent la colonne et donnent au visiteur de quoi choisir son article.
Couleurs du kit uniquement : encre #2B2B2E (--e-global-color-primary), rouge #DD1B1F
(--e-global-color-text, 4,94:1 sur blanc, AA texte normal), filet #EEEAE3.
Corps de texte 13px / 21px : la taille du corps du kit, celle deja employee par l'accueil. */
.elementor-10 .elementor-element.elementor-element-ecfb9db .qm-post-card-body {
min-width: 0;
}
.elementor-10 .elementor-element.elementor-element-ecfb9db .qm-post-card-excerpt {
margin: 10px 0 0;
max-width: 70ch;
font-size: 13px;
line-height: 21px;
font-weight: 400;
color: #2B2B2E;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
.elementor-10 .elementor-element.elementor-element-ecfb9db .qm-post-card-more {
margin: 14px 0 0;
font-size: 13px;
line-height: 21px;
}
.elementor-10 .elementor-element.elementor-element-ecfb9db .qm-post-card-more a {
display: inline-block;
color: #DD1B1F;
font-weight: 500;
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
}
.elementor-10 .elementor-element.elementor-element-ecfb9db .qm-post-card-more a:hover,
.elementor-10 .elementor-element.elementor-element-ecfb9db .qm-post-card-more a:focus-visible {
color: #2B2B2E;
}
/* ==== QM ACCUEIL BLOG (chapeau) : fin ==== */
/* ==== QM ACCUEIL BLOG (mesures) : debut ==== */
/* Deux reglages mesures au navigateur apres pose du chapeau.
Mobile 390 : les extraits de 196 et 161 caracteres demandent 4 lignes sur 358px de large, le plafond
de 3 lignes les coupait en plein milieu d'une phrase. Plafond porte a 4 lignes (hauteur de carte
402px -> 423px, la pile reste entierement visible).
Desktop 1600 : la colonne de texte fait 632px, soit environ 95 caracteres par ligne, trop long a lire
pour un chapeau. Plafonnee a 500px, environ 80 caracteres, sans toucher au titre qui garde toute la
largeur. Sur tablette la colonne fait deja 481px, la regle n'y change rien. */
@media (max-width: 767px) {
.elementor-10 .elementor-element.elementor-element-ecfb9db .qm-post-card-excerpt {
-webkit-line-clamp: 4;
line-clamp: 4;
}
}
@media (min-width: 768px) {
.elementor-10 .elementor-element.elementor-element-ecfb9db .qm-post-card-excerpt {
max-width: 500px;
}
}
/* ==== QM ACCUEIL BLOG (mesures) : fin ==== */
/* ==== QM ACCUEIL BLOG (plafond 400px) : debut ==== */
/* Le theme plafonne toute image a la une a 400px de haut sous 991px (regle « .post .wp-post-image »
de csslib/theme). Dans la pile, entre environ 745px et 767px de large, la photo depasse ce plafond :
elle etait rendue 735x400 au lieu de 735x413, soit 3,3% de recadrage en plus au lieu de 0,8%.
Le plafond est leve pour ce seul bloc, le rapport 16/9 tient alors a toutes les largeurs.
Ailleurs (fiches, archives) la regle du theme reste en place. */
@media (max-width: 991px) {
.elementor-10 .elementor-element.elementor-element-ecfb9db .elementor-element.elementor-element-5a250ca img.wp-post-image {
max-height: none;
}
}
/* ==== QM ACCUEIL BLOG (plafond 400px) : fin ==== */
/* ==== QM ACCUEIL BLOG (revision 03/09 : PC cote a cote, mobile empile) : debut ====
Le bloc precedent empilait les 3 articles a toutes les largeurs et posait la carte en rangee
(image a gauche). Demande : PC 3 colonnes cote a cote ; mobile empile. Portee : le seul widget
ecfb9db. Vient APRES le bloc precedent, donc gagne a specificite egale. */
@media (min-width:768px){
.elementor-10 .elementor-element.elementor-element-ecfb9db > .swiper > .swiper-wrapper{
display:grid;grid-template-columns:repeat(3,1fr);gap:30px;column-gap:30px;max-width:1120px;margin-inline:auto}
.elementor-10 .elementor-element.elementor-element-ecfb9db > .swiper > .swiper-wrapper > .swiper-slide{width:auto;height:auto}
.elementor-10 .elementor-element.elementor-element-ecfb9db .swiper-slide + .swiper-slide{margin-top:0;padding-top:0;border-top:0}
.elementor-10 .elementor-element.elementor-element-ecfb9db .swiper-slide > .elementor-element.elementor-element-095a18d{flex-direction:column;align-items:stretch;gap:0}
.elementor-10 .elementor-element.elementor-element-ecfb9db .elementor-element.elementor-element-1f4b157{flex:0 0 auto;max-width:none}
.elementor-10 .elementor-element.elementor-element-ecfb9db .elementor-element.elementor-element-f11b2b1{padding:0}
.elementor-10 .elementor-element.elementor-element-ecfb9db .qm-post-card-body{padding-top:14px}
}
/* ==== QM ACCUEIL BLOG (revision 03/09) : fin ==== */
/* a11y target-size : la puce reste visuellement un point de 6 px, mais sa zone cliquable fait
24x24 px (Lighthouse refuse les cibles plus petites). La rangee est compensee en marges pour
que les points restent a la meme hauteur qu'avant ; seul l'ecart horizontal grandit. */
.elementor-10 .elementor-element.elementor-element-3fa80c4 .swiper-pagination {
gap: 0;
height: 24px;
margin-top: 1px;
margin-bottom: -9px;
}
.elementor-10 .elementor-element.elementor-element-3fa80c4 .swiper-pagination-bullet {
width: 24px;
height: 24px;
border-radius: 0;
background: none;
position: relative;
}
.elementor-10 .elementor-element.elementor-element-3fa80c4 .swiper-pagination-bullet::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
margin: -3px 0 0 -3px;
border-radius: 50%;
background: var(--e-n-carousel-dots-normal-color, #000);
}
/* Titre de page : un mot compose allemand (« Badezimmerteppich », 362 px a 40 px) ne se coupe pas
et sortait de l'ecran sous 402 px de large. Cesure automatique (la page est en lang="de-DE")
plus un filet qui coupe n'importe ou si le dictionnaire de cesure manque. La taille ne change
pas : le titre passe sur deux lignes au lieu de deborder. */
h1.elementor-heading-title,
.elementor-page-title h1,
h1.entry-title {
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}
/* ==== QM ACCUEIL POURQUOI (pile mobile) : debut ==== */
/* Bloc « pourquoi nous » de l'accueil (nested-carousel 3bfaae0) : sous 768px la piste qui defilait
horizontalement devient une pile, une carte sous l'autre, les trois toujours visibles.
Mesure au navigateur avant correction (viewport 390) : la piste faisait 1134px dans une fenetre de
358px, soit 776px caches, c'est a dire 2 cartes sur 3. L'amorce valait 0px : la carte remplissait
exactement la largeur disponible, la suivante etait entierement hors ecran. Pas de puce, pas de
fleche, et la barre de defilement masquee par la regle generale des carrousels imbriques
(scrollbar-width:none et ::-webkit-scrollbar{display:none}). Rien n'indiquait qu'il y avait autre
chose a voir. Le defaut valait aussi en tablette (2 cartes sur 3, amorce 0) mais la pile n'y a pas
de sens : ce bloc ne touche que le mobile, la tablette garde ses deux cartes cote a cote.
JavaScript : ce bloc n'en chargeait aucun. Le rendu natif ne sert ni swiper.min.js ni
elementor-frontend ; la piste etait deja un simple conteneur CSS (grid-auto-flow:column +
overflow-x:auto + scroll-snap). Il n'y a donc rien a desenqueuer, seule la mise en page change.
Recette identique a celle deja retenue le 03/09 pour le bloc « Ratgeber & Inspiration » (ecfb9db) :
meme vocabulaire, meme portee limitee a un widget.
Photo : rapport 4/3 impose au lieu du carre d'origine. Mesure : la pile fait 1663px avec le 4/3
contre 1907px avec le carre, pour 739px aujourd'hui. Le 4/3 evite de tripler la hauteur du bloc
tout en gardant les visuels lisibles (le 16/9 descendait a 1461px mais rognait 44% de la hauteur
des photos, qui sont carrees a l'origine).
Portee : le seul widget 3bfaae0, sous 768px. Desktop et tablette inchanges. */
@media (max-width: 767px) {
.elementor-10 .elementor-element.elementor-element-3bfaae0 > .e-n-carousel > .swiper-wrapper {
display: block;
column-gap: 0;
overflow: visible;
scroll-snap-type: none;
}
.elementor-10 .elementor-element.elementor-element-3bfaae0 > .e-n-carousel > .swiper-wrapper > .swiper-slide {
width: auto;
height: auto;
scroll-snap-align: none;
}
.elementor-10 .elementor-element.elementor-element-3bfaae0 > .e-n-carousel > .swiper-wrapper > .swiper-slide + .swiper-slide {
margin-top: 20px;
}
.elementor-10 .elementor-element.elementor-element-3bfaae0 .elementor-widget-image img {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
}
}
/* ==== QM ACCUEIL POURQUOI : fin ==== */
/* ==== QM ACCUEIL CATEGORIES (amorce + barre visible) : debut ==== */
/* Rangee de vignettes de categories de l'accueil (nested-carousel 3b767ba, 26 vignettes) : elle
defilait horizontalement sans le moindre signal, a TOUTES les largeurs.
Mesures au navigateur avant correction :
- mobile 390 : 2 vignettes entieres, 4416px caches (24 categories sur 26), amorce 0px
- tablette 834: 3 vignettes entieres, 6225px caches, amorce 0px
- desktop 1440: 6 vignettes entieres, 3450px caches, amorce 0px, et la barre de defilement
masquee. Un visiteur a la souris n'avait aucun moyen d'atteindre les 20 autres categories.
Dans les trois cas la derniere vignette visible se terminait pile au bord de la piste, ce qui fait
croire que la rangee est finie.
1. Amorce : la vignette est calculee sur un nombre non entier de vues (2,25 / 3,4 / 6,4) pour que
la suivante soit coupee par le bord. Mesure apres : 33px d'amorce en mobile, 86px en tablette,
80px en desktop. La derniere vignette reste integralement atteignable (verifie en poussant
scrollLeft au maximum), et la page ne deborde pas horizontalement.
2. Mobile, deux ajustements rendus necessaires par le retrecissement (174px -> 161px) : le libelle
le plus long du site (« Große Badezimmerteppiche ») demandait 118px de large pour 112px
disponibles et debordait de sa vignette. L'icone passe de 35 a 32px et l'ecart icone / libelle
de 8 a 4px : le libelle retrouve 7px, tient sur deux lignes comme avant, et la rangee garde sa
hauteur de 71px. La cesure automatique est posee en filet (la page est en lang="de-DE") au cas
ou une categorie serait renommee plus tard avec un mot encore plus long. Zero debordement
mesure sur les 26 vignettes des deux sites. La piste deborde de 16px a droite (margin-right
negatif) pour que la vignette coupee aille jusqu'au bord de l'ecran, comme le veut l'usage sur
mobile ; body porte overflow-x:clip (reset.css), la page ne gagne pas de defilement horizontal.
3. Desktop : l'amorce dit qu'il y a autre chose, elle ne donne pas le moyen d'y aller. La barre de
defilement est donc retablie, fine et discrete, uniquement sur les appareils a pointeur precis
(@media hover + pointer:fine) : sur mobile les barres sont en surimpression et invisibles au
repos, les y afficher ne servirait a rien. scrollbar-width/scrollbar-color pour les navigateurs
recents, ::-webkit-scrollbar en repli pour les plus anciens (les deux syntaxes s'excluent, le
navigateur applique celle qu'il connait). Mesure : 10px reserves sous la rangee, le curseur
occupe environ un quart de la largeur, ce qui annonce a lui seul l'ampleur de ce qui reste.
Portee : le seul widget 3b767ba de l'accueil. Aucun libelle, aucune couleur, aucune categorie
touchee : disposition uniquement. */
@media (max-width: 767px) {
.elementor-10 .elementor-element.elementor-element-3b767ba > .e-n-carousel > .swiper-wrapper {
margin-right: -16px;
grid-auto-columns: calc( ( 100% - ( 2.25 - 1 ) * var(--e-n-carousel-swiper-slides-gap, 10px) ) / 2.25 );
}
.elementor-10 .elementor-element-3b767ba .swiper-slide .elementor-widget-image img {
width: 32px;
max-width: 32px;
}
.elementor-10 .elementor-element-3b767ba .swiper-slide .e-con-inner > .e-con-full {
--gap: 4px 4px;
--column-gap: 4px;
gap: 4px;
}
.elementor-10 .elementor-element-3b767ba .swiper-slide .elementor-widget-text-editor {
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.elementor-10 .elementor-element.elementor-element-3b767ba > .e-n-carousel > .swiper-wrapper {
grid-auto-columns: calc( ( 100% - ( 3.4 - 1 ) * var(--e-n-carousel-swiper-slides-gap, 10px) ) / 3.4 );
}
}
@media (min-width: 1025px) {
.elementor-10 .elementor-element.elementor-element-3b767ba > .e-n-carousel > .swiper-wrapper {
grid-auto-columns: calc( ( 100% - ( 6.4 - 1 ) * var(--e-n-carousel-swiper-slides-gap, 10px) ) / 6.4 );
}
}
@media (hover: hover) and (pointer: fine) {
.elementor-10 .elementor-element.elementor-element-3b767ba > .e-n-carousel > .swiper-wrapper {
scrollbar-width: thin;
scrollbar-color: rgba(43, 43, 46, .4) transparent;
}
.elementor-10 .elementor-element.elementor-element-3b767ba > .e-n-carousel > .swiper-wrapper::-webkit-scrollbar {
display: block;
height: 8px;
}
.elementor-10 .elementor-element.elementor-element-3b767ba > .e-n-carousel > .swiper-wrapper::-webkit-scrollbar-thumb {
background: rgba(43, 43, 46, .4);
border-radius: 4px;
}
.elementor-10 .elementor-element.elementor-element-3b767ba > .e-n-carousel > .swiper-wrapper::-webkit-scrollbar-track {
background: rgba(43, 43, 46, .08);
border-radius: 4px;
}
}
/* ==== QM ACCUEIL CATEGORIES : fin ==== */
/* ==== QM ACCUEIL POURQUOI (amorce tablette) : debut ==== */
/* Complement au bloc precedent. Entre 768 et 1024px la pile n'a pas de sens (la largeur permet deux
cartes cote a cote), mais le defaut d'affordance y etait le meme qu'en mobile : 2 cartes sur 3
affichees, la troisieme entierement hors ecran, amorce 0px, ni puce ni fleche ni barre.
Mesure avant : 383px caches a 768, 416px a 834, 511px a 1024.
La carte est donc calculee sur 2,2 vues au lieu de 2, ce qui fait couper la troisieme par le bord.
Mesure apres : amorce de 40px a 768, 46px a 834, 63px a 1024 ; la derniere carte reste
integralement atteignable aux trois largeurs ; le bloc grandit de 0 a 42px selon la largeur (le
texte se replie sur une ligne de plus dans une carte un peu plus etroite).
2,25 vues donnait une amorce plus large mais la derniere carte n'etait plus atteignable au pixel
pres a 834px (arrondi de sous-pixel sur le point de calage), d'ou 2,2. */
@media (min-width: 768px) and (max-width: 1024px) {
.elementor-10 .elementor-element.elementor-element-3bfaae0 > .e-n-carousel > .swiper-wrapper {
grid-auto-columns: calc( ( 100% - ( 2.2 - 1 ) * var(--e-n-carousel-swiper-slides-gap, 10px) ) / 2.2 );
}
}
/* ==== QM ACCUEIL POURQUOI (amorce tablette) : fin ==== */
/* ==== QM ACCUEIL CATEGORIES (revision 09/09 : defilement automatique au lieu de la barre) : debut ====
Le bloc precedent retablissait une barre de defilement fine sur les appareils a pointeur precis,
pour donner au visiteur a la souris un moyen d'atteindre les 20 categories hors ecran. Trop laide
(avis du user) : elle est remplacee par un defilement automatique, en CSS, sans JavaScript.
Ce bloc vient APRES le precedent, il gagne donc a specificite egale ; l'amorce, elle, est
conservee telle quelle.
1. La barre repart se cacher (scrollbar-width:none, ::-webkit-scrollbar{display:none}). La piste
reste un conteneur de defilement (overflow-x:auto n'est pas touche) : le pave tactile, le
Maj+molette et le tactile continuent de fonctionner, seule la barre disparait.
2. La rangee defile toute seule, en va-et-vient. La distance parcourue est exactement la longueur
cachee : (nombre de vignettes - nombre de vues) x (largeur d'une vignette + ecart). La regle
porte sur les vignettes, donc 100% y vaut la largeur d'une vignette, et l'ecart vaut 10px :
la distance s'ecrit (var(--qm-cats-n) - 6,4) x (-100% - 10px), sans rien connaitre de la
largeur de l'ecran. Mesure sur les deux sites : en fin de course le bord droit de la 26e
vignette tombe AU PIXEL sur le bord de la piste (ecart 0), donc aucun vide a l'arrivee, et la
geometrie est identique de 1440px a 1920px (la piste est plafonnee a 1425px de large).
🚨 --qm-cats-n est le SEUL chiffre a reprendre si des categories sont ajoutees ou retirees.
Le 6,4 est le nombre de vues pose par le bloc precedent : les deux doivent rester accordes.
3. Allure lineaire, 90s dans chaque sens, soit 49px/s, une nouvelle vignette toutes les 4,4s.
Mesure : 49px/s des la premiere seconde. Un ease-in-out avait ete essaye puis ecarte, il
demarrait a 10px/s, c'est a dire quasiment immobile au moment ou le signal compte le plus.
4. Pause au survol et au focus clavier (:focus-within), sinon la vignette visee se derobe au
moment du clic. Mesure : figee au pixel pendant le survol, repart en sortant ; pendant la
pause le defilement manuel reste possible et la 26e vignette reste atteignable.
5. prefers-reduced-motion : aucune animation, et la barre fine revient pour ces visiteurs la
seulement. Sans ce repli ils perdraient a la fois le mouvement et le moyen d'atteindre les
autres categories.
Fluidite mesuree : 61 images par seconde avec et sans l'animation (transform seul, donc compose,
et aucune incidence sur la mise en page ni sur le CLS).
Portee : le seul widget 3b767ba, appareils a pointeur precis. Mobile et tablette gardent l'amorce
posee le 08/09 sans animation : le doigt suffit, et une animation lutterait contre le geste. */
.elementor-10 .elementor-element.elementor-element-3b767ba {
--qm-cats-n: 26;
}
@media (hover: hover) and (pointer: fine) {
.elementor-10 .elementor-element.elementor-element-3b767ba > .e-n-carousel > .swiper-wrapper {
scrollbar-width: none;
scrollbar-color: auto;
scroll-snap-type: none;
}
.elementor-10 .elementor-element.elementor-element-3b767ba > .e-n-carousel > .swiper-wrapper::-webkit-scrollbar {
display: none;
}
.elementor-10 .elementor-element.elementor-element-3b767ba > .e-n-carousel > .swiper-wrapper > .swiper-slide {
animation: qm-cats-defile 90s linear infinite alternate;
}
.elementor-10 .elementor-element.elementor-element-3b767ba:hover > .e-n-carousel > .swiper-wrapper > .swiper-slide,
.elementor-10 .elementor-element.elementor-element-3b767ba:focus-within > .e-n-carousel > .swiper-wrapper > .swiper-slide {
animation-play-state: paused;
}
}
@keyframes qm-cats-defile {
from { transform: translateX(0); }
to { transform: translateX(calc( ( var(--qm-cats-n) - 6.4 ) * ( -100% - 10px ) )); }
}
@media (prefers-reduced-motion: reduce) {
.elementor-10 .elementor-element.elementor-element-3b767ba > .e-n-carousel > .swiper-wrapper > .swiper-slide {
animation: none;
transform: none;
}
.elementor-10 .elementor-element.elementor-element-3b767ba > .e-n-carousel > .swiper-wrapper {
scrollbar-width: thin;
scrollbar-color: rgba(43, 43, 46, .4) transparent;
}
.elementor-10 .elementor-element.elementor-element-3b767ba > .e-n-carousel > .swiper-wrapper::-webkit-scrollbar {
display: block;
height: 8px;
}
}
/* ==== QM ACCUEIL CATEGORIES (revision 09/09) : fin ==== */
/* ==== QM ACCUEIL CATEGORIES (revision 09/09 bis : plus AUCUNE barre, nulle part) : debut ====
La revision precedente gardait une barre fine dans un seul cas : prefers-reduced-motion, pour que
les visiteurs qui coupent les animations conservent un moyen d'atteindre les categories hors ecran.
C'etait le SEUL endroit du site ou une barre pouvait encore apparaitre, et un balayage de tous les
elements de la page l'a confirme : en mode normal aucune barre, en mouvement reduit une barre de
10px sur la piste. Or Windows « Effets visuels > Animations » decoche fait basculer le navigateur
en mouvement reduit : un visiteur (et le proprietaire du site) voyait donc toujours la barre alors
que la CSS servie etait la bonne. Le user n'en veut nulle part : elle saute aussi de ce cas la.
Ce bloc vient APRES, il gagne a specificite egale.
Ce que gardent les visiteurs en mouvement reduit : la rangee ne bouge pas (l'animation reste
annulee, c'est le respect du reglage), mais l'amorce du 08/09 subsiste, une vignette est coupee par
le bord droit, et la piste reste defilable au doigt, au pave tactile et en Maj+molette. C'est
exactement ce que voient deja le mobile et la tablette, ou aucune barre n'a jamais ete posee.
Seul le clic-glisser sur une barre disparait pour eux. */
@media (prefers-reduced-motion: reduce) {
.elementor-10 .elementor-element.elementor-element-3b767ba > .e-n-carousel > .swiper-wrapper {
scrollbar-width: none;
scrollbar-color: auto;
}
.elementor-10 .elementor-element.elementor-element-3b767ba > .e-n-carousel > .swiper-wrapper::-webkit-scrollbar {
display: none;
}
}
/* ==== QM ACCUEIL CATEGORIES (revision 09/09 bis) : fin ==== */