.my_grid {
	position: relative;
}

.hover_txt {
		position: absolute;
        z-index: 100;
    	left: 34vw;
   		top: 20vw;
    	display: flex;
}

.my_grid:hover > .hover_txt {
	display: flex !important;
}

.im_wrapper {
	position: relative;
    
}
.hover_im {
	position: absolute;
    top:60px;
    left:718px;
    z-index: -1;
    display: none;
    
}

.hover_im2 {
	position: absolute;
    top:-119px;
    left:601px;
    z-index: -1;
    display: none;
    
}


.hover_im3 {
	
   position: fixed;
   top:132px;
   right:850px;
   z-index: -100;
   display:none;
}

.hover_im4 {
	
   position: fixed;
   top:131px;
   left:562px;
   z-index: -100;
   display:none;
}

.hover_im5 {
	
   position: fixed;
   top:186px;
   right:871px;
   z-index: -100;
   display:none;
}

.hover_im6 {
	
   position: fixed;
   top:262px;
   right:650px;
   z-index: -100;
   display:none;
}

.hover_im7 {
	
   position: fixed;
   top:308px;
   right:927px;
   z-index: -100;
   display:none;
}

.hover_im8 {
	
   position: fixed;
   top:76px;
   right:650px;
   z-index: -100;
   display:none;
}

.hover_im9 {
	
   position: fixed;
   bottom:79px;
   left:635px;
   z-index: -100;
   display:none;
}

.hover_im10 {
	
   position: fixed;
   top:76px;
   right:650px;
   z-index: -100;
   display:none;
}

.hover_im11 {
	
   position: fixed;
   bottom:15px;
   left:489px;
   z-index: -100;
   display:none;
}

.im_wrapper:hover > .hover_im {
	display: block;
}



.im_wrapper:hover > .hover_im2 {
	display: block;
}



.im_wrapper:hover > .hover_im3 {
	display: block;
}

.im_wrapper:hover > .hover_im4 {
	display: block;
}


.im_wrapper:hover > .hover_im5 {
	display: block;
}


.im_wrapper:hover > .hover_im6 {
	display: block;
}


.im_wrapper:hover > .hover_im7 {
	display: block;
}


.im_wrapper:hover > .hover_im8 {
	display: block;
}

.im_wrapper:hover > .hover_im9 {
	display: block;
}

.im_wrapper:hover > .hover_im10 {
	display: block;
}

.im_wrapper:hover > .hover_im11 {
	display: block;
}


@media screen and (max-width: 700px){
	h1{
	font-size: 12vw !important             
}

    #index_txt1 {
	top: 10px;
}

}

@media screen and (max-width: 700px){
	h2{
	font-size: 13vw !important
    
}
 
   #home_mobile {
	top: 20px;
}
    
    #about_mobile {
	font-size: 35vw !important;
    text-align: center !important;
}
    
    #pics_project {
	font-size: 3vw !important;
}
    
}

@media screen and (max-width: 700px){
	small{
	font-size: 12vw !important       
}
   
    #mobile_index {
	font-size: 8vw !important;
}
  
    #project_text {
	font-size: 3vw !important;
}
    
    #name_project {   
	font-size: 10vw !important;
}
    
    #text_about {
	font-size: 7vw !important;
}
    
}





/**
 * Content
 */

body {
	background-color: #fff;
	color: #fff;
}

a:active {
	opacity: 10;
}

.page a.active {
	opacity: 1;
}

i,
em {
	font-style: italic;
}

b,
strong {
	font-weight: bolder;
}

sub,
sup {
	position: relative;
	vertical-align: baseline;
}

sub {
	top: 0.3em;
}

sup {
	top: -0.4em;
}

s {
	text-decoration: line-through;
}

img {
	border: 0;
	padding: 0;
}

ul,
ol {
	margin: 0;
	padding: 0 0 0 1em;
}

blockquote {
	margin: 0;
	padding: 0 0 0 2em;
}

hr {
	background: rgba(127, 127, 127, 0.2);
	border: 0;
	height: 1px;
	display: block;
}

.content img {
	float: none;
	margin-bottom: .5em;
}

.gallery_image_caption {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-style: normal;
	line-height: 1.3;	
}

/**
 * Loading Animation
 */

.loading[data-loading] {
	position: fixed;
	bottom: 8px; 
    left: 8px;
}

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 1.9rem;
	font-weight: 400;
	color: rgb(0, 0, 0);
	font-family: Inter, Icons;
	font-style: normal;
	line-height: 1.3;
}

[data-predefined-style="true"] bodycopy a {
	color: rgb(0, 0, 0);
	padding-bottom: 0.1em;
	border-bottom: 0.0em solid rgba(0, 0, 0, 1);
	text-decoration: none;
}

[data-predefined-style="true"] bodycopy a:hover {

}

bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
	border-bottom: 0;
	padding-bottom: 0;
}

[data-predefined-style="true"] h1 {
	font-family: "Helvetica Neue", Helvetica, sans-serif, "Helvetica Neue Regular", Icons;
	padding: 0;
	margin: 0;
	font-size: 1.6rem;
	line-height: 1.2;
	color: rgba(0, 25, 255, 1);
	font-style: normal;
	font-weight: normal;
	}

[data-predefined-style="true"] h1 a:hover {
	color: rgba(0, 0, 0, 1);
    font-style: italic;
}

[data-predefined-style="true"] h2 {
	font-family: "Times New Roman", "Times New Roman", Times, serif, "Times New Roman", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	color: rgb(0, 0, 0);
	font-size: 6.1rem;
	line-height: 1.1;
    mix-blend-mode: difference;
	}

[data-predefined-style="true"] h2 a:hover {
	color: rgba(0, 0, 0, 1);
    font-style: italic;
    mix-blend-mode:difference;
}

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 4rem;
	line-height: 1.1;
	font-family: "Helvetica Neue", Helvetica, sans-serif, "Helvetica Neue Regular", Icons;
	font-style: normal;
	font-weight: normal;
	color: rgb(0, 0, 0);
}

[data-predefined-style="true"] small a:hover {
	color: rgba(0, 0, 0, 1);
    font-style: italic;
	border-bottom-width: 0em;
}

/**
 * Breakpoints
 */


[data-css-preset] .page {
    background-color: initial /*!page_bgcolor*/;
}

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	min-height: 10px;
	max-width: 100%;
	width: 100%;
	background-color: transparent /*!page_bgcolor*/;
}

[data-css-preset] .container {
    
	margin-left: 0 /*!content_left*/;
	margin-right: auto /*!content_left*/;
	text-align: left /*!text_left*/;
}

[data-css-preset] body {
	background-color: rgb(f, 0, 0)/*!body_bgcolor*/;
}

[data-css-preset] .container_width {
	width: 100%/*!content_left*/;
}

[data-css-preset] .content_padding {
	padding-top: 0rem /*!main_margin*/;
	padding-bottom: 0rem /*!main_margin*/;
	padding-left: 0rem /*!main_margin*/;
	padding-right: 0rem /*!main_margin*/;
}


[data-css-preset] text-limit {
	display: inline-block /*!text_width*/;
	max-width: 66rem/*!text_width*/;
}

/**
 * Thumbnails
 */

div[thumbnails] {
	justify-content: flex-start;
}

[data-css-preset] .thumbnails {
   	background-color: rgba(0, 0, 0, 0)/*!thumbnails_bgcolor*/;   
}

[data-css-preset] .thumbnails_width {
    width: 100%/*!thumbnails_width*/;
}

[data-css-preset] [thumbnails-pad] {
    padding: 0rem/*!thumbnails_padding*/;
}

[data-css-preset] [thumbnails-gutter] {
    margin: 0rem/*!thumbnails_padding*/;
}

[data-css-preset] [responsive-layout] [thumbnails-pad] {
    padding: 0rem/*!responsive_thumbnails_padding*/; 
}

[data-css-preset] [responsive-layout] [thumbnails-gutter] {
    margin: 0rem/*!responsive_thumbnails_padding*/; 
}

.thumbnails .thumb_image {
	outline: 1px solid rgba(0,0,0,.12);
    outline-offset: -1px;
}

.thumbnails > .container > .content_padding {
  padding: unset !important;
}
.thumbnail.has_title {
  position: relative;
}
.thumbnail .title span{
  text-align: center;
  margin: 0 20px !important;
}
.thumbnail:hover .title {
  opacity: 1;
}
.thumbnails .title {
  font-family: "Helvetica Neue", Helvetica, sans-serif, "Helvetica Neue Regular", Icons; /* keep yours */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  text-transform: lowercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  font-size: 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transition: 0.6s;
  color: white;
  background: rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 769px) {
.thumbnails .title {
  font-size: 6vw;
}
}

.thumbnails .tags {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-style: normal;
	line-height: 1.2;
}

.thumbnails .tags a {
	border-bottom: 0;
    color: rgba(0, 0, 0, 0.35);
    text-decoration: none;
}

.thumbnails .has_title .tags {
	margin-top: 0rem;
}

/**
 * Site Menu
 */

[data-css-preset] #site_menu_button {
    color: rgba(0, 0, 0, 0.75);
    line-height: 1;
    font-size: 28px /*!site_menu_button*/;
    padding: 6px;
    line-height: 1;
    background: rgba(33, 32, 46, 0);
    position: fixed;
    top: 2rem /*!site_menu_button*/;
	right: 2rem /*!site_menu_button*/;
}

body.mobile #site_menu_button {
	margin: -6px;
    font-size: 34px;
}

#site_menu_button.custom_icon {
	width: 40px;
    height: auto;
}

#site_menu_button.active {
	display: none;
}

/**
 * Site Menu
 */

#site_menu {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	background: rgba(20, 20, 20, 0.95);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	padding: 20px 30px 90px 30px;
	max-width: 400px;
	min-width: 300px;
	text-align: left;
	display: flex;
	justify-content: flex-start;
}

body.mobile #site_menu {
	width: 100%;
}

#site_menu .page-link a {
	color: rgba(255, 255, 255, 0.75);
}

#site_menu .set-link > a {
	color: rgba(255, 255, 255, 0.75);
	font-weight: bold;
}

#site_menu a:active {
	opacity: .7;
}

#site_menu a.active {
	opacity: .4;
}

#site_menu .close {
	display: none;
	color: rgba(255, 255, 255, 0.4);
	line-height: .85em;
	font-size: 45px;
}

body.mobile #site_menu .close {
	display: block;
	font-size: 50px;
	line-height: 1em;
}

#site_menu .break {
	height: 28px;
}

#site_menu .indent {
	margin-left: 28px;
}

/*
 * Shop Button
 */

[data-css-preset] #shop_button {
	color: rgba(0, 0, 0, 0.85);
    background: transparent;
	font-size: 36px;
    font-style: normal;
	font-weight: 400;
    line-height: 1;
    position: fixed;
	padding: 6px;
	top: 2rem /*!shop_button*/;
	right: 2rem /*!shop_button*/;
}

#shop_button.text {
    font-size: 2rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-style: normal;
    padding: 0;
    line-height: 1.2;
}

#shop_button.custom_icon {
	width: 40px;
    height: auto;
}


body.mobile #shop_button:not(.text) {
	margin: -6px;
    font-size: 40px;
}


/*
 * Shop Product Widget
 */

.shop_product {
    width: 100%;
	max-width: 22rem;
    position: relative;
    display: block;
}

.shop_product .price {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 1.6rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.85);
    display: block;
    margin-bottom: 1rem;
}

.shop_product .dropdown {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-size: 1.6rem;
    display: inline-block;
	width: 100%;
    border: 1px solid rgba(0,0,0,.2);
    background:  white url(https://static.cargo.site/assets/images/select-line-arrows.svg) no-repeat right;
    margin-bottom: 1rem;
    line-height: 1.2;
    padding: .7rem 2.5rem .7rem 1rem;
}

.shop_product .button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 1.6rem;
    background: rgba(0, 0, 0, .75);
    color: rgba(255,255,255,1);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
	line-height: 1;
    padding: .8rem 1rem;
}

/*
 * Image Zoom
 */

.content img.image-zoom:active {
  opacity: .7;
}

/**
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 2.5rem /*!quick_view_padding*/;
    padding-bottom: 2.5rem /*!quick_view_padding*/;
    padding-left: 2.5rem /*!quick_view_padding*/;
    padding-right: 2.5rem /*!quick_view_padding*/;
    height: 100% /*!quick_view_height*/;
    width: 100% /*!quick_view_width*/;
}

body.mobile .quick-view {
    width: 100%;
    height: 100%;
    margin: 0;
}


[data-css-preset] .quick-view-background {
	background: rgba(255, 255, 255, 0.95) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 3.5rem 0;
    text-align: center;
    font-size: 1.5rem;
	font-style: normal;
	font-weight: 400;
    line-height: 1.3;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,0.5);
    color: white;
}


/**
 * Quick View Navigation 
 */

.quick-view-navigation .left-arrow {
    left: 10px;
}

.quick-view-navigation .right-arrow {
    right: 10px;
}

.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.quick-view-navigation .left-arrow .inner-color,
.quick-view-navigation .right-arrow .inner-color {
    stroke: rgba(0, 0, 0, 0.85);
    stroke-width: 1.5px;
}

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
    stroke: transparent;
    stroke-width: 2.5px;
}

.quick-view-navigation .close-button {  
    top: 10px;
    right: 10px;
    /* Change height/width together to scale */
    width: 36px;
    height: 36px;
}

.quick-view-navigation .close-button .inner-color {
    stroke: rgba(0, 0, 0, 0.85);
    stroke-width: 1.5px;
}

.quick-view-navigation .close-button .outer-color {
    stroke: transparent;
    stroke-width: 2.5px;
}

/** 
 * Image Gallery Navigation Arrows 
 */
 
.image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

/**
 * Wallpaper Backdrop Navigation Arrows 
 */

.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow {
   /* Change height/width together to scale */
   width: 36px;
   height: 36px;
}

.wallpaper-navigation .left-arrow .inner-color,
.wallpaper-navigation .right-arrow .inner-color {
   stroke: #fff;
   stroke-width: 1.5px;
}

.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}


/**
 * Feed
 */

.feed .content_container .page {
    border-top: 0px dashed rgba(0, 0, 0, 0.2);
}

.feed .content_container .page_container:first-child .page {
	border-top: 0;
}



/*
 * Audio Player
 */

.audio-player {
    max-width: 36rem;
    height: 3.3rem;
    outline: 1px solid rgba(0,0,0,0.15);
    color: rgba(0, 0, 0, 0.6);
    background: #fff;
    font-size: 1.2rem;
    line-height: 1.3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    margin: 1px 1px 1em 1px;
}

body.mobile .audio-player {
    max-width: 100%;
}

.audio-player .separator {
    width: 1px;
    background-color: rgba(0,0,0,0.15);
}

.audio-player .button {
    background: transparent;
    cursor: pointer;
    fill: rgba(0, 0, 0, 0.85);
}

.audio-player .icon {
    fill: rgba(0, 0, 0, 0.85);
    padding: 30%;
    width: 100%;
    margin: auto;
}

.audio-player .buffer {
    background: rgba(0,0,0,0.03);
}

.audio-player .progress {
    background: rgba(0,0,0,0.1);
}

.audio-player .progress-indicator {
    border: 1px solid rgba(0, 0, 0, 0.7);
    width: 1px;
    height: 100%;
    right: 0;
    position: absolute;
    cursor: ew-resize;
}

.audio-player .note-icon {
    height: 100%;
    width: 3.8rem;
    padding: 1rem;
    fill: rgba(0, 0, 0, 0.5);
}

.audio-player .current-time {
    padding-left: 1rem;
}

.audio-player .total-time {
    padding-right: 1rem;
}




/* ===== BANDE COULISSANTE (page HOME) ===== */
.jb-strip {
	--jb-h: 140px;   /* hauteur de la bande */
	--jb-gap: 70px;  /* espace entre deux projets */
	height: 100vh;
	display: flex;
	align-items: center;
	background: #fff; /* garde index/about visibles (mix-blend) */
}

.jb-track {
	display: flex;
	gap: var(--jb-gap);
	width: 100%;
	height: var(--jb-h);
	padding: 0 var(--jb-gap);
	box-sizing: border-box;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}

.jb-track::-webkit-scrollbar {
	display: none;
}

.jb-track.is-dragging {
	cursor: grabbing;
}

.jb-group,
.jb-group > a {
	display: flex;
	flex: 0 0 auto;
	height: 100%;
}

.jb-group img,
.jb-group video,
.jb-group iframe {
	display: block;
	flex: 0 0 auto;
	height: 100% !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	-webkit-user-drag: none;
}

@media screen and (max-width: 700px) {
	.jb-strip {
		--jb-h: 100px;
		--jb-gap: 40px;
	}
}
/* --- survol d'un projet : noir et blanc -> couleur + legende "marque - nom - date" au-dessus du bloc --- */
.jb-group {
	position: relative;
}

/* noir et blanc au repos, couleur au survol (ecrans avec souris ; sur tactile, sans survol, les images restent en couleur) */
@media (hover: hover) {
	.jb-group img,
	.jb-group video,
	.jb-group iframe {
		filter: grayscale(1);
		transition: filter 0.3s ease;
	}

	.jb-group:hover img,
	.jb-group:hover video,
	.jb-group:hover iframe {
		filter: grayscale(0);
	}
}

/* la legende, creee par le script a partir des attributs data-marque, data-titre et data-date */
.jb-label {
	position: absolute;
	bottom: 100%;
	left: 0;
	padding-bottom: 4px;
	white-space: nowrap;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 14px;
	line-height: 1.2;
	color: #000;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: 2;
}

/* la marque en gras */
.jb-label b {
	font-weight: bold;
}

.jb-group:hover .jb-label {
	opacity: 1;
}
/* --- coordonnees du curseur en temps reel (en haut a gauche) --- */
.jb-coords {
	position: fixed;
	top: 20px;
	left: 20px;
	z-index: 1;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 1.1;
	color: #000;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	pointer-events: none;
}

/* pas de curseur sur ecran tactile : on masque */
@media (hover: none) {
	.jb-coords {
		display: none;
	}
}
/* --- page projet : apercu des images en bande plus haute, images collees, + CLOSE --- */
.jb-strip.jb-project {
	--jb-h: 240px;   /* hauteur de la bande */
	--jb-gap: 0px;   /* images collees, boucle sans espace */
	--jb-top: 194px; /* distance entre le haut de la page et la bande */
	position: relative;
	display: block;
	height: auto;
	padding-top: var(--jb-top);
}

.jb-set,
.jb-set > a {
	display: flex;
	flex: 0 0 auto;
	height: 100%;
}

.jb-set img,
.jb-set video,
.jb-set iframe {
	display: block;
	flex: 0 0 auto;
	height: 100% !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	-webkit-user-drag: none;
}

/* CLOSE : en bas au centre (a la place du copyright de HOME), sur la bande, la vue isolee et le film */
.jb-close {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 11px;
	line-height: 1.1;
	z-index: 2;
}

.jb-close a {
	color: #000;
	text-decoration: none;
}

@media screen and (max-width: 700px) {
	.jb-strip.jb-project {
		--jb-h: 160px;
		--jb-top: 120px;
	}
}
/* --- fondu entre les pages : le contenu s'efface puis reapparait (compteur, ABOUT et pied de page restent) ---
   le script marque le contenu avec data-jb-fade et met la classe jb-hide sur <html> pendant le changement */
[data-jb-fade] {
	transition: opacity 0.5s ease;   /* apparition */
}

html.jb-hide [data-jb-fade] {
	opacity: 0;
	transition-duration: 0.35s;      /* disparition (= FADE_OUT dans le script) */
}

html.jb-instant [data-jb-fade] {
	transition: none !important;
}
/* --- vue isolee (pages projet) : clic sur une image de la bande -> image seule, "X OF N", OVERVIEW,
   ligne CLIENT / PROJECT / TYPE en bas. Compteur, ABOUT et CLOSE restent en place.
   html.jb-view : la bande et le pied de page s'effacent (0,35 s) ; html.jb-view-on : l'image apparait (0,5 s) */
.jb-project .jb-set img {
	cursor: pointer;
}

.jb-track.is-dragging img {
	cursor: grabbing;
}

.jb-project .jb-track,
.jb-footer {
	transition: opacity 0.5s ease; /* retour a la bande */
}

html.jb-view .jb-project .jb-track,
html.jb-view .jb-footer {
	opacity: 0;
	pointer-events: none;
	transition-duration: 0.35s;
}

.jb-viewer {
	--jb-top: 194px; /* = --jb-top de la bande : OVERVIEW a la hauteur de CLOSE */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	pointer-events: none; /* laisse cliquer ABOUT, CLOSE... */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 11px;
	line-height: 1.1;
	color: #000;
	user-select: none;
	-webkit-user-select: none;
}

html.jb-view-on .jb-viewer {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease;
}

.jb-v-overview,
.jb-v-img {
	pointer-events: auto;
	cursor: pointer;
}

/* OVERVIEW : en miroir de CLOSE */
.jb-v-overview {
	position: absolute;
	top: var(--jb-top);
	left: 20px;
	transform: translateY(-100%);
	padding-bottom: 4px;
	white-space: nowrap;
}

/* image : centree dans la fenetre, 78 px en haut et en bas, 100 px au moins sur les cotes (reference de
   l'utilisateur, 30/09 : ~752 px de haut sur un ecran de 909 px). Changement d'image sans fondu (script) */
.jb-v-stage {
	position: absolute;
	top: 78px;
	bottom: 78px;
	left: 100px;
	right: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.jb-v-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	min-height: 0;
	-webkit-user-drag: none;
}

/* "X OF N" : 16 px sous l'image, sans decaler son centrage (hauteur nulle dans la mise en page) */
.jb-v-count {
	height: 0;
	margin-top: 16px;
	margin-bottom: -16px;
	white-space: nowrap;
}

/* titre du projet (dans le code de chaque page projet) : en haut au centre, meme ligne de base que compteur / ABOUT */
.jb-title {
	position: fixed;
	top: 21px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	white-space: nowrap;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 11px;
	line-height: 1.1;
	color: #000;
	pointer-events: none;
}

/* credits (dans le code de chaque page projet) : sur la page bande, en bas a gauche (derniere ligne sur la ligne
   de CLOSE) ; masques en vue isolee et en film. 2 colonnes : role (span impair) / nom (span pair) ;
   les noms commencent 35 px apres le role le plus long */
.page_content .jb-credits {
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: 2;
	display: grid;
	grid-template-columns: max-content auto;
	justify-items: start;
	column-gap: 35px;
	row-gap: 4px;
	white-space: nowrap;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 11px;
	line-height: 1.1;
	color: #000;
	transition: opacity 0.5s ease;
}

html.jb-view .page_content .jb-credits {
	opacity: 0;
	pointer-events: none;
	transition-duration: 0.35s;
}

html.jb-instant .page_content .jb-credits {
	transition: none !important;
}


/* changement de page : la vue isolee, la ligne du bas et le copyright s'effacent avec le reste */
html.jb-hide.jb-view-on .jb-viewer,
html.jb-hide .jb-title,
html.jb-hide .jb-footer {
	opacity: 0;
	transition-duration: 0.35s;
}

html.jb-instant .jb-viewer,
html.jb-instant .jb-viewer *,
html.jb-instant .jb-title,
html.jb-instant .jb-footer,
html.jb-instant .jb-track {
	transition: none !important;
}

@media screen and (max-width: 700px) {
	.jb-viewer {
		--jb-top: 120px;
	}

	.jb-v-stage {
		left: 20px;
		right: 20px;
	}
}
/* --- film (pages projet) : lien FILM en miroir de CLOSE -> la bande s'efface, la page passe en noir (textes
   blancs), le lecteur apparait. Colonne de gauche : OVERVIEW / FULLSCREEN / SOUND: ON-OFF ; ligne de lecture en bas.
   html.jb-view (bande masquee) + html.jb-dark (fond noir), puis html.jb-film-on (lecteur affiche) */
.jb-film-link {
	position: absolute;
	top: var(--jb-top);
	left: 20px;
	transform: translateY(-100%);
	padding-bottom: 4px;
	white-space: nowrap;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 11px;
	line-height: 1.1;
	color: #000;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	z-index: 2;
	transition: opacity 0.5s ease;
}

html.jb-view .jb-film-link {
	opacity: 0;
	pointer-events: none;
	transition-duration: 0.35s;
}

/* fond noir et textes blancs pendant le film */
html,
body,
.jb-strip.jb-project {
	transition: background-color 0.5s ease;
}

html.jb-dark,
html.jb-dark body {
	background-color: #000 !important;
	transition-duration: 0.35s;
}

/* la bande devient transparente : la video (sous la page) reste visible */
html.jb-dark .jb-strip.jb-project {
	background-color: transparent !important;
	transition-duration: 0.35s;
}

/* la page passe au-dessus de la video (textes lisibles) mais laisse passer les clics, sauf ses liens */
html.jb-dark .page_container {
	pointer-events: none;
}

html.jb-dark .page_container a {
	pointer-events: auto;
}

.jb-coords,
.jb-close a,
.jb-title,
.page_content h2,
.page_content h2 * {
	transition: color 0.5s ease;
}

html.jb-dark .jb-coords,
html.jb-dark .jb-close a,
html.jb-dark .jb-title,
html.jb-dark .page_content h2,
html.jb-dark .page_content h2 * {
	color: #fff !important;
	transition-duration: 0.35s;
}

.jb-film-view {
	--jb-top: 194px; /* = --jb-top de la bande */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1; /* sous la page : compteur, ABOUT, CLOSE et ligne du bas restent au-dessus de la video */
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 11px;
	line-height: 1.1;
	color: #fff;
	user-select: none;
	-webkit-user-select: none;
}

html.jb-film-on .jb-film-view {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease;
}

/* sous OVERVIEW, apres une ligne vide : FULLSCREEN, puis SOUND: ON / OFF (4 px entre les lignes) */
.jb-f-side {
	position: absolute;
	top: calc(var(--jb-top) + 12px);
	left: 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	white-space: nowrap;
	pointer-events: auto;
}

.jb-f-full,
.jb-f-sound {
	cursor: pointer;
}

/* video : toute la hauteur de la fenetre, centree (reduite seulement si la fenetre est trop etroite) */
.jb-f-stage {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 100px;
	right: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.jb-film-view .jb-v-overview,
.jb-f-side,
.jb-f-bar {
	z-index: 2;
}

.jb-f-box {
	pointer-events: auto;
}

.jb-f-video {
	display: block;
	background: #000;
	cursor: pointer;
}

/* ligne de lecture : tout en bas de la page, 2 px, zone cliquable plus haute */
.jb-f-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 14px;
	cursor: pointer;
	pointer-events: auto;
}

.jb-f-bar::before,
.jb-f-progress {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
}

.jb-f-bar::before {
	right: 0;
	background: rgba(255, 255, 255, 0.25);
}

.jb-f-progress {
	width: 0;
	background: #fff;
}

/* video sans piste son (data-audio="none" sur le lien FILM) : pas de SOUND */
.jb-film-view.no-audio .jb-f-sound {
	display: none;
}

html.jb-hide.jb-film-on .jb-film-view {
	opacity: 0;
	transition-duration: 0.35s;
}

html.jb-instant .jb-film-view,
html.jb-instant .jb-film-view *,
html.jb-instant .jb-film-link {
	transition: none !important;
}

@media screen and (max-width: 700px) {
	.jb-film-view {
		--jb-top: 120px;
	}

	.jb-f-stage {
		left: 20px;
		right: 20px;
	}
}
/* --- page de films seuls (.jb-films dans le code de la page, liste lue par le script) : la page s'ouvre sur le
   premier film ; la liste des films remplace OVERVIEW (film en cours en blanc, autres attenues), puis une ligne
   vide et FULLSCREEN / SOUND */
.page_content .jb-films,
.jb-film-link .jb-film-item { /* lien FILM a plusieurs films : liste lue par le script */
	display: none;
}

.jb-film-view.is-list .jb-v-overview {
	display: none;
}

.jb-film-view.is-list .jb-f-side {
	top: calc(var(--jb-top) - 16px); /* premier film a la place d'OVERVIEW */
}

.jb-f-list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin-bottom: 12px; /* + 4 px = une ligne vide avant FULLSCREEN */
}

.jb-f-list:empty {
	display: none;
}

.jb-f-item {
	cursor: pointer;
	opacity: 0.4;
	transition: opacity 0.3s ease;
}

.jb-f-item:hover,
.jb-f-item.is-active {
	opacity: 1;
}

/* changement de film : fondu (0,2 s puis 0,35 s, comme les images de la vue isolee) */
.jb-f-box {
	transition: opacity 0.35s ease;
}

.jb-f-box.is-switching {
	opacity: 0;
	transition-duration: 0.2s;
}
/* --- INDEX (pages projet, remplace CLOSE) : en haut a droite, a gauche de ABOUT, dans le meme <h2> (meme taille
   13 px, meme ligne) ; lien vers HOME ; s'efface avec le contenu lors d'un changement de page. En film, la video
   ne passe pas dessous (script : fitFilm) */
.jb-index {
	margin-right: 20px; /* ecart INDEX - ABOUT */
}

/* plus precis que la regle de couleur des h2 (.page_content h2 *), qui sinon remplace la transition */
.page_content h2 .jb-index {
	transition: opacity 0.5s ease;
}

html.jb-hide .page_content h2 .jb-index {
	opacity: 0;
	transition-duration: 0.35s;
}

html.jb-instant .jb-index {
	transition: none !important;
}
/* --- film Vimeo (data-vimeo sur le lien FILM) : lecteur Vimeo sans ses controles a la place de la video du site ;
   un calque transparent par-dessus recoit les clics (pause / lecture) */
.jb-f-box {
	position: relative;
}

.jb-f-vimeo {
	display: block;
	border: 0;
	background: #000;
}

.jb-f-shield {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	cursor: pointer;
}

.jb-film-view.is-vimeo .jb-f-shield {
	display: block;
}

.jb-film-view.is-vimeo .jb-f-video,
.jb-film-view:not(.is-vimeo) .jb-f-vimeo {
	display: none;
}
/* titre : marque en gras, separee du nom par un ecart (ex. <span class="jb-t-brand">ASICS</span>WHEN I FOUND YOU...) */
.jb-title .jb-t-brand {
	margin-right: 20px;
	font-weight: bold;
}

/* titre en negatif (pages projet) : le script en place une copie dans <body>, au-dessus de la page et du film.
   Bande et vue isolee : couleur simple, noir sur blanc (LIGHT) / blanc sur noir (DARK). En film : blanche en
   mix-blend-mode difference -> inverse de l'image sur la video (seulement en film : ce mode epaissit le texte).
   Le titre d'origine (dans la page) est masque sur le site public (html.jb-neg) et reste visible dans l'editeur */
html.jb-neg .page_content .jb-title {
	visibility: hidden;
}

.jb-title.jb-title-float {
	z-index: 3; /* au-dessus de la page (.page.container, z 2 chez Cargo) et du film (z 1) */
	transition: opacity 0.5s ease, color 0.5s ease; /* fondu de page (html.jb-hide .jb-title) + LIGHT / DARK */
}

html.jb-dark .jb-title.jb-title-float {
	color: #fff !important;
	mix-blend-mode: difference;
}
/* date du projet (dans le code de la page : <div class="jb-date">2023</div>) : en bas au centre, sur la ligne
   de la derniere ligne des credits ; reste affichee en vue isolee et en film (blanche en film) */
.jb-date {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	white-space: nowrap;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 11px;
	line-height: 1.1;
	color: #000;
	pointer-events: none;
	transition: opacity 0.5s ease, color 0.5s ease; /* fondu de page (data-jb-fade) + passage en blanc */
}

html.jb-dark .jb-date {
	color: #fff !important;
}
/* --- page ABOUT : texte en 13 px (comme le compteur et INDEX), aligne a gauche sur le compteur, par blocs ;
   intitules (ADDRESS, ALL INQUIRIES, SELECTED CLIENTS) en gris ; le texte commence vers le tiers de la hauteur */
.page_content .jb-about {
	/* le texte principal (4 lignes de 1,45em = 5,8em) est centre dans la hauteur de la fenetre ;
	   les blocs suivants (ADDRESS, ALL INQUIRIES, SELECTED CLIENTS) suivent dessous ; a gauche, aligne sur le compteur */
	padding: calc(50vh - 2.9em) 20px 80px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 13px;
	line-height: 1.45;
	color: #000;
	text-align: left;
}

.jb-about .jb-a-sec + .jb-a-sec {
	margin-top: 12px; /* ecart entre les blocs */
}

.jb-about .jb-a-label {
	color: #999;
}

.page_content .jb-about a {
	color: inherit;
	text-decoration: none;
}

.page_content .jb-about a:hover {
	color: #999; /* lien (e-mail, Instagram) : gris au survol */
}
/* --- LIGHT / DARK : deux boutons a droite du compteur (HOME et pages projet a bande) ; DARK = fond noir et textes blancs, en fondu ;
   le bouton inactif est flou (net au survol). Le script met html.jb-night quand DARK est choisi et que la page
   affichee est HOME ou une page projet (bande + vue isolee ; le film est deja noir) ; ABOUT reste blanche --- */
.jb-mode {
	position: fixed;
	top: 20px;
	left: 100px; /* compteur : 20 px + 7 chiffres au plus (~51 px) -> toujours a gauche des boutons */
	z-index: 1;
	white-space: nowrap;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 13px;
	line-height: 1.1;
	color: #000;
	transition: opacity 0.5s ease, color 0.5s ease; /* opacite : fondu entre les pages */
	user-select: none;
	-webkit-user-select: none;
}

.jb-mode span {
	display: inline-block; /* le flou (filter) s'applique aussi sous Safari */
	transition: filter 0.5s ease;
}

.jb-mode .jb-m-dark {
	margin-left: 20px;
}

/* le bouton inactif : flou, cliquable */
html:not(.jb-night) .jb-mode .jb-m-dark,
html.jb-night .jb-mode .jb-m-light {
	filter: blur(1.5px);
	cursor: pointer;
}

html:not(.jb-night) .jb-mode .jb-m-dark:hover,
html.jb-night .jb-mode .jb-m-light:hover {
	filter: blur(0);
}

/* pages projet : les boutons restent sur la bande et en vue isolee, s'effacent pendant le film */
html.jb-dark .jb-mode {
	opacity: 0;
	pointer-events: none;
	transition-duration: 0.35s;
}

/* ecran tactile : pas de compteur, les boutons prennent sa place */
@media (hover: none) {
	.jb-mode {
		left: 20px;
	}
}

/* DARK : fond noir, textes blancs (fondu 0,5 s ; html et body ont deja leur transition) */
.jb-strip {
	transition: opacity 0.5s ease, background-color 0.5s ease; /* opacite : fondu entre les pages */
}

.jb-footer {
	transition: opacity 0.5s ease, color 0.5s ease;
}

.jb-label {
	transition: opacity 0.3s ease, color 0.5s ease;
}

.page_content .jb-credits,
.jb-film-link {
	transition: opacity 0.5s ease, color 0.5s ease;
}

html.jb-night,
html.jb-night body,
html.jb-night .jb-strip {
	background-color: #000 !important;
}

html.jb-night .jb-coords,
html.jb-night .jb-mode,
html.jb-night .jb-label,
html.jb-night .jb-footer,
html.jb-night .jb-title,
html.jb-night .page_content .jb-credits,
html.jb-night .jb-film-link,
html.jb-night .jb-date,
html.jb-night .jb-viewer,
html.jb-night .page_content h2,
html.jb-night .page_content h2 * {
	color: #fff !important;
}
/* --- film : l'overlay (compteur, INDEX / ABOUT, titre, date, colonne de gauche, ligne de lecture) s'efface 1 s apres
   l'ouverture du film, revient des qu'on bouge la souris et s'efface de nouveau apres 2 s sans mouvement
   (le script met jb-idle sur <html>) --- */
html.jb-film-on .jb-coords,
html.jb-film-on .page_content h2,
html.jb-film-on .jb-title-float,
html.jb-film-on .jb-date,
html.jb-film-on .jb-film-view .jb-v-overview,
html.jb-film-on .jb-f-side,
html.jb-film-on .jb-f-bar {
	transition: opacity 0.25s ease, color 0.35s ease, translate 0.7s cubic-bezier(0.65, 0, 0.35, 1); /* retour rapide (+ credits) */
}

html.jb-film-on.jb-idle .jb-coords,
html.jb-film-on.jb-idle .page_content h2,
html.jb-film-on.jb-idle .jb-title-float,
html.jb-film-on.jb-idle .jb-date,
html.jb-film-on.jb-idle .jb-film-view .jb-v-overview,
html.jb-film-on.jb-idle .jb-f-side,
html.jb-film-on.jb-idle .jb-f-bar {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s ease, color 0.35s ease, translate 0.7s cubic-bezier(0.65, 0, 0.35, 1); /* disparition douce (+ credits) */
}
/* --- credits des pages de films seuls (script : jb-credmode si la page contient un bloc .jb-credits, jb-cred-open
   quand on clique CREDITS, hauteur --jb-cred-h) : CREDITS dans la colonne de gauche, une ligne sous SOUND ; clic = la
   page "descend" : le film et les textes du haut remontent, un bas de page blanc apparait avec les credits de la page
   (en bas a gauche, comme sur les pages bande) ; molette vers le haut = retour au film --- */
html {
	--jb-cred-h: 220px;
}

.jb-f-cred {
	display: none;
	margin-top: 12px; /* une ligne vide apres SOUND */
	cursor: pointer;
}

.jb-film-view.has-cred .jb-f-cred {
	display: block;
}

html.jb-credmode.jb-film-on:not(.jb-hide) .jb-film-view {
	transition: opacity 0.5s ease, translate 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

html.jb-cred-open .jb-film-view,
html.jb-cred-open .jb-coords,
html.jb-cred-open .page_content h2,
html.jb-cred-open .jb-title-float {
	translate: 0 calc(-1 * var(--jb-cred-h));
}

/* le bas de page blanc : au-dessus du film (meme z-index, place apres lui), sous la page (z 2 : credits) */
.jb-cred-panel {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--jb-cred-h);
	z-index: 1;
	background: #fff;
	translate: 0 100%;
	visibility: hidden;
	transition: translate 0.7s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.7s;
}

html.jb-cred-open .jb-cred-panel {
	translate: 0 0;
	visibility: visible;
	transition: translate 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

/* les credits de la page : sous la fenetre, montent avec le bas de page ; noirs sur le blanc (meme en DARK).
   Regle (30/09) : 80 px entre le haut du bas de page et la premiere ligne, et 20 px sous la derniere ligne (le script
   adapte la hauteur du bas de page), pour tous les projets de films seuls */
html.jb-credmode .page_content .jb-credits {
	top: calc(100% - var(--jb-cred-h) + 80px);
	bottom: auto;
	opacity: 1;
	color: #000 !important;
	translate: 0 var(--jb-cred-h);
	transition: translate 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

html.jb-cred-open .page_content .jb-credits {
	translate: 0 0;
}

html.jb-instant .jb-cred-panel {
	transition: none !important;
}
/* --- telephone (<= 700 px) : HOME. La bande devient une colonne verticale au centre, meme moteur qu'a l'ordinateur
   (script) : boucle infinie, defilement automatique lent vers le bas, glisser au doigt avec elan ; noir et blanc, le
   projet au milieu de l'ecran passe en couleur (script : .is-active) et son texte apparait sous son bloc, dans
   l'espace entre deux projets ; ABOUT petit (13 px) en haut a droite ; LIGHT / DARK en haut a gauche, l'un sous l'autre --- */
@media screen and (max-width: 700px) {
	.page_content h2 {
		font-size: 11px !important; /* menus a la taille des titres (03/10) ; annule aussi l'ancienne regle mobile h2 13vw */
	}

	.jb-coords {
		display: none; /* pas de compteur sur telephone (ni en fenetre etroite) */
	}

	.jb-mode {
		left: 10px; /* pres du bord du telephone, loin de la bande */
		font-size: 11px; /* menus a la taille des titres (03/10) */
	}

	/* LIGHT / DARK l'un sous l'autre, 8 px entre les deux */
	.jb-mode .jb-m-light,
	.jb-mode .jb-m-dark {
		display: block;
	}

	.jb-mode .jb-m-dark {
		margin: 8px 0 0;
	}

	/* HOME (classe jb-home mise par le script) : LIGHT / DARK a gauche et ABOUT a droite, centres sur la hauteur */
	html.jb-home .jb-mode {
		top: 50%;
		transform: translateY(-50%);
	}

	html.jb-home .page_content h2 {
		top: 50% !important; /* le style du h2 dans la page dit top:20px */
		right: 10px !important; /* pres du bord du telephone */
		transform: translateY(-50%);
	}

	.jb-strip:not(.jb-project) {
		--jb-col: calc(100vw - 156px); /* largeur de la bande : 78 px de marge de chaque cote, LIGHT / DARK et ABOUT restent hors de la bande */
		--jb-gap: 60px; /* espace entre deux projets (le texte du projet s'y affiche) */
		display: block;
		height: 100vh;
		padding: 0;
		touch-action: none; /* le doigt fait defiler la bande (script), pas la page */
	}

	.jb-strip:not(.jb-project) .jb-track {
		flex-direction: column;
		width: var(--jb-col);
		height: 100%;
		margin: 0 auto;
		padding: 0;
		overflow: hidden;
		cursor: auto;
	}

	.jb-strip:not(.jb-project) .jb-group,
	.jb-strip:not(.jb-project) .jb-group > a {
		flex-direction: column;
		width: 100%;
		height: auto;
	}

	.jb-strip:not(.jb-project) .jb-group img,
	.jb-strip:not(.jb-project) .jb-group video,
	.jb-strip:not(.jb-project) .jb-group iframe {
		width: 100% !important;
		height: auto !important;
		filter: grayscale(1);
		transition: filter 0.4s ease;
	}

	.jb-strip:not(.jb-project) .jb-group.is-active img,
	.jb-strip:not(.jb-project) .jb-group.is-active video,
	.jb-strip:not(.jb-project) .jb-group.is-active iframe {
		filter: grayscale(0);
	}

	/* texte du projet actif : sous son bloc, dans l'espace entre deux projets (MARQUE en gras - NOM - DATE) */
	.jb-strip:not(.jb-project) .jb-label {
		top: 100%;
		bottom: auto;
		left: 0;
		right: 0;
		padding: 6px 0 0;
		white-space: normal;
		font-size: 11px;
		line-height: 1.25;
	}

	.jb-strip:not(.jb-project) .jb-group:hover .jb-label {
		opacity: 0; /* au doigt, le survol reste colle : seul le projet actif montre son texte */
	}

	.jb-strip:not(.jb-project) .jb-group.is-active .jb-label {
		opacity: 1;
	}

	/* copyright (HOME, ABOUT) : masque sur telephone pour l'instant (sur HOME il passerait sur la bande) */
	.page_content .jb-footer {
		display: none;
	}
}
/* --- telephone (<= 700 px) : pages projet a bande. Bande verticale au centre (meme moteur que HOME : boucle,
   defilement automatique vers le bas, glisser au doigt), images collees ; a gauche le menu LIGHT / DARK / FILM /
   CREDITS (cree par le script : .jb-pnav), a droite INDEX / ABOUT, centres sur la hauteur ; titre en haut au centre,
   en negatif ; CREDITS = fenetre blanche qui coulisse depuis la gauche, la page glisse vers la droite --- */
.jb-pnav,
.jb-pc-panel {
	display: none; /* ordinateur : pas de menu ni de fenetre de telephone */
}

@media screen and (max-width: 700px) {
	html {
		--jb-pc-w: calc(100vw - 78px); /* largeur de la fenetre des credits */
	}

	.jb-strip.jb-project {
		--jb-col: calc(100vw - 156px); /* largeur de la bande, comme HOME */
		--jb-gap: 0px;
		display: block;
		height: 100vh;
		padding: 0;
		touch-action: none; /* le doigt fait defiler la bande (script), pas la page */
	}

	.jb-strip.jb-project .jb-track {
		flex-direction: column;
		width: var(--jb-col);
		height: 100%;
		margin: 0 auto;
		padding: 0;
		overflow: hidden;
	}

	.jb-strip.jb-project .jb-set,
	.jb-strip.jb-project .jb-set > a {
		flex-direction: column;
		width: 100%;
		height: auto;
	}

	.jb-strip.jb-project .jb-set img,
	.jb-strip.jb-project .jb-set video,
	.jb-strip.jb-project .jb-set iframe {
		width: 100% !important;
		height: auto !important;
	}

	/* menu de gauche : remplace LIGHT / DARK et FILM de la page */
	html.jb-proj .jb-mode:not(.jb-pnav),
	html.jb-proj .jb-film-link {
		display: none;
	}

	.jb-pnav {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		top: 50%;
		left: 10px; /* pres du bord du telephone, loin de la bande */
		transform: translateY(-50%);
	}

	.jb-pnav .jb-m-dark {
		margin: 0;
	}

	.jb-pnav .jb-pn-film,
	.jb-pnav .jb-pn-cred {
		cursor: pointer;
	}

	/* a droite : INDEX puis ABOUT, l'un sous l'autre, centres sur la hauteur */
	html.jb-proj .page_content h2 {
		top: 50% !important;
		right: 10px !important; /* pres du bord du telephone */
		transform: translateY(-50%);
		text-align: right;
	}

	html.jb-proj .page_content h2 .jb-index {
		display: block;
		margin: 0 0 8px;
	}

	html.jb-proj .page_content h2 > a {
		display: block;
	}

	/* date du projet (CAPE) : reste en bas au centre, en negatif comme le titre (la bande passe dessous) */
	html.jb-proj .jb-date {
		color: #fff !important;
		mix-blend-mode: difference;
	}

	/* titre en haut au centre, toujours en negatif (les images passent dessous) */
	html.jb-proj .jb-title.jb-title-float {
		color: #fff !important;
		mix-blend-mode: difference;
	}

	/* fenetre des credits : blanche, depuis la gauche ; la page glisse vers la droite de la meme largeur */
	.jb-pc-panel {
		display: block;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: var(--jb-pc-w);
		z-index: 1; /* sous la page (z 2 : les credits restent au-dessus) */
		background: #fff;
		translate: -100% 0;
		visibility: hidden;
		transition: translate 0.7s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.7s;
	}

	html.jb-pcred-open .jb-pc-panel {
		translate: 0 0;
		visibility: visible;
		transition: translate 0.7s cubic-bezier(0.65, 0, 0.35, 1);
	}

	html.jb-proj .page_content .jb-credits,
	html.jb-credmode .page_content .jb-credits {
		top: 50%;
		bottom: auto;
		left: 20px;
		width: calc(var(--jb-pc-w) - 40px);
		column-gap: 16px; /* 35 px sur ordinateur : trop large ici, les noms s'empilaient */
		white-space: normal;
		transform: translateY(-50%);
		translate: calc(-1 * var(--jb-pc-w)) 0;
		opacity: 1;
		color: #000 !important; /* sur la fenetre blanche, meme en DARK */
		transition: translate 0.7s cubic-bezier(0.65, 0, 0.35, 1);
	}

	html.jb-pcred-open .page_content .jb-credits {
		translate: 0 0;
	}

	html.jb-proj:not(.jb-film-on) .jb-strip.jb-project {
		transition: opacity 0.5s ease, background-color 0.5s ease, translate 0.7s cubic-bezier(0.65, 0, 0.35, 1);
	}

	html.jb-proj:not(.jb-film-on) .jb-pnav,
	html.jb-proj:not(.jb-film-on) .page_content h2,
	html.jb-proj:not(.jb-film-on) .jb-title.jb-title-float {
		transition: opacity 0.5s ease, color 0.5s ease, translate 0.7s cubic-bezier(0.65, 0, 0.35, 1), top 0.5s ease;
	}

	html.jb-pcred-open .jb-strip.jb-project,
	html.jb-pcred-open .jb-film-view,
	html.jb-pcred-open .jb-pnav,
	html.jb-pcred-open .page_content h2,
	html.jb-pcred-open .jb-title.jb-title-float {
		translate: var(--jb-pc-w) 0;
	}
}
/* --- telephone (<= 700 px) : FILM (pages projet et films seuls). Film en haut de la page sur toute la largeur
   (script fitFilm : --jb-fh = hauteur du film, sur <html>) ; juste dessous : OVERVIEW (ou CREDITS pour les films seuls)
   a gauche, FULLSCREEN et SOUND a droite ; INDEX a gauche et ABOUT a droite au milieu de l'espace libre ; noms des films
   en bas au-dessus du titre ; titre en bas au centre ; ligne de lecture inchangee (tout en bas). Menus toujours visibles (pas d'effacement) --- */
@media screen and (max-width: 700px) {
	.jb-film-view {
		font-size: 11px; /* menus a la taille des titres (03/10) */
	}

	.jb-f-stage {
		top: 0;
		bottom: auto;
		left: 0;
		right: 0;
		height: var(--jb-fh, 56vw);
	}

	.jb-film-view .jb-v-overview {
		top: calc(var(--jb-fh, 56vw) + 16px);
		left: 10px;
		transform: none;
		padding: 0;
	}

	.jb-film-view .jb-f-side,
	.jb-film-view.is-list .jb-f-side {
		top: calc(var(--jb-fh, 56vw) + 16px);
		left: 10px;
		right: 10px;
		display: grid;
		grid-template-columns: 1fr auto auto;
		grid-template-areas: "left full sound" "list list list";
		column-gap: 20px;
		row-gap: 16px;
		align-items: start;
	}

	/* noms des films (QUATRE, TOOLBOX) : en bas, centres, juste au-dessus du titre, a la taille du titre */
	.jb-film-view .jb-f-list {
		position: fixed;
		top: auto;
		bottom: 44px;
		left: 10px;
		right: 10px;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		column-gap: 12px; /* les 4 noms de QUATRE tiennent sur une ligne a partir de ~390 px */
		row-gap: 6px;
		margin: 0;
		font-size: 11px;
	}

	/* un seul film (LC33) : pas de liste */
	.jb-film-view .jb-f-item:only-child {
		display: none;
	}

	.jb-film-view .jb-f-full {
		grid-area: full;
	}

	.jb-film-view .jb-f-sound {
		grid-area: sound;
	}

	.jb-film-view .jb-f-cred {
		grid-area: left;
		margin: 0;
	}

	/* INDEX a gauche, ABOUT a droite, sur une ligne au milieu de l'espace libre entre les menus sous le film et le bas
	   (noms des films, titre) : ne chevauche jamais les menus, quelle que soit la hauteur du film */
	html.jb-dark .page_content h2 {
		top: calc((var(--jb-fh, 56vw) + 30px + 100% - 60px) / 2) !important;
		left: 10px;
		right: 10px !important;
		transform: translateY(-50%);
		display: flex;
		justify-content: space-between;
		text-align: left;
	}

	html.jb-dark .page_content h2 .jb-index {
		display: inline;
		margin: 0;
	}

	/* titre en bas au centre (en negatif, comme en film sur ordinateur) */
	html.jb-dark .jb-title.jb-title-float {
		top: calc(100% - 32px);
		transition: opacity 0.25s ease, color 0.35s ease, translate 0.7s cubic-bezier(0.65, 0, 0.35, 1), top 0.5s ease;
	}
}
/* --- telephone (<= 700 px) : details (03/10). ABOUT sans defilement ; pas d'italique colle sur INDEX / ABOUT ;
   titre des pages projet plus haut ; vue isolee : seulement l'image, le titre, "X OF N" et OVERVIEW (en bas, centre) --- */
@media screen and (max-width: 700px) {
	/* ABOUT : texte remonte, la page ne defile plus */
	.page_content .jb-about {
		padding: 80px 20px 20px;
	}

	/* style H2 de Cargo au survol (italique) : au doigt, le survol reste colle apres un toucher */
	.page_content h2 a:hover {
		font-style: normal;
		mix-blend-mode: normal;
	}

	/* pages projet : titre plus haut (en film, il reste en bas) */
	html.jb-proj:not(.jb-dark) .jb-title.jb-title-float {
		top: 10px;
	}

	/* vue isolee : pas de menus de cote (l'image les cachait), ni la date de CAPE */
	html.jb-view:not(.jb-dark) .jb-pnav,
	html.jb-view:not(.jb-dark) .page_content h2,
	html.jb-view:not(.jb-dark) .jb-date {
		opacity: 0;
		pointer-events: none;
	}

	.jb-viewer .jb-v-overview {
		top: auto;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		padding: 0;
		font-size: 11px;
	}
}
/* --- videos dans les bandes (ex. bloc ASICS de HOME, 03/10) : la video est rendue a part, calee sur un pixel entier,
   alors que les images voisines glissent au sous-pixel -> fines bandes blanches qui clignotaient de part et d'autre au
   defilement. La video remplit tout son cadre (cover) et deborde d'environ 1,5 px de chaque cote, sous ses voisines --- */
.jb-group video,
.jb-set video {
	object-fit: cover;
	transform: scaleX(1.012);
}
/* --- pages projet a bande, ordinateur : lien FILM centre sur la largeur, sous la bande (02/10 ; telephone inchange) --- */
@media screen and (min-width: 701px) {
	.jb-film-link {
		top: calc(var(--jb-top) + var(--jb-h));
		left: 50%;
		transform: translateX(-50%);
		padding-top: 12px;
		padding-bottom: 0;
	}
}
/* --- film en pleine hauteur sur les ecrans moins larges (ex. MacBook, 02/10) : quand la video doit passer sous la
   colonne de gauche et INDEX / ABOUT pour garder toute la hauteur (script fitFilm : html.jb-film-full), ces textes
   passent en negatif, comme le titre. Sans effet sur les ecrans larges (video dans ses marges noires) --- */
@media screen and (min-width: 701px) {
	html.jb-film-full.jb-dark .page.container,
	html.jb-film-full .jb-film-view .jb-f-side,
	html.jb-film-full .jb-film-view .jb-v-overview {
		mix-blend-mode: difference;
	}

	html.jb-film-full.jb-credmode .page_content .jb-credits {
		color: #fff !important; /* blanc en negatif sur le bas de page blanc = noir */
	}
}
/* --- LIGHT / DARK : fondu plus lent (1,5 s, demande du 02/10 ; 0,5 s avant), seulement pendant le changement de mode
   (script : html.jb-mode-fade pendant MODE_FADE) ; les autres fondus (pages, film, vue isolee) gardent leurs durees --- */
html.jb-mode-fade,
html.jb-mode-fade body,
html.jb-mode-fade .jb-strip,
html.jb-mode-fade .jb-coords,
html.jb-mode-fade .jb-mode,
html.jb-mode-fade .jb-mode span,
html.jb-mode-fade .jb-label,
html.jb-mode-fade .jb-footer,
html.jb-mode-fade .jb-title,
html.jb-mode-fade .page_content .jb-credits,
html.jb-mode-fade .jb-film-link,
html.jb-mode-fade .jb-date,
html.jb-mode-fade .page_content h2,
html.jb-mode-fade .page_content h2 * {
	transition-duration: 1.5s !important;
}

html.jb-mode-fade .jb-viewer {
	transition: opacity 0.5s ease, color 1.5s ease !important; /* OVERVIEW, X OF N (couleur heritee) */
}
/* --- telephone : ABOUT, pas de retour a la ligne force avant LUXURY (02/10) : les 2 premieres lignes du texte
   principal s'enchainent (une espace entre les deux) ; ordinateur inchange (4 lignes forcees) --- */
@media screen and (max-width: 700px) {
	.page_content .jb-about .jb-a-sec:first-child > div:nth-child(-n+2) {
		display: inline;
	}

	.page_content .jb-about .jb-a-sec:first-child > div:first-child::after {
		content: ' ';
	}
}
/* --- HOME (ordinateur) : survol suivi par le script (.jb-hot) + apercu du projet en fond (07/10) ---
   Chrome ne remet pas :hover a jour quand la bande glisse sous une souris immobile -> sur la bande HOME (.jb-hover-js,
   posee par le script sur les ecrans a souris), la couleur suit .jb-hot et non plus :hover ; la legende est remplacee
   par une copie en negatif (.jb-label-neg, plus bas). */
@media (hover: hover) {
	.jb-strip.jb-hover-js .jb-group:hover img,
	.jb-strip.jb-hover-js .jb-group:hover video,
	.jb-strip.jb-hover-js .jb-group:hover iframe {
		filter: grayscale(1);
	}

	.jb-strip.jb-hover-js .jb-group .jb-label {
		opacity: 0; /* remplacee par la copie en negatif .jb-label-neg */
	}

	.jb-strip.jb-hover-js .jb-group.jb-hot img,
	.jb-strip.jb-hover-js .jb-group.jb-hot video,
	.jb-strip.jb-hover-js .jb-group.jb-hot iframe {
		filter: grayscale(0);
	}

	/* passage a une autre copie du meme projet (boucle replacee sous la souris) : couleur sans fondu */
	.jb-strip.jb-hover-js .jb-group.jb-hot-swap img,
	.jb-strip.jb-hover-js .jb-group.jb-hot-swap video,
	.jb-strip.jb-hover-js .jb-group.jb-hot-swap iframe {
		transition: none !important;
	}
}

/* apercu (attribut data-apercu du bloc, calque cree par le script) : plein ecran, derriere tous les elements de HOME */
.jb-strip.jb-has-apercu {
	isolation: isolate; /* le calque (z-index -1) passe sur le fond de la bande et sous les blocs */
}

.jb-apercu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.jb-apercu > * {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	object-fit: cover;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.jb-apercu > .is-on {
	opacity: 1; /* opacite de l'apercu (0.65 au depart, 100 % depuis le 07/10) */
}

/* legende du bloc survole en negatif (copie posee par le script au-dessus de la bande, sur la vraie legende) :
   lisible sur l'apercu ; noire sur fond blanc, blanche sur fond noir */
.jb-label-neg {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
	white-space: nowrap;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 14px;
	line-height: 1.2;
	color: #fff;
	mix-blend-mode: difference;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.jb-label-neg b {
	font-weight: bold;
}

.jb-label-neg.is-on {
	opacity: 1;
}

/* ===== FIN BANDE COULISSANTE ===== */