/* Section « Une gestion locative saisonnière structurée » */
.piliers__grid {
	display: grid;
	gap: 24px;
	max-width: 1000px;
	margin: clamp(32px, 4vw, 48px) auto 0;
}

.piliers__list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.piliers__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--c-white);
	font-size: 0.875rem;
	color: var(--c-text);
	transition: background-color .25s var(--ease), color .25s var(--ease);
}

.piliers__body strong {
	display: block;
	margin-bottom: 2px;
	font-size: 1rem;
	font-weight: 400;
	color: var(--c-dark);
	transition: color .25s var(--ease);
}

.piliers__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #f3f1ec;
	color: var(--c-dark);
	transition: background-color .25s var(--ease), color .25s var(--ease);
}

.piliers__icon .icon {
	width: 18px;
	height: 18px;
}

/* Le premier pilier est mis en avant ; les autres s'assombrissent au survol. */
.piliers__item:first-child,
.piliers__item:hover {
	background: var(--c-dark);
	color: rgba(255, 255, 255, .85);
}

.piliers__item:first-child strong,
.piliers__item:hover strong {
	color: var(--c-white);
}

.piliers__item:first-child .piliers__icon,
.piliers__item:hover .piliers__icon {
	background: rgba(255, 255, 255, .12);
	color: var(--c-gold);
}

.piliers__list:hover .piliers__item:first-child:not(:hover) {
	background: var(--c-white);
	color: var(--c-text);
}

.piliers__list:hover .piliers__item:first-child:not(:hover) strong {
	color: var(--c-dark);
}

.piliers__list:hover .piliers__item:first-child:not(:hover) .piliers__icon {
	background: #f3f1ec;
	color: var(--c-dark);
}

.piliers__image {
	overflow: hidden;
	min-height: 320px;
	border-radius: 10px;
}

.piliers__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 900px) {
	.piliers__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}