/* ==========================================================================
   MENU DESKTOP OUVRANT / FERMANT A GAUCHE (>= 960px)
   --------------------------------------------------------------------------
   Le theme affiche normalement la sidebar #header-wrapper en permanence
   sur desktop (>=960px). Ce fichier la transforme en panneau qui se
   cache par defaut et coulisse depuis la gauche via un bouton hamburger,
   comme sur les maquettes. En dessous de 960px, rien ne change cote
   comportement : le menu mobile existant (accordeon, cf. js/common.js)
   continue de fonctionner normalement.
   Charger ce fichier APRES tous les autres CSS du theme.

   L'etat ouvert/ferme (desktop) est memorise (localStorage) et restitue
   d'une page a l'autre. La classe "desktop-nav-open" est posee sur <html>
   (et non <body>) car un petit script inline dans le <head> de chaque
   page (cf. README-menu-desktop.txt) l'applique avant meme le premier
   rendu, pour eviter tout flash "ferme -> ouvert" au chargement.

   Layout "push" (desktop uniquement) : #content-wrapper et #footer-wrapper
   se decalent de la largeur du panneau (variable --desktop-sidebar-width,
   differente selon le palier desktop) au lieu de rester sous un panneau
   qui les recouvre. Le slider plein ecran de la page d'accueil
   (.epic-slider.fullscreen) est en position:fixed sur tout le viewport :
   il n'est pas concerne par ce decalage et reste intentionnellement plein
   cadre, comme sur la maquette. js/desktop-menu-toggle.js redeclenche un
   evenement "resize" une fois la transition terminee, pour que les
   scripts qui calculent une largeur en JS (bandeau defilant, slider,
   soulignes du menu, etc.) se remettent a jour.
   ========================================================================== */

/* Variable globale disponible partout (y compris dans style.css charge avant
   ce fichier). La valeur par defaut correspond au breakpoint >=1200px.
   Redéfinie a 210px dans la media query 960-1199px ci-dessous. */
:root { --desktop-sidebar-width: 250px; }

/* Cadre de focus bleu au clic, SUR TOUT LE SITE : le meme probleme que
   sur le bouton "fermer" de la video (deja corrige plus bas) touche en
   fait n'importe quel lien/bouton cliquable -- ici "AI magination" dans
   la nav, mais ca peut arriver sur n'importe quel <a> ou <button> du
   site. C'est l'anneau de focus par defaut du navigateur/OS (visible au
   clic si "Acces clavier complet" est active sur Mac). Regle globale :
   on le supprime au clic/tactile (:focus, :active) partout, mais on le
   garde en clavier reel (:focus-visible, navigation Tab) pour ne pas
   casser l'accessibilite. Chargee en dernier (ce fichier) pour primer
   sur tout le reste. */
a:focus,
a:active,
button:focus,
button:active,
.menu-item a:focus,
.menu-item a:active {
	outline: none !important;
	box-shadow: none !important;
	-webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible {
	outline: 2px solid #0757f8 !important;
	outline-offset: 2px;
}

/* Filets (::after) des <li> de sous-menus : skin.css l.225 force
   border-color:#ffffff sur tous les li:after de la nav, y compris ceux
   des sous-menus, ecrasant le border:none de style.css. On le supprime
   ici car desktop-menu-toggle.css est charge apres skin.css. */
header nav#primary-nav ul li ul.sub-menu li:after,
header nav#primary-nav ul li ul.children li:after {
	border: none !important;
	height: 0 !important;
}

/* Filets du sous-menu arcade (.blason-menu-item) : les <li> contiennent
   des <img> GIF en display:inline par defaut -- l'espace de descente
   typographique (descender whitespace) cree un filet blanc sous chaque
   image. display:block l'elimine completement. */
header nav#primary-nav ul li.blason-menu-item:after,
header nav#primary-nav ul li.blason-menu-item ul.sub-menu li:after {
	content: none !important;
}
header nav#primary-nav ul li.blason-menu-item ul.sub-menu li a img {
	display: block !important;
	line-height: 0 !important;
	vertical-align: bottom !important;
}
/* Le padding/line-height/font-size du lien <a> n'est plus ecrase ici :
   on laisse la regle classique de style.css (padding:12px 0, plus 18px
   en haut du premier item et en bas du dernier) s'appliquer par defaut. */

/* Ajustement iteratif de la hauteur du sous-menu arcade UNIQUEMENT
   (.blason-menu-item), par petits pas "entre chaque bouton" comme
   demande, sans toucher aux marges exterieures du panneau (haut du
   premier bouton / bas du dernier, qui restent a 18px comme sur
   "AI magination"). Etape 1 : +5px de chaque cote (12px -> 17px), soit
   +10px par intervalle (x3 = +30px). Etape 2 : +0.5px de chaque cote
   (17px -> 17.5px), soit +1px par intervalle (x3 = +3px). Etape 3 :
   +0.5px de chaque cote (17.5px -> 18px), soit +1px par intervalle
   (x3 = +3px). A ajuster de nouveau (meme technique) selon le rendu. */
header nav#primary-nav ul li.blason-menu-item ul.sub-menu li a {
	padding: 17.5px 0 !important;
}
header nav#primary-nav ul li.blason-menu-item ul.sub-menu li:first-child a {
	padding-top: 18px !important;
}
header nav#primary-nav ul li.blason-menu-item ul.sub-menu li:last-child a {
	padding-bottom: 18px !important;
}

/* Filet transparent d'1px entre les boutons du sous-menu arcade UNIQUEMENT
   (.blason-menu-item) : chaque <li> a son propre fond blanc (skin.css),
   mais le sous-menu entier est anime avec un "transform: translateX()"
   (style.css) pour s'ouvrir -- ce type d'animation peut, selon l'arrondi
   des pixels du navigateur, laisser une fine ligne d'1px entre deux <li>
   consecutifs ou le fond derriere le panneau redevient visible. Corrige
   uniquement ici (selecteur .blason-menu-item) pour ne surtout pas toucher
   au sous-menu "AI magination", qui n'a pas ce probleme et ne doit pas
   changer. Le box-shadow ne participe pas au layout (ni taille ni
   espacement) : il fait juste deborder le blanc de chaque <li> d'1px sur
   son voisin pour combler ce filet. */
header nav#primary-nav ul li.blason-menu-item ul.sub-menu li {
	box-shadow: 0 0 0 1px #fff !important;
}

/* --------------------------------------------------------------------------
   ICONE HAMBURGER / CROIX EN CSS PUR (mobile, tablette ET desktop)
   --------------------------------------------------------------------------
   Remplace le sprite bitmap images/ui/mobileMenu-toggle.png par 3 barres
   (spans .pl-menu-bar-top/-mid/-bottom, injectees en JS par
   js/desktop-menu-toggle.js dans le bouton desktop ET dans l'ancre
   .mobile-menu-toggle a existante) qui morphent en croix avec une
   transition fluide, au lieu du saut instantane du sprite. Le blanc +
   mix-blend-mode:difference garde l'icone lisible sur n'importe quel
   fond (hero sombre, panneau clair, header mobile...) sans avoir a gerer
   une couleur differente par etat ou par page.
   -------------------------------------------------------------------------- */

.desktop-menu-toggle-btn,
.mobile-menu-toggle a {
	position: relative;
	background: none !important; /* neutralise le sprite d'origine (style.css) */
	/* isolation + mix-blend-mode sont ICI, sur le bouton/l'ancre lui-meme,
	   et NON sur .pl-menu-bars-group (cf. juste en dessous). Raison :
	   .desktop-menu-toggle-btn est deja position:fixed + z-index, ce qui
	   cree a lui seul un contexte d'empilement. Si le mix-blend-mode est
	   pose sur un ENFANT de ce bouton (comme .pl-menu-bars-group), son
	   inversion reste enfermee a l'interieur de ce contexte -- qui ne
	   contient rien d'autre que les barres elles-memes (background:none
	   ci-dessus) -- et donne donc systematiquement du blanc plein, quel
	   que soit le vrai fond de la page (bug corrige ici). En posant
	   isolation+mix-blend-mode directement SUR l'element qui cree deja ce
	   contexte, c'est ce bouton (les 3 barres deja fusionnees en une
	   seule forme, cf. commentaire sous .pl-menu-bars-group) qui s'inverse
	   en bloc contre le contexte PARENT (la vraie page), une fois compose
	   dedans -- exactement ce qu'il faut pour rester lisible sur n'importe
	   quel fond. Meme raisonnement pour .mobile-menu-toggle a : ca ne
	   change rien pour lui (il ne formait deja aucun contexte propre),
	   mais ca garde les deux boutons sur la meme regle, plus simple a
	   maintenir. */
	isolation: isolate;
	mix-blend-mode: difference;
}

/* Les 3 barres sont d'abord aplaties ENSEMBLE en une seule forme blanche
   pleine -- vu qu'elles n'ont pas de mix-blend-mode PROPRE, elles se
   superposent normalement (blanc sur blanc = blanc), sans s'annuler.
   C'est ce groupe deja aplati qui est ensuite inverse en un bloc contre
   le vrai fond de la page, via isolation+mix-blend-mode poses plus haut
   sur .desktop-menu-toggle-btn / .mobile-menu-toggle a (et non ici).
   Sans ce regroupement, inverser chaque barre individuellement fait
   qu'au point de croisement de la croix, la 2e barre s'inverse une 2e
   fois sur le resultat deja noirci de la 1ere -- ce qui redonne du blanc
   pile au centre. */
.pl-menu-bars-group {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.pl-menu-bar {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 27.2px; /* 32px x 85% */
	height: 1px;
	margin-top: -0.5px;
	background: #ffffff;
	transform: translate(-50%, 0);
	transition: transform .35s cubic-bezier(.65,0,.35,1), opacity .35s ease;
}
.pl-menu-bar-top    { transform: translate(-50%, -8.55px); } /* 10.06px x 85% */
.pl-menu-bar-bottom { transform: translate(-50%, 8.55px); }  /* 10.06px x 85% */

/* Icone du bouton DESKTOP uniquement (jamais mobile/tablette, qui garde
   le style ci-dessus) : lignes plus fines et plus longues, 25% plus
   grandes au total (24px -> 30px de large, 2px -> 1px d'epaisseur,
   ecartement 7px -> 8.75px). */
.desktop-menu-toggle-btn .pl-menu-bar,
.mobile-menu-toggle a .pl-menu-bar {
	width: 34px; /* 40px x 85% */
	height: 2px;
	margin-top: -1px;
}
.desktop-menu-toggle-btn .pl-menu-bar-top,
.mobile-menu-toggle a .pl-menu-bar-top    { transform: translate(-50%, -10.69px); } /* 12.58px x 85% */
.desktop-menu-toggle-btn .pl-menu-bar-bottom,
.mobile-menu-toggle a .pl-menu-bar-bottom { transform: translate(-50%, 10.69px); }  /* 12.58px x 85% */
/* Mobile/tablette (< 1200px) : meme icone que le desktop valide (34px x 2px,
   ecartement 10.69px, croix identique a l'ouverture). */

/* Etat "ouvert" : desktop -> html.desktop-nav-open, mobile/tablette ->
   classe "open" posee par js/common.js sur l'ancre elle-meme au clic. */
html.desktop-nav-open .desktop-menu-toggle-btn .pl-menu-bar-top,
.mobile-menu-toggle a.open .pl-menu-bar-top {
	transform: translate(-50%, 0) rotate(45deg);
}
html.desktop-nav-open .desktop-menu-toggle-btn .pl-menu-bar-mid,
.mobile-menu-toggle a.open .pl-menu-bar-mid {
	opacity: 0;
	transform: translate(-50%, 0) scaleX(0);
}
html.desktop-nav-open .desktop-menu-toggle-btn .pl-menu-bar-bottom,
.mobile-menu-toggle a.open .pl-menu-bar-bottom {
	transform: translate(-50%, 0) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   PANNEAU DESKTOP (>= 960px)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   ICONES DE NAVIGATION PROJET (precedent / grille / suivant) EN CSS PUR
   --------------------------------------------------------------------------
   Remplace les 3 sprites bitmap d'origine (images/ui/projects-direction-nav.png,
   images/ui/projects-close.png), utilises par les 3 barres de navigation
   projet (.video-nav-bar, .folio-navigation-top, #folio-navigation), par
   des icones dessinees en CSS pur (chevrons + grille de points) : meme
   langage visuel que le bouton hamburger/croix ci-dessus -- traits fins
   blancs + mix-blend-mode:difference (lisibles sur n'importe quel fond,
   sombre ou clair, sans gerer de couleur par etat/page), memes transitions
   douces. S'applique a toutes les largeurs d'ecran (mobile, tablette,
   desktop), comme les sprites qu'elle remplace.
   -------------------------------------------------------------------------- */

.video-nav-bar ul li.closeProject a,
.video-nav-bar ul li.nextProject a,
.video-nav-bar ul li.prevProject a,
.folio-navigation-top ul li.closeProject a,
.folio-navigation-top ul li.nextProject a,
.folio-navigation-top ul li.prevProject a,
#folio-navigation ul li#closeProject a,
#folio-navigation ul li#nextProject a,
#folio-navigation ul li#prevProject a,
#folio-navigation ul li#nextProject.disabled,
#folio-navigation ul li#prevProject.disabled {
	background-image: none !important;
	isolation: isolate;
	mix-blend-mode: difference;
	transition: opacity .2s ease-in-out;
}
/* Ajoutee par js/hamburger-collision.js quand la fleche chevauche le
   bouton hamburger (fixe verticalement au centre de l'ecran) pendant le
   scroll : la fleche s'efface le temps de la collision, puis reapparait. */
.nav-arrow-hamburger-collide {
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Chevrons (precedent/suivant) : meme epaisseur de trait (1px) que les
   barres du hamburger, formes via 2 cotes d'un carre pivote -- technique
   CSS classique du chevron, pas d'image. */
.video-nav-bar ul li.nextProject a::before,
.video-nav-bar ul li.prevProject a::before,
.folio-navigation-top ul li.nextProject a::before,
.folio-navigation-top ul li.prevProject a::before,
#folio-navigation ul li#nextProject a::before,
#folio-navigation ul li#prevProject a::before,
#folio-navigation ul li#nextProject.disabled::before,
#folio-navigation ul li#prevProject.disabled::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	border-style: solid;
	border-color: #ffffff;
	border-width: 0 2px 2px 0;
}

/* nextProject = fleche GAUCHE (<), prevProject = fleche DROITE (>) --
   voir le commentaire HTML "ATTENTION" plus haut sur l'inversion
   volontaire des noms de classe/id. */
.video-nav-bar ul li.nextProject a::before,
.folio-navigation-top ul li.nextProject a::before,
#folio-navigation ul li#nextProject a::before,
#folio-navigation ul li#nextProject.disabled::before {
	transform: translate(-50%, -50%) rotate(135deg);
}
.video-nav-bar ul li.prevProject a::before,
.folio-navigation-top ul li.prevProject a::before,
#folio-navigation ul li#prevProject a::before,
#folio-navigation ul li#prevProject.disabled::before {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* Icone "grille" (retour a la liste des projets) : 3x3 points en CSS pur
   (1 point + 8 ombres portees), meme logique de traits fins blancs. */
.video-nav-bar ul li.closeProject a::before,
.folio-navigation-top ul li.closeProject a::before,
#folio-navigation ul li#closeProject a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3px;
	height: 3px;
	background: #ffffff;
	transform: translate(-50%, -50%);
	box-shadow:
		-10.2px -10.2px 0 0 #ffffff,
		   0px  -10.2px 0 0 #ffffff,
		 10.2px -10.2px 0 0 #ffffff,
		-10.2px    0px  0 0 #ffffff,
		 10.2px    0px  0 0 #ffffff,
		-10.2px  10.2px 0 0 #ffffff,
		   0px   10.2px 0 0 #ffffff,
		 10.2px  10.2px 0 0 #ffffff;
}

/* Etat desactive (chaine de projets, premier/dernier de la liste) : icone
   attenuee, pas d'effet de survol. */
#folio-navigation ul li#nextProject.disabled,
#folio-navigation ul li#prevProject.disabled {
	opacity: 0.35;
}

/* --------------------------------------------------------------------------
   BOUTONS PRECEDENT/SUIVANT : NOM DU PROJET VOISIN AU LIEU D'UN CHEVRON NU
   --------------------------------------------------------------------------
   La classe "project-nav-link" est ajoutee en JS (js/common.js,
   buildFolioNavLabels) sur les liens nextProject/prevProject, avec a
   l'interieur le meme habillage que les items du menu principal
   (span.nav-menu-trait > img.nav-splash + b) -- voir css/style.css pour le
   trait au survol, deja generique. On fait donc passer ces boutons d'une
   boite carree 30x30 centree sur le seul chevron, a une boite en largeur
   automatique : chevron + libelle alignes horizontalement, chevron toujours
   du cote exterieur de l'ecran.
   NB : les formules de positionnement plus haut/bas dans ce fichier
   ("--nav-arrow-left" etc.) ancrent le bord EXTERIEUR de la boite (left
   pour nextProject, right pour prevProject) ; elles restent donc valables
   telles quelles, la boite s'etend simplement vers l'interieur de l'ecran
   au lieu de rester figee a 30px. Seul le calage pixel-perfect avec le
   centre du bouton hamburger (cf. commentaire plus haut sur
   .desktop-menu-toggle-btn) devient approximatif une fois le libelle
   affiche, ce qui est attendu : ces boutons ne sont plus de simples icones
   carrees.
   -------------------------------------------------------------------------- */
.video-nav-bar ul li.nextProject a.project-nav-link,
.video-nav-bar ul li.prevProject a.project-nav-link,
.folio-navigation-top ul li.nextProject a.project-nav-link,
.folio-navigation-top ul li.prevProject a.project-nav-link,
#folio-navigation ul li#nextProject a.project-nav-link,
#folio-navigation ul li#prevProject a.project-nav-link {
	width: auto;
	max-width: calc(50vw - 80px);
	height: 30px;
	display: flex;
	align-items: center;
	gap: 14px;
	text-indent: 0;
}

/* Le chevron (::before, cf. section CSS pure plus haut) n'est plus centre
   en absolu dans une boite 30x30 : il redevient un simple enfant du
   conteneur flex, a cote du libelle. */
.video-nav-bar ul li.nextProject a.project-nav-link::before,
.video-nav-bar ul li.prevProject a.project-nav-link::before,
.folio-navigation-top ul li.nextProject a.project-nav-link::before,
.folio-navigation-top ul li.prevProject a.project-nav-link::before,
#folio-navigation ul li#nextProject a.project-nav-link::before,
#folio-navigation ul li#prevProject a.project-nav-link::before {
	position: relative;
	top: auto;
	left: auto;
	flex: 0 0 auto;
	/* largeur/hauteur : on ne les redefinit plus ici -- on garde les 20px
	   d'origine de la regle CSS pure plus haut (meme chevron partout dans
	   le site, pas de variante plus petite pour ces boutons). */
}
.video-nav-bar ul li.nextProject a.project-nav-link::before,
.folio-navigation-top ul li.nextProject a.project-nav-link::before,
#folio-navigation ul li#nextProject a.project-nav-link::before {
	transform: rotate(135deg);
}
.video-nav-bar ul li.prevProject a.project-nav-link::before,
.folio-navigation-top ul li.prevProject a.project-nav-link::before,
#folio-navigation ul li#prevProject a.project-nav-link::before {
	transform: rotate(-45deg);
}
/* Fleche DROITE (prevProject) : le chevron reste du cote exterieur (a
   droite du libelle) en inversant simplement l'ordre des enfants flex,
   plutot que de dupliquer le HTML. */
.video-nav-bar ul li.prevProject a.project-nav-link,
.folio-navigation-top ul li.prevProject a.project-nav-link,
#folio-navigation ul li#prevProject a.project-nav-link {
	flex-direction: row-reverse;
}

/* Libelle : meme famille/graisse que les items du menu principal
   (header nav#primary-nav a.nav-text, cf. style.css), en blanc + le meme
   mix-blend-mode:difference que le chevron (herite de la regle plus haut
   sur le lien lui-meme), pour rester lisible sur n'importe quel visuel de
   fond. */
/* NB (correctif) : on avait d'abord mis "flex:1 1 auto; min-width:0;" ici,
   pour permettre au libelle de se reduire avec "..." si jamais trop long.
   Resultat en pratique (Safari) : le nom du projet se retrouvait tronque
   ("TIFFA...") meme largement en dessous de la largeur disponible --
   min-width:0 autorise le navigateur a reduire l'item flex EN DESSOUS de
   la taille de son contenu, et le calcul de largeur "auto" d'un flex
   container en position:absolute est peu fiable sur Safari des qu'un
   enfant a le droit de retrecir. On repasse donc en dimensionnement
   naturel (l'item ne retrecit plus sous son contenu, comportement flex
   par defaut) et on deplace la limite de securite (cas d'un nom de
   projet vraiment tres long) directement sur le <b> via un max-width fixe
   en pixels -- fiable quel que soit le moteur de layout, flex ou pas. */
.project-nav-link .nav-menu-trait {
	/* flex-shrink:0 (pas juste min-width:0 retire) : on veut une garantie
	   absolue que le libelle ne retrecira JAMAIS sous sa taille naturelle,
	   sans dependre de la resolution du "automatic minimum size" flexbox
	   (qui s'est reveleee peu fiable ici, precisement la cause du bug
	   "TIFFA..." tronque malgre la place disponible). La securite pour un
	   nom de projet vraiment tres long reste le max-width fixe sur le <b>
	   juste en dessous, qui lui ne depend d'aucun calcul flex. */
	flex-shrink: 0;
}
.project-nav-link .nav-menu-trait b {
	/* display:inline-block (pas display:block) est la vraie correction du
	   bug de troncature ("TIFFA...", "VIVO X PL...", "APOL...",
	   "ATELIER COLOG..." -- tous le meme bug au fond) : en display:block,
	   cet element prenait 100% de la largeur de son parent .nav-menu-trait
	   (inline-block) au lieu de s'ajuster a son PROPRE contenu -- sa boite
	   restait donc figee a la largeur mesuree une seule fois, quoi qu'il
	   arrive ensuite (police Roboto qui finit de charger, etc.), pendant
	   que le contenu debordait silencieusement dessous (overflow:hidden).
	   En inline-block, l'element se dimensionne nativement sur son texte
	   (comme n'importe quel <b> ou <span>), avec max-width comme unique
	   garde-fou -- fiable dans tous les navigateurs, sans aucun JS. */
	display: inline-block;
	max-width: 320px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: .5px;
	color: #ffffff;
}
.video-nav-bar ul li.prevProject a.project-nav-link .nav-menu-trait b,
.folio-navigation-top ul li.prevProject a.project-nav-link .nav-menu-trait b,
#folio-navigation ul li#prevProject a.project-nav-link .nav-menu-trait b {
	text-align: right;
}

/* --------------------------------------------------------------------------
   BOUTON "HAUT DE PAGE" EN ICONE CSS PUR (chevron)
   --------------------------------------------------------------------------
   Exactement la meme icone que les chevrons precedent/suivant ci-dessus
   (meme construction -- 2 cotes d'un carre pivote --, meme taille 20px,
   meme trait simple, pas de double filet), juste tournee de 90deg de plus
   par rapport a la fleche "droite" (-45deg -> -135deg) pour pointer vers
   le haut plutot que vers la droite. Traits fins blancs +
   isolation/mix-blend-mode:difference, pour rester lisible sur n'importe
   quel fond (bande blanche, footer noir...) sans avoir a gerer de couleur
   par page. Remplace visuellement le texte "HAUT DE PAGE" et son trait
   pinceau (TRAIT_SHORT.png) -- le texte d'origine reste dans le DOM pour
   les lecteurs d'ecran, simplement masque a l'ecran (technique "clip",
   equivalent d'une classe .sr-only). La position du bouton (centre sous
   le logo/hamburger en desktop, aligne a gauche en mobile) n'est pas
   touchee ici : elle reste geree par les regles existantes de style.css,
   qui centrent l'element via transform:translate(-50%,-50%) -- ca
   continue de fonctionner quelle que soit la taille qu'on lui donne ici. */
#footer-wrapper #footer-top .back-to-top {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 44px;
	isolation: isolate;
	mix-blend-mode: difference;
}
#footer-wrapper #footer-top .back-to-top .nav-menu-trait {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
#footer-wrapper #footer-top .back-to-top::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	border-style: solid;
	border-color: #ffffff;
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -50%) rotate(-135deg);
}

.desktop-menu-toggle-btn {
	display: none;
}

@media only screen and (min-width: 1200px) {

	:root {
		--desktop-sidebar-width: 250px; /* correspond a la largeur de #header-wrapper a ce palier (style.css) */
		/* Padding gauche de #header-wrapper a ce palier (style.css,
		   #header-wrapper{padding:0 0 0 40px}) : permet de compenser ce
		   padding asymetrique pour que ul.menu puisse s'etendre sur toute
		   la zone blanche du menu (0 -> largeur du panneau) au lieu de son
		   seul contenu utile, et donc s'y centrer vraiment. */
		--sidebar-pad-left: 40px;
		/* Centre horizontal du logo PAULLEON (position fixe left:40px,
		   largeur 170px -- cf. html.pl-chrome-detached #logo plus bas dans
		   ce fichier) : 40 + 170/2 = 125px. Sert a centrer le bouton menu
		   et "HAUT DE PAGE" exactement sous le logo, qui lui ne bouge
		   jamais (ni au scroll, ni quand le panneau s'ouvre). */
		--logo-center-x: 125px;
	}

	/* Menu + sous-menu descendus de 33px dans le panneau. padding-top
	   (et non margin-top) : un padding ne fusionne jamais avec la marge
	   du logo au-dessus (contrairement a un margin-top, qui aurait pu se
	   comporter differemment selon que le logo soit encore dans le flux
	   ou deja detache en position fixe par le JS), donc le decalage reste
	   fixe et fiable dans les deux cas. Les sous-menus (.sub-menu),
	   positionnes en absolu par rapport a leur <li>, suivent
	   automatiquement puisque tout le bloc ul#menu-1 descend ensemble. */
	nav#primary-nav .menu-container {
		padding-top: 33px;
	}

	/* Filtres du portfolio (TOUS / CONTENU VIDEO / ACTIVATION / DIGITAL /
	   AI) centres horizontalement, pour correspondre a la grille en
	   dessous plutot que d'etre alignes a gauche (justify-content:
	   flex-start dans le theme d'origine, cf. style.css). Desktop
	   uniquement -- mobile/tablette inchanges. */
	.portfolio-filter-wrapper {
		justify-content: center;
	}

	/* Le panneau est cache hors-champ a gauche par defaut */
	#header-wrapper {
		position: fixed !important;
		transform: translateX(-100%);
		transition: transform .45s cubic-bezier(.65,0,.35,1);
	}

	html.desktop-nav-open #header-wrapper {
		transform: translateX(0);
	}

	/* Contenu decale (et non recouvert) : il "pousse" en meme temps que
	   le panneau coulisse, avec la meme transition. */
	#content-wrapper,
	#footer-wrapper {
		margin-left: 0 !important;
		transition: margin-left .45s cubic-bezier(.65,0,.35,1);
	}

	html.desktop-nav-open #content-wrapper,
	html.desktop-nav-open #footer-wrapper {
		margin-left: var(--desktop-sidebar-width) !important;
	}

	/* Bouton hamburger, position fixe a gauche, centre verticalement sur
	   la hauteur de la fenetre (et non plus sous le bandeau defilant).
	   Aligne horizontalement avec les fleches precedent/suivant des
	   barres de navigation projet (--nav-arrow-left, definie plus bas) :
	   le centre du bouton (44px de large) doit tomber au meme endroit
	   que le centre des fleches (boite de 30px demarrant a
	   --nav-arrow-left, donc centree a --nav-arrow-left + 15px) -- d'ou
	   le -7px (15 - 22, moitie de la largeur du bouton). */
	.desktop-menu-toggle-btn {
		display: block;
		position: fixed;
		top: 50%;
		/* Centre horizontalement sous le logo (--logo-center-x), plutot
		   qu'aligne avec les fleches prev/next des pages projet
		   (--nav-arrow-left, qui reste utilisee uniquement pour ces
		   fleches, cf. plus bas). */
		left: calc(var(--logo-center-x) - 22px);
		width: 44px;
		height: 44px;
		padding: 0;
		border: none;
		background: none;
		cursor: pointer;
		z-index: 1100;
		transform: translateY(-50%);
		transition: left .45s cubic-bezier(.65,0,.35,1);
	}

	/* Panneau ouvert : le bouton reste visible (icone deja morphee en
	   croix via les regles .pl-menu-bar-* plus haut) et se decale juste
	   apres le bord du panneau, avec le meme retrait de 40px que le
	   bouton hamburger a l'etat ferme -- meme hauteur (top/transform
	   inchanges), comme sur la maquette. */
	html.desktop-nav-open .desktop-menu-toggle-btn {
		left: calc(var(--desktop-sidebar-width) + 40px);
		/* Sous le z-index:101 des sous-menus (voir .sub-menu dans style.css) :
		   evite que la croix ne recouvre le sous-menu AImagination quand ce
		   dernier s'ouvre pile a l'endroit du bouton. */
		z-index: 90;
	}


	/* Les pages projet ont jusqu'a 3 barres de navigation precedent/suivant
	   (.video-nav-bar en haut de page pour les projets sans video d'intro,
	   .folio-navigation-top plus bas, #folio-navigation tout en bas). Leur
	   bouton "gauche" (classe/id nextProject, cf. commentaire dans les
	   pages projet) est positionne a 50px du bord reel de la page dans le
	   theme d'origine, qui supposait une sidebar TOUJOURS visible de
	   250/210px poussant deja le contenu d'autant. Notre sidebar etant
	   desormais masquee par defaut, ce bouton se retrouve a ~50px du bord
	   ecran, en plein sur le bouton menu (40-84px).

	   Formule UNIQUE et generique, valable pour TOUTE largeur >=960px (et
	   pour .video-nav-bar comme #folio-navigation) : le bouton se decale
	   d'une distance fixe --nav-arrow-left par rapport au bord de la
	   barre. Pas de calcul par palier d'ecran : une seule valeur, simple,
	   fiable, identique partout, plutot que plusieurs formules calees sur
	   la largeur de colonne de texte (fragile et difficile a maintenir).
	   Menu ouvert : meme principe avec --nav-arrow-left-open (46px),
	   la barre partant alors du bord du panneau plutot que du bord ecran. */
	:root {
		--nav-arrow-left: 50px;
		--nav-arrow-left-open: 46px;
	}

	.video-nav-bar ul li.nextProject a,
	#folio-navigation ul li#nextProject a,
	#folio-navigation ul li#nextProject.disabled {
		left: var(--nav-arrow-left);
	}
	html.desktop-nav-open .video-nav-bar ul li.nextProject a,
	html.desktop-nav-open #folio-navigation ul li#nextProject a,
	html.desktop-nav-open #folio-navigation ul li#nextProject.disabled {
		left: var(--nav-arrow-left-open);
	}

	/* Meme distance du bord a droite (prevProject, ">") qu'a gauche
	   (nextProject, "<"), pour une marge symetrique -- le theme d'origine
	   laissait prevProject a right:50px (style.css) quel que soit l'etat,
	   d'ou l'asymetrie avec les 180px/46px de nextProject ci-dessus. */
	.video-nav-bar ul li.prevProject a,
	#folio-navigation ul li#prevProject a,
	#folio-navigation ul li#prevProject.disabled {
		right: var(--nav-arrow-left);
	}
	html.desktop-nav-open .video-nav-bar ul li.prevProject a,
	html.desktop-nav-open #folio-navigation ul li#prevProject a,
	html.desktop-nav-open #folio-navigation ul li#prevProject.disabled {
		right: var(--nav-arrow-left-open);
	}

	/* Les deux fleches etant maintenant a la meme distance de leur bord
	   respectif, leur vrai milieu tombe exactement au centre de la barre :
	   plus besoin du calcul asymetrique precedent, le left:50% du theme
	   d'origine (style.css) suffit desormais tel quel. */

	/* Quand le logo est detache et fixe (html.pl-chrome-detached, pose par
	   le JS), la fleche gauche de navigation projet (nextProject, "<") de
	   #folio-navigation (bord ecran reel, cf. --nav-arrow-left plus haut)
	   se retrouve a left:50px -- en pleine zone logo (left:40px,
	   width:170px, soit jusqu'a 210px). On la pousse a 220px pour qu'elle
	   reste juste a droite du logo, avec la meme transition fluide que le
	   bouton menu.
	   .folio-navigation-top n'est PAS concernee : alignee sur la colonne
	   de contenu (voir plus bas), elle reste toujours a bonne distance du
	   logo, quelle que soit la largeur d'ecran.
	   La fleche droite (prevProject, ">") et le bouton central (closeProject)
	   ne sont pas touches : ils sont a droite/centre, hors de la zone logo. */
	html.pl-chrome-detached #folio-navigation ul li#nextProject a,
	html.pl-chrome-detached #folio-navigation ul li#nextProject.disabled {
		left: 220px;
		transition: left 0.35s ease;
	}
	/* Menu ouvert : le panneau pousse le contenu, la fleche repart de
	   --nav-arrow-left-open (46px) depuis le bord du panneau. */
	html.pl-chrome-detached.desktop-nav-open #folio-navigation ul li#nextProject a,
	html.pl-chrome-detached.desktop-nav-open #folio-navigation ul li#nextProject.disabled {
		left: var(--nav-arrow-left-open);
	}
	   colonne de texte (640/734px, cf. udt_media_queries.css) alors que
	   .video-nav-bar s'etend toujours bord a bord -- ce qui donnait deux
	   barres a des positions differentes. On annule cette contrainte pour
	   que les deux barres partagent toujours la meme largeur/position, a
	   toute largeur d'ecran desktop. */
	#folio-navigation {
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* .folio-navigation-top (la 3e barre, juste sous le texte d'intro) est
	   simplement alignee sur la colonne de contenu (section.pages, deja
	   centree par le theme, max-width:1070px cf. style.css) -- exactement
	   la meme largeur que l'image/video juste au-dessus. On annule la
	   formule plein ecran d'origine (qui supposait une sidebar permanente
	   de 250px, cf. style.css) et on laisse la barre prendre 100% de sa
	   colonne parente, sans aucun calcul base sur la largeur d'ecran :
	   plus simple, plus robuste (aucun souci de barre de defilement ni de
	   logo fixe a eviter, puisque cette colonne reste toujours a distance
	   du logo). Menu ouvert : #content-wrapper (donc section.pages) est
	   deja repousse par --desktop-sidebar-width (cf. plus haut), rien de
	   plus a faire ici. */
	.folio-navigation-top {
		position: relative;
		left: 0;
		margin-left: 0;
		width: 100%;
	}

	/* Les boutons precedent/suivant collent desormais aux bords de cette
	   colonne (donc aux bords de l'image au-dessus), et l'icone grille
	   reste centree dessus -- plus besoin de --nav-arrow-left ni d'aucune
	   variable liee a l'ecran pour cette barre. */
	.folio-navigation-top ul li.nextProject a {
		left: 0;
	}
	.folio-navigation-top ul li.prevProject a {
		right: 0;
	}
	.folio-navigation-top ul li.closeProject a {
		left: 50%;
	}
}

@media only screen and (min-width: 1200px) {

	/* Aligne verticalement la barre precedent/grille/suivant du haut de
	   page (.video-nav-bar, visible uniquement sur les pages projet sans
	   video d'intro) sur le bouton menu : le theme d'origine ne prevoyait
	   pas de bouton menu a cote de cette barre, donc pas besoin de les
	   aligner. Reduit uniquement l'espace au-dessus de la barre (66px a
	   la base) ; l'espace en dessous, vers le titre du projet, ne change
	   pas. */
	.portfolio-project:not(.has-video-intro) .video-nav-bar {
		margin-top: 38px;
	}
}

@media only screen and (min-width: 99999px) {
	:root {
		--desktop-sidebar-width: 210px; /* correspond a la largeur de #header-wrapper a ce palier (udt_media_queries.css) */
		--sidebar-pad-left: 20px; /* #header-wrapper{padding:0 0 0 20px} a ce palier (udt_media_queries.css) */
	}
}
/* ==========================================================================
   BARRE DE NAVIGATION HAUTE (.video-nav-bar) MASQUEE SUR DESKTOP (>= 960px)
   --------------------------------------------------------------------------
   Sur les pages projet, il y a 3 barres prev/next :
   1. .video-nav-bar    — tout en haut (supprimee ici sur desktop : elle
                          chevauche le logo PAULLEON fixe)
   2. .folio-navigation-top — apres le descriptif (gardee)
   3. #folio-navigation     — tout en bas (gardee)
   On masque uniquement la 1ere via CSS, sans toucher au HTML (les liens
   sont generes par script, on ne veut pas casser la chaine de navigation).
   Mobile/tablette (<960px) : la barre reste visible et utilisable.
   --------------------------------------------------------------------------
   COMPENSATION D'ESPACE : la barre cachee occupait (height + margins) :
   - Pages sans video d'intro : 66px + 40px + 66px = 172px
   - Pages avec video d'intro  : 50px + 40px + 50px = 140px
   On restitue exactement cet espace en padding-top sur #content-wrapper
   pour que les titres de projet restent au meme endroit qu'avant.
   ========================================================================== */
@media only screen and (min-width: 1200px) {
	.video-nav-bar {
		display: none !important;
	}
	/* Pages SANS video d'intro : la barre etait le tout premier element de
	   #content-wrapper. On ne restitue plus l'espace qu'elle occupait
	   (66 margin-top + 40 height + 66 margin-bottom = 172px) : sur desktop
	   elle est completement invisible (le bouton menu la remplace), donc
	   ce grand espace vide au-dessus du titre n'a plus de raison d'etre.
	   On revient au meme padding-top:66px que les pages "PARIS NEW YORK
	   MONTREAL" (profil/contact, cf. #content-wrapper:has(h1.pny-title)
	   dans style.css), pour que l'espace au-dessus du titre soit le meme
	   partout. */
	#content-wrapper.portfolio-project:not(.has-video-intro) {
		padding-top: 64.5px !important; /* ESP_1 = 77px visibles (66px -> 64.5px) */
	}
	/* Pages AVEC video d'intro : la barre etait entre la video et le
	   titre du projet, PAS au tout debut de #content-wrapper. Compenser
	   sur le wrapper decalerait aussi la video plein cadre vers le bas et
	   creerait une zone blanche au-dessus d'elle. On garde donc la video
	   collee en haut (padding-top remis a 0) et on reporte l'espace
	   compense juste apres elle, sur la section qui suit.
	   On ne restitue plus l'ancien espace de la barre masquee (140px) :
	   meme logique que les pages sans video ci-dessus, l'espace video ->
	   titre suit desormais le rythme de reference 66px utilise partout
	   ailleurs sur le site. */
	#content-wrapper.portfolio-project.has-video-intro {
		padding-top: 0 !important;
	}
	#content-wrapper.portfolio-project.has-video-intro section.pages {
		margin-top: 66px !important;
	}
}

/* ==========================================================================
   LOGO PAULLEON TOUJOURS VISIBLE QUAND LE PANNEAU EST RETRACTE (>= 960px)
   --------------------------------------------------------------------------
   Le JS (desktop-menu-toggle.js) deplace #logo en enfant direct de <body>
   uniquement a >= 960px (classe html.pl-chrome-detached posee au meme
   moment). Ces regles lui donnent une position fixe equivalente a celle
   qu'il avait dans le panneau ouvert : meme left (40px = marge du panneau),
   meme top (bande defilante). Sous 960px : classe jamais posee, regles
   jamais appliquees, comportement mobile/tablette intact.
   --------------------------------------------------------------------------
   BLEND MODE (meme principe que le bouton hamburger) :
   isolation:isolate + mix-blend-mode:difference sur #logo, SANS filtre CSS
   -- c'est la couleur reelle du SVG charge (logopaulleon_OFF.svg au repos,
   logopaulleon_ON.svg au survol) qui est inversee par difference contre le
   fond de la page. ATTENTION : avec mix-blend-mode:difference seul (sans
   filtre), un remplissage noir pur (#000000) est l'element neutre de cette
   formule mathematique (|fond - 0| = fond) et devient donc INVISIBLE quel
   que soit le fond -- logopaulleon_OFF.svg doit rester dans un gris tres
   clair (proche de #f8f8f8, jamais #000000 ni un gris fonce) pour que
   l'inversion produise un resultat lisible sur n'importe quel fond, exactement
   comme logopaulleon_ON.svg. Pas de variation d'opacite au survol : le
   logo reste a pleine opacite en permanence (repos et survol identiques).
   ========================================================================== */
@media only screen and (min-width: 1200px) {
	html.pl-chrome-detached #logo {
		position: fixed;
		top: var(--top-banner-height, 34px);
		left: 40px;
		width: 170px !important;
		max-width: 170px !important;
		margin: 0 !important;
		z-index: 150;
		isolation: isolate;
		mix-blend-mode: difference;
	}
	html.pl-chrome-detached #logo img {
		width: 170px !important;
		max-width: 170px !important;
		height: auto !important;
		display: block;
	}
}

/* ==========================================================================
   BOUTONS PRECEDENT / GRILLE / SUIVANT FLOTTANTS EN BAS D'ECRAN (>= 960px)
   --------------------------------------------------------------------------
   Sur desktop, les 3 boutons de #folio-navigation flottent (position:fixed)
   en bas de la fenetre pendant tout le scroll. En fin de page, ils s'arretent
   a leur place naturelle, dans le blanc au-dessus du footer, au lieu de
   descendre sur le footer noir : js/hamburger-collision.js (bloc "dock")
   calcule le decalage a appliquer et le range dans --nav-dock-shift.
   - Chaque lien est fixe LUI-MEME (comme le hamburger et le logo) : son
     mix-blend-mode:difference d'origine continue de se melanger au fond.
   - #folio-navigation reste dans le flux comme simple ESPACEUR (50px avant,
     40px de haut : l'espace d'origine avant le bloc HAUT DE PAGE).
   - DOCK : en fin de page, les boutons se posent dans le blanc entre le
     chevron HAUT DE PAGE et le footer noir, au MILIEU de cet espace
     (calcul dans js/hamburger-collision.js), au lieu de descendre sur le noir.
   - 120px DE BLANC en plus a cet endroit (padding-bas de la bande HAUT DE
     PAGE, cf. plus bas) pour que la barre respire ; le chevron reste a sa
     place d'origine (top:50% recalcule : -60px).
   - FLECHES : meme axe vertical que le hamburger (--logo-center-x = 125px).
     Boite du lien = 30px -> -15px pour centrer, puis +7px (gauche) / +6px
     (droite) : le trait du chevron n'occupe qu'un cote de sa boite ; mesure
     au pixel pres, ces valeurs alignent le trait VISIBLE sur l'axe des
     barres du hamburger. La fleche droite fait le meme decalage en miroir.
   - MENU OUVERT : le hamburger passe a --desktop-sidebar-width + 40px
     (centre a +62px du bord du panneau) ; la fleche gauche le suit (54px du
     bord du panneau, +7px de correction visuelle), la droite garde le miroir,
     la grille se recentre sur la zone visible, avec la meme transition.
   - Tout est dans ce bloc >= 960px : en dessous, la barre reste dans le flux,
     inchangee (mobile/tablette).
   ========================================================================== */
@media only screen and (min-width: 1200px) {
	:root {
		--nav-dock-shift: 0px;   /* ecrit par js/hamburger-collision.js */
		--nav-float-ease: .45s cubic-bezier(.65,0,.35,1);
	}

	#folio-navigation {
		position: relative !important;
		width: auto !important;
		max-width: none !important;
		height: 40px;
		margin: 50px 0 0 0 !important;
	}

	#folio-navigation ul li#closeProject a,
	#folio-navigation ul li#nextProject a,
	#folio-navigation ul li#prevProject a,
	html.pl-chrome-detached #folio-navigation ul li#nextProject a,
	html.pl-chrome-detached #folio-navigation ul li#prevProject a {
		position: fixed;
		top: auto;
		/* --nav-top-lift : +100px en haut de page (la barre passe au-dessus des
		   commandes de la video plein cadre), 0 des que l'on defile ; pose par
		   js/hamburger-collision.js. --nav-dock-shift : remontee en fin de page. */
		bottom: calc(29px + var(--nav-dock-shift, 0px) + var(--nav-top-lift, 0px));
		z-index: 1050;
		transition: left var(--nav-float-ease), right var(--nav-float-ease), opacity .2s ease-in-out;
	}

	/* Bouton GRILLE (portfolio) : masque en fondu entre le haut et le bas de page
	   (classe posee par js/hamburger-collision.js) ; il reste visible en haut de page
	   et reapparait quand la barre se pose au-dessus du footer. Non cliquable masque. */
	#folio-navigation ul li#closeProject a { transition: left var(--nav-float-ease), right var(--nav-float-ease), opacity .3s ease-in-out; }
	/* Pages projet a SLIDER (COLOSSEUM, NISHIKI-GOI, APOLLO, WONDERLAND ; FR + EN) : la barre precedent /
	   grille / suivant n'apparait PAS sur le slider. Masquee des le premier rendu (CSS pur, pas de flash
	   au chargement) ; js/hamburger-collision.js pose html.nav-bar-show des que le bas du slider est passe
	   au-dessus de la barre (ou quand la barre se pose au-dessus du footer) -> elle apparait alors en FONDU. */
	#content-wrapper.portfolio-project:has(.epic-slider) #folio-navigation ul li a {
		transition: left var(--nav-float-ease), right var(--nav-float-ease), opacity .5s ease-in-out;
	}
	html:not(.nav-bar-show) #content-wrapper.portfolio-project:has(.epic-slider) #folio-navigation ul li a {
		opacity: 0;
		pointer-events: none;
	}

	/* Pages SANS slider ni video d'intro : le bouton grille est masque des le PREMIER rendu
	   (en CSS pur, pour qu'il n'apparaisse jamais meme une fraction de seconde en haut de page) ;
	   il n'est revele que par html.grid-btn-show, pose par js/hamburger-collision.js quand la
	   barre se pose au-dessus du footer (fin de page). */
	html:not(.grid-btn-show) #content-wrapper.portfolio-project:not(.has-video-intro):not(:has(.epic-slider)) #folio-navigation ul li#closeProject a {
		opacity: 0;
		pointer-events: none;
	}
	html.grid-btn-hidden #folio-navigation ul li#closeProject a {
		opacity: 0 !important;
		pointer-events: none !important;
	}

	/* Fleche gauche (nextProject) / droite (prevProject) */
	#folio-navigation ul li#nextProject a,
	html.pl-chrome-detached #folio-navigation ul li#nextProject a {
		left: calc(var(--logo-center-x) - 8px);
	}
	#folio-navigation ul li#prevProject a,
	html.pl-chrome-detached #folio-navigation ul li#prevProject a {
		right: calc(var(--logo-center-x) - 9px);
	}
	html.desktop-nav-open #folio-navigation ul li#nextProject a,
	html.pl-chrome-detached.desktop-nav-open #folio-navigation ul li#nextProject a {
		left: calc(var(--desktop-sidebar-width) + 54px);
	}
	html.desktop-nav-open #folio-navigation ul li#prevProject a,
	html.pl-chrome-detached.desktop-nav-open #folio-navigation ul li#prevProject a {
		right: 53px;
	}

	/* Grille : centree (au centre de la zone visible quand le panneau est ouvert) */
	#folio-navigation ul li#closeProject a {
		left: 50%;
		margin-left: -15px;
	}
	html.desktop-nav-open #folio-navigation ul li#closeProject a {
		left: calc(50% + var(--desktop-sidebar-width) / 2);
	}

	/* +120px de blanc sous le chevron HAUT DE PAGE (pages projet), la barre
	   flottante se posant dans cet espace en fin de page. Le lien
	   .back-to-top est centre via top:50% de la bande (cf. style.css) :
	   la bande grandissant de 120px vers le bas, on retire 60px pour qu'il
	   reste exactement a la meme distance de la fin du contenu. */
	/* Hauteur de la bande blanche au-dessus du footer : posee par
	   js/hamburger-collision.js (fitBand) pour que dernier visuel -> footer
	   = 4 espaces de 54px + les 3 elements empiles (boutons HAUT / BAS,
	   barre precedent-suivant). Plus de padding : le chevron du footer est
	   remplace par les boutons fixes. */
	#footer-wrapper.footer-dark.footer-dark-project #footer-top.footer-top-backtotop {
		padding: 0 !important;
		min-height: 0 !important;
		box-sizing: border-box;
		height: var(--band-height, 180px);
	}
	/* Hauteur ajoutee au bloc NOIR du footer (--footer-extra, pose par le JS) :
	   repartie moitie au-dessus, moitie en dessous des colonnes CONTACT /
	   PAUL LEON / LinkedIn, pour que le menu et les boutons HAUT / BAS restent
	   centres sur la fenetre tout en gardant les espaces de 54px en fin de
	   page. 0 si la fenetre est basse. */
	#footer-wrapper.footer-dark.footer-dark-project #footer-top:not(.footer-top-backtotop) {
		padding-top: calc(31px + var(--footer-extra, 0px) / 2);
		/* +10px (voir css/style.css, .footer-marquees margin-bottom
		   40px->30px) pour que la hauteur totale du bandeau ne change
		   pas sur les pages projets non plus. */
		padding-bottom: calc(65px + var(--footer-extra, 0px) / 2);
	}
	/* INVERSION (demande explicite) : en fin de page, la barre precedent/
	   grille/suivant se pose a l'ancienne place du chevron HAUT DE PAGE
	   (50% - 60px de la bande, cf. js/hamburger-collision.js), et le
	   chevron descend a l'ancienne place de la barre (milieu du blanc
	   sous l'ancien chevron : 75% - 19px de la bande). */
	#footer-wrapper.footer-dark.footer-dark-project #footer-top.footer-top-backtotop .back-to-top {
		/* --chevron-top : pose par js/hamburger-collision.js (geometrie de fin de
		   page, cf. HAM_TO_NAV / NAV_TO_CHEV) ; repli si le JS n'a pas tourne. */
		top: var(--chevron-top, calc(75% - 19px));
	}
}

/* ==========================================================================
   BARRES DE NAVIGATION REDONDANTES MASQUEES SUR DESKTOP (>= 960px)
   --------------------------------------------------------------------------
   Depuis que #folio-navigation est une barre flottante toujours visible
   (cf. bloc plus haut), les deux autres barres precedent/grille/suivant des
   pages projet font doublon :
   - .folio-navigation-top : entre le descriptif et les images
   - .video-nav-bar        : deja masquee plus haut (redite ici par surete)
   Masquees en CSS uniquement (le HTML n'est pas touche) : elles restent
   affichees et fonctionnelles en dessous de 960px (mobile/tablette).
   L'espace qu'occupait .folio-navigation-top (50 + 40 + 50px) n'est pas
   restitue : l'ecart texte -> images passe de 234px a 94px environ.
   ========================================================================== */
@media only screen and (min-width: 1200px) {
	.folio-navigation-top,
	.video-nav-bar {
		display: none !important;
	}
}

/* ==========================================================================
   BOUTONS HAUT / BAS DE PAGE A LA HAUTEUR DU MENU (pages projet, >= 960px)
   --------------------------------------------------------------------------
   Deux chevrons fixes (crees par js/page-scroll-buttons.js), colonne de
   droite, centres verticalement sur le bouton hamburger (top:50%) : HAUT au-dessus,
   BAS en dessous, a 35px du centre. Ils ne bougent jamais (comme le
   hamburger). Horizontalement, leur axe est le
   miroir de l'axe du hamburger (--logo-center-x depuis le bord droit), donc
   aligne sur la fleche droite de la barre precedent/suivant. Meme dessin
   que les autres chevrons (carre de 20px pivote, trait 2px blanc +
   mix-blend-mode:difference). Le lien HAUT DE PAGE du footer est masque
   sur desktop : il est remplace par ces deux boutons.
   ========================================================================== */
.page-scroll-btn { display: none; }
@media only screen and (min-width: 1200px) {
	.page-scroll-btn {
		display: block;
		position: fixed;
		top: 50%;
		right: calc(var(--logo-center-x) - 19px);
		width: 30px;
		height: 30px;
		z-index: 1050;
		isolation: isolate;
		mix-blend-mode: difference;
		cursor: pointer;
		transition: right var(--nav-float-ease, .45s cubic-bezier(.65,0,.35,1)), opacity .2s ease-in-out;
	}
	html.desktop-nav-open .page-scroll-btn { right: 43px; }
	.page-scroll-btn:hover { opacity: .7; }
	.page-scroll-up   { transform: translateY(calc(-50% - 35px)); }
	.page-scroll-down { transform: translateY(calc(-50% + 35px)); }
	.page-scroll-btn::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 20px;
		height: 20px;
		border-style: solid;
		border-color: #ffffff;
		border-width: 0 2px 2px 0;
	}
	.page-scroll-up::before   { transform: translate(-50%, calc(-50% + 7px)) rotate(-135deg); }   /* trait visible = moitie haute du carre pivote : recentre le trait sur le centre du bouton */
	.page-scroll-down::before { transform: translate(-50%, calc(-50% - 7px)) rotate(45deg); }

	/* Le lien HAUT DE PAGE du footer est remplace par les boutons fixes. */
	#footer-wrapper.footer-dark.footer-dark-project #footer-top.footer-top-backtotop .back-to-top {
		display: none !important;
	}

	/* Autres pages (accueil, portfolio, profil, contact, mentions legales,
	   AImagination... FR et EN) : meme remplacement. On ne masque que le
	   lien (l'ancien chevron / texte HAUT DE PAGE) ; la bande blanche du
	   footer garde ses dimensions, la mise en page ne bouge donc pas. */
	#footer-wrapper.footer-dark:not(.footer-dark-project) #footer-top.footer-top-backtotop .back-to-top {
		display: none !important;
	}
}

/* ==========================================================================
   BARRE PRECEDENT / GRILLE / SUIVANT FLOTTANTE, FENETRES 960-1199px
   --------------------------------------------------------------------------
   Le bloc flottant plus haut ne s'active qu'a partir de 1200px. Entre 960 et
   1199px (petit portable, fenetre de navigateur reduite) la barre restait
   dans le flux, en 3 exemplaires. Ici : meme comportement que sur grand
   ecran. Les 3 boutons de #folio-navigation sont fixes en bas de la fenetre
   pendant le scroll ; en fin de page ils se posent a leur place naturelle,
   au-dessus du footer. js/hamburger-collision.js (bloc "TABLET DOCK") ecrit
   --nav-dock-shift-t. Les deux autres barres, redondantes, sont masquees.
   ========================================================================== */
@media only screen and (min-width: 960px) and (max-width: 1199px) {
	:root { --nav-dock-shift-t: 0px; }

	.folio-navigation-top,
	.video-nav-bar {
		display: none !important;
	}

	#folio-navigation ul li#closeProject a,
	#folio-navigation ul li#nextProject a,
	#folio-navigation ul li#prevProject a {
		position: fixed !important;
		top: auto !important;
		bottom: calc(29px + var(--nav-dock-shift-t, 0px)) !important;
		z-index: 1050;
	}
	#folio-navigation ul li#closeProject a {
		left: 50% !important;
		margin-left: -15px !important;
	}
}


/* ------------------------------------------------------------------------
   MENU OUVERT : LES SOUS-MENUS (ARCADE, AI magination) PASSENT AU-DESSUS DE LA BARRE DE NAVIGATION PROJET
   Le panneau #header-wrapper (fixe, z-index 100) contient les sous-menus (z-index 101 DANS ce panneau), alors que les
   fleches precedent / suivant et le bouton central sont fixes avec z-index 1050 : elles passaient donc par-dessus les
   sous-menus quand ceux-ci s'ouvrent a leur hauteur (chevauchement visible avec "INVADERS" / "CCIFC").
   Tant que le menu est ouvert, on les repasse juste sous le panneau (99). Elles ne chevauchent le panneau que par ces
   sous-menus (elles sont decalees a droite du panneau), donc aucun autre changement visible.
   POUR REVENIR EN ARRIERE : supprimer ce bloc.
   ------------------------------------------------------------------------ */
html.desktop-nav-open #folio-navigation ul li a,
html.desktop-nav-open .folio-navigation-top ul li a,
html.desktop-nav-open .video-nav-bar ul li a,
html.desktop-nav-open #folio-navigation ul li.disabled {
	z-index: 99 !important;
}

/* ------------------------------------------------------------------------
   BLOC ARCADE (GIF START_NOW.gif + Blason_OFF.gif) : LES DEUX GIF CENTRES L'UN SUR L'AUTRE, AU CENTRE DU MENU
   Avant : aucune regle ne positionnait .insert-coins-gif (START_NOW.gif) : les deux images etaient posees dans le flux,
   le texte "START GAME" se retrouvait decale par rapport aux bornes d'arcade, et le bloc (fixe a left:40px) ne tombait pas
   sur l'axe du menu.
   Maintenant :
   - le lien est une boite de 163 x 163 px (taille du badge) ; les deux GIF y sont superposes, chacun centre a 50 % / 50 %
     (donc meme centre, quelle que soit la taille de START_NOW.gif) ; "START GAME" passe devant les bornes ;
   - le bloc est centre sur l'axe du menu : les liens du menu sont centres sur la moitie de la largeur du panneau
     (var(--desktop-sidebar-width) / 2) ; left = cet axe - 81,5 px (demi-badge) ;
   - le sous-menu ARCADE reste exactement ou il etait (colle au bord droit du panneau) : son decalage est recalcule
     pour compenser le deplacement du bloc.
   Desktop uniquement (>= 1200 px) : en dessous, tout ce bloc est masque (style.css).
   POUR REVENIR EN ARRIERE : supprimer ce bloc.
   ------------------------------------------------------------------------ */
@media only screen and (min-width: 1200px) {
	header nav#primary-nav ul#menu-1 li.blason-menu-item {
		left: calc(var(--desktop-sidebar-width, 250px) / 2 - 81.5px) !important;
	}
	header nav#primary-nav ul#menu-1 li.blason-menu-item > a {
		display: block;
		position: relative;
		width: 163px;
		height: 163px;
		padding: 0;
	}
	header nav#primary-nav ul#menu-1 li.blason-menu-item > a img.blason-badge,
	header nav#primary-nav ul#menu-1 li.blason-menu-item > a img.insert-coins-gif {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		max-width: none;
		margin: 0 !important;
	}
	header nav#primary-nav ul#menu-1 li.blason-menu-item > a img.blason-badge { z-index: 1; }
	header nav#primary-nav ul#menu-1 li.blason-menu-item > a img.insert-coins-gif { z-index: 2; }
	/* sous-menu ARCADE : meme position absolue a l'ecran qu'avant (x = largeur du panneau - 1 px) */
	header nav#primary-nav ul#menu-1 li.blason-menu-item .sub-menu-mask {
		left: calc(var(--desktop-sidebar-width, 250px) / 2 + 80.5px) !important;
	}
}