/*
 * Tarifs — la commission unique. Cadre sous .ivy-pricing--commission : 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.
 *
 * Architecture partagee avec `carte` : Icon, Badge, Title, Description,
 * Price, Price unit, Included list, Button — en tete de la colonne
 * editoriale, a cote de l'image.
 */
.ivy-pricing--commission { padding: clamp( 72px, 10vw, 152px ) clamp( 20px, 5vw, 72px ); }
.ivy-pricing--commission .ivy-pricing__inner { max-width:1180px; margin-inline:auto; }

.ivy-pricing--commission .ivy-pricing__card {
	display: grid;
	--ivy-gap: 0px;
	column-gap: var( --ivy-gap );
	row-gap: var( --ivy-row-gap, 0px );
	grid-template-columns: minmax( 0, calc( ( 100% - var( --ivy-gap ) ) * var( --ivy-columns, 56.18 ) / 100 ) ) minmax( 320px, 1fr );
	overflow: hidden;
	border: 1px solid rgb( 17 17 17 / 12% );
	border-radius: var( --ivy-section-border-radius, 20px );
	background: var( --ivy-section-background-color, var( --ivy-soft, rgb( 245 242 236 ) ) );
}

.ivy-pricing--commission .ivy-pricing__offer { display:flex; align-items:flex-start; flex-direction:column; justify-content:center; padding:clamp( 34px, 6vw, 76px ); }

/* Icone et badge partagent une rangee en tete de colonne : le badge est
   pousse a droite par sa propre marge, pas par le conteneur — l'un des deux
   peut manquer sans que l'autre perde sa place. */
.ivy-pricing--commission .ivy-pricing__head { display:flex; width:100%; align-items:flex-start; gap:12px; margin-bottom:18px; }

.ivy-pricing--commission .ivy-pricing__icon {
	display: grid;
	width: 56px;
	aspect-ratio: 1;
	flex: none;
	place-items: center;
	border: var( --ivy-icon-border-width, 0 ) solid var( --ivy-icon-border-color, transparent );
	border-radius: var( --ivy-icon-border-radius, 16px );
	background: var( --ivy-icon-background-color, color-mix( in srgb, var( --ivy-accent, rgb( 112 91 62 ) ) 10%, transparent ) );
	color: var( --ivy-icon-color, var( --ivy-accent, rgb( 112 91 62 ) ) );
	font-size: 1.5rem;
	line-height: 1;
}
.ivy-pricing--commission .ivy-pricing__icon svg { width:1em; height:1em; fill:currentColor; }

.ivy-pricing--commission .ivy-pricing__badge {
	display: inline-flex;
	margin-inline-start: auto;
	padding: 6px 14px;
	border-radius: var( --ivy-badge-border-radius, 999px );
	background: var( --ivy-badge-background-color, color-mix( in srgb, var( --ivy-accent, rgb( 112 91 62 ) ) 12%, transparent ) );
	color: var( --ivy-badge-color, var( --ivy-accent, rgb( 112 91 62 ) ) );
	font-size: var( --ivy-font-label );
	font-weight: 700;
}

.ivy-pricing--commission .ivy-pricing__title { margin:0; color:var( --ivy-title-color, var( --ivy-ink, rgb( 17 17 17 ) ) ); line-height:1; }

.ivy-pricing--commission .ivy-pricing__text { max-width:54ch; margin:16px 0 0; color:var( --ivy-text-color, var( --ivy-muted, rgb( 82 82 82 ) ) ); font-size:var( --ivy-font-body ); line-height:1.55; }
.ivy-pricing--commission .ivy-pricing__text > :first-child { margin-top:0; }
.ivy-pricing--commission .ivy-pricing__text > :last-child { margin-bottom:0; }

.ivy-pricing--commission .ivy-pricing__rate { display:flex; max-inline-size:100%; align-items:baseline; flex-wrap:wrap; gap:.3em; margin:clamp( 28px, 4vw, 48px ) 0 0; }
/* La couleur se lit SUR LA PARTIE, jamais sur le conteneur : --ivy-value-color
   est ecrite par Elementor sur .ivy-pricing__value elle-meme (son selecteur
   declare), une propriete personnalisee ne remonte jamais vers un ANCETRE.
   La poser sur `.rate` la rendait muette des qu'un site reglait la couleur —
   piege repere le 12 septembre 2026 sur un site reel, kit --ivy-accent blanc. */
.ivy-pricing--commission .ivy-pricing__value { min-inline-size:0; color:var( --ivy-value-color, var( --ivy-accent, rgb( 112 91 62 ) ) ); font-size:var( --ivy-font-figure ); font-weight:700; line-height:1; letter-spacing:-.07em; overflow-wrap:break-word; }
.ivy-pricing--commission .ivy-pricing__suffix { color:var( --ivy-suffix-color, var( --ivy-muted, rgb( 82 82 82 ) ) ); font-size:var( --ivy-font-label ); line-height:1; }
.ivy-pricing--commission .ivy-pricing__label { max-width:28ch; margin:18px 0 0; color:var( --ivy-label-color, var( --ivy-ink, rgb( 17 17 17 ) ) ); font-weight:700; }

/*
 * Ce que la commission COMPREND. Trois references du secteur sur cinq posent
 * cette liste, et toutes la montaient avec un widget natif faute de champ :
 * elle vient desormais du repeteur `cards`, dont seul le titre est rendu.
 *
 * La boite blanche l'isole du fond de la colonne — deux surfaces distinctes,
 * jamais une seule couleur qui les confond.
 */
.ivy-pricing--commission .ivy-pricing__includes {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	box-sizing: border-box;
	margin: 24px 0 0;
	padding: clamp( 20px, 3vw, 28px );
	border-radius: var( --ivy-includes-border-radius, 20px );
	background: var( --ivy-includes-background-color, var( --ivy-surface, rgb( 255 255 255 ) ) );
	color: var( --ivy-includes-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
	font-size: var( --ivy-font-body );
	line-height: 1.45;
	list-style: none;
}
.ivy-pricing--commission .ivy-pricing__include { display:flex; align-items:flex-start; gap:10px; }
/* Le texte de la ligne est NOMME : une regle vers le `span` nu attraperait
   aussi la puce et lui imposerait sa mesure — piege paye sur les icones de
   contact du pied de page. */
.ivy-pricing--commission .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.
 */
.ivy-pricing--commission .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-include_icon-color, var( --ivy-accent, rgb( 112 91 62 ) ) );
}
.ivy-pricing--commission .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--commission .ivy-pricing__cta {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	margin-top: 28px;
	padding: .85em 1.5em;
	border-radius: var( --ivy-cta-border-radius, 999px );
	background: var( --ivy-cta-background-color, var( --ivy-accent, rgb( 17 17 17 ) ) );
	color: var( --ivy-cta-color, rgb( 255 255 255 ) );
	font-weight: 700;
	text-decoration: none;
}
.ivy-pricing--commission .ivy-pricing__cta:focus-visible { outline:3px solid currentcolor; outline-offset:4px; }

/* Le repli de la grille EST l'etirement : sans hauteur imposee, la colonne
   media suit la hauteur naturelle de la colonne editoriale (.offer), plus
   courte ou plus longue selon le contenu reellement saisi. Un plancher fixe
   forcerait au contraire l'offre a s'etirer pour rien des qu'elle est plus
   courte que ce plancher — l'inverse de ce que demande l'engagement 1. */
.ivy-pricing--commission .ivy-pricing__media { margin:0; overflow:hidden; border-radius:var( --ivy-media-border-radius, 0 ); }
.ivy-pricing--commission .ivy-pricing__media img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }

@media ( max-width: 767px ) {
	.ivy-pricing--commission .ivy-pricing__card { grid-template-columns:1fr; }
	.ivy-pricing--commission .ivy-pricing__media { order:-1; }
	.ivy-pricing--commission .ivy-pricing__media img { aspect-ratio:16/10; }
}

/*
 * La position du media. Le gabarit publie la classe, la feuille decide de
 * l'ordre — et seul l'ORDRE change, jamais les pistes : la colonne d'appoint
 * reste bornee des deux cotes, sinon elle se dimensionnerait sur son contenu
 * et ecraserait la colonne editoriale (piege paye sur le hero `kora`).
 */
.ivy-pricing--commission.ivy-pricing--media-left .ivy-pricing__card { grid-template-columns:minmax( 320px, calc( ( 100% - var( --ivy-gap ) ) * var( --ivy-columns, 43.82 ) / 100 ) ) minmax( 0, 1fr ); }
.ivy-pricing--commission.ivy-pricing--media-left .ivy-pricing__media { order:-1; }
@media ( max-width: 767px ) {
	.ivy-pricing--commission.ivy-pricing--media-left .ivy-pricing__card { grid-template-columns:1fr; }
}