/*
 * Trade and territory SEO pages.
 *
 * Part of the Web Weasel child theme. Loaded from inc/enqueue-assets.php.
 * Order matters: this file is printed after the previous module.
 */

Trade and territory pages (13 SEO pages): classes applied directly on the blocks
   (Gutenberg className), no body class
   =================================================================== */
.ww-dot-list {
	list-style: none !important;
	padding-left: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 10px !important;
}
.ww-dot-list li {
	position: relative;
	padding-left: 20px;
	line-height: 1.55;
}
.ww-dot-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--ww-sun);
}
.ww-callout {
	background: var(--wp--preset--color--ww-tint-yellow) !important;
	border-left: 5px solid var(--wp--preset--color--ww-sun) !important;
	border-top: none !important;
	border-right: none !important;
	border-bottom: none !important;
	border-radius: 0 14px 14px 0 !important;
	padding: 16px 20px !important;
	margin: 24px auto !important;
}
.ww-callout p {
	margin: 0 !important;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--main, #0F1C1C) !important;
	font-style: normal !important;
}

/* Trade and territory page hero: soft gradient plus decorative circle, applied
   directly on the section group through className (no body class) */
.ww-seo-hero {
	position: relative;
	background: linear-gradient(180deg, var(--wp--preset--color--ww-cloud-100) 0%, var(--wp--preset--color--ww-cloud-200) 100%);
	border-radius: 0;
	overflow: hidden;
}
/* The decorative circle now comes from design-system.css, where it applies to
   the first section of every page except the front page. */
.ww-seo-hero > .wp-block-columns {
	position: relative;
	z-index: 1;
}
/* Same hero-breakpoint fix as home-hero.css: wraps into 2 columns as soon
   as there is room (~800px) on pages with an illustration, shrinking the
   text column well before the site's own desktop breakpoint. Keep it
   stacked full width until 992px instead. */
@media (max-width: 991px) {
	.ww-seo-hero > .wp-block-columns {
		flex-direction: column;
	}
	.ww-seo-hero > .wp-block-columns > .wp-block-column {
		width: 100% !important;
		flex-basis: 100% !important;
	}
}

/* "Why a website" list: card bullets with a checkmark, as per the mockup */
.ww-check-list {
	list-style: none !important;
	padding-left: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 10px !important;
}
/* Important: the li must stay a block. With display:flex, every <strong> becomes a
   flex item and the text breaks apart into columns. */
.ww-check-list li {
	position: relative;
	display: block;
	background: var(--wp--preset--color--ww-mint-100);
	border-radius: 16px;
	padding: 14px 18px 14px 48px;
	line-height: 1.55;
}
.ww-check-list li::before {
	content: "\2713";
	position: absolute;
	left: 15px;
	top: 14px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	color: var(--wp--preset--color--ww-teal-700);
	font-weight: 800;
	font-size: 13px;
	line-height: 22px;
	text-align: center;
}

/* Two-column grids for the trade page lists (instead of a single stacked column) */
.ww-check-list,
.ww-card-list {
	display: grid !important;
	flex-direction: unset;
	grid-template-columns: 1fr 1fr;
	gap: 12px !important;
}
.ww-card-list-3 {
	grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 781px) {
	.ww-check-list,
	.ww-card-list,
	.ww-card-list-3 {
		grid-template-columns: 1fr;
	}
}

/* Simple bullet cards (local approach, site features) */
.ww-card-list {
	list-style: none !important;
	padding-left: 0 !important;
}
.ww-card-list li {
	position: relative;
	background: #fff;
	border-radius: 16px;
	padding: 14px 16px 14px 32px;
	line-height: 1.55;
	box-shadow: 0 3px 0 rgba(25,78,79,0.08);
}
.ww-card-list li::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 19px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--ww-sun);
}

/* Variant with an SEO pill (SEO actions) */
.ww-seo-badge-list li {
	display: block;
	position: relative;
	background: var(--wp--preset--color--ww-mint-100);
	box-shadow: none;
	padding: 12px 18px 12px 62px;
}
.ww-seo-badge-list li::before {
	content: "SEO";
	position: absolute;
	left: 14px;
	top: 12px;
	width: auto;
	height: auto;
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--ww-teal-700);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.04em;
	line-height: 1;
	padding: 5px 9px;
}

/* Boutons de hero (pages metiers) */
.ww-seo-hero .wp-block-buttons {
	margin-top: 8px;
}

/* ===================================================================
   SEO pages: mockup additions (H1 inside the hero, SEO card, approach column,
   callout variants)
   =================================================================== */

/* H1 placed inside the hero (page-no-title template: the template title is hidden) */
.ww-seo-hero h1 {
	margin: 0 0 18px;
	max-width: 16ch;
}
.ww-seo-hero .ww-eyebrow {
	margin-bottom: 10px;
}

/* The callout spans the full column width */

/* White card wrapping the "Optimisation SEO" block */
.ww-seo-card {
	background: #fff;
	border-radius: 20px;
	padding: 30px 32px;
	box-shadow: 0 3px 0 rgba(25, 78, 79, 0.08);
	margin-top: 34px;
}
.ww-seo-card > :first-child {
	margin-top: 0;
}
.ww-seo-card .ww-callout {
	max-width: none;
	margin-bottom: 0 !important;
}
/* Mint callout variant (readable on the white SEO card background) */
.ww-callout-teal {
	background: var(--wp--preset--color--ww-cloud-100) !important;
	border-left-color: var(--wp--preset--color--ww-teal-700) !important;
}

/* Right column of the "Approche locale" section: a single column, tinted cards
   without bullets */
.ww-approach-list {
	grid-template-columns: 1fr !important;
}
.ww-approach-list li {
	background: var(--wp--preset--color--ww-mint-100) !important;
	box-shadow: none !important;
	padding-left: 18px !important;
}
.ww-approach-list li::before {
	display: none !important;
}
.ww-approach-intro {
	font-weight: 700;
	margin-bottom: 12px;
}

/* ===================================================================
   SEO pages: fine alignment with the mockup (softer type, ring bullets, orange SEO
   pills, brand links)
   =================================================================== */

/* List items: smaller type, same weight and colours as the rest of the site (no
   SEO-page-specific tint). align-content centres the text when the card is
   stretched by its row. */
.ww-check-list li,
.ww-card-list li {
	font-size: 15px;
	line-height: 1.5;
	border-radius: 12px;
	align-content: center;
}

/* Teal ring checkmark on a mint card, vertically centred */
.ww-check-list li {
	background: var(--wp--preset--color--ww-mint-100);
	padding: 13px 18px 13px 46px;
}
.ww-check-list li::before {
	content: "\2713";
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--ww-teal-500);
	color: var(--wp--preset--color--ww-teal-500);
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
}

/* "Features" cards: vertically centred bullet */
.ww-card-list li {
	padding: 13px 16px 13px 30px;
	box-shadow: 0 2px 0 rgba(25, 78, 79, 0.06);
}
.ww-card-list li::before {
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
}

/* Breathing room around intermediate headings */
.ww-seo-section h3 {
	margin-top: 34px;
	margin-bottom: 16px;
}
.ww-seo-card h3 {
	margin-top: 0;
}
.ww-seo-card h4 {
	margin-top: 24px;
	margin-bottom: 12px;
}

/* SEO actions: plain rows with an orange pill, no card */
.ww-seo-badge-list {
	gap: 12px 30px !important;
}
.ww-seo-badge-list li {
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0;
	padding: 4px 0 4px 52px;
	font-size: 15px;
}
.ww-seo-badge-list li::before {
	content: "SEO";
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: auto;
	height: auto;
	background: var(--wp--preset--color--ww-peach-100);
	color: var(--wp--preset--color--custom-biche-orange);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1;
	padding: 5px 8px;
	border-radius: 999px;
}

/* Inline links: orange, bold, underlined (brand) - buttons excluded */
.ww-seo-section :where(p, li) a {
	color: var(--wp--preset--color--custom-biche-orange);
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Callouts: text at the same scale as the cards */
.ww-callout p {
	font-size: 15px;
}
.ww-seo-card .ww-callout {
	background: var(--wp--preset--color--ww-teal-050) !important;
}

/* "Approche" column */
.ww-approach-list li {
	font-size: 15px;
}
.ww-approach-intro {
	font-size: 15px;
}

/* Neutralising Ollie's rules (assets/styles/core-list.css):
     .entry-content :not(.wp-block-group) > li:first-child { padding-top: 0 }
     .entry-content :not(.wp-block-group) li:last-child   { padding-bottom: 0 }
   They wiped the vertical padding of the first and last item and therefore broke
   the vertical centring of the cards. The padding is restored with a higher
   specificity (the list class adds to the :not()). */
.entry-content :not(.wp-block-group).ww-check-list > li:first-child,
.entry-content :not(.wp-block-group).ww-check-list li:last-child,
.entry-content :not(.wp-block-group).ww-card-list > li:first-child,
.entry-content :not(.wp-block-group).ww-card-list li:last-child {
	padding-top: 13px;
	padding-bottom: 13px;
}
.entry-content :not(.wp-block-group).ww-seo-badge-list > li:first-child,
.entry-content :not(.wp-block-group).ww-seo-badge-list li:last-child {
	padding-top: 4px;
	padding-bottom: 4px;
}

/* ===================================================================
   Charte Ciel Ouvert : corrections d'audit (06/08/2026)
   =================================================================== */

/*


/* Section illustrations (mascot): capped so the drawing never dwarfs the text,
   and dropped below the copy on narrow screens. */
.ww-illustration {
	margin: 0 auto;
	max-width: 260px;
}
.ww-illustration img {
	width: 100%;
	height: auto;
}
@media (max-width: 781px) {
	.ww-illustration {
		max-width: 180px;
	}
}


/* SEO card with the mascot illustration alongside its own text, inside the
   white card (it used to sit outside, in its own column on the section's
   bare gradient background -- looked disconnected and broke the section's
   rhythm). */
.ww-seo-card-media {
	gap: 24px !important;
	align-items: flex-start !important;
}
.ww-seo-card-media .ww-illustration {
	margin: 0;
	max-width: 170px;
}
@media (max-width: 781px) {
	.ww-seo-card-media {
		flex-wrap: wrap;
	}
	.ww-seo-card-media .ww-illustration {
		max-width: 130px;
		margin: 0 auto;
	}
}


/* "Mon offre" list items were white cards on the section's own white/base
   background -- too little contrast, only distinguished by a faint shadow.
   Switched to the palette's light-blue token (ww-sky-200), already declared
   in theme.json but not yet used elsewhere. */
.ww-card-list li {
	background: var(--wp--preset--color--ww-sky-200) !important;
}


/* Updated design direction: remove the white rounded card frame around the
   SEO section content, and make the "Vous voulez voir" note blend into the
   page instead of sitting in its own tinted rounded box. */
.ww-seo-card {
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin-top: 0 !important;
}
.ww-seo-note {
	background: transparent !important;
	border-radius: 0 !important;
}