/* --- Bloc card - Effet aggrandissant au hover --- */
.cards{
  display:flex;
  gap: 1rem;
}

.cards .card{
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	transition: flex 500ms ease, transform 300ms ease;
}

/* La card active est grande */
.cards .card.is-featured{
	flex: 3 1 0%;
}

/* sinon petite */
.cards .card:not(.is-featured){
	flex: 1 1 0%;
}

/* Le titre est petit par défaut */
.cards .card h4{ 
	transform: scale(0.85);
	transform-origin: left bottom;
	transition: transform 300ms ease;
}

/* grand quand actif */
.cards .card.is-featured h4{ 
	transform: scale(1); 
}

/* Contenu du texte  */
.cards .card:not(.is-featured)  .content-trim
.elementor-widget-container,
.cards .card.is-featured .content-trim
.elementor-widget-container{
	overflow: hidden;
 	display: -webkit-box;
 	-webkit-box-orient: vertical;
 	-webkit-line-clamp: var(--lines);
}

.cards .card:not(.is-featured)  .content-trim
.elementor-widget-container{
	max-height: 100px;
	 --lines: 5;
}

.cards .card.is-featured .content-trim
.elementor-widget-container{
	 --lines: 10;
}


/* Icône flèche */
.cards .card .elementor-icon{
	transform: scale(0.5);
	transform-origin: left bottom;
	transition: transform 300ms ease;
}

.cards .card.is-featured .elementor-icon{
	transform: scale(1);
}

/* Hover visuel */
.cards .card:hover{ 
	transform: translateZ(0);
}


/* --- Bloc card 2 - Effet texte qui apparait/disparait --- */

@media screen and (min-width:1025px){
	
body .cards-2 .card{
	height: max-content;
}

/* Bloc texte qui s’ouvre/ferme */
.cards-2 .card .content-trim{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-height: var(--clamped-h, 3.2em);
  transition: max-height .35s ease;
  -webkit-mask-image: linear-gradient(#000 75%, transparent 100%);
          mask-image: linear-gradient(#000 75%, transparent 100%);
}

/* État ouvert */
.cards-2 .card.is-visible .content-trim{
  display: block;
  -webkit-line-clamp: initial;
  -webkit-mask-image: none;
          mask-image: none;
  max-height: var(--full-h, 9999px);
}

/* Hover visuel */
.cards-2 .card:hover{ transform: translateZ(0); }

}