/*
 * Tarifs — table a plusieurs formules. Cadre sous .ivy-pricing--formules : le
 * CSS de tout le rayon peut etre charge sur la meme page (piege connu,
 * PASSATION §3). Engagement 5 : aucun hexadecimal, valeurs de repli comprises.
 *
 * LA THESE, et tout le reste en decoule : les formules ne sont pas des boites
 * autonomes posees cote a cote, elles PARTAGENT cinq rangees — nom, prix,
 * description, inclusions, action. Un titre sur deux lignes pousse la rangee
 * pour toutes les cartes, jamais pour une seule.
 *
 * Mesure qui justifie ce choix, relevee sur une table du secteur : un titre
 * plus long y decalait le bloc de prix de 24 px, la liste de 47 et le bouton
 * de 71. Une table dont le metier est la comparaison n'y etait pas comparable
 * a l'oeil.
 *
 * La geometrie est donc l'endroit ou ce produit prend un risque. La couleur et
 * la typographie ne lui appartiennent pas : elles viennent du kit global
 * Elementor par les jetons --ivy-*.
 */
.ivy-pricing--formules {
	padding: clamp( 64px, 10vw, 144px ) clamp( 20px, 5vw, 72px );
}

.ivy-pricing--formules .ivy-pricing__header { width:100%; max-width:none; margin:0 0 clamp( 36px, 6vw, 72px ); }
.ivy-pricing--formules .ivy-pricing__eyebrow { display:block; margin-bottom:16px; color:var( --ivy-eyebrow-color, var( --ivy-muted, rgb( 82 82 82 ) ) ); font-size:var( --ivy-font-label ); font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.ivy-pricing--formules .ivy-pricing__title { width:100%; max-width:none; margin:0; color:var( --ivy-title-color, var( --ivy-ink, rgb( 17 17 17 ) ) ); line-height:1.04; }
.ivy-pricing--formules .ivy-pricing__text { width:100%; max-width:66ch; margin:20px 0 0; color:var( --ivy-text-color, var( --ivy-muted, rgb( 82 82 82 ) ) ); line-height:1.7; }

/*
 * La marge haute reserve la place du badge POUR TOUTES les cartes, pas
 * seulement celle qui en porte un : sinon la carte badgee descendrait, et
 * l'alignement que ce produit existe pour tenir tomberait des la premiere
 * mise en avant.
 */
.ivy-pricing--formules .ivy-pricing__plans {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 18px 0 0;
	list-style: none;
}

.ivy-pricing--formules .ivy-pricing__plan {
	position: relative;
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	gap: 14px;
	padding: clamp( 24px, 2.6vw, 34px );
	border-radius: var( --ivy-plan-border-radius, 20px );
	background: var( --ivy-surface, rgb( 255 255 255 ) );
	box-shadow: 0 0 10px rgb( 15 23 42 / 14% );
}

/*
 * La mise en avant se joue par la COULEUR, jamais par l'elevation au repos.
 * Ce n'est pas un gout : sur les deux references du secteur qui mettent une
 * formule en avant, les cartes ont le meme haut et la meme hauteur, et la
 * seule qui bouge le fait au survol. Surelever au repos casserait en plus les
 * rangees partagees.
 */
.ivy-pricing--formules .ivy-pricing__plan--featured {
	background: var( --ivy-accent, rgb( 17 17 17 ) );
	box-shadow: none;
}

.ivy-pricing--formules .ivy-pricing__badge {
	position: absolute;
	top: 0;
	left: clamp( 24px, 2.6vw, 34px );
	padding: 6px 14px;
	border-radius: var( --ivy-plan_badge-border-radius, 999px );
	background: var( --ivy-accent, rgb( 17 17 17 ) );
	color: var( --ivy-plan_badge-color, var( --ivy-surface, rgb( 255 255 255 ) ) );
	font-size: var( --ivy-font-label );
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	transform: translateY( -50% );
}

.ivy-pricing--formules .ivy-pricing__plan-title { margin:0; color:var( --ivy-plan_title-color, var( --ivy-ink, rgb( 17 17 17 ) ) ); font-weight:600; line-height:1.25; }

/*
 * Le prix est un TEXTE, a la taille de chiffre : « presupuesto » y depasse a
 * lui seul une carte a trois colonnes (Las Llaves, 25 septembre 2026). Item
 * flex, la valeur ne se retracte qu'avec `min-inline-size:0` ; `break-word`
 * coupe alors le mot qui ne tient plus. `anywhere` est exclu : il ramene le
 * min-content a une lettre (PASSATION §3).
 */
.ivy-pricing--formules .ivy-pricing__rate { display:flex; align-items:baseline; flex-wrap:wrap; gap:.35em; margin:0; }
.ivy-pricing--formules .ivy-pricing__value { min-inline-size:0; color:var( --ivy-plan_value-color, var( --ivy-ink, rgb( 17 17 17 ) ) ); font-size:var( --ivy-font-figure ); font-weight:600; line-height:1; letter-spacing:-.02em; overflow-wrap:break-word; }
.ivy-pricing--formules .ivy-pricing__unit { color:var( --ivy-plan_unit-color, var( --ivy-muted, rgb( 82 82 82 ) ) ); font-size:var( --ivy-font-label ); line-height:1.35; }

.ivy-pricing--formules .ivy-pricing__plan-text { margin:0; color:var( --ivy-plan_text-color, var( --ivy-muted, rgb( 82 82 82 ) ) ); font-size:var( --ivy-font-body ); line-height:1.6; }

.ivy-pricing--formules .ivy-pricing__includes { display:flex; flex-direction:column; gap:10px; margin:0; padding:0; color:var( --ivy-plan_includes-color, var( --ivy-ink, rgb( 17 17 17 ) ) ); font-size:var( --ivy-font-body ); line-height:1.4; list-style:none; }
.ivy-pricing--formules .ivy-pricing__include { display:flex; align-items:flex-start; gap:10px; }
/* Le texte de la ligne est NOMME. Une regle qui viserait le `span` nu
   attraperait aussi la puce, et lui imposerait sa mesure — c'est le piege
   deja paye sur les icones de contact du pied de page. */
.ivy-pricing--formules .ivy-pricing__include-text { min-width:0; }

/*
 * La puce est carree PAR CONSTRUCTION. La famille `size` n'ecrit qu'une
 * largeur (dette connue) : `aspect-ratio` fait suivre la hauteur, donc le
 * reglage de taille ne deforme pas le marqueur.
 */
.ivy-pricing--formules .ivy-pricing__check {
	position: relative;
	display: inline-grid;
	box-sizing: border-box;
	width: 1.1em;
	flex: none;
	margin-top: .15em;
	aspect-ratio: 1;
	border-radius: 50%;
	color: var( --ivy-plan_icon-color, var( --ivy-accent, rgb( 17 17 17 ) ) );
}

.ivy-pricing--formules .ivy-pricing__check::before {
	position: absolute;
	top: 30%;
	left: 32%;
	width: .3em;
	height: .55em;
	border: solid currentcolor;
	border-width: 0 2px 2px 0;
	content: '';
	transform: rotate( 45deg );
}

.ivy-pricing--formules .ivy-pricing__plan-cta {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	padding: .7em 1.4em;
	border: 1px solid currentcolor;
	border-radius: var( --ivy-plan_cta-border-radius, 999px );
	color: var( --ivy-plan_cta-color, currentColor );
	font-size: var( --ivy-font-label );
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color calc( 180ms * var( --ivy-motion, 1 ) ) ease, color calc( 180ms * var( --ivy-motion, 1 ) ) ease;
}

.ivy-pricing--formules .ivy-pricing__plan-cta:focus-visible { outline:2px solid currentcolor; outline-offset:4px; }

/*
 * La carte mise en avant inverse ses replis. Les NOMS ne changent pas — le
 * controle continue d'ecrire --ivy-plan_title-color et la feuille de le lire.
 * Seule la valeur de secours suit le fond, faute de quoi un texte sombre
 * tomberait sur un fond d'accent.
 */
.ivy-pricing--formules .ivy-pricing__plan--featured .ivy-pricing__plan-title { color:var( --ivy-plan_title-color, var( --ivy-surface, rgb( 255 255 255 ) ) ); }
.ivy-pricing--formules .ivy-pricing__plan--featured .ivy-pricing__value { color:var( --ivy-plan_value-color, var( --ivy-surface, rgb( 255 255 255 ) ) ); }
.ivy-pricing--formules .ivy-pricing__plan--featured .ivy-pricing__unit { color:var( --ivy-plan_unit-color, var( --ivy-surface, rgb( 255 255 255 ) ) ); }
.ivy-pricing--formules .ivy-pricing__plan--featured .ivy-pricing__plan-text { color:var( --ivy-plan_text-color, var( --ivy-surface, rgb( 255 255 255 ) ) ); }
.ivy-pricing--formules .ivy-pricing__plan--featured .ivy-pricing__includes { color:var( --ivy-plan_includes-color, var( --ivy-surface, rgb( 255 255 255 ) ) ); }
.ivy-pricing--formules .ivy-pricing__plan--featured .ivy-pricing__check { color:var( --ivy-plan_icon-color, var( --ivy-surface, rgb( 255 255 255 ) ) ); }
.ivy-pricing--formules .ivy-pricing__plan--featured .ivy-pricing__badge { background:var( --ivy-surface, rgb( 255 255 255 ) ); color:var( --ivy-plan_badge-color, var( --ivy-ink, rgb( 17 17 17 ) ) ); }
/* Le bouton aussi, et il avait ete oublie : son `currentColor` heritait de la
   couleur de texte du document, donc du sombre sur du sombre. Un contraste
   rate ne se voit dans aucun test de structure — seule la capture le montre. */
.ivy-pricing--formules .ivy-pricing__plan--featured .ivy-pricing__plan-cta { color:var( --ivy-plan_cta-color, var( --ivy-surface, rgb( 255 255 255 ) ) ); }

/* Le vide qui tient une rangee. Il ne se voit pas et ne se lit pas. */
.ivy-pricing--formules .ivy-pricing__void { display:block; }

/* ---- Mise en page « en-tete de cote, formules empilees » ---- */
.ivy-pricing--formules.ivy-pricing--layout-aside {
	display: grid;
	align-items: start;
	grid-template-columns: minmax( 0, .65fr ) minmax( 0, 1fr );
	gap: clamp( 32px, 5vw, 72px );
}

.ivy-pricing--formules.ivy-pricing--layout-aside .ivy-pricing__header { margin-bottom:0; }
/* De cote, le titre n'a plus la largeur de la section : garder l'echelle
   pleine largeur le cassait en cinq lignes dans une colonne de 400 px. */
.ivy-pricing--formules.ivy-pricing--layout-aside .ivy-pricing__title { }
.ivy-pricing--formules.ivy-pricing--layout-aside .ivy-pricing__plans { grid-template-columns:minmax( 0, 1fr ); }

/* ---- Mise en page « colonnes egales » ---- */
.ivy-pricing--formules.ivy-pricing--layout-columns .ivy-pricing__plans { grid-template-columns:minmax( 0, 1fr ); }

@media ( min-width: 901px ) {
	.ivy-pricing--formules.ivy-pricing--layout-columns.ivy-pricing--count-2 .ivy-pricing__plans { grid-template-columns:repeat( 2, minmax( 0, 1fr ) ); }
	.ivy-pricing--formules.ivy-pricing--layout-columns.ivy-pricing--count-3 .ivy-pricing__plans { grid-template-columns:repeat( 3, minmax( 0, 1fr ) ); }
	.ivy-pricing--formules.ivy-pricing--layout-columns.ivy-pricing--count-4 .ivy-pricing__plans { grid-template-columns:repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( min-width: 1201px ) {
	.ivy-pricing--formules.ivy-pricing--layout-columns.ivy-pricing--count-4 .ivy-pricing__plans { grid-template-columns:repeat( 4, minmax( 0, 1fr ) ); }
}

/*
 * LES RANGEES PARTAGEES. Elles ne s'appliquent que la ou les formules tiennent
 * reellement sur une seule ligne : empilees, l'alignement horizontal n'a aucun
 * sens, et une rangee figee y ferait du vide. Le repli sans `subgrid` est le
 * comportement de la colonne flex ci-dessus — degrade, jamais casse.
 */
@supports ( grid-template-rows: subgrid ) {
	@media ( min-width: 901px ) {
		.ivy-pricing--formules.ivy-pricing--layout-columns.ivy-pricing--count-2 .ivy-pricing__plans,
		.ivy-pricing--formules.ivy-pricing--layout-columns.ivy-pricing--count-3 .ivy-pricing__plans {
			grid-template-rows: auto auto auto 1fr auto;
		}

		/*
		 * La colonne de la carte est BORNEE a sa piste. Implicite, elle vaudrait
		 * `auto` et s'elargirait sur le min-content d'un prix texte trop long,
		 * emportant le bouton hors du cadre — 60 px mesures sur la fixture
		 * /vitrine-pricing-formules-texte/.
		 */
		.ivy-pricing--formules.ivy-pricing--layout-columns.ivy-pricing--count-2 .ivy-pricing__plan,
		.ivy-pricing--formules.ivy-pricing--layout-columns.ivy-pricing--count-3 .ivy-pricing__plan {
			display: grid;
			grid-row: 1 / span 5;
			grid-template-columns: minmax( 0, 1fr );
			grid-template-rows: subgrid;
		}
	}

	@media ( min-width: 1201px ) {
		.ivy-pricing--formules.ivy-pricing--layout-columns.ivy-pricing--count-4 .ivy-pricing__plans { grid-template-rows:auto auto auto 1fr auto; }

		.ivy-pricing--formules.ivy-pricing--layout-columns.ivy-pricing--count-4 .ivy-pricing__plan {
			display: grid;
			grid-row: 1 / span 5;
			grid-template-columns: minmax( 0, 1fr );
			grid-template-rows: subgrid;
		}
	}
}

@media ( max-width: 900px ) {
	.ivy-pricing--formules.ivy-pricing--layout-aside { grid-template-columns:minmax( 0, 1fr ); }
	.ivy-pricing--formules.ivy-pricing--layout-aside .ivy-pricing__header { margin-bottom:clamp( 28px, 6vw, 40px ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.ivy-pricing--formules .ivy-pricing__plan-cta { transition:none; }
}