/**
 * Bloc : Texte & Logos (ri-texte-logos)
 * Convention : Classe complète sur la section, classes courtes scopées dedans.
 * Utilise les variables globales de root.css (--ri-*)
 */

/* ========================================
   Base
   ======================================== */

.ri-texte-logos {
	--ri-texte-logos-bg: var(--ri-color-white);
	width: 100%;
	padding-block: var(--ri-block-padding-xl);
	background-color: var(--ri-color-white);
	overflow-x: hidden;
}

.ri-texte-logos.has-light-gray-background-color {
	--ri-texte-logos-bg: var(--ri-color-grey-soft);
}

.ri-texte-logos .container {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ========================================
   Colonne Texte
   ======================================== */

.ri-texte-logos .content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ri-texte-logos .link-wrapper {
	justify-content: flex-end;
}

.ri-texte-logos .titre {
	margin: 0;
	font: 700 var(--ri-size-title-h2) / 1.4 var(--ri-font-1);
}

.ri-texte-logos .texte {
	font: 400 var(--ri-size-text-body) / 1.5 var(--ri-font-1);
}

.ri-texte-logos .texte p:last-child {
	margin-bottom: 0;
}


/* ========================================
   Colonne Logos - Slider sur 2 lignes
   ======================================== */

.ri-texte-logos .logos-wrapper {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--ri-space-md);
}

/* Effet de fondu à gauche */
.ri-texte-logos .logos-wrapper::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 58px;
	background: linear-gradient(90deg, var(--ri-texte-logos-bg) 0%, color-mix(in srgb, var(--ri-texte-logos-bg) 0%, transparent) 100%);
	z-index: 2;
	pointer-events: none;
}

/* Effet de fondu à droite */
.ri-texte-logos .logos-wrapper::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 58px;
	background: linear-gradient(270deg, var(--ri-texte-logos-bg) 0%, color-mix(in srgb, var(--ri-texte-logos-bg) 0%, transparent) 100%);
	z-index: 2;
	pointer-events: none;
}

.ri-texte-logos .logos-line {
	display: flex;
	gap: 75px;
	width: fit-content;
}

/* Ligne 1 : défilement vers la droite */
.ri-texte-logos .logos-line--right {
	animation: slideRight 30s linear infinite;
}

/* Ligne 2 : défilement vers la gauche */
.ri-texte-logos .logos-line--left {
	animation: slideLeft 30s linear infinite;
}

/* Animation vers la droite */
@keyframes slideRight {

	0% {
		transform: translateX(-33.333%);
	}

	100% {
		transform: translateX(0);
	}
}

/* Animation vers la gauche */
@keyframes slideLeft {

	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-33.333%);
	}
}

/* Pause au hover */
.ri-texte-logos .logos-line:hover {
	animation-play-state: paused;
}

/* Mode statique (≤ 3 logos) : pas de défilement */
.ri-texte-logos.is-static .logos-wrapper {
	overflow: visible;
}

.ri-texte-logos.is-static .logos-wrapper::before,
.ri-texte-logos.is-static .logos-wrapper::after {
	display: none;
}

.ri-texte-logos.is-static .logos-line {
	animation: none;
	flex-wrap: wrap;
	width: auto;
}

.ri-texte-logos .logo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 120px;
}

.ri-texte-logos .logo-img {
	max-width: 100%;
	max-height: 85px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Variante avec texte */
.ri-texte-logos.has-texte .container {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: auto auto;
	gap: 24px 80px;
	align-items: center;
}

.ri-texte-logos .container:has(.content > h2):not(:has(.content > .texte)) {
	gap: 24px;
}

.ri-texte-logos.has-texte .content {
	grid-column: 1;
	grid-row: 1;
}

.ri-texte-logos.has-texte .logos-wrapper {
	grid-column: 2;
	grid-row: 1;
}

.ri-texte-logos.has-texte .link-wrapper {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
}

/* Sans texte : slider pleine largeur avec padding interne */
.ri-texte-logos:not(.has-texte) .logos-wrapper {
	width: 100%;
}

.ri-texte-logos:not(.has-texte) .logos-line--left {
	display: none;
}

.single-nos-offres .ri-texte-logos .container:has(.content > h2):not(:has(.content > .texte)) {
	gap: 60px;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 782px) {

	.ri-texte-logos .logos-wrapper {
		gap: 0;
		padding-block: 12px;
	}

	.ri-texte-logos.has-texte .container {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.ri-texte-logos.has-texte .content {
		grid-column: 1;
		grid-row: 1;
	}

	.ri-texte-logos.has-texte .logos-wrapper {
		grid-column: 1;
		grid-row: 2;
	}

	.ri-texte-logos.has-texte .link-wrapper {
		grid-column: 1;
		grid-row: 3;
		justify-content: flex-end;
	}

	.ri-texte-logos .logos-wrapper::before,
	.ri-texte-logos .logos-wrapper::after {
		width: 28px;
	}

	.ri-texte-logos .logos-line {
		gap: 48px;
	}

	.ri-texte-logos .logo-item {
		width: 76px;
	}

	.ri-texte-logos .logo-img {
		max-height: 54px;
	}

	.single-nos-offres .ri-texte-logos .logo-img {
		max-height: 40px;
	}
}

/* ========================================
   Placeholder (éditeur)
   ======================================== */

.ri-texte-logos.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	padding: var(--ri-space-lg);
	background-color: var(--ri-color-grey-light);
	border: 2px dashed var(--ri-color-teal);
	text-align: center;
}