/*
 * Services alternes, en BORD PERDU. Cadre sous .ivy-services--alternee : 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.
 *
 * Ce que la version precedente ratait, mesure sur la vitrine : un ecart de
 * 120 px entre les deux colonnes, une image plus etroite que le texte
 * (piste .9fr contre 1fr) et un filet d'1 px pour tout separateur — trois
 * rangees qui se lisaient comme une liste, pas comme une alternance.
 *
 * L'image touche donc le bord de la section, sur toute la hauteur de la
 * rangee, et le texte tient dans une colonne mesuree de l'autre cote. La
 * marge horizontale quitte la section pour descendre sur ses enfants : sans
 * ce deplacement, aucun bord perdu n'est possible.
 */
.ivy-services--alternee {
	--ivy-alternee-edge: clamp( 20px, 5vw, 72px );
	--ivy-alternee-gutter: clamp( 32px, 5vw, 88px );

	padding: clamp( 64px, 10vw, 144px ) 0;
}

.ivy-services--alternee .ivy-services__header {
	width: 100%;
	max-width: none;
	margin-bottom: clamp( 40px, 7vw, 88px );
	padding: 0 var( --ivy-alternee-edge );
}

.ivy-services--alternee .ivy-services__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-services--alternee .ivy-services__title { width:100%; max-width:none; margin:0; color:var( --ivy-title-color, var( --ivy-ink, rgb( 17 17 17 ) ) ); line-height:1.02; }
.ivy-services--alternee .ivy-services__text { width:100%; max-width:none; margin:24px 0 0; color:var( --ivy-text-color, var( --ivy-muted, rgb( 82 82 82 ) ) ); line-height:1.7; }

.ivy-services--alternee .ivy-services__list { max-width:none; margin:0; }

/*
 * `stretch` et non `center` : c'est ce qui donne au media la hauteur entiere
 * de la rangee, donc le bord perdu. Le centrage vertical redescend sur la
 * seule colonne editoriale, qui en a besoin.
 */
.ivy-services--alternee .ivy-services__item {
	display: grid;
	align-items: stretch;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 0;
	padding: 0;
	border: 0;
}

/*
 * Le fond alterne remplace le filet : il rythme la lecture sans ajouter de
 * trait. Il perd volontairement contre le controle `background` de la
 * partie `item` (0-4-0 emis par Elementor) — poser une couleur de carte est
 * un choix qui vaut pour toutes les rangees.
 */
.ivy-services--alternee .ivy-services__item:nth-child(even) {
	background: var( --ivy-soft, rgb( 244 242 238 ) );
}

.ivy-services--alternee .ivy-services__media { grid-column:2; grid-row:1; margin:0; overflow:hidden; }
.ivy-services--alternee .ivy-services__item-copy { grid-column:1; grid-row:1; }
.ivy-services--alternee .ivy-services__item:nth-child(even) .ivy-services__media { grid-column:1; grid-row:1; }
.ivy-services--alternee .ivy-services__item:nth-child(even) .ivy-services__item-copy { grid-column:2; grid-row:1; }

.ivy-services--alternee .ivy-services__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: clamp( 340px, 40vw, 620px );
	object-fit: cover;
	border-radius: inherit;
}

/* Ratio choisi (`media_ratio`) : l'image prend la forme demandee au lieu de remplir la
   hauteur de la rangee. Regles gardees par la presence d'une classe de ratio explicite,
   jamais par exclusion de `auto` : sans classe, la variable n'existe pas. */
.ivy-services--alternee:is( .ivy-services--ratio-16-9, .ivy-services--ratio-4-3, .ivy-services--ratio-1-1, .ivy-services--ratio-3-4, .ivy-services--ratio-4-5 ) .ivy-services__media { align-self: center; }
.ivy-services--alternee:is( .ivy-services--ratio-16-9, .ivy-services--ratio-4-3, .ivy-services--ratio-1-1, .ivy-services--ratio-3-4, .ivy-services--ratio-4-5 ) .ivy-services__media img { height: auto; min-height: 0; aspect-ratio: var( --ivy-services-ratio ); }

/*
 * Le cote EXTERIEUR de la colonne editoriale porte la marge de section, le
 * cote interieur porte la gouttiere : c'est ce qui aligne le texte sur le
 * titre de section tout en le tenant a distance de l'image.
 */
/*
 * `align-items: flex-start` n'est pas cosmetique. Sans lui, la valeur par
 * defaut `stretch` etire l'icone sur toute la colonne, et le SVG rendu par
 * Icons_Manager n'a pas de dimension propre : mesure a 300 px de cote au
 * lieu de 1,35 rem. C'est le meme piege que le `min-height` herite par une
 * icone de contact — un descendant nu prend la mesure qu'on lui laisse.
 */
.ivy-services--alternee .ivy-services__item-copy {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	justify-content: center;
	padding: clamp( 40px, 6vw, 88px ) var( --ivy-alternee-gutter ) clamp( 40px, 6vw, 88px ) var( --ivy-alternee-edge );
}

.ivy-services--alternee .ivy-services__item:nth-child(even) .ivy-services__item-copy {
	padding-right: var( --ivy-alternee-edge );
	padding-left: var( --ivy-alternee-gutter );
}

/*
 * Une rangee sans image ne laisse pas une demi-largeur vide : la colonne
 * editoriale prend les deux pistes et retrouve une marge symetrique. Meme
 * exigence que la regle 1 sur toute partie masquable.
 */
.ivy-services--alternee .ivy-services__item-copy:only-child {
	grid-column: 1 / -1;
	align-items: center;
	padding-right: var( --ivy-alternee-edge );
	padding-left: var( --ivy-alternee-edge );
	text-align: center;
}

.ivy-services--alternee .ivy-services__icon { display:inline-grid; min-width:1em; min-height:1em; place-items:center; margin-bottom:24px; color:var( --ivy-item_icon-color, var( --ivy-ink, rgb( 17 17 17 ) ) ); font-size:calc( ( 1.35rem ) * var( --ivy-text-scale, 1 ) ); line-height:1; }
.ivy-services--alternee .ivy-services__icon svg { width:1em; height:1em; fill:currentcolor; }

/*
 * Le badge de service, avant le titre — meme place de lecture que l'eyebrow
 * de section. Fond teinte par melange avec l'accent : aucun hexadecimal,
 * engagement 5 tenu meme au repli.
 */
.ivy-services--alternee .ivy-services__item-label {
	display: inline-flex;
	margin-bottom: 12px;
	padding: 5px 12px;
	border: var( --ivy-item_label-border-width, 0 ) solid var( --ivy-item_label-border-color, transparent );
	border-radius: var( --ivy-item_label-border-radius, 999px );
	background: var( --ivy-item_label-background-color, color-mix( in srgb, var( --ivy-accent, rgb( 17 17 17 ) ) 12%, transparent ) );
	color: var( --ivy-item_label-color, var( --ivy-accent, rgb( 17 17 17 ) ) );
	font-size: var( --ivy-font-label );
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
}

/*
 * Aucun titre n'est limite en pixels ni en caracteres : il occupe toute la
 * largeur de sa colonne editoriale, comme le titre de section. `.ivy-services__item-title`
 * plafonnait a `20ch`, ce qui le repliait tot alors que la colonne avait de
 * la place — mesure remontee par le client sur `services/alternee`.
 */
.ivy-services--alternee .ivy-services__item-title { width:100%; margin:0; color:var( --ivy-item_title-color, var( --ivy-ink, rgb( 17 17 17 ) ) ); line-height:1.04; }
/* Le lien ENVELOPPE le texte du titre : `currentColor` vaut l'`inherit`
   d'avant, donc il suit `item_title` tant que sa propre couleur n'est pas
   posee — mais elle passe maintenant, au lieu d'etre avalee ici. */
.ivy-services--alternee .ivy-services__item-link { color:var( --ivy-item_link-color, currentColor ); text-decoration-thickness:1px; text-underline-offset:.2em; }
.ivy-services--alternee .ivy-services__item-link:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.ivy-services--alternee .ivy-services__item-text { width:100%; margin:16px 0 0; color:var( --ivy-item_text-color, var( --ivy-muted, rgb( 82 82 82 ) ) ); line-height:1.7; }
.ivy-services--alternee .ivy-services__item-link { display:inline-flex; align-items:center; min-height:44px; }

/*
 * Inclusions et exclusions occupent, comme le titre et le texte, toute la
 * largeur de la colonne editoriale — pas de plafond en `ch`.
 */
.ivy-services--alternee .ivy-services__includes,
.ivy-services--alternee .ivy-services__excludes { display:grid; width:100%; row-gap:10px; margin:20px 0 0; padding:0; list-style:none; }
.ivy-services--alternee .ivy-services__include,
.ivy-services--alternee .ivy-services__exclude { display:flex; align-items:baseline; gap:12px; margin:0; line-height:1.5; }
.ivy-services--alternee .ivy-services__include { color:var( --ivy-item_list_item-color, currentColor ); }

/*
 * La puce est une COCHE dessinee au CSS (traits en `::before`, meme idiome
 * que `.ivy-pricing__check`) : un point plein ne se lisait pas comme un
 * repere d'inclusion — remonte par le client sur `services/alternee`, qui
 * cherchait a y poser une icone alors qu'aucun controle n'en offre.
 */
.ivy-services--alternee .ivy-services__bullet {
	position: relative;
	display: inline-grid;
	box-sizing: border-box;
	width: 1.1em;
	aspect-ratio: 1;
	flex: none;
	margin-top: .15em;
	color: var( --ivy-item_bullet-color, currentColor );
}
/*
 * `:empty` et non une classe posee au gabarit : le repli ne se dessine QUE
 * quand aucune icone n'est choisie dans le panneau (`cards_include_icon`),
 * si bien qu'une icone posee remplace le repli sans jamais s'empiler dessus.
 */
.ivy-services--alternee .ivy-services__bullet:empty::before {
	position: absolute;
	top: 28%;
	left: 32%;
	width: .3em;
	height: .55em;
	border: solid currentcolor;
	border-width: 0 2px 2px 0;
	content: '';
	transform: rotate( 45deg );
}
.ivy-services--alternee .ivy-services__bullet svg { width:1em; height:1em; fill:currentcolor; }
.ivy-services--alternee .ivy-services__include-text { min-width:0; }

/*
 * Exclusions : meme gabarit que les inclusions, une CROIX plutot qu'une
 * coche et encre attenuee — la distinction se lit sans dependre de la seule
 * couleur, engagement d'accessibilite du rayon.
 */
.ivy-services--alternee .ivy-services__exclude { color:var( --ivy-item_exclude_item-color, var( --ivy-muted, rgb( 82 82 82 ) ) ); }
.ivy-services--alternee .ivy-services__exclude-bullet {
	position: relative;
	display: inline-grid;
	box-sizing: border-box;
	width: 1.1em;
	aspect-ratio: 1;
	flex: none;
	margin-top: .15em;
	color: var( --ivy-item_exclude_bullet-color, currentColor );
}
.ivy-services--alternee .ivy-services__exclude-bullet:empty::before,
.ivy-services--alternee .ivy-services__exclude-bullet:empty::after {
	position: absolute;
	top: 50%;
	left: 18%;
	width: 64%;
	height: 2px;
	background: currentcolor;
	content: '';
}
.ivy-services--alternee .ivy-services__exclude-bullet:empty::before { transform: translateY( -50% ) rotate( 45deg ); }
.ivy-services--alternee .ivy-services__exclude-bullet:empty::after { transform: translateY( -50% ) rotate( -45deg ); }
.ivy-services--alternee .ivy-services__exclude-bullet svg { width:1em; height:1em; fill:currentcolor; }
.ivy-services--alternee .ivy-services__exclude-text { min-width:0; text-decoration:line-through; text-decoration-thickness:1px; text-decoration-color:color-mix( in srgb, currentColor 50%, transparent ); }

/*
 * Resultat ou objectif : pas de boite ni de filet par defaut, le gras suffit
 * a le distinguer du texte courant — demande par le client sur
 * `services/alternee`, qui l'emploie pour une ligne « Objectif : … » plutot
 * qu'une citation signee. `item_result` vise sa propre boite au lieu du
 * texte directement — d'ou l'override `selectors` du composition.json pour
 * typography/color, qui pointe la citation. `background`/`border` restent
 * des familles proposees dans le panneau, engagement 2 : sans reglage, ni
 * l'une ni l'autre n'affiche rien ici.
 */
.ivy-services--alternee .ivy-services__result { width:100%; margin:28px 0 0; }
.ivy-services--alternee .ivy-services__result-text { margin:0; color:var( --ivy-item_result-color, var( --ivy-ink, rgb( 17 17 17 ) ) ); font-size:var( --ivy-font-body ); font-weight:700; line-height:1.4; }
.ivy-services--alternee .ivy-services__result-author { margin-top:8px; color:var( --ivy-item_author-color, var( --ivy-muted, rgb( 82 82 82 ) ) ); font-size:var( --ivy-font-label ); letter-spacing:.04em; }

@media ( max-width:767px ) {
	.ivy-services--alternee .ivy-services__item,
	.ivy-services--alternee .ivy-services__item:nth-child(even) {
		grid-template-columns: minmax( 0, 1fr );
	}

	.ivy-services--alternee .ivy-services__item:nth-child(even) .ivy-services__media,
	.ivy-services--alternee .ivy-services__item:nth-child(even) .ivy-services__item-copy,
	.ivy-services--alternee .ivy-services__media,
	.ivy-services--alternee .ivy-services__item-copy {
		grid-column: auto;
		grid-row: auto;
	}

	.ivy-services--alternee .ivy-services__media img { min-height:0; aspect-ratio:var( --ivy-services-ratio, 4 / 3 ); }

	.ivy-services--alternee .ivy-services__item-copy,
	.ivy-services--alternee .ivy-services__item:nth-child(even) .ivy-services__item-copy {
		padding: clamp( 28px, 7vw, 44px ) var( --ivy-alternee-edge );
	}
}
.ivy-services--alternee.ivy-services--ratio-16-9 { --ivy-services-ratio: 16 / 9; }
.ivy-services--alternee.ivy-services--ratio-4-3 { --ivy-services-ratio: 4 / 3; }
.ivy-services--alternee.ivy-services--ratio-1-1 { --ivy-services-ratio: 1 / 1; }
.ivy-services--alternee.ivy-services--ratio-3-4 { --ivy-services-ratio: 3 / 4; }
.ivy-services--alternee.ivy-services--ratio-4-5 { --ivy-services-ratio: 4 / 5; }