/**
 * Single Offre — Sections produit
 * CPT nos-offres (offre produit uniquement)
 *
 * Regroupe les styles des trois template parts :
 *   - content-single-offre-avantages.php
 *   - content-single-offre-caracteristiques.php
 *   - content-single-offre-faq.php
 */

/* ============================================================
   AVANTAGES
   ============================================================ */

.ri-offre-avantages {
	padding-block: 0 var(--ri-block-padding-xl);
	background-color: var(--ri-color-white);
}

.ri-offre-avantages .container {
	display: flex;
	flex-direction: column;
	gap: var(--ri-block-padding-xl);
	outline: 1px solid var(--ri-color-grey-mid);
	padding: var(--ri-space-lg);
}

/* En-tête */

.ri-offre-avantages .avantages-header {
	display: flex;
	flex-direction: column;
	gap: var(--ri-space-md);
}

.ri-offre-avantages .avantages-header .titre {
	margin: 0;
	font: 700 var(--ri-size-title-h2) / 1.4 var(--ri-font-1);
	color: var(--ri-color-teal);
}

.ri-offre-avantages .avantages-header .description {
	margin: 0;
	font: 400 var(--ri-size-text-body) / 1.7 var(--ri-font-1);
	color: var(--ri-color-teal);
}

/* Chiffres clés */

.ri-offre-avantages .chiffres {
	display: flex;
	align-items: center;
	gap: var(--ri-space-xl);
}

.ri-offre-avantages .chiffre-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--ri-space-sm);
}

.ri-offre-avantages .chiffre-item .nombre {
	font: 700 80px / 0.8 var(--ri-font-2);
	color: var(--ri-color-teal);
}

.ri-offre-avantages .chiffre-item .label {
	font: 500 20px / 1.2 var(--ri-font-1);
	color: var(--ri-color-teal);
}

/* Séparateurs */

.ri-offre-avantages .separateur {
	display: flex;
	flex-direction: row;
	align-self: stretch;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.ri-offre-avantages .separateur span {
	display: block;
	width: 2.5px;
	height: 96px;
	background-color: var(--ri-color-yellow);
}

/* Responsive */

@media (max-width: 1024px) {

	.ri-offre-avantages .chiffres {
		gap: var(--ri-space-lg);
	}
}

@media (max-width: 782px) {

	.ri-offre-avantages .container {
		padding: 24px 16px;
		gap: var(--ri-space-xl);
	}

	.ri-offre-avantages .chiffres {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.ri-offre-avantages .separateur {
		flex-direction: column;
	}

	.ri-offre-avantages .separateur span {
		width: 100%;
		height: 2.5px;
	}

	.ri-offre-avantages .chiffre-item .nombre {
		font-size: 40px;
	}

	.ri-offre-avantages .chiffre-item .label {
		font-size: 16px;
	}

	.ri-offre-avantages .chiffre-item {
		gap: 12px;
	}
}

/* ============================================================
   CARACTÉRISTIQUES
   ============================================================ */

.ri-offre-caracteristiques {
	padding-block: var(--ri-block-padding-xl);
	margin-block-end: var(--ri-block-padding-xl);
	background-color: var(--ri-color-grey-soft);
}

/* Titre de section */

.ri-offre-caracteristiques .section-titre {
	margin: 0;
	font: 700 var(--ri-size-title-h2) / 1.4 var(--ri-font-1);
	color: var(--ri-color-teal);
}

/* Groupes */

.ri-offre-caracteristiques .container {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.ri-offre-caracteristiques .groupe {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ri-offre-caracteristiques .groupe-label {
	margin: 0;
	font: 500 20px / 1.2 var(--ri-font-1);
	color: var(--ri-color-teal);
}

/* Grille de cartes */

.ri-offre-caracteristiques .cartes {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.ri-offre-caracteristiques .carte {
	flex: 1 1 0;
	min-width: 220px;
	min-height: 350px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	background-color: var(--ri-color-white);
	outline: 1px solid var(--ri-color-grey-mid);
	overflow: hidden;
}

.ri-offre-caracteristiques .carte:hover {
	background-color: var(--ri-color-yellow);
}

.ri-offre-caracteristiques .carte .picto svg path {
	fill: var(--ri-color-grey-mid);
}

.ri-offre-caracteristiques .carte:hover .picto svg path {
	fill: var(--ri-color-white);
}

/* Pictogramme */

.ri-offre-caracteristiques .picto {
	width: auto;
	height: 93px;
	flex-shrink: 0;
}

.ri-offre-caracteristiques .picto-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Corps de la carte */

.ri-offre-caracteristiques .carte-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-self: stretch;
}

.ri-offre-caracteristiques .carte-label {
	font: 400 var(--ri-size-text-body) / 1.7 var(--ri-font-1);
	color: var(--ri-color-teal);
	text-decoration: underline;
	text-decoration-color: var(--ri-color-yellow);
	text-decoration-thickness: 8%;
	text-decoration-skip-ink: auto;
	text-underline-offset: 25%;
	text-underline-position: from-font;
	text-transform: uppercase;
}

.ri-offre-caracteristiques .carte-valeur {
	margin: 0;
	font: 500 var(--ri-size-title-h2) / 1.4 var(--ri-font-1);
	color: var(--ri-color-teal);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	line-clamp: 3;
	overflow: hidden;
}

/* Responsive */

@media (max-width: 1024px) {

	.ri-offre-caracteristiques .carte {
		flex: 1 1 calc(50% - 12px);
	}
}

@media (max-width: 782px) {

	.ri-offre-caracteristiques .picto,
	.ri-offre-caracteristiques .picto svg {
		height: 40px;
	}

	.ri-offre-caracteristiques .picto svg {
		width: auto;
	}

	.ri-offre-caracteristiques .cartes {
		flex-direction: column;
	}

	.ri-offre-caracteristiques .carte {
		flex: none;
		width: 100%;
		min-height: auto;
		padding: 16px;
		gap: 16px;
	}

	.ri-offre-caracteristiques .carte-valeur {
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}
}

/* ============================================================
   FAQ
   ============================================================ */

.ri-offre-faq {
	padding-block: 0 var(--ri-block-padding-xl);
	background-color: var(--ri-color-white);
}

.ri-offre-faq .container {
	display: flex;
	flex-direction: column;
	gap: 40px;
	background-color: var(--ri-color-grey-soft);
	padding: 40px;
}

/* Titre */

.ri-offre-faq .section-titre {
	margin: 0;
	font: 700 var(--ri-size-title-h2) / 1.4 var(--ri-font-1);
	color: var(--ri-color-teal);
}

/* Grille de cartes */

.ri-offre-faq .faq-cartes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	min-height: 350px;
}

.ri-offre-faq .faq-carte {
	min-height: 350px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: var(--ri-color-yellow);
	outline: 1px solid var(--ri-color-grey-mid);
}

/* Textes */

.ri-offre-faq .question {
	margin: 0;
	font: 400 var(--ri-size-text-body) / 1.7 var(--ri-font-1);
	color: var(--ri-color-teal);
}

.ri-offre-faq .reponse {
	margin: 0;
	font: 700 var(--ri-size-text-body) / 1.7 var(--ri-font-1);
	color: var(--ri-color-teal);
}

/* Responsive */

@media (max-width: 1150px) {

	.ri-offre-faq .faq-cartes {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 782px) {

	.ri-offre-faq .ri-container {
		width: 100%;
		max-width: 100%;
	}

	.ri-offre-faq .faq-carte {
		width: 100%;
		min-height: auto;
		padding: 16px;
	}

	.ri-offre-faq .container {
		padding: 24px 32px;
		gap: 24px;
	}
}