/*
 * Brand corrections from the design and accessibility audits.
 *
 * Part of the Web Weasel child theme. Loaded from inc/enqueue-assets.php.
 * Order matters: this file is printed after the previous module.
 */

/* Content link underline: 2px sun rule (brand) */
.site-content :where(p, li, td) a:not(.wp-block-button__link):not(.wp-element-button) {
	text-decoration-color: var(--wp--preset--color--ww-sun);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Link legibility on dark grounds (teal, gradients, header, footer) */
.site-header a,
.site-footer a,
.has-ww-teal-700-background-color a,
.has-ww-teal-800-background-color a,
.has-custom-d-grad-subtil-gradient-background a,
.has-custom-d-grad-subtil-alt-gradient-background a,
.has-custom-main-gradient-background a,
.has-custom-bloc-1-gradient-background a {
	color: var(--wp--preset--color--base);
}
.site-header a:not(.wp-block-button__link),
.site-footer a:not(.wp-block-button__link),
.has-ww-teal-700-background-color a:not(.wp-block-button__link),
.has-custom-d-grad-subtil-gradient-background a:not(.wp-block-button__link),
.has-custom-d-grad-subtil-alt-gradient-background a:not(.wp-block-button__link),
.has-custom-main-gradient-background a:not(.wp-block-button__link) {
	text-decoration-color: var(--wp--preset--color--ww-sun);
}
/* Buttons keep their orange background and white label on dark grounds */
.site-footer .wp-block-button__link,
.has-custom-d-grad-subtil-alt-gradient-background .wp-block-button__link {
	color: var(--wp--preset--color--base);
}

/* Bouton secondaire (charte) : transparent, texte et bordure teal-700 */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color),
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ww-teal-700);
	border: 2px solid var(--wp--preset--color--ww-teal-700);
	border-radius: 999px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--ww-teal-700);
	color: var(--wp--preset--color--base);
}

/* Two-button hero rows: the longer secondary label (e.g. "Demander un
   diagnostic gratuit") wraps to 2 lines on narrow phones (320-375px)
   while the primary button next to it stays on one, breaking the pill
   alignment between the two. Trim the secondary's type size and padding
   just enough to keep it on one line at the widths where this happens. */
@media (max-width: 400px) {
	.wp-block-buttons:has(> .wp-block-button + .wp-block-button) .wp-block-button.is-style-outline > .wp-block-button__link {
		font-size: 0.8rem;
		padding-left: 0.85rem;
		padding-right: 0.85rem;
	}
}

/* Visible focus: two-tone indicator.
   Sun alone fails the 3:1 contrast requirement on light grounds (1.62:1).
   Inner sun ring plus outer teal-800 ring: one of the two always stands out,
   whether the ground is light or dark (WCAG 1.4.11 and 2.4.11). */
:where(a, button, .wp-block-button__link, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--ww-sun);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--wp--preset--color--ww-teal-800);
	border-radius: 4px;
}

/* Reading comfort: SEO page lists go from 14.5-15px to 16px */
.ww-check-list li,
.ww-card-list li,
.ww-approach-list li,
.ww-approach-intro,
.ww-seo-badge-list li,
.ww-callout p,
.ww-feature-card .wp-block-list li {
	font-size: 16px;
}
.ww-feature-card > p:first-of-type {
	font-size: 16px;
}

/* Colour slugs inherited from a mockup and missing from the palette: give them a
   real value rather than leaving the class inert. */
.has-glass-background-color {
	background-color: rgba(255, 255, 255, 0.08);
}
.has-contrast-color {
	color: var(--wp--preset--color--base);
}


/* ===================================================================
   Unified buttons: two styles and only two.
   is-style-fill = orange primary | is-style-outline = teal secondary
   Forminator buttons follow the same rule as the primary.
   =================================================================== */

/* Secondary on dark grounds: white, otherwise the teal disappears */
:is(.site-footer,
	.has-ww-teal-700-background-color,
	.has-ww-teal-800-background-color,
	.has-custom-main-gradient-background,
	.has-custom-bloc-1-gradient-background,
	.has-custom-d-grad-subtil-gradient-background,
	.has-custom-d-grad-subtil-alt-gradient-background)
	.wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
}
:is(.site-footer,
	.has-ww-teal-700-background-color,
	.has-custom-main-gradient-background,
	.has-custom-d-grad-subtil-gradient-background,
	.has-custom-d-grad-subtil-alt-gradient-background)
	.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ww-teal-700);
	border-color: var(--wp--preset--color--base);
}

/* Forminator buttons aligned with the brand primary.
   Forminator applies its styles through an ID selector
   (.forminator-ui#forminator-module-52...), so !important is the only way to
   take over without duplicating a selector per form. */
.forminator-ui[id^="forminator-module"] .forminator-button-submit,
.forminator-ui[id^="forminator-module"] button.forminator-button-submit,
.forminator-ui[id^="forminator-module"] .forminator-button.forminator-button-submit {
	background: var(--wp--preset--color--ww-orange-600) !important;
	color: var(--wp--preset--color--base) !important;
	border: 2px solid var(--wp--preset--color--ww-orange-600) !important;
	border-radius: 999px !important;
	font-family: var(--wp--preset--font-family--nunito-sans) !important;
	font-weight: 800 !important;
	font-size: 1.05rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em !important;
	padding: 0.75em 1.75em !important;
	height: auto !important;
	line-height: 1.2 !important;
	box-shadow: none !important;
}
.forminator-ui[id^="forminator-module"] .forminator-button-submit:hover,
.forminator-ui[id^="forminator-module"] .forminator-button-submit:focus {
	background: var(--wp--preset--color--ww-orange-700) !important;
	border-color: var(--wp--preset--color--ww-orange-700) !important;
	color: var(--wp--preset--color--base) !important;
}
.forminator-ui[id^="forminator-module"] .forminator-button-submit:focus-visible {
	outline: 3px solid var(--wp--preset--color--ww-sun) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 6px var(--wp--preset--color--ww-teal-800) !important;
}


/* Shared card shadow token, generalised from .ww-seo-card's original flat
   teal-tinted shadow to the other key cards across the site, for a
   consistent visual language. Deliberately flat, non-blurred shadows stay
   untouched (ww-approach-list, ww-seo-badge-list, ww-callout): those are a
   different, intentionally flatter register. */
.ww-realisation-card,
.ww-engagement-card,
.ww-feature-card,
.ww-check-list li,
.ww-card-list li {
	box-shadow: 0 3px 0 rgba(25, 78, 79, 0.08);
}


/* Complianz cookie banner, restyled to match the Web Weasel brand.
   Complianz exposes its whole palette as CSS custom properties on :root
   in its own stylesheet; redeclaring them here (loaded after, in the same
   cascade layer) overrides them without touching the plugin. */
:root {
	--cmplz_banner_background_color: var(--wp--preset--color--base);
	--cmplz_banner_border_color: var(--wp--preset--color--ww-mint-100);
	--cmplz_banner_border_radius: 20px;
	--cmplz_text_color: var(--wp--preset--color--main);
	--cmplz_hyperlink_color: var(--wp--preset--color--ww-orange-600);
	--cmplz_button_accept_background_color: var(--wp--preset--color--ww-orange-600);
	--cmplz_button_accept_border_color: var(--wp--preset--color--ww-orange-600);
	--cmplz_button_accept_text_color: var(--wp--preset--color--base);
	--cmplz_button_deny_background_color: transparent;
	--cmplz_button_deny_border_color: var(--wp--preset--color--ww-teal-700);
	--cmplz_button_deny_text_color: var(--wp--preset--color--ww-teal-700);
	--cmplz_button_settings_background_color: transparent;
	--cmplz_button_settings_border_color: var(--wp--preset--color--ww-teal-700);
	--cmplz_button_settings_text_color: var(--wp--preset--color--ww-teal-700);
	--cmplz_button_border_radius: 999px;
	--cmplz_category_header_always_active_color: var(--wp--preset--color--ww-teal-700);
	--cmplz_slider_active_color: var(--wp--preset--color--ww-teal-700);
}
.cmplz-cookiebanner,
.cmplz-cookiebanner * {
	font-family: var(--wp--preset--font-family--nunito-sans);
}
.cmplz-cookiebanner .cmplz-title {
	font-family: var(--wp--preset--font-family--archivo);
	text-transform: uppercase;
	letter-spacing: -0.01em;
}
.cmplz-cookiebanner .cmplz-btn:focus-visible,
.cmplz-cookiebanner a:focus-visible,
.cmplz-cookiebanner [tabindex]:focus-visible {
	outline: 3px solid var(--wp--preset--color--ww-sun);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--wp--preset--color--ww-teal-800);
}


/* "Pourquoi un site web" cards: white background so they stand out from
   the section's own tinted background instead of blending into it. */
.ww-check-list li {
	background: #FFFFFF !important;
}


/* Forminator hides every form by default (get_html() defaults $hide=true) and
   relies on its own front-end JS to remove the inline display:none. That JS
   path has proven fragile with this site's caching (device-specific cache
   pools serving different snapshots, AJAX/defer interactions). Forcing
   visibility here is independent of any of that: an !important rule in a
   stylesheet always wins over a plain (non-!important) inline style,
   regardless of caching or script timing. None of this site's 4 forms are
   login/registration forms, so there is no legitimate case where Forminator
   needs to keep one hidden. */
.forminator-custom-form {
	display: block !important;
}


/* Complianz cookie banner: the close button's own SVG icon has no size
   rule anywhere (every other banner icon does -- .cmplz-icon.cmplz-open is
   correctly sized at 15.75x18px), so it renders at its raw viewBox ratio
   and fills most of the viewport (measured live at ~1905x2771px) on the
   "view preferences" banner variant. Constrain it to match the other
   banner icons. Reported 2026-09-13. */
.cmplz-close svg {
	width: 18px;
	height: 18px;
}