/* 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 <p> 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 <p>. */
.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-<p> (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 <p>. */
.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 <a> 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;
}