/*
 * blocks/diagonal-statement.css — bande diagonale, silhouette de page distinctive.
 * Complète guest.css, ne redéfinit aucune primitive existante.
 */

.diagonal-statement { padding-block: 0; }
.diagonal-statement__band {
	clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%);
	padding-block: var(--s20);
	padding-inline: var(--s10);
}
/* Motif SVG discret sur fond uni — règle standing : jamais de fond vert/noir
   plat, toujours un motif en arrière-plan pour casser la monotonie. */
.diagonal-statement__band--teal {
	background-color: var(--teal);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.12' stroke-width='1.4'%3E%3Cpath d='M-10 30 C 20 10, 40 50, 70 30 S 110 10, 140 30'/%3E%3Cpath d='M-10 70 C 20 50, 40 90, 70 70 S 110 50, 140 70'/%3E%3Cpath d='M-10 110 C 20 90, 40 130, 70 110 S 110 90, 140 110'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 120px 120px;
}
.diagonal-statement__band--dark {
	background-color: #101713;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ccircle cx='2' cy='2' r='2' fill='%23ffffff' fill-opacity='0.12'/%3E%3C/svg%3E");
}
.diagonal-statement__band--flat { clip-path: none; border-radius: var(--radius-lg); }
.diagonal-statement__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.diagonal-statement__text {
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	font-weight: 700;
	line-height: 1.35;
	color: #fff;
	margin-top: var(--s6);
	margin-bottom: var(--s3);
}
.diagonal-statement__desc {
	color: rgba(255,255,255,.85);
	margin-bottom: var(--s8);
}
.diagonal-statement__text + .btn { margin-top: var(--s5); }

@media (max-width: 900px) {
	.diagonal-statement__band { clip-path: polygon(0 6%, 100% 0%, 100% 100%, 0% 100%); padding-block: var(--s20); padding-inline: var(--s8); }
}

@media (max-width: 480px) {
	.diagonal-statement__band { clip-path: polygon(0 3%, 100% 0%, 100% 100%, 0% 100%); padding-block: var(--s16); padding-inline: var(--s6); }
}