/**
 * Aquatiqa – Personnalisations : styles côté visiteur.
 *
 * Les icônes de contact sont posées en masque CSS plutôt qu'en balisage : elles
 * prennent ainsi la couleur du texte qui les entoure (pied de page clair sur
 * fond sombre, page de contact sombre sur fond clair) et, surtout, elles ne
 * vivent pas dans le contenu — modifier le texte dans l'éditeur ne peut pas les
 * effacer.
 */

.aqp-info {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
}

.aqp-info::before {
	content: "";
	flex: none;
	width: 1.15em;
	height: 1.15em;
	margin-top: 0.15em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	opacity: 0.9;
}

.aqp-info--adresse::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202C8.13%202%205%205.13%205%209c0%205.25%207%2013%207%2013s7-7.75%207-13c0-3.87-3.13-7-7-7zm0%209.5A2.5%202.5%200%201%201%2012%206.5a2.5%202.5%200%200%201%200%205z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202C8.13%202%205%205.13%205%209c0%205.25%207%2013%207%2013s7-7.75%207-13c0-3.87-3.13-7-7-7zm0%209.5A2.5%202.5%200%201%201%2012%206.5a2.5%202.5%200%200%201%200%205z%22%2F%3E%3C%2Fsvg%3E");
}

.aqp-info--tel::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6.62%2010.79c1.44%202.83%203.76%205.14%206.59%206.59l2.2-2.2c.27-.27.67-.36%201.02-.24%201.12.37%202.33.57%203.57.57.55%200%201%20.45%201%201V20c0%20.55-.45%201-1%201-9.39%200-17-7.61-17-17%200-.55.45-1%201-1h3.5c.55%200%201%20.45%201%201%200%201.25.2%202.45.57%203.57.11.35.03.74-.25%201.02l-2.2%202.2z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6.62%2010.79c1.44%202.83%203.76%205.14%206.59%206.59l2.2-2.2c.27-.27.67-.36%201.02-.24%201.12.37%202.33.57%203.57.57.55%200%201%20.45%201%201V20c0%20.55-.45%201-1%201-9.39%200-17-7.61-17-17%200-.55.45-1%201-1h3.5c.55%200%201%20.45%201%201%200%201.25.2%202.45.57%203.57.11.35.03.74-.25%201.02l-2.2%202.2z%22%2F%3E%3C%2Fsvg%3E");
}

.aqp-info--mail::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20%204H4c-1.1%200-1.99.9-1.99%202L2%2018c0%201.1.9%202%202%202h16c1.1%200%202-.9%202-2V6c0-1.1-.9-2-2-2zm0%204l-8%205-8-5V6l8%205%208-5v2z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20%204H4c-1.1%200-1.99.9-1.99%202L2%2018c0%201.1.9%202%202%202h16c1.1%200%202-.9%202-2V6c0-1.1-.9-2-2-2zm0%204l-8%205-8-5V6l8%205%208-5v2z%22%2F%3E%3C%2Fsvg%3E");
}

/* Plusieurs lignes de contact à la suite : on resserre l'espacement vertical. */
.aqp-info + .aqp-info {
	margin-top: 0.4em;
}

/* Bouton de téléchargement de la fiche technique, page produit. */
.aqp-datasheet {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 1em 0 0;
}

.aqp-datasheet::before {
	content: "";
	flex: none;
	width: 1.1em;
	height: 1.1em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%2020h14v-2H5v2zM19%209h-4V3H9v6H5l7%207%207-7z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%2020h14v-2H5v2zM19%209h-4V3H9v6H5l7%207%207-7z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/**
 * Menu des catégories de la boutique (shortcode [aqp_menu_categories]).
 *
 * Les sous-catégories s'ouvrent en surimpression, par-dessus ce qui suit :
 * survoler une catégorie n'écarte jamais les autres. Une flèche signale les
 * catégories qui ont quelque chose à déplier, et pivote à l'ouverture.
 *
 * Sur un écran tactile, où rien ne survole, les sous-catégories reviennent dans
 * le flux et restent dépliées : autrement elles seraient inatteignables.
 */

.aqp-cats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 991.98px) {
	.aqp-cats {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 575.98px) {
	.aqp-cats {
		grid-template-columns: 1fr;
	}
}

/*
 * Le conteneur qui accueille le menu ne doit pas rogner le sous-menu ouvert en
 * surimpression. Le constructeur de pages pose parfois overflow:hidden sur ses
 * colonnes, avec une spécificité d'identifiant : d'où le !important, réservé à
 * ce seul garde-fou.
 */
*:has(> .aqp-cats) {
	overflow: visible !important;
}

.aqp-cats {
	/* Les sous-menus s'empilent entre eux, jamais avec le reste de la page. */
	isolation: isolate;
}

/*
 * Positionnement et empilement écrits sans ambiguïté possible.
 *
 * Le sous-menu ouvert se retrouvait sous les catégories des rangées suivantes :
 * une entrée qui s'ouvre doit passer au-dessus, et les autres passer dessous.
 * Le sélecteur est volontairement plus précis que la normale, et le
 * positionnement forcé : le mégamenu du thème pose ses propres règles sur les
 * listes qu'il contient.
 */
ul.aqp-cats > li.aqp-cats__item {
	position: relative !important;
	z-index: 1;
	padding: 18px 20px;
	border-radius: 10px;
	transition: background-color 0.2s ease;
}

ul.aqp-cats > li.aqp-cats__item:hover,
ul.aqp-cats > li.aqp-cats__item:focus-within {
	z-index: 50;
	background-color: var(--wp--preset--color--palette-color-6, var(--theme-palette-color-6, #f4f4f5));
}

/* Tant qu'une entrée est ouverte, les autres passent derrière, sans exception. */
ul.aqp-cats:has(> li.aqp-cats__item:hover) > li.aqp-cats__item:not(:hover),
ul.aqp-cats:has(> li.aqp-cats__item:focus-within) > li.aqp-cats__item:not(:focus-within) {
	z-index: 0;
}

.aqp-cats__lien {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6em;
	font-weight: 600;
	line-height: 1.3;
	color: inherit;
	text-decoration: none;
}

.aqp-cats__item--parent > .aqp-cats__lien::after {
	content: "";
	flex: none;
	width: 0.8em;
	height: 0.8em;
	opacity: 0.55;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7.41%208.59%2012%2013.17l4.59-4.58L18%2010l-6%206-6-6z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7.41%208.59%2012%2013.17l4.59-4.58L18%2010l-6%206-6-6z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

ul.aqp-cats > li.aqp-cats__item > .aqp-cats__enfants {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 51;
	margin: 0;
	/* 34 px à gauche : 20 px d'alignement sur le titre, 14 px de décalage pour
	   que les sous-catégories se lisent comme dépendant de leur catégorie. */
	padding: 6px 20px 16px 34px;
	list-style: none;
	background-color: var(--dropdown-background-color, var(--theme-palette-color-8, #ffffff));
	border-radius: 0 0 10px 10px;
	box-shadow: 0 14px 30px rgba(41, 51, 61, 0.18);
	max-height: 60vh;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.aqp-cats__enfants a {
	display: block;
	padding: 0.25em 0;
	font-size: 0.92em;
	color: inherit;
	text-decoration: none;
	opacity: 0.85;
}

.aqp-cats__enfants a:hover {
	opacity: 1;
	text-decoration: underline;
}

/*
 * Les sélecteurs d'ouverture reprennent mot pour mot ceux de l'état fermé.
 * Une media query n'ajoute aucune spécificité : écrits plus court, ils
 * perdaient contre l'état fermé et le sous-menu ne s'ouvrait jamais.
 */
@media (hover: hover) {
	ul.aqp-cats > li.aqp-cats__item:hover > .aqp-cats__enfants,
	ul.aqp-cats > li.aqp-cats__item:focus-within > .aqp-cats__enfants {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	ul.aqp-cats > li.aqp-cats__item--parent:hover > .aqp-cats__lien::after,
	ul.aqp-cats > li.aqp-cats__item--parent:focus-within > .aqp-cats__lien::after {
		opacity: 1;
		transform: rotate(180deg);
	}
}

@media (hover: none) {
	ul.aqp-cats > li.aqp-cats__item > .aqp-cats__enfants {
		position: static;
		margin-top: 0.6em;
		padding: 0;
		background: none;
		box-shadow: none;
		max-height: none;
		overflow: visible;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

/**
 * Popup promotionnelle.
 *
 * Blocksy dimensionne ses popups par variables CSS (--popup-max-width,
 * --popup-max-height, --popup-padding) : on les règle plutôt que de surcharger
 * ses règles. La boîte suit la hauteur de son contenu, ces valeurs ne sont
 * qu'un plafond.
 *
 * Le sélecteur passe par :has(.aqp-popup) et non par l'identifiant du bloc :
 * une popup dupliquée qui reprend la classe hérite du même gabarit.
 */

.ct-popup-inner:has(.aqp-popup) {
	--popup-max-width: 360px;
	--popup-max-height: 60vh;
	--popup-padding: 20px;
	--popup-border-radius: 10px;
	--popup-overflow-y: auto;
}

/*
 * La croix revient dans la boîte, sur le visuel, avec un fond sombre : posée
 * dehors (réglage par défaut du thème) elle flottait sur la page, sans lien
 * visible avec la popup.
 */
.ct-popup:has(.aqp-popup) .ct-toggle-close[data-location="outside"] {
	top: 10px;
	--toggle-button-inset-end: 10px;
	--toggle-button-size: 26px;
	color: #ffffff;
	background-color: rgba(8, 35, 56, 0.55);
}

.ct-popup:has(.aqp-popup) .ct-toggle-close:hover {
	background-color: rgba(8, 35, 56, 0.8);
}

.aqp-popup > * + * {
	margin-top: 10px;
}

/*
 * Le visuel déborde jusqu'aux bords de la popup, comme un bandeau d'en-tête :
 * cadré ainsi il situe l'offre sans manger la hauteur utile. Les marges
 * négatives reprennent exactement --popup-padding.
 */
.aqp-popup .wp-block-image {
	margin: -20px -20px 0;
}

.aqp-popup .wp-block-image img {
	display: block;
	width: 100%;
	height: 96px;
	object-fit: cover;
	object-position: center;
	border-radius: 10px 10px 0 0;
}

/*
 * L'accroche tenait sur deux lignes : l'interlettrage que j'avais ajouté
 * l'élargissait au-delà de la largeur utile, et la taille vient d'une classe de
 * préréglage WordPress qui porte !important — inutile de lutter contre.
 * Sans interlettrage, la ligne tient. Mesuré dans le navigateur.
 */
.aqp-popup .has-small-font-size:first-of-type {
	margin-top: 14px;
	letter-spacing: 0;
	opacity: 0.7;
}

.aqp-popup h2 {
	margin: 0;
	font-size: clamp(17px, 1vw + 12px, 20px);
	line-height: 1.2;
}

.aqp-popup p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.45;
}

.aqp-popup .wp-block-buttons {
	margin-top: 14px;
}

/* Un bouton pleine largeur tient mieux dans une boîte étroite qu'un bouton flottant. */
.aqp-popup .wp-block-button,
.aqp-popup .wp-block-button__link {
	width: 100%;
	text-align: center;
}

.aqp-popup .wp-block-button__link {
	padding: 11px 18px;
	font-size: 14px;
}

/* La mention de validation se lit comme une note, séparée par un filet. */
.aqp-popup > p:last-child {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid rgba(8, 35, 56, 0.12);
	font-size: 11.5px;
	line-height: 1.35;
	opacity: 0.6;
}

/*
 * Sur un téléphone, un quart d'écran rendrait la popup illisible : on lui rend
 * de la largeur, en gardant la hauteur contenue.
 */
@media (max-width: 575.98px) {
	.ct-popup-inner:has(.aqp-popup) {
		--popup-max-width: 92vw;
		--popup-max-height: 66vh;
	}
}

/**
 * Bloc « Schéma d'encombrement » des pages solutions.
 *
 * Remonté sous le paragraphe d'introduction, il coupait la lecture : son titre
 * avait le poids d'un titre de section et le bouton de la figure venait buter
 * sur la liste à puces. Regroupé en encadré, il se lit comme un aparté et rend
 * la suite au texte.
 *
 * Les !important sont nécessaires : le constructeur de pages écrit ses tailles
 * dans des règles d'identifiant, qu'aucune classe ne peut supplanter.
 */

.aqp-schema {
	margin-top: 20px;
	padding: 16px 18px;
	border: 1px solid rgba(8, 35, 56, 0.12);
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.5);
}

.aqp-schema > * + * {
	margin-top: 8px;
}

.aqp-schema .gspb_heading {
	margin: 0 !important;
	font-size: 15px !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.aqp-schema .gspb_text {
	margin: 0 !important;
	font-size: 14px;
	line-height: 1.5;
	opacity: 0.85;
}

.aqp-schema .adg-figure {
	margin-top: 12px;
}

/* La liste à puces reprend sa respiration après l'encadré. */
.aqp-schema + ul {
	margin-top: 18px;
}

/**
 * Liens du pied de page au survol.
 *
 * Le thème applique partout la même couleur de survol, un bleu nuit (#102a43)
 * pensé pour les fonds clairs. Dans le pied de page, qui est sombre, elle donne
 * un rapport de contraste de 1,43 : le lien disparaît au moment précis où on le
 * désigne. Mesuré au navigateur, pas supposé.
 *
 * Le bleu de la marque rétablit la lisibilité et signale mieux l'interaction
 * qu'un simple éclaircissement. Le soulignement aide les daltonismes, pour qui
 * la couleur seule ne suffit pas.
 */

.ct-footer a:hover,
.ct-footer a:focus-visible {
	color: #1cb0f6;
	text-decoration: underline;
}

/* Les pictogrammes sociaux n'ont pas de texte : pas de soulignement à leur poser. */
.ct-footer [class*="ct-social"] a:hover,
.ct-footer [class*="ct-social"] a:focus-visible {
	text-decoration: none;
}

/* Les lignes de contact reprennent la couleur du lien, icône comprise. */
.ct-footer .aqp-info:hover::before {
	background-color: #1cb0f6;
}

/**
 * Bouton d'appel dans le panneau du menu mobile.
 *
 * Le thème n'offre qu'une couleur pour ce bouton, pensée pour l'en-tête clair :
 * dans le panneau, qui est sombre, elle donne un contraste de 1,64 — le libellé
 * disparaît. Faute de réglage distinct pour ce contexte, la règle est écrite
 * ici, et seulement pour le panneau.
 */

#offcanvas .ct-header-cta .ct-button-ghost {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.45);
}

#offcanvas .ct-header-cta .ct-button-ghost:hover,
#offcanvas .ct-header-cta .ct-button-ghost:focus-visible {
	color: #1cb0f6;
	border-color: #1cb0f6;
}