.wp-block-slider-trombinoscope {
	margin: var(--wp--preset--spacing--l) auto;

	/* Gestion des largeurs Gutenberg */
	&.alignwide {
		max-width: var(--wp--style--global--wide-size, 1200px);
	}

	&.alignfull {
		max-width: none;
		width: 100%;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	/* Si le bloc n'a pas d'alignement spécifique */
	&:not(.alignwide):not(.alignfull) {
		max-width: var(--wp--style--global--content-size, 800px);
	}

	/* Mode Grille */
	&.mode-grille {
		.trombinoscope-grille {
			display: grid;
			gap: var(--wp--preset--spacing--m);
		}

		/* Par défaut : 4 éléments par ligne */
		&.nb4 .trombinoscope-grille,
		&:not(.nb3):not(.nb5) .trombinoscope-grille {
			grid-template-columns: repeat(4, 1fr);
		}

		/* 3 éléments par ligne */
		&.nb3 .trombinoscope-grille {
			grid-template-columns: repeat(3, 1fr);
		}

		/* 5 éléments par ligne */
		&.nb5 .trombinoscope-grille {
			grid-template-columns: repeat(5, 1fr);
		}

		.grille-item {
			position: relative;
		}

		.personne-card {
			position: relative;
			border-radius: var(--wp--custom--radius--m);
			overflow: hidden;
			aspect-ratio: 1;
			display: flex;
			flex-direction: column;
		}

		.personne-photo {
			flex: 1;
			position: relative;
			overflow: hidden;
			padding : 10px 10px 0 10px;
			margin: 0;
		}

	.personne-photo img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: bottom center;
		display: block;
	}

		.personne-overlay {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
			color: white;
			text-align: center;
			z-index: 1;
			padding: 5px 10px;
		}

		.personne-nom {
			font-size: 1rem;
			font-weight: 600;
			margin-bottom: var(--wp--preset--spacing--xxs);
		}


		.personne-linkedin {
			position: absolute;
			top: var(--wp--preset--spacing--s);
			right: var(--wp--preset--spacing--s);
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 32px;
			height: 32px;
			background-color: rgba(255, 255, 255, 0.9);
			border-radius: 50%;
			transition: background-color 0.3s ease;
		}

		.personne-linkedin::before {
			content: "";
			width: 16px;
			height: 16px;
			background-image: url("../../assets/images/linkedin.svg");
			background-size: contain;
			background-repeat: no-repeat;
		}

		/* Couleurs de fond pour le mode grille */
		.personne-card.bleu_novances {
			background-color: var(--wp--preset--color--primary);
		}
		.personne-card.bleu_vif {
			background-color: var(--wp--preset--color--third);
		}
		.personne-card.bleu_clair {
			background-color: #ACD8C8;
		}
		.personne-card.gris {
			background-color: #8D9C94;
		}
		.personne-card.jaune {
			background-color: #F4D72F;
		}
		.personne-card.orange {
			background-color: var(--wp--preset--color--secondary);
		}
		.personne-card.rose {
			background-color: #ED51BD;
		}
		.personne-card.vert_pomme {
			background-color: #B2DF39;
		}
		.personne-card.vert_clair {
			background-color: #90DDCB;
		}

	/* Panneau de détail */
	.grille-detail-panel {
		grid-column: 1 / -1;
		background-color: var(--wp--preset--color--contrast);
		opacity: 1;
		transform: translateY(0);
		border-radius: var(--wp--custom--radius--m);
	}

	.grille-detail-panel.animating-in {
		animation: fadeInSlideDown 0.4s ease forwards;
	}

	.grille-detail-panel.animating-out {
		animation: fadeOutSlideUp 0.3s ease forwards;
	}

	@keyframes fadeInSlideDown {
		from {
			opacity: 0;
			transform: translateY(-20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes fadeOutSlideUp {
		from {
			opacity: 1;
			transform: translateY(0);
		}
		to {
			opacity: 0;
			transform: translateY(-20px);
		}
	}

	.grille-detail-panel .detail-content {
		display: grid;
		grid-template-columns: 2fr 3fr; /* 40% / 60% */
		gap: var(--wp--preset--spacing--l);
		align-items: start;
	}

	/* Colonne gauche - Photo */
	.detail-left {
		position: relative;
	}

	.detail-photo {
		position: relative;
		border-radius: var(--wp--custom--radius--m);
		overflow: hidden;
		aspect-ratio: 2;
	}

	.detail-photo img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: bottom center;
		display: block;
		padding: 10px 10px 0 10px;
	}

	/* Nom positionné par-dessus l'image */
	.detail-photo .detail-nom {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		color: var(--wp--preset--color--white);
		font-size: 1rem;
		font-weight: 600;
		margin: 0;
		padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
		background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
		z-index: 2;
	}

	/* Couleurs de fond pour la photo détail */
	.detail-photo.bleu_novances {
		background-color: var(--wp--preset--color--primary);
	}
	.detail-photo.bleu_vif {
		background-color: var(--wp--preset--color--third);
	}
	.detail-photo.bleu_clair {
		background-color: #ACD8C8;
	}
	.detail-photo.gris {
		background-color: #8D9C94;
	}
	.detail-photo.jaune {
		background-color: #F4D72F;
	}
	.detail-photo.orange {
		background-color: var(--wp--preset--color--secondary);
	}
	.detail-photo.rose {
		background-color: #ED51BD;
	}
	.detail-photo.vert_pomme {
		background-color: #B2DF39;
	}
	.detail-photo.vert_clair {
		background-color: #90DDCB;
	}

	/* Colonne droite - Informations */
	.detail-right {
		display: flex;
		flex-direction: column;
		color: var(--wp--preset--color--white);
	}

	.detail-nom {
		margin: 0;
		font-size: 1rem;
		font-weight: 600;
	}

	.detail-poste {
		margin: 0;
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 600;
	}

	/* Zone textes (présentation et citation) */
	.detail-textes {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--m);
		margin-top: var(--wp--preset--spacing--s);
	}

	/* Si seulement la présentation */
	.detail-textes:has(.detail-presentation):not(:has(.detail-citation)) {
		grid-template-columns: 1fr;
	}

	/* Si seulement la citation */
	.detail-textes:has(.detail-citation):not(:has(.detail-presentation)) {
		grid-template-columns: 1fr;
	}

	.detail-presentation {
		font-size: var(--wp--preset--font-size--small);
		line-height: 1.6;

		ul{
			padding-inline-start: 1.2rem;
		}
		p{
			margin-bottom: 5px;
			margin-top: 0;
			font-size: 0.8rem;
		}
	}

	/* Séparateur vertical */
	.detail-presentation + .detail-citation::before {
		content: '';
		position: absolute;
		left: calc(-35px);
		top: 0;
		bottom: 0;
		width: 1px;
		background-color: white;
	}

	.detail-citation {
		position: relative;
		font-size: var(--wp--preset--font-size--small);
		line-height: 1.6;
		font-style: italic;
	}

	.detail-linkedin {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		background-color: var(--wp--preset--color--blanc);
		border-radius: 50%;
		transition: transform 0.3s ease;
		margin-top: var(--wp--preset--spacing--xs);
	}

	.detail-linkedin::before {
		content: "";
		display: block;
		width: 14px;
		height: 14px;
		background-image: url("../../assets/images/linkedin.svg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}

	.detail-linkedin:hover {
		background-color: var(--wp--preset--color--blanc);
		transform: scale(1.1);
	}

	/* État actif sur l'élément cliqué */
	.grille-item.is-active .personne-card {
		opacity: 0.8;
		transform: scale(0.95);
	}

	.grille-item {
		cursor: pointer;
	}

	.grille-item .personne-card {
		transition: all 0.3s ease;
	}

	.grille-item:hover .personne-card {
		transform: scale(1.02);
	}
	}

	/* Mode Carrousel */
	.slider-trombinoscope {
		margin: 0 calc(-1 * var(--wp--preset--spacing--xs));
	}

	.slide-item {
		width: 31.5%;
		padding: 0 25px;
	}

	&.has-3-items {
		.slide-item {
			padding: 0	12px;
		}
	}
	.personne {
		position: relative;
	}

	.personne-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--xs);
	}

	.personne-photo {
		position: relative;
		padding-top: var(--wp--preset--spacing--m);
		padding-left: var(--wp--preset--spacing--s);
		margin-bottom: var(--wp--preset--spacing--xs);
		border-radius: var(--wp--custom--radius--m);
		border-top-left-radius: 0;
		border-left: 0;
		overflow: hidden;
		aspect-ratio: 1;
	}

	.personne-photo img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 0;
		position: relative;
		z-index: 1;
	}

	.personne-photo::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 39%;
		height: 18%;
		background-image: url('../../assets/images/mask4-top-left.svg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top left;
		pointer-events: none;
		z-index: 2;
	}

	.personne-photo.bleu_novances {
		background-color: var(--wp--preset--color--primary);
	}
	.personne-photo.bleu_vif {
		background-color: var(--wp--preset--color--third);
	}
	.personne-photo.bleu_clair {
		background-color: #ACD8C8;
	}
	.personne-photo.gris {
		background-color: #8D9C94;
	}
	.personne-photo.jaune {
		background-color: #F4D72F";
	}
	.personne-photo.orange {
		background-color: var(--wp--preset--color--secondary);
	}
	.personne-photo.rose {
		background-color: #ED51BD;
	}
	.personne-photo.vert_pomme {
		background-color: #B2DF39;
	}
	.personne-photo.vert_clair {
		background-color: #90DDCB;
	}

	.personne-identite {
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 600;
		color: var(--wp--preset--color--secondary);
		margin-bottom: var(--wp--preset--spacing--xxs);
	}

	.personne-fonction {
		font-size: var(--wp--preset--font-size--small);
		color: var(--wp--preset--color--secondary);
	}

	.personne-linkedin {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		background-color: var(--wp--preset--color--secondary);
		border-radius: 50%;
		transition: background-color 0.3s ease;
		margin-left: 10px;
		margin-right: 10px;
	}

	.personne-linkedin::before {
		content: "";
		width: 16px;
		height: 16px;
		background-image: url("../../assets/images/linkedin.svg");
		background-size: contain;
		background-repeat: no-repeat;
	}

	.screen-reader-text {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
	}

	/* Styles spécifiques Flickity */
	.flickity-slider {
		display: flex;
		align-items: stretch;
}

	/* Responsive */
	@media (max-width: 1024px) {
		&.mode-grille .trombinoscope-grille {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	@media (max-width: 768px) {
		&.mode-grille .trombinoscope-grille {
			grid-template-columns: repeat(2, 1fr);
		}

		&.mode-grille .detail-content {
			grid-template-columns: 200px 1fr;
			gap: var(--wp--preset--spacing--m);
		}

		&.mode-grille .detail-photo {
			max-width: 200px;
		}
		
		.slide-item, .wp-block-slider-trombinoscope .slide-item{
			width: 50%;
		}
	}

	@media (max-width: 640px) {
		&.mode-grille .trombinoscope-grille {
			grid-template-columns: 1fr !important;
		}

		&.mode-grille .grille-detail-panel .detail-content {
			grid-template-columns: 1fr !important;
		}

		&.mode-grille .detail-right {
			width: 100%;
		}
	}

	@media (max-width: 480px) {
		&.mode-grille .trombinoscope-grille {
			grid-template-columns: 1fr !important;
		}

		&.mode-grille .grille-detail-panel .detail-content {
			grid-template-columns: 1fr !important;
			gap: var(--wp--preset--spacing--s);
		}

		&.mode-grille .detail-right {
			width: 100%;
		}

		&.mode-grille .detail-photo {
			max-width: 100%;
		}

		&.mode-grille .grille-detail-panel {
			padding: var(--wp--preset--spacing--m);
		}

		/* Zone textes en colonne sur mobile */
		&.mode-grille .detail-textes {
			grid-template-columns: 1fr !important;
			gap: var(--wp--preset--spacing--s);
		}

		/* Supprimer le séparateur sur mobile */
		&.mode-grille .detail-presentation + .detail-citation::before {
			display: none;
		}
		
		.slide-item, .wp-block-slider-trombinoscope .slide-item {
			width: 90%;
		}
		}
	}