/**
 * LL AUTO Booking — grille tarifaire publique.
 *
 * Conçue en 375px d'abord. Dépend de llab-app.css pour les tokens, les boutons
 * et l'utilitaire .llab-sr-only.
 *
 * ⚠️ Les sélecteurs combinent classe et type — `.llab-app table.llab-pricing__table`,
 * `.llab-pricing__table th` — pour une raison précise : Elementor et la plupart
 * des thèmes posent des règles de kit du type `.elementor-kit-42 table`,
 * `… th`, `… td` (spécificité 0,2,0) qui battent une classe seule (0,1,0) et
 * imposeraient leurs bordures, leurs fonds zébrés et leurs majuscules. Voir
 * l'entrée du 2026-08-11 dans docs/errors-log.md.
 */

.llab-pricing {
	padding-bottom: 32px;
}

/* ------------------------------------------------------------------
 * Matrice — cartes empilées sur mobile
 *
 * 🔴 Un tableau 6×3 ne tient pas en 375px. Plutôt que de le faire défiler
 * horizontalement — geste que personne ne découvre sur un écran de téléphone —
 * chaque ligne devient une carte, et chaque cellule une ligne « catégorie /
 * prix » étiquetée par son attribut `data-label`.
 *
 * Un seul tableau dans le DOM : pas de second rendu en cartes qui ferait lire
 * la grille deux fois aux lecteurs d'écran.
 * ------------------------------------------------------------------ */

.llab-app table.llab-pricing__table {
	width: 100%;
	margin: 0 0 24px;
	border: 0;
	border-collapse: collapse;
	background: transparent;
	font-size: 15px;
}

/* En-tête de colonnes masqué : les libellés passent par data-label. */
.llab-pricing__table thead {
	display: none;
}

.llab-app .llab-pricing__table tr {
	display: block;
	margin-bottom: 16px;
	padding: 16px;
	background: var(--llab-bg-light);
	border: 1px solid var(--llab-border);
	border-radius: var(--llab-radius-card);
	box-shadow: var(--llab-shadow);
}

.llab-app .llab-pricing__table th,
.llab-app .llab-pricing__table td {
	display: block;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
	vertical-align: top;
}

/* Nom de la formule, en tête de carte. */
.llab-app .llab-pricing__table th.llab-pricing__service {
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--llab-border);
}

.llab-pricing__name {
	display: block;
	color: var(--llab-color-primary);
	font-family: var(--llab-font-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.llab-pricing__desc {
	display: block;
	margin-top: 4px;
	color: var(--llab-text-muted);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
}

/*
 * Cellule de prix en mode carte : libellé de catégorie à gauche, prix à
 * droite. Le libellé vient de l'attribut, jamais dupliqué dans le balisage.
 */
.llab-app .llab-pricing__table td {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	min-height: 40px;
	padding: 6px 0;
}

.llab-app .llab-pricing__table td::before {
	content: attr(data-label);
	flex: 0 0 auto;
	color: var(--llab-text-muted);
	font-size: 14px;
	font-weight: 500;
}

.llab-pricing__price {
	color: var(--llab-color-text);
	font-family: var(--llab-font-heading);
	font-size: 17px;
	font-weight: 700;
	text-align: right;
}

/*
 * La durée suit le prix sur la même ligne en mode carte : la remettre en
 * dessous créerait une colonne de droite à deux niveaux, difficile à aligner.
 * Elle repasse sous le prix dès que le tableau reprend sa forme.
 */
.llab-pricing__duration {
	display: block;
	margin-top: 2px;
	color: var(--llab-text-muted);
	font-size: 12px;
	font-weight: 500;
	text-align: right;
}

.llab-pricing__none {
	color: var(--llab-text-muted);
	font-size: 17px;
	font-weight: 500;
}

/* ------------------------------------------------------------------
 * Options complémentaires
 * ------------------------------------------------------------------ */

.llab-pricing__subtitle {
	margin: 32px 0 16px;
	color: var(--llab-color-primary);
	font-family: var(--llab-font-heading);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.llab-app ul.llab-pricing__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.llab-app .llab-pricing__list .llab-pricing__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	margin: 0;
	border-bottom: 1px solid var(--llab-border);
	list-style: none;
}

.llab-app .llab-pricing__list .llab-pricing__item:last-child {
	border-bottom: 0;
}

.llab-pricing__item-body {
	flex: 1 1 auto;
	min-width: 0;
}

.llab-pricing__item-name {
	display: block;
	color: var(--llab-color-text);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
}

.llab-pricing__item-price {
	flex: 0 0 auto;
	color: var(--llab-color-primary);
	font-family: var(--llab-font-heading);
	font-size: 16px;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

/* ------------------------------------------------------------------
 * Mentions et appel à l'action
 * ------------------------------------------------------------------ */

.llab-pricing__legal {
	margin: 24px 0 0;
	color: var(--llab-text-muted);
	font-size: 13px;
	line-height: 1.5;
}

.llab-pricing__legal span {
	display: block;
}

.llab-pricing__cta {
	margin: 24px 0 0;
}

/*
 * Aucune règle sur le bouton ici : `llab-app.css` traite déjà les boutons-liens
 * avec `.llab-app a.llab-btn` et `.llab-app a.llab-btn--secondary` (0,2,1), qui
 * passent devant une règle de kit `.elementor-kit-42 a` (0,2,0). En rajouter
 * une deuxième source ne ferait que créer un point de divergence — c'est
 * exactement ce qui avait rendu un libellé invisible sur /mon-compte, voir
 * docs/errors-log.md.
 */

/* ------------------------------------------------------------------
 * Tablette et au-delà — le tableau reprend sa forme
 * ------------------------------------------------------------------ */

@media (min-width: 768px) {
	.llab-app table.llab-pricing__table {
		background: var(--llab-bg-light);
		border: 1px solid var(--llab-border);
		border-radius: var(--llab-radius-card);
		box-shadow: var(--llab-shadow);
		overflow: hidden;
	}

	.llab-pricing__table thead {
		display: table-header-group;
	}

	.llab-app .llab-pricing__table tr {
		display: table-row;
		margin: 0;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.llab-app .llab-pricing__table th,
	.llab-app .llab-pricing__table td {
		display: table-cell;
		padding: 16px;
		border-bottom: 1px solid var(--llab-border);
		vertical-align: top;
	}

	.llab-app .llab-pricing__table thead th {
		background: var(--llab-bg-subtle);
		color: var(--llab-color-primary);
		font-family: var(--llab-font-heading);
		font-size: 14px;
		font-weight: 700;
		text-align: left;
	}

	.llab-app .llab-pricing__table th.llab-pricing__service {
		margin: 0;
		border-bottom: 1px solid var(--llab-border);
		width: 34%;
	}

	.llab-app .llab-pricing__table tbody tr:last-child th,
	.llab-app .llab-pricing__table tbody tr:last-child td {
		border-bottom: 0;
	}

	/* Le libellé de catégorie redevient l'en-tête de colonne. */
	.llab-app .llab-pricing__table td::before {
		content: none;
	}

	.llab-app .llab-pricing__table td {
		display: table-cell;
		min-height: 0;
	}

	.llab-pricing__price,
	.llab-pricing__duration {
		text-align: left;
	}

	.llab-pricing__price {
		display: block;
	}
}