/* Grids */
.cartes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.5rem;
}

/* Cards */
.carte {
	position: relative; /* important */
	background: var(--blanc);
	border-radius: 8px;
	padding: 1.5rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
	.carte img {		
		margin-bottom: 0.7rem;
		margin-right: 1rem;
	}

	.carte h3 {
		color: var(--bleu-fonce);
		text-align: left;
		padding-bottom: 0.5rem;
	}

	.carte h4 {
		margin: 0 0 0.2rem 0;
		font-size: 0.9rem;
		color: var(--gris-fonce);
	}

	.carte ul {
		margin: 0;
	}

	.carte li {
		color: var(--gris-fonce);
		font-weight: 500;
	}

.carteLien {
	position: relative; /* important */
	background: var(--blanc);
	border-radius: 8px;
	padding: 1.5rem 1.5rem 2.3rem 1.5rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

	.carteLien img {
		margin-bottom: 1rem;
	}

	.carteLien h3 {
		color: var(--bleu-fonce);
		text-align: left;
		padding-bottom: 0.5rem;
	}

	.carteLien h4 {
		margin:0 0 0.2rem 0;
		font-size: 0.9rem;
		color: var(--gris-fonce);
	}

	.carteLien ul {
		margin: 0;
	}

	.carteLien li {
		color: var(--gris-fonce);
		font-weight: 500;
	}

.carteMenu {
	position: relative; /* important */
	background: var(--fond-footer);
	color: var(--gris-clair);
	font-size: 0.9rem;
	border-radius: 8px;
	padding: 0.5rem 1.5rem 0.5rem 1.5rem;
	/*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);*/
}

.carteIcone {
	position: relative; /* important */
	background: var(--blanc);
	border-radius: 10px;
	padding: 1.5rem 1.5rem 0.5rem 1.5rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	/* Elements pour avoir le texte à côté de l'icone */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 12px;
}

	.carteIcone h3 {
		margin-top: 0;
		margin-bottom: 0;
		color: var(--bleu-fonce);
		line-height: 1.5;
		/* Elements pour avoir le texte à côté de l'icone */
		flex: 1;
		min-width: 0; /* ← permet au h3 de rétrécir si besoin */
		margin: 0;
		text-align: left;
	}

	.carteIcone p {
		color: #1e293b;
		/* interligne */
		line-height: 1.4;
	}

.carteImage {
	position: relative; /* important */
	background: var(--blanc);
	border-radius: 8px;
	padding: 1.5rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: row;
	gap: 20px;
	align-items: flex-start;
}

	.carteImage img {
		flex-shrink: 0; /* L'image ne se rétrécit pas */
	}

	.carteImage h3 {
		color: var(--bleu-fonce);
		text-align: left;
		padding-bottom: 0.5rem;
	}

.carteImage-contenu {
	display: flex;
	flex-direction: column; /*Empile les éléments verticalement */
	align-items: start;
}

.carteSansBord {
	position: relative; /* important */
	border-radius: 8px;
	padding: 1.5rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

	.carteSansBord h3 {
		margin-top: 0;
		margin-bottom: 1rem;
		color: var(--blanc);
		line-height: 1.5;
		text-align: left;
	}

	.carteSansBord p {
		margin-top: 0;
		margin-bottom: 0;
		color: var(--gris-moyen);
		line-height: 1.5;
	}

.carte .icon {
	flex-shrink: 0;
}

.icon {
	width: 40px;
	height: 40px;
	display: inline-block;
	background-size: contain; /* optionnel, pour que l'image s'adapte */
	background-repeat: no-repeat; /* pour éviter les répétitions */
	background-position: center; /* centrer l'image */
	padding-bottom: 1rem;
}

.icon-dev-sur-mesure {
	background-image: url('../images/code-outline.svg');
}

.icon-conseil {
	background-image: url('../images/icon-conseil.svg');
}

.icon-integration-solutions {
	background-image: url('../images/fullscreen-exit-outline.svg');
}

.icon-maintenance {
	background-image: url('../images/icon-maintenance.svg');
}

.icon-approche-pragmatique {
	background-image: url('../images/icon-approche-pragmatique.svg');
}

.icon-user-outline {
	background-image: url('../images/icon-user-outline.svg');
}

.icon-clock-outline {
	background-image: url('../images/clock-outline.svg');
}

.icon-chart-up-outline {
	background-image: url('../images/chart-up-outline.svg');
}

.icon-lock-outline {
	background-image: url('../images/lock-outline.svg');
}

.carte-link {
	position: absolute;
	bottom: 1rem;
	right: 2rem;
	font-size: 0.9rem;
	text-decoration: none;
	font-weight: bold;
}
/*	Mode mobile */
@media (max-width: 768px) {
	.carteImage {
		position: relative; /* important */
		background: var(--blanc);
		border-radius: 8px;
		padding: 1.5rem;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
		display: flex;
		flex-direction: column;
		gap: 20px;
		align-items: flex-start;
	}

	.photo_portrait {
		width: 5rem;
	}
}