/* ALP — Pros / Cons Block CSS
   - Legacy markup: .wp-block-ugb-icon-list (Stackable v2 leftovers, 91 articles)
   - Modern markup: core/list with .is-style-pros / .is-style-cons (Block Styles)
   - Pattern wrapper: .alp-pros-cons-wrap on a core/columns block

   The same SVG icons are used everywhere so legacy and modern blocks render
   identically. Inline data-URI keeps the CSS self-contained and avoids HTTP
   round-trips for two tiny SVGs.
*/

:root {
	--alp-pros-color: #00d084;
	--alp-cons-color: #cf2e2e;
	--alp-pros-cons-bg: #EFF7FB;
	--alp-pros-cons-radius: 20px;
	--alp-pros-cons-padding: 30px;
}

/* SVG icons — same shapes as the legacy Stackable v2 inline base64 SVGs,
   recolored with our brand-friendly tokens. */
.wp-block-list.is-style-pros li::before,
.wp-block-ugb-icon-list.ugb-icon--icon-check li::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 194 194'><path d='M96.9 2c-52.4 0-95 42.6-95 95s42.6 95 95 95 95-42.6 95-95-42.6-95-95-95zM76.6 144.7l-36.5-36.5 10.6-10.6 25.9 25.9 68.8-68.8L156 65.3l-79.4 79.4z' fill='%2300d084'/></svg>");
}

.wp-block-list.is-style-cons li::before,
.wp-block-ugb-icon-list.ugb-icon--icon-cross li::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 194 194'><path d='M96.9 2c-52.4 0-95 42.6-95 95s42.6 95 95 95 95-42.6 95-95-42.6-95-95-95zm47.4 131.5l-10.6 10.6-36.5-36.5-36.5 36.5-10.6-10.6L86.6 97 50.1 60.5l10.6-10.6 36.5 36.5 36.5-36.5 10.6 10.6L107.8 97l36.5 36.5z' fill='%23cf2e2e'/></svg>");
}

/* === Shared list layout =====================================================
   Same rules apply to both legacy `.wp-block-ugb-icon-list ul li` and modern
   `.wp-block-list.is-style-pros li` / `.is-style-cons li`. We use position:absolute
   on the bullet so the inline content of each <li> — typically
   `<strong>title</strong> : long description...` — keeps flowing naturally
   on multiple lines (a flex layout would split strong/text into separate
   flex items and break that pattern).
*/

/* The theme has a high-specificity rule
   `.single #wrap .entry-content>ul:not([style="list-style-type: none;"])>li{list-style:disc}`
   that wins over a vanilla `.wp-block-list.is-style-pros li`. We use
   !important on list-style to make sure the custom bullets aren't paired
   with native disc markers, regardless of where the block is rendered. */

.wp-block-ugb-icon-list ul,
.wp-block-list.is-style-pros,
.wp-block-list.is-style-cons {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.wp-block-ugb-icon-list ul li,
.wp-block-list.is-style-pros li,
.wp-block-list.is-style-cons li {
	list-style: none !important;
	margin: 0 0 12px 0;
	padding: 0 0 0 32px;
	position: relative;
	font-family: "Roboto", Arial, sans-serif;
	line-height: 1.5;
}

.wp-block-ugb-icon-list ul li:last-child,
.wp-block-list.is-style-pros li:last-child,
.wp-block-list.is-style-cons li:last-child {
	margin-bottom: 0;
}

.wp-block-ugb-icon-list ul li::before,
.wp-block-list.is-style-pros li::before,
.wp-block-list.is-style-cons li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 20px;
	height: 20px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Nested lists — preserve indentation, no double bullets. */
.wp-block-ugb-icon-list ul ul,
.wp-block-list.is-style-pros ul,
.wp-block-list.is-style-cons ul {
	margin-top: 8px;
	padding-left: 0;
}

/* === Legacy-only spacing tweak ============================================
   Legacy markup includes a `.ugb-block-content` wrapper around the <ul>;
   add a bit of breathing room between the title and the list. */
.wp-block-ugb-icon-list .ugb-block-content {
	margin-top: 12px;
}

/* === Modern pattern wrapper ===============================================
   `.alp-pros-cons-wrap` is the className on the core/columns block produced
   by the « Points forts / Points faibles » pattern. We give it the same
   blue background, radius and padding the legacy theme rule applied to
   .ugb-icon-list, so the pattern visually matches the existing reviews. */
.wp-block-columns.alp-pros-cons-wrap {
	background-color: var(--alp-pros-cons-bg);
	border-radius: var(--alp-pros-cons-radius);
	padding: var(--alp-pros-cons-padding);
	font-family: "Neris", sans-serif;
	margin-bottom: 1.5em;
}

.wp-block-columns.alp-pros-cons-wrap .alp-pros-cons-title {
	margin: 0 0 12px 0;
	font-family: "Neris", sans-serif;
	font-weight: 700;
}

/* On narrow viewports core/columns already stacks the columns, so the
   only thing left to ensure is that the inner padding stays comfortable. */
@media (max-width: 600px) {
	.wp-block-columns.alp-pros-cons-wrap {
		padding: 20px;
	}
}

/* === Note complément (orange call-out) =====================================
   The theme already styles `#bg-orange` for the same visual. We mirror it on
   our block-style class so editors don't need to set an HTML id and so the
   markup stays valid when several call-outs appear on the same page. */
.wp-block-group.is-style-note-complement,
.wp-block-group.alp-note-complement {
	background-color: #f8eee2;
	background-image: url("/wp-content/themes/apprendrelaphoto/assets/img/fond.svg");
	background-repeat: no-repeat;
	background-size: 20%;
	background-position: 100% 0;
	padding: 30px 100px 30px 30px;
	font-family: "Neris", sans-serif;
	border-radius: 20px;
	margin-bottom: 1.5em;
}

.wp-block-group.is-style-note-complement strong,
.wp-block-group.alp-note-complement strong {
	font-weight: 900;
}

@media screen and (max-width: 768px) {
	.wp-block-group.is-style-note-complement,
	.wp-block-group.alp-note-complement {
		padding: 2rem;
		background-size: 30%;
	}
}