/* qm-archive.css : archives produits et recherche sans JavaScript (gabarit 940, loop item 979, ESF).
   Uniquement les remplacements du JS (carrousel de chips, tiroir de filtres, accordeon, tri) et les correctifs indispensables.
   Selecteurs scopes sur les IDs d'elements d'origine. */

/* 1. Carrousel des 6 chips de categories (nested-carousel 9603144, Swiper abandonne) :
      grille sur desktop (6/6 visibles), defilement horizontal + scroll-snap sur tablette (3) et mobile (2).
      Les variables --e-n-carousel-swiper-slides-to-display (6/3/2) et -gap (10px) sont posees par post-940.css. */
.elementor-940 .elementor-element-9603144 .e-n-carousel {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.elementor-940 .elementor-element-9603144 .swiper-wrapper {
	display: grid;
	grid-template-columns: repeat(var(--e-n-carousel-swiper-slides-to-display, 6), minmax(0, 1fr));
	gap: var(--e-n-carousel-swiper-slides-gap, 10px);
	margin: 0;
	padding: 0;
}
.elementor-940 .elementor-element-9603144 .swiper-slide {
	min-width: 0;
}
.elementor-940 .elementor-element-9603144 .swiper-slide > .e-con {
	height: 100%;
}
@media (max-width: 1024px) {
	.elementor-940 .elementor-element-9603144 .swiper-wrapper {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
	}
	.elementor-940 .elementor-element-9603144 .swiper-wrapper::-webkit-scrollbar {
		display: none;
	}
	.elementor-940 .elementor-element-9603144 .swiper-slide {
		flex: 0 0 calc((100% - (var(--e-n-carousel-swiper-slides-to-display, 3) - 1) * var(--e-n-carousel-swiper-slides-gap, 10px)) / var(--e-n-carousel-swiper-slides-to-display, 3));
		scroll-snap-align: start;
	}
}

/* 2. Colonnes, gouttieres et hauteur d'image tablette/mobile de la grille ESF
      (le widget d'origine les posait en style inline ; post-940.css ne fournit que --esf-cols). */
.elementor-940 .elementor-element-d250823 .esf-product-grid {
	--esf-cols-tablet: 2;
	--esf-cols-mobile: 2;
	--esf-gap-tablet: 16px;
	--esf-gap-mobile: 16px;
	--esf-image-height-tablet: 250px;
	--esf-image-height-mobile: 250px;
}

/* 3. Tiroir de filtres sans JS : case a cocher #qm-flt-toggle (visuellement cachee, focusable),
      basculee par les <label> (bouton Filter de la barre d'outils, croix du tiroir, voile mobile). */
.qm-flt-toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
label.esf-product-toolbar__filter-btn,
label.esf-shop-layout__sidebar-close,
label.esf-shop-layout__overlay-close {
	user-select: none;
	-webkit-user-select: none;
}
.qm-flt-toggle:focus-visible ~ .elementor-widget-esf-product-toolbar .esf-product-toolbar__filter-btn {
	outline: 2px solid #111;
	outline-offset: 2px;
}
/* Desktop et tablette : ouvert par defaut (case non cochee), ferme quand cochee.
   Memes valeurs que la regle .esf-shop-layout.is-sidebar-open d'esf-frontend.css (classe d'etat posee par le JS a l'origine). */
@media (min-width: 768px) {
	.qm-flt-toggle:not(:checked) ~ .elementor-widget-esf-shop-layout .esf-shop-layout__sidebar {
		position: sticky;
		top: var(--esf-sticky-sidebar-top, 120px);
		align-self: flex-start;
		flex: 0 0 var(--esf-sidebar-width, 30%);
		width: var(--esf-sidebar-width, 30%);
		max-width: var(--esf-sidebar-width, 30%);
		min-height: 12.5rem;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		overflow: auto;
		border: 0;
	}
	.qm-flt-toggle:not(:checked) ~ .elementor-widget-esf-shop-layout .esf-shop-layout__body {
		min-height: 12.5rem;
		column-gap: var(--esf-content-gap, 30px);
		gap: var(--esf-content-gap, 30px);
	}
	.qm-flt-toggle:not(:checked) ~ .elementor-widget-esf-shop-layout .esf-shop-layout__products {
		flex: 1 1 0;
		width: auto;
		max-width: none;
		min-width: 0;
	}
}
/* Mobile : tiroir plein ecran ferme par defaut, ouvert quand la case est cochee ; le voile est un <label> qui referme. */
@media (max-width: 767px) {
	.qm-flt-toggle:checked ~ .elementor-widget-esf-shop-layout .esf-shop-layout__sidebar {
		transform: translate3d(0, 0, 0);
	}
	.qm-flt-toggle:checked ~ .elementor-widget-esf-shop-layout .esf-shop-layout__overlay {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
	label.esf-shop-layout__overlay-close {
		display: block;
	}
}

/* 4. Accordeon de filtres en <details> natif (a l'origine bouton + panneau pilotes par JS). */
.esf-accordion__item > summary.esf-accordion__header {
	list-style: none;
}
.esf-accordion__item > summary.esf-accordion__header::-webkit-details-marker {
	display: none;
}
.esf-accordion__item[open] .esf-accordion__icon::after {
	opacity: 0;
	transform: translateY(-50%) rotate(90deg) scaleX(0);
}

/* 5. Cases de disponibilite = liens GET (?stock_status=...) avec une case dessinee en CSS (pas de <input> dans un <a>). */
a.esf-filter-list__label {
	text-decoration: none;
}
.qm-flt-box {
	position: relative;
	display: inline-block;
	width: 13px;
	height: 13px;
	border: 1px solid currentColor;
	border-radius: 2px;
	background: #fff;
}
.esf-filter-list__item.is-active .qm-flt-box::after {
	content: "";
	position: absolute;
	inset: 2px;
	background: currentColor;
}
.esf-filter-list__item.is-active .esf-filter-list__text {
	font-weight: 600;
}
a.esf-product-filters__reset,
a.esf-active-filters__chip,
a.esf-active-filters__clear-all,
a.esf-product-grid__empty-clear {
	text-decoration: none;
}
a.esf-active-filters__clear-all {
	text-decoration: underline;
}

/* 6. Tri : formulaire GET (select + bouton discret) a la place du select onchange d'origine. */
.qm-sort-form {
	margin: 0;
}
/* ---- AJAX (assets/qm-archive.js, 30/08) : bouton « Anwenden » du tri inutile quand le script tourne (le select suffit) ;
   voile pendant le chargement ---- */
html.qm-js .qm-sort-form .qm-sort-apply {
	display: none;
}
.qm-native [data-qm-archive].is-loading .esf-product-grid,
.qm-native [data-qm-archive].is-loading .esf-product-filters,
.qm-native [data-qm-archive].is-loading .esf-active-filters {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.15s;
}
.qm-sort-apply {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0.45rem 0.7rem;
	border: 1px solid currentColor;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.875rem;
	line-height: 1.2;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	opacity: 0.8;
}
.qm-sort-apply:hover,
.qm-sort-apply:focus-visible {
	opacity: 1;
}

/* 7. Pagination WooCommerce native dans l'habillage ESF : la <ul class="page-numbers"> de WordPress
      heritait de la bordure et du padding prevus pour les liens, et woocommerce.css la met en inline-block bordee. */
.esf-pagination ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	min-width: 0;
	min-height: 0;
	border: 0;
	list-style: none;
	white-space: normal;
}
.esf-pagination ul.page-numbers li {
	display: block;
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: visible;
}

/* 8. Recherche : sous-titre de l'etat vide. */
.esf-product-grid__empty-sub {
	margin: 0;
	opacity: 0.75;
}

/* 9. Groupes d'attributs (memes classes ESF que la disponibilite, rien a ajouter) et groupe Prix :
      formulaire GET a deux champs numeriques dans l'habillage des champs du curseur ESF d'origine (esf-price-slider__*),
      libelles visibles au lieu du curseur, bouton discret aligne a gauche. */
.qm-price-form {
	margin: 0;
}
.qm-price-form .esf-price-slider__label {
	margin: 0 0 0.25rem;
	font-size: 0.8125rem;
	line-height: 1.2;
	opacity: 0.75;
}
.qm-price-form .esf-price-slider__number::placeholder {
	opacity: 0.5;
}
.qm-price-form .qm-price-apply {
	align-self: flex-start;
}

/* Hierarchie des titres (SEO) : le titre de la carte 979 passe de <p> a h2 (archives et recherche), rendu identique.
   Police, taille, graisse et couleur restent celles de post-979.css (Roboto 13px 600, accent), independantes de la balise ;
   seul l'interligne venait de la balise : line-height:1 de .elementor-heading-title pour le <p>, 42px du kit (.elementor-kit-7 h2) pour un h2. */
.elementor-979 .elementor-element.elementor-element-5537b1e h2.elementor-heading-title {
	line-height: 1;
}

/* ---- Tiroir de filtres mobile (30/08) : l'en-tete (titre + croix) reste TOUJOURS visible (sticky) ; 100dvh contre le 100vh iOS ;
   connecte, la barre d'admin WP recouvrait le haut du tiroir (croix invisible) : on decale sous elle. ---- */
.qm-native .esf-shop-layout__sidebar { height: 100dvh; }
.qm-native .esf-shop-layout__sidebar-header { position: sticky; top: 0; background: #fff; z-index: 3; }
.admin-bar.qm-native .esf-shop-layout__sidebar { top: 32px; height: calc(100dvh - 32px); }
@media (max-width: 782px) {
	.admin-bar.qm-native .esf-shop-layout__sidebar { top: 46px; height: calc(100dvh - 46px); }
}

/* ---- Barre d'outils d'archive en mobile etroit (30/08) : « Filter » et le tri restent sur UNE ligne (le compteur saute,
   le select peut retrecir) ; au-dela de 480 px rien ne change. ---- */
@media (max-width: 480px) {
	.qm-native .esf-product-toolbar { flex-wrap: nowrap; justify-content: space-between; gap: 10px; }
	.qm-native .esf-product-toolbar__count-wrap { display: none; }
	.qm-native .esf-product-toolbar__sort-wrap { flex: 0 1 auto; min-width: 0; }
	.qm-native .esf-product-toolbar__sort-wrap select { max-width: 200px; min-width: 0; }
}

/* ---- QM PCARD : debut du bloc ajoute aux feuilles compilees (rejouable, reecrit a l'identique).
   Marqueur : .qm-pcard-build
   Cartes produit de la grille d'archive, transposees du gabarit de reference a trois colonnes.
   Ecarts corriges par rapport au kit fige :
     - « .esf-product-grid[data-equal-image=yes] .products li.product img{height:var(--esf-image-height,250px)} »
       et « .elementor-979 .elementor-element-26c8056 img{height:358px} » imposaient une hauteur de visuel fixe
       dans un conteneur de 358px : le visuel ne remplissait pas son cadre et laissait ~108px de vide par carte ;
     - « .elementor-979 .elementor-element-bc5de49 » posait un filet 1px autour de la carte ;
     - le titre etait en graisse 600 avec un interligne de 1 (13px) au lieu de 500 / 1,6 ;
     - l'ecart de grille etait de 24px au lieu de ~10px.
   Le survol (seconde photo + agrandissement du visuel) est 100% CSS, sans aucun JavaScript.
   Couleurs : palette du site (--e-global-color-primary / -accent / -text), pas celles de la reference. ---- */
.qm-pcard-build{--qm-pcard:1}

/* Grille : ecart resserre (reference : 10px au-dela de 1440px, ~8px en mobile). */
.qm-native .esf-product-grid .products{gap:clamp(8px,.55vw,10px)}

/* Carte : bloc plein, sans filet, coins carres, debordement masque (le visuel s'agrandit au survol). */
.qm-native .esf-product-grid .products li.product .qm-pcard{
	position:relative;overflow:hidden;border-radius:0;flex:1 1 auto;
	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)}
.qm-native .esf-product-grid .products li.product .qm-pcard>.qm-pcard__inner{
	height:100%;gap:0;row-gap:0;padding:0;max-width:none}

/* Visuel : carre plein cadre. */
.qm-native .esf-product-grid .products li.product .qm-pcard__media{
	position:relative;display:block;flex:0 0 auto;
	aspect-ratio:1/1;height:auto;min-height:0;--min-height:0px;
	overflow:hidden;padding:0}
.qm-native .esf-product-grid .products li.product .qm-pcard__imgbox{
	position:absolute;inset:0;padding:0;margin:0;line-height:0}
.qm-native .esf-product-grid .products li.product .qm-pcard__imglink{
	display:block;width:100%;height:100%}
.qm-native .esf-product-grid .products li.product a .qm-pcard__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}
.qm-native .esf-product-grid .products li.product a .qm-pcard__img--alt{
	opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}

@media (hover:hover) and (pointer:fine){
	.qm-native .esf-product-grid .products li.product a .qm-pcard__img{
		transition:scale .6s cubic-bezier(.25,.46,.45,.94),opacity .35s ease,visibility .35s ease}
	.qm-native .esf-product-grid .products li.product .qm-pcard:hover .qm-pcard__img{scale:1.05}
	.qm-native .esf-product-grid .products li.product .qm-pcard:hover .qm-pcard__img--alt{opacity:1;visibility:visible}
}

/* Pastilles : haut-gauche du visuel, retrait de 10px, pilule (reference : 4px 10px, rayon 60px, 13px/500). */
.qm-native .esf-product-grid .products li.product .qm-pcard__badges{
	position:absolute;top:0;left:0;z-index:2;
	display:flex;flex-direction:column;align-items:flex-start;gap:6px;
	padding:10px;margin:0;pointer-events:none}
.qm-native .esf-product-grid .products li.product .qm-pcard__badge{
	display:inline-flex;align-items:center;
	padding:4px 10px;border:0;border-radius:60px;
	font-size:13px;font-weight:500;line-height:1.6;letter-spacing:normal;white-space:nowrap}
.qm-native .esf-product-grid .products li.product .qm-pcard__badge--sale{
	background-color:var(--e-global-color-text,#DD1B1F);color:#FFFFFF}
.qm-native .esf-product-grid .products li.product .qm-pcard__badge--oos{
	background-color:var(--e-global-color-primary,#2B2B2E);color:var(--e-global-color-accent,#FFF9EA)}

/* Bloc titre + prix : cale en bas du reste de la carte, ecart de 4px, retrait de 20px. */
.qm-native .esf-product-grid .products li.product .qm-pcard__body{
	flex:1 1 auto;display:flex;flex-direction:column;
	align-items:flex-start;justify-content:flex-end;
	gap:4px;row-gap:4px;padding:20px;text-align:left;
	background-color:var(--e-global-color-primary,#2B2B2E)}
.qm-native .esf-product-grid .products li.product .qm-pcard__titlebox,
.qm-native .esf-product-grid .products li.product .qm-pcard__pricebox{
	width:100%;margin:0;padding:0}
.qm-native .esf-product-grid .products li.product h2.qm-pcard__title{
	margin:0;padding:0;
	font-size:13px;font-weight:500;line-height:1.6;letter-spacing:normal;text-transform:none;
	color:var(--e-global-color-accent,#FFF9EA)}
.qm-native .esf-product-grid .products li.product h2.qm-pcard__title a{
	color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}
.qm-native .esf-product-grid .products li.product .elementor-widget-woocommerce-product-price p.qm-pcard__price{
	margin:0;padding:0;
	font-size:13px;font-weight:400;line-height:1.6;
	color:var(--e-global-color-accent,#FFF9EA)}
.qm-native .esf-product-grid .products li.product p.qm-pcard__price del{
	opacity:.6;text-decoration:line-through;color:inherit;font-size:inherit;font-weight:inherit}
.qm-native .esf-product-grid .products li.product p.qm-pcard__price ins{
	background:none;color:inherit;font-size:inherit;font-weight:inherit;text-decoration:none}

@media (max-width:767px){
	.qm-native .esf-product-grid .products li.product .qm-pcard__body{padding:12px}
}
/* ---- QM PCARD : fin du bloc. ---- */

/* ---- QM CATDESC : debut du bloc ajoute aux feuilles compilees (rejouable, reecrit a l'identique).
   Marqueur : .qm-catdesc-build
   La description de categorie (750 mots, titres, table, FAQ) est rendue dans une carte dessinee pour
   UNE ligne de CTA : mesure au navigateur, les paragraphes faisaient 1360px de large a 13px, soit plus
   de 200 signes par ligne, les paragraphes etaient colles (margin 0) et les titres n'avaient que 8px
   d'air au-dessus. Les liens sortaient en rose rgb(204,51,102), hors palette ; le rouge de marque sur
   fond sombre ne passe pas 4,5:1, donc les liens sont blancs soulignes.
   🚨 Deux pieges traverses avant d'arriver ici, notes pour ne pas les refaire :
   1) « max-width:68ch » se calcule avec la taille de police DE CHAQUE ELEMENT : 1156px pour un h2 de
      26px contre 544px pour un p de 15px. Les titres debordaient donc la colonne. Toujours une valeur
      absolue pour une longueur de ligne.
   2) Plafonner le CONTENEUR est inutile ici : « .elementor.elementor .e-con > .elementor-widget
      {max-width:100%} » vaut (0,4,0) et gagne contre une classe doublee (0,2,0). On laisse donc le
      widget pleine largeur et on plafonne SON CONTENU, que cette regle ne cible pas. ---- */
.qm-catdesc-build{--qm-catdesc:1}
.qm-catdesc.qm-catdesc{text-align:left;font-size:15px;line-height:1.7;padding-block:8px}
.qm-catdesc.qm-catdesc > *{max-width:680px;margin-inline:auto}
.qm-catdesc.qm-catdesc > table{max-width:1000px}
.qm-catdesc.qm-catdesc p{margin:0 auto 1.1em}
.qm-catdesc.qm-catdesc h2{margin:2.1em auto .55em;font-size:26px;line-height:1.25;font-weight:500;text-align:left}
.qm-catdesc.qm-catdesc h3{margin:1.7em auto .45em;font-size:18px;line-height:1.35;font-weight:600;text-align:left}
.qm-catdesc.qm-catdesc > :first-child{margin-top:0}
.qm-catdesc.qm-catdesc ul,.qm-catdesc.qm-catdesc ol{margin:0 auto 1.1em;padding-left:1.25em}
.qm-catdesc.qm-catdesc li{margin:.35em 0}
.qm-catdesc.qm-catdesc strong{font-weight:600}
.qm-catdesc.qm-catdesc a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.qm-catdesc.qm-catdesc a:hover,.qm-catdesc.qm-catdesc a:focus-visible{text-decoration-thickness:2px}
.qm-catdesc.qm-catdesc blockquote{margin:1.4em auto;padding:.1em 0 .1em 1em;border-left:2px solid currentColor;opacity:.92}
.qm-catdesc.qm-catdesc table{margin:1.6em auto 1.8em;border-collapse:collapse;font-size:14px;text-align:left;width:100%}
.qm-catdesc.qm-catdesc th,.qm-catdesc.qm-catdesc td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.14)}
.qm-catdesc.qm-catdesc tbody tr:last-child th,.qm-catdesc.qm-catdesc tbody tr:last-child td{border-bottom:0}
@media (max-width:767px){
	.qm-catdesc.qm-catdesc h2{font-size:22px;margin-top:1.8em}
	.qm-catdesc.qm-catdesc h3{font-size:17px}
	.qm-catdesc.qm-catdesc table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:13px}
	.qm-catdesc.qm-catdesc th,.qm-catdesc.qm-catdesc td{padding:9px 11px;white-space:nowrap}
}
/* ---- QM CATDESC : fin du bloc. ---- */

/* ==== QM FACETTES 01/09 : debut ==== rejouable : bloc delimite, ajoute en fin de feuille ==== */
/* 1. Options de facette a zero produit : on les MASQUE au lieu de les afficher grisees.
      Une option qui ne ramene rien est un clic mort. Mesure avant : sur « Badematte Halbrund »,
      9 des 10 options de Material et 2 des 4 de Groesse etaient a (0). */
.esf-filter-list__item.is-zero { display: none; }

/* ==== QM FACETTES 01/09 : fin ==== */

/* ==== QM CATDESC TABLEAU : debut ==== bloc delimite, ajoute en fin de feuille, rejouable ====
   LES 27 TABLEAUX DE DESCRIPTION DE CATEGORIE (01/09/2026).

   CE QUE C'EST, et ce que ce n'est pas : un comparatif de 4 a 7 rangees sur 3 a 5 colonnes, avec un
   vrai <thead><th>, pose sur la carte SOMBRE de la description (fond mesure rgb(43,43,46)). Ce n'est
   donc pas le tableau de la fiche produit, qui fait 2 colonnes libelle/valeur sur fond blanc et dont la
   premiere colonne est un <th scope="row">. On ne cherche pas a les rendre identiques ; on enleve ce
   qui n'est pas de la maison et on remet le reste dans la DA.

   ETAT AVANT, mesure au navigateur sur badteppich, rutschfeste-badematten et badematte-halbrund :
     - chaque cellule portait « border:1px solid rgba(128,128,128,.5) » sur ses QUATRE cotes, d'ou une
       grille grise complete, verticales comprises ;
     - la rangee 1, 3, 5 du corps portait « background-color:rgba(128,128,128,.07) », d'ou un zebre gris
       sous le bandeau rouge.
   Origine unique des deux, trouvee par CSS.getMatchedStylesForNode : la remise a zero du theme parent,
   themes/hello-elementor/assets/css/reset.css, qui declare
       table td,table th{border:1px solid hsla(0,0%,50%,.502);line-height:1.5;padding:15px}
       table tbody>tr:nth-child(odd)>td,table tbody>tr:nth-child(odd)>th{background-color:hsla(0,0%,50%,.071)}
   🚨 Le bloc QM CATDESC plus haut dans ce fichier ne posait que « border-bottom » : les trois autres
   cotes restaient donc en place. C'est exactement le piege deja documente pour le tableau produit, et
   c'est pour cela qu'on repart ici d'un « border:0 » avant de reposer le seul filet voulu.
   Le bandeau rouge, lui, N'EST PAS TOUCHE : il vient de tout-auto-qm.php, print_catdesc_table_css(),
   qui imprime dans wp_head « table thead th{background-color:#DD1B1F!important;...} ». Regle globale et
   !important : on la laisse faire, elle est deja dans la palette.

   CE QUE CE BLOC POSE, releve sur le site et non invente : filet chaud #EEEAE3 (la bordure des cartes
   d'avis, et le separateur de rangees du tableau produit) ramene a 16 % d'opacite pour tenir sur fond
   sombre, et un voile du meme filet chaud a 7 % sur la colonne de tete de rangee, echo de la colonne
   creme #FAF5EA du tableau produit. Plus une seule verticale, plus un seul gris : les colonnes sont
   separees par le seul blanc tournant, comme sur la fiche.
   Specificites : le zebre est tue en (0,2,3) contre (0,1,3) pour la regle du theme parent ; la colonne
   de tete repasse devant en (0,3,3) et est ecrite APRES, sinon le fond transparent de la regle
   precedente l'emportait. Aucun !important.

   MOBILE : rien a ajouter, et c'etait a verifier plutot qu'a supposer. Le bloc QM CATDESC pose deja
   « display:block;overflow-x:auto » sous 768px : a 390px de fenetre la table mesure 278px de large pour
   573px de contenu, elle defile donc DANS son cadre, et document.body.scrollWidth vaut 390, exactement
   la largeur de la fenetre. Le <body> ne defile pas horizontalement. ==== */
.qm-catdesc-tbl-build{--qm-catdesc-tbl:1}

/* 1. Plus de grille : on repart de zero et on ne repose qu'un filet horizontal, chaud et discret. */
.qm-catdesc.qm-catdesc th,
.qm-catdesc.qm-catdesc td{
	border:0;
	border-bottom:1px solid rgba(238,234,227,.16);
}
/* 2. Le filet de la derniere rangee est GARDE : entre le bandeau rouge et lui, le comparatif se lit
      comme un bloc ferme au lieu de s'arreter dans le vide. */
.qm-catdesc.qm-catdesc tbody > tr:last-child > th,
.qm-catdesc.qm-catdesc tbody > tr:last-child > td{
	border-bottom:1px solid rgba(238,234,227,.16);
}
/* 3. Plus de zebre gris : toutes les cellules repartent du fond de la carte. */
.qm-catdesc.qm-catdesc tbody > tr > th,
.qm-catdesc.qm-catdesc tbody > tr > td{
	background-color:transparent;
}
/* 4. Colonne de tete de rangee : voile chaud et graisse moyenne, seul repere de lecture une fois les
      verticales retirees. Ecrite APRES la regle 3, dont elle a la meme specificite de classe. */
.qm-catdesc.qm-catdesc tbody > tr > th:first-child,
.qm-catdesc.qm-catdesc tbody > tr > td:first-child{
	background-color:rgba(238,234,227,.07);
	font-weight:500;
}
/* 5. 🚨 Le gris n'etait pas tout a fait mort, mesure apres le premier essai : le bandeau rouge gardait
      un filet gris de 1px AU-DESSUS (borderTop rgba(128,128,128,.5)). Cause : la meme remise a zero du
      theme parent pose aussi
        table thead:first-child tr:first-child th{border-block-start:1px solid hsla(0,0%,50%,.502)}
      soit (0,2,4) et en PROPRIETE LOGIQUE, contre (0,2,1) pour la regle 1 ci-dessus, qui perdait donc.
      C'est exactement le piege deja rencontre sur les marges des paragraphes de la fiche produit : une
      propriete logique ne se laisse pas battre par une regle moins specifique, meme ecrite plus tard.
      On repasse devant en (0,3,3), sans !important. */
.qm-catdesc.qm-catdesc thead > tr:first-child > th,
.qm-catdesc.qm-catdesc thead > tr:first-child > td{
	border-top:0;
}
/* ==== QM CATDESC TABLEAU : fin du bloc. ==== */

/* ==== QM ARCHIVE ENTETE : debut ==== */
/* 02/09/2026 : AIR ENTRE LE BANDEAU DE MENU ET LE TITRE H1, pages de collection et page de recherche.
   Bloc delimite, ajoute en fin de feuille, rejouable tel quel. Marqueur : .qm-arch-entete-build

   MESURE AVANT, au navigateur, sur badteppich-modern (117 produits), badematte-halbrund (25) et
   rutschfeste-badematten (241), plus la page de recherche. L'air est pris entre le BAS du bandeau noir
   (.qm-hdr .header-background) et le HAUT de la boite du H1 ; la barre d'administration de WordPress est
   exclue du calcul, elle ne fait que descendre l'ensemble de 32px (46px sous 783px) sans rien changer a
   l'ecart mesure.
     largeur 1600, 1440, 1366, 1280, 1100, 1025, 1024, 1000, 900, 800, 768 : bandeau 72px, AIR 32px
     largeur 767, 700, 600, 500, 414, 390, 360                            : bandeau 54px, AIR 50px
   L'air de reference du site est 32px : c'est la valeur posee par qm-header.css sur main.site-main
   (pages), sur ce meme conteneur c37b944 (collections + recherche) et sur 0985de8 (fiche produit).
   Sous 768px les collections etaient donc a 50px, soit 18px de trop, alors que la fiche produit avait
   deja ete ramenee a 32px le 01/09.

   CAUSE, identique a celle corrigee sur la fiche produit le 01/09 et documentee dans qm-product.css
   (bloc « QM FICHE GALERIE »), il s'agit de la MEME cause racine sur un autre conteneur :
   qm-header.css pose
       .qm-native div.elementor-element.elementor-element-c37b944 > div.e-con-inner
           {padding-top:calc(var(--qm-hdr-h) + 32px)}
   or --qm-hdr-h ne suit pas la hauteur reelle de la barre en dessous de 768px. :root la met bien a 54px
   (@media max-width:767px), mais .qm-native:not(.home){--qm-hdr-h:72px}, plus specifique (0,2,0 contre
   0,1,0) et sans variante mobile, gagne a TOUTES les largeurs sur une page de collection. Le calcul
   donnait donc 72 + 32 = 104px de marge interieure pour une barre qui ne mesure que 54px, d'ou
   104 - 54 = 50px d'air reel.
   Hauteurs de barre relevees sur 19 largeurs de 360 a 1920px : 54px jusqu'a 767px inclus, 72px a partir
   de 768px, sans autre palier. Un seul point de rupture, exactement celui de la requete ci-dessous.

   CE QU'ON NE TOUCHE PAS : --qm-hdr-h elle-meme, qui sert ailleurs (main.site-main, conteneur 0985de8 de
   la fiche produit, formule de la galerie collante) et dont un changement se propagerait a tout le site.
   On repose la valeur finale sur CE SEUL conteneur, sous 768px : 54 + 32 = 86px, exactement la meme
   valeur et la meme forme que le correctif de la fiche produit, pour ne pas inventer un second reglage.

   POURQUOI CETTE REGLE GAGNE SANS !important : selecteur identique a celui de qm-header.css, donc meme
   specificite (0,4,2) ; une requete de media n'en ajoute pas. C'est l'ORDRE qui tranche, et il est acquis
   deux fois : dans les feuilles servies ce bloc est ajoute tout a la fin, apres les 27 sources ; dans les
   sources, native/build/manifest.json donne qm-header.css en position 12 et qm-archive.css en position 20
   des zones « archive » et « search », donc une recompilation ulterieure garderait le meme ordre.

   PORTEE : les feuilles archive.css et search.css sont les seules a recevoir ce bloc. D'apres
   qm_native_zone() dans mu-plugins/qm-native-gate.php, la zone « archive » couvre la boutique et toutes
   les taxonomies produit (les 27 categories, les etiquettes), la zone « search » la page de recherche.
   L'identifiant c37b944 appartient au gabarit d'archive 940, commun aux deux. Aucune autre page n'est
   atteinte.
   RIEN N'EST DEPLACE LES UNS PAR RAPPORT AUX AUTRES : la marge interieure est portee par le conteneur de
   tete, le panneau de filtres et la grille de produits sont des freres SUIVANTS dans ce conteneur. Ils
   remontent donc du meme nombre de pixels que le titre, et les ecarts titre -> filtres et filtres ->
   grille restent inchanges (verifies au navigateur avant et apres sur quatre pages).
   DESKTOP INCHANGE : la regle est bornee a max-width:767px, la ou l'air etait faux ; au-dessus de 768px
   le calcul d'origine est deja juste et n'est pas touche. */
.qm-arch-entete-build{--qm-arch-entete:1}
@media (max-width:767px){
	.qm-native div.elementor-element.elementor-element-c37b944 > div.e-con-inner{padding-top:86px}
}
/* ==== QM ARCHIVE ENTETE : fin ==== */
/* ==== QM CATEGORIE TABLEAU UNIFORME (03/09) : debut ====
   Les tableaux des descriptions de categorie avaient un en-tete ROUGE (#DD1B1F) sur la section sombre,
   detonnant avec la fiche produit. Ici : meme carte claire que la fiche (en-tete cream, texte encre,
   filets fins, lignes alternees) -> aspect uniforme. Porte a .qm-catdesc / .term-description. */
.qm-catdesc table,.term-description table{
	background:#FFFFFF;color:#2B2B2E;border:1px solid #EEEAE3;border-radius:10px;overflow:hidden;
	border-collapse:separate;border-spacing:0;font-size:13.5px}
.qm-catdesc table thead th,.term-description table thead th{
	background:#FAF5EA !important;color:#2B2B2E !important;font-weight:600;text-align:left;
	padding:11px 14px;border:0;border-bottom:1px solid #EEEAE3;font-size:12.5px;letter-spacing:.02em}
.qm-catdesc table td,.qm-catdesc table tbody th,.term-description table td,.term-description table tbody th{
	background:transparent;color:#2B2B2E;padding:11px 14px;border:0;border-bottom:1px solid #EEEAE3;vertical-align:top;line-height:1.5}
.qm-catdesc table tbody tr:nth-child(odd) td,.term-description table tbody tr:nth-child(odd) td{background:#FBF9F4}
.qm-catdesc table tbody tr:hover td,.term-description table tbody tr:hover td{background:#F1EDE4}
.qm-catdesc table tbody tr:last-child td,.term-description table tbody tr:last-child td{border-bottom:0}
/* ==== QM CATEGORIE TABLEAU UNIFORME : fin ==== */

/* 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;
}

/* a11y contraste : `.qm-sort-apply { color: inherit }` etait battu par la regle globale
   `[type="submit"], button { color: #CC3366 }` — un selecteur d'attribut pese autant qu'une
   classe et celle-la vient plus loin. Classe doublee pour reprendre la main sans toucher a la
   regle globale. Le bouton retrouve la couleur du texte (contraste 3,66 -> ~13:1). */
.qm-sort-apply.qm-sort-apply {
	color: inherit;
	border-color: currentColor;
}