/* ==========================================================================
   PAGE D'ACCUEIL : BANDE DE LOGOS EN BAS DU SLIDER (nov. 2026)
   --------------------------------------------------------------------------
   Meme bande que sur les pages contact et profil (voir css/contact-slider.css et js/contact-hero-logos.js) : logos blancs, en une rangee,
   centres entre le bas des boutons du slider (precedent / pause / suivant) et le bas du slider, avec pour blanc lateral la distance ecran -> icone plein ecran (voir js/index-slider-logos.js), avec le degrade "ecran bombe" sur les cotes. DESKTOP (>= 1200 px) ET TABLETTE (768-1199 px) ; PAS SUR MOBILE (<= 767 px).
   Le script est js/index-slider-logos.js ; l'ordre des ecrans et la duree (2 slides par ecran) se reglent en haut de ce fichier.
   ========================================================================== */
section.slider-homepage.has-logo-strip { position: relative; }

.index-hero-logos {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: calc(100vh - var(--top-banner-height, 34px));   /* le script la cale sur la hauteur reelle du slider */
	z-index: 6;
	margin: 0;
	padding: 0;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}
.index-hero-logos .cht-logos {
	--kl: .95;
	position: absolute;
	left: 50%;
	top: 86%;
	transform: translate(-50%, -50%);
	width: 80.7%;
	margin: 0;
	/* MARGE VERTICALE : le masque ci-dessous coupe tout ce qui depasse de la boite du bloc (cf. logo Publicis, remonte par NUDGE).
	   Ce padding symetrique agrandit la boite ; le script le retire du calcul de hauteur. */
	--cht-pad: calc(var(--cht-size, 60px) * var(--kl) * .25);
	padding: var(--cht-pad) 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--cht-size, 60px) * var(--kl) * .08);
	pointer-events: none;
	--cht-fade: 22%;
	--cht-fade-strength: .5;
	--cht-m0: calc(1 - var(--cht-fade-strength));
	--cht-m1: calc(1 - var(--cht-fade-strength) * .6);
	--cht-m2: calc(1 - var(--cht-fade-strength) * .2);
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, var(--cht-m0)) 0%, rgba(0, 0, 0, var(--cht-m1)) calc(var(--cht-fade) * .4), rgba(0, 0, 0, var(--cht-m2)) calc(var(--cht-fade) * .75), #000 var(--cht-fade), #000 calc(100% - var(--cht-fade)), rgba(0, 0, 0, var(--cht-m2)) calc(100% - var(--cht-fade) * .75), rgba(0, 0, 0, var(--cht-m1)) calc(100% - var(--cht-fade) * .4), rgba(0, 0, 0, var(--cht-m0)) 100%);
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, var(--cht-m0)) 0%, rgba(0, 0, 0, var(--cht-m1)) calc(var(--cht-fade) * .4), rgba(0, 0, 0, var(--cht-m2)) calc(var(--cht-fade) * .75), #000 var(--cht-fade), #000 calc(100% - var(--cht-fade)), rgba(0, 0, 0, var(--cht-m2)) calc(100% - var(--cht-fade) * .75), rgba(0, 0, 0, var(--cht-m1)) calc(100% - var(--cht-fade) * .4), rgba(0, 0, 0, var(--cht-m0)) 100%);
}
.index-hero-logos .cht-row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: calc(var(--cht-size, 60px) * var(--kl) * .12);
}
.index-hero-logos .cht-row img {
	display: block;
	width: calc(var(--cht-size, 60px) * var(--kl));
	height: auto;
	-webkit-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1);          /* tous les logos en BLANC */
	opacity: 0;
	transition: opacity .7s ease;
}
.index-hero-logos .cht-row img.on { opacity: 1; }

/* Bande masquee sur MOBILE uniquement (<= 767 px, version validee, inchangee). Desktop ET tablette (>= 768 px) l'affichent. Plein ecran du slider : la bande se range. */
@media only screen and (max-width: 767px) { .index-hero-logos { display: none !important; } }

/* TABLETTE (768-1199 px) : mise en page verticale equilibree (js/index-slider-logos.js, placeTablet) :
   logo du projet / bouton VISIONNER ou COMING SOON / precedent - pause - suivant / ligne de logos, separes par le meme ecart.
   La legende (logo + bouton) n'est pas deplacee : le script ne change que --cap-scroll-top (haut du bloc de boutons), et css/top-banner.css re-repartit la legende a ecarts egaux. Ligne de logos posee par le script.
   Fondu lateral un peu plus court qu'en desktop pour que les logos des bords restent lisibles sur une largeur reduite. */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
	.index-hero-logos .cht-logos { --cht-fade: 12%; }
}
body.fullscreen .index-hero-logos { display: none !important; }