/* ==========================================================================
   TOP MARQUEE BANNER (bandeau défilant sticky en haut du site)
   ========================================================================== */

:root {
	--top-banner-height: 34px;
}

#top-marquee-banner {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--top-banner-height);
	background-color: #000000;
	overflow: hidden;
	z-index: 9999;
	white-space: nowrap;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#top-marquee-banner .top-marquee-track {
	display: inline-flex;
	align-items: center;
	height: 100%;
	white-space: nowrap;
	will-change: transform;
	animation: top-marquee-scroll 65s linear infinite;
}

#top-marquee-banner .top-marquee-track span.top-marquee-item {
	display: inline-block;
	flex: 0 0 auto;
	font-family: 'Doto', sans-serif;
	font-weight: 800;
	font-variation-settings: 'ROND' 100;
	font-size: 17px;
	line-height: var(--top-banner-height);
	color: #ffffff;
	text-transform: none;
	letter-spacing: 1px;
	padding: 0 0.3em;
}

@keyframes top-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Pause on hover for readability / accessibility */
#top-marquee-banner:hover .top-marquee-track {
	animation-play-state: paused;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	#top-marquee-banner .top-marquee-track {
		animation: none;
	}
}

/* ------------------------------------------------------------------------
   Push the rest of the site down by the banner height so nothing
   is hidden behind the fixed banner, on both desktop (absolute/fixed
   sidebar header) and mobile (in-flow header) layouts.
   ------------------------------------------------------------------------ */

body {
	padding-top: var(--top-banner-height) !important;
}

#header-wrapper {
	top: var(--top-banner-height) !important;
	min-height: calc(100% - var(--top-banner-height)) !important;
	min-height: calc(max(100%, 100vh) - var(--top-banner-height)) !important;
}

@media only screen and (min-width: 960px) {
	#header-inner {
		top: var(--top-banner-height) !important;
	}
}

@media only screen and (max-width: 959px) {
	#header-wrapper {
		top: 0 !important;
		min-height: auto !important;
	}
}

@media only screen and (max-width: 500px) {
	:root {
		--top-banner-height: 28px;
	}
	#top-marquee-banner .top-marquee-track span.top-marquee-item {
		font-size: 13px;
		padding: 0 0.3em;
	}
}

/* ------------------------------------------------------------------------
   Portfolio filter bar (TOUS / CONTENU VIDÉO / ACTIVATION / DIGITAL /
   CATÉGORIES). The theme sets "html, body{overflow-x:hidden}" which, per
   spec, forces overflow-y to an implicit "auto" and can break native
   position:sticky in some browsers (Safari included). We disable native
   sticky for this element and recreate the same behaviour in JS
   (js/sticky-filter.js), toggling the .is-stuck class below.
   ------------------------------------------------------------------------ */

.portfolio-filter-wrapper {
	position: relative !important;
	top: auto !important;
}

.portfolio-filter-wrapper.is-stuck {
	position: fixed !important;
	top: var(--top-banner-height) !important;
	z-index: 500;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.portfolio-filter-placeholder {
	width: 100%;
}

/* ------------------------------------------------------------------------
   "PARIS NEW YORK MONTREAL" title (contact.html / profil.html, FR + EN).
   Markup is:
     <span class="pny-line1">PARIS NEW&nbsp;YORK</span><span class="pny-line2">MONTREAL</span>
   Both spans are forced to display:block by the theme's generic
   "h1 span{display:block}" rule, which is what pushes MONTREAL onto its
   own line without needing an explicit <br>.
   - "NEW" and "YORK" are joined with a &nbsp; in the HTML itself, so that
     pair can NEVER be split across two lines at any screen size.
   - Desktop (>=960px, matching the site's own tablet/desktop breakpoint):
     .pny-line1 is forced nowrap, so "PARIS NEW YORK" always stays
     together on one line, with "MONTREAL" alone on the line below.
   - Tablet/mobile (<960px): .pny-line1 allows normal wrapping, so it
     breaks at the regular space between "PARIS" and "NEW", giving one
     line per word: PARIS / NEW YORK / MONTREAL.

   The font-sizes below are only a starting point per breakpoint. The
   exact fit -- the longest line touching both edges of the title's own
   width, at ANY viewport width, not just these breakpoints -- is done
   at runtime by js/pny-title-fit.js, which measures the real rendered
   text width (not guessed) and grows or shrinks the font-size to match.
   ------------------------------------------------------------------------ */

.pny-line1 {
	white-space: normal;
}

@media only screen and (min-width: 960px) {
	.pny-line1 {
		white-space: nowrap;
	}
}

/* Font-size for this specific title only (scoped via .pny-title so no
   other page's #section-title h1 is affected). Sized so "PARIS NEW YORK"
   always physically fits on one line at each of the site's own desktop
   breakpoints -- measured against the real rendered container width at
   each breakpoint, with a small safety margin. Below 960px the site's
   own responsive font-size rules already apply and already fit fine,
   since at that point the title wraps one word per line instead. */
@media only screen and (min-width: 1200px) {
	#section-title h1.pny-title, #section-title h1.pny-title span {
		font-size: 96px; line-height: 88px;
	}
}
@media only screen and (min-width: 1024px) and (max-width: 1199px) {
	#section-title h1.pny-title, #section-title h1.pny-title span {
		font-size: 80px; line-height: 74px;
	}
}
@media only screen and (min-width: 960px) and (max-width: 1023px) {
	#section-title h1.pny-title, #section-title h1.pny-title span {
		font-size: 70px; line-height: 65px;
	}
}

/* Below 960px the title wraps one word per line (PARIS / NEW YORK /
   MONTREAL). "NEW" and "YORK" stay glued via &nbsp; and can never break
   apart -- but at the site's own default tablet/mobile sizes (84px /
   69px) that glued pair (and "MONTREAL") are themselves wider than the
   available column, which forces an ugly mid-word break instead. These
   two breakpoints shrink this title specifically so every word -- PARIS,
   NEW YORK, MONTREAL -- fits its own line intact. */
@media only screen and (min-width: 480px) and (max-width: 959px) {
	#section-title h1.pny-title, #section-title h1.pny-title span {
		font-size: 72px; line-height: 66px;
	}
}
@media only screen and (max-width: 479px) {
	#section-title h1.pny-title, #section-title h1.pny-title span {
		font-size: 48px; line-height: 44px;
	}
}

/* ------------------------------------------------------------------------
   Video d'intro plein largeur en tete des pages projet (portfolio-project).
   Cadre responsive en ratio 16:9 qui remplit exactement son conteneur,
   sans dependre d'une hauteur fixe en pixels qui ne correspond plus a la
   largeur reelle de l'ecran. S'applique uniquement aux pages qui ont ce
   bloc video (.full-width-video-wrapper), les autres pages projet ne
   sont pas concernees.
   ------------------------------------------------------------------------ */
#content-wrapper.portfolio-project .full-width-video-wrapper {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: 0 !important;
	padding-bottom: 56.25%;
	margin: 0 0 66px 0 !important;
	overflow: hidden !important;
	background-color: #000;
}
#content-wrapper.portfolio-project .full-width-video-wrapper .video {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	z-index: 1;
	/* Trame video, methode DIFFERENTE (plus fiable que l'overlay ::after
	   ci-dessous, qui perd systematiquement contre la couche materielle
	   du lecteur Vimeo dans Chrome ET Safari malgre un z-index correct).
	   Au lieu de poser un calque de trame PAR-DESSUS la video, on
	   decoupe directement des bandes DANS la video via un masque a
	   motif : les bandes masquees deviennent transparentes et laissent
	   voir le fond noir du cadre (.full-width-video-wrapper) derriere.
	   Comme la trame fait partie du rendu de la video elle-meme (et non
	   d'un element concurrent superpose), aucun probleme d'ordre de
	   calques materiels ne peut s'appliquer ici. */
	/* Trame video par decoupe (voir explication ci-dessus). Intensite
	   alignee sur la trame du slider (.g81-scan dans glitch-tv.css,
	   rgba(0,0,0,0.33)) : au lieu de couper totalement la video sur la
	   bande du trait, on ne la reduit qu'a 67% d'opacite -- ce qui
	   laisse apparaitre 33% du fond noir derriere, soit visuellement le
	   meme resultat qu'un trait noir a 33% d'opacite pose par-dessus.
	   Meme geometrie que le slider : trait de 1px, espace de 2px,
	   cycle de 3px. */
	-webkit-mask-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0.67) 0px, rgba(0,0,0,0.67) 1px, black 1px, black 3px);
	mask-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0.67) 0px, rgba(0,0,0,0.67) 1px, black 1px, black 3px);
}
#content-wrapper.portfolio-project .full-width-video-wrapper .video iframe {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
	display: block;
}
/* NOTE : l'ancienne methode par calque ::after superpose a ete
   abandonnee -- elle perdait systematiquement contre la couche
   materielle du lecteur Vimeo dans Chrome et Safari, malgre un CSS
   correctement applique (verifie via l'inspecteur, regle non ecrasee).
   La trame video est desormais geree uniquement via le masque sur
   .video ci-dessus. */
/* Le separateur sous le titre reste desormais identique sur toutes les
   pages projet, avec ou sans video d'intro (retour au comportement par
   defaut de style.css) -- seul le padding-top est neutralise ici pour
   eviter un double espace juste sous la video plein largeur. */
.portfolio-project.has-video-intro,
.portfolio-project:has(.full-width-video-wrapper) {padding-top: 0 !important;}

/* Trame video desactivee sur mobile : sur petit ecran le masque decoupe
   des bandes qui deviennent proportionnellement plus larges/grossieres
   a l'affichage et alourdissent la lecture de la video sans apporter
   grand-chose. On retire le masque (video affichee normalement) en
   dessous du meme seuil mobile utilise pour le reste de cette page. */
@media only screen and (max-width: 959px) {
	#content-wrapper.portfolio-project .full-width-video-wrapper .video {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* ------------------------------------------------------------------------
   Barre de navigation (precedent/grille/suivant) juste sous la video
   d'intro plein largeur. Positionnee en dehors de section.pages (donc
   deja pleine largeur naturellement, pas besoin d'echappement de
   colonne comme pour .folio-navigation-top). Sans contour, fleches a
   50px des bords.
   ------------------------------------------------------------------------ */
.video-nav-bar {
	width: 100%;
	height: 40px;
	position: relative;
	margin-top: 50px;
	margin-bottom: 50px;
}
/* Pages projet SANS video d'intro (pas de classe has-video-intro) : la
   barre .video-nav-bar dupliquee en haut de page (cf ajout precedent)
   recoit plus de respiration au-dessus/en-dessous que les 50px par
   defaut, sans toucher aux pages avec video d'intro qui gardent 50px. */
.portfolio-project:not(.has-video-intro) .video-nav-bar {
	margin-top: 66px;
	margin-bottom: 66px;
}
/* #content-wrapper.portfolio-project a un padding-top:66px fixe (regle
   plus ancienne, style.css) qui s'additionne au margin-top ci-dessus
   -> 216px au lieu de 150px. On neutralise ce padding uniquement pour
   les pages sans video (les pages avec video le neutralisent deja via
   .has-video-intro plus haut), pour que les 150px du haut correspondent
   exactement aux 150px du bas. */
#content-wrapper.portfolio-project:not(.has-video-intro) {
	padding-top: 0;
}
.video-nav-bar ul { margin: 0; list-style: none; }
.video-nav-bar ul li { margin: 0; }
.video-nav-bar ul li.closeProject a,
.video-nav-bar ul li.nextProject a,
.video-nav-bar ul li.prevProject a {
	width: 30px; height: 30px;
	position: absolute; top: 5px;
	transition: all .25s ease-in-out;
}
.video-nav-bar ul li.closeProject a {
	background-image: url(../images/ui/projects-close.png);
	background-position: center 50%; background-repeat: no-repeat;
	left: 50%; margin-left: -15px;
}
.video-nav-bar ul li.nextProject a {
	background-image: url(../images/ui/projects-direction-nav.png);
	background-position: center -5px; background-repeat: no-repeat;
	left: 50px;
}
.video-nav-bar ul li.prevProject a {
	background-image: url(../images/ui/projects-direction-nav.png);
	background-position: center -45px; background-repeat: no-repeat;
	right: 50px;
}
.video-nav-bar ul li.closeProject a:hover,
.video-nav-bar ul li.nextProject a:hover,
.video-nav-bar ul li.prevProject a:hover {
	opacity: 0.7;
}

/* ------------------------------------------------------------------------
   Slider plein ecran (accueil + pages AI magination) sur mobile : on
   retire le bouton "VISIONNER" et TOUS les GIF animes de chaque slide
   (icone souris scroll.gif, mais aussi les visuels "COMING SOON" en
   .gif charges via data-src), qui prennent de la place pour rien sur
   un petit ecran. La barre de controle du slider (play/pause, plein
   ecran, precedent/suivant) n'est PAS modifiee.
   ------------------------------------------------------------------------ */
/* Nom textuel du projet, affiche uniquement sur mobile (voir plus bas) ;
   sur desktop le PNG reste affiche normalement. */
.epic-slider .es-caption .mobile-slide-name { display: none; }

@media only screen and (max-width: 959px) {
	.epic-slider .es-caption .submit {
		display: none !important;
	}
	.epic-slider .es-caption img[src*=".gif"],
	.epic-slider .es-caption img[data-src*=".gif"] {
		display: none !important;
	}
	/* PNG du projet (logo) : masque sur mobile. Le nom textuel de
	   remplacement est finalement aussi masque -- seule l'image/video de
	   fond du slide reste visible. */
	.epic-slider .es-caption p {
		text-align: center;
	}
	.epic-slider .es-caption p > span > img {
		display: none !important;
	}
}

/* ------------------------------------------------------------------------
   Sur mobile, l'ecart de 50px entre les fleches et les bords (pense pour
   desktop) est proportionnellement enorme. On le reduit a 15px pour les
   3 barres de navigation (video-nav-bar, folio-navigation-top,
   folio-navigation) sur les petits ecrans.
   ------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
	.video-nav-bar ul li.nextProject a,
	.folio-navigation-top ul li.nextProject a,
	#folio-navigation ul li#nextProject a {
		left: 15px !important;
	}
	.video-nav-bar ul li.prevProject a,
	.folio-navigation-top ul li.prevProject a,
	#folio-navigation ul li#prevProject a {
		right: 15px !important;
	}
	/* #folio-navigation et section.pages (parent de .folio-navigation-top)
	   sont limites a 290px par une vieille regle du thème (groupee avec
	   plein d'autres elements, en dessous de 479px). On force ces deux
	   barres a ignorer cette limite et a occuper toute la largeur reelle
	   de l'ecran, quelle que soit la largeur de leur parent. */
	#folio-navigation,
	.folio-navigation-top {
		max-width: 100vw !important;
		width: 100vw !important;
		position: relative !important;
		left: 50% !important;
		right: auto !important;
		margin-left: -50vw !important;
	}
	/* La video elle-meme (.video, a l'interieur du cadre plein largeur)
	   est capee a 290px ou 420px par une vieille regle du thème selon
	   la largeur d'ecran, ce qui la laisse plus etroite que son cadre
	   (bande vide visible sur le cote). On la force a occuper 100% du
	   cadre, quel que soit l'ecran. */
	#content-wrapper.portfolio-project .full-width-video-wrapper .video,
	#content-wrapper.portfolio-project .full-width-video-wrapper .video iframe {
		max-width: 100% !important;
		width: 100% !important;
		margin: 0 !important;
	}
}

/* ------------------------------------------------------------------------
   Titres de page (#section-title h1) et sous-titres projet ("FAST
   GENERATION", "RESPONSIVE JEANS"...) sur mobile : ces titres sont des
   mots longs en majuscules a tres grande taille (105px / 78px sur
   desktop). Sur un ecran etroit, le thème les laissait deborder puis
   les coupait au milieu d'un mot (word-wrap:break-word herite de
   <body>) -- "HEWLETT" devenait "HEWLET"/"T" sur deux lignes. On
   desactive cette coupure (overflow-wrap/word-break: normal) et on
   reduit la taille du texte de façon fluide (clamp(), proportionnelle
   a la largeur d'ecran) pour que les mots restent entiers, quitte a
   les afficher plus petits. Va jusqu'a 959px : au-dela de ce seuil,
   la taille desktop (definie par ailleurs) est deja suffisante. */
@media only screen and (max-width: 959px) {
	#section-title h1, #section-title h1 span {
		font-size: clamp(28px, 11vw, 84px) !important;
		line-height: 1.05 !important;
		overflow-wrap: normal !important;
		word-break: normal !important;
	}
	.portfolio-project #section-title + h4 {
		font-size: clamp(22px, 9vw, 78px) !important;
		line-height: 1.1 !important;
		overflow-wrap: normal !important;
		word-break: normal !important;
	}
}