/* ==========================================================================
TOP MARQUEE BANNER (bandeau défilant sticky en haut du site)
========================================================================== */
:root {
--top-banner-height: 34px;
}
#top-marquee-banner {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--top-banner-height);
background-color: #000000;
overflow: hidden;
z-index: 9999;
white-space: nowrap;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#top-marquee-banner .top-marquee-track {
display: inline-flex;
align-items: center;
height: 100%;
white-space: nowrap;
/* Piste RACCOURCIE : 4 repetitions du texte au lieu de 8 (les items 5 a 8
sont masques ci-dessous), donc ~9 000px au lieu de ~18 000px. Une piste
aussi large depassait la taille maximale d'une couche GPU sous Safari
(~16 384px) : le texte etait alors decoupe / casse au moindre repaint
(ex. passage de la souris). Duree divisee par 2 (65s -> 32.5s) pour
garder EXACTEMENT la meme vitesse de defilement. */
animation: top-marquee-scroll 32.5s linear infinite;
}
/* 2 repetitions par moitie (translateX(-50%) = 2 items) : boucle sans raccord. */
#top-marquee-banner .top-marquee-track span.top-marquee-item:nth-child(n+5) {
display: none;
}
#top-marquee-banner .top-marquee-track span.top-marquee-item {
display: inline-block;
flex: 0 0 auto;
font-family: 'Doto', sans-serif;
font-weight: 800;
font-variation-settings: 'ROND' 100;
font-size: 19.55px;
line-height: var(--top-banner-height);
color: #ffffff;
text-transform: none;
letter-spacing: 1px;
padding: 0 0.3em;
}
@keyframes top-marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Aucune interaction : le bandeau defile en continu, sans pause ni
ralentissement au survol. pointer-events:none = la souris ne "voit" pas
le bandeau (aucun :hover possible, les clics passent au travers). */
#top-marquee-banner {
pointer-events: none;
}
#top-marquee-banner .top-marquee-track,
#top-marquee-banner:hover .top-marquee-track {
animation-play-state: running !important;
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
#top-marquee-banner .top-marquee-track {
animation: none;
}
}
/* ------------------------------------------------------------------------
Push the rest of the site down by the banner height so nothing
is hidden behind the fixed banner, on both desktop (absolute/fixed
sidebar header) and mobile (in-flow header) layouts.
------------------------------------------------------------------------ */
body {
padding-top: var(--top-banner-height) !important;
}
#header-wrapper {
top: var(--top-banner-height) !important;
min-height: calc(100% - var(--top-banner-height)) !important;
min-height: calc(max(100%, 100vh) - var(--top-banner-height)) !important;
}
@media only screen and (min-width: 1200px) {
#header-inner {
top: var(--top-banner-height) !important;
}
}
@media only screen and (max-width: 1199px) {
#header-wrapper {
top: 0 !important;
min-height: auto !important;
}
}
@media only screen and (max-width: 500px) {
:root {
--top-banner-height: 28px;
}
#top-marquee-banner .top-marquee-track span.top-marquee-item {
font-size: 14.95px;
padding: 0 0.3em;
}
}
/* ------------------------------------------------------------------------
Portfolio filter bar (TOUS / CONTENU VIDÉO / ACTIVATION / DIGITAL /
CATÉGORIES). The theme sets "html, body{overflow-x:hidden}" which, per
spec, forces overflow-y to an implicit "auto" and can break native
position:sticky in some browsers (Safari included). We disable native
sticky for this element and recreate the same behaviour in JS
(js/sticky-filter.js), toggling the .is-stuck class below.
------------------------------------------------------------------------ */
.portfolio-filter-wrapper {
position: relative !important;
top: auto !important;
}
.portfolio-filter-wrapper.is-stuck {
position: fixed !important;
top: var(--top-banner-height) !important;
z-index: 500;
}
.portfolio-filter-placeholder {
width: 100%;
}
/* ------------------------------------------------------------------------
"PARIS NEW YORK MONTREAL" title (contact.html / profil.html, FR + EN).
Markup is:
PARIS NEW YORKMONTREAL
Both spans are forced to display:block by the theme's generic
"h1 span{display:block}" rule, which is what pushes MONTREAL onto its
own line without needing an explicit
.
- "NEW" and "YORK" are joined with a in the HTML itself, so that
pair can NEVER be split across two lines at any screen size.
- Desktop (>=960px, matching the site's own tablet/desktop breakpoint):
.pny-line1 is forced nowrap, so "PARIS NEW YORK" always stays
together on one line, with "MONTREAL" alone on the line below.
- Tablet/mobile (<960px): .pny-line1 allows normal wrapping, so it
breaks at the regular space between "PARIS" and "NEW", giving one
line per word: PARIS / NEW YORK / MONTREAL.
The font-sizes below are only a starting point per breakpoint. The
exact fit -- the longest line touching both edges of the title's own
width, at ANY viewport width, not just these breakpoints -- is done
at runtime by js/pny-title-fit.js, which measures the real rendered
text width (not guessed) and grows or shrinks the font-size to match.
------------------------------------------------------------------------ */
.pny-line1 {
white-space: normal;
}
@media only screen and (min-width: 1200px) {
.pny-line1 {
white-space: nowrap;
}
}
/* Font-size for this specific title only (scoped via .pny-title so no
other page's #section-title h1 is affected). Sized so "PARIS NEW YORK"
always physically fits on one line at each of the site's own desktop
breakpoints -- measured against the real rendered container width at
each breakpoint, with a small safety margin. Below 960px the site's
own responsive font-size rules already apply and already fit fine,
since at that point the title wraps one word per line instead. */
@media only screen and (min-width: 1200px) {
#section-title h1.pny-title, #section-title h1.pny-title span {
font-size: 96px; line-height: 88px;
}
}
@media only screen and (min-width: 99999px) {
#section-title h1.pny-title, #section-title h1.pny-title span {
font-size: 80px; line-height: 74px;
}
}
@media only screen and (min-width: 99999px) {
#section-title h1.pny-title, #section-title h1.pny-title span {
font-size: 70px; line-height: 65px;
}
}
/* Below 960px the title wraps one word per line (PARIS / NEW YORK /
MONTREAL). "NEW" and "YORK" stay glued via and can never break
apart -- but at the site's own default tablet/mobile sizes (84px /
69px) that glued pair (and "MONTREAL") are themselves wider than the
available column, which forces an ugly mid-word break instead. These
two breakpoints shrink this title specifically so every word -- PARIS,
NEW YORK, MONTREAL -- fits its own line intact. */
@media only screen and (min-width: 480px) and (max-width: 1199px) {
#section-title h1.pny-title, #section-title h1.pny-title span {
font-size: 72px; line-height: 66px;
}
}
@media only screen and (max-width: 479px) {
#section-title h1.pny-title, #section-title h1.pny-title span {
font-size: 48px; line-height: 44px;
}
}
/* ------------------------------------------------------------------------
Video d'intro plein largeur en tete des pages projet (portfolio-project).
Cadre responsive en ratio 16:9 qui remplit exactement son conteneur,
sans dependre d'une hauteur fixe en pixels qui ne correspond plus a la
largeur reelle de l'ecran. S'applique uniquement aux pages qui ont ce
bloc video (.full-width-video-wrapper), les autres pages projet ne
sont pas concernees.
------------------------------------------------------------------------ */
#content-wrapper.portfolio-project .full-width-video-wrapper {
position: relative;
width: 100%;
max-width: 100%;
height: 0 !important;
padding-bottom: 56.25%;
margin: 0 0 66px 0 !important;
overflow: hidden !important;
background-color: #000;
}
#content-wrapper.portfolio-project .full-width-video-wrapper .video {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
z-index: 1;
/* Trame video, methode DIFFERENTE (plus fiable que l'overlay ::after
ci-dessous, qui perd systematiquement contre la couche materielle
du lecteur Vimeo dans Chrome ET Safari malgre un z-index correct).
Au lieu de poser un calque de trame PAR-DESSUS la video, on
decoupe directement des bandes DANS la video via un masque a
motif : les bandes masquees deviennent transparentes et laissent
voir le fond noir du cadre (.full-width-video-wrapper) derriere.
Comme la trame fait partie du rendu de la video elle-meme (et non
d'un element concurrent superpose), aucun probleme d'ordre de
calques materiels ne peut s'appliquer ici. */
/* Trame video par decoupe (voir explication ci-dessus). Intensite
alignee sur la trame du slider (.g81-scan dans glitch-tv.css,
rgba(0,0,0,0.33)) : au lieu de couper totalement la video sur la
bande du trait, on ne la reduit qu'a 67% d'opacite -- ce qui
laisse apparaitre 33% du fond noir derriere, soit visuellement le
meme resultat qu'un trait noir a 33% d'opacite pose par-dessus.
Meme geometrie que le slider : trait de 1px, espace de 2px,
cycle de 3px. */
-webkit-mask-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0.67) 0px, rgba(0,0,0,0.67) 1px, black 1px, black 3px);
mask-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0.67) 0px, rgba(0,0,0,0.67) 1px, black 1px, black 3px);
}
#content-wrapper.portfolio-project .full-width-video-wrapper .video iframe {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 100% !important;
height: 100% !important;
border: 0 !important;
display: block;
}
/* NOTE : l'ancienne methode par calque ::after superpose a ete
abandonnee -- elle perdait systematiquement contre la couche
materielle du lecteur Vimeo dans Chrome et Safari, malgre un CSS
correctement applique (verifie via l'inspecteur, regle non ecrasee).
La trame video est desormais geree uniquement via le masque sur
.video ci-dessus. */
/* Le separateur sous le titre reste desormais identique sur toutes les
pages projet, avec ou sans video d'intro (retour au comportement par
defaut de style.css) -- seul le padding-top est neutralise ici pour
eviter un double espace juste sous la video plein largeur. */
.portfolio-project.has-video-intro,
.portfolio-project:has(.full-width-video-wrapper) {padding-top: 0 !important;}
/* Pages projet avec SLIDER hero (WONDERLAND, APOLLO, COLOSSEUM, NISHIKI-GOI) : le slider
plein ecran doit etre positionne EXACTEMENT comme sur l'accueil (#content-wrapper
front-page : padding-top 50px, compense par le margin-top:-50px du slider). Sans ca,
le padding-top:0 ci-dessus (prevu pour les pages a video d'intro) remontait le hero de
50px, et avec lui la barre pause/precedent/suivant/plein ecran (bottom:50px du slider).
Specificite superieure a la regle de desktop-menu-toggle.css (.has-video-intro). */
#content-wrapper.portfolio-project.has-video-intro:has(.epic-slider) {padding-top: 50px !important;}
/* Trame video desactivee sur mobile : sur petit ecran le masque decoupe
des bandes qui deviennent proportionnellement plus larges/grossieres
a l'affichage et alourdissent la lecture de la video sans apporter
grand-chose. On retire le masque (video affichee normalement) en
dessous du meme seuil mobile utilise pour le reste de cette page. */
@media only screen and (max-width: 1199px) {
#content-wrapper.portfolio-project .full-width-video-wrapper .video {
-webkit-mask-image: none;
mask-image: none;
}
}
/* ------------------------------------------------------------------------
Barre de navigation (precedent/grille/suivant) juste sous la video
d'intro plein largeur. Positionnee en dehors de section.pages (donc
deja pleine largeur naturellement, pas besoin d'echappement de
colonne comme pour .folio-navigation-top). Sans contour, fleches a
50px des bords.
------------------------------------------------------------------------ */
.video-nav-bar {
width: 100%;
height: 40px;
position: relative;
margin-top: 50px;
margin-bottom: 50px;
}
/* Pages projet SANS video d'intro (pas de classe has-video-intro) : la
barre .video-nav-bar dupliquee en haut de page (cf ajout precedent)
recoit plus de respiration au-dessus/en-dessous que les 50px par
defaut, sans toucher aux pages avec video d'intro qui gardent 50px. */
.portfolio-project:not(.has-video-intro) .video-nav-bar {
margin-top: 66px;
margin-bottom: 66px;
}
/* #content-wrapper.portfolio-project a un padding-top:66px fixe (regle
plus ancienne, style.css) qui s'additionne au margin-top ci-dessus
-> 216px au lieu de 150px. On neutralise ce padding uniquement pour
les pages sans video (les pages avec video le neutralisent deja via
.has-video-intro plus haut), pour que les 150px du haut correspondent
exactement aux 150px du bas. */
#content-wrapper.portfolio-project:not(.has-video-intro) {
padding-top: 0;
}
.video-nav-bar ul { margin: 0; list-style: none; }
.video-nav-bar ul li { margin: 0; }
.video-nav-bar ul li.closeProject a,
.video-nav-bar ul li.nextProject a,
.video-nav-bar ul li.prevProject a {
width: 30px; height: 30px;
position: absolute; top: 5px;
transition: all .25s ease-in-out;
}
.video-nav-bar ul li.closeProject a {
background-image: url(../images/ui/projects-close.png);
background-position: center 50%; background-repeat: no-repeat;
left: 50%; margin-left: -15px;
}
.video-nav-bar ul li.nextProject a {
background-image: url(../images/ui/projects-direction-nav.png);
background-position: center -5px; background-repeat: no-repeat;
left: 50px;
}
.video-nav-bar ul li.prevProject a {
background-image: url(../images/ui/projects-direction-nav.png);
background-position: center -45px; background-repeat: no-repeat;
right: 50px;
}
.video-nav-bar ul li.closeProject a:hover,
.video-nav-bar ul li.nextProject a:hover,
.video-nav-bar ul li.prevProject a:hover {
opacity: 0.7;
}
/* ------------------------------------------------------------------------
Slider plein ecran (accueil) sur mobile/tablette : on retire le bouton
"VISIONNER" (remplace par une vignette tactile -- toute la slide
devient cliquable/tapable, voir js/slider-mobile-tap.js) ainsi que les
petits GIF animes de chaque slide (icone souris scroll.gif, visuels
"COMING SOON" en .gif charges via data-src), qui prennent de la place
pour rien sur un petit ecran. Le PNG logo de la marque reste affiche,
comme sur desktop. La barre de controle du slider (play/pause, plein
ecran, precedent/suivant) n'est pas modifiee.
------------------------------------------------------------------------ */
/* Nom textuel du projet : non utilise, le PNG logo est affiche partout
(desktop comme mobile). */
.epic-slider .es-caption .mobile-slide-name { display: none; }
@media only screen and (max-width: 1199px) {
.epic-slider .es-caption img[src*=".gif"],
.epic-slider .es-caption img[data-src*=".gif"] {
display: none !important;
}
.epic-slider .es-caption p {
text-align: center;
}
}
/* TABLETTE (768-1199px) : le bouton "VISIONNER" est AFFICHE (meme design que
sur desktop : Doto, fond noir / roll-on blanc + glitch). Il n'est masque
que sur mobile (<= 767px), ou la vignette tactile le remplace. */
@media only screen and (max-width: 767px) {
.epic-slider .es-caption .submit {
display: none !important;
}
/* Vignette tactile : toute la slide qui a un lien "VISIONNER" devient
cliquable (curseur + leger effet au toucher). */
.epic-slider #slides > li.es-tappable {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.epic-slider #slides > li.es-tappable.es-tap-active {
opacity: 0.85;
}
}
/* ------------------------------------------------------------------------
Sur mobile, l'ecart de 50px entre les fleches et les bords (pense pour
desktop) est proportionnellement enorme. On le reduit a 15px pour les
3 barres de navigation (video-nav-bar, folio-navigation-top,
folio-navigation) sur les petits ecrans.
------------------------------------------------------------------------ */
@media only screen and (max-width: 1199px) {
.video-nav-bar ul li.nextProject a,
.folio-navigation-top ul li.nextProject a,
#folio-navigation ul li#nextProject a {
left: 15px !important;
}
.video-nav-bar ul li.prevProject a,
.folio-navigation-top ul li.prevProject a,
#folio-navigation ul li#prevProject a {
right: 15px !important;
}
/* #folio-navigation et section.pages (parent de .folio-navigation-top)
sont limites a 290px par une vieille regle du thème (groupee avec
plein d'autres elements, en dessous de 479px). On force ces deux
barres a ignorer cette limite et a occuper toute la largeur reelle
de l'ecran, quelle que soit la largeur de leur parent. */
#folio-navigation,
.folio-navigation-top {
max-width: calc(100vw - var(--scrollbar-width, 0px)) !important;
width: calc(100vw - var(--scrollbar-width, 0px)) !important;
position: relative !important;
left: 50% !important;
right: auto !important;
margin-left: -50vw !important;
}
/* La video elle-meme (.video, a l'interieur du cadre plein largeur)
est capee a 290px ou 420px par une vieille regle du thème selon
la largeur d'ecran, ce qui la laisse plus etroite que son cadre
(bande vide visible sur le cote). On la force a occuper 100% du
cadre, quel que soit l'ecran. */
#content-wrapper.portfolio-project .full-width-video-wrapper .video,
#content-wrapper.portfolio-project .full-width-video-wrapper .video iframe {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
}
}
/* ------------------------------------------------------------------------
Titres de page (#section-title h1) et sous-titres projet ("FAST
GENERATION", "RESPONSIVE JEANS"...) sur mobile : ces titres sont des
mots longs en majuscules a tres grande taille (105px / 78px sur
desktop). Sur un ecran etroit, le thème les laissait deborder puis
les coupait au milieu d'un mot (word-wrap:break-word herite de
) -- "HEWLETT" devenait "HEWLET"/"T" sur deux lignes. On
desactive cette coupure (overflow-wrap/word-break: normal) et on
reduit la taille du texte de façon fluide (clamp(), proportionnelle
a la largeur d'ecran) pour que les mots restent entiers, quitte a
les afficher plus petits. Va jusqu'a 959px : au-dela de ce seuil,
la taille desktop (definie par ailleurs) est deja suffisante. */
@media only screen and (max-width: 1199px) {
#section-title h1, #section-title h1 span {
font-size: clamp(28px, 11vw, 84px) !important;
line-height: 1.05 !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
.portfolio-project #section-title + h4 {
font-size: clamp(22px, 9vw, 78px) !important;
line-height: 1.1 !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
}
/* ------------------------------------------------------------------------
Espace au-dessus et en dessous du logo, uniformise a 40px sur TOUS les
paliers (desktop / tablette / mobile). Le theme fixait a l'origine :
- au-dessus du logo (#header-inner padding-top) : 40px en desktop,
mais 30px des que la largeur passe sous 960px (regles dans
udt_media_queries.css, paliers 768-959 / max-768 / 480-767 / max-479).
- en dessous du logo (#logo margin-bottom) : 50px en desktop, mais
30px des que le menu bascule en hamburger (memes paliers, plus le
mode JS ".is_tablet" qui duplique la meme valeur).
Plutot que de corriger ces 6+ regles eparpillees (et fragiles a la
moindre resolution intermediaire), on fixe les deux proprietes une
seule fois ici, sans media query : le !important l'emporte sur toutes
les valeurs du theme ci-dessus quel que soit le palier, donc le rendu
est desormais 40px partout, y compris en mode ".is_tablet" (JS).
Le logo et le bouton hamburger (.mobile-menu-toggle) sont deux div
soeurs en flux normal (float:none), donc leurs marges verticales se
fusionnent naturellement (max des deux, pas addition) : comme
.mobile-menu-toggle garde son margin-top:11px d'origine (theme),
l'espace visible entre logo et hamburger correspond bien au plus grand
des deux, soit nos 40px. */
/* ------------------------------------------------------------------------
Espace au-dessus et en dessous du logo, uniformise a 40px sur TOUS les
paliers (desktop / tablette / mobile). Le theme fixait a l'origine :
- au-dessus du logo (#header-inner padding-top) : 40px en desktop,
mais 30px des que la largeur passe sous 960px (regles dans
udt_media_queries.css, paliers 768-959 / max-768 / 480-767 / max-479).
- en dessous du logo (#logo margin-bottom) : 50px en desktop, mais
30px des que le menu bascule en hamburger (memes paliers, plus le
mode JS ".is_tablet" qui duplique la meme valeur).
Plutot que de corriger ces 6+ regles eparpillees (et fragiles a la
moindre resolution intermediaire), on fixe les deux proprietes une
seule fois ici, sans media query : le !important l'emporte sur toutes
les valeurs du theme ci-dessus quel que soit le palier, donc le rendu
est desormais 40px partout, y compris en mode ".is_tablet" (JS).
Le logo et le bouton hamburger (.mobile-menu-toggle) sont deux div
soeurs en flux normal (float:none), donc leurs marges verticales se
fusionnent naturellement (max des deux, pas addition) : comme
.mobile-menu-toggle garde son margin-top:11px d'origine (theme),
l'espace visible entre logo et hamburger correspond bien au plus grand
des deux, soit nos 40px.
(Confirme visuellement le 12/09 via un test temporaire fond magenta +
100px, vu correctement dans Safari ET Chrome -- le CSS s'applique bien,
40px etait juste visuellement subtil par rapport aux 50px/30px d'origine.) */
#header-wrapper #header-inner {
padding-top: 0px !important;
}
header #logo {
margin-top: 0px !important;
margin-bottom: 20px !important;
}
/* ------------------------------------------------------------------------
Couleur de la barre de progression/minuteur (#es-progress-button,
rouge/jaune a l'origine dans epicslider.css) qui grossit
progressivement pour indiquer le compte a rebours avant le slide
suivant (uniquement sur un slider a plusieurs slides -- voir
jquery.epicslider.js, setTimer() ne se declenche que si
slideLength > 1). Couleur differente selon la page (via une classe
ajoutee sur ) : cyan sur l'accueil, vert-jaune sur les pages
projets AI magination. */
/* ---- Bouton pause + minuteur (#es-play / #es-progress-button) ----
CORRECTIF : l'icone pause (sprite d'origine pause-play-theme-default.png,
defini dans epicslider.css sur #es-play) passait SOUS la barre rose
#es-progress-button. On ne touche ni au sprite ni a son fond : on force
simplement l'empilement -> barre rose en bas (z-index 1), icone
#es-play au-dessus (z-index 2). La barre ne capte pas les clics. */
.epic-slider #es-progress-button {
z-index: 1;
pointer-events: none;
}
.epic-slider #es-play {
z-index: 2;
}
/* ------------------------------------------------------------------------
Titre "EXECUTIVE CREATIVE DIRECTOR / MULTIMEDIA DIRECTOR / DIGITAL
ACTIVATION & INNOVATIVE TECHNOLOGY" (bloc .sub-section-title en haut de
toutes les pages : accueil + AI magination). Ce titre est ecrit en dur
dans le HTML avec une taille fixe (font-size:57.6px / 30.6px en style
inline) qui ne s'adapte jamais a l'ecran. Sur mobile (<=767px), le mot
"CREATIVE DIRECTOR" (dans .titre-highlight-rose b, volontairement en
white-space:nowrap pour ne jamais se couper au milieu du mot) depasse
alors du cadre au lieu d'y tenir.
Corrige UNIQUEMENT sur mobile (<=767px) -- desktop et tablette (>=768px)
gardent la taille d'origine du theme, non touchee ici. Taille calculee
pour que "CREATIVE DIRECTOR" (le mot le plus long, non coupable) tienne
dans la largeur reelle du conteneur .sub-section-title a ce palier
(420px entre 480-767px, 290px en dessous de 480px). Le style inline
etant tres specifique, il faut !important pour le neutraliser. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.sub-section-title h3 { font-size: 32px !important; line-height: 1.1 !important; }
.sub-section-title h5 { font-size: 20px !important; line-height: 1.2 !important; }
}
@media only screen and (max-width: 479px) {
.sub-section-title h3 { font-size: 20px !important; line-height: 1.15 !important; }
.sub-section-title h5 { font-size: 15px !important; line-height: 1.25 !important; }
}
/* "PARIS NEW YORK MONTREAL" : graisse reglable PAR LIGNE (test-bold-titre.html montre les variantes).
Roboto s'arrete a la graisse 900 : on epaissit par un contour de la couleur du texte (en em, donc
proportionnel a la taille). Chaque lettre (gare-effect.js) herite du contour de sa ligne.
REGLAGE : changer --pny-bold-1 (ligne "PARIS NEW YORK") et/ou --pny-bold-2 (ligne "MONTREAL").
0 = graisse d'origine (aucun contour, comme les titres des pages projets)
0.015em = A : tres legerement plus gras
0.025em = B : leger <-- valeurs actuelles
0.035em = C : moyen
0.05em = D : gras (version jugee un peu trop bold)
L'interlettrage desktop suit automatiquement (0.7 x graisse). Tablette / mobile : la moitie de la
valeur desktop, espacement inchange (tailles calees a la main). */
:root { --pny-bold-1: 0.025em; --pny-bold-2: 0.025em; }
h1.pny-title .pny-line1, h1.pny-title .pny-line1 * { -webkit-text-stroke: calc(var(--pny-bold-1) * 0.5) currentColor; paint-order: stroke fill; }
h1.pny-title .pny-line2, h1.pny-title .pny-line2 * { -webkit-text-stroke: calc(var(--pny-bold-2) * 0.5) currentColor; paint-order: stroke fill; }
@media only screen and (min-width: 1200px) {
h1.pny-title .pny-line1, h1.pny-title .pny-line1 * { -webkit-text-stroke: var(--pny-bold-1) currentColor; }
h1.pny-title .pny-line2, h1.pny-title .pny-line2 * { -webkit-text-stroke: var(--pny-bold-2) currentColor; }
h1.pny-title .pny-line1 { letter-spacing: calc(1px + var(--pny-bold-1) * 0.7); }
h1.pny-title .pny-line2 { letter-spacing: calc(1px + var(--pny-bold-2) * 0.7); }
}
/* TITRES DES PAGES PROJETS (ex. "SEPHORA" + sous-titre "KALEIDOSCOPE") : un peu plus bold.
Roboto s'arrete a 900 (deja utilise) : contour de la couleur du texte, en em (proportionnel a la taille).
REGLAGE : changer UNIQUEMENT --projet-bold. 0 = graisse d'origine | 0.01em = a peine | 0.02em = un peu plus
(valeur actuelle) | 0.03em = net | 0.05em = tres gras.
Desktop (>= 1200px) : valeur entiere. Tablette / mobile : la moitie de la valeur.
Interlettrage inchange partout (il elargirait les titres longs, ex. HEWLETT PACKARD, hors de leur cadre). */
:root { --projet-bold: 0.02em; }
.portfolio-project #section-title h1,
.portfolio-project #section-title h1 *,
.portfolio-project #section-title + h4,
.portfolio-project #section-title + h4 * {
-webkit-text-stroke: calc(var(--projet-bold) * 0.5) currentColor;
paint-order: stroke fill;
}
@media only screen and (min-width: 1200px) {
.portfolio-project #section-title h1,
.portfolio-project #section-title h1 *,
.portfolio-project #section-title + h4,
.portfolio-project #section-title + h4 * { -webkit-text-stroke: var(--projet-bold) currentColor; }
}
/* BOUTON "VISIONNER" / "CONSULTER" / "PLAY AGAIN" DU SLIDER (index.html + EN/index.html, desktop) :
meme design que le bouton REVOIR / REPLAY de la fin de video (js/vimeo-outro-mask.js) :
police points "Doto" 800, majuscules.
ROLL-OFF : fond noir, texte blanc ; ROLL-ON (survol / focus clavier) : fond blanc, texte noir + glitch couleur
du texte (js/visionner-glitch.js). Passage d'un etat a l'autre INSTANTANE (aucune transition).
Taille : 51 px de haut (~163 px de large), texte 15.12 px, interlettrage 1.68 px (= version precedente +20 %).
Le fond noir est impose en inline (!important) dans le HTML : le blanc du survol passe donc par
background-image (qui recouvre le fond), sans toucher au HTML.
REGLAGES : --visionner-fs (taille du texte), --visionner-ls (interlettrage), --visionner-h (hauteur),
--visionner-pad (marge gauche/droite dans le bouton). Retirer ce bloc = ancien bouton (Roboto, noir fixe). */
.epic-slider .es-caption a.submit {
--visionner-fs: 15.12px;
--visionner-ls: 1.68px;
--visionner-h: 51px;
--visionner-pad: 31.2px;
font-family: 'Doto', 'Roboto', sans-serif !important;
font-weight: 800 !important;
font-size: var(--visionner-fs) !important;
letter-spacing: var(--visionner-ls) !important;
height: var(--visionner-h) !important;
line-height: var(--visionner-h) !important;
padding: 0 var(--visionner-pad) !important;
text-transform: uppercase;
transition: none !important;
/* !important : css/udt_shortcodes.css impose "background:... !important" (raccourci) sur .submitTheme */
/* 2 couches : [1] la MIRE (memes traits que .g81-scan de css/glitch-tv.css : 1px sur 3px, noir 33 %) tracee sur le
bouton lui-meme, [2] le blanc du survol. La mire de l'ecran est en mode "overlay", qui n'a AUCUN effet sur du blanc
(ou du noir) pur : sans ces traits le bouton paraissait devant la mire. Les traits sont calles sur ceux de l'ecran
par --scan-y (js/visionner-glitch.js, alignScan). Invisibles sur le noir du bouton au repos. */
background-image: linear-gradient(to bottom, rgba(0,0,0,0.33) 0, rgba(0,0,0,0.33) 1px, transparent 1px, transparent 3px), linear-gradient(#fff, #fff) !important;
background-repeat: repeat, no-repeat !important;
background-size: 100% 3px, 100% 0% !important;
background-position: 0 var(--scan-y, 0px), 0 100% !important;
/* BOUTON 100% OPAQUE : plus de trame/masque (les traits laissaient voir l'image a travers le noir).
Pour retrouver l'ancienne trame : remettre un mask-image en repeating gradient (voir historique v=143). */
-webkit-mask-image: none;
mask-image: none;
mask-position: 0 var(--scan-y, 0px);
}
.epic-slider .es-caption a.submit font { font-family: inherit; font-weight: inherit; transition: none !important; }
.epic-slider .es-caption a.submit:hover,
.epic-slider .es-caption a.submit:focus-visible {
background-size: 100% 3px, 100% 100% !important;
color: #000 !important;
}
.epic-slider .es-caption a.submit:hover font,
.epic-slider .es-caption a.submit:focus-visible font { color: #000 !important; }
/* Glitch du texte au roll-on (js/visionner-glitch.js) : le libelle est dans un */
/* font/couleur/espacement HERITES du bouton : sans cela les regles du slider sur les (Roboto 200) ecrasent la police Doto */
.epic-slider .es-caption a.submit .vg-label,
.epic-slider .es-caption a.submit .vg-layer {
font-family: inherit !important; font-weight: inherit !important; font-size: inherit !important;
letter-spacing: inherit !important; text-transform: inherit !important; font-style: inherit !important;
}
.epic-slider .es-caption a.submit .vg-label { display: inline-block; position: relative; max-width: 100%; color: inherit; }
.vg-layer { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; opacity: 0; white-space: inherit; will-change: transform, opacity; }
/* ------------------------------------------------------------------------
BARRE DE CONTROLE DU SLIDER (pause / precedent / suivant / plein ecran) :
fond noir 100% opaque. L'original etait rgba(0,0,0,0.7) (epicslider.css),
ce qui laissait voir l'image et sa trame a travers le noir.
Les survols (turquoise) et l'icone pause (sprite) ne changent pas.
------------------------------------------------------------------------ */
.epic-slider .es-nav-button {
background: #000 !important;
opacity: 1 !important;
}
/* ------------------------------------------------------------------------
BOUTON "COMING SOON" DU SLIDER (index.html + EN/index.html) - TABLETTE UNIQUEMENT
Sur les slides qui n'ont pas de projet en ligne, le GIF "coming soon" est masque
sous 1200px. Sur tablette (768-1199px) il est remplace par un bouton identique a
VISIONNER (memes regles que .es-caption a.submit : Doto, noir / roll-on blanc + glitch),
mais non cliquable (pas de href). Masque sur desktop (>= 1200px, le GIF est affiche)
et sur mobile (<= 767px).
------------------------------------------------------------------------ */
.epic-slider .es-caption .es-comingsoon-wrap { display: none !important; }
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.epic-slider .es-caption .es-comingsoon-wrap { display: inline !important; }
.epic-slider .es-caption a.submit.es-comingsoon { display: inline-block !important; cursor: default; }
}
/* COMING SOON (tablette) : AUCUN fond (ni noir, ni blanc au roll-on), texte BLANC en permanence
(y compris au survol / focus). Le glitch du texte au roll-on (js/visionner-glitch.js) est conserve. */
.epic-slider .es-caption a.submit.es-comingsoon,
.epic-slider .es-caption a.submit.es-comingsoon:hover,
.epic-slider .es-caption a.submit.es-comingsoon:focus,
.epic-slider .es-caption a.submit.es-comingsoon:focus-visible,
.epic-slider .es-caption a.submit.es-comingsoon:active {
background: none !important;
background-color: transparent !important;
background-image: none !important;
color: #fff !important;
border: 0 !important;
box-shadow: none !important;
}
.epic-slider .es-caption a.submit.es-comingsoon font,
.epic-slider .es-caption a.submit.es-comingsoon:hover font,
.epic-slider .es-caption a.submit.es-comingsoon:focus-visible font { color: #fff !important; }
/* ------------------------------------------------------------------------
MIRE (trame, vignette, glitch TV : css/glitch-tv.css) PAR-DESSUS les legendes du slider d'accueil
(logo, titre et bouton VISIONNER / EXPLORER) : le bouton est donc ENTIEREMENT "derriere" la mire, comme l'image.
La mire (z-index 2) etait sous les legendes (z-index 4). A z-index egal elle ne passait pas toujours devant :
pour les legendes centrees, le slider recree la legende dans un bloc .es-table ajoute APRES la mire dans la slide.
On la met donc strictement au-dessus (5), et les commandes du slider (fleches, pastilles, barre de progression)
un cran plus haut (6) pour qu'elles restent nettes par-dessus la mire, comme avant.
La mire n'intercepte pas la souris (pointer-events:none) : le bouton reste cliquable et survolable.
POUR REVENIR EN ARRIERE : supprimer ce bloc.
------------------------------------------------------------------------ */
.epic-slider #slides li .glitch81-overlay { z-index: 5; }
.epic-slider #es-direction-nav,
.epic-slider #es-control-nav,
.epic-slider #es-progress-bar { z-index: 6; }
/* (Le centrage du logo des slides sur mobile est gere entierement par js/slider-logo-center.js, sans aucune regle CSS : tablette et desktop ne portent aucune trace.) */