/*
 * Section « Bénéfices » — accordéon natif <details>/<summary>.
 * Aucune couleur littérale : uniquement les jetons de shop.css.
 */

.benefices {
	background: var(--fond);
	padding: 48px 0;
}

.benefices__in {
	display: grid;
	gap: 32px;
}

/* Le visuel est carré dans la source : on force le ratio pour éviter
   le saut de mise en page pendant le chargement. */
.benefices__media img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--rayon-carte);
}

.benefices__titre {
	font-family: var(--font-titre);
	font-size: 28px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	margin: 0 0 20px;
}

/* Un filet au-dessus du premier volet ; chacun porte ensuite le sien en bas,
   ce qui garde l'espacement identique quel que soit le nombre d'entrées. */
.benefices__liste {
	border-top: 1px solid var(--ligne);
}

.benefices__item {
	border-bottom: 1px solid var(--ligne);
}

.benefices__entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	cursor: pointer;
	/* Marqueur natif du summary retiré : le « + » maison le remplace. */
	list-style: none;
}

.benefices__entete::-webkit-details-marker { display: none; }

.benefices__entete:focus-visible {
	outline: 2px solid var(--sauge);
	outline-offset: 3px;
}

.benefices__nom {
	font-family: var(--font-titre);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0;
}

/* « + » dessiné en deux barres : la verticale disparaît à l'ouverture,
   il ne reste que la barre horizontale — donc un « − ». */
.benefices__signe {
	position: relative;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

.benefices__signe::before,
.benefices__signe::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 1.5px;
	background: var(--texte);
	transform: translateY(-50%);
	transition: opacity .18s ease, transform .18s ease;
}

.benefices__signe::after { transform: translateY(-50%) rotate(90deg); }

.benefices__item[open] .benefices__signe::after {
	opacity: 0;
	transform: translateY(-50%) rotate(0deg);
}

.benefices__reponse {
	padding: 0 34px 18px 0;
	color: var(--gris);
	font-size: 15px;
	line-height: 1.7;
}

.benefices__reponse p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.benefices__signe::before,
	.benefices__signe::after { transition: none; }
}

@media (min-width: 700px) {
	.benefices { padding: 64px 0; }
	.benefices__titre { font-size: 34px; }
}

@media (min-width: 1000px) {
	.benefices { padding: 80px 0; }

	/* Deux colonnes : visuel à gauche, accordéon à droite, aligné verticalement au centre. */
	.benefices__in {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: 56px;
	}

	.benefices__titre { font-size: 40px; margin-bottom: 24px; }
	.benefices__nom { font-size: 19px; }
	.benefices__entete { padding: 20px 0; }
}