/* ==========================================================================
   PAGE CONTACT : SLIDER "SHOWREEL" EN TETE DE PAGE  (v2 : equilibre de l'accueil)
   --------------------------------------------------------------------------
   Meme slider que l'accueil (plugin js/jquery.epicslider.js + navigation
   js/slider-nav-b.js) : uniquement les slides a FOND VIDEO, dans l'ordre.
   Une SEULE legende fixe : le logo PAUL LEON blanc.

   REPERES MESURES SUR L'ACCUEIL (slide a bouton) :
     - le groupe  logo + bouton  se TERMINE (bas du bouton) a 60 % de la hauteur du slider
       sur desktop, il reste ~90 px entre ce bas et l'icone scroll ;
     - logos visibles : 90 a 250 px de haut, 340 a 470 px de large (desktop) ;
     - le texte (bouton) est petit : police Doto 800, 15 px, interlettrage 0,11 em.
   Ici, le BAS DU LOGO prend la place du bas du bouton (ancre --anchor, en fraction de
   la hauteur du slider, mesuree depuis le bas), et "GET IN TOUCH" a la typographie du
   bouton VISIONNER, un peu agrandie.

   REGLAGES (par palier, sur section.contact-hero) :
     --hero-h   hauteur du slider (desktop : fenetre - bandeau ; tablette 520 ; mobile 300)
     --anchor   position du bas du logo, en fraction de --hero-h depuis le bas du slider
     --logo-w   largeur de la boite du logo (le glyphe visible en occupe 96 %)
     --gap      espace entre le texte et le haut visible du logo
     --kicker   taille du texte
   ========================================================================== */

section.contact-hero {
	--hero-h: calc(100vh - var(--top-banner-height, 34px));
	--anchor: .40;
	--logo-w: calc(clamp(250px, 22vw, 380px) * .804);   /* 0,67 x 1,20 : +20 % par rapport a la version precedente */

	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	background: #000;
}

section.contact-hero .epic-slider {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   TABLETTE (768 - 1199 px) : slider de 520 px (comme l'accueil)
   Accueil : bas du bouton a 67-75 % de la hauteur -> ancre a 32 % depuis le bas.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1199px) {
	section.contact-hero {
		--hero-h: 520px;
		--anchor: .31;
		--logo-w: calc(clamp(230px, 33vw, 300px) * .804);   /* 0,67 x 1,20 : +20 % par rapport a la version precedente */
	}
}

/* --------------------------------------------------------------------------
   MOBILE (<= 767 px) : slider de 300 px ; logo de l'accueil = 160-195 px de large
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
	section.contact-hero {
		--hero-h: 300px;
		--anchor: .30;                   /* au-dessus de la barre precedent / pause / suivant (haut a ~78 % de la hauteur) */
		--logo-w: calc(clamp(150px, 46vw, 190px) * .804);   /* 0,67 x 1,20 : +20 % par rapport a la version precedente */
	}
}

/* --------------------------------------------------------------------------
   BOUTONS DU SLIDER RETIRES sur la page contact : play / pause, precedent, suivant.
   Restent : la barre de progression, le bouton plein ecran et l'icone SCROLL DOWN.
   Le defilement automatique continue ; le clic sur l'image (desktop) et les fleches du
   clavier changent toujours de slide.
   -------------------------------------------------------------------------- */
/* (nov. 2026) CONTACT ET PROFIL = MEMES COMMANDES QUE TOUS LES SLIDERS (js/slider-nav-b.js) : play / pause en bas a droite, plein ecran en haut a droite, filet de progression,
   clic a gauche / a droite de l'image. Seuls les chevrons precedent / suivant et la barre d'origine du plugin restent masques. */
#slider-prev,
#slider-next,
section.contact-hero #es-direction-nav {
	display: none !important;
}

/* --------------------------------------------------------------------------
   ICONE SCROLL DOWN
   Desktop (>= 1200 px) : fixe au bas de l'ecran, comme sur l'accueil (css/scroll-indicator.css).
   Tablette / mobile : js/contact-scroll-icon.js la range dans le slider ; elle est
   centree en bas, au-dessus de la barre de progression.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1199px) {
	section.contact-hero > .scroll-indicator {
		display: block;
		position: absolute;
		left: 50%;
		top: auto;
		bottom: var(--pl-tab-icon-bottom, 18px);   /* tablette >= 768 px : remontee par js/contact-hero-logos.js ; mobile : 18 px */
		z-index: 12;
	}
}

/* ==========================================================================
   EFFET "VIEUX TELEVISEUR / NO SIGNAL" DEVANT LE SHOWREEL
   --------------------------------------------------------------------------
   Memes couches que les vignettes COMING SOON de la page portfolio
   (css/portfolio-coming-soon.css), posees par-dessus les videos :
     1. .ctv-dark   voile noir (les vignettes : 66 % + 33 % ; ici plus leger pour garder les videos lisibles)
     2. .ctv-snow   neige legere qui saute toutes les 0,5 s (opacite .07, comme les vignettes)
     3. .ctv-glow   lueur bleutee de tele qui vacille (meme degrade et memes keyframes)
     4. .ctv-bezel  CADRE DE LA TELE, le meme PNG transparent que les vignettes, ETIRE aux
                    dimensions du slider (background-size 100% 100%) : on regarde dans l'ecran.
   La trame de lignes horizontales est deja fournie par le slider lui-meme (css/glitch-tv.css).
   Le logo (z-index 5) reste devant ; les boutons du slider (z-index 12) aussi.
   REGLAGES (sur .contact-tv) : --tv-dark (0 = aucun voile, 1 = noir) ; --tvl (intensite de la lueur) ;
   --tv-snow (opacite de la neige) ; --tv-bezel (opacite du cadre ; le noir du PNG integre monte a 95 %, il etait a 84 % sur les vignettes).
   POUR TOUT RETIRER : supprimer le <div class="contact-tv"> de la page.
   ========================================================================== */
.contact-tv {
	--tv-dark: .10;                                  /* voile noir : 10 % (etait 30 %) */
	--tvl: 0;                                       /* lueur bleue : SUPPRIMEE (etait 35 %, avant 70 %) ; pour la remettre, repasser a .35 et retirer la regle display:none sur .ctv-glow */
	--tv-snow: .07;
	--tv-bezel: 1;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: auto;   /* (nov. 2026) PAS de z-index ici : un z-index creerait un "groupe isole" et les modes de fusion (soft-light, multiply) ne verraient plus l'image du slider dessous,
	                    seulement les autres calques de la tele (transparents) -> l'image s'affichait a 100 % sans fusion. Le niveau (4) est donc porte par chaque calque <i> ci-dessous. */
	pointer-events: none;
	overflow: hidden;
}
.contact-tv i {
	z-index: 4;                      /* au-dessus des couches du slider (le logo est a 5, le titre a 6) */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	pointer-events: none;
}
.contact-tv .ctv-dark { background: rgba(0, 0, 0, var(--tv-dark)); }
.contact-tv .ctv-snow {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	opacity: var(--tv-snow);
	animation: ctvSnow .5s steps(1) infinite;
}
.contact-tv .ctv-glow {
	display: none;                                   /* voile bleu de l'effet tele retire */
	background:
		radial-gradient(ellipse 62% 58% at 50% 42%, rgba(120, 185, 255, calc(.42 * var(--tvl))) 0%, rgba(70, 130, 255, calc(.22 * var(--tvl))) 38%, rgba(40, 90, 230, calc(.08 * var(--tvl))) 66%, rgba(40, 90, 230, 0) 100%),
		radial-gradient(ellipse 100% 100% at 50% 50%, rgba(30, 70, 200, calc(.07 * var(--tvl))) 0%, rgba(30, 70, 200, 0) 80%);
	opacity: .6;
	animation: ctvFlicker 13s ease-in-out infinite;
	will-change: opacity;
}
.contact-tv .ctv-bezel {
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAU0AAADkCAYAAAAclHZWAAAp2ElEQVR42u2dy69kWXbWv71PxM1nPbqyXt1V1dgt/KCRbWRjCQQS8owBIyMxAfGQGTFB/AFIMDNiwgDmiDkCIZCFkGzkARY0pqElI+NXl9v16K6uqq6szMq8eW+cvRmcvTNWrFj7cSLuzcp77veTQnFvxIkTJ87jO+u113YAfoQ6rvJeFM/572As59OjtI6olrW+4xBq2zR3HYe872bsw9rnfWWZ0Fh3bHxHVM+usn6XlnMzfp874vyyfn9I/wfx24L6PXk7feM7onEM5Oetz+r3PY7DXeL5FTvWoY/vRV5/vddWPPD3ufQY1HlRQy/jG/t371xfdRyUHtGQJ661/Kg2oHbCOOMExSWKTutkaglea/sGY51xxsUzVL43Fn5bME661okZC/vfV7azRzR95zGqfb5HNOLMC90dIUZu5m84dFvikdvZI1rHXF/6/HEHrj8WXvfi2MbCfo8ANunvsXPfWuIaCtdeVMZCXHXuqNpBHTsP0LlhdQZjp7kjLT3XEGHMFI/QWH/rzhYaIuLUvnCGMLojTmrMFIBonJTxCEt+7LxBWtZsPr9agu87rC3r9dBpiYcDBP0irMzWb+i1NMcZ655rWeb9N1TOpdr2D5XtD4b1G9W55StGgXX9BMNzae2bne1bzRC90skSO+/yUdwVxiSiY+FCnXMA4wHb3HPX6xXNOaLeY1m3LgrXcZd2M+70rmN/tESzx1txB35/66JzBS+m93yMle0LHReWP+CcmCOcY6e1XTufYkWUorKshsr5VnKNAeBJwVJzje0fK9/hjXNQX0/hgJtXr+YFS7BXB94hrZOpdoCkRTIqEdPWhCXCtYum5vLK94YOi3mjRLNlSfcKZqzc2ZwRP7G2PxbuqD0xzVCwpucc65aLHo3/e0W1FA7y4nc744LpvSG4ygXd400d48a3ttMfsf5jwwwly07vf9+wYn3juu/xFHq2PRbc/1AI68WO8NDs83+F46y5UiBdf2monFAybhcMsXANN85XLm6fDmpQgthz18UM9631XjjigB37/VHczWOn9Vk6aXosxniA6NTe9x1u03CAaGxQj7P3JHpaiSaH/STosfHPnpvXnESdbwh+7dxy4qbsGp7GZfx+6zzVSbxQEN6e3+as8EzL0uwJApficD0XkGscwNj5uWic7DJmFSoWY0RfwuuYgxkOjGOFxrbVtj0WPIFWDNPa76WbYmyIZW+SwTVE3zVCHTVvYOi8OErbHTuuDd/xO13FqDgmpKSvw4sSJXn+eByW/LK8iNj5+VgJP8QjbhJztrsY0+zNjrdOmNKFFioXX5yx0w+14ELjBAwNCzpe4ElYuwHEwrKhIUChErcJR25rzz5ouWVu5veVwi/oiN2hw0PR54IvCGXLdXcHCM9clzkUts+6abqCQDvM9y5a7q++KdW277JpnZ9uxnXpes7BFQ5z/VxBuKIR7+i5u9YsTnnAQsVttE7WEYcF6eOMmFwLXVOo4zg9ojc3LhPQX4LjG/txzveO2C3n8Ed4McdeLLFggbnCfrVisr5z3bXseiy4qKEzPBEqx981ztuekrNQOR9cxZtxje3L75VyCb7jxugr+yk2bmi9N4qeCgQ3xz3vsSZcxcJsWTA9dwKrpqpW29VKfISCNRlFDCrXfFmZS1cQaF9wF2PBYrQuVnmzicb6Y8FtReU3WRdNrbjXVY5zFBdC6bwIsEtdLJfHq981t3LCdYipdt+scpOhcq64jpCGQz1rLbPMrmG5RuPCL2WI5yQiDymPsixVqyZ2NCzpiN3aSa9+f2sQwfNEPEQ057idwTh5Y6fbWxLc2rrnuBYyMRKNmKMX7sZGCZ03duBY+P1Bnax5fTpxFZTlqUMa8gawUtteyzxK4RqU8A5iXdoFHdX3eXWePEifuy1uZqNhWUZlLct6vB5LWycZWnWSDnbdpS6Lqd3o1+q7T8S+k9t5blivPn0+KiEuleY5lEv1SuGbUIkVlm5+VuVBRL1iITTiqtYNwVV+Y+kmEdQNJ3aG1mJh++YObjiY1UxB/LJUvkd0SxeZExfTqKywUYlfNGJio7JGBrWuvG75+rlxQgXjzi0veimKg7JMoP7X7n4UAnWm9kHezvMk3PeVhbBRYRQphBvx2qP02S8APMT+AAVUbpDB2Gcb1MvFgHrSyarRzPuxlhiwCuIHQ+RWSTjljXQF4DXsZsTz80tiXSfiobftLoAX0o1H/paV2AZr+J6+yYSKOLa8HytM0aoEaGlEMG4IJTGV57PlDfTG7T0ubtTgLNGMDT++N64VKsJWupBQcJeiYXGUxrnres8gXneGdRkqd7WN4VLlk/FcPHtx0mWReawuxpVap0t/PxKCIU+UR8mSe6RO/Ptp/Q/S/4/T58/F7x3Fa/fFa+cizPAQwGkS1VbI5Mu8SV5lSjW3XojpOj2/os79FwDcEsK5Vp7By+nvu2m5F9X5eTu9dkt4NC8AuKmsuhPxvYO6LiwhDQWDQv/OVSG2Wiu7aoVleioCWmWErhFyOuggf9hwj3pEMzTc8FJGvWfYVTQsISu7OxoHfCNE7Mw4CFlcn2A3CyhjNFl8HqdHFp4vxPbk/7N4/kD8/7nY5mztnQH4JP0fhOBtjJvK8yQGlvUWFyh6tYsyHnDxPiuRXiWRdMnyvZUePon0ICzaWwC+mp4B4PX0Xg7L3APwhnptUEKqQxFjEvtguNdeeVdeWfut59Lv13Hx1jGNhfDO0e55LeZxqGDWTrRaOU3t86OKMwV1MG6IeGIW0VMhXDEJ3B8JofwcwA+T+D1Jj8fi8UWy5p48I8usdhIdUvlwyLbGL1kclijIc4a3lrwBq1olD2f87IDtk7HcmwC+kkT1dnrcA/BqEtuXAbydLN87abks2g+VlSeTQUGFGjwOL1eqVSG4Roz4qAP54Yx4RSnG0Er41BI5rvF9Ok65MQ6EE3GpmA7aZ0kYPwDwnSSGnyQ39/tJ/ICpNd7ZBYpBb4FxfE6sFXK9hLlnAEMPHsBbSUhvAPg6gJ8D8E4S0XtJWE/S+xBhKWkZeuxXFvQMb5XL+xmekGtYoc0RYS6Jil557S7XEkx0uOYtS0iX6eTnHPPZJPHLSYz30u94L1mNfwjgUwAfoT18EjPcAVpc5LoJr/VaaLjLtwC8CeBPpf+/CeAbSVDfwZRMO0nGihRSWdc5p69ArSlIz++pDQZwFyWaPVaSFsyxIUDSzJbB8KjigO8ny/E7ybX+KFmOT2ZYf8e2wyKE4rpfdpX/Pit85i0AX8MUb30LwF8A8BPJ3V8n136N/Q5opYSQlZBq1R3PcdFN4XRJhObEU+aIpvzMqH68vFutDIG8D+C7SRz/bwoj/H4jVuM7LGBCyMVbpSv1/2Doxpnx+a9iSjjdA/CzAH46WaivYoqjvpTWfYZtKR9gj/TS2+RLLnbDk3Qt0Xxvxk6qNQ2ODbd9wH4ccoUpMfMIwLsAvg3gfych/z2Up+Jw2O21R3Ek5MsVzZ5uTrpyZcRuk+qcvH0LwE+mx08D+Knk1t/CboXLBnatrhbuuc2e9egnr3/E9xor8g3RbG1AzkrnDNwPAXycxPG3McUg/ygJ5ZMO65HiSMjzJ5yuIFixIZ45ESSXz9Uwsq7155M7/xqm+OhXMdWlBuwPdpDfM2BexlyPdDJF849n3E0i+qanyHeCIQnlF0kkfwvA/wLwO5jikLGyMymQhFwt0QT65uWyrENZBWMNsV0nTbmbxPLHAPxScum/gW3lzGB4pHM6S1nDQ91Fi6ZeNid0bmEq/fm3AP49ptjkF8YPkjuHIknI1RZNNATKKzGTlpzHNjYqrcecFM7Z9VGEA94E8BcB/CKmLP0r2C9hGjq2q/u3XbRonmE73vY3AfxLAN8SO+YE+4khiiUhV180gf2uRa5TNCFEsCSaEK56wHZgTi5begXAnwfwywB+QeiUHnk0RziLovm9GTuoNo9P/iH/E8C/BvDrmGKUL2B/nPTcZsSEkKsjnpaYekM4JTn2uCq4xgO24/Hl5/PQzTNMSeVXAfwDAH9NWJhDpxVshRD2lh8A/KOZO8fq1ZgLU38bwK8mK/MOpror3c3G08Ik5FpZn1DXv7WstkC1pXoD+z05dcPoPGz6W+m9PyM0CJg3JUhRNA/pp6mbbeQf+msA/jGm+sqXhWXZioFSOAlZFnOm3Igdy+X67TXKieIc77yR/v43yfL8O9g2KrEamvfM7+S1aB4yjYKMF6wB/DsA/yRt5IvJLV9iFxxCyGEiCuFOaxe9Z0qaXNies+g6S5+fN5jini8A+K9p2V/BdqSRP+I3OGB/MnbrkT8gW69tMHX8uQPgPybB/CSJ8OYAV58QsjyhtHQkdmhBSYdkMTyU5Tgozzn3nv0WgP8Au92lbAakHyPsHhjBG2+0xDN3sP4KgD8B8K8wFasP2BalWp8lhFBEgf3h2FGJ1VjRJTmzwAh7mpNcIO+S9/ufAfyucN1bAq1ndth53Zp5rnS3yMvkH/cIwD/HVH95A/tz2tQG2hNCaIGOSiT1NC3nsLueyZkKcqJ5o9aXXzvFNJDm14Rb3zvXmNkM3Fesydpsj2sAfwDgv2O3a3TNNCeEEK0zwfg/KIGU09hssDu3VTDEUv4NTDHOdwH8D9hzibW86x3X3c/8kVJ1/wumGs9b2B+uFAt3iJK5TgihkGZCwX0H6mHDWlf7zzAN4X6A+nzuTTzKgVBrLp782kMAv4Hdynzt4vfESgkhpKYTofGejoFqzcqG4cNkbb5bEetu0ez5MXLjTjAFVv8PpmYcG8xvnU/BJOR6i2Rt3vcIezruYAhsMLxgOSOtnFL5AaY68qNyLC1LM6iNQPri7wjzNqDe17I0TxAh5PriZrjHscODlePWs7atxXf5ZG1+gKk88mB6ituDMnPvY+qi3qruR0EkaWUSQnTD35z0GTo8X+0p51k4ZbXOIAT1PGndiKlvr+5/cSFT+JY2OE+a9KjDzKZLTgiZI57OEEWdsNHlj7K95Kn4bJ6GOHOeXguGMMc5wulhZ7ljIXawwhTL/F3sTgrfslKtQC4hhLT0w0pI92TVN+KR6zk9pnnHPsV+849ufOFDOmuV/84TseUvtcRQJo5KWS9CCLGszp6SIv3aaBhw58nyzPWc2focMM1gayWOQsf3x5Xh11vqjcpG6wp7uuKEkGNcdes1X3HrrekxZEmSVy64nGs9Vlx1HXcFsJttKsUlpeV4jqnOSQ+iDyhnwiighJBDBFOO3tmg3Ex4hD19hjNcfDm6yAvtAvb7/ZqatmpsvP7AQ0xDJ7ULry1PCiYh5KKEVOZFZCd3S9yk0J6J1/K86RsAP1CGnmlRGpZnUTQt8gZ/ju2cQqHgjlMoCSGXbYmOwqKUwpYtzpwEyss8xjSxYx7ROB66IavOjc2P72O3iejIY0kIeQa4gjHnC95tTNalnE899wF+iN2RjHn9Pc2QZ9dpnqcNuYEjBrwTQsgFWZxBGHFa/HK50aCEV2bLZ3dyb03oLjfsBoDfErGAnMqnaBJCnoVYlpp2WBnwnLw+xTRa6DQZfB5TiPEx9ttZhg7rtjrdhVTjbFF+V8QTZlXRE0LIJQrqiP2mxlLHTgH8KGneB5hqzQfUB+iYTUQ87BZMViX+GbbZKLlRhBDyZbvpJcMv61XOpp+m/2V+plTcbq27a2I1uQEbHitCyHPmsqMhmPLxCFOc8yGmbPocYd5zz0vkAe6/A+DbtZURQsiXbHVaA2+ywZefP8M0GWTvlL47pZW9JUcrTMHTh2DGnBByNYU1122eJfdc9gt2vQZhb7rdYQqiEkLIVWDEfh+NPBT8cbI059aZO6iGHbN9e0IIec6ty6iMwzyT5Q+x32gIKPfz3Hmxp59cAPCHQm0JIeSqiKaMbWYNO00Wp56up2k4yjmCSo2HgSnL9D6PASHkioqn7O+7wZSfuV/QP6ASuqx1bpfK/GkyZ+mqE0KuqsWZdc0lwfzEEEutj9D6KCdWK3VhB6bgKWeRJIRcZeHcYNu0+D6mrm25p8Y6WaNOeeFFJTV998SIKdP0Mfc7IeSKW5uyvEjOTKlbXUrBdOLRXad5hu1oILrnhJCrKpzZmhwB/EGyMmEIpisZlr6ycvn+u2DvTELIcixOYMrVWLrmCn8DgOsdQsQx54SQpZFrNr34X7vqe+0vfcdKA5gEIoQsx9KEsDRPMfUK7q0/jytlnsqZJ/MXnAm/nxBClsIZ7P6bupFRKFmaJYsyUDQJIQsi69yHmBoSb1AfGbRTiilHBOUPjeq1kaJJCFkYDtMwyg8A3BPuuTOEMgiLdFxhd9C67Nwu/f8vxApZckQIWYJoRgDvYT+3k110a/4htEYEeQC3MY3TJISQpfF50jdtKBaT363idodpeNEjWpqEkAWSM+hnwuL02BbBm8XttS5HtcHshBBy1XkfU0KoNDeazvGEVpcja2Y2Qgi56mRN+ygZjyfi9aqRuOoQRBa3E0KWisc0caRTgprHn+8NqVwVBNGpD9LSJIQskceY4plOGInAbglSlDrYM4Vv7jdHCCFLc88/BvAnmBLe0XhfzpkeoBp2lOYKypkkQghZElnvvme8l+dI1wZlXCn3WzfiHFDpYEwIIQvgEXb7bUhR3ZszaGX48hCm6GCsiBBClsRDoXP54dQDWjSj8aEsmrQyCSFLdc8jpjrNUekgxN9SNL1Xvr1c2SjMU851TghZKo8xjQrSM1ZAiefTLkcoLJA//ADAE+5XQshC+SwJpy9Yo/IRV0okrcnSz+iiE0IWzBl2p+/VYrkjoivl22e0cFqZJUIIWQJR6KAMR+bnQS5bc88HTImiPPkQIYQsUSw/AHAf0/hzOQoyCCPy6WNVsCCd+gBHBBFCliqan2E7lDJWlnvqfsfCAhEcd04IuR7ieYppKKXWPLNze2klsfQhQghZmGg+xDStT2zooVsVFpCdi0tj0gkhZCk8Ft51UN72jj7qzu1y/t+BYkkIuSY8xHZanyor7LZ13zFDhX9PF50QsnRLs+RV77yW3fAR+3MFebrmhJCFk/XtCwAvoiP57YXvrqF7Tgi5Lpxi2z/TamK0J5oaObEa5wgihCydnD0PsOvWm6IJpbgUTULIkt3zB9iOCKrOwusbKxtoaRJCrgEyER4MA7JLNLXFSQghS+Ucuy0wgyWYWjSjeviST08IIQtjk4QzGoIpczx7okkrkxByHXmYXHQ9rbkeh/60CbGMWwbsDifKsU1CCFmypWk1Y9dGo8/9Mq2uHnn6Xo+p+wchhCyNrHfnQjhzeDJgOwAoC6hboT5M0lEwCSHXgFCwNPdaZ1pNiKVb7lBuH0cIIUuzOlfYLTnay+v0CCLHnxNCroNgysZFUv9QEs3sv8NQWc99SghZuHu+Sc8jtslv3fntaScj+UEo337ANq5Ji5MQslRLc8R+1zeULM1sTcoFs1vObkeEkOssphKne2ZalibrNAkh18E9D4ZLbg6jzFbmgI7pKwkhZIGMvVrnC4pL0SSEXGc3vFs0KZCEkOtMs4ewN3x4Z6yEEEIIdjt6yMnUpMW5Bus0CSFkr07TEk2OBiKEXFeK010Ew10flWjS0iSELF0gZbNhPRvl04eMaep6zWxxDmCdJiHk+mF2OvIdZumaokkIWTilMOSovHFTNHUccwDbwxFCyFPR1HP8evHI/TSZDCKE0AKFXdweCtYmIYRcF6HUpZdPWVUs0CyiIzjlBSHkeopnbFmaOd2uRwoxpkkIIdiPX5bmQadoEkKuCzLHk0sus8vuWtnz3GPOmoCNEEKW5Io742+03POS4p5wnxJCFsxaWJXVxHeP203rkhCydHI9emzp3kr57yWzlWPPCSFLF80B22T4we45wMJ2QshyccI9P+nRQVqQhBAyCWarHt1p0ay1gaO1SQi5Du65bgm3l0lfwU6vO+XbUzQJIdfJXZdTl8tG7TvZc1dYgQeL2wkhy8Z3CGlzwQznCCKELJ0VOuvWawuFhhVKCCFLYY3dBh2+ZpLKNkhRvZ7/v8t9SghZMLewrdMcWn58KdETAWzS36+L1wghZImWZs6eB+Vp74lmzX/PrvkN7lNCyAKJwtLciNeKIyVboskEECHkOnAHwCm2pZbAdhYLUzSlVZlflyrL6S4IIUtmhfKIIDnwZ2hZmnlBTuNLCFkyllXpUZjuIhpqmh+5AbGsYWL5ESFkKUThnksdLIqrzJ47Q3lz+p1WJiFkybyAqbTSKy3csz694btnzpNoZtc8cL8SQhbK7fRYGd71nqUJQzgdpql7s1DS2iSELBWXrMyHPcZhbsYxGA85udpNcFQQIWR5YglM8cybAL5I/9dms/ArIZ47Jqj6P5urhBCyNKSRqD1u+ffOFL46GZQz5xt0zJlBCCFXmNuYEkFBeeEyUf60t+bKUNUgTNRRufGEELI07gB4SbnsWQO9sESHbGla5Ua5oD2ID625bwkhCyLr3q2CUWh6160RQRHbxBDHoRNCliyeztC/WaKZ0dl0QghZEnnq3lybqXtyzBbNQNEkhCyYe7CHiRfd84j9/nEhqe8I4AxTkPSktiJCCLmivIQprjmio9G6HipkVcNHZbISQsiSyI2KgrI4ZROjp8vmec+DYUXGwt+EELIEorA0R+wmhHSZpZOWplTSUFFiQghZIq9hf/SPzONIS9PL4vZQEMe8ghPuW0LIAi3Nu9gNQ+YSS+miR2lptshm6y3uY0LIwsgd3fLoRymYZh6nJZoRU1/N3DpJqjMhhFx1cuwye9o6ZKnnTws9lmYWzRe4fwkhC2MF4FWUZ7AwVbZlup6Bc58TQpbnlgPAO9g26xiUl10UTWtCNfn6ufoSQghZimjewnaaC21ExpJpahGxnzWiaBJClsY6edG+YWHuZM9bNZpy5YQQsiRuYOqnGVEuu9xzz1ExSeWY9Jvcv4SQhbnnr2DbO9gJ3Qtq2aehy9pslNolZ50mIWRpDNgNRzaZM4UFLU1CyFLIHvVtoYVZPKMSUt9yz/VK8/OJ4b4TQshV5gZmTh65KoilZaqyTpMQshRyzPLPYj8JriuGnBZN17A65fse7Sw7IYRcBRyAlzGFHh9jv2u71c3dLGjXxe35A2thbbJmkxCyBNGUM1JIN30oeNx74qiF04sP3QaTQYSQZYglkjDeTbrmDEvTfMjidh3LzMo7CIEduL8JIQvhLqZGRKcdopmJpbGWMuWeeYGWJiFkQeTemRvxN2DPE/TUmFw1zFcpoq9i2x5up5MxIYRcMfc8Ang7WZs5hpm7tzvlWe8lgmqWphTGFeYVwxNCyPPMG9gtpWyNCnJZCGXDjgHb6S20gK7BWk1CyLJE0wvNC9gdEaSF9KloOsOP15Znfp+iSQhZChG7c55bFufeSKGVIZJyBQ67WXW654SQJYglMCW2fc2qVMtHaV324MCemoSQ5fB6MgRHwyUv0iuaAVNx+xuG204IIVeRNwwtO3piNbkSDw6fJIRcbXLI8TamCdVm99LwM5d9kfucELIAbqbHbK+5VzRzMuirdM8JIQvgDqbC9jDTeOxeOLvlL2M7lJKuOiHkqnLjoi1Nq/tRfp1NOwghV5Vs7L2AKa6py41iy6BcKaWVBZ35Q2N6DsmcZdkRIeSqsza0DsootLxpX7M0vVhJVuD1XP+fEEKeQ25h20fTmuLHzXXPdWu4/JwzToQQchXJnvWbOCyhHedajSswAUQIuVpYY8l/Dtsh45eSPc9fdgts2kEIuZqiKT3nO9jGL2PjM+5Q0RyTpfkajwEh5IoxYD/cGCoueoTdV3hWnWbANOzode5/QsgVtTiBKZ75DvpjmtXWcC33fI1p2gtCCLlq5IbDN5PxFwwXvBnj9LCnqZRT+OrlblnqSwghzzm5Occ3sB0NJDVvpZbTc6UBaWK1Wm1SLvyUE6jfUSIKcCw6IeT5d8vldD46vumNz5gTSPqOL3Nqxa9ht1bTzDARQshz5ppnvfs6tqMhDxp73hI9OdXFJn3h17HNpg+G5UkIIc8TeYrel5J7Hg7Vq+zHlx5eCGJ25b+WHhCiuRLvUzgJIc+bYGZuYEoC9U5vkcOS+eHnTJSW45uvpi89wf4sbnnjZJMPQgj5MsmJng2mKS7eEa+VYps6Of5UYFui6bGbls/p+J/AFNcMaqV6A/SERUwYEUKetWBmg24E8JeSp5zDi9rgk9P6wtItf8AG3ADwk8LSvCn+tkqX9DMhhDxL0XRJJE8wjTl/SYikzqS7iqXqpSVZe1g+/9cAfCUp9Q3h77vCl6Fjwwgh5DLwAB4D+CsA/nL6O8AuN2rNTukOsfxGTHMF/ZT6co9pxNBQiBWgsTGEEHIZlmYOK/6NZGU+mun17lQYHeKebzC1if8ZTC3jc2Y9W5sr9ezFsxZLCich5DIFcwXgFMDfS1bmfezGMkvGXKyZrfrRQwDwTUzTX0SxcVIwLYGka04IuWyhlLXlTwD8OQB/Oxl8R3u+VvJmUA8Pe9jkNwH8LPbHb64xxTnzY1CxA70uiigh5KIEMz+vAZwDeBvAP8VUKhlg99qw+m165Sk/fRwS08xj0e8A+GUAryQ1l1+wwtTY4y62zT4toaRgEkIuw9I8A/DjAH4V2xGMVsLHzVxvscsRCq60FwK4AvCLAH4BU0JoldQ9W5pr8doJdkcYeSWkFE9CyLFkg24E8PMA/ll6lh2MWjrnWq77qsO/d2LZqN67A+BvAngPwP9LlmVW8azkWURzFusMu3MLjzzWhJAjrcusJQ7A3wLw9zE1G0byeuVUvdEQW613viCizgH4bmODmnVLAH4A4F8A+A1MGfUBU9A113mOKb5wlqzSjRDWIJ4JIWSOuyx1400AfxfAX8e2E9vaEMtoiGX+O4j/vWEozu7cbi07po39h+kLv5XEcRA/Koh1DMK6jOoOwWGWhBDAzn9EpSVZL94A8FeTWP4MgE+SpqyVprgOa3IoiPPOC+/OtDRREM5N+vu/AfhPAL4N4CG2CaKNWG4jxDTviBEco07IdRFDSxDR6XE6TMmdNzCN8vklAD8m9EQPkSwlvAfD4sSzEk0pfA7AAwC/CeDXk+V5mt7fYEoK5WUDdmd8s7ojUUAJuXqW4SFiKDnB1PD8FUzlQq9gGon4FqbcyZ/Gdij3gG050ZxRiS3RND/fI5ot9z2qv7PLHTAliL4D4PcwJYo+AvB9AB9ewIFxxndTZAl5Nm7yIV3PZe3ja5haTN7FVBr0dnrv9fT8RhLJm5gSySfYlhJBGFwboTmDEkyPetivVr0TC+77hYhmiwFTEujjJJgfAfh9AO+n17Ob/ijFIh4lS/Xj9PoTHJYochUXgCJL6B7bQjj3msjruIGpkc+LmKpqbmJKCn89ic+bAO6l919OYplLgV7EfsOfM2xDdjJ0V7IevVif7pVZ8lqfS9GMKs6wESZxLj3K9Zvn6fEgufMPMWXa8857DOCH6f3vJ4E9Ta+P6b1PMY0tjUeeVK6yoyOYtCLPr0t8rAhm1kIMX09C91qy+G6l176RXkcSyjx/2FqJVhRudN6+HK6TrrueEVImiXusWGnJ+s7PzHbPV8/goEpXWnZ6XyuXPo9dv2O43/luk0uXsgg/wHY86SMAP0oimoU114V+nkT1o7RMbjySRVia+T1uR5wRQpizjnjgd5KrbfH1WISWtzVHFL247tbJHb6HqfnObWEpvi3c3K+I12+Jdd1N14scCfgEdqY6v5avX60NEftDraVuBOxntLXxYomuLiGyjCJXsb4h9MrrFfzxJR781kENxnI6ky4ZYSeJpNidYDfJJO9qp0lEcyb/NAlqTIL6HqaaU5cs2ftJVB+l9X4qYipnahvDc34R9ljVPRfdIYRncBM45PfHSwpJoXKOXtTvzOJ3F1OSJE9Fs04ieC9Zg7leMVuEL6W/7yRB1BbgSTJMRuyWDGZDQ7q/wXCrS1ZeaXx3UMaU1ewnGiE23Zgj68NQOK9jwajRyw5qm4P1Q75M0YzqEcRFFrE/hYYTVqF2/wO2MdJ8R5Pmvyxx0qKad/wP0h1znZZ5H8Bn6cTLlq08SGfp//spLvOj9NoqWbylWMmYhDj/rvy5B+lZbu/D9JnTDiEizz8yYWE1iLiX/n45WXd3RBzwrRQnDOm120Ikc7OdVTpfb6XzaiO8ulKRd1Tb5tV5JsVtwO70Nr4gOl5Zg7r8xxcsUkuEW4kc32EIRGXJWp93Rlhh72a36rj7fRnjwmPlh4fKZ/TBHhoiLetFIe6mX6TXbmIKYOfYij455d0rNybJ2b7bQlwHbMfjD8Yd7Fx8h7S+N+LxobKcP8PuiKsRu92o9Y1Id65C+p0PG8chCEvdVe7kpc+O4oYW083ksQiLBOVdBHXByKkGZH/EDbb1vy+l/T8WLJR8o1qp/RLU/tkIC25Qrt7tQvzNiRv0qG72Pm1btuBOkti9JM4Pr27oN8S1ma3AE8Na3YhjEsVN/DzdkKVRsFG/pTb2WluJgxIzKyMdK97FIf0lotrO4QgjLs7UM+2qe0s0D7Um4wUI6iHuiruA7yq1uR/SHdqlk0/OrhnVnXNU7sh5eu8U2yL+QcRr81xKg7pby3WsVCzlRJz8rxgn1agu0MGwamRsKCpL4G7hhHTqQsmNV6wEWO0YjmIb9bn2SIl9MLY3GBaIUyJ+ju2cL6EgmlKY9aR/QV2kXom3tj4GZaHI4z9idxDHqGLxn2M/kSh/TzBEMRrHAkoULQtKW7LRsOqs4xkMK6+Uca9dZ19GI56L+L6mrrWGUZZS9z2W30XHhNyRYlyKkQzqxJQWRBAW66isjCEJSRAns8duF/u8725it/OTL8RjoxGeiCqkoK1I33nSjsaN8qEh2K4Q+9GJu972fvoGNSiB1OehTA6MhfCKtL6GdKOqVTWcVyxopwRVlrh47CcyT5S4SGt6owTvzDhvSjHfgPKQP2dYeT0WVDTc7Na11RKN1vUYjFCAv2SRtEQ9GjFKfQys7LkzvLWmaPbEB3SMIBzxo59FVrgVhHfKWlsrFzpgO45VC+xaWYuDEEYpmEPht1uujjUtMoTAh063x+resjJuiL4SqNd/R/RVBrjCCR4KlmDJGwiG5RdUosKKkVkXTlQCIgVgLdbrDaGHYclJC096Fk4lRFo3Ft+I/0flLfQkOqz3RsNgCLDn+kbBG4szzoOllObtnJcrcdEf4zJfpnteKsCdY5q3Dq68qNbKIpLWpq479YY1tVbCeaMSk3HGndgqeXBKMHzFeijtk8HYf0G5tb4gcLJertReqyc2rpN9tQsrol4CFgsup2X1WOIcYWe2XSMREQsu6yC+YyWex86bd8s4iQVLqtbmTC/vjf1jeSyxYDW6xrF3hZjmIQ1/n2XIr3TsTd1YVSyC1gY4FQ8KM6zOy3bpnTrhB8M6ti6eQViVMrg/GJ9xhojJyeW0NaJPup56zgg7C4mGu3dIDCdiv7s1DIsszryZwXBnI9pD3IB6smEUwhSxX9tXs2SleI9GzLImXAF9kwPqa6K1f3qWs+qX5whMgF1iow2DUghOF5tb1mZUx2hl3KhdJWShE2nuCA1wF6wne/Gt2sKx4f5p4YRxctVioKUdXwpeSxfN2tHRuNC9ij+eF046KRKrgkWjM7qlO+mAejbPd+z/iHJ7rFYsGpX418o4Lr5xfPxMoYwFtxyYV7dYS1aEwjbJm0BJZEZ1c6xdLK5DjHICKBjne+08sDyO0Ol9+Q532LqOZOJwqFiN+hj6hj7I4+CNm1LrpmoZGMG4Zmox9docZFYjDzfnmB+TPa/dLedaOZdhaXp18KIS9MHYhtFwY4eC26w72gP7E8e5gpUQjZiYxViId7nC/nMFd9H6/GBYNmPl4nQFq73FWBADf0DcK3S47s6wbHQsMxTcW9fx3Xr/RxUz1P1jvQrrxIIY1Kzi0rZ5dSMNlZuuK9yoS665Zdnq46fP9dIxiQXRc8Z+jWgnptwz1hV/iGj2iFSE3bsuHLneudtQe82jf/iiK4imr8SKZOZ9fQGuw4D68DltdQd1UuvkQSiEBWRCSwu+rnfV2eTWCTpU/u9JJJTcZK/WWYu7hYZo1moBR/W+NQjDuhlE5c5rr0S3R7RcbxRc27EzfCb3m5XMCo1rNBrWPJRBUsvk65uGFRbT5+O5Ct/oc8YbN42hcB6tCx5iq/NR1RO87LHnlx3AtUTkWWfr3BGi2MtKnTiWhSKLpEdxbCP2O+PLwumA3UyvL4Q21obb7w/YNyVXaY5oWuJeyp5bGd84w8KMhktnlYRp0QzGMbTikQ77jSq0aFrlZ1Ce1I3GOqwQT0+vhdoQ6FaiDsa5Uqoa0TFjV3GfXcFN13WrHu0hnqFyUzd7gf5/oJQdUrw6lIoAAAAASUVORK5CYII=") 0 0 / 100% 100% no-repeat;
	opacity: var(--tv-bezel);
	mix-blend-mode: multiply;                      /* mode de fusion "Produit" (le cadre est noir pur : visuellement identique au mode normal) */
}
/* IMAGE D'ECRAN DE TELE (images/portfolio/vignetteTV.webp) : calque pose juste EN DESSOUS du cadre (.ctv-bezel), au-dessus du voile, de la neige et de la lueur.
   Mode de fusion : "lumiere tamisee" (Photoshop) = soft-light en CSS. L'image est etiree aux dimensions du slider (comme le cadre).
   REGLAGES : --tv-screen (opacite du calque, 1 = 100 %) ; mix-blend-mode (autres modes : overlay = incrustation, hard-light = lumiere crue, multiply = produit).
   POUR RETIRER : supprimer cette regle (ou le <i class="ctv-screen"> des pages). */
.contact-tv .ctv-screen {
	background: url("../images/portfolio/vignetteTV.webp") 0 0 / 100% 100% no-repeat;
	opacity: var(--tv-screen, 1);
	mix-blend-mode: soft-light;
}
@keyframes ctvSnow {
	0% { background-position: 0 0; } 20% { background-position: -37px 21px; } 40% { background-position: 19px -43px; }
	60% { background-position: -61px -12px; } 80% { background-position: 33px 50px; }
}
@keyframes ctvFlicker {
	0% { opacity: .70; } 12% { opacity: .95; } 25% { opacity: .55; } 38% { opacity: .85; } 50% { opacity: .62; }
	62% { opacity: 1; } 75% { opacity: .58; } 88% { opacity: .82; } 100% { opacity: .70; }
}
/* Mobile : on retire la neige animee (plus lourde sur les petits telephones) ; voile, lueur et cadre restent. */
@media only screen and (max-width: 767px) {
	.contact-tv .ctv-snow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.contact-tv .ctv-snow, .contact-tv .ctv-glow { animation: none; }
	.contact-tv .ctv-glow { opacity: .55; }
}

/* ==========================================================================
   BANDE DEMO : AUCUNE NAVIGATION
   --------------------------------------------------------------------------
   Le slider de la page contact ne sert qu'a passer le showreel en boucle. On retire donc :
     - la barre de progression / points cliquables (#slider-dots), le bouton plein ecran (#slider-fs), le compteur ;
     - le CLIC SUR L'IMAGE (moitie gauche / droite) et le curseur en fleche : le slider ne capte plus aucun clic ni toucher
       (le glissement du doigt sur mobile ne change plus de slide ; la page defile normalement) ;
     - les fleches gauche / droite du clavier (js/contact-scroll-icon.js).
   Le defilement automatique continue. Seule l'icone SCROLL DOWN reste cliquable.
   POUR REMETTRE LA NAVIGATION : supprimer ce bloc et le bloc "clavier" de js/contact-scroll-icon.js.
   ========================================================================== */
/* (nov. 2026) NAVIGATION REMISE (voir plus haut) : on ne masque plus que le compteur et les commandes d'origine du plugin ; les boutons de js/slider-nav-b.js captent a nouveau les clics. */
#slider-count,
section.contact-hero .es-fullscreen,
section.contact-hero #es-control-nav {
	display: none !important;
}
section.contact-hero > .scroll-indicator {
	pointer-events: auto !important;
	cursor: pointer !important;
}

/* ==========================================================================
   TITRE AU CENTRE DU SLIDER : "I MAKE COOL STUFF / WITH COOL PEOPLE" (remplace le logo)
   --------------------------------------------------------------------------
   Blanc, Roboto 900 italique majuscules, meme style que la phrase "I MAKE COOL STUFF WITH
   COOL PEOPLE" du contenu de la page (h5.cool-tagline). Taille : la MEME que cette phrase,
   lue en direct par js/contact-hero-title-fit.js, qui choisit aussi UNE ligne si elle tient dans
   l'ecran, sinon DEUX ; si meme deux lignes depassent (petit mobile), la taille est reduite juste
   ce qu'il faut. --cht-size ci-dessous n'est que la valeur de repli (sans JavaScript).
   Glitch : celui du LOGO PAUL LEON (moteur commun js/glitch-icons.js, cible ajoutee dans TARGETS),
   au hasard, de temps en temps.
   REGLAGES : --cht-size (taille), --cht-lift (remontee du texte), --cht-weight (graisse).
   ========================================================================== */
.contact-hero-title {
	--cht-size: min(60px, 7.4vw);
	--cht-weight: 900;
	--cht-lift: 6vh;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 6;                          /* au-dessus des couches de la tele (z-index 4) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 0;
	padding-right: 4vw;
	padding-bottom: var(--cht-lift);
	padding-left: 4vw;
	margin: 0;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}
.contact-hero-title .cht-text {
	display: block;
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-style: italic;
	font-weight: var(--cht-weight);
	font-size: var(--cht-size);
	line-height: 1.04;
	letter-spacing: calc(1px + .035em);          /* comme h5.cool-tagline (css/cool-tagline.css) */
	-webkit-text-stroke: .05em currentColor;      /* idem : contour de la meme couleur = lettres plus epaisses */
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}
.contact-hero-title .cht-l { display: block; }
/* UNE seule ligne quand la phrase tient dans l'ecran (js/contact-hero-title-fit.js) */
.contact-hero-title .cht-text.cht-one .cht-l { display: inline; }
.contact-hero-title .cht-text.cht-one .cht-l + .cht-l::before { content: " "; }

@media only screen and (max-width: 1199px) {
	.contact-hero-title { --cht-lift: 36px; }   /* slider de hauteur fixe : on laisse la place a l'icone scroll */
}

/* --------------------------------------------------------------------------
   TITRE FIXE : il ne bouge JAMAIS quand le menu s'ouvre ou se ferme (il reste centre sur l'ecran).
   Sa taille est plafonnee par js/contact-hero-title-fit.js pour rester lisible entre les icones UI,
   menu ouvert (colonne d'icones a gauche) : voir ICON_ZONE dans ce fichier.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   GLITCH DU TITRE (js/contact-hero-title-glitch.js)
   Meme principe que le glitch du logo : bandes horizontales decalees + dedoublement en 2 couleurs
   (rose / cyan / vert fluo / jaune). Fait de COPIES du texte (.cht-fx), decoupees en bandes par
   clip-path et decalees : aucun filtre SVG (qui faisait disparaitre le grand texte sur Safari).
   -------------------------------------------------------------------------- */
.contact-hero-title .cht-text { position: relative; }
.contact-hero-title .cht-base { display: block; }
.contact-hero-title .cht-fx {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	pointer-events: none;
	will-change: transform, clip-path;
}
.contact-hero-title .cht-fx .cht-l { display: block; }
.contact-hero-title .cht-text.cht-one .cht-fx .cht-l { display: inline; }
.contact-hero-title .cht-text.cht-one .cht-fx .cht-l + .cht-l::before { content: " "; }

/* --------------------------------------------------------------------------
   APPARITION DU TITRE (js/contact-hero-title-reveal.js) : invisible pendant le loader du slider,
   puis apparition lettre par lettre (effet "tableau de gare"). Sans JavaScript : visible (voir <noscript> de la page).
   -------------------------------------------------------------------------- */
.contact-hero-title { visibility: hidden; }
.contact-hero-title.cht-on { visibility: visible; }
.contact-hero-title .cht-ch { display: inline-block; opacity: 0; text-align: center; white-space: nowrap; }

/* ==========================================================================
   PAGE CONTACT : PHRASE "I MAKE COOL STUFF / WITH COOL PEOPLE" DU BLOC PARLONS-EN
   --------------------------------------------------------------------------
   Deux lignes, gras (900 italique + contour de .05em comme les titres du site), taille calculee par
   js/contact-tagline-fit.js pour remplir la largeur de la colonne de texte.
   ========================================================================== */
#contactColumnsRow #contactTagline {
	font-size: 60px;                                   /* repli ; recalcule par le script */
	line-height: 1.02;
	letter-spacing: calc(1px + .035em);
	-webkit-text-stroke: .05em currentColor;
	padding: 34px 0;
}
#contactColumnsRow #contactTagline b {
	font-size: inherit;
	line-height: inherit;
	font-weight: 900;
	font-style: italic;
	white-space: nowrap;
}
@media only screen and (max-width: 1199px) {
	#contactColumnsRow #contactTagline { padding: 0; }
}

/* ==========================================================================
   PAGE PROFIL : le titre d'ouverture PARIS NEW YORK / MONTREAL est maintenant dans le slider.
   Sans lui, #content-wrapper:has(h1.pny-title) ne s'applique plus : on redonne l'espace sous le slider
   (REGLAGE : les 3 valeurs de padding-top).
   ========================================================================== */
#content-wrapper.no-pny-title { padding-top: 96px; }
@media only screen and (max-width: 1199px) { #content-wrapper.no-pny-title { padding-top: 64px; } }
@media only screen and (max-width: 767px)  { #content-wrapper.no-pny-title { padding-top: 40px; } }

/* ==========================================================================
   LOGOS SOUS LE TITRE DES SLIDERS (js/contact-hero-logos.js)
   --------------------------------------------------------------------------
   Logos blancs, proportionnels au titre : largeur d'un logo = --cht-size x --kl (meme pourcentage sur
   contact et sur profil). Poses des le depart mais invisibles (le titre ne bouge donc pas), puis ils apparaissent
   un par un (classe .on, en fondu). REGLAGES : KL dans js/contact-hero-logos.js (taille), --cht-gap (espace titre / logos),
   la duree du fondu (transition opacity ci-dessous).
   ========================================================================== */
.contact-hero-title { flex-direction: column; justify-content: center; }
.contact-hero-title .cht-logos {
	--kl: .95;
	/* VERSION 3 : les logos sont poses dans un rectangle fixe, en bas du slider (voir RECT dans js/contact-hero-logos.js),
	   hors du flux : ils ne decalent plus le titre, qui reste au milieu de l'ecran. */
	position: absolute;
	left: 50%;
	top: 86%;
	transform: translate(-50%, -50%);
	width: 80.7%;
	margin: 0;
	/* MARGE VERTICALE (nov. 2026) : le masque de degrade ci-dessous coupe tout ce qui depasse de la boite du bloc. Le logo Publicis est remonte (NUDGE dans
	   js/contact-hero-logos.js) et son emblème depassait en haut : il etait rogne. Ce padding agrandit la boite (et donc le masque) de haut en bas ;
	   le JS le retire du calcul de hauteur (fits). REGLAGE : .25 = 25 % de la largeur d'un logo. Le bloc reste centre (padding symetrique). */
	--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;
}
.contact-hero-title .cht-row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: calc(var(--cht-size, 60px) * var(--kl) * .12);
}
.contact-hero-title .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;
}
.contact-hero-title .cht-row img.on { opacity: 1; }                 /* logos 100 % blancs, opacite pleine */
/* LOGOS : desktop ET tablette (>= 768 px). MOBILE (<= 767 px, version validee, inchangee) : trop petits, le titre reste seul. */
@media only screen and (max-width: 767px) { .contact-hero-title .cht-logos { display: none !important; } }
/* TABLETTE (768-1199 px) : fondu lateral un peu plus court pour garder les logos des bords lisibles ; l'icone scroll remonte entre le titre et la ligne de logos (js/contact-hero-logos.js, placeTablet) */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
	.contact-hero-title .cht-logos.cht-logos { --cht-fade: 12%; }   /* specificite doublee : le bloc "bombe" plus bas pose 22 % */
}

/* Bloc #section-title VIDE de la page profil : il ne sert qu'd'ancre aux regles responsives des titres (aucune hauteur, aucun trait). */
#content-wrapper #section-title.section-title-empty {
	display: block;
	height: 0;
	min-height: 0;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	overflow: hidden;
}
#content-wrapper #section-title.section-title-empty::after { display: none !important; }

/* TITRE AU MILIEU DE L'ECRAN (desktop) : plus de remontee pour laisser la place aux logos (ils sont maintenant dans leur propre rectangle, en bas).
   Le slider commence sous le bandeau du haut : on remonte le titre de la moitie de sa hauteur pour qu'il soit centre sur la fenetre entiere. */
@media only screen and (min-width: 1200px) {
	.contact-hero-title { --cht-lift: var(--top-banner-height, 34px); }
}

/* ==========================================================================
   BANDE DE LOGOS "BOMBEE" (essai) : effet ecran de television retro, sur contact ET profil (desktop, la ou les logos s'affichent).
   Les logos s'estompent en degrade vers les COTES (gauche et droite) : plein au centre, plus transparent aux deux bouts, comme sur un ecran bombe
   dont les bords s'eloignent. Ne touche que la bande de logos (pas le titre, pas l'image).
   Le degrade se comporte comme un CALQUE : --cht-fade-strength = l'opacite de ce calque (1 = 100 %, effacement total aux bouts ; .5 = 50 %,
   les logos des bouts gardent la moitie de leur opacite). L'etendue du degrade ne change pas.
   REGLAGES : --cht-fade (largeur de chaque degrade, en % de la bande) ; --cht-fade-strength (opacite du calque de degrade, 0 = aucun effet, 1 = maximum).
   POUR RETIRER : supprimer ce bloc.
   ========================================================================== */
.contact-hero-title .cht-logos {
	--cht-fade: 22%;
	--cht-fade-strength: .5;                       /* calque de degrade a 50 % (etait 100 %) */
	--cht-m0: calc(1 - var(--cht-fade-strength));            /* opacite des logos tout au bout */
	--cht-m1: calc(1 - var(--cht-fade-strength) * .6);       /* aux 40 % du degrade */
	--cht-m2: calc(1 - var(--cht-fade-strength) * .2);       /* aux 75 % du degrade */
	-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%);
}

/* FONDS VIDEO EN NOIR ET BLANC (page CONTACT uniquement ; la page profil garde ses couleurs).
   La classe .contact-bw est posee sur la <section class="... contact-hero contact-bw"> de contact.html et EN/contact.html.
   (nov. 2026) Le filtre CSS "grayscale" posait un souci dans Safari (video noire) : il est REMPLACE par un calque noir en mode de fusion
   "saturation" (mix-blend-mode: saturation), qui retire toute la couleur de ce qui est dessous (video + photo de secours) en gardant la luminosite.
   Meme technique de fusion que les autres calques de la tele. Le calque est pose tout en dessous des effets de la tele (voile, neige, ecran, cadre),
   qui restent donc inchanges, et sous le logo et le titre.
   REGLAGES : --tv-bw (1 = 100 % noir et blanc ; .8 = quasi N&B avec un peu de couleur).
   POUR REMETTRE LA COULEUR : supprimer cette regle (ou retirer la classe contact-bw des deux pages). */
.contact-hero.contact-bw .contact-tv::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 4;
	pointer-events: none;
	background: #000;
	opacity: var(--tv-bw, 1);
	mix-blend-mode: saturation;
}

/* ==========================================================================
   LOGOS QUI SUIVENT LES SLIDES (nov. 2026) : une ligne de logos par slide, rangee dans ce calque AU-DESSUS de l'effet tele (js/contact-hero-logos.js).
   Chaque .cht-slide recopie en direct le decalage / l'opacite de sa slide ; le calque coupe ce qui depasse (comme le slider). Les logos arrivent une seule fois, en fondu.
   POUR REVENIR A L'ANCIEN COMPORTEMENT : data-inslide="0" sur .cht-logos dans la page.
   ========================================================================== */
.contact-hero-title .cht-slidelayer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	pointer-events: none;
	animation: cht-layer-in .7s ease both;
}
.contact-hero-title .cht-slide {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	will-change: transform;
}
.contact-hero-title .cht-slide .cht-row img { opacity: 1; transition: none; }
@keyframes cht-layer-in { from { opacity: 0; } to { opacity: 1; } }


/* ==========================================================================
   SOUS-TITRE DU TITRE DU SLIDER, PAGE CONTACT : "ASIA PACIFIC   MIDDLE EAST" (3 nov. 2026)
   --------------------------------------------------------------------------
   Deux mentions en oblique, sous "PARIS NEW YORK / MONTREAL", dans la police des titres de section (REALISATIONS...) : Roboto italique gras,
   majuscules, interlettrage 1 px. Taille, espace au-dessus et position verticale : js/contact-hero-sub.js (taille = 14 % de celle du titre ;
   les espaces titre -> sous-titre et sous-titre -> icone scroll sont egaux, bureau). Apparition en fondu apres le titre.
   REGLAGES : SUB_RATIO / GAP_RATIO dans js/contact-hero-sub.js ; l'ecart entre les deux mentions (gap) ci-dessous.
   POUR RETIRER : supprimer la balise <p class="cht-sub"> de la page.
   ========================================================================== */
.contact-hero-title .cht-sub {
	display: flex;
	justify-content: center;
	gap: 2.4em;
	margin: 0;
	padding: 0;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-style: italic;
	font-weight: 700;
	font-size: var(--cht-sub-size, 16px);
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	opacity: 0;
	transition: opacity .9s ease .9s;
}
.contact-hero-title.cht-on .cht-sub { opacity: 1; }

/* --------------------------------------------------------------------------
   GLITCH DE ASIA PACIFIC / MIDDLE EAST (js/contact-hero-sub-glitch.js) : copies du texte (.cht-sfx) decoupees en bandes, comme .cht-fx du titre.
   Chaque mention est le conteneur (position: relative) ; le texte de base est dans .cht-sbase.
   -------------------------------------------------------------------------- */
.contact-hero-title .cht-sub > span { position: relative; }
.contact-hero-title .cht-sub .cht-sbase { display: block; }
.contact-hero-title .cht-sub .cht-sfx {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	white-space: nowrap;
	pointer-events: none;
	will-change: transform, clip-path;
}


/* ==========================================================================
   ARMOIRIES ENTRE "ASIA PACIFIC" ET "MIDDLE EAST" (nov. 2026) - BUREAU seulement (>= 1200 px)
   --------------------------------------------------------------------------
   <i class="cht-arm"><img src="images/ARMOIRIES1.png"></i> est place entre les deux mentions (contact.html + EN/contact.html).
   Le sous-titre devient une grille 1fr / image / 1fr : l'image est donc exactement au CENTRE du sous-titre, avec la meme distance de chaque cote.
   L'image mesure 6,1667 em de large = 111 px a la taille de sous-titre de la maquette ; elle suit ensuite la taille du titre (--cht-sub-size).
   Ecart TOTAL entre ASIA PACIFIC et MIDDLE EAST = 2 x 2,4167 em + 6,1667 em = 11 em : inchange en pixels malgre la reduction de 10 % du sous-titre (avant : 2 x 1,2 em + 7,5 em = 9,9 em a la taille precedente).
   Elle est positionnee en absolu au milieu de la ligne : sa hauteur ne change PAS la hauteur du sous-titre (donc pas le calcul des trois espaces egaux, js/contact-hero-sub.js).
   REGLAGES : largeur de l'image (width de .cht-arm), distance image <-> texte (column-gap). Ancien ecart entre les deux mentions : 2,4 em. POUR RETIRER : supprimer la balise <i class="cht-arm"> des pages.
   Tablette et mobile (< 1200 px) : image masquee, ecart d'origine.
   ========================================================================== */
@media only screen and (min-width: 1200px) {
	.contact-hero-title .cht-sub {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		column-gap: 2.4167em;            /* distance entre chaque texte et l'image */
		justify-content: center;
	}
	.contact-hero-title .cht-sub > span:first-child { justify-self: end; }
	.contact-hero-title .cht-sub > span:last-of-type { justify-self: start; }
	.contact-hero-title .cht-sub .cht-arm {
		display: block;
		position: relative;
		width: 6.1667em;                 /* 111 px a la taille de sous-titre de la maquette */
		height: 1em;                     /* hauteur de la ligne : l'image deborde en haut et en bas */
	}
	.contact-hero-title .cht-sub .cht-arm > img {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 100%;
		height: auto;
		transform: translate(-50%, -50%);
		display: block;
		max-width: none;
		pointer-events: none;
		-webkit-user-select: none;
		user-select: none;
	}
}
@media only screen and (max-width: 1199px) {
	.contact-hero-title .cht-sub .cht-arm { display: none; }
}


/* GLITCH DES ARMOIRIES (js/contact-hero-sub-glitch.js) : copies de l'image (.cht-afx, dans .cht-afxwrap) decoupees en bandes, comme le texte. Le conteneur a la taille exacte de l'image. */
@media only screen and (min-width: 1200px) {
	.contact-hero-title .cht-sub .cht-arm .cht-afxwrap {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 100%;
		transform: translate(-50%, -50%);
		pointer-events: none;
	}
	.contact-hero-title .cht-sub .cht-arm .cht-afx {
		display: none;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		will-change: transform, clip-path;
	}
	.contact-hero-title .cht-sub .cht-arm .cht-afx img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		display: block;
		transform: none;
	}

	/* LIEN SUR LES ARMOIRIES (nov. 2026) : clic = PDF du portfolio dans un nouvel onglet (target="_blank", URL dans contact.html + EN/contact.html).
	   Zone cliquable = carre de la taille de l'image, au-dessus des couches du glitch. Le titre est en pointer-events: none : on reactive ici seulement. */
	.contact-hero-title .cht-sub .cht-arm .cht-armlink {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 100%;
		height: 0;
		padding-top: 100%;               /* carre (l'image est carree) */
		transform: translate(-50%, -50%);
		display: block;
		z-index: 5;
		pointer-events: auto;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
}