/* Loi 29 — garantie légale de bon fonctionnement : bannière [garantie_legale] + étiquette produits.
   Même dégradé et même biais que .yellow-banner. Prosomo — 2026-10-02 */

/* ---------- Bannière ---------- */
/* Pleine largeur de son conteneur ; le biais est un clip-path : les pointes (bas-gauche, haut-droite)
   touchent exactement les bords du conteneur, quelle que soit la hauteur du bloc. */
.qao-garantie-row {
	position: relative;
}

.qao-garantie-row--page {
	padding: 0 0 100px;
}

/* Accueil : la bannière suit la section produits vedettes. On retire le padding-bottom de cette
   section (le thème garde 100px sous les flèches du carrousel dès 992px) au lieu de remonter la
   bannière avec une marge négative — qui chevauchait les flèches sous 992px. Sans :has(), l'espace
   est simplement plus grand, jamais de chevauchement. */
.vc_row:has(+ .vc_row .qao-garantie-row--page) .produits-vedette-row {
	padding-bottom: 0;
}

.qao-garantie-row--archive {
	margin: 0 0 40px;
}

/* Catégories sans barre latérale (Ventilation, Construction neuve, Rénovation) :
   même écart (100px) sous la section titre que les autres catégories */
.content-inner > .qao-garantie-row--archive:first-child {
	padding-top: 100px; /* padding : une marge fusionnerait avec celle de .content-outer */
}

.qao-garantie-banner {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.qao-garantie-banner-inner {
	position: relative;
	color: #000;
	padding: 30px 64px;
	box-sizing: border-box;
	background: linear-gradient(90deg, rgba(255,229,2,1) 0%, rgba(236,184,50,1) 100%);
	-webkit-clip-path: polygon(30px 0, 100% 0, calc(100% - 30px) 100%, 0 100%);
	clip-path: polygon(30px 0, 100% 0, calc(100% - 30px) 100%, 0 100%);
}

.qao-garantie-banner .qao-garantie-title {
	color: #000;
	font-size: 30px;
	line-height: 35px;
	font-weight: 700;
	text-align: left;
	margin: 0 0 12px;
	padding: 0;
}

.qao-garantie-row--archive .qao-garantie-title {
	font-size: 24px;
	line-height: 29px;
}

.qao-garantie-banner .qao-garantie-text {
	color: #000;
	line-height: 1.5;
	text-align: left;
	margin: 0 0 14px;
	padding: 0;
	max-width: 880px;
}

.qao-garantie-banner .qao-garantie-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #000;
	font-weight: 700;
	text-decoration: none;
}

.qao-garantie-banner .qao-garantie-link:hover,
.qao-garantie-banner .qao-garantie-link:focus {
	color: #000;
	text-decoration: underline;
}

.qao-garantie-arrow {
	flex: none;
	transition: transform .4s;
}

.qao-garantie-link:hover .qao-garantie-arrow {
	transform: translateX(6px);
}

/* ---------- Étiquette produits ---------- */
.qao-garantie-tag {
	position: absolute;
	top: 12px;
	left: 22px;
	z-index: 1000; /* au-dessus de .blog-link (z-index 999), le lien qui couvre toute la carte */
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	color: #000;
	font-size: 12px;
	line-height: 1.2;
	font-weight: 700;
	cursor: help;
	isolation: isolate;
	outline: none;
}

.qao-garantie-tag::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(255,229,2,1) 0%, rgba(236,184,50,1) 100%);
	transform: skewX(-11deg);
}

.qao-garantie-tag:focus-visible::before {
	box-shadow: 0 0 0 2px #000;
}

.qao-garantie-tag-icon {
	flex: none;
}

.qao-garantie-tip {
	position: absolute;
	top: calc(100% + 10px);
	left: -10px;
	z-index: 5;
	width: 250px;
	max-width: calc(100vw - 40px);
	padding: 12px 14px;
	box-sizing: border-box;
	background: #000;
	color: #fff;
	font-size: 13px;
	line-height: 1.45;
	font-weight: 400;
	text-align: left;
	cursor: default;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .2s, transform .2s, visibility .2s;
}

/* flèche */
.qao-garantie-tip::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 22px;
	border-style: solid;
	border-width: 0 6px 6px;
	border-color: transparent transparent #000;
}

/* pont invisible : garde l'infobulle ouverte entre l'étiquette et la bulle */
.qao-garantie-tip::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -12px;
	height: 12px;
}

.qao-garantie-tag:hover .qao-garantie-tip,
.qao-garantie-tag:focus-within .qao-garantie-tip {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.qao-garantie-tip a {
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
	white-space: nowrap;
}

.qao-garantie-tip a:hover,
.qao-garantie-tip a:focus {
	color: #FFE502;
}

/* ---------- Tablette et mobile (sous 992px : le thème passe la section vedette à 50px) ---------- */
@media (max-width: 991px) {
	.qao-garantie-row--page {
		padding: 46px 0 50px; /* + ~4px sous les flèches = 50px visuels */
	}
	.qao-garantie-banner .qao-garantie-title {
		font-size: 26px;
		line-height: 31px;
	}
}

@media (max-width: 767px) {
	.qao-garantie-banner-inner {
		padding: 24px 34px 26px;
		-webkit-clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
		clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
	}
	.qao-garantie-banner .qao-garantie-title,
	.qao-garantie-row--archive .qao-garantie-title {
		font-size: 22px;
		line-height: 27px;
		margin-bottom: 10px;
	}
	.qao-garantie-banner .qao-garantie-text {
		font-size: 15px;
		line-height: 1.5;
	}
	.content-inner > .qao-garantie-row--archive:first-child {
		padding-top: 60px;
	}
	/* les cartes n'ont que 25px de marge haute sur mobile */
	.qao-garantie-tag {
		top: 4px;
	}
}