/**
 * ET Pricing — structure.
 *
 * Cette feuille ne décide d'aucune couleur ni d'aucune taille : tout cela
 * arrive par la feuille calculée pour chaque tableau, et pourrait sinon entrer
 * en conflit avec elle. Ce qui suit est ce qui ne dépend d'aucun réglage.
 */

.etp { display: block; }

.etp * { box-sizing: border-box; }

.etp .etp-grid { margin: 0; padding: 0; }

/*
 * La colonne est une pile : en-tête, corps, bouton. Le bouton est poussé en
 * bas par une marge automatique, ce qui aligne les boutons de toutes les
 * colonnes même quand elles n'ont pas le même nombre de prestations. Sans
 * cela, chaque bouton flotterait à la hauteur de sa propre liste.
 */
.etp .etp-col { height: 100%; }

.etp .etp-head { margin: 0; }

.etp .etp-name,
.etp .etp-sub,
.etp .etp-price,
.etp .etp-old { margin: 0; }

.etp .etp-price-block { margin: 0; }
.etp .etp-price { margin: 0; }
.etp .etp-lead-line { margin: 0; }
.etp .etp-old { margin: 2px 0 0; }

.etp .etp-features { margin: 6px 0 0; }

.etp .etp-feature-text { min-width: 0; }

/*
 * Le tableau ne se laisse pas justifier par la page.
 *
 * Un bloc de l'éditeur réglé sur « justifié » transmet son alignement à tout
 * ce qu'il contient. La feuille calculée écrit l'alignement voulu sur chaque
 * élément qui porte du texte ; celle-ci écarte en plus les deux propriétés qui
 * étirent les mots, et qu'aucun réglage du tableau ne demande.
 */
.etp .etp-col { text-align-last: auto; }
.etp .etp-col p,
.etp .etp-col li { word-spacing: normal; }

/* Une prestation absente de l'offre : le texte s'atténue, la puce change. */
.etp .etp-feature.is-off { opacity: 0.55; }
.etp .etp-feature.is-off .etp-feature-mark { color: currentColor; }

.etp .etp-action { display: block; }

/*
 * Le médaillon déborde volontairement de l'en-tête. Il ne doit ni recevoir de
 * clic ni gêner la sélection du texte qu'il chevauche.
 */
.etp .etp-medal { pointer-events: none; }

.etp .etp-medal-icon:before { line-height: inherit; }

/*
 * Une préférence système pour le mouvement réduit doit être respectée : la
 * surélévation au survol et le décalage de la colonne mise en avant sont des
 * animations, pas des informations.
 */
@media ( prefers-reduced-motion: reduce ) {

	.etp .etp-col,
	.etp .etp-btn { transition: none; }

	.etp .etp-btn:hover { transform: none; }
}