/* ==========================================================================
   Grille de services
   Mêmes jetons que les autres sections : rayon 20px, ombre douce, titres en 800.
   Préfixe .crd- partout.
   ========================================================================== */

.crd {
	--crd-red: #E80000;
	--crd-ink: #0B0D14;
	--crd-text: #404452;
	--crd-bg: #FBFAFB;
	--crd-line: #E9E7EA;
	--crd-icon-bg: #E80000;
	--crd-icon-ink: #FFFFFF;
	--crd-radius: 20px;
	--crd-ratio: 16 / 10;
	--crd-fit: cover;
	--crd-max: 1800px;
	--crd-shadow: 0 14px 44px rgba(19, 21, 34, .06);

	position: relative;
	background: var(--crd-bg);
	padding: clamp(40px, 5vw, 76px) clamp(16px, 3.5vw, 56px) clamp(46px, 5.5vw, 84px);
	color: var(--crd-text);
}

.crd *,
.crd *::before,
.crd *::after { box-sizing: border-box; }

.crd-inner {
	max-width: var(--crd-max);
	margin: 0 auto;
}

/* Le thème pose marges et rembourrage sur les <p> et les titres : on les
   annule là où ça compte, sans toucher au reste de la page. */
.crd .crd-inner .crd-intro,
.crd .crd-inner .crd-title,
.crd .crd-inner .crd-price,
.crd .crd-inner .crd-link {
	margin: 0;
	padding: 0 !important;
}

.crd .crd-inner .crd-intro .crd-em {
	color: var(--crd-red);
}

/* Mêmes valeurs que le titre de « Comment ça fonctionne » : 40px, graisse 800,
   même interlettrage. Les deux sections portent ainsi le même niveau de titre. */
.crd .crd-inner .crd-intro {
	max-width: 24ch;
	margin: 0 auto clamp(30px, 3.2vw, 48px);
	text-align: center;
	color: var(--crd-ink);
	font-size: 40px;
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.025em;
	text-transform: none;
}

/* --------------------------------------------------------------------------
   Grille
   -------------------------------------------------------------------------- */

/* La grille et les cartes sont des <ul>/<li> : les thèmes leur posent un
   retrait à gauche pour les puces, ce qui décalait le contenu et laissait
   apparaître le fond de la carte sur le côté. */
.crd .crd-inner .crd-grid,
.crd .crd-inner .crd-card {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	text-indent: 0;
}

.crd .crd-inner .crd-card::marker { content: none; }

.crd .crd-inner .crd-card::before {
	content: none !important;
	display: none !important;
}

.crd-grid {
	display: grid;
	grid-template-columns: repeat(var(--crd-cols, 4), minmax(0, 1fr));
	gap: clamp(18px, 1.6vw, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.crd-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--crd-radius);
	overflow: hidden;
	box-shadow: var(--crd-shadow);
	transition: transform .18s ease, box-shadow .18s ease;
}

.crd-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 52px rgba(19, 21, 34, .1);
}

/* --------------------------------------------------------------------------
   Visuel et pastille
   -------------------------------------------------------------------------- */

.crd-media {
	position: relative;
	aspect-ratio: var(--crd-ratio);
	background: #EFEDF1;
}

/* Les min-width et min-height résistent aux « img { width: auto } » et
   « img { height: auto } » que déclarent presque tous les thèmes. Sur une
   image, qui est un élément remplacé, « auto » vaut la dimension d'origine :
   la photo garde alors ses proportions et laisse une bande vide sur un côté.
   Une dimension minimale, elle, l'emporte sur une dimension automatique. */
.crd .crd-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	max-width: none;
	max-height: none;
	object-fit: var(--crd-fit);
	object-position: var(--crd-image-pos, 50% 50%);
	display: block;
}

/* La pastille chevauche le bas du visuel, comme dans les autres sections */
.crd-icon {
	position: absolute;
	left: 22px;
	bottom: -26px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: var(--crd-icon-bg);
	color: var(--crd-icon-ink);
	border-radius: 50%;
	box-shadow: 0 8px 18px rgba(11, 13, 20, .18);
}

.crd-icon svg { width: 24px; height: 24px; display: block; }

/* Font Awesome pose « vertical-align: -.125em » sur ses icônes, ce qui les
   décale vers le bas dans un contexte en ligne. En passant la balise en bloc,
   ce décalage disparaît et le centrage du conteneur flex reprend la main. */
.crd-icon i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 21px;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   Contenu
   -------------------------------------------------------------------------- */

.crd .crd-inner .crd-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 38px 22px 20px;
}

.crd .crd-inner .crd-title {
	color: var(--crd-ink);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.01em;
}

.crd .crd-inner .crd-price {
	margin-top: 7px;
	color: var(--crd-red);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}

.crd-rule {
	display: block;
	height: 1px;
	margin: 16px 0 14px;
	background: var(--crd-line);
}

.crd-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: auto;
	color: var(--crd-text);
	font-size: 15px;
	line-height: 1.3;
	text-decoration: none;
}

.crd-link-arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	color: var(--crd-red);
	transition: transform .18s ease;
}

.crd-link-arrow svg { width: 20px; height: 20px; display: block; }
.crd-link-arrow i { font-size: 17px; line-height: 1; }

.crd-card:hover .crd-link-arrow { transform: translateX(4px); }
.crd-card:hover .crd-link { color: var(--crd-ink); }

/* --------------------------------------------------------------------------
   Adaptatif
   -------------------------------------------------------------------------- */

@media (max-width: 1400px) {
	.crd-grid { grid-template-columns: repeat(min(var(--crd-cols, 4), 3), minmax(0, 1fr)); }
}

@media (max-width: 980px) {
	.crd-grid { grid-template-columns: repeat(min(var(--crd-cols, 4), 2), minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.crd-grid { grid-template-columns: minmax(0, 1fr); }
	.crd .crd-inner .crd-intro { font-size: 30px; }
	.crd-media { aspect-ratio: 16 / 9; }
}