/* Section « Cartes icône » : fond alterné, 1 colonne, 3 dès 992 px. Présentation « plein-centre » :
   titre et cartes centrés, cercle doré plein. */

.dqb-cartes-icone {
	background: var(--couleur-fond-alterne);
}

.dqb-cartes-icone__corps {
	display: flex;
	flex-direction: column;
	gap: var(--espace-7);
}

.dqb-cartes-icone__entete {
	display: flex;
	flex-direction: column;
	gap: var(--espace-3);
	max-width: var(--largeur-titre);
}

.dqb-cartes-icone__intro {
	color: var(--couleur-texte-intro);
	font-size: var(--taille-intro);
	line-height: var(--interligne-intro);
	text-wrap: pretty;
}

.dqb-cartes-icone__liste {
	--colonnes: 1;
	margin: 0;
	padding: 0;
	list-style: none;

	@media (min-width: 992px) {
		--colonnes: 3;
	}
}

.dqb-cartes-icone__element {
	display: flex;
}

.dqb-cartes-icone__carte {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--espace-4);
	padding: var(--espace-6) var(--espace-5);
	border-radius: var(--rayon-l);
	background: var(--couleur-fond);
	color: var(--couleur-texte-doux);
	font-size: var(--taille-moyenne);
	text-wrap: pretty;
	transition:
		translate var(--duree-normale) var(--courbe),
		box-shadow var(--duree-normale) var(--courbe);
}

.dqb-cartes-icone__icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--taille-cercle);
	height: var(--taille-cercle);
	border: 1px solid var(--couleur-primaire);
	border-radius: var(--rayon-pilule);
	color: var(--couleur-primaire);
}

a.dqb-cartes-icone__carte {
	text-decoration: none;
}

/* Lien d'une carte cliquable, poussé en bas de la carte. */
.dqb-cartes-icone__action {
	display: flex;
	align-items: center;
	gap: var(--espace-2);
	margin-block-start: auto;
	color: var(--couleur-primaire);
	font-weight: var(--graisse-forte);
}

.dqb-cartes-icone__titre {
	color: var(--couleur-texte);
	font-size: var(--taille-h3-carte);
}

/* Présentation « plein-centre » (contact). */
.dqb-cartes-icone[data-presentation="plein-centre"] {
	& .dqb-cartes-icone__entete {
		align-self: center;
		text-align: center;
	}

	& .dqb-cartes-icone__carte {
		align-items: center;
		gap: var(--espace-3);
		text-align: center;
	}

	& .dqb-cartes-icone__icone {
		border: 0;
		background: var(--couleur-primaire);
		color: var(--couleur-sur-primaire);
	}
}

@media (hover: hover) {
	.dqb-cartes-icone__carte:hover {
		translate: 0 var(--soulevement-carte);
		box-shadow: var(--ombre-survol);
	}
}