@charset "utf-8";
/* CSS Document */
	/* Reset */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin:0;
        padding:0;
        border:0;
        font:inherit;
        vertical-align:baseline;
    }
		
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block;}
 	ol, ul { list-style:none; }
    blockquote, q { quotes:none;}
    blockquote:before, blockquote:after,
    q:before, q:after { content:''; content:none;}
    table { border-collapse:collapse; border-spacing:0;}
    /* End Reset */
	
	/* Reset WP COLUMNS */
   	:where(.is-layout-flex) {gap: 0.5em !important;}
	.wp-block-separator {
		border: none;  display:block;
		border: 2px solid;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}
  	.wp-block-columns { flex-wrap: nowrap !important; max-width:1600px; margin:0 auto; }
	
	/****** DEBUG MM MENU BACKGROUND FIXED *******/
    html.mm-background .mm-page { background: unset !important;}
	.mm-opened .background_img_container { position: absolute !important;}
	
	/***************/
    /*** Global ***/
	/*************/
	html { font-size:100%;}
    html, body { padding:0; margin:0; color:#000; font-family:'poppinsregular';  Arial, Helvetica, Verdana;   }
	body {  }
	
	h1  { font-size:2em; margin-bottom:10px }
    h2  { font-size:1.7em; line-height:1.5em; margin-bottom:15px }
    h3  { font-size:1.4em; }
    h4  { font-size:1.2em; } 
    h5  { font-size:0.7em; } 
	
    p { margin:0; font-size: 1.2rem; line-height:1.4; margin-bottom:1rem;}
	a { text-decoration:underline; color:#000; font-family:'poppinssemibold';  Arial, Helvetica, Verdana;  }
    a:link, a:active, a:visited, a:hover , a:focus-visible { text-decoration:none; }
	a:active, a:visited, a:hover { text-decoration:underline }
    strong { font-weight:bold;}
    em { font-style: italic; }
    figure a { display:block; }
    hr { display:block; width:100%; margin:0; border-style:none; border-width:0; height:1px ; background:#fff;  }
	.clearer { clear:both; display:table; width:100%; }
   	button:focus-visible, a:focus-visible, a:active, a:visited { }

	
/**********************************************/ 
/*********** Scroll bar design ***************/ 
/**********************************************/ 
	::-webkit-scrollbar { width: 6px; height: 6px; display: none;}
	::-webkit-scrollbar-track { background: #f1f1f1;display: none;}
	::-webkit-scrollbar-thumb { background: #888;display: none;}
	::-webkit-scrollbar-thumb:hover {  background: #555;display: none;}
	/* Pour Firefox */
	html { /*scrollbar-width: thin; scrollbar-color: #fff #000; */}
	/* Masquer les flèches de défilement haut et bas */
	::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment { display: none; }

/*************************************************************/
/********* HEADER / MENU / NAV / SCREEN & MOBILE  ***********/
/***********************************************************/
	header { position:absolute; z-index:2; top:0;left:0; opacity:1; }

/***************************************************************/
/******* FIXED NAV / SOCIAL NETWORKS AND MENU OPENER **********/
/*************************************************************/
	nav#visible { position:fixed; z-index:9999; top:20px; left:20px;  }
	nav#visible div.menubtn { display:block; border-right:3px solid #000 !important;padding:10px 30px; text-decoration:none; display:block; float:left ; color: rgb(0, 0, 0);
    font-family: poppinssemibold;    text-decoration: underline; cursor:pointer; text-decoration:none  }
	nav#visible #social_networks { display:contents}
	nav#visible a { border-right:3px solid #000;padding:10px 30px; text-decoration:none; display:block; float:left   }
	nav#visible a:first-child { border-left:none;} 
	nav#visible a:last-child { border-right:none;} 
	
/********************/		
/****** HEADER *****/
/******************/

/*** MENU OVERLAY ANIMATION ***/
	header nav#menu {
		position: fixed;
		top: 0;
		left: 0;
		width: calc(50vw - 0px);
		height: 100vh;
		background: #fff;
		z-index: 1;
		pointer-events: none;
		transform: translateY(-100%);
		transition: transform 0.5s ease 0.1s;
	}
	
	header #menu.active {
	   transform: translateY(0);
		pointer-events: auto;
	}
	
	header nav#menu {
		display: flex;
	}
	
	header nav .menu-nav-container {
		padding: 10vh 0 1.5% 8%;
		width: 60%;
	}
	
	header nav .menu-nav-container ul li {
		display: block;
		opacity: 0;
		transform: translateX(-40px);
		transition:
			transform 0.5s ease,
			opacity 0.5s ease;
	}
	
	header #menu.active .menu-nav-container ul li {
		opacity: 1;
		transform: translateX(0);
	}
	
	/* décalage progressif des items */
	header #menu.active .menu-nav-container ul li:nth-child(1) { transition-delay: 0.5s; }
	header #menu.active .menu-nav-container ul li:nth-child(2) { transition-delay: 0.6s; }
	header #menu.active .menu-nav-container ul li:nth-child(3) { transition-delay: 0.7s; }
	header #menu.active .menu-nav-container ul li:nth-child(4) { transition-delay: 0.8s; }
	header #menu.active .menu-nav-container ul li:nth-child(5) { transition-delay: 0.9s; }
	header #menu.active .menu-nav-container ul li:nth-child(6) { transition-delay: 1.0s; }
	header #menu.active .menu-nav-container ul li:nth-child(7) { transition-delay: 1.1s; }
	header #menu.active .menu-nav-container ul li:nth-child(8) { transition-delay: 1.2s; }
	header #menu.active .menu-nav-container ul li:nth-child(9) { transition-delay: 1.3s; }
	header #menu.active .menu-nav-container ul li:nth-child(10) { transition-delay: 1.4s; }
	
	header nav .menu-nav-container ul li a {
		text-decoration: none;
		padding: 1rem 1rem 0 0;
		margin-top: 20px;
		display: block;
		font-size: 2rem;
		line-height:1rem;
		border-bottom: 3px solid transparent;
		transition: color 0.3s ease, border-color 0.3s ease;
	}

	header nav#menu li.current-menu-item {  }
	header nav#menu li.current-menu-item a { border-bottom:3px solid #000  }
	
	header nav#menu li.current-post-parent { background:#000; color:#fff !important }
	header nav#menu li.current-post-parent a { background:#000; color:#fff !important }
	
	header nav#menu li a:hover { border-bottom:3px solid #000 }

/********************/		
/***** SUBMENU *****/ 
 	#menu ul ul { display:block; }
	/*#menu ul li:hover > ul { display:block;	position:absolute; top: 100%;}*/
	#menu ul li ul li { float: none ; ; display: block;	padding: 0; }
	#menu ul li ul li a { display:block;  -webkit-text-stroke: 0.5px transparent; margin-left:4%;  width: 100%; background:#fff; border-bottom:3px solid transparent !important  }
	#menu ul li ul li a:hover, 
	#menu ul li ul li.current-menu-item a {border-bottom:3px solid #000 !important }
	
	
    #menu ul li ul .archives_btn { float:right; margin-right:10px; } 
    /*#menu ul li:first-child > ul li:nth-last-child(2) a { border-right:none !important}*/
    #menu ul li.anchor_menu ul li a  { -webkit-text-stroke: unset }
    #menu ul li.anchor_menu ul li.active a { -webkit-text-stroke: 0.5px black;}
    #menu ul li > ul li.anchor:hover a { -webkit-text-stroke: 0.5px black; }

/*************************************/	
/********* Wrapper MM menu **********/
/***********************************/	
	#wrapper { top:0; left:0; height:100%; width:100%; 
		-webkit-transition: all 0.5s ease; 
		-moz-transition: all 0.5s ease; 
		-ms-transition: all 0.5s ease; 
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}

/*****************************/
/********* MM MENU **********/
/***************************/
/************* Menu mobile icon animation / transformation **************/
  	#mm-blocker {z-index:5!important;}
	 /**** TEXT ****/
	#menumobile.style-a {   
		padding:7px ;
		font-family: 'Roboto semibold', Arial, Helvetica, Verdana;
		text-decoration: none; font-size:27px; color:#000;
		z-index: 3; /* Pour s'assurer qu'il est bien visible */
		overflow: hidden;
		position: fixed;
		right:0; 
		top:0;  display:none !important  
	}
	
	/**** ICON ****/
	#menumobile.style-b {   
        width:35px;
        height:25px;
        padding:5px 10px;
        position:fixed;
        top:20px; 
        left:20px;  
        z-index:3;
        overflow:hidden; text-indent:-9999px; display:none !important  
	}
	
	.mm-listview { font:inherit; color:#fff; text-decoration:none; }
    .mm-listview a { text-decoration:none;  }
    .mm-clear:after, .mm-clear:before, .mm-close:after, .mm-close:before{ border:none }
    .mm-menu.mm-theme-black .mm-btn:after, .mm-menu.mm-theme-black .mm-btn:before { color:#fff }
    .mm-menu.mm-theme-black .mm-btn:after, .mm-menu.mm-theme-black .mm-btn:before {   border-color:rgba(255,255,255,1);}
    .mm-listview .mm-divider, .mm-listview>li>a, .mm-listview>li>span, .mm-navbar .mm-title { text-decoration:none }
    
    #menumobile  span {
       background:#000;
       display:block;
       height:3px;
       margin:5px 0;
	   border-radius: 15px;
    }
	#menumobile:hover span { background:#000; }
    	
	html.mm-opened #menumobile  span.top-bar { transform:rotate( 45deg ); top:10px;}
    html.mm-opened #menumobile  span.middle-bar { opacity:0; }
    html.mm-opened #menumobile  span.bottom-bar { transform:rotate( -45deg ); top:-6px; }
    #menumobile  span {
       position:relative;
       transform:rotate( 0 );
       top:0;
       left:0;
       opacity:1;
       transition:none 0.5s ease;
       transition-property:transform, top, left, opacity; }
    html.mm-opened #menumobile  span.middle-bar {left:-40px;}

    .mm-menu.mm-theme-black .mm-navbar a, .mm-menu.mm-theme-black .mm-navbar>*, .mm-menu.mm-theme-black em.mm-counter { color:#fff!important }
    .mm-menu.mm-theme-black .mm-listview > li .mm-next:after { border-color:#fff;}
    .mm-hasnavbar-top-2 .mm-panels, .mm-navbar-top-3 {top:0;}

    /**** Mm menu stylin******/
    .mm-panels { margin-top:140px;}
    .mm-navbar-top-1 { top:110px;}
    .mm-tabend, .mm-tabstart{ display:none !important}

    /***** LANG MM MENU******/
    #mm-menu #langmobile  {  float:right; padding:10px;  }
    #mm-menu #langmobile a { padding:5px; color:#ff; text-decoration:none; float:left;padding:5px  } 
    .mm-hasnavbar-top-1 .mm-panels, .mm-navbar-top-2 { border-bottom:none;top:0;}

	.mm-opened #global_wrapper { margin-top: 0 !important; }
	
/***************************************************************************************/
/************************************** PLAYGROUND ************************************/
/************************************************************************************/

/*************************/
/******** FULLPAGE *******/
/*************************/
	html.mm-blocking, html.mm-blocking body { overflow: hidden !important;}
	
/******************************************************/
/************ ARROW FULLPAGE TOP & BOTTOM ************/
/****************************************************/
	#category #prev_next-slide { display:block;   } 
	#prev_next-slide { height:100%; position: fixed; bottom: 0;  left: 50%; width:45px; 
    transform: translateX(-50%); z-index:2;     }
	
	#movedown a { width:45px; height:45px; position: absolute; right:0; bottom:2vh; top:unset;  margin:0 auto; display:block;  background:url(images/arrow-long-bottom-black.svg) no-repeat ; background-size:100%;background-position:center bottom;text-indent:-9999px;   opacity:1;  }
	#moveup a { width:45px;  height:45px;position:absolute; left:0; bottom:8vh; margin:0 auto; display:block; background:url(images/arrow-long-top-black.svg) no-repeat ; background-size: 100%;background-position:center top;  text-indent:-9999px;  opacity:1; }
	
	.section.active:first-child ~ #prev_next-slide #moveup { visibility:hidden;}
	.section.active:nth-last-child(2) ~ #prev_next-slide #movedown { visibility:hidden;}

/*******************************************/
/********** FLICKITY SLIDER ***************/
/*****************************************/
	.flickity-viewport { transition:height 0.2s;   }
	
	/* Prev next Boutons defaut */
	.flickity-prev-next-button { border-radius:0 !important;   padding:0 1%; background:#000}
	.flickity-prev-next-button.next { background:url(images/arrow-right.svg) no-repeat ; background-size:contain;background-position: center; border:none; right:0 }
    .flickity-prev-next-button.previous {  background:url(images/arrow-left.svg) no-repeat ; background-size:contain;background-position: center;  border:none; left:0 }
       
    .no-scroll-lg .flickity-prev-next-button.previous { display:none !important}
    .no-scroll-lg .flickity-prev-next-button.next  { display:none !important}
	.flickity-prev-next-button .flickity-button-icon { display:none}
	/*.flickity-button:disabled {  opacity: 0 !important;  }*/
	
	/* Boutons pour .carousel-highlight (Collection) */
	/* Boutons pour .carousel-highlight (Collection) */
	.prev, .next-collection { transition: all 0.3s ease;}
	.prev.active, .next.active { opacity: 1; /* Par défaut, les boutons sont visibles */ pointer-events: auto; /* Permet d'interagir avec le bouton */ }
		
	.prev.inactive, .next.inactive {opacity: 0; /* Si le bouton est inactif, on le rend plus transparent */ pointer-events: none; /* Désactive l'interaction avec le bouton */}
	
	/* Boutons pour .carousel-highlight-2 (Services) */	
	/* Boutons pour .carousel-highlight-2 (Services) */
	.prev-services, .next-services { transition: all 0.3s ease;}
	.prev-services.active, .next-services.active {opacity: 1; /* Par défaut, les boutons sont visibles */pointer-events: auto; /* Permet d'interagir avec le bouton */ }
	.prev-services.inactive, .next-services.inactive {opacity: 0; /* Si le bouton est inactif, on le rend plus transparent */ pointer-events: none; /* Désactive l'interaction avec le bouton */ }

/**********************************/
/***** CAROUSEL HIGHTLIGHT *******/
/********************************/
	.carousel-highlight { width:100%; margin-bottom:50px; }

	
	
/******************************************************/		
/********** PREV NEXT FLICKITY EXTERNAL ARROW ********/	
/****************************************************/
/********  Navbar Sections with FLICKITY ***********/
	.navbar {
		height: 30px;
		display:flex;
		align-items: center;
		position: absolute;
		    bottom: -35px;
		left: 0;
		z-index: 1; 
	}		
    .prevnext { height: 100%; display: flex;  align-items: center;}
    .prevnext button { 
		border: none;  
		text-indent: -9999px;
		width:50px; margin:0 5px 0 0; float:right; 
		height:100%; 
		background-repeat: no-repeat;
		cursor: pointer; 
		background-color:transparent; 
	}
	
	.prevnext button.prev {background-image: url(images/arrow-long-left-black.svg); background-size: 30vw; background-position: 0%; }
	.prevnext button.next {  background-image: url(images/arrow-long-right-black.svg); background-size: 30vw;background-position: 100%;}

/*************************/
/***** ROYALSLIDER *******/
/*************************/
	.rsSlide { height:unset !important;}
	.rsDefault .rsArrow {
		height:30px;
		width:30vw; padding:0.2%; 
		position: absolute;
		display: block;
		cursor: pointer;
	}
	.rsArrowLeft { left:2vw; bottom:3vh; height:30px;  background:url(images/arrow-long-left-black.svg) no-repeat ; background-size:100%;background-position:left;  }
	.rsArrowRight { left:32vw; bottom:3vh; height:30px;background:url(images/arrow-long-right-black.svg) no-repeat;background-size:100%;background-position:center; }
	
	.rsArrowDisabled { opacity:0 !important; }
	
	.fp-is-overflow .fp-overflow.fp-auto-height-responsive, 
	.fp-is-overflow .fp-overflow.fp-auto-height, 
	.fp-is-overflow > .fp-overflow {  overflow:visible !important;}
	
	.rsOverflow { overflow-y:visible !important;overflow-x:hidden !important; min-height:100vh;  }

/*****************************************/
/************** PAGINATION **************/
/***************************************/
	#pagination { width: calc(100% - 0px); color:#fff; border-left:none; border-right:none; position:relative; z-index:5; grid-column-end: span 60; margin:20px 0   }
	#pagination .prev {text-align:center; grid-column-end: span 30; border-right: 1px solid #fff; background:#000; }
	#pagination .next {text-align:center; grid-column-end: span 30;border-left: 1px solid #fff;  background:#000; }
	#pagination .prev a, #pagination .next a { display:block; padding:20px 0; text-decoration:none; font-weight:bold; color:#fff;}
	#pagination .prev:hover a, #pagination .next:hover a { background: none;  } 
	
	#pagination .prev a:after, 
	#pagination .next a:after { content:''; display:block; height:100%; width:45px; position: absolute; top:0;    }
	
	#pagination .prev a:after {background:url(images/arrow-left-white.svg) no-repeat ; background-size:contain; background-position: left;  left:2%  }
	#pagination .next a:after {background:url(images/arrow-right-white.svg) no-repeat ; background-size:contain; background-position:right;  right:2%  }
	
/*******************************************************************************/
/******************** CATEGORY SELECTOR TEMPLATE ALL WORKS ********************/
/*****************************************************************************/
	.bar {
		position:sticky; top:5px ; margin-right:40px; z-index:1;   background-size:cover;  display:block;
		border-right:none; border-left:none ; padding:10px 0 10px 35px;     display: grid
	}
	
	.bar .button {
		background:#fff; font-weight:bold; color:#000; 
		border: none;
		padding: 10px 1%;  display:block; float:right;
		cursor: pointer; font-size:1em; border:2px solid transparent; -webkit-border-radius: 30px;
		border-radius: 30px;
	    font-family: 'Roboto semibold', Arial, Helvetica, Verdana;
	}
	
	.bar .button.is-checked { border:2px solid #000 /* Couleur du bouton sélectionné */}
		
	.bar .view-more {     
		overflow: hidden;
		margin:0.3rem 0.2rem 0 0;
		max-width: 280px;
		padding:0.2% 0.5% 0.2% 1.5%;
		position:absolute; right:1vw;  
		font-size:1.2rem; font-weight:bold; line-height:2em; 
	}	
	
	.bar .view-more a { text-decoration:none !important}
	.bar .view-more span.arrow { 
		background:url(images/shop-black.svg) no-repeat ;  background-size:contain; 
		width: 35px;
		height: 35px;
		display: block;
		float: right;
		margin:2px 0 0 30px
	}	
		
	.bar .view-more:hover a { color:#fff !important   } 
	.bar .view-more:hover span.arrow { background:url(images/shop-white.svg) no-repeat ;  background-size:contain; }
	.bar .view-more:hover span.bgmove { left:-10%}	

/*******************************/
/********** LOADER ************/
/*****************************/
	.loader {
    position: fixed;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    z-index: 999999999;
    background: rgb(255,255,255);
    overflow: hidden !important;
    transition: opacity 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
	}
	
	.loader::before {
		content: "";
		width: 70px;
		height: 70px;
		background: url('images/logo-icon.png') no-repeat center;
		background-size: contain;
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}

/*************************************/
/************* LINKS ****************/
/******* CTA LINKS EFFECT **********/
/**********************************/
	.view-more, a.view-more {     
		position: relative; text-decoration:none; color:#000;
		overflow: hidden; 
		border: 3px solid #000;
		text-align: center;
		display: inline-block;
		padding:0; margin-bottom:5px; 
		font-size:1.4em; font-weight:bold; 
		-webkit-border-radius: 40px;
		border-radius: 40px;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-ms-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		transition: all 0.2s ease; 
		mix-blend-mode: multiply !important;  font-family: 'Roboto bold', Arial, Helvetica, Verdana;
	}
	
	 .view-more span.content {
		position: relative;
		z-index: 1;
		margin: 10px 15px 5px 15px;
		display: inline-block;
	} 
	.view-more::before { 
		content:"";
		width:140%; height:110%; background:#000; position:absolute; top:0; left:-150%; z-index:-1; 
		
		-moz-transform: skewX(-25deg);
		-webkit-transform: skewX(-25deg);
		-o-transform: skewX(-25deg);
		-ms-transform: skewX(-25deg);
		transform: skewX(-25deg);
			
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}
	
	.view-more span.icon { 
		width: 35px;
		height: 35px;
		display: block;
		float: right;
		margin: 5px ; 
	}
	
	.view-more span.icon.arrow { background:url(images/arrow-right.svg) no-repeat ;  background-size:contain;  }
	.view-more span.icon.contact { background:url(images/mail-black.svg) no-repeat ;  background-size:contain; }
	
	/************************/
	/**** LINKS HOVER ******/
	/**********************/
	.view-more:hover, a.view-more:hover  { color:#fff !important; } 
	.view-more:hover::before { left:-10%;}
	
	.view-more:hover span.icon.arrow { background:url(images/arrow-right-white.svg) no-repeat ;  background-size:contain; }
	.view-more:hover span.icon.contact { background:url(images/mail-white.svg) no-repeat ;  background-size:contain; }
	
	/*******************************/
	/**** Article hover link ******/
	/*****************************/
	article a:hover .view-more { color:#fff;     } 
	article a:hover .view-more a { color:#fff !important ;   }
	article a:hover .view-more::before { left:-10%;}
	
	article a:hover .view-more span.arrow { background:url(images/arrow-right-white.svg) no-repeat;  background-size:contain; }
	article a:hover .view-more span.icon.contact { background:url(images/mail-white.svg) no-repeat ;  background-size:contain; }
	
	/***********************/
	/*** LINKS NEGATIVE ***/
	/*********************/
	.view-more.neg { color:#fff !important; border: 3px solid #fff; }
	.view-more.neg::before { background:#fff;}
		
	.view-more.neg span.icon.arrow { background:url(images/arrow-right-white.svg) no-repeat ;  background-size:contain;  }
	.view-more.neg span.icon.contact { background:url(images/mail-white.svg) no-repeat ;  background-size:contain; }		

	.view-more.neg:hover span.icon.arrow { background:url(images/arrow-right-black.svg) no-repeat ;  background-size:contain;  }
	.view-more.neg:hover span.icon.contact { background:url(images/mail-black.svg) no-repeat ;  background-size:contain; }	
	
	/**** Link Negatif hover ******/
	.view-more.neg:hover, a.view-more.neg:hover  { color:#000 !important; mix-blend-mode:unset !important;  } 
	
	.view-more:hover span.icon.arrow { background:url(images/arrow-right-white.svg) no-repeat ; background-size:contain; }
	
	.view-more:hover span.icon.contact { background:url(images/mail-white.svg) no-repeat ;  background-size:contain; }
	
	/**** Article hover Link Negatif******/
	article:hover .view-more.neg:hover span.icon.arrow { background:url(images/arrow-right-white.svg) no-repeat ;  background-size:contain; }
	article:hover .view-more.neg:hover span.icon.contact { background:url(images/mail-white.svg) no-repeat ;  background-size:contain; }

/*********************************************************/	
/************** LINK OTHER PAGES (navbar) ***************/
/*******************************************************/		
	.navbar .link {
		position: relative; font-family:'Roboto medium', Arial, Helvetica, Verdana;
		font-size: 2em;
		text-decoration: none;
		padding: 1% 80px 1% 2%; color:#fff !important;
	}
	
	.navbar .link::after {
		content: ''; 
		position: absolute; 
		right: 25px;
		top: 50%;
		transform: translateY(-50%);
		width: 40px;
		height: 40px;
		background: url(images/arrow-link-circle-black.svg) no-repeat center;
		background-size: contain;
	}
	
	.navbar .link:hover::after {
		background: url(images/arrow-link-circle-black-bg-white.svg) no-repeat center;
		background-size: contain;
	}

/************************************************************/
/********************* GRID SYSTEM *************************/
/********** https://vladocar.github.io/60gs/ **************/	
/*********************************************************/
	.grid { display:grid !important; grid-template-columns: repeat(60, 1fr); }
	.col {}
	.col-60 { grid-column-end: span 60 } /* 1 column */
	.col-40 { grid-column-end: span 40 } /* 2 columns */
	.col-30 { grid-column-end: span 30 } /* 2 columns */
	.col-20 { grid-column-end: span 20 } /* 3 columns */
	.col-15 { grid-column-end: span 15 } /* 4 columns */
	.col-12 { grid-column-end: span 12 } /* 5 columns */
	.col-10 { grid-column-end: span 10 } /* 6 columns */	

/*** GLOBAL STYLE - DEFAUT ***/
/*** GLOBAL STYLE - DEFAUT ***/
/*** GLOBAL STYLE - DEFAUT ***/
	.mobile { display:none !important}
	.screen { display:block }
	
	#global_wrapper { opacity:0; }
	#global_wrapper section { /******* height:100vh ******/  }
	
	#global_wrapper > section img, 
	#global_wrapper > article img { width:100%; height:auto; display:block  }

	#global_wrapper > section a, 
	#global_wrapper > article a { color:#000; }
	
	/*#global_wrapper > section h1::after { content:'h2'; display:block  }
	#global_wrapper article h2   {  }
	
	#global_wrapper > section h2::after { content:'h2'; display:block  }
	#global_wrapper article h2   {  }*/
	
/***************************************************/
/********** BANDE TITRE CENTRAL VERTICAL **********/
/*************************************************/
	#bande {
		position:fixed; /* toujours au milieu de la page */
		top:0;
		left:50%;
		transform:translateX(-50%);
		height: 100vh; /* bande sur toute la hauteur */
		width:2px; /* largeur de la bande (ajuste si besoin) */
		display:flex;
		flex-direction:column;
		align-items:center; /* centre horizontalement le contenu */ 
		z-index:2;
	}

	#bande h1 {
		writing-mode:vertical-rl;    /* inverse le sens */
		text-orientation: mixed;transform: rotate(180deg); /* inverse le sens */
		margin:1vh 0 3vh;
		padding-bottom: 1rem; font-size:3em; font-family:'poppinssemibold'; 
	}
	
	#bande span {
		flex: 1;                      /* prend tout l’espace restant */
		width: 3px;
		background:#000;  -webkit-border-radius: 30px 30px;
		border-radius: 30px 30px;   /* ligne qui s’adapte à la couleur du texte */
	}

/*************************/
/********** HOME *********/
/*************************/
	
/********************************/
/******* SECTION INTRO *********/
/******************************/
/****** BACKGROUND IMAGE INTRO *****/
	.background_img_container {
		position:fixed;
		top:1.5vh;
		left:1vw;
		width:98vw;
		height:96vh;
		background-size: cover;
		background-position: center;
		z-index:0; /* Place l'image derrière le contenu */ 
		opacity:1;
	}

/**************************************/
/******* SECTIONS DESCRIPTION ********/
/************************************/
	section#page_excerpt {  }
	section#page_excerpt .left { 
		height: 100vh; 
		background:#fff ;
		display: flex;
		justify-content: flex-end; /* horizontal */
		align-items: flex-end;     /* vertical */
	}
	section#page_excerpt .left .description_container {  padding:10vh 8vh 10vh 10vh; text-align:right; max-width:100%;  }
	
/****************************************************************/
/*************************** PAGES *****************************/
/**************************************************************/

/************************/
/****** ALL WORKS ******/
/**********************/
	#page_all_works {}
	#page_all_works section h2 { position:sticky;padding: 2% 2% 0 2%;padding-top: 130px; font-size:50px}
	#page_all_works article.articles {margin: 0; width:23%; padding:1%;} /* Par defaut 1/3 de la page*/
	#page_all_works article.articles a { position:relative; padding:1%; display:block; overflow:hidden; padding-bottom:0; text-decoration:none;}
	#page_all_works article.articles a .description { padding:4%;  font-family: 'poppinsregular';}
	#page_all_works article.articles a .visuel img { background: url(images/bg-img.jpg); }
	
/********************************************************************************************/
/************************************ CATEGORY *********************************************/
/******************************************************************************************/

/*****************************************************************/
/****************** SLIDER VERTICAL FULLPAGE ********************/
/***************************************************************/
	section#vertical { padding:0; overflow:hidden; height:100vh;     }
	section#vertical article { width:100vw; height:100vh; }
	section#vertical article a { display:contents; text-decoration:none ;}
	
	section#vertical article .visuel_container { background: url(images/bg-img.jpg); }
	section#vertical article .visuel { 
		height: 100vh; width: 100%; /* Ajustement pour ne pas casser le layout */
		background-size: cover; /* Assure le backstretch */
		background-position: center;
		background-repeat: no-repeat;
	}
	
	section#vertical article .description_container { padding:5%; height:100vh; box-sizing:border-box;  background:#fff; display: flex;flex-direction: column;    }
	section#vertical article .description_container .description { padding:5%; width:90%; }
	

	section#vertical article .carousel-highlight { max-width:80%; }
	section#vertical article .carousel-highlight .navbar { width:100%;}

	/* Cibler chaque élément impair */
	section#vertical:nth-child(odd) article  { direction: ltr; /* Définit la direction de gauche à droite */}
	section#vertical:nth-child(odd) article .description_container {  justify-content: flex-end; /* background:red */   }
    section#vertical:nth-child(odd) article .description_container  .carousel-highlight  { }
	
	section#vertical:nth-child(odd) article .carousel-highlight .navbar { left: 110px ;  bottom:0;  }
    section#vertical:nth-child(odd) article .carousel-highlight .prevnext {margin-left: auto; b  }
	
	/* Cibler chaque élément pair  */
	section#vertical:nth-child(even) article { direction: rtl; /* Définit la direction de droite à gauche */ /*background:red */    }
	section#vertical:nth-child(even) article .description_container { justify-content: flex-end;text-align: right; direction: ltr;   }
	section#vertical:nth-child(even) article .description_container  .carousel-highlight { justify-content: flex-end;      display: inline-block; }
 
    section#vertical:nth-child(even) article .carousel-highlight .navbar {   direction: rtl; left:auto; right: 110px !important; bottom:0; }
    section#vertical:nth-child(even) article .carousel-highlight .prevnext { margin-right: auto; flex-direction: row-reverse; }

	section#vertical:nth-child(even) article .view-more { float: right;}
	
	
/***********************/
/***** SINGLE *********/
/*********************/
	#single { }
	#single #content_container { width: 100%;    /* centrage horizontal + marges verticales */}
	#single .visuel_container {  height:100vh; position:sticky; top:0; background: url(images/bg-img.jpg);  }
	#single .visuel_container .visuel { height: 100vh; width: 100%; /* Ajustement pour ne pas casser le layout */
		background-size: cover; /* Assure le backstretch */
		background-position: center;
		background-repeat: no-repeat;
	}
	
	#single #description_container { padding:5%; background:#fff }
	#single #description_container .carousel-highlight { max-width: 80%; }
    
/********************************/
/******** Pages default ********/
/******************************/
	#page_default { position:relative; display: flex;  height: 100vh; /* Prend toute la hauteur de la fenêtre */   }
	#page_default #global_wrapper section#content_container  {}
	#page_default #global_wrapper div#content  { position:relative;max-width:70%; padding:2%; margin:5% auto; background:#fff  }
	#page_default #global_wrapper > section a { text-decoration:underline}
	
/********************************/
/******** Page template ********/
/******************************/
	
/****************************************************************/
/*********** ALIGN SYSTEM SCF SECTION LEFT/RIGHT  **************/
/**************************************************************/
	
	/* Alignement gauche (par défaut) */ 
	.section .grid.gauche { direction: ltr; /* texte à gauche, image à droite */  }
	.section .grid.gauche .description_container .description { text-align:right }
	
	/* Alignement droite */
	.section .grid.droite { direction: rtl; /* inverse l’ordre : image à gauche, texte à droite */ }
	.section .grid.droite .description_container .description { text-align:left }
	
	
/*******************************/
/*************** 404 **********/
/*****************************/
	body.error404 #global_wrapper section { }
	body.search #global_wrapper section { }

/******************************/
/******** FOOOOTER ***********/
/****************************/
	footer {
		position:fixed; 
		bottom:0;
		left: 0; z-index:1;
		width: 100vw; /* Optionnel, si vous souhaitez que le footer prenne toute la hauteur */
		display: flex;
		align-items: center; /* Centre verticalement le contenu */
		justify-content: center; /* Centre horizontalement le contenu (optionnel) */
		display:none
	}

/********************************************************************************/
/********************************************************************************/
/*******************************  MEDIA QUERIES  ********************************/
/********************************************************************************/
/********************************************************************************/

    /*****************************************/
    /************* Under 1550px *************/
    /***************************************/
    @media screen and (max-width:1550px) {  
   
    }

    /*****************************************/
    /************* Under 1400px *************/
    /***************************************/
    @media screen and (max-width:1400px) {  
    #bande h1 { font-size: 2.2em;}
	}

    /*****************************************/
    /************* Under 1250px *************/
    /***************************************/
    @media screen and (max-width:1250px) {  
    
	}
    
	/****************************************/
    /**************** 1040PX ****************/
    /****************************************/
    
	/************************************/
	/******* !!! OVER 1040px!!!  ********/
	/************************************/
    @media screen and (min-width:1040px) { 
   		
	}
	
	/****************************************/
    /************* UNDER 1040px *************/
    /****************************************/
    @media screen and (max-width:1040px) { 
		
    }
    
	/************* UNDER 900px *************/
    @media screen and (max-width:900px) { 
        
		.screen { display:none !important}
		.mobile { display:block !important}
		
		#global_wrapper section, 
		#global_wrapper article, 
		#global_wrapper .grid, #global_wrapper .col { grid-column-end: span 60 !important;  }
		
		#bande {left:unset; right: 5px; }
		
		header nav#menu { width: calc(100vw - 0px); }
		
		#prev_next-slide { left:unset; right:-15px; transform:none;}
		#moveup a, #movedown a { width: 35px;height: 35px; left:0; right:0;	}
			
			
		.bar { display:none}	
			
	
	   
	   
	   	/*** !!!! Section reset mobile !!!! ****/
		.section { position:relative; height:auto !important ;  }
		.section .content .fp-tableCell { height:auto !important }
		
		section#vertical { height: fit-content ;   min-height: fit-content ; min-height: unset !important; }
		section#vertical article { height: fit-content ;   min-height: fit-content ; min-height: unset !important; }
 		section#vertical:nth-child(even) article {direction:unset; }
		
   		section#page_excerpt .left {
			height: 100vh;
			display: flex;
			justify-content: flex-start;
			align-items: flex-end;
		}
		section#page_excerpt .left .description_container {
			padding:5vw;
			text-align: left;
			max-width: 80%;
		}
			
		section#vertical article .visuel {  display:contents !important }
		section#vertical article .description_container { display: block;align-items: flex-start; height:unset; }
    	
		
		/************************/
		/****** ALL WORKS ******/
		/**********************/
		#page_all_works section h1 { font-size:1.5em;   }
		#page_all_works article.articles {margin: 0; width:30%; padding:1%;} /* Par defaut 1/3 de la page*/
			
		
		
        /***********************/
		/***** SINGLE *********/
		/*********************/
		#single #visuel { height: auto;position: unset }
		
		
		
	}
    /************* UNDER 600px *************/
	@media screen and (max-width: 600px) { 
		#bande h1 { font-size: 2em;}
		
		.background_img_container { top: 1vh; left: 2vw;width: 90vw;height: 90vh;}
    
   		nav#visible {top: 10px;left: 0px;	}
		nav#visible div.menubtn { border:none  !important;     padding: 10px 20px;}
		nav#visible #social_networks { display:none}
		
		header nav .menu-nav-container { padding: 10vh 0 1.5% 8%;  width: 90%;}
  		header nav .menu-nav-container ul li a {
			
			padding: 1rem 1rem 0 0;
			margin-top: 10px;
		
			font-size: 1.3rem;
			line-height: 1rem;
			border-bottom: 3px solid transparent;
			transition: color 0.3s ease, border-color 0.3s ease;
		}
		
		section#vertical article .description_container .description {width: 80%; }

		
		/*************************/
		/***** ROYALSLIDER *******/
		/******** Arrow **********/
		.rsDefault .rsArrow {
			height: 40px; width: 40px; padding:5px;
			position: fixed; bottom:5px; background-color:#000; 
			-webkit-border-radius: 30px;
			border-radius: 30px; /* border:3px solid #fff */
		  
		}
		.rsArrowLeft { background-size: 60% !important; background-position:center !important; right:60px; left: unset; background:url(images/arrow-left-white.svg) no-repeat;}
        .rsArrowRight {  background-size: 60% !important; background-position:center !important;  right:5px; left:unset; background:url(images/arrow-right-white.svg) no-repeat;}
 		
		
		section#vertical:nth-child(even) article .carousel-highlight .prevnext { flex-direction: row; }
	
		/******************************************************/		
		/********** PREV NEXT FLICKITY EXTERNAL ARROW ********/	
		/****************************************************/
		/********  Navbar Sections with FLICKITY ***********/
			.navbar {height:50px; width: 100%;}
			.prevnext button { margin: 0 5px 0 0; }
			.prevnext button.prev { background-size: 100vw; }
			.prevnext button.next {  background-size: 100vw;}
			
			/************************/
		/****** ALL WORKS ******/
		/**********************/
		#page_all_works section h1 { font-size:1.5em;   }
		#page_all_works article.articles {margin: 0; width:90%; padding:1%;} /* Par defaut 1/3 de la page*/


	}