/************************************/
/***    Guide des prix css        ***/
/************************************/

/*
 * La page « combien coûte un site web au Burkina Faso ».
 *
 * Couleurs : uniquement les rôles de la palette (charte §8.1). Rien n'est
 * écrit en dur ici, sans quoi la page cesserait de suivre les couleurs
 * administrées et se casserait en thème sombre.
 *
 * Le tableau est l'élément central : c'est lui qu'un lecteur pressé consulte,
 * et lui qu'un assistant reprend. Il doit donc rester lisible à 360 px de
 * large, d'où le conteneur qui défile plutôt qu'un empilement en cartes —
 * un tableau démonté en cartes perd la comparaison colonne par colonne, qui
 * est tout son intérêt.
 */

.pricing-guide {
	padding: 60px 0 100px;
}

/* --- La réponse directe ------------------------------------------------- */

/*
 * Le passage cité. Encadré et détaché pour qu'un lecteur le trouve sans lire
 * la page, et posé en tête pour qu'un extracteur le rencontre en premier.
 */
.pricing-guide-answer {
	padding: 30px 34px;
	margin-bottom: 70px;
	border-left: 3px solid var(--accent-color);
	border-radius: 0 20px 20px 0;
	background-color: var(--background-accent-color);
}

.pricing-guide-answer p {
	margin: 0;
	font-size: 18px;
	line-height: 1.7;
	color: var(--text-color);
}

.pricing-guide-answer strong {
	color: var(--heading-color);
}

/*
 * L'encart de limite : ce que la page ne prétend PAS savoir.
 *
 * Volontairement distinct de .pricing-guide-answer — l'un affirme, l'autre
 * restreint. Le filet passe en couleur d'avertissement et le fond reste neutre,
 * pour qu'on ne le confonde pas avec la réponse mise en avant.
 */
.pricing-guide-caveat {
	padding: 22px 26px;
	margin-bottom: 60px;
	border: 1px solid var(--divider-color);
	border-left: 3px solid var(--warning-color);
	border-radius: 0 16px 16px 0;
}

.pricing-guide-caveat p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--text-color);
}

.pricing-guide-caveat b {
	color: var(--heading-color);
}

/* --- Le tableau récapitulatif ------------------------------------------- */

/*
 * Le conteneur défile horizontalement là où le tableau ne tient pas. Sans lui,
 * c'est la page entière qui défile de travers sur téléphone.
 */
.pricing-guide-table-wrap {
	margin-bottom: 70px;
	overflow-x: auto;
}

.pricing-guide-table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	color: var(--text-color);
}

/*
 * La légende est sous le tableau : au-dessus, elle retarde la lecture du
 * contenu ; en dessous, elle précise ce qu'on vient de lire.
 */
.pricing-guide-table caption {
	caption-side: bottom;
	padding-top: 14px;
	font-size: 14px;
	font-style: italic;
	text-align: left;
	color: var(--text-color);
}

.pricing-guide-table th,
.pricing-guide-table td {
	padding: 16px 18px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--divider-color);
}

.pricing-guide-table thead th {
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--heading-color);
	border-bottom: 2px solid var(--accent-color);
}

.pricing-guide-table tbody th {
	font-weight: 600;
	color: var(--heading-color);
}

.pricing-guide-table tbody th a {
	color: inherit;
	transition: color 0.3s ease-in-out;
}

.pricing-guide-table tbody th a:hover {
	color: var(--accent-color);
}

/* Le montant se compare colonne par colonne : les chiffres doivent s'aligner. */
.pricing-guide-table td {
	font-variant-numeric: tabular-nums;
}

.pricing-guide-quoted {
	display: block;
	font-size: 14px;
	font-style: italic;
}

/* --- Le détail des paliers ---------------------------------------------- */

.pricing-guide-detail {
	position: relative;
	height: calc(100% - 30px);
	padding: 34px;
	margin-bottom: 30px;
	border-radius: 30px;
	background-color: var(--background-accent-color);
}

/* Toute la carte est cliquable, pas seulement son titre : le détail des paliers et les
   34 px de marge intérieure mènent au même palier. Le lien du titre est étiré par un
   pseudo-élément plutôt qu'en enveloppant la carte dans un second <a> — un seul lien
   dans le DOM, et le titre du palier pour texte d'ancrage. */
.pricing-guide-detail h3 a::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.pricing-guide-detail h3 {
	font-size: 22px;
	margin-bottom: 22px;
	color: var(--heading-color);
}

.pricing-guide-detail h3 a {
	color: inherit;
	transition: color 0.3s ease-in-out;
}

/* Le survol suit la frontière du clic : c'est la carte entière qui est la cible. */
.pricing-guide-detail:hover h3 a {
	color: var(--accent-color);
}

.pricing-guide-detail dl {
	margin: 0;
}

.pricing-guide-detail dt {
	font-weight: 600;
	color: var(--heading-color);
}

.pricing-guide-detail dt + dd {
	margin-top: 4px;
}

.pricing-guide-detail dd {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-color);
}

.pricing-guide-detail dd:last-child {
	margin-bottom: 0;
}

/* Le prix se détache du nom du palier : c'est l'information cherchée. */
.pricing-guide-price {
	display: block;
	font-size: 20px;
	font-weight: 700;
	color: var(--accent-color);
	font-variant-numeric: tabular-nums;
}

/* --- Les listes de facteurs --------------------------------------------- */

.pricing-guide-factors {
	margin-bottom: 60px;
}

.pricing-guide-factors ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.pricing-guide-factors ul li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 18px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--text-color);
}

.pricing-guide-factors a {
	color: var(--accent-color);
}

.pricing-guide-factors a:hover {
	color: var(--text-color);
	transition: 0.2s;
}

/*
 * La puce est dessinée, pas listée : un disque de la couleur d'accent tient le
 * même rôle visuel que le reste du site, là où `list-style: disc` reprendrait
 * la couleur du texte.
 */
.pricing-guide-factors ul li::before {
	content: '';
	position: absolute;
	top: 11px;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--accent-color);
}

.pricing-guide-factors ul li strong {
	color: var(--heading-color);
}

@media only screen and (max-width: 767px) {
	.pricing-guide {
		padding: 40px 0 70px;
	}

	.pricing-guide-answer {
		padding: 24px 22px;
		margin-bottom: 50px;
	}

	.pricing-guide-answer p {
		font-size: 17px;
	}

	.pricing-guide-detail {
		padding: 28px;
	}
}