/* ==========================================================================
   LEGENDE CENTRALE DU SLIDER (pages projet clients)
   --------------------------------------------------------------------------
   Un bloc unique, fixe, au centre du slider : le nom du projet en gros (.st-projet), la marque
   en dessous (.st-marque). Le point milieu ENTRE les deux est le centre vertical exact du slider :
   le nom du projet monte au-dessus, la marque descend en dessous. Texte blanc pur, sans voile ; seule exception : une lueur externe noire a 10 % sur le TITRE (--st-lueur). Il ne bouge pas pendant le fondu
   des images. Affichage "hall de gare" + glitch en boucle aleatoire : js/slider-titre.js
   (le moteur de glitch : js/tagline-glitch.js).
   Markup (dans #epicSlider, apres <ul id="slides">) :
     <div class="slider-titre" aria-hidden="true">
       <span class="st-projet">TRIPLE FRONTIER</span>
       <div class="st-logo" style="aspect-ratio:367 / 99"><img src="../images/footer/BRANDS/netflix.png" alt="" style="width:151%;left:-25.6%;top:-230%"></div>   (ou <span class="st-marque">NETFLIX</span>)
     </div>
   Tailles en clamp() : grand sur desktop, reduit sur mobile (slider de 300 px de haut).
   pointer-events:none : le slider reste cliquable et "swipable".
   POUR TOUT DESACTIVER : retirer le lien vers ce fichier (ou le bloc).
   ========================================================================== */
.epic-slider .slider-titre {
	/* z-index 5 : AU-DESSUS de la mire du slider (trame horizontale, vignette, glitch TV = .glitch81-overlay, z-index 5 dans top-banner.css ;
	   comme ce bloc est place apres les slides dans le DOM, il passe devant a z-index egal). Titre, logo et glitchs restent donc nets,
	   sans trame par-dessus. Les commandes du slider (fleches, pastilles : z-index 6) restent au-dessus. Pour remettre la trame par-dessus : z-index 3. */
	position: absolute; inset: 0; z-index: 5;
	display: flex; flex-direction: column; align-items: center; justify-content: center;   /* le GROUPE (titre + logo) est centre sur la hauteur du slider */
	padding: 0 0 calc(2 * var(--st-lift, 0px)); box-sizing: border-box; text-align: center; pointer-events: none;   /* padding-bas = 2 x --st-lift : le groupe monte de --st-lift (voir plus bas) */
	color: #fff;
}
.slider-titre .st-projet,
.slider-titre .st-marque { position: relative; z-index: 1; }

.slider-titre .st-projet {
	max-width: 83%;
	margin-bottom: clamp(6px, .8vw, 15px);
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; font-weight: 900;
	text-transform: uppercase; letter-spacing: .04em; line-height: .96;
	font-size: clamp(30.4px, 5.49vw, 98.7px);   /* -30 % puis +15 % puis +10 % */
	text-wrap: balance; overflow-wrap: break-word;
	/* LUEUR EXTERNE NOIRE, a 10 % (--st-lueur), degrade plus net : assombrit legerement l'image autour du titre pour mieux le lire. Equivalent d'une lueur
	   externe "Produit" (multiply) noire a 10 % : multiplier par du noir revient a poser du noir a 10 %. 3 halos empiles (serre / moyen / large),
	   en em : la lueur suit la taille du titre (portee max ~ 0,6 em). POUR LA REGLER : --st-lueur (opacite) ; pour la retirer : --st-lueur: 0. */
	text-shadow: 0 0 .1em rgba(0, 0, 0, var(--st-lueur)), 0 0 .3em rgba(0, 0, 0, var(--st-lueur)), 0 0 .6em rgba(0, 0, 0, var(--st-lueur));
}
.slider-titre .st-marque {
	margin-top: clamp(6px, .8vw, 15px);
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; font-weight: 500;
	text-transform: uppercase; letter-spacing: .55em; text-indent: .55em; /* indent : recentre malgre l'espacement final */
	font-size: clamp(9px, .95vw, 17px); line-height: 1.2;   /* -30 % */
}

/* LOGO de la marque (a la place du texte .st-marque) : 55 % de sa TAILLE D'ORIGINE sur desktop (--st-logo-scale, reduit par palier), centre sous le nom du projet.
   Taille d'origine = le logo visible dans son fichier blanc du pied de page (--w, en ligne dans la page : de 367 a 555 px de large).
   Le fichier (images/footer/BRANDS/*.svg, 555 x 555 avec marges transparentes ; un PNG seulement si le SVG n'existe pas) est utilise TEL QUEL : la boite (div.st-logo,
   proportions du logo en ligne) a overflow:hidden et l'image y est agrandie / decalee en pourcentages (en ligne dans la page) pour
   ne montrer que le logo. Aucune image n'est creee. POUR CHANGER LA TAILLE : --st-logo-scale (1 = 100 % = taille d'origine). */
.slider-titre { --st-lueur: .10; --st-logo-scale: .55; --st-logo-gap: clamp(38px, 4vw, 77px); --st-lift: clamp(70px, 11vh, 130px); }   /* DESKTOP (>= 1200 px) */
/* Taille et position du logo par palier, memes paliers que le reste du site (udt_media_queries.css) :
   --st-logo-scale = taille du logo (1 = 100 % de sa taille d'origine) ; --st-logo-gap = espace entre le titre et le logo
   (plus grand = logo plus bas) ; --st-lift = de combien l'ENSEMBLE titre + logo est remonte par rapport au centre du slider
   (plus grand = plus haut : de l'air entre le logo et l'icone scroll / le bouton portfolio en bas). Le nom du projet, lui, suit deja l'ecran (clamp en vw). */
@media only screen and (max-width: 1199px) { .slider-titre { --st-logo-scale: .44; --st-logo-gap: 38px; --st-lift: clamp(36px, 6vh, 70px); } }   /* TABLETTE (768 - 1199 px) */
@media only screen and (max-width: 767px)  { .slider-titre { --st-lift: 14px; } .epic-slider .slider-titre .st-logo { display: none; } }   /* MOBILE (480 - 767 px) : PAS DE LOGO, le titre seul */
@media only screen and (max-width: 479px)  { .slider-titre { --st-lift: 12px; } }   /* PETIT MOBILE (< 480 px) : pas de logo non plus */
@media only screen and (min-width: 768px) and (max-height: 620px) { .slider-titre { --st-logo-gap: 26px; --st-lift: 40px; } }   /* fenetre basse : le logo doit tenir dans sa moitie de slider */
.slider-titre .st-logo {
	display: block; position: relative; overflow: hidden;
	width: calc(var(--w) * var(--st-logo-scale));
	margin-top: var(--st-logo-gap);
}
.slider-titre .st-logo { z-index: 1; }   /* au-dessus des calques de couleur du glitch (.st-fx) */
/* Calques de couleur du glitch du logo (crees / supprimes par js/slider-titre.js, glitchLogo()) : copie du logo (meme fichier, meme cadrage),
   teintee par un filtre SVG, en bande horizontale decalee, derriere le logo. */
.slider-titre .st-fx { position: absolute; z-index: 0; pointer-events: none; }
/* CORRECTIF (22 oct. 2026) : sur desktop (>= 1200 px), le logo est centre par  left:50% ; top:var(--st-lc) ; translate:-50% -50%  (voir plus bas).
   Les calques de glitch (.st-fx) sont des COPIES du logo (meme classe .st-logo) : ils heritaient de ce  translate  alors que js/slider-titre.js
   (glitchLogo) les place deja en pixels exacts (left / top = coin haut-gauche du logo) -> ils se retrouvaient decales d'une demi-largeur vers la
   gauche et d'une demi-hauteur vers le haut (le glitch des logos PNG n'etait pas derriere le logo). On annule ce translate pour eux. */
.slider-titre .st-logo.st-fx { translate: none; }
.slider-titre .st-logo img { position: absolute; display: block; max-width: none; height: auto; }

/* Lettres du "hall de gare" (.st-flip / .st-c, crees par js/slider-titre.js) et couches de couleur du glitch (.tg-layer) :
   epicslider.css impose a TOUT <span> du slider  width:100% ; display:inline-block ; font-weight:200  (pour ses legendes).
   Sans ce reset, chaque lettre prendrait toute la largeur (lettres empilees en colonne) et serait amincie. */
.epic-slider .slider-titre .st-flip,
.epic-slider .slider-titre .st-c { display: inline; width: auto; }
.epic-slider .slider-titre .st-flip,
.epic-slider .slider-titre .st-c,
.epic-slider .slider-titre .tg-layer,
.epic-slider .slider-titre .tg-layer * { font-family: inherit; font-weight: inherit; }

/* Texte masque tant que js/slider-titre.js n'a pas lance l'affichage "hall de gare" (.st-run).
   Securite : si le script ne tourne pas, le texte apparait tout seul au bout de 6 s. */
.slider-titre .st-projet, .slider-titre .st-marque { visibility: hidden; animation: st-secours 0s linear 6s forwards; }
/* Logo : apparait en fondu (classe .st-in posee par js/slider-titre.js apres l'affichage du titre) ; securite : visible au bout de 6 s */
.slider-titre .st-logo { opacity: 0; transition: opacity .5s ease; animation: st-secours-logo 0s linear 6s forwards; }
.slider-titre.st-run .st-logo.st-in { opacity: 1; animation: none; }
@keyframes st-secours-logo { to { opacity: 1; } }
.slider-titre.st-run .st-projet, .slider-titre.st-run .st-marque { visibility: visible; animation: none; }
@keyframes st-secours { to { visibility: visible; } }

/* ------------------------------------------------------------------------
   POSITION STRICTE DE LA LEGENDE (nom du projet + logo de marque) - DESKTOP >= 1200 px UNIQUEMENT
   Avant : le groupe (titre + logo) etait centre en flex : le CENTRE du logo ne bougeait pas, mais le NOM DU PROJET montait / descendait
   (d'environ +/- 45 px) d'une page a l'autre selon la hauteur du logo (34 a 150 px).
   Maintenant : le CENTRE du logo (ou du texte de marque) est toujours a --st-lc (meme valeur qu'avant : le logo ne bouge pas) et le BAS du nom
   du projet est toujours a --st-title-gap au-dessus de ce point, quel que soit le logo. Le titre est ancre par son bas : s'il passe sur 2 lignes
   il grandit vers le haut, sans jamais toucher le logo. Tablette et mobile : inchanges.
   POUR REGLER : --st-title-gap (ecart centre du logo -> bas du titre).   POUR ANNULER : supprimer ce bloc.
   ------------------------------------------------------------------------ */
@media only screen and (min-width: 1200px) {
	.epic-slider .slider-titre {
		display: block; padding: 0;
		--st-t: calc(clamp(30.4px, 5.49vw, 98.7px) * .96);                                   /* hauteur d'une ligne de titre */
		--st-lc: calc(50% - var(--st-lift) + (var(--st-t) + var(--st-logo-gap)) / 2);        /* centre du logo : identique a l'ancienne mise en page */
		--st-title-gap: calc(var(--st-logo-gap) + 46px);                                     /* centre du logo -> bas du titre (115 px a 1728 px de large) */
	}
	.slider-titre .st-logo,
	.slider-titre .st-marque {
		position: absolute; left: 50%; top: var(--st-lc); translate: -50% -50%;
		margin: 0; white-space: nowrap;
	}
	.slider-titre .st-projet {
		position: absolute; left: 8.5%; width: 83%; max-width: none; margin: 0;
		bottom: calc(100% - var(--st-lc) + var(--st-title-gap));
	}
}