/* =========================================================================
   APA Accueil V2 — WCDP donation form restyle (navy mockup)
   Palette sampled from the Lovable mockup JPEG (histogram + region sampling):
     deep navy  #16243D / #101F33   (buttons, selected, submit)
     secondary  #243447
     page bg    #F1F0ED
     idle field #E9ECEF  border #D7DCE2
     tax box    #E8EEF5  border #C9D9EC
     text       #5A6573  muted #8A929B
   Scope: everything is under .apa-donation-card (wrapper added around the
   [wcdp_donation_form] shortcode in Elementor) so it never leaks site-wide.
   ========================================================================= */

.apa-donation-card {
	--apa-navy: #16243D;
	--apa-navy-deep: #101F33;
	--apa-navy-hover: #243447;
	--apa-page: #F1F0ED;
	--apa-field: #E9ECEF;
	--apa-field-border: #D7DCE2;
	--apa-tax-bg: #E8EEF5;
	--apa-tax-border: #C9D9EC;
	--apa-text: #5A6573;
	--apa-muted: #8A929B;

	/* Override WCDP's own CSS variables so any unstyled bits follow the navy theme. */
	--wcdp-main: #16243D;
	--wcdp-main-2: #101F33;
	--wcdp-step-2: #16243D;
	--wcdp-step-3: #16243D;
	--label-inactive: #E9ECEF;
	--label-inactive-hover: #DDE2E8;
	--label-text: #16243D;
	--label-text-checked: #FFFFFF;
	--controls: #16243D;

	background: #FFFFFF;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(16, 31, 51, 0.18);
	padding: 28px 26px;
	max-width: 560px;
	margin: 0 auto;
	color: var(--apa-text);
	font-family: "Gotham", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.apa-donation-card .apa-card-inner { display: block; }
.apa-donation-card .wcdp-body { background: transparent; }

/* Card title "Faire un don" (rendered by the [apa_donation_form] shortcode). */
.apa-donation-card .apa-card-title {
	text-align: center;
	color: var(--apa-navy);
	font-weight: 700;
	font-size: 22px;
	margin: 0 0 16px;
}

/* ---- Ponctuel / Mensuel pills (native Fréquence variation box) ----------
   ONE variable-subscription product (51930) with attribute `frequence`
   (Ponctuel = one-time / Mensuel = monthly). WCDP renders the attribute as a
   box-layout radio fieldset; we style it into a segmented pill toggle that
   switches the variation client-side (no reload). apa-donation.js relocates
   the whole `.variations` block above the amount grid and injects the title. */
.apa-donation-card .variations.wcdp_variation { margin: 0 0 18px; }

/* Hide only the Fréquence label (the pills speak for themselves); keep the
   amount-section heading "Choisissez votre montant" (for="donation-amount"). */
.apa-donation-card .wcdp-variation-heading[for="frequence"] { display: none; }
/* The native <select> is WCDP-hidden inline; belt-and-braces. */
.apa-donation-card .variations.wcdp_variation select#frequence { display: none; }

.apa-donation-card ul.wcdp_options.wcdp_su[data-name="frequence"] {
	list-style: none;
	display: flex;
	gap: 6px;
	background: var(--apa-field);
	border-radius: 12px;
	padding: 5px;
	margin: 0;
}
.apa-donation-card ul.wcdp_options.wcdp_su[data-name="frequence"] li {
	flex: 1 1 0;
	margin: 0;
	list-style: none;
}
.apa-donation-card ul.wcdp_options.wcdp_su[data-name="frequence"] input[type="radio"] {
	position: absolute; opacity: 0; width: 0; height: 0;
}
.apa-donation-card ul.wcdp_options.wcdp_su[data-name="frequence"] label.wcdp-button-label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 11px 8px;
	border-radius: 9px;
	font-weight: 600;
	font-size: 14px;
	color: var(--apa-text);
	cursor: pointer;
	transition: background .15s, color .15s;
}
.apa-donation-card ul.wcdp_options.wcdp_su[data-name="frequence"] label.wcdp-button-label:hover {
	color: var(--apa-navy);
}
.apa-donation-card ul.wcdp_options.wcdp_su[data-name="frequence"] input:checked + label.wcdp-button-label {
	background: var(--apa-navy);
	color: #fff;
	box-shadow: 0 4px 12px rgba(16, 31, 51, .25);
}

/* Section labels */
.apa-donation-card .wcdp-variation-heading,
.apa-donation-card .woocommerce-billing-fields h3 {
	color: var(--apa-navy);
	font-weight: 600;
	font-size: 13px;
	text-transform: none;
	margin: 14px 0 8px;
	display: block;
}
.apa-donation-card .wcdp-variation-heading .required,
.apa-donation-card abbr.required { color: var(--apa-navy); border: 0; text-decoration: none; }

/* ---- Amount grid (3 columns) -------------------------------------------- */
.apa-donation-card ul.wcdp_options.wcdp_amount {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 0 0 8px;
	padding: 0;
}
.apa-donation-card ul.wcdp_options.wcdp_amount li { margin: 0; list-style: none; }
.apa-donation-card ul.wcdp_options.wcdp_amount input[type="radio"] {
	position: absolute; opacity: 0; width: 0; height: 0;
}
.apa-donation-card ul.wcdp_options.wcdp_amount label.wcdp-button-label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 10px;
	border: 1px solid var(--apa-field-border);
	border-radius: 10px;
	background: var(--apa-field);
	color: var(--apa-navy);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.apa-donation-card ul.wcdp_options.wcdp_amount label.wcdp-button-label:hover {
	border-color: var(--apa-navy);
}
.apa-donation-card ul.wcdp_options.wcdp_amount input:checked + label.wcdp-button-label {
	background: var(--apa-navy);
	color: #fff;
	border-color: var(--apa-navy);
	box-shadow: 0 4px 12px rgba(16, 31, 51, .25);
}
/* Suppress WCDP's own checked-state white checkmark SVG (drawn via its
   .wcdp_options>li>input:checked+label:after). Our pills/amounts already show
   selection via the navy fill, so the extra icon is redundant. */
.apa-donation-card .wcdp_options > li > input:checked + label::after {
	content: none !important;
	display: none !important;
}
/* "Autre" custom-amount option spans like the others; reveal field when checked */
.apa-donation-card .wcdp_label_custom_amount { flex-direction: column; gap: 4px; }
.apa-donation-card .wcdp_cu_field { display: none; width: 100%; }
.apa-donation-card .wcdp_value_other:checked + .wcdp_label_custom_amount .wcdp_cu_field { display: block; }
/* When "Autre" is active the input alone IS the button: drop the label's own box
   and hide the "Autre" word so the cell keeps the exact 46px button height. */
.apa-donation-card .wcdp_value_other:checked + .wcdp_label_custom_amount {
	padding: 0;
	border: 0;
	min-height: 0;
	background: transparent;
	box-shadow: none;
}
.apa-donation-card .wcdp_value_other:checked + .wcdp_label_custom_amount .wcdp_other { display: none; }
/* Hide the dangling currency symbol (the buttons already imply euros). */
.apa-donation-card .wcdp_cu_field .woocommerce-Price-currencySymbol { display: none; }
/* Match the amount input to the suggestion buttons exactly (size + look). */
.apa-donation-card .wcdp_cu_field .wcdp-input-field,
.apa-donation-card #wcdp-donation-amount {
	width: 100%;
	box-sizing: border-box;
	min-height: 46px;
	margin: 0;
	padding: 10px;
	border: 1px solid var(--apa-field-border);
	border-radius: 10px;
	background: #fff;
	color: var(--apa-navy);
	font-weight: 600;
	font-size: 15px;
	text-align: center;
}
.apa-donation-card .wcdp_cu_field .wcdp-input-field:focus,
.apa-donation-card #wcdp-donation-amount:focus {
	outline: none;
	border-color: var(--apa-navy);
	box-shadow: 0 0 0 2px rgba(16, 31, 51, .15);
}

/* ---- Fiscal-reduction box (injected by apa-donation.js) ------------------ */
.apa-donation-card .apa-tax-box {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: var(--apa-tax-bg);
	border: 1px solid var(--apa-tax-border);
	border-radius: 12px;
	padding: 14px 16px;
	margin: 14px 0 18px;
}
.apa-donation-card .apa-tax-box .apa-tax-ico {
	flex: 0 0 auto;
	width: 30px; height: 30px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--apa-navy);
	color: #fff;
}
.apa-donation-card .apa-tax-box .apa-tax-title { color: var(--apa-navy); font-weight: 700; font-size: 14px; margin: 0 0 3px; }
.apa-donation-card .apa-tax-box .apa-tax-detail { font-size: 13px; line-height: 1.4; margin: 0; }
.apa-donation-card .apa-tax-box .apa-tax-detail strong { color: var(--apa-navy); }
.apa-donation-card .apa-tax-box .apa-tax-note { font-size: 11.5px; color: var(--apa-muted); margin: 4px 0 0; font-style: italic; }

/* ---- Donor (billing) fields → 2-column grid ----------------------------- */
.apa-donation-card .woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 14px;
}
.apa-donation-card .woocommerce-billing-fields .form-row { margin: 0; padding: 0; float: none; width: auto; }
.apa-donation-card .woocommerce-billing-fields .form-row-wide,
.apa-donation-card .woocommerce-billing-fields .form-row-first.apa-only { grid-column: 1 / -1; }
.apa-donation-card .woocommerce-billing-fields .form-row label {
	/* theme couples WC checkout labels to the h5 (OSCL) slot; force Gotham only inside the donation card */
	font-family: "Gotham", sans-serif;
	color: var(--apa-navy);
	font-size: 12.5px;
	font-weight: 600;
	margin-bottom: 4px;
	display: block;
}
.apa-donation-card .woocommerce-billing-fields .form-row .input-text,
.apa-donation-card .woocommerce-billing-fields .form-row select {
	width: 100%;
	border: 1px solid var(--apa-field-border);
	border-radius: 8px;
	padding: 10px 12px;
	background: var(--apa-field);
	color: var(--apa-navy);
	font-size: 14px;
}
.apa-donation-card .woocommerce-billing-fields .form-row .input-text:focus {
	background: #fff;
	border-color: var(--apa-navy);
	outline: none;
}
.apa-donation-card .apa-hidden-field { display: none !important; }

/* ---- Divider arrows (WCDP svg) — tone down --------------------------- */
.apa-donation-card .wcdp-divider-arrow { display: none; }

/* The donation <form> (theme gives forms a bottom margin) — flush bottom. */
.apa-donation-card form.wcdp-choose-donation { margin-bottom: 0 !important; }

/* Space between the billing fields block and what follows it. */
.apa-donation-card .woocommerce-billing-fields { margin-bottom: 20px; }

/* Hide the order recap ("Récapitulatif de votre donation" + review table) per
   customer request. VISUAL ONLY: WooCommerce still renders/updates the table
   and its totals in the DOM, so checkout logic is untouched. */
.apa-donation-card .shop_table_checkout_review,
.apa-donation-card h3:has(+ .shop_table_checkout_review) { display: none; }

/* ---- Submit button ("Faire un don") ------------------------------------ */
.apa-donation-card #place_order,
.apa-donation-card .wcdp-button {
	/* The theme ships `#payment #place_order{width:auto}` (2 ids + class) which
	   outspecifies us, and woocommerce-layout.css floats it — !important both so
	   the button spans the full card width. It also ships `#place_order{margin-left:
	   20% !important}` and `.woocommerce button.button{margin-left:5px}` which shove
	   the button inward; zero the left margin. All overrides stay scoped to
	   .apa-donation-card, so buttons elsewhere on the site are unaffected. */
	width: 100% !important;
	float: none !important;
	margin-left: 0 !important;
	/* stack the label and the .apa-submit-note on separate lines (the theme's
	   global button style otherwise lays children out in a single flex row). */
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--apa-navy) !important;
	color: #fff !important;
	border: 0;
	border-radius: 10px;
	padding: 14px 18px;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	transition: background .15s;
	box-shadow: 0 8px 20px rgba(16, 31, 51, .25);
}
.apa-donation-card #place_order:hover,
.apa-donation-card .wcdp-button:hover { background: var(--apa-navy-hover) !important; }

/* ---- Secure-payment + receipt reassurance (injected/styled) ------------- */
.apa-donation-card .apa-secure-note {
	text-align: center;
	font-size: 12px;
	color: var(--apa-muted);
	margin: 12px 0 0;
}
.apa-donation-card .apa-receipt-note {
	text-align: center;
	font-size: 11.5px;
	color: var(--apa-muted);
	margin: 6px 0 0;
	line-height: 1.4;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 600px) {
	.apa-donation-card { padding: 22px 18px; border-radius: 14px; }
	.apa-donation-card ul.wcdp_options.wcdp_amount { grid-template-columns: repeat(2, 1fr); }
	.apa-donation-card .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; }
}

/* =========================================================================
   APA Accueil V2 — section polish (carousel + "Autres façons de nous aider")
   Matches the Lovable reference JPEGs. Navy #16243D, page bg #F1F0ED.
   Scoped to the Elementor _css_classes added on page 51914:
     .apa-rescued-carousel  (image-carousel widget)
     .apa-other-ways        (icon section)
   Widget controls handle the data; CSS reaches what controls can't.
   ========================================================================= */

/* ---- "Ils ont été sauvés…" carousel ------------------------------------- */
/* Big equal-height slides, uniform crop, generous radius, ~20px gap (gap is
   the widget's image_spacing_custom). Arrows live in the side padding so they
   sit OUTSIDE the images without being clipped by swiper overflow. */
.apa-rescued-carousel .elementor-image-carousel-wrapper {
	position: relative;
	padding: 0 64px;
}
.apa-rescued-carousel .swiper-slide img,
.apa-rescued-carousel .elementor-carousel-image {
	display: block;
	width: 100%;
	height: 300px;
	object-fit: cover;
	border-radius: 18px;
}
.apa-rescued-carousel figure.swiper-slide-inner { margin: 0; }

/* Circular outline arrows, navy, vertically centered, far left / right. */
.apa-rescued-carousel .elementor-swiper-button {
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid #16243D;
	border-radius: 50%;
	background: transparent;
	color: #16243D;
	top: 50%;
	transform: translateY(-50%);
	transition: background .15s, color .15s;
}
.apa-rescued-carousel .elementor-swiper-button:hover { background: #16243D; color: #fff; }
.apa-rescued-carousel .elementor-swiper-button i,
.apa-rescued-carousel .elementor-swiper-button svg { font-size: 16px; width: 16px; height: 16px; }
.apa-rescued-carousel .elementor-swiper-button-prev { left: 6px; right: auto; }
.apa-rescued-carousel .elementor-swiper-button-next { right: 6px; left: auto; }
/* No dot pagination (navigation=arrows already; belt-and-braces). */
.apa-rescued-carousel .swiper-pagination { display: none; }

/* ---- "Autres façons de nous aider" -------------------------------------- */
/* The left title column (28%, vertically centered) and the 3 card columns
   (24% each) are set on the Elementor columns themselves, so the title sits to
   the LEFT of the cards in one row. These classes live on the WIDGETS (section-
   level custom classes don't render reliably here), so styling is scoped to:
     .apa-otherways-title  (the heading widget)
     .apa-otherways-card   (each icon-box widget). */
.apa-otherways-title .elementor-heading-title {
	font-weight: 700;
	font-size: 30px;
	line-height: 1.2;
	color: #16243D;
	text-align: left;
}
/* Bold NAVY icons, NO grey circle, a touch larger than default. */
.apa-otherways-card .elementor-icon {
	background: transparent !important;
	border: 0 !important;
	font-size: 44px;
	color: #16243D;
}
.apa-otherways-card .elementor-icon svg { fill: #16243D; width: 44px; height: 44px; }
.apa-otherways-card .elementor-icon-box-title,
.apa-otherways-card .elementor-icon-box-title a {
	color: #16243D;
	font-weight: 700;
	font-size: 18px;
}
.apa-otherways-card .elementor-icon-box-description {
	color: #6E7682;
	font-size: 14px;
	line-height: 1.5;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
	.apa-otherways-title .elementor-heading-title { text-align: center; }
}
@media (max-width: 767px) {
	.apa-otherways-title .elementor-heading-title { text-align: center; }
	.apa-rescued-carousel .elementor-image-carousel-wrapper { padding: 0 46px; }
	.apa-rescued-carousel .swiper-slide img,
	.apa-rescued-carousel .elementor-carousel-image { height: 240px; }
	.apa-rescued-carousel .elementor-swiper-button { width: 40px; height: 40px; }
}

/* ---- Checkout review trims (Accueil V2 donation card only) -------------- */
/* Hide the "Sous-total" line in the order table (keep the column header + Total). */
.apa-donation-card .cart-subtotal { display: none; }
/* Hide the whole "Informations complémentaires" block (heading + notes textarea). */
.apa-donation-card .woocommerce-additional-fields { display: none; }
/* Hide the privacy-policy paragraph above the submit button. */
.apa-donation-card .woocommerce-privacy-policy-text { display: none; }
/* Italic, non-clickable note INSIDE the JE SOUTIENS button (snippet #25). */
.apa-donation-card .apa-submit-note {
	display: block;            /* own line, under "JE SOUTIENS" inside the button */
	margin: 4px 0 0;
	text-align: center;
	font-style: italic;
	font-weight: 400;          /* not bold — button text is 700 */
	font-size: 13px;
	text-transform: none;
	line-height: 1.3;
	color: rgba(255, 255, 255, .85);
}

/* "Déjà membre donateur ?" login-toggle box. WooCommerce's default
   .woocommerce-info pads 1em 2em 1em 3.5em with the info icon (::before) at
   left:1.5em — too much room, so the link wraps onto 2 lines. Tighten the
   padding and pull the icon near the left edge; keep enough left padding that
   the text never overlaps the icon, and keep the link on a single line. */
.apa-donation-card .woocommerce-form-login-toggle .woocommerce-info {
	padding: 0.7em 0.9em 0.7em 2.3em;
	margin-bottom: 1em;
}
.apa-donation-card .woocommerce-form-login-toggle .woocommerce-info::before {
	left: 0.7em;
	top: 0.8em;
}
.apa-donation-card .woocommerce-form-login-toggle .showlogin {
	white-space: nowrap; /* keep "Cliquez ici pour vous connecter" on one line */
}

/* ---------------------------------------------------------------------------
   Sticky right column (desktop only) on the single-product / donation template.
   The tall LEFT column (title + description + donation form) scrolls normally,
   while the RIGHT column (image gallery + progress + short description) stays
   pinned in the viewport until the row ends.
   The right column is targeted two ways for robustness:
   (1) by the custom class  apa-sticky-col  (Advanced -> CSS Classes), and
   (2) by its stable Elementor element id  .elementor-element-cda9392  scoped to
       this template page (.elementor-21757). The EAE slider column extension
       (has_eae_slider) strips the column's custom class from the rendered markup,
       so the id selector is what actually drives the sticky here. If the right
       column is ever rebuilt in the editor its id changes — re-point selector (2)
       and/or re-add the apa-sticky-col class.
   --------------------------------------------------------------------------- */
/* NOTE: these rules are scoped by stable Elementor ELEMENT ids (e.g.
   .elementor-element-cda9392) rather than the page class .elementor-21757,
   because the Elementor editor preview iframe doesn't carry the page class —
   so id scoping makes them render in BOTH the editor and the front end.
   Element ids change only if the element is rebuilt in the editor. */
@media (min-width: 1025px) {
	.apa-sticky-col,
	.elementor-element.elementor-element-cda9392 {
		position: -webkit-sticky;
		position: sticky;
		top: 24px;             /* header scrolls away on this template, so just a little breathing room */
		align-self: flex-start; /* don't stretch to row height, so it can travel */
	}
}

/* JetWoo product gallery (widget #16ae232): keep the box a constant height so it
   no longer grows/shrinks with each image's intrinsic size. The gallery is a
   Swiper slider — do NOT put overflow/max-height on the swiper container/wrapper/
   slide, as that fights Swiper's flex + transform layout and makes the active
   slide vanish after init. Instead fix the height on the slide's CONTENT layers
   (__image-item / __image / __image-link); the slide then inherits a constant
   height. 60vh = 60% of viewport height; object-fit: cover fills the box for any
   aspect ratio without distortion. */
.elementor-element-16ae232 .jet-woo-product-gallery__image-item,
.elementor-element-16ae232 .jet-woo-product-gallery__image,
.elementor-element-16ae232 .jet-woo-product-gallery__image-link {
	display: block;
	height: 60vh;
	overflow: hidden;
}
.elementor-element-16ae232 .jet-woo-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Edge alignment (maquette v02): the donation card carries a 560px cap +
   auto-centering from the dons port; in the 50% column it must fill the
   column so its left edge lines up with the hero/other blocks. */
.elementor-element-90212d7 .apa-donation-card {
	max-width: none;
}

/* Card treatment (maquette v02):
   #7466b1a = "La cagnotte" column (now full width of the right column);
   #c105ed2 = full-width closing section column (short description /
   "Chaque jour…" box). Same white/rounded/shadow language as the donation card. */
.elementor-element-7466b1a > .elementor-widget-wrap.elementor-element-populated,
.elementor-element-c105ed2 > .elementor-widget-wrap.elementor-element-populated {
	background: #FFFFFF;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(16, 31, 51, 0.18);
	padding: 22px 24px;
	/* Elementor outputs `... > .elementor-element-populated{margin:0 0 0 0}` (4 classes,
	   beats us) — !important to keep the bottom spacing in every layout (esp. stacked). */
	margin-bottom: 20px !important;
}
/* Closing box: centered copy per the maquette ("Chaque jour…" + bold line). */
.elementor-element-c105ed2 .woocommerce-product-details__short-description {
	text-align: center;
	color: #16243D;
}

/* Maquette v02 — right column zone under the cagnotte card: illustration +
   title + intro texts, all centered. Scoped by element ids so it renders in
   the editor preview too. */
.elementor-element-cda9392 .elementor-widget-woocommerce-product-title,
.elementor-element-cda9392 .elementor-widget-text-editor,
.elementor-element-cda9392 .elementor-widget-woocommerce-product-content {
	text-align: center;
}
.elementor-element-cda9392 .elementor-element-111a570 {
	margin-top: 10px;
}

/* Maquette v02 — full-width hero: soften the gallery corners. */
.elementor-element-16ae232 .jet-woo-product-gallery {
	border-radius: 18px;
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   "La cagnotte" progress card — internal layout for the WCDP progress style-2
   theme override (woocommerce/wcdp_progress_style_2.php). The white card/shadow
   comes from the column wrapper rule above; this only arranges the contents to
   match the reference (centered title/amount/goal, bar + % on one row, then a
   two-column donateurs / jours-restants footer). Colour vars are scoped to
   .apa-donation-card elsewhere, so use literal APA hex values here.
   --------------------------------------------------------------------------- */
.apa-cagnotte {
	text-align: center;
	color: #16243D;
	font-family: "Gotham", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.apa-cagnotte__title {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 13px;
	font-weight: 600;
	color: #5A6573;
	margin: 0 0 10px;
}
.apa-cagnotte__amount {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	color: #16243D;
}
.apa-cagnotte__goal {
	font-size: 13px;
	color: #5A6573;
	margin: 6px 0 16px;
}
.apa-cagnotte__bar-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}
.apa-cagnotte__bar {
	flex: 1;
	min-width: 0;
}
.apa-cagnotte .wcdp-thermometer {
	height: 12px;
	border-radius: 6px;
}
.apa-cagnotte .wcdp-thermometer-bg {
	background-color: #E9ECEF;   /* light track */
	margin: 0;
	height: 12px;
}
.apa-cagnotte .wcdp-progress > .wcdp-thermometer-fg {
	background-color: #16243D;   /* navy fill */
	margin-top: -12px;
}
.apa-cagnotte__pct {
	font-weight: 700;
	font-size: 15px;
	color: #16243D;
	white-space: nowrap;
}
.apa-cagnotte__stats {
	display: flex;
	gap: 12px;
	border-top: 1px solid #D7DCE2;
	padding-top: 16px;
}
.apa-cagnotte__stat {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: left;
}
.apa-cagnotte__icon {
	flex: 0 0 auto;
	color: #16243D;
	line-height: 0;
}
.apa-cagnotte__icon svg {
	width: 28px;
	height: 28px;
	display: block;
}
.apa-cagnotte__stat-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}
.apa-cagnotte__stat-num {
	font-weight: 700;
	font-size: 18px;
	color: #16243D;
}
.apa-cagnotte__stat-label {
	font-size: 12px;
	color: #5A6573;
}

/* ------------------------------------------------------------------ *
 * Product footer icons row ([product-footer-icons]).
 * Same card language as the cagnotte / short-description boxes.
 * ------------------------------------------------------------------ */
.apa-footer-icons {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
	color: #16243D;
	font-family: "Gotham", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	/* Same card look as the cagnotte / short-desc boxes (those get it from their
	   Elementor column wrapper; this shortcode is self-contained so it carries it). */
	background: #FFFFFF;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(16, 31, 51, 0.18);
	padding: 22px 24px;
}
/* The shortcode lives in its own Elementor column whose populated wrapper carries
   a 20px padding; the card already has its own internal padding, so drop the
   column padding to let the box sit flush. Targeted by content (not column id) so
   it survives an editor rebuild. */
.elementor-widget-wrap.elementor-element-populated:has(.apa-footer-icons) {
	padding: 0 !important;
}
/* Also drop the top margin on the section that wraps the icon box
   (top-level section since maquette v02). */
.elementor-section:has(.apa-footer-icons) {
	margin-top: 0 !important;
}
/* And the bottom margin on the inner section above it (cagnotte + short-desc). */
.elementor-inner-section:has(.apa-cagnotte) {
	margin-bottom: 0 !important;
}
.apa-footer-icons__item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 4px 16px;
	position: relative;
}
.apa-footer-icons__item + .apa-footer-icons__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: #D7DCE2;
}
.apa-footer-icons__icon {
	flex: 0 0 auto;
	color: #16243D;
	line-height: 0;
}
.apa-footer-icons__icon svg {
	width: 38px;
	height: 38px;
	display: block;
}
.apa-footer-icons__text {
	font-size: 13px;
	line-height: 1.3;
	color: #16243D;
}
@media (max-width: 767px) {
	.apa-footer-icons__item {
		flex: 1 1 50%;
		padding: 14px 12px;
	}
	.apa-footer-icons__item + .apa-footer-icons__item::before {
		display: none;
	}
}