.ri-grille-dispositifs {
	width: 100%;
	padding-block: var(--ri-block-padding-xl);
	background-color: var(--ri-color-grey-soft);
}

.post-type-archive-dispositifs .ri-grille-dispositifs {
	padding-block: 0 var(--ri-block-padding-xl);
}

/* ========================================
   Titre
   ======================================== */

.ri-grille-dispositifs .titre {
	margin: 0 0 34px;
	font: 700 var(--ri-size-title-h2) / 1.2 var(--ri-font-1);
}

/* ========================================
   Grille 2 colonnes
   ======================================== */

.ri-grille-dispositifs .grille {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 80px;
}

/* ========================================
   Carte
   ======================================== */

.ri-grille-dispositifs .carte {
	display: flex;
	flex-direction: column;
	gap: var(--ri-space-md);
	padding: var(--ri-space-md);
	background-color: var(--ri-color-white);
	outline: 1px solid var(--ri-color-yellow);
	outline-offset: -1px;
}

.ri-grille-dispositifs .carte--dark {
	background-color: var(--ri-color-violet-dark);
	outline-color: var(--ri-color-violet-dark);
}

.ri-grille-dispositifs .carte--rouge {
	background-color: var(--ri-color-open-inno);
	outline-color: var(--ri-color-yellow);
}

/* Logo */

.ri-grille-dispositifs .carte-logo img {
	display: block;
	width: auto;
	height: 122px;
	object-fit: contain;
	object-position: left center;
}

/* Corps */

.ri-grille-dispositifs .carte-body {
	display: flex;
	flex-direction: column;
	gap: var(--ri-space-md);
}

.ri-grille-dispositifs .carte-nom {
	margin: 0;
	font: 700 var(--ri-size-title-h2) / 1.4 var(--ri-font-1);
}

.ri-grille-dispositifs .carte--dark .carte-nom,
.ri-grille-dispositifs .carte--rouge .carte-nom {
	color: var(--ri-color-yellow);
}

.ri-grille-dispositifs .carte-description {
	margin: 0;
	font: 500 var(--ri-size-text-body-xl) / 1.5 var(--ri-font-1);
	color: var(--ri-color-teal);
}

.ri-grille-dispositifs .carte--dark .carte-description,
.ri-grille-dispositifs .carte--rouge .carte-description {
	color: var(--ri-color-white);
}

/* Liste */

.ri-grille-dispositifs .carte-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ri-grille-dispositifs .carte-liste li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font: 400 var(--ri-size-text-body) / 1.7 var(--ri-font-1);
	text-transform: uppercase;
}

.ri-grille-dispositifs .carte--dark .carte-liste li,
.ri-grille-dispositifs .carte--rouge .carte-liste li {
	color: var(--ri-color-white);
}

.ri-grille-dispositifs .carte-liste li::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	margin-top: 0.45em;
	background-color: var(--ri-color-yellow);
}

/* Lien */

.ri-grille-dispositifs .carte-link-wrapper {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: auto;
	padding-top: var(--ri-space-sm);
	height: 47px;
}

.ri-grille-dispositifs .carte-link-arrow {
	font: 700 var(--ri-size-text-body-sm) / 1 var(--ri-font-1);
	color: var(--ri-color-yellow);
}

.ri-grille-dispositifs .carte-link {
	font: 700 var(--ri-size-text-body-sm) / 1 var(--ri-font-1);
	color: var(--ri-color-yellow);
	text-decoration: underline;
	text-decoration-color: var(--ri-color-yellow);
	text-decoration-thickness: 2px;
	text-underline-offset: 25%;
	transition: text-decoration-color var(--ri-transition-base);
}

.ri-grille-dispositifs .carte-link:hover {
	text-decoration-color: transparent;
}

/* ========================================
   Placeholder
   ======================================== */

.ri-grille-dispositifs.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	padding: var(--ri-space-lg);
	background-color: var(--ri-color-grey-soft);
	border: 2px dashed var(--ri-color-teal);
	text-align: center;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 782px) {

	.ri-grille-dispositifs .grille {
		gap: var(--ri-space-md);
		grid-template-columns: 1fr;
	}

	.ri-grille-dispositifs .carte-logo img {
		height: 80px;
	}

	.ri-grille-dispositifs .titre {
		margin: 0 0 24px;
	}
}