/* ============================================================================
   guest-sections-c.css — batch C "Pédagogiques" (#13-15) + "Tarifaires" (#16-18).
   Nouveau fichier dédié, jamais de modification de guest.css / guest-extensions.css.
   Tokens uniquement (--ink, --paper, --surface, --teal(-soft), --coral(-soft),
   --warning(-soft), --signal(-deep), --line(-strong), --muted(-2), --s1..--s24,
   --radius-*, --shadow-card, --transition).
   ============================================================================ */

/* --------------------------------------------------------------------------
   #13 concept-ladder — 3 niveaux empilés, indentation croissante par palier.
   -------------------------------------------------------------------------- */
.concept-ladder {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s5);
	background-image: url('/assets/guest/images/guest/motifs/stair-steps.svg');
	background-repeat: no-repeat;
	background-position: top right;
	background-size: 320px auto;
}

.concept-ladder__level {
	display: flex;
	align-items: flex-start;
	gap: var(--s4);
	padding: var(--s4) var(--s5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

.concept-ladder__level--2 {
	margin-left: var(--s8);
}

.concept-ladder__level--3 {
	margin-left: var(--s16);
}

.concept-ladder__index {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-pill);
	background: var(--teal-soft);
	color: var(--teal);
	font-weight: 700;
}

.concept-ladder__label {
	display: block;
	margin-bottom: var(--s1);
	color: var(--ink);
}

.concept-ladder__text {
	margin: 0;
	color: var(--muted);
}

/* --------------------------------------------------------------------------
   #14 glossary-pair — paires terme/définition en 2 colonnes, fond alterné.
   -------------------------------------------------------------------------- */
.glossary-pair {
	margin: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	overflow: hidden;
	background-image: url('/assets/guest/images/guest/motifs/dotted-ledger.svg');
	background-repeat: repeat;
}

.glossary-pair__row {
	display: grid;
	grid-template-columns: minmax(140px, 220px) 1fr;
	gap: var(--s5);
	padding: var(--s4) var(--s5);
}

.glossary-pair__row--even {
	background: var(--surface);
}

.glossary-pair__row--odd {
	background: var(--paper);
}

.glossary-pair__term {
	font-weight: 700;
	color: var(--ink);
}

.glossary-pair__definition {
	margin: 0;
	color: var(--muted);
}

/* --------------------------------------------------------------------------
   #15 quiz-check — affirmations vrai/faux cliquables, révélation au clic.
   -------------------------------------------------------------------------- */
.quiz-check {
	display: flex;
	flex-direction: column;
	gap: var(--s4);
}

.quiz-check__item {
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface);
	overflow: hidden;
}

.quiz-check__statement {
	width: 100%;
	display: flex;
	align-items: flex-start;
	gap: var(--s3);
	padding: var(--s4) var(--s5);
	background: transparent;
	border: none;
	text-align: left;
	font: inherit;
	color: var(--ink);
	cursor: pointer;
	transition: background var(--transition);
}

.quiz-check__statement:hover {
	background: var(--teal-soft);
}

.quiz-check__statement i[data-lucide] {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--teal);
	margin-top: .15rem;
}

.quiz-check__reveal {
	max-height: 0;
	overflow: hidden;
	padding: 0 var(--s5);
	transition: max-height var(--transition), padding var(--transition);
}

.quiz-check__item.is-revealed .quiz-check__reveal {
	max-height: 200px;
	padding: 0 var(--s5) var(--s5);
}

.quiz-check__verdict {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	padding: var(--s1) var(--s3);
	border-radius: var(--radius-pill);
	font-weight: 700;
	font-size: .85rem;
}

.quiz-check__verdict i[data-lucide] {
	width: 1rem;
	height: 1rem;
}

.quiz-check__verdict--true {
	background: var(--teal-soft);
	color: var(--teal);
}

.quiz-check__verdict--false {
	background: var(--coral-soft);
	color: var(--coral);
}

.quiz-check__explanation {
	margin: var(--s2) 0 0;
	color: var(--muted);
}

/* --------------------------------------------------------------------------
   #16 fee-ladder — reçu de caisse, lignes alignées à droite + total souligné.
   -------------------------------------------------------------------------- */
.fee-ladder {
	padding: var(--s5) var(--s6);
}

.fee-ladder__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s5);
	padding: var(--s4) 0;
	border-bottom: 1px solid var(--line);
}

.fee-ladder__row:last-of-type {
	border-bottom: none;
}

.fee-ladder__row--total {
	margin-top: var(--s2);
	padding-top: var(--s5);
	border-top: 2px solid var(--ink);
	border-bottom: none;
}

.fee-ladder__row--total .fee-ladder__label,
.fee-ladder__row--total .fee-ladder__amount {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--ink);
}

.fee-ladder__info {
	display: flex;
	flex-direction: column;
	gap: var(--s1);
}

.fee-ladder__label {
	font-weight: 600;
	color: var(--ink);
}

.fee-ladder__detail {
	color: var(--muted-2);
	font-size: .875rem;
}

.fee-ladder__amount {
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   #17 price-toggle — carte centrée, bascule mensuel/annuel.
   -------------------------------------------------------------------------- */
.price-toggle {
	max-width: 420px;
	margin: 0 auto;
	padding: var(--s8) var(--s6);
	text-align: center;
}

.price-toggle__switch {
	display: inline-flex;
	padding: var(--s1);
	background: var(--paper);
	border-radius: var(--radius-pill);
	gap: var(--s1);
}

.price-toggle__btn {
	padding: var(--s2) var(--s5);
	border: none;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--muted);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}

.price-toggle__btn.is-active {
	background: var(--ink);
	color: var(--paper);
}

.price-toggle__amount {
	margin-top: var(--s6);
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: var(--s2);
}

.price-toggle__amount strong {
	font-size: 2.5rem;
	color: var(--ink);
}

.price-toggle__amount span {
	color: var(--muted);
}

.price-toggle__note {
	margin: var(--s4) 0 0;
	color: var(--muted-2);
	font-size: .875rem;
}

/* --------------------------------------------------------------------------
   #18 cost-example — situation + blocs reliés par + et =, vertical sous 780px.
   -------------------------------------------------------------------------- */
.cost-example__situation {
	color: var(--muted);
}

.cost-example {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--s4);
	padding: var(--s6);
	border-radius: var(--radius-lg);
	background: var(--paper);
}

.cost-example__block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s1);
	min-width: 140px;
	padding: var(--s4) var(--s5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	text-align: center;
}

.cost-example__block--result {
	background: var(--teal-soft);
	border-color: var(--teal);
}

.cost-example__value {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.cost-example__label {
	color: var(--muted-2);
	font-size: .8rem;
}

.cost-example__operator {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--muted-2);
	flex-shrink: 0;
}

.cost-example__operator i[data-lucide] {
	width: 1.5rem;
	height: 1.5rem;
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 1020px) {
	.concept-ladder__level--2 {
		margin-left: var(--s6);
	}

	.concept-ladder__level--3 {
		margin-left: var(--s12);
	}
}

@media (max-width: 780px) {
	.concept-ladder__level--2 {
		margin-left: var(--s4);
	}

	.concept-ladder__level--3 {
		margin-left: var(--s6);
	}

	.glossary-pair__row {
		grid-template-columns: 1fr;
		gap: var(--s2);
	}

	.price-toggle {
		padding: var(--s6) var(--s4);
	}

	.price-toggle__amount strong {
		font-size: 2rem;
	}

	.cost-example {
		flex-direction: column;
	}

	.cost-example__operator {
		transform: rotate(90deg);
	}
}

/* --------------------------------------------------------------------------
   Accessibilité
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.quiz-check__statement,
	.quiz-check__reveal,
	.price-toggle__btn {
		transition: none;
	}
}