/* ============================================================
   INFOS GRID  –  [infos_grid]
   Grille de cartes icone + libelle, calquee sur la colonne
   gauche du shortcode [recap_site].
   ============================================================ */

.wc-infos {
	width: 100%;
	box-sizing: border-box;
}

.wc-infos__titre {
	margin: 0 0 var(--s-2xl);
	font-size: var(--fs-h3);
	font-weight: var(--fw-black);
	color: var(--c-brown-700);
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	line-height: var(--lh-tight);
	text-align: center;
}

.wc-infos__grid {
	display: grid;
	gap: var(--s-xl);
	width: 100%;
	/* Toutes les lignes ont la meme hauteur : les cartes restent
	   identiques meme quand elles passent sur plusieurs lignes. */
	grid-auto-rows: 1fr;
}

.wc-infos__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.wc-infos__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.wc-infos__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.wc-infos__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s-md);
	padding: var(--s-xl) var(--s-md);
	border-radius: var(--br-md);
	border: 1.5px solid rgba(89, 42, 22, 0.18);
	background: var(--c-bg-card);
	color: var(--c-brown-700);
	text-decoration: none;
	text-align: center;
	box-sizing: border-box;
	transition: transform var(--tr-base), box-shadow var(--tr-base), border-color var(--tr-base), background-color var(--tr-base);
}

/* Hover applique uniquement aux cartes-liens */
a.wc-infos__card:hover,
a.wc-infos__card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(89, 42, 22, 0.18);
	border-color: var(--c-brown-700);
	outline: none;
}

a.wc-infos__card:focus-visible {
	outline: 2px solid var(--c-brown-700);
	outline-offset: 3px;
}

.wc-infos__card--featured {
	background: var(--c-bg-card-alt);
	border-color: var(--c-brown-700);
	color: var(--c-cream-600);
}

.wc-infos__icon-wrap {
	width: 3.5rem;
	height: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
}

.wc-infos__svg {
	width: 100% !important;
	height: 100% !important;
	display: block;
	fill: none !important;
	stroke: currentColor !important;
}

.wc-infos__libelle {
	font-size: 0.9375rem;
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	line-height: var(--lh-snug);
	color: inherit;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
	.wc-infos__grid--cols-3,
	.wc-infos__grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.wc-infos__grid { gap: var(--s-md); }
}

@media (max-width: 480px) {
	.wc-infos__titre {
		letter-spacing: var(--ls-wide);
	}

	.wc-infos__card {
		padding: var(--s-ld) var(--s-sm);
		gap: var(--s-sm);
	}

	.wc-infos__icon-wrap {
		width: 2.75rem;
		height: 2.75rem;
	}

	.wc-infos__libelle {
		font-size: 0.8125rem;
		letter-spacing: var(--ls-wide);
	}
}

@media (max-width: 360px) {
	.wc-infos__grid--cols-2,
	.wc-infos__grid--cols-3,
	.wc-infos__grid--cols-4 {
		grid-template-columns: 1fr;
	}
}