/*
 * blocks/principles-dark.css — 3 colonnes icône fond dark, liseré animé.
 * Complète guest.css, ne redéfinit aucune primitive existante.
 */

.principles-section { position: relative; overflow: hidden; }
.principles-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%23ffffff' fill-opacity='.08'%3E%3Ccircle cx='2' cy='2' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 20px 20px;
	pointer-events: none;
}
.principles-section .container { position: relative; z-index: 1; }

.principles-section--photo { background-size: cover; background-position: center; background-repeat: no-repeat; }
.principles-section--photo::before {
	background-image: none;
	background: linear-gradient(160deg, rgba(16,23,19,.92), rgba(16,23,19,.75));
}

.icon-col-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s10);
	margin-top: var(--s14);
}
.icon-col {
	position: relative;
	text-align: center;
	min-height: 340px;
	padding: var(--s12) var(--s6);
	border-radius: var(--radius-lg);
	background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.1), transparent 65%), linear-gradient(160deg, rgba(58,58,58,0.1), rgba(16,23,19,.2));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.icon-col::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(160deg, rgba(58,58,58,.9), rgba(16,23,19,.35));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}
.icon-col::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: conic-gradient(from 0deg, transparent 0%, transparent 96%, var(--signal) 98.5%, transparent 100%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	animation: icon-col-border-spin 3.5s linear infinite;
}
.icon-col:nth-child(2)::after { animation-delay: -1.17s; }
.icon-col:nth-child(3)::after { animation-delay: -2.33s; }

@keyframes icon-col-border-spin {
	to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
	.icon-col::after { animation: none; }
}
.icon-col__icon { width: 3rem; height: 3rem; color: #fff; margin-bottom: var(--s5); }
.icon-col h3 { color: #fff; font-size: 1.05rem; }
.icon-col p { margin-top: var(--s3); color: rgba(255,255,255,.72); font-size: .9rem; }

@media (max-width: 760px) {
	.icon-col-grid { grid-template-columns: 1fr; gap: var(--s10); }
}