/* =============================================================================
   PHYTO VICTIMES — Elementor widget overrides + utility blocks
   ----------------------------------------------------------------------------
   Chargé globalement (pas seulement sur la home). L'objectif est d'améliorer
   automatiquement le rendu de toutes les pages Elementor existantes sans
   toucher au contenu, et de fournir des classes utilitaires que les clients
   peuvent ajouter via "Advanced → CSS Classes" pour des blocs PV-brandés.
   ============================================================================= */

/* ---------------------------------------------------------------- Section rhythm */
.elementor-section { margin: 0; }
.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 1200px;
}
/* Limite raisonnable sur les sections "stretched" pour éviter le full-bleed nu */
.elementor-section:not([data-settings*="stretch"]):not(.elementor-section-stretched) {
	padding-left: clamp(16px, 4vw, 32px);
	padding-right: clamp(16px, 4vw, 32px);
}

/* ---------------------------------------------------------------- Typography */
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title,
.elementor-widget-heading h5.elementor-heading-title,
.elementor-widget-heading h6.elementor-heading-title {
	font-family: var(--pv-font-display);
	font-weight: 700;
	color: var(--pv-navy);
	line-height: 1.15;
	letter-spacing: -.005em;
}
.elementor-widget-heading h1.elementor-heading-title { font-size: clamp(1.8rem, 3.4vw, 2.8rem); margin: 0 0 .6em; }
.elementor-widget-heading h2.elementor-heading-title { font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin: 0 0 .55em; }
.elementor-widget-heading h3.elementor-heading-title { font-size: clamp(1.2rem, 1.9vw, 1.6rem); margin: 0 0 .5em; }

.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
	font-family: var(--pv-font-body);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--pv-navy);
}
.elementor-widget-text-editor p:not(:last-child) { margin: 0 0 1em; }
.elementor-widget-text-editor a { color: var(--pv-teal); text-decoration: underline; text-underline-offset: 3px; }
.elementor-widget-text-editor a:hover { color: var(--pv-teal-dark); }
.elementor-widget-text-editor strong { color: var(--pv-navy); }
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol { padding-left: 1.4em; margin: 0 0 1em; }
.elementor-widget-text-editor li { padding: 2px 0; }
.elementor-widget-text-editor ul li::marker { color: var(--pv-teal); }

/* ---------------------------------------------------------------- Buttons */
.elementor-widget-button .elementor-button {
	display: inline-flex !important;
	align-items: center !important;
	gap: 14px !important;
	font-family: var(--pv-font-display) !important;
	font-weight: 500 !important;
	font-size: 1rem !important;
	letter-spacing: 0;
	border-radius: var(--pv-radius-pill) !important;
	padding: 10px 12px 10px 28px !important;
	transition: background .15s ease, color .15s ease, transform .15s ease !important;
	box-shadow: 0 4px 14px rgba(0, 40, 62, .12);
	line-height: 1.2;
}
.elementor-widget-button .elementor-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(0, 40, 62, .18);
}
/* Couleurs par défaut si pas définies dans Elementor */
.elementor-widget-button .elementor-button[role="button"],
.elementor-widget-button .elementor-button:not([class*="background"]) {
	background: var(--pv-teal);
	color: #fff;
}

/* Cercle + flèche auto sur tous les boutons Elementor, pour cohérence avec
   les CTAs de la home. Opt-out : ajouter la classe `pv-btn-no-arrow` via
   Advanced > CSS Classes pour les boutons download/submit/etc. */
.elementor-widget-button .elementor-button::after {
	content: '';
	display: inline-block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300283e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h14M13 6l6 6-6 6'/></svg>") center / 16px no-repeat;
	flex: 0 0 32px;
	transition: transform .15s ease;
}
.elementor-widget-button .elementor-button:hover::after {
	transform: translateX(2px);
}
/* Si le bouton a déjà une icône Elementor (Icon Before/After), pas d'arrow */
.elementor-widget-button .elementor-button:has(.elementor-button-icon)::after,
.elementor-widget-button .elementor-button.pv-btn-no-arrow::after,
.elementor-form button::after,
.ninja-forms-form button::after,
.ninja-forms-form input[type="submit"]::after { display: none !important; }

/* Variante cercle navy (à utiliser sur boutons clairs : mint, blanc, ghost).
   Class : pv-btn-arrow--navy */
.elementor-widget-button .elementor-button.pv-btn-arrow--navy::after {
	background: var(--pv-navy) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h14M13 6l6 6-6 6'/></svg>") center / 16px no-repeat;
}
/* Variante cercle teal (à utiliser sur boutons blancs/mint) */
.elementor-widget-button .elementor-button.pv-btn-arrow--teal::after {
	background: var(--pv-teal) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h14M13 6l6 6-6 6'/></svg>") center / 16px no-repeat;
}

/* ---------------------------------------------------------------- Images */
.elementor-widget-image img,
.elementor-widget-image-box img {
	border-radius: var(--pv-radius-sm);
}
.elementor-widget-image figure.wp-caption {
	font-family: var(--pv-font-body);
	font-size: .85rem;
	color: var(--pv-grey-600);
}

/* ---------------------------------------------------------------- Icon-box */
.elementor-widget-icon-box .elementor-icon-box-icon { margin-bottom: 16px; }
.elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon {
	color: var(--pv-teal);
	transition: color .15s ease, transform .15s ease;
}
.elementor-widget-icon-box:hover .elementor-icon-box-icon .elementor-icon {
	color: var(--pv-teal-dark);
	transform: translateY(-2px);
}
.elementor-widget-icon-box h3.elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-title {
	font-family: var(--pv-font-display);
	font-weight: 700;
	color: var(--pv-navy);
}
.elementor-widget-icon-box .elementor-icon-box-description {
	font-family: var(--pv-font-body);
	color: var(--pv-navy);
	line-height: 1.6;
}

/* ---------------------------------------------------------------- Accordion / FAQ */
.elementor-widget-accordion .elementor-accordion-item,
.elementor-widget-toggle .elementor-toggle-item {
	border: 0 !important;
	border-radius: var(--pv-radius-md);
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 40, 62, .06);
	margin-bottom: 12px;
	overflow: hidden;
}
.elementor-widget-accordion .elementor-tab-title,
.elementor-widget-toggle .elementor-tab-title {
	font-family: var(--pv-font-display) !important;
	font-weight: 600 !important;
	font-size: 1.05rem !important;
	color: var(--pv-navy) !important;
	background: #fff !important;
	padding: 18px 22px !important;
	border: 0 !important;
	transition: background .15s ease;
}
.elementor-widget-accordion .elementor-tab-title:hover,
.elementor-widget-toggle .elementor-tab-title:hover {
	background: var(--pv-cream) !important;
}
.elementor-widget-accordion .elementor-tab-title.elementor-active,
.elementor-widget-toggle .elementor-tab-title.elementor-active {
	background: var(--pv-mint) !important;
	color: var(--pv-navy) !important;
}
.elementor-widget-accordion .elementor-tab-title .elementor-accordion-icon,
.elementor-widget-toggle .elementor-tab-title .elementor-toggle-icon {
	color: var(--pv-teal) !important;
}
.elementor-widget-accordion .elementor-tab-content,
.elementor-widget-toggle .elementor-tab-content {
	font-family: var(--pv-font-body);
	color: var(--pv-navy);
	line-height: 1.7;
	padding: 18px 22px 22px !important;
	border: 0 !important;
	background: #fff !important;
}

/* ---------------------------------------------------------------- Tabs */
.elementor-widget-tabs .elementor-tabs-wrapper .elementor-tab-title {
	font-family: var(--pv-font-display) !important;
	font-weight: 600 !important;
	color: var(--pv-navy) !important;
	border: 0 !important;
	padding: 12px 22px !important;
	border-bottom: 3px solid transparent !important;
}
.elementor-widget-tabs .elementor-tab-title.elementor-active {
	color: var(--pv-teal) !important;
	border-bottom-color: var(--pv-teal) !important;
}
.elementor-widget-tabs .elementor-tab-content {
	font-family: var(--pv-font-body);
	color: var(--pv-navy);
	line-height: 1.7;
	padding: 22px !important;
	border: 0 !important;
}

/* ---------------------------------------------------------------- Divider */
.elementor-widget-divider .elementor-divider-separator {
	border-color: var(--pv-mint) !important;
}
.elementor-widget-divider .elementor-divider__element {
	color: var(--pv-teal) !important;
}

/* ---------------------------------------------------------------- Blockquote / Quote */
.elementor-widget-blockquote .elementor-blockquote__content,
.elementor-widget-text-editor blockquote {
	font-family: var(--pv-font-display);
	font-weight: 500;
	font-style: italic;
	color: var(--pv-navy);
	border-left: 4px solid var(--pv-teal);
	padding: 12px 0 12px 22px;
	margin: 1.2em 0;
	background: transparent;
}
.elementor-widget-blockquote .elementor-blockquote__author {
	color: var(--pv-teal);
	font-style: normal;
	font-weight: 600;
}

/* ---------------------------------------------------------------- Counter / progress */
.elementor-widget-counter .elementor-counter-number-wrapper,
.elementor-widget-counter .elementor-counter-number {
	font-family: var(--pv-font-display);
	font-weight: 700;
	color: var(--pv-teal);
}
.elementor-widget-counter .elementor-counter-title {
	font-family: var(--pv-font-display);
	color: var(--pv-navy);
}
.elementor-widget-progress .elementor-progress-bar {
	background: var(--pv-teal) !important;
}
.elementor-widget-progress .elementor-progress-wrapper {
	background: var(--pv-mint) !important;
	border-radius: var(--pv-radius-pill);
}

/* ---------------------------------------------------------------- Social icons */
.elementor-widget-social-icons .elementor-social-icon {
	background-color: var(--pv-mint) !important;
	color: var(--pv-navy) !important;
	transition: background .15s ease, transform .15s ease;
}
.elementor-widget-social-icons .elementor-social-icon:hover {
	background-color: var(--pv-teal) !important;
	color: #fff !important;
	transform: translateY(-2px);
}

/* ---------------------------------------------------------------- Forms (Ninja, native) */
.ninja-forms-form .nf-field-label label,
.elementor-form .elementor-field-label {
	font-family: var(--pv-font-display);
	font-weight: 500;
	color: var(--pv-navy);
}
.ninja-forms-form input[type="text"],
.ninja-forms-form input[type="email"],
.ninja-forms-form input[type="tel"],
.ninja-forms-form input[type="number"],
.ninja-forms-form input[type="url"],
.ninja-forms-form textarea,
.ninja-forms-form select,
.elementor-form input[type="text"],
.elementor-form input[type="email"],
.elementor-form input[type="tel"],
.elementor-form input[type="url"],
.elementor-form textarea,
.elementor-form select {
	font-family: var(--pv-font-body) !important;
	font-size: 1rem !important;
	color: var(--pv-navy) !important;
	background: #fff !important;
	border: 1.5px solid var(--pv-grey-100) !important;
	border-radius: var(--pv-radius-pill) !important;
	padding: 12px 22px !important;
	box-shadow: none !important;
}
.ninja-forms-form textarea,
.elementor-form textarea { border-radius: var(--pv-radius-md) !important; }
.ninja-forms-form input:focus,
.ninja-forms-form textarea:focus,
.ninja-forms-form select:focus,
.elementor-form input:focus,
.elementor-form textarea:focus,
.elementor-form select:focus {
	border-color: var(--pv-teal) !important;
	outline: none !important;
}
.ninja-forms-form input[type="submit"],
.ninja-forms-form button,
.elementor-form button {
	font-family: var(--pv-font-display) !important;
	font-weight: 500 !important;
	background: var(--pv-orange) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--pv-radius-pill) !important;
	padding: 12px 30px !important;
	cursor: pointer;
	transition: background .15s ease;
}
.ninja-forms-form input[type="submit"]:hover,
.ninja-forms-form button:hover,
.elementor-form button:hover {
	background: var(--pv-orange-dark) !important;
}

/* ---------------------------------------------------------------- Image carousel / gallery */
.elementor-widget-image-carousel .swiper-slide-image,
.elementor-widget-image-gallery .gallery-item img {
	border-radius: var(--pv-radius-sm);
}
.elementor-widget-image-carousel .elementor-swiper-button {
	color: var(--pv-navy) !important;
	background: var(--pv-mint) !important;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.elementor-widget-image-carousel .elementor-swiper-button:hover {
	background: var(--pv-teal) !important;
	color: #fff !important;
}

/* =============================================================================
   UTILITY BLOCKS — classes à ajouter via Elementor > Advanced > CSS Classes
   pour transformer n'importe quelle section/column/widget en bloc PV-brandé.
   ============================================================================= */

/* ---- BLOCK : CTA orange pleine largeur --------------------------------------- */
/* Usage : ajouter la classe sur une SECTION Elementor */
.pv-block--cta-orange {
	background: var(--pv-orange) !important;
	padding: 56px clamp(16px, 4vw, 48px) !important;
	color: #fff;
}
.pv-block--cta-orange h1,
.pv-block--cta-orange h2,
.pv-block--cta-orange h3,
.pv-block--cta-orange .elementor-heading-title,
.pv-block--cta-orange p,
.pv-block--cta-orange .elementor-widget-text-editor * {
	color: #fff !important;
}
.pv-block--cta-orange .elementor-button {
	background: #fff !important;
	color: var(--pv-orange) !important;
}
.pv-block--cta-orange .elementor-button:hover {
	background: var(--pv-cream) !important;
	color: var(--pv-orange-dark) !important;
}

/* ---- BLOCK : CTA teal pleine largeur ---------------------------------------- */
.pv-block--cta-teal {
	background: var(--pv-teal) !important;
	padding: 56px clamp(16px, 4vw, 48px) !important;
	color: #fff;
}
.pv-block--cta-teal h1,
.pv-block--cta-teal h2,
.pv-block--cta-teal h3,
.pv-block--cta-teal .elementor-heading-title,
.pv-block--cta-teal p,
.pv-block--cta-teal .elementor-widget-text-editor * {
	color: #fff !important;
}
.pv-block--cta-teal .elementor-button {
	background: #fff !important;
	color: var(--pv-teal) !important;
}

/* ---- BLOCK : CTA navy pleine largeur ---------------------------------------- */
.pv-block--cta-navy {
	background: var(--pv-navy) !important;
	padding: 56px clamp(16px, 4vw, 48px) !important;
	color: #fff;
}
.pv-block--cta-navy h1,
.pv-block--cta-navy h2,
.pv-block--cta-navy h3,
.pv-block--cta-navy .elementor-heading-title,
.pv-block--cta-navy p,
.pv-block--cta-navy .elementor-widget-text-editor * {
	color: #fff !important;
}
.pv-block--cta-navy .elementor-button {
	background: var(--pv-orange) !important;
	color: #fff !important;
	border: 0;
}

/* ---- BLOCK : Callout mint (encadré pastel) ---------------------------------- */
/* Usage : sur une COLUMN ou un WIDGET texte */
.pv-block--callout-mint {
	background: var(--pv-mint) !important;
	border-radius: var(--pv-radius-md) !important;
	padding: 28px 32px !important;
	color: var(--pv-navy);
}

.pv-block--callout-cream {
	background: var(--pv-cream) !important;
	border: 1.5px solid var(--pv-mint) !important;
	border-radius: var(--pv-radius-md) !important;
	padding: 28px 32px !important;
}

.pv-block--callout-yellow {
	background: var(--pv-yellow) !important;
	border-radius: var(--pv-radius-md) !important;
	padding: 28px 32px !important;
	color: var(--pv-navy);
}

/* ---- BLOCK : Card blanc avec ombre ----------------------------------------- */
.pv-block--card {
	background: #fff !important;
	border-radius: var(--pv-radius-md) !important;
	box-shadow: var(--pv-shadow-sm) !important;
	padding: 28px 32px !important;
	transition: box-shadow .15s ease, transform .15s ease;
}
.pv-block--card:hover {
	box-shadow: var(--pv-shadow-md) !important;
	transform: translateY(-2px);
}

/* ---- BLOCK : Card rotated (style newsletter) ------------------------------- */
.pv-block--rotated-card {
	background: var(--pv-teal) !important;
	color: #fff;
	border-radius: 20px !important;
	padding: 44px 48px !important;
	box-shadow: 0 4px 18px rgba(0, 40, 62, .25);
	transform: rotate(-2.66deg);
}
.pv-block--rotated-card * { color: #fff !important; }

/* ---- BLOCK : Titre avec eyebrow ------------------------------------------- */
.pv-block--eyebrow .elementor-heading-title::before {
	content: attr(data-eyebrow);
	display: block;
	font-family: var(--pv-font-display);
	font-weight: 600;
	text-transform: uppercase;
	font-size: .78rem;
	letter-spacing: .12em;
	color: var(--pv-teal);
	margin-bottom: 8px;
}

/* ---- BLOCK : Title highlight (style hero) --------------------------------- */
/* Usage : entourer le mot à surligner dans le Heading par <span class="pv-highlight">…</span> */
.pv-highlight {
	background: var(--pv-yellow);
	color: var(--pv-navy);
	padding: 0 8px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
.pv-highlight--teal { background: #1d6664; color: #fff; }
.pv-highlight--orange { background: var(--pv-orange); color: #fff; }

/* ---- BLOCK : Border-left teal (style citation/note) ----------------------- */
.pv-block--note {
	border-left: 4px solid var(--pv-teal) !important;
	padding: 16px 22px !important;
	background: var(--pv-cream) !important;
}

/* ---- BLOCK : Section padding rhythm --------------------------------------- */
.pv-section-padding { padding: clamp(56px, 8vw, 96px) 0 !important; }
.pv-section-padding--sm { padding: clamp(32px, 5vw, 56px) 0 !important; }
.pv-section-padding--lg { padding: clamp(80px, 10vw, 140px) 0 !important; }

/* ---- BLOCK : Background variants ------------------------------------------ */
.pv-bg-cream { background: var(--pv-cream) !important; }
.pv-bg-mint  { background: var(--pv-mint)  !important; }
.pv-bg-teal  { background: var(--pv-teal)  !important; color: #fff; }
.pv-bg-navy  { background: var(--pv-navy)  !important; color: #fff; }
.pv-bg-orange{ background: var(--pv-orange)!important; color: #fff; }
.pv-bg-teal *, .pv-bg-navy *, .pv-bg-orange * { color: #fff; }

/* ---- BLOCK : Grid layouts utilitaires ------------------------------------- */
.pv-block--grid-2 > .elementor-container,
.pv-block--grid-3 > .elementor-container,
.pv-block--grid-4 > .elementor-container {
	display: grid !important;
	gap: 24px !important;
}
.pv-block--grid-2 > .elementor-container { grid-template-columns: repeat(2, 1fr) !important; }
.pv-block--grid-3 > .elementor-container { grid-template-columns: repeat(3, 1fr) !important; }
.pv-block--grid-4 > .elementor-container { grid-template-columns: repeat(4, 1fr) !important; }

@media (max-width: 880px) {
	.pv-block--grid-3 > .elementor-container,
	.pv-block--grid-4 > .elementor-container { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
	.pv-block--grid-2 > .elementor-container,
	.pv-block--grid-3 > .elementor-container,
	.pv-block--grid-4 > .elementor-container { grid-template-columns: 1fr !important; }
}

/* ---- BUTTON variants (à utiliser dans les boutons Elementor) --------------- */
/* Usage : Advanced > CSS Classes : pv-btn pv-btn--ghost-teal */
.elementor-button.pv-btn--teal { background: var(--pv-teal) !important; color: #fff !important; }
.elementor-button.pv-btn--teal:hover { background: var(--pv-teal-dark) !important; }
.elementor-button.pv-btn--orange { background: var(--pv-orange) !important; color: #fff !important; }
.elementor-button.pv-btn--orange:hover { background: var(--pv-orange-dark) !important; }
.elementor-button.pv-btn--navy { background: var(--pv-navy) !important; color: #fff !important; }
.elementor-button.pv-btn--mint { background: var(--pv-mint) !important; color: var(--pv-navy) !important; }
.elementor-button.pv-btn--mint:hover { background: #a5d3d2 !important; color: var(--pv-navy) !important; }
.elementor-button.pv-btn--ghost-teal {
	background: transparent !important;
	color: var(--pv-teal) !important;
	border: 1.5px solid var(--pv-teal) !important;
	box-shadow: none !important;
}
.elementor-button.pv-btn--ghost-teal:hover { background: var(--pv-teal) !important; color: #fff !important; }
.elementor-button.pv-btn--ghost-white {
	background: transparent !important;
	color: #fff !important;
	border: 1.5px solid #fff !important;
	box-shadow: none !important;
}
.elementor-button.pv-btn--ghost-white:hover { background: #fff !important; color: var(--pv-navy) !important; }