/*
 * Piscine Herault - couche responsive (theme enfant, chargee apres Elementor).
 * Principe : corriger les largeurs rigides a la source quand c'est un reglage Elementor,
 * et ici seulement ce qui est commun a tout le site ou code en dur dans des widgets HTML.
 * Points de rupture tires du contenu : 1024 (menu horizontal -> bouton), 767 (colonnes empilees),
 * 480 (petits telephones). Cibles tactiles a 44 px uniquement sur ecran tactile (pointer: coarse).
 */
:root {
	--phr-gutter: clamp(16px, 4vw, 32px);
	--phr-section: clamp(56px, 9vw, 120px);
	--phr-tap: 44px;
	--phr-focus: #23b8e2;
	--phr-line: #e2e8f0;
}

/* 1. Garde-fous generaux ------------------------------------------------- */
img, video, iframe, embed, object { max-width: 100%; }
body { overflow-wrap: break-word; }
h1, h2, h3 { overflow-wrap: break-word; hyphens: manual; }
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
	outline: 3px solid var(--phr-focus);
	outline-offset: 2px;
}
/* Ancres internes non masquees par l'en-tete. */
html { scroll-padding-top: 90px; }

/* 2. En-tete : bouton menu et panneau mobile (<= 1024 px) ------------------ */
.elementor-62 .elementor-menu-toggle {
	min-width: var(--phr-tap);
	min-height: var(--phr-tap);
	padding: 9px;
	border-radius: 10px;
	-webkit-tap-highlight-color: transparent;
}
.elementor-62 .elementor-menu-toggle:hover { background-color: rgba(75, 105, 220, .08) !important; }
.elementor-62 .elementor-menu-toggle.elementor-active { background-color: rgba(75, 105, 220, .12) !important; }

/* Panneau ouvert : hauteur limitee a l'ecran, defilement interne. */
.elementor-62 .elementor-nav-menu--toggle .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
	/* --menu-height d'Elementor est mesure avant nos marges : on ne s'y fie pas. */
	max-height: calc(100dvh - 130px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.elementor-62 nav.elementor-nav-menu--dropdown {
	border-top: 1px solid var(--phr-line);
	border-radius: 0 0 12px 12px !important;
}
.elementor-62 .elementor-nav-menu--dropdown a {
	min-height: 48px;
	padding: 12px var(--phr-gutter) !important;
	border-bottom: 1px solid #f1f5f9;
	line-height: 1.35;
	letter-spacing: .01em !important;
}
/* Bouton « Devis ! » de l'en-tete : jamais coupe sur deux lignes. */
.elementor-62 .elementor-button { white-space: nowrap; }
.elementor-62 .elementor-nav-menu--dropdown .sub-menu a {
	padding-left: calc(var(--phr-gutter) + 18px) !important;
	font-weight: 500;
	background-color: #f8fafc;
}
.elementor-62 .elementor-nav-menu--dropdown .sub-menu a:hover,
.elementor-62 .elementor-nav-menu--dropdown .sub-menu a:focus-visible { background-color: #4b69dc; }
/* Fleche des sous-menus : zone tactile pleine hauteur. */
.elementor-62 .elementor-nav-menu--dropdown .sub-arrow {
	padding: 6px 4px 6px 16px;
	margin-left: auto;
}
.elementor-62 .elementor-nav-menu--dropdown a.highlighted { background-color: #eef2ff; }
/* Element de menu reserve au panneau mobile (classe CSS du menu WordPress). */
.elementor-nav-menu--main .phs-menu-mobile { display: none !important; }
.elementor-62 .elementor-nav-menu--dropdown .phs-menu-mobile { padding: 12px var(--phr-gutter) 16px; }
.elementor-62 .elementor-nav-menu--dropdown .phs-menu-mobile > a {
	margin: 0;
	justify-content: center;
	border-radius: 999px !important;
	border-bottom: 0;
	background-color: #0f172a;
	color: #fff !important;
	font-weight: 700;
}
.elementor-62 .elementor-nav-menu--dropdown .phs-menu-mobile > a:hover { background-color: #164d7b; }

/* 3. Pied de page ---------------------------------------------------------- */
.elementor-32 .elementor-element-77f49323 .elementor-icon-list-items { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 1024px) {
	.elementor-32 .elementor-element-77f49323 .elementor-icon-list-items { justify-content: center; }
}

/* 4. Bandeau cookies (Complianz) : jamais plus large que l'ecran. ----------- */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
	box-sizing: border-box;
	max-width: calc(100vw - 16px);
}
@media (max-width: 767px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		width: calc(100vw - 16px) !important;
		left: 8px !important;
		right: 8px !important;
		max-height: calc(100dvh - 16px);
		overflow-y: auto;
	}
}

/* 5. Formulaires Elementor -------------------------------------------------- */
/* Deux champs cote a cote de hauteurs differentes : libelle colle a son champ. */
.elementor-form .elementor-field-group:not(.elementor-field-type-submit) { align-content: flex-start; }
.elementor-form .elementor-field-option { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.elementor-form .elementor-field-option input[type="radio"],
.elementor-form .elementor-field-option input[type="checkbox"] {
	width: 20px; height: 20px; margin: 0; flex: none;
	accent-color: #0b78b6;
}
.elementor-form .elementor-field-option label { padding-block: 4px; cursor: pointer; }
.elementor-form .elementor-field-textual { min-height: var(--phr-tap); }
.elementor-form textarea.elementor-field-textual { min-height: 120px; }

/* 6. Accueil : widgets HTML codes en dur (largeurs minimales rigides). ------ */
/* Hero : titre et texte fluides. */
.elementor-element-181a0dd section { padding: var(--phr-section) var(--phr-gutter) !important; }
.elementor-element-181a0dd h1 { font-size: clamp(30px, 6.2vw + 8px, 56px) !important; }
.elementor-element-181a0dd p { font-size: clamp(17px, 1.1vw + 13px, 22px) !important; }
.elementor-element-181a0dd .btn-interactive { max-width: 100%; text-align: center; }
@media (max-width: 480px) {
	.elementor-element-181a0dd .btn-interactive { padding: 16px 26px !important; font-size: 16px !important; width: 100%; }
}
/* Grilles de cartes : minimum adapte a l'ecran (au lieu de 320/340 px fixes). */
body .expertise-ph-grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
body .ph-values-grid-v5 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
/* Zigzag texte / image : la colonne ne force plus 350 px. */
body .ph-col { min-width: min(350px, 100%); }
/* Sections : respiration proportionnelle a la largeur. */
body :is(.ph-seo-lexique, .ph-values-v5, .ph-faq-simple) { padding: var(--phr-section) var(--phr-gutter); }
body .ph-closing-vfinal { padding-block: var(--phr-section); }
body .ph-cta-banner-vfinal { padding: clamp(48px, 8vw, 90px) var(--phr-gutter); margin: 32px clamp(8px, 2vw, 20px); }
@media (max-width: 767px) {
	body .expertise-ph-card { padding: 36px 24px; }
	body .ph-zigzag-row { gap: 28px; margin-bottom: 48px; }
	body .ph-closing-stats { gap: 24px 36px; }
	.elementor-element-b6068e5 h2,
	.elementor-element-27cd783 h2 { font-size: clamp(28px, 6vw, 42px) !important; }
	.elementor-element-b6068e5 p { font-size: 17px !important; }
}

/* 7. Ecrans tactiles : cibles d'au moins 44 px. ------------------------------ */
@media (pointer: coarse) {
	.elementor-62 .elementor-icon-list-item > a,
	.elementor-32 .elementor-icon-list-item > a {
		min-height: var(--phr-tap);
		display: inline-flex;
		align-items: center;
	}
	.elementor-32 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item { padding-block: 0 !important; }
	.elementor-32 .elementor-element-77f49323 .elementor-icon-list-item > a { padding-inline: 4px; }
	#cmplz-cookiebanner-container .cmplz-close { min-width: var(--phr-tap); min-height: var(--phr-tap); display: flex; align-items: center; justify-content: center; }
	#cmplz-cookiebanner-container .cmplz-links .cmplz-link { display: inline-block; padding-block: 12px; }
	.phs-ariane ol { align-items: center; }
	.phs-ariane a { display: inline-block; padding-block: 12px; }
}

/* 8. Mouvement reduit. -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.btn-interactive, .ph-img-box img, .expertise-ph-card { transition: none !important; }
	.btn-interactive:hover, .ph-img-box img:hover { transform: none !important; }
}