/* qm-page.css : pages, articles, 404, compte client et listes d'articles (markup Hello Elementor) entre header et footer figes.
   Le gabarit d'origine ne portait aucune CSS propre : seuls quelques espacements et la mise en avant. */
.qm-native .site-main {
	padding-top: 40px;
	padding-bottom: 60px;
}
.qm-native .page-header {
	margin: 0 0 18px; /* 30/08 : ecart header -> titre reduit (32 px via qm-header.css) ; le H1 ne porte plus de marge haute */
}
.qm-native .page-header .entry-title {
	margin: 0;
}
/* Checkout : la phrase CGV (« Mit Ihrer Bestellung akzeptieren Sie unsere ... ») garde son lien dans la couleur du texte. */
.qm-native .qm-co .woocommerce-privacy-policy-text a,
.qm-native .woocommerce-checkout .woocommerce-privacy-policy-text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.qm-native .qm-co .woocommerce-privacy-policy-text a:hover {
	color: inherit;
	opacity: .8;
}
.qm-native .qm-post-meta {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	opacity: 0.7;
}
.qm-native .qm-post-thumbnail {
	margin: 0 0 1.5rem;
}
.qm-native .qm-post-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
}
.qm-native .qm-post-card {
	margin: 0 0 2rem;
}
.qm-native .qm-post-card .entry-title {
	margin: 0 0 0.25rem;
	font-size: 1.25rem;
}
.qm-native .qm-post-card .entry-title a {
	text-decoration: none;
}

/* ---- Formulaire de contact tout-auto ([tout_auto_contact_form], classes qm-cf + ff-el-*) et FAQ (.qm-faq, page FAQ) :
   charte komfort (Roboto, hairline #eeeae3, bouton noir carre Instrument Sans) ; sans ces regles, aucun style (30/08) ---- */
.qm-native .qm-contact-form { max-width: 640px; margin: 24px 0 32px; }
.qm-native .qm-contact-form .ff-el-group { margin: 0 0 14px; }
.qm-native .qm-contact-form .ff-el-form-control { display: block; width: 100%; box-sizing: border-box; font: 400 15px/24px "Roboto", sans-serif; color: #2B2B2E; background: #fff; border: 1px solid #eeeae3; border-radius: 0; padding: 12px 16px; box-shadow: none; }
.qm-native .qm-contact-form .ff-el-form-control:focus { outline: none; border-color: #2B2B2E; }
.qm-native .qm-contact-form .ff-el-form-control::placeholder { color: #6B6B6B; opacity: 1; }
.qm-native .qm-contact-form textarea.ff-el-form-control { min-height: 140px; resize: vertical; }
.qm-native .qm-contact-form .ff-btn-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; font: 600 15px/1 "Instrument Sans", sans-serif; letter-spacing: 0.15px; color: #fff; background: #1a1a1a; border: 0; border-radius: 0; cursor: pointer; }
.qm-native .qm-contact-form .ff-btn-submit:hover { background: #000; }
.qm-native .qm-contact-form .ff-btn-submit:disabled { opacity: 0.6; cursor: wait; }
.qm-native .qm-contact-form .ff-message-success { margin-top: 16px; padding: 14px 16px; border: 1px solid #eeeae3; background: #FAF5EA; font: 400 15px/24px "Roboto", sans-serif; color: #2B2B2E; }
.qm-native .qm-contact-form .qm-cf-error { margin-top: 14px; font: 400 14px/22px "Roboto", sans-serif; color: #B3372E; }
.qm-native .qm-contact-form .qm-cf-hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }
.qm-native .qm-faq { margin: 8px 0 32px; border-top: 1px solid #eeeae3; }
.qm-native .qm-faq-item { border-bottom: 1px solid #eeeae3; }
.qm-native .qm-faq-q { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font: 600 17px/26px "Roboto", sans-serif; color: #2B2B2E; }
.qm-native .qm-faq-q::-webkit-details-marker { display: none; }
.qm-native .qm-faq-q::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; border-right: 2px solid #2B2B2E; border-bottom: 2px solid #2B2B2E; transform: translateY(-70%) rotate(45deg); transition: transform 0.2s; }
.qm-native .qm-faq-item[open] > .qm-faq-q::after { transform: translateY(-30%) rotate(225deg); }
.qm-native .qm-faq-a { padding: 0 0 20px; font: 400 15.5px/26px "Roboto", sans-serif; color: #2B2B2E; }
.qm-native .qm-faq-a p { margin: 0 0 12px; }

/* ---- Page Kontakt (30/08) : FAQ du plugin qm-home-faq ([qm_contact_faq], feuille inline #qm-hfaq-css = carte noire arrondie,
   titre centre, Instrument Sans 22/700) remise dans la charte des pages : fond blanc, hairlines #eeeae3, Roboto 17/500,
   chevron comme l'accordeon de la fiche et la page FAQ. Specificite (0,3,0) > plugin ; !important repris ou le plugin l'impose. ---- */
.qm-native .page-content .qm-hfaq { background: transparent; padding: 0; margin: 4px 0 44px; max-width: none; border-radius: 0; overflow: visible; font-family: "Roboto", sans-serif; }
.qm-native .page-content .qm-hfaq-inner { max-width: none; margin: 0; }
.qm-native .page-content .qm-hfaq-title { font: 400 32px/42px "Instrument Sans", sans-serif; color: #2B2B2E !important; text-align: left; margin: 0 0 14px; }
.qm-native .page-content .qm-hfaq-list { border-top: 1px solid #eeeae3; }
.qm-native .page-content .qm-hfaq-item { border-top: 0; border-bottom: 1px solid #eeeae3; }
.qm-native .page-content .qm-hfaq-q { padding: 18px 0; gap: 24px; text-align: left; cursor: pointer; }
.qm-native .page-content .qm-hfaq-qtext { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; font: 500 17px/26px "Roboto", sans-serif; color: #2B2B2E !important; }
.qm-native .page-content .qm-hfaq-ico { flex: 0 0 16px; width: 16px; height: 16px; }
.qm-native .page-content .qm-hfaq-ico::before { top: 1px; left: 3px; width: 9px; height: 9px; background: transparent; border-right: 2px solid #2B2B2E; border-bottom: 2px solid #2B2B2E; border-radius: 0; transform: rotate(45deg); transition: transform 0.2s; }
.qm-native .page-content .qm-hfaq-ico::after { display: none; }
.qm-native .page-content .qm-hfaq-item.open .qm-hfaq-ico::before { transform: translateY(5px) rotate(225deg); }
.qm-native .page-content .qm-hfaq-a { font: 400 15.5px/26px "Roboto", sans-serif; color: #2B2B2E; padding-right: 40px; }
.qm-native .page-content .qm-hfaq-a > * { margin: 0 0 12px; }
.qm-native .page-content .qm-hfaq-item.open .qm-hfaq-a { padding-bottom: 20px; }
@media (max-width: 768px) {
	.qm-native .page-content .qm-hfaq { padding: 0; margin-bottom: 36px; }
	.qm-native .page-content .qm-hfaq-title { font-size: 26px; line-height: 34px; }
	.qm-native .page-content .qm-hfaq-q { padding: 16px 0; }
	.qm-native .page-content .qm-hfaq-qtext { font-size: 16px; line-height: 24px; }
	.qm-native .page-content .qm-hfaq-a { padding-right: 0; }
}

/* ---- Panneau « Ist Ihre Frage noch unbeantwortet ? » + formulaire (30/08) : bloc sable #FAF5EA borde d'une hairline,
   titre Instrument Sans 24 entoure du trait dessine a la main (svg qm-ch-svg de tout-auto, en rouge accent), formulaire
   en grille 2 colonnes (nom / e-mail) puis message et bouton pleine largeur ; une colonne et bouton 100 % en mobile. ---- */
.qm-native .qm-contact-panel { background: #FAF5EA; border: 1px solid #eeeae3; padding: 32px 36px 36px; margin: 28px 0 36px; }
.qm-native .qm-ch-wrapper { position: relative; display: inline-block; margin: 0 0 8px; padding: 4px 12px; }
.qm-native .qm-ch-title { position: relative; z-index: 1; font: 500 24px/32px "Instrument Sans", sans-serif; color: #2B2B2E; }
.qm-native .qm-ch-svg { position: absolute; left: -6px; top: -6px; width: calc(100% + 12px); height: calc(100% + 12px); pointer-events: none; }
.qm-native .qm-ch-path { stroke: #DD1B1F; }
.qm-native .qm-ch-sub { margin: 0 0 22px; font: 400 15px/24px "Roboto", sans-serif; color: #6B6B6B; }
.qm-native .qm-contact-panel .qm-contact-form { max-width: none; margin: 0; }
.qm-native .qm-contact-panel .qm-cf { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-items: start; }
.qm-native .qm-contact-panel .qm-cf .ff-el-group { margin: 0; }
.qm-native .qm-contact-panel .qm-cf > div.ff-el-group:nth-of-type(4) { grid-column: 1 / -1; }
.qm-native .qm-contact-panel .qm-cf .ff-el-group:has(textarea) { grid-column: 1 / -1; }
.qm-native .qm-contact-panel .qm-cf .ff-btn-submit { grid-column: 1 / -1; justify-self: start; min-width: 200px; min-height: 50px; margin-top: 4px; }
.qm-native .qm-contact-panel .qm-cf .ff-message-success { grid-column: 1 / -1; margin: 0; background: #fff; }
.qm-native .qm-contact-panel .qm-cf .qm-cf-error { grid-column: 1 / -1; margin: 0; }
.qm-native .qm-contact-panel .ff-el-form-control { border-color: #e3ddd0; }
.qm-native .qm-contact-panel .ff-el-form-control:focus { border-color: #2B2B2E; }
.qm-native .qm-contact-panel textarea.ff-el-form-control { min-height: 150px; }
@media (max-width: 767px) {
	.qm-native .qm-contact-panel { padding: 24px 18px 26px; margin: 24px 0 30px; }
	.qm-native .qm-ch-wrapper { padding: 4px 8px; }
	.qm-native .qm-ch-title { font-size: 21px; line-height: 28px; }
	.qm-native .qm-contact-panel .qm-cf { grid-template-columns: 1fr; gap: 12px; }
	.qm-native .qm-contact-panel .qm-cf .ff-btn-submit { justify-self: stretch; width: 100%; }
}

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

/* Listes du texte courant : le reset `dd, dl, dt, li, ol, ul { margin-block-end: 0 }` leur otait
   toute respiration, l'ecart avec le paragraphe suivant tombait a 0 px alors que deux paragraphes
   sont separes de 14,4 px. On rend cette marge aux SEULES listes de prose (enfants directs du
   conteneur de contenu), sans toucher aux menus, a la grille produit, au panier ni aux filtres.
   Les sous-listes ne sont pas visees : collees a leur liste parente, c'est ce qu'on veut. */
.page-content > ul,
.page-content > ol,
.entry-content > ul,
.entry-content > ol {
	margin-block-end: .9rem;
}