/*
 * pillars/reperes — la bande de reperes de Chez Loeli : colonnes d'icones separees de
 * filets. 1 colonne (filet entre chaque), 2 colonnes des 720 px, 4 des 1020 px.
 * Engagement 5 : aucun hexadecimal. Le trace des icones : `.ivy-in` (data-ivy-in).
 */
.ivy-pillars--reperes { padding-block: clamp( 20px, 3vw, 36px ); background-image: var( --ivy-grain, none ); }
.ivy-pillars--reperes .ivy-pillars__inner { width: min( 100% - 2 * clamp( 20px, 5vw, 56px ), 1200px ); margin-inline: auto; }
.ivy-pillars--reperes .ivy-pillars__list { display: grid; margin: 0; padding: 0; list-style: none; }
.ivy-pillars--reperes .ivy-pillars__item {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 12px;
	padding: 26px 16px;
	text-align: center;
	font-weight: 500;
	line-height: 1.35;
}
.ivy-pillars--reperes .ivy-pillars__icon { display: block; width: 40px; height: 40px; color: var( --ivy-item_icon-color, var( --ivy-ink ) ); }
.ivy-pillars--reperes .ivy-pillars__icon :is( svg, i ) { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; }
.ivy-pillars--reperes .ivy-pillars__name { color: var( --ivy-item_name-color, var( --ivy-ink ) ); font-size: var( --ivy-font-body ); line-height: 1.35; }
.ivy-pillars--reperes .ivy-pillars__item:not( :first-child ) { border-block-start: 1px solid var( --ivy-line ); }
@media ( min-width: 720px ) {
	.ivy-pillars--reperes .ivy-pillars__list { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.ivy-pillars--reperes .ivy-pillars__item:not( :first-child ) { border-block-start: 0; }
	.ivy-pillars--reperes .ivy-pillars__item:nth-child( even ) { border-inline-start: 1px solid var( --ivy-line ); }
	.ivy-pillars--reperes .ivy-pillars__item:nth-child( n + 3 ) { border-block-start: 1px solid var( --ivy-line ); }
}
@media ( min-width: 1020px ) {
	.ivy-pillars--reperes .ivy-pillars__list { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
	.ivy-pillars--reperes .ivy-pillars__item:nth-child( n + 3 ) { border-block-start: 0; }
	.ivy-pillars--reperes .ivy-pillars__item:not( :first-child ) { border-inline-start: 1px solid var( --ivy-line ); }
}

/* Les icones se dessinent l'une apres l'autre ; sans mouvement, elles sont tracees d'emblee. */
@media ( prefers-reduced-motion: no-preference ) {
	.ivy-motion-ready .ivy-pillars--reperes [data-ivy-in="draw"] svg path {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
		transition: stroke-dashoffset 1.3s cubic-bezier( .65, 0, .35, 1 ) calc( var( --ivy-rank, 0 ) * 160ms );
	}
	.ivy-motion-ready .ivy-pillars--reperes [data-ivy-in="draw"].ivy-in svg path { stroke-dashoffset: 0; }
}