/**
 * LFD - Ils parlent de nous — styles du bloc (front + aperçu éditeur).
 */

.lfd-ipdn {
	margin: 0 auto;
}

.lfd-ipdn__titre {
	text-align: center;
	margin: 0 0 1.5em;
}

.lfd-ipdn__empty {
	padding: 1em;
	text-align: center;
	color: #666;
	font-style: italic;
}

/* Grille : nombre de colonnes piloté par le bloc via --lfd-ipdn-cols */
.lfd-ipdn__grid {
	display: grid;
	grid-template-columns: repeat(var(--lfd-ipdn-cols, 3), minmax(0, 1fr));
	gap: 30px;
}

/* Carte média */
.lfd-ipdn-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.06 );
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.lfd-ipdn-card:hover {
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.12 );
	transform: translateY( -2px );
}

/* Zone image : bord à bord, aucun padding — l'image touche tous les bords du cadre */
.lfd-ipdn-card__media {
	background: #fff;
}

.lfd-ipdn-card__media-link {
	display: block;
	width: 100%;
}

.lfd-ipdn-card__image {
	display: block;
	width: 100%;            /* occupe toute la largeur de la carte */
	aspect-ratio: 16 / 9;   /* hauteur homogène pour toutes les cartes */
	object-fit: cover;      /* remplit tout le cadre, sans déformation */
}

/* Corps de la carte */
.lfd-ipdn-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px;
}

.lfd-ipdn-card__title {
	font-size: 1.15rem;
	line-height: 1.3;
	margin: 0 0 0.5em;
}

.lfd-ipdn-card__title a {
	text-decoration: none;
	color: inherit;
}

.lfd-ipdn-card__title a:hover {
	text-decoration: underline;
}

.lfd-ipdn-card__excerpt {
	flex: 1 1 auto;
	margin: 0 0 1.2em;
	line-height: 1.5;
}

.lfd-ipdn-card__more {
	margin: auto 0 0;
}

.lfd-ipdn-card__button {
	display: inline-block;
	padding: 10px 22px;
	background: #0b3d6b;
	color: #fff !important;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
	transition: background 0.2s ease;
}

.lfd-ipdn-card__button:hover,
.lfd-ipdn-card__button:focus {
	background: #082c4d;
	color: #fff !important;
}

/* Responsive */
@media ( max-width: 1024px ) {
	.lfd-ipdn__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 640px ) {
	.lfd-ipdn__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Version carrousel infini
   Réutilise strictement les cartes .lfd-ipdn-card : seule la mise en page
   (défilement au lieu d'une grille) change. Le mouvement, la boucle infinie,
   les flèches et le défilement auto sont pilotés par assets/js/carrousel-front.js.
   ========================================================================== */

/* Scène : flèches à gauche et à droite, fenêtre du carrousel au centre. */
.lfd-ipdn-carrousel__stage {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Fenêtre visible : occupe l'espace entre les flèches, masque ce qui dépasse. */
.lfd-ipdn-carrousel__viewport {
	flex: 1 1 auto;
	min-width: 0; /* autorise la fenêtre à rétrécir dans le flex */
	overflow: hidden;
}

/* Piste : rangée de cartes déplacée par le script via translateX. */
.lfd-ipdn-carrousel__track {
	display: flex;
	gap: 30px;
	will-change: transform;
}

/*
 * Largeur des cartes : le script la calcule selon le nombre visible choisi.
 * La valeur ci-dessous n'est qu'un repli avant l'exécution du script (no-JS).
 */
.lfd-ipdn-carrousel .lfd-ipdn-card {
	flex: 0 0 320px;
	width: 320px;
}

/* Flèches de navigation : masquées tant que le script n'a pas pris la main. */
.lfd-ipdn-carrousel__nav {
	flex: 0 0 auto;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #0b3d6b;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.25 );
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.lfd-ipdn-carrousel.is-ready .lfd-ipdn-carrousel__nav {
	display: flex;
}

.lfd-ipdn-carrousel__nav:hover,
.lfd-ipdn-carrousel__nav:focus {
	background: #1461a5; /* bleu plus clair au survol */
	color: #fff;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.3 );
	transform: scale( 1.08 );
}

.lfd-ipdn-carrousel__nav span {
	display: block;
	margin-top: -4px; /* recentre visuellement le chevron */
}

/* ==========================================================================
   Version liste complète (bloc lfd/ils-parlent-de-nous-liste)
   Réutilise strictement les cartes .lfd-ipdn-card : seule la mise en page
   change. Toutes les publications sont affichées, empilées les unes en
   dessous des autres et réparties en colonnes côte à côte. Chaque colonne
   contient le nombre d'éléments choisi dans le réglage du bloc.
   ========================================================================== */

.lfd-ipdn-liste {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 30px;
}

/* Une colonne : cartes empilées les unes en dessous des autres. */
.lfd-ipdn-liste__col {
	flex: 1 1 0;
	min-width: 260px;      /* largeur lisible ; provoque le retour à la ligne des colonnes si l'écran est étroit */
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* Sur mobile : une seule colonne, tout est empilé verticalement. */
@media ( max-width: 640px ) {
	.lfd-ipdn-liste__col {
		flex-basis: 100%;
	}
}

/* ==========================================================================
   Ajustements spécifiques au conteneur .block-ils-parlent-de-nous
   ========================================================================== */

/* 1/ Espacement vertical du bloc. */
.block-ils-parlent-de-nous {
	padding-top: 75px !important;
	padding-bottom: 75px !important;
}

/*
 * Extrait à hauteur fixe : on tronque le texte sur 3 lignes avec des points
 * de suspension (…) plutôt qu'une coupe brute. La combinaison line-clamp
 * (Webkit/Blink, largement supporté) + max-height garantit le résultat
 * même sur les navigateurs sans line-clamp.
 */
.block-ils-parlent-de-nous .lfd-ipdn-card__excerpt {
	max-height: 70px;
	height: 70px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	text-overflow: ellipsis;
}

/* ==========================================================================
   Cadres du carrousel (slide) et de la grille : format d'image fixe
   ========================================================================== */

/* 2/ Le cadre média occupe toute la largeur de la carte sur 230px de haut. */
.lfd-ipdn-carrousel .lfd-ipdn-card__media-link,
.lfd-ipdn__grid .lfd-ipdn-card__media-link {
	display: flex;            /* permet de centrer le visuel en hauteur */
	align-items: center;      /* 3/ centrage vertical du visuel */
	justify-content: center;
	width: 100%;
	height: 230px;
	max-height: 230px;
	overflow-y: hidden;
}

/* 3/ Le visuel occupe 100 % de la largeur disponible, hauteur libre. */
.lfd-ipdn-carrousel .lfd-ipdn-card__media-link .lfd-ipdn-card__image,
.lfd-ipdn__grid .lfd-ipdn-card__media-link .lfd-ipdn-card__image {
	width: 100%;
	height: auto;
	aspect-ratio: auto;       /* on abandonne le ratio 16/9 imposé plus haut */
	object-fit: contain;
}