/**
 * ============================================================================
 * TÉMOIGNAGES CLIENTS — carrousel piloté par la classe « fd-temoignages »
 * ============================================================================
 *
 * Contenu 100 % éditable dans Divi : 1 ligne de la section = 1 témoignage.
 *
 * STRUCTURE DIVI ATTENDUE
 *   Section   Classe CSS : fd-temoignages           ← le carrousel
 *   └─ Ligne  structure 2 colonnes (2/5 + 3/5)      ← 1 ligne = 1 témoignage
 *      ├─ Colonne 1 : module Image                  ← logo du client
 *      └─ Colonne 2 : module Texte                  ← citation (1 ou plusieurs paragraphes)
 *                     module Texte                  ← nom de l'entreprise (dernier module)
 *
 * Option : ajouter la classe « fd-temoignages-autoplay » sur la section pour
 * un défilement automatique (8 s, voir js/temoignages-clients.js).
 *
 * Ne régler dans Divi ni le fond, ni les marges, ni les animations des
 * lignes et modules de cette section : la mise en forme vient d'ici.
 *
 * Fonctionnement : les lignes sont empilées dans la même cellule de grille
 * (hauteur = témoignage le plus long, aucun saut). Seules les COLONNES
 * glissent (animation en slide) : le fond gris, les guillemets et les puces,
 * communs à toutes les lignes, restent fixes.
 * Sans JS (ou avant son exécution), la première ligne est affichée.
 * Dans le Visual Builder, les lignes restent les unes sous les autres pour
 * pouvoir être éditées.
 *
 * Organisation :
 *   1. Variables
 *   2. Empilement des lignes + slide (hors Visual Builder)
 *   3. Ligne = bande grise
 *   4. Guillemets
 *   5. Colonne logo
 *   6. Colonne citation
 *   7. Puces de navigation (créées par le JS)
 *   8. Responsive
 *   9. Mouvement réduit
 *  10. Compatibilité mise en page existante
 */

/* =============================================================================
   1. VARIABLES — seuls réglages à modifier
   ============================================================================= */
#page-container .et_pb_section.fd-temoignages {
	--fdt-couleur: #004c6a;
	--fdt-fond: #eef2f3;
	--fdt-fond-logo: #fff;

	--fdt-col-logo: 40%;          /* largeur de la colonne logo                     */
	--fdt-pad-y: 50px;            /* marge haute / basse dans la bande              */
	--fdt-pad-x: 0px;             /* marge gauche / droite dans la bande            */
	--fdt-pad-logo-x: 50px;       /* marges gauche / droite autour de l'encart logo */
	--fdt-pad-encart: 40px;       /* marge intérieure de l'encart blanc             */
	--fdt-hauteur-min: 295px;     /* hauteur mini de l'encart (mesurée sur capture) */
	--fdt-logo-h-max: 200px;      /* hauteur maxi d'un logo (logos carrés)          */
	--fdt-logo-l-max: 100%;       /* largeur maxi d'un logo                         */

	--fdt-guillemets-l: 127px;    /* largeur des guillemets                         */
	--fdt-guillemets-top: -30px;  /* débord au-dessus de la bande                   */

	--fdt-puce-zone: 24px;        /* zone cliquable d'une puce (WCAG 2.5.8)         */
	--fdt-puce-taille: 10px;      /* diamètre visible                               */
	--fdt-nav-bas: 45px;          /* position des puces depuis le bas de la bande   */

	--fdt-duree: 0.6s;            /* durée du slide                                 */
	--fdt-easing: cubic-bezier(0.4, 0, 0.2, 1);

	color: var(--fdt-couleur);
}

/* =============================================================================
   2. EMPILEMENT DES LIGNES + SLIDE (hors Visual Builder)
   -----------------------------------------------------------------------------
   :where() n'ajoute aucune spécificité. .et-fb = Visual Builder Divi,
   .fd-builder = classe posée par functions.php quand l'URL contient et_fb.

   Slide piloté par le JS (classes posées sur les lignes) :
     (aucune)      → colonnes masquées, en place (les logos lazy se chargent)
     .is-entree    → placées hors champ côté entrée, sans transition
     .is-active    → glissent jusqu'à leur place
     .is-sortante  → glissent hors champ côté sortie, puis redeviennent masquées
   --fdt-sens (1 = suivant, -1 = précédent) et --fdt-distance (largeur de la
   ligne) sont posées par le JS uniquement (une seule autorité).
   overflow-x: clip coupe le contenu au bord de la bande sans créer de
   contexte d'empilement et sans couper les guillemets (axe vertical libre).
   ============================================================================= */
:where(body:not(.et-fb, .fd-builder)) #page-container .et_pb_section.fd-temoignages {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

:where(body:not(.et-fb, .fd-builder)) #page-container .et_pb_section.fd-temoignages > .et_pb_row {
	grid-area: 1 / 1;
	overflow-x: clip;
	overflow-y: visible;
	touch-action: pan-y;
}

:where(body:not(.et-fb, .fd-builder)) #page-container .et_pb_section.fd-temoignages > .et_pb_row > .et_pb_column {
	visibility: hidden;
	transform: none;
	transition: none;
}

/* Règles séparées volontairement : dans une liste de sélecteurs, un seul
   sélecteur rejeté par le navigateur (ou abîmé par une minification)
   annule toute la règle. Éviter aussi la syntaxe :nth-child(… of …), que la
   minification de WP Rocket transforme en « 1of » (invalide). */

/* Avant l'init JS : première ligne visible (aucun saut de mise en page). */
:where(body:not(.et-fb, .fd-builder)) #page-container .et_pb_section.fd-temoignages:not(.is-ready) > .et_pb_row:not(.et_pb_row ~ .et_pb_row) > .et_pb_column {
	visibility: visible;
}

:where(body:not(.et-fb, .fd-builder)) #page-container .et_pb_section.fd-temoignages > .et_pb_row.is-active > .et_pb_column {
	visibility: visible;
}

:where(body:not(.et-fb, .fd-builder)) #page-container .et_pb_section.fd-temoignages > .et_pb_row.is-sortante > .et_pb_column {
	visibility: visible;
}

:where(body:not(.et-fb, .fd-builder)) #page-container .et_pb_section.fd-temoignages > .et_pb_row.is-entree > .et_pb_column {
	transform: translateX(calc(var(--fdt-sens, 1) * var(--fdt-distance, 100vw)));
}

:where(body:not(.et-fb, .fd-builder)) #page-container .et_pb_section.fd-temoignages > .et_pb_row.is-active > .et_pb_column {
	transform: none;
	transition: transform var(--fdt-duree) var(--fdt-easing);
}

:where(body:not(.et-fb, .fd-builder)) #page-container .et_pb_section.fd-temoignages > .et_pb_row.is-sortante > .et_pb_column {
	transform: translateX(calc(var(--fdt-sens, 1) * var(--fdt-distance, 100vw) * -1));
	transition: transform var(--fdt-duree) var(--fdt-easing);
}

/* Visual Builder : espace entre les témoignages pour l'édition */
:where(body:is(.et-fb, .fd-builder)) #page-container .et_pb_section.fd-temoignages > .et_pb_row + .et_pb_row {
	margin-top: 60px;
}

/* =============================================================================
   3. LIGNE = BANDE GRISE
   -----------------------------------------------------------------------------
   Prolongement jusqu'au bord droit de l'écran (desktop) via border-image :
   peint sans créer de défilement horizontal, et calé sur la largeur réelle
   de la ligne (80 %, 90 % sous 1400px… peu importe).
   !important sur padding : nécessaire pour passer devant la règle du thème
   « #page-container #main-content .et_pb_section:not(.fd_hero)
   .et_pb_row:first-child:not(…) » (style.css, ROW DIVI), qui donnerait des
   marges différentes à la première et à la dernière ligne.
   ============================================================================= */
#page-container .et_pb_section.fd-temoignages > .et_pb_row {
	position: relative;
	display: grid;
	grid-template-columns: var(--fdt-col-logo) minmax(0, 1fr);
	align-items: stretch;
	margin-block: 0;
	padding: var(--fdt-pad-y) var(--fdt-pad-x) !important;
	background-color: var(--fdt-fond);
}

/* Clearfix Divi inutile en grille (et créerait une rangée vide) */
#page-container .et_pb_section.fd-temoignages > .et_pb_row::after {
	content: none;
}

@media (min-width: 981px) {
	#page-container .et_pb_section.fd-temoignages > .et_pb_row {
		border-image: linear-gradient(var(--fdt-fond), var(--fdt-fond)) fill 0 / / 0 100vw 0 0;
	}
}

/* =============================================================================
   4. GUILLEMETS
   -----------------------------------------------------------------------------
   Pseudo-élément identique sur chaque ligne (superposés) : reste fixe
   pendant les transitions. SVG en data URI : glyphe #004c6a, halo #eef2f3
   (couleurs à reporter ici si --fdt-couleur / --fdt-fond changent).
   ============================================================================= */
#page-container .et_pb_section.fd-temoignages > .et_pb_row::before {
	content: "";
	position: absolute;
	top: var(--fdt-guillemets-top);
	left: calc(var(--fdt-col-logo) - 5px);
	z-index: 2;
	display: block;
	width: var(--fdt-guillemets-l);
	aspect-ratio: 127 / 100;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 127 100'%3E%3Cpath fill='%23004c6a' stroke='%23eef2f3' stroke-width='16' stroke-linejoin='round' paint-order='stroke' d='M20 46C10 44 6 36 6 26C6 12 16 1 30 1C44 1 54 11 54 24C54 48 34 68 12 84L2 81C10 70 16 58 20 46ZM77 46C67 44 63 36 63 26C63 12 73 1 87 1C101 1 111 11 111 24C111 48 91 68 69 84L59 81C67 70 73 58 77 46Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
	pointer-events: none;
}

/* =============================================================================
   5. COLONNE LOGO (1re colonne de la ligne)
   ============================================================================= */
#page-container .et_pb_section.fd-temoignages > .et_pb_row > .et_pb_column {
	position: relative;
	z-index: 1;
	float: none;
	width: auto;
	margin: 0;
}

#page-container .et_pb_section.fd-temoignages > .et_pb_row > .et_pb_column:not(.et_pb_column ~ .et_pb_column) {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--fdt-hauteur-min);
	margin-inline: var(--fdt-pad-logo-x);
	padding: var(--fdt-pad-encart);
	background-color: var(--fdt-fond-logo);
}

#page-container .et_pb_section.fd-temoignages > .et_pb_row > .et_pb_column:not(.et_pb_column ~ .et_pb_column) > .et_pb_module {
	width: 100%;
	margin: 0;
	text-align: center;
}

#page-container .et_pb_section.fd-temoignages > .et_pb_row > .et_pb_column:not(.et_pb_column ~ .et_pb_column) img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(100%, var(--fdt-logo-l-max));
	max-height: var(--fdt-logo-h-max);
	margin: 0 auto;
}

/* =============================================================================
   6. COLONNE CITATION (2e colonne)
   -----------------------------------------------------------------------------
   Tous les modules sauf le dernier = citation ; le dernier = entreprise
   (s'il y a au moins 2 modules). Le trait est posé sous le module qui
   précède l'entreprise.
   ============================================================================= */
#page-container .et_pb_section.fd-temoignages > .et_pb_row > .et_pb_column + .et_pb_column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: 30px;
	color: var(--fdt-couleur);
}

#page-container .et_pb_section.fd-temoignages > .et_pb_row > .et_pb_column + .et_pb_column > .et_pb_module {
	margin: 0;
	font-size: 1rem;
	line-height: 1.8;
	color: inherit;
}

#page-container .et_pb_section.fd-temoignages > .et_pb_row > .et_pb_column + .et_pb_column > .et_pb_module p {
	padding-bottom: 1em;
	color: inherit;
}

#page-container .et_pb_section.fd-temoignages > .et_pb_row > .et_pb_column + .et_pb_column > .et_pb_module p:last-child {
	padding-bottom: 0;
}

/* Trait sous la citation */
#page-container .et_pb_section.fd-temoignages > .et_pb_row > .et_pb_column + .et_pb_column > .et_pb_module:has(+ .et_pb_module:last-child) {
	padding-bottom: 1em;
	border-bottom: 2px solid currentColor;
}

/* Entreprise */
#page-container .et_pb_section.fd-temoignages > .et_pb_row > .et_pb_column + .et_pb_column > .et_pb_module:last-child:not(:first-child) {
	margin-top: 20px;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.3;
}

#page-container .et_pb_section.fd-temoignages > .et_pb_row > .et_pb_column + .et_pb_column > .et_pb_module:last-child:not(:first-child) :is(p, strong, b) {
	font-size: inherit;
	font-weight: inherit;
}

/* =============================================================================
   7. PUCES DE NAVIGATION (créées par le JS dans la 1re ligne)
   -----------------------------------------------------------------------------
   Zone cliquable 24px, pastille visible 10px, alignées sur le début du texte.
   ============================================================================= */
#page-container .et_pb_section.fd-temoignages .fd-temoignages__nav {
	position: absolute;
	bottom: var(--fdt-nav-bas);
	left: var(--fdt-col-logo); /* pas de calc() avec --fdt-pad-x : certaines minifications réduisent « 0px » en « 0 », ce qui invalide le calc() */
	z-index: 3;
	display: flex;
	margin-left: calc((var(--fdt-puce-zone) - var(--fdt-puce-taille)) / -2);
}

#page-container .et_pb_section.fd-temoignages .fd-temoignages__puce {
	display: grid;
	place-items: center;
	width: var(--fdt-puce-zone);
	height: var(--fdt-puce-zone);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	color: var(--fdt-couleur);
	cursor: pointer;
}

#page-container .et_pb_section.fd-temoignages .fd-temoignages__puce::before {
	content: "";
	box-sizing: border-box;
	width: var(--fdt-puce-taille);
	height: var(--fdt-puce-taille);
	border: 1px solid currentColor;
	border-radius: 50%;
	transition: background-color 0.2s ease;
}

#page-container .et_pb_section.fd-temoignages .fd-temoignages__puce[aria-current="true"]::before {
	background-color: currentColor;
}

@media (hover: hover) and (pointer: fine) {
	#page-container .et_pb_section.fd-temoignages .fd-temoignages__puce:not([aria-current="true"]):hover::before {
		background-color: color-mix(in srgb, currentColor 40%, transparent);
	}
}

#page-container .et_pb_section.fd-temoignages .fd-temoignages__puce:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* =============================================================================
   8. RESPONSIVE — points de rupture de l'ancienne section (1280 / 980 / 550)
   -----------------------------------------------------------------------------
   ≤ 980px : une colonne (logo puis citation), bande sans prolongement,
   guillemets à droite, puces en bas de bande (place réservée dès qu'il y a
   au moins 2 lignes, pour éviter un saut à l'init JS).
   ============================================================================= */
@media (max-width: 1280px) {
	#page-container .et_pb_section.fd-temoignages {
		--fdt-pad-encart: 20px;
	}
}

@media (max-width: 980px) {
	#page-container .et_pb_section.fd-temoignages {
		--fdt-pad-x: 30px;
		--fdt-hauteur-min: 0px;
		--fdt-logo-h-max: 160px;
		--fdt-logo-l-max: 350px;
		--fdt-guillemets-l: 96px;
		--fdt-guillemets-top: -26px;
		--fdt-nav-bas: 30px;
	}

	#page-container .et_pb_section.fd-temoignages > .et_pb_row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 30px;
	}

	#page-container .et_pb_section.fd-temoignages:has(> .et_pb_row ~ .et_pb_row) > .et_pb_row {
		padding-bottom: calc(var(--fdt-nav-bas) + var(--fdt-puce-zone) + 20px) !important;
	}

	#page-container .et_pb_section.fd-temoignages > .et_pb_row > .et_pb_column:not(.et_pb_column ~ .et_pb_column) {
		margin-inline: 0;
	}

	#page-container .et_pb_section.fd-temoignages > .et_pb_row > .et_pb_column + .et_pb_column {
		padding-block: 0;
	}

	#page-container .et_pb_section.fd-temoignages > .et_pb_row::before {
		left: auto;
		right: var(--fdt-pad-x);
	}

	#page-container .et_pb_section.fd-temoignages .fd-temoignages__nav {
		left: var(--fdt-pad-x);
	}
}

@media (max-width: 550px) {
	#page-container .et_pb_section.fd-temoignages {
		--fdt-pad-x: 20px;
		--fdt-guillemets-l: 85px;
		--fdt-guillemets-top: -20px;
	}

	#page-container .et_pb_section.fd-temoignages > .et_pb_row > .et_pb_column + .et_pb_column > .et_pb_module:last-child:not(:first-child) {
		font-size: 1.2rem;
	}
}

/* =============================================================================
   9. MOUVEMENT RÉDUIT
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
	#page-container .et_pb_section.fd-temoignages > .et_pb_row.is-active > .et_pb_column,
	#page-container .et_pb_section.fd-temoignages > .et_pb_row.is-sortante > .et_pb_column,
	#page-container .et_pb_section.fd-temoignages .fd-temoignages__puce::before {
		transition: none;
	}

	#page-container .et_pb_section.fd-temoignages > .et_pb_row.is-sortante > .et_pb_column {
		visibility: hidden;
	}
}

/* =============================================================================
   10. COMPATIBILITÉ MISE EN PAGE EXISTANTE
   -----------------------------------------------------------------------------
   Reprend pour la nouvelle classe la règle de style.css écrite pour
   l'ancienne section (« #fd_clients:has(+ .temoignages_clients) »).
   ============================================================================= */
#fd_clients:has(+ .fd-temoignages) {
	margin-bottom: 0 !important;
}