/* Fiches de réalisation : le projet en 4 points, le site en images, système design, mentions sur les cartes. */

.li-section .li-fiche-points {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--li-e3);
}

@media (max-width: 781px) {
	.li-section .li-fiche-points {
		grid-template-columns: 1fr;
	}
}

.li-fiche-point {
	position: relative;
	padding-top: calc(var(--li-e3) + 44px) !important;
	--li-icone: none;
}

.li-fiche-point::before {
	content: "";
	position: absolute;
	top: var(--li-e3);
	left: var(--li-e3);
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgb(120 38 255 / 18%) var(--li-icone) center / 20px no-repeat;
}

.li-point-contexte {
	--li-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9b3ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.li-point-objectif {
	--li-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9b3ff' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
}

.li-point-solution {
	--li-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9b3ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}

.li-point-strategie {
	--li-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9b3ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpath d='M16 7h6v6'/%3E%3C/svg%3E");
}

.li-fiche-point h3 {
	margin: 0 0 var(--li-e1);
	font-size: 1.15rem;
}

.li-fiche-point p {
	margin: 0;
}

.li-fiche-point ul {
	margin: var(--li-e2) 0 0;
}

.li-fiche-point li {
	margin-bottom: 6px;
}

.li-fiche-avis {
	margin-top: var(--li-e4) !important;
	max-width: 760px;
}

/* Le site en images. */
.li-fiche-captures {
	gap: var(--li-e3);
}

.li-fiche-capture {
	margin: 0;
}

.li-fiche-capture img {
	border: 1px solid var(--li-trait);
	border-radius: var(--li-rayon-s);
}

.li-fiche-capture figcaption {
	margin-top: var(--li-e1);
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--discret);
	text-align: left;
}

/* Système design. */
.li-design {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--li-e3) var(--li-e4);
	align-items: start;
	padding: var(--li-e4);
	background: var(--li-surface);
	border: 1px solid var(--li-trait);
	border-radius: var(--li-rayon);
}

.li-design-logo {
	grid-row: 1 / span 3;
	display: grid;
	place-items: center;
	width: 200px;
	min-height: 120px;
	padding: var(--li-e2);
	border-radius: var(--li-rayon-s);
	background: #fff;
}

.li-design-logo img {
	width: auto;
	height: auto;
	max-width: 160px;
	max-height: 90px;
}

.li-design-bloc {
	grid-column: 2;
}

.li-design-logo + .li-design-bloc,
.li-design > .li-design-bloc:first-child {
	grid-column: auto;
}

.li-design:not(:has(.li-design-logo)) {
	grid-template-columns: 1fr;
}

.li-design:not(:has(.li-design-logo)) .li-design-bloc {
	grid-column: 1;
}

.li-design-libelle {
	margin: 0 0 8px;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--discret);
}

.li-design-couleurs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--li-e2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.li-design-couleurs li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.li-design-pastille {
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 50%;
	background: var(--c);
	border: 1px solid rgb(255 255 255 / 25%);
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 15%);
}

.li-design-couleurs code {
	padding: 0;
	background: none;
	font-size: 0.8rem;
	color: var(--wp--preset--color--discret);
}

.li-design-polices {
	margin: 0;
}

.li-design-polices strong {
	color: var(--wp--preset--color--blanc);
}

.li-design-fonctions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.li-design-fonctions li {
	margin: 0;
	padding: 4px 12px;
	border: 1px solid var(--li-trait);
	border-radius: 999px;
	font-size: 0.9rem;
}

@media (max-width: 600px) {
	.li-design {
		grid-template-columns: 1fr;
	}

	.li-design-logo {
		grid-row: auto;
		width: 100%;
	}

	.li-design-bloc {
		grid-column: 1;
	}
}

/* Mention « Projet de l'agence », « Site bénévole », « Projet personnel » : carte et page du projet. */
.li-badge-mention {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 10px;
	border: 1px solid var(--li-trait);
	border-radius: 999px;
	color: var(--wp--preset--color--discret);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	vertical-align: middle;
	white-space: nowrap;
}

.li-en-cours .li-badge-mention {
	margin: 0 8px 0 0;
}