/*
 * Services en grille de cartes. Cadre sous .ivy-services--grille : 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.
 *
 * Deux traitements, choisis par l'option `media_layout`. La peau est relevee
 * sur la page de reference posee par Alex le 14 aout, mesuree a 1440 px :
 * rayon 20 px, ombre portee douce, gouttiere 20 px, marge interieure 28 px,
 * titre 28 px en graisse 500. Les VALEURS sont reprises, jamais le balisage
 * ni le nom du plugin compagnon — `CompanionPluginsTest` garde ce mur, et il
 * a mordu sur ce commentaire meme.
 *
 *   .ivy-services--layout-top   l'image est un ELEMENT de la carte, le texte
 *                               se pose dessous sur la surface de la carte ;
 *   .ivy-services--layout-cover l'image est le SUPPORT de la carte, le texte
 *                               se pose par-dessus.
 *
 * Le §5.6 de la spec interdit duree, delai et easing DANS LE PANNEAU. Le
 * rythme est donc ecrit ici, une fois, et module par --ivy-motion.
 */
.ivy-services--grille { padding:clamp( 64px, 10vw, 144px ) clamp( 20px, 5vw, 72px ); }
.ivy-services--grille .ivy-services__header { width:100%; max-width:none; margin:0 auto clamp( 40px, 7vw, 80px ); text-align:center; }
.ivy-services--grille .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--grille .ivy-services__title { width:100%; max-width:none; margin:0; color:var( --ivy-title-color, var( --ivy-ink, rgb( 17 17 17 ) ) ); font-size:var( --ivy-font-h2 ); line-height:1.02; }
.ivy-services--grille .ivy-services__text { width:100%; max-width:none; margin:24px auto 0; color:var( --ivy-text-color, var( --ivy-muted, rgb( 82 82 82 ) ) ); line-height:1.7; }

.ivy-services--grille .ivy-services__list {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 300px ), 1fr ) );
	gap: 20px;
	max-width: 1280px;
	margin: 0 auto;
}

.ivy-services--grille .ivy-services__item {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var( --ivy-item-border-radius, 20px );
	background: var( --ivy-surface, rgb( 255 255 255 ) );
	box-shadow: 0 12px 32px -16px rgb( 15 23 42 / 35% );
	transition:
		transform calc( 550ms * var( --ivy-motion, 1 ) ) cubic-bezier( .22, 1, .36, 1 ),
		box-shadow calc( 550ms * var( --ivy-motion, 1 ) ) cubic-bezier( .22, 1, .36, 1 );
}

.ivy-services--grille .ivy-services__item:hover,
.ivy-services--grille .ivy-services__item:focus-within {
	box-shadow: 0 22px 48px -18px rgb( 15 23 42 / 45% );
	transform: translateY( -4px );
}

.ivy-services--grille .ivy-services__media { position:relative; margin:0; overflow:hidden; }
.ivy-services--grille .ivy-services__media img { display:block; width:100%; height:100%; object-fit:cover; transition:transform calc( 550ms * var( --ivy-motion, 1 ) ) cubic-bezier( .22, 1, .36, 1 ); border-radius: inherit; }
.ivy-services--grille .ivy-services__item:hover .ivy-services__media img { transform:scale( 1.04 ); }

/*
 * La couche vit sur un pseudo-element : la feuille lui donne sa GEOMETRIE,
 * le controle `overlay` sa couleur. Aucune valeur forcee ici en mode
 * « image en haut » — le texte y est pose sur la carte, pas sur la photo.
 */
.ivy-services--grille .ivy-services__media::before { position:absolute; z-index:1; inset:0; content:''; pointer-events:none; }

.ivy-services--grille .ivy-services__item-copy { position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; padding:clamp( 20px, 2.4vw, 28px ); }
.ivy-services--grille .ivy-services__icon { display:inline-grid; min-width:1em; min-height:1em; place-items:center; margin-bottom:16px; 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--grille .ivy-services__icon svg { width:1em; height:1em; fill:currentcolor; }
.ivy-services--grille .ivy-services__item-title { margin:0; color:var( --ivy-item_title-color, var( --ivy-ink, rgb( 17 17 17 ) ) ); font-size:var( --ivy-font-h3 ); font-weight:500; line-height:1.2; }
/* 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--grille .ivy-services__item-link { display:inline-flex; min-height:44px; align-items:center; color:var( --ivy-item_link-color, currentColor ); text-decoration-thickness:1px; text-underline-offset:.2em; }
.ivy-services--grille .ivy-services__item-link:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.ivy-services--grille .ivy-services__item-text { margin:8px 0 0; color:var( --ivy-item_text-color, rgb( 84 89 95 ) ); font-size:var( --ivy-font-body ); line-height:1.55; }

/* ---- Image en haut : elle occupe 73 % de la carte sur la reference, ce que
   ce rapport reproduit sans figer une hauteur. ---- */
.ivy-services--grille.ivy-services--layout-top .ivy-services__media { aspect-ratio:11 / 10; }

/* ---- Image plein fond : le media devient le support, la copie se pose en
   pied de carte. Le degrade est le REPLI DE LA FEUILLE, pas un defaut de
   controle — sans lui, un texte blanc tomberait sur une photo claire. Le
   controle `overlay` emet a 0-4-0 et le remplace des que le client y touche. ---- */
.ivy-services--grille.ivy-services--layout-cover .ivy-services__item { min-height:clamp( 360px, 32vw, 460px ); }
.ivy-services--grille.ivy-services--layout-cover .ivy-services__media { position:absolute; inset:0; }
.ivy-services--grille.ivy-services--layout-cover .ivy-services__media::before { background:linear-gradient( rgb( 2 6 23 / 0% ) 32%, rgb( 2 6 23 / 55% ) 64%, rgb( 2 6 23 / 88% ) 100% ); }
.ivy-services--grille.ivy-services--layout-cover .ivy-services__item-copy { margin-top:auto; }
.ivy-services--grille.ivy-services--layout-cover .ivy-services__icon { color:var( --ivy-item_icon-color, rgb( 255 255 255 ) ); }
.ivy-services--grille.ivy-services--layout-cover .ivy-services__item-title { color:var( --ivy-item_title-color, rgb( 255 255 255 ) ); }
.ivy-services--grille.ivy-services--layout-cover .ivy-services__item-text { color:var( --ivy-item_text-color, rgb( 255 255 255 ) ); }

/*
 * Une carte SANS image garde sa mesure au lieu de s'effondrer sur son texte,
 * et son plein fond n'a plus rien a assombrir : la copie reprend les couleurs
 * de la carte. Sans cette rive, un texte blanc se poserait sur du blanc.
 */
.ivy-services--grille .ivy-services__item-copy:only-child { justify-content:center; min-height:clamp( 200px, 16vw, 260px ); }
.ivy-services--grille.ivy-services--layout-cover .ivy-services__item-copy:only-child .ivy-services__item-title { color:var( --ivy-item_title-color, var( --ivy-ink, rgb( 17 17 17 ) ) ); }
.ivy-services--grille.ivy-services--layout-cover .ivy-services__item-copy:only-child .ivy-services__item-text { color:var( --ivy-item_text-color, rgb( 84 89 95 ) ); }
.ivy-services--grille.ivy-services--layout-cover .ivy-services__item-copy:only-child .ivy-services__icon { color:var( --ivy-item_icon-color, var( --ivy-ink, rgb( 17 17 17 ) ) ); }

@media ( prefers-reduced-motion: reduce ) {
	.ivy-services--grille .ivy-services__item,
	.ivy-services--grille .ivy-services__media img {
		transition: none;
	}

	.ivy-services--grille .ivy-services__item:hover,
	.ivy-services--grille .ivy-services__item:focus-within,
	.ivy-services--grille .ivy-services__item:hover .ivy-services__media img {
		transform: none;
	}
}