@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 */
	
    /* Global */
	*, *::before, *::after {}
	html { font-size:100%; /* = 16px */  }
	html, body {  padding: 0; margin: 0; }
	body {  font-family: 'Crimson', Arial, Helvetica, Verdana; font-size: 1rem;  line-height: 1.6; }
	
	/* Titres responsives */
	h1 { font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.2;color:#022414;  }
	h2 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.25; color:#022414; }
	h3 { font-size: clamp(1.5rem, 3.7vw, 2.5rem); line-height: 1.3;color:#022414;  }
	h4 { font-size: clamp(1.2rem, 3vw, 2.2rem); line-height: 1.35;color:#022414;  }
	h5 { font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.4; color:#022414; }  
	
	p { font-family: 'futurabook', Arial, Helvetica, Verdana; font-size: clamp(1rem, 1.3vw, 1.8rem); line-height: 1.5; color:#022414;     margin-bottom: 10px;}
	li { font-family: 'futurabook', Arial, Helvetica, Verdana; font-size: clamp(1rem, 1.3vw, 1.8rem); line-height: 1.5;  list-style-type: circle; margin-left:30px}
	  
	a { text-decoration:none; font-size: clamp(1rem, 1.2vw, 2rem); line-height: 1.8;  font-family: 'futurabook', 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;	}
	.view-more, a.view-more {  font-family: 'futurabook', Arial, Helvetica, Verdana;  }
	/* Mise en forme de base */
	strong { font-weight: bold; }
	em { font-style: italic; }
	figure a {display: block;}
	hr { display: block; width: 100%; height: 1px; margin: 0;border-style: none;border-width: 0;background: #fff;}
	.clearer { clear: both; display: table; width: 100%;}
	
	/************************/
	/***** Style title *****/
	/**********************/
	
	/***********************************/
	/** Style baseline intro default **/
	.title-style-1 {  font-size:2em; line-height:1.2em; color:#fff ; max-width:85%; padding:20px 0 ; display:block; text-shadow: 1px 1px 2px #000; }
	.title-style-1::after, 	.title-style-1::before { content:""; display:block; height:2px; width:150px; background:#fff}
	.title-style-1::after { margin-top: 20px;}
	.title-style-1::before  { margin-bottom: 20px;}	
	
	/** Style baseline intro align right **/
	.title-style-1.right { text-align: right;  margin-left: auto; /* pour que le max-width s’applique à droite */ }
	.title-style-1.right::before, h3.title-style-1.right::after { margin-left: auto; /* pour que la ligne soit à droite */}
	
	/** Style centered line full width **/
	.title-style-2 { padding:0 40px; margin-bottom:40px; color: #7f0069; display: flex; align-items: center; /* Centre verticalement */justify-content: space-between; /* Espace entre texte et ligne */gap: 0.5em; /* Espacement entre le texte et la ligne */}
	.title-style-2::after {content: "";flex-grow: 1; /* Remplit tout l'espace restant */height: 2px;background: #7f0069;} 
	
	/** Style line under title **/
	.title-style-3 { padding:0; margin-bottom:40px; color:#7f0069; }
	.title-style-3::after {content: ""; display:block; height: 2px; background: #7f0069; width:250px} 
	
	/** Style Citation **/
	.title-style-4 { padding:0 40px 0 0; margin-bottom:40px; color:#022414; font-family: 'futurabook', Arial, Helvetica, Verdana;}
	.title-style-4::after {content: ""; display:block; height: 2px;background: #022414; width:250px; margin-top: 20px;} 
	
	/*button:focus-visible, a:focus-visible, a:active, a:visited {
    background: yellow !important;
    outline:3px solid blue !important;;
    border-color:3px solid blue !important;
	}*/
	
   	/* 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;}

/**********************************************/ 
/*********** Scroll bar design ***************/ 
/***** Pour les navigateurs basés sur Webkit (Chrome, Safari, Edge) *****/
	::-webkit-scrollbar { width: 3px; height: 6px;}
	::-webkit-scrollbar-track { background:#144237 ;}
	::-webkit-scrollbar-thumb { background: #144237;}
	::-webkit-scrollbar-thumb:hover {  background: #144237;}
	/* Pour Firefox */
	html { scrollbar-width:thin;    scrollbar-color: #022414  #fff; }
	/* 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:3; top:0; left:0; opacity:1; }

/*******************************/	
/************ LOGO ************/
/*****************************/	
 	header #logo-container { position:fixed; top:0px; display:inline-block ; width:100%;  background: #144237;
	-webkit-transition: all 0s ease-in;
	-moz-transition: all 0s ease-in;
	-ms-transition: all 0s ease-in;
	-o-transition: all 0s ease-in;
	transition: all 0s ease-in; }
	
	header #logo-container { background:#022414 !important; }
	
	header #logo-container a { display:block; text-decoration:none; max-width:360px; margin:0 auto; }
	header #logo-container img { max-width:100% }
	
	body.page-template-template_home-fullpage header #logo-container  { top:-150px; opacity:0; background:none;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in; }
	
	body.page-template-template_home-fullpage header.sticky #logo-container  { top:0px; opacity:1; 
	-webkit-transition: all 0.7s ease-out;
	-moz-transition: all 0.7s ease-out;
	-ms-transition: all 0.7s ease-out;
	-o-transition: all 0.7s ease-out;
	transition: all 0.7s ease-out; }
	
	/********* Change logo color on 80vh (See plugin.js -> Sticky header)********/
	
	header .white { display:block;  
	-webkit-transition: all 0.7s ease-out;
	-moz-transition: all 0.7s ease-out;
	-ms-transition: all 0.7s ease-out;
	-o-transition: all 0.7s ease-out;
	transition: all 0.7s ease-out; } 
	header.sticky .white { display:block ; padding: 0  } 
	
	header .neg  { display:none} 
	
	
/********************/		
/****** HEADER *****/
    header nav { position:fixed; top:0; right:180px; background:#fff; z-index:50; display:none !important }
	header nav#menu { display: flex; float: right;/* Inverser l'ordre des éléments */}
	header nav .menu-nav-container {float:left;   }
	header nav .menu-nav-container ul {  }
	header nav .menu-nav-container ul li { float:left; display:block; }
	header nav .menu-nav-container ul li a { text-decoration:none; padding:1rem; display:block; 
    -webkit-transition: all 0.5ms ease;
    -moz-transition: all 0.5ms ease;
    -ms-transition: all 0.5ms ease;
    -o-transition: all 0.5ms ease;
    transition: all 0.5ms ease;
	} 
	
	header nav#menu li.current-menu-item { background:#000; color:#fff !important }
	header nav#menu li.current-menu-item a { background:#000; color:#fff !important }
	
	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 { background:#000; color:#fff }

/********************/		
/***** SUBMENU *****/ 
 	#menu ul ul { display:none; }
	#menu ul li:hover > ul { display:block;	position:absolute; top: 100%;}
	#menu ul li ul li { float: none ; width: 10vw; display: block;	padding: 0; }
	#menu ul li ul li a { display:block;  -webkit-text-stroke: 0.5px transparent; padding: 2vh 4vh ; width: 100%; background:#fff}
    #menu ul li ul li:last-child a { border:none}
    #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 **********/
/***************************/
	.mm-menu.mm-theme-black {
		background:#022414 !important;
		border-color: rgba(255, 255, 255, .2);
		color: rgba(255, 255, 255, .6);
	}

/************* Menu mobile icon animation / transformation **************/
  	#mm-blocker {z-index:5!important;}
	 /**** TEXT ****/
	#menumobile.style-a {   
		padding:7px ;
		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:5px; 
        right:10px;  
        z-index:5;
        overflow:hidden; text-indent:-9999px; 
	}
	
	.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:#000 }
    .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:#fff;
       display:block;
       height:3px;
       margin:5px 0;
	   border-radius: 15px;
    }
	#menumobile:hover span { }
    	
	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; }
	
	body.fp-viewing-0 #menumobile span { background:#fff; }
    body.fp-viewing-0 #menumobile:hover span { background:#fff; }
	
/**************************************/
/****** Social network Header ********/
/************************************/
	header #social_networks { margin:0; display:block; position:fixed; right:130px; top:10px; z-index:5;  }
    header #social_networks a { margin:0;display: block; width: 20px; height:20px; float: left; text-indent:-99999px; padding:5px; margin:0 2px}
    header #social_networks a svg { width:90%; height:auto;} 
    header #social_networks a.shop { background:url(images/shop-white.svg) center 90% /90% no-repeat; }
    header #social_networks a.insta { background:url(images/insta-white.svg) center 90% /90% no-repeat; }
	
	header #social_networks a.fb:hover {  }
    header #social_networks a.insta:hover  { }
	header #social_networks a.mail:hover  { }
	
	header #social_networks a.fb { background: url(images/facebook.svg) center center / 90% no-repeat; }
	header #social_networks a.insta { background: url(images/insta-white.svg) center center / 90% no-repeat; }
	header #social_networks a.youtube { background: url(images/youtube.svg) center center / 90% no-repeat; }
	
	
	#mm-menu #social_networks { margin:0 auto; display:inline-flex;  top:0;  }
	#mm-menu #social_networks a { margin:0;display: block; width: 20px; height:20px; float: left; text-indent:-99999px; padding:5px; margin:0 2px}
	#mm-menu #social_networks a.fb { background: url(images/facebook.svg) center center / 90% no-repeat; text-indent:-9999px}
	#mm-menu #social_networks a.insta { background: url(images/insta-white.svg) center center / 90% no-repeat; }
	#mm-menu #social_networks a.youtube { background: url(images/youtube.svg) center center / 90% no-repeat; }
	
	#mm-menu .mm-navbar-bottom { height:70px }
    
  	#mm-menu  .lang-item-fr, 	#mm-menu  .lang-item-en { width:50%; float:left; position:relative; text-align:center}
	#mm-menu  .lang-item-fr:after {
    border-right-width: 1px;
    border-right-style: solid;
    display: block;
    position: absolute;
    right: 0;
    top: 0; z-index:-1
}
/***********************************************/
/************** Language select ***************/
	header #lang { margin:0; display: block; position: fixed; right:63px;top:8px; z-index: 5; }
	header #lang a { margin:0; display: block;  float: left; text-indent:0; padding:0 5px;color:#fff; text-decoration:none; line-height:1.5 }
	header #lang a.active, header #lang a:hover { border-bottom:2px solid #fff } 
	
	body.fp-viewing-0 header #lang a { color:#fff;  }
	body.fp-viewing-0 header #lang a.active, body.fp-viewing-0 header #lang a:hover { border-bottom:2px solid #fff }
	
	
	header #lang li { float:left; padding:10px  ; display: block;  float: left; margin:0; padding:0 }
	header #lang li a { margin:0; display: block;  float: left; padding:0 5px;color:#fff; text-decoration:none; line-height:1.5 } 
	header #lang li.lang-item-fr { content:'fr'; display:block;  }
	header #lang li.lang-item-en { content:'en'; display:block;    }
	header #lang li.current-lang  a { border-bottom:2px solid #fff}
	
/***************************************************************************************/
/************************************** PLAYGROUND ************************************/
/************************************************************************************/

/*************************/
/******** FULLPAGE *******/
/*************************/
	html.mm-blocking, html.mm-blocking body { overflow: hidden !important;}
	#prev_next-slide {  height:100%; width:35px;  position:fixed; top:0; left:0%; z-index:50000; overflow:visible; display:none;  }
	
	#movedown a { width:35px; height:50vh; position: absolute; right:0; bottom:0; top:unset; margin:0 auto; display:block; background:url(images/arrow-bottom.png); background-size:cover; text-indent:-9999px; opacity:1; }
	#moveup a { width:35px;  height:50vh;position:absolute; right:0; top:0; margin:0 auto; display:block; background:url(images/arrow-top.png); background-size:cover; 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:3% !important; background:#000; border:3px solid #7f0069  !important; -webkit-border-radius: 50px !important;
border-radius: 50px; background-color:#fff }
	.flickity-prev-next-button.next { background:url(images/arrow-right.svg) no-repeat ; background-size:80% ;background-position: center;  right:-2%; top:45%; z-index:1; background-color:#fff }
    .flickity-prev-next-button.previous {  background:url(images/arrow-left.svg) no-repeat ;  background-size:80% ;background-position: center;   left:-2%; top:45%; z-index:1; background-color:#fff }
       
    .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-collection, .next-collection { transition: all 0.3s ease;}
	.prev-collection.active, .next-collection.active { opacity: 1; /* Par défaut, les boutons sont visibles */ pointer-events: auto; /* Permet d'interagir avec le bouton */ }
	.prev-collection.inactive, .next-collection.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 */ }


	/* Boutons pour .carousel-highlight-3 (Services) */	
	/* Boutons pour .carousel-highlight-3 (Services) */
	.prev-services, .next-ser { transition: all 0.3s ease;}
	.prev-ser.active, .next-ser.active {opacity: 1; /* Par défaut, les boutons sont visibles */pointer-events: auto; /* Permet d'interagir avec le bouton */ }
	.prev-ser.inactive, .next-ser.inactive {opacity: 0; /* Si le bouton est inactif, on le rend plus transparent */ pointer-events: none; /* Désactive l'interaction avec le bouton */ }

/******************************************************/
/**********  Navbar Sections with FLICKITY ***********/
	div.navbar {
		height: 50px; 
		width: calc(100% - 0px);  /* Adjust width to 100% minus 70px */ 
		background-color:none; /*background:url(images/xx.png) no-repeat #022414 ; */
		background-size: cover;  
		display: flex;
		justify-content: space-between;
		align-items: center;
		position:absolute;
    	bottom:-40px;  z-index:3;
		border-top:3px solid #022414; border-bottom:3px solid #022414
	}			

/******************************************************/		
/********** PREV NEXT FLICKITY EXTERNAL ARROW ********/	
	.prevnext { align-items: center; height: 100%; width: 40%; position: absolute; right: 30px;  }
	.prevnext button { 
		border: none; 
		text-indent: -9999px;
		width:50%; float:left; 
		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: 150%; background-position: 0%; }
	.prevnext button.next {  background-image: url(images/arrow-long-right-black.svg); background-size: 150%;background-position: 100%;}

/*********************************************************/	
/******************* Link other pages *******************/	
	div.navbar .link {
		position: relative; 
		font-size: 2em;
		text-decoration: none;
		padding: 1% 80px 1% 2%; color:#fff !important;
	}
	
	div.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;
	}
	
	div.navbar .link:hover::after {
		background: url(images/arrow-link-circle-black-bg-white.svg) no-repeat center;
		background-size: contain;
	}

/*************************/
/***** 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%  }
	

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

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

/*******************************/
/********* ACCORDEON **********/
/*****************************/
	.bloc_hover {
		position: relative;
		cursor: pointer;
		transition: background 0.3s ease-in-out;
		outline: none; padding: 0.2em 1.5em 1.5em 1em ; margin-bottom:1em;
    	border-bottom: 1px solid grey;
	}
	
	.bloc_hover:last-child { border-bottom:none;	}

	.bloc_hover:last-of-type { border-bottom: none;}
	
	
	
	/* Surlignage au survol et au focus */
	.bloc_hover:hover,
	.bloc_hover:focus {
		/*background-color: rgba(0, 123, 255, 0.1);
		outline: 2px solid #007BFF;*/ 
	}
	
	.bloc_hover:focus {
		/*background: none !important
		outline: 2px solid #007BFF;*/  
	}
	
	/* Surlignage au survol et au focus uniquement si le bloc a du contenu */
	.bloc_hover:not(.nocontent):hover,
	.bloc_hover:not(.nocontent):focus {
		/*background-color: rgba(0, 123, 255, 0.1);
		outline: 2px solid #007BFF;*/ 
	}
	/* Icône par défaut, cachée si le span est vide */
	.bloc_hover::after {
		content: "";
		font-size: 1.5rem;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		font-weight: bold;
	}
	
	/* Accordéon fermé par défaut */
	.bloc_hover span {
		display: block;
		max-height: 0;
		overflow: hidden;
		opacity: 1;
		transition: max-height 0.1s ease, opacity 0.1s ease; 
		
	}
	
	/* Lorsque l'élément est actif, il s'ouvre */
	.bloc_hover.active span {
		max-height: 500px; /* Ajuste selon la taille du contenu */
		opacity: 1; 		
		transition: max-height 0.5s ease, opacity 0.5s ease; display:contents;
		
	}
	
	.bloc_hover.clickhover::after {
		content: "✕"; 
		margin-left: 5px;
		position:absolute; top:10px; right:10px;
		
	 
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	.bloc_hover.active::after {
		content: "✕"; 
	
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	
	/* Empêcher le curseur pointer sur les éléments sans contenu */
	.bloc_hover.nocontent { cursor: default; }
	.bloc_hover.nocontent::after {content: none !important; /* Empêche l'affichage de l'icône */ 	}

/************************************************************/
/********************* GRID SYSTEM *************************/
/********** https://vladocar.github.io/60gs/ **************/	
/*********************************************************/
	.grid { display:grid; grid-template-columns: repeat(60, 1fr); }
	.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 */	
	
/***************************************/
/************** MARQUEE ***************/
/**** Bandeau defilant all pages******/
/************************************/
	.marquee { overflow:hidden; display:flex; display:none }
	.marquee div.crawl { white-space: nowrap;}

	#bandeau { position:relative; width:100%; width: calc(100% - 0px); z-index:50; background:#000; color:#fff; font-size:0.8em; line-height:7em; letter-spacing:0.5rem; padding:5px 0 10px }
	#bandeau div.crawl { white-space: nowrap;font-size:2.5em; padding-right:25px;  }

/*********************************/
/******* CTA LINKS EFFECT *******/
/*******************************/
	.view-more, a.view-more {     
		position: relative; 
		text-decoration:none;
		color:#7f0069 !important;
		width:90%;
		overflow: hidden;
		border:3px solid #7f0069;
		display:block;
		padding:5px 15px 5px 15px; 
		margin:10px 0; 
		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;  font-size: 1.4rem;
    	line-height:auto;
		
	}
	
	.view-more span.content { margin: 0 20px 0 10px; position:relative}
	.view-more::before { 
		content:""; width:140%; height:110%; background:#7f0069; position:absolute; top:0; left:-150%; 
		
		-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: 40px;
		height: 100%;
		display: block;
		float: right;
		margin:0; 
		color:#7f0069; 
		position:absolute; 
		top:0; right:5px; 
	}
	
	.view-more span.icon.arrow { background:url(images/arrow-right.svg) no-repeat ;  background-size:contain; background-position:center }
	.view-more span.icon.shop { background:url(images/shop-black.svg) no-repeat ;  background-size:contain; background-position:center }
	.view-more span.icon.contact { background:url(images/mail-black.svg) no-repeat ;  background-size:contain; background-position:center }
	
	/***********************/
	/**** Link hover ******/
	/*********************/
	.view-more:hover, a.view-more:hover  { color:#fff!important; mix-blend-mode:multiply!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; background-position:center }
	.view-more:hover span.icon.shop { background:url(images/shop-white.svg) no-repeat ; background-size:contain; background-position:center }
	.view-more:hover span.icon.contact { background:url(images/mail-white.svg) no-repeat ; background-size:contain; background-position:center }
	
	/**** Article hover link ******/
	article:hover .view-more { color:#fff; mix-blend-mode:multiply !important; } 
	article:hover .view-more a { color:#fff !important ;  mix-blend-mode: multiply !important; }
	article:hover .view-more::before { left:-10%; }
	
	article:hover .view-more span.arrow { background:url(images/arrow-right-white.svg) no-repeat;   background-size:contain; background-position:center }
	article:hover .view-more span.icon.shop { background:url(images/shop-white.svg) no-repeat ;  background-size:contain; background-position:center}
	article:hover .view-more span.icon.contact { background:url(images/mail-white.svg) no-repeat ;  background-size:contain; background-position:center }
	
	/*********************/
	/*** link Negatif ***/
	/*******************/
	.view-more.neg { color:#fff !important; border: 3px solid #fff; mix-blend-mode:unset !important;}
	.view-more.neg::before { background:#fff;}
		
	.view-more.neg span.icon.arrow { background:url(images/arrow-right-white.svg) no-repeat ;    background-size:contain; background-position:center  }
	.view-more.neg span.icon.shop { background:url(images/shop-white.svg) no-repeat ;    background-size:contain; background-position:center }
	.view-more.neg span.icon.contact { background:url(images/mail-white.svg) no-repeat ;    background-size:contain; background-position:center}		

	.view-more.neg:hover span.icon.arrow { background:url(images/arrow-right-black.svg) no-repeat ;    background-size:contain; background-position:center  }
	.view-more.neg:hover span.icon.shop { background:url(images/shop-black.svg) no-repeat ;   background-size:contain; background-position:center }
	.view-more.neg:hover span.icon.contact { background:url(images/mail-black.svg) no-repeat ;    background-size:contain; background-position:center }	
	
	/**** 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;background-position:center }
	.view-more:hover span.icon.shop { background:url(images/shop-white.svg) no-repeat ;  background-size:contain;background-position:center  }
	.view-more:hover span.icon.contact { background:url(images/mail-white.svg) no-repeat ;  background-size:contain;background-position:center  }
	
	/**** 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; background-position:center }
	article:hover .view-more.neg:hover span.icon.shop { background:url(images/shop-white.svg) no-repeat ;   background-size:contain; background-position:center }
	article:hover .view-more.neg:hover span.icon.contact { background:url(images/mail-white.svg) no-repeat ;   background-size:contain; background-position:center }
	
/*** GLOBAL STYLE - DEFAUT ***/
/*** GLOBAL STYLE - DEFAUT ***/
/*** GLOBAL STYLE - DEFAUT ***/
	.mobile { display:none !important}
	.screen { display:block }
	
	#global_wrapper { opacity:0; }
	#global_wrapper section {  position:relative;z-index:2 ; background: url(images/snow.png) repeat; }
	
	#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 h2 {   }
	#global_wrapper article h2  {  }
	
	/************************************/
	/****** BACKGROUND IMAGE INTRO *****/
	/**********************************/
	.background_img_container {
		position:fixed; top:0;
		height:100vh; min-height: 100vh; width:100vw; margin:0 auto;
		background-size: cover;
		background-position: center;
		 mix-blend-mode: screen; /* Place l'image derrière le contenu *//* Applique l'effet de fusion   */
		opacity:1;
		-webkit-border-radius: 0 0 20px 20px; border-radius: 0 0 20px 20px; overflow:hidden;
	}
	
/******************************************************************/
/********** HOME (inspire Template Name: home fullpage ) *********/
/****************************************************************/
	#home .section {  }
	#home .section .container { padding:1% 3%; max-width:1800px;}
    #home .section:not(:last-of-type)::after { content: ""; display: block;width: 99%; height:2px; background: #144237; margin: 0 auto; }
	#home .section#main_intro::after { display:none }

/*********************************/
/********************************/
/******* SECTION INTRO *********/
/******** Section 1 ***********/
/*****************************/

	/*** MAIN INTRO HOME - PAGES TEMPLATES & SERVICES TEMPLATES ***/
	#main_intro { display:flex; height:92vh; min-height:92vh; width:98vw; margin:0 auto; background:#000 !important ;z-index: auto !important;
	-webkit-border-radius: 0 0 20px 20px;border-radius: 0 0 20px 20px; overflow:hidden;}
	
	/*** LOGO INTRO HOME ***/
	#home #main_intro #logo_intro { position: absolute; top: 20vh; right:20vw; padding:1em;  text-align:left; z-index:2; width:90%; max-width:550px}
	#home #main_intro #logo_intro a {  text-indent:0; text-decoration:none; width:100%; display:block; }
    #home #main_intro #baseline { position:absolute; bottom:10vh; left:5vw }
	
/********************************/
/*********** SECTIONS **********/
/******************************/
	
	/****************************************/
	/** CAROUSEL HOME - ARTICLES SERVICES **/
	#home #sectioncarousel  { padding-bottom:40px; }
	#home #sectioncarousel .carousel-highlight,
	#home #sectioncarousel .carousel-highlight-2  { top:unset !important; /*  background:yellow; */  padding:3vh 0 0 0!important ;  }
	#home #sectioncarousel .flickity-slider { padding:2vh 0 0 0;	}
    #home #sectioncarousel:after { display:none}
	#home #sectioncarousel article { height:50vh; margin:0 3% 0 0; padding:0 500px 0 0;	position: relative; padding-left:2vw}
	#home #sectioncarousel article:first-child { padding-left:2vw } 
	#home #sectioncarousel article a { height: 100%; width: auto; display:block; padding:0; margin:0; text-decoration:none !important   }
	#home #sectioncarousel article a h2 { font-family:'Crimson', Arial, Helvetica, Verdana}
	#home #sectioncarousel article .description_container {
		position: absolute;
		height: 100%;
		width: 500px;
		margin: 0;
		top: 0;
		right: 0;
		z-index: 1;
		justify-content: space-between;
	}
	#home #sectioncarousel article .description_container .description { display:block; padding:0 5%; max-width:470px  }
	#home #sectioncarousel article .content { height:80%; width:100%; display:content ; position:relative; overflow:visible }
	#home #sectioncarousel article .content .mask { height:100%; width:100%; border-radius:10px; display:content; overflow:hidden }
	#home #sectioncarousel article .content img { width:auto; height: 100%; display:block /* Pour que l'image respecte la hauteur */}
	#home #sectioncarousel article .content::before { content:""; display:block; height:100%; width:100%; border:2px solid #022414; position:absolute; left:-15px; bottom:10px; border-radius:10px; }
	#home #sectioncarousel article .view-more { width:40px;     padding: 5px 5px; }
	#home #sectioncarousel article .view-more .icon {  z-index: 5; position: relative;width:40px;height:40px; right:0;}
	#home #sectioncarousel article .illu { position:absolute; right:0; bottom:7vh; width:200px}
	
	/** CARROUSEL ABOUT - PHOTOS **/
	#pages_template #sectioncarousel-other { padding-bottom:80px;  }
	#pages_template #sectioncarousel-other .title-style-3 {    padding: 0 40px; margin-bottom: 40px;}
	
	#pages_template #sectioncarousel-other .carousel-highlight,
	#pages_template #sectioncarousel-other .carousel-highlight-2  { top:unset !important; /*  background:yellow; */  padding:2vh 0 0 0!important ;  }
	#pages_template #sectioncarousel-other .flickity-slider { padding:2vh 0 0 0;	}
    
	#pages_template #sectioncarousel-other article { height:50vh; margin:0 2% 0 0; padding:0 0 0 0;	position: relative;}
	#pages_template #sectioncarousel-other article:first-child { padding-left:2vw} 
	#pages_template #sectioncarousel-other article a { height: 100%; width: auto; display:block; padding:0; margin:0;   }
	#pages_template #sectioncarousel-other article .description_container {
		position: absolute;
		height: 100%;
		width: 500px;
		margin: 0;
		top: 0;
		right: 0;
		z-index: 1;
		justify-content: space-between;
	}
	
	#pages_template #sectioncarousel-other article .content { height:80%; width:100%; display:content ; position:relative; overflow:visible }
	#pages_template #sectioncarousel-other article .content .custom-image {
		width: auto;
		height: 100%;
		display: flex;             /* ✅ utilisation de flexbox */
		flex-direction: column;    /* ✅ pile img + description */
		justify-content: flex-end; /* ✅ colle la description en bas */
		overflow: hidden;          /* ✅ masque ce qui dépasse */
		border-radius: 3px;
		
		position: relative;
	}
	
	#pages_template #sectioncarousel-other article .content .custom-image img {
		width: auto;
		height: 100%;
		flex-shrink: 0; /* ✅ l’image garde sa taille */
		display: block;
	}
	
	#pages_template #sectioncarousel-other article .content .custom-image .img-description {
		width: 100%;
		background:#022414; position:absolute; bottom:-100%;
		padding: 10px; color:#fff;
		box-sizing: border-box;
		white-space: normal;
		word-wrap: break-word;
		
		-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;
	}
	#pages_template #sectioncarousel-other article .content .custom-image:hover .img-description { bottom:0  }
	
	
	/**********************/
	/******* VIDEOS ******/
	/********************/
	.video-container iframe { pointer-events: none; /* désactive l’interaction par défaut */}
	.video-container.active iframe {  pointer-events: auto; /* activé quand on clique */}
	.video-overlay {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  cursor: pointer;
	  z-index: 2; /* au-dessus de l’iframe */
	}
	.video-container.active .video-overlay {
	  display: none; /* masque l’overlay une fois activé */
	}

		
/********************************************/
/************* EVENT & REVIEWS **************/
/******************************************/	
	#event-review { }
	#event-review::after {
		content: "";
		display: block;
		width: 99%;
		height: 2px;
		background: #144237;
		margin: 30px auto 0;
	}
	#event-review .container {padding:1% 0% 2% 2%; }
	#event-review .col-30 { padding:1% 5% 2% 5%; }
	#event-review .col-30:first-child { border-right:2px solid; padding:1% 5% 2% 0;}
	#event-review article {  width:80%;  margin:0; padding:0; position: relative; padding-left:0; margin:2% 5%;}
 	#event-review article .description_container { height: 100%; width:100%;margin: 0; position:relative }
	#event-review article .description_container .description { display:block; padding:0 5%; max-width:90%; text-align:center  }
	#event-review article .description_container .date { margin-top:40px}
	#event-review article .description_container .date .title-style-1 { text-align:center; color: #000; width:100%; max-width:100%; padding: 15px 0; display: inline; color:#7f0069 }

	#event-review article .description_container .date .sep {
    display: inline-block;
    width: 20px;
    height: 20px; margin: 0 5px; 
    background: url(images/arrow-right.svg) no-repeat center center;
    background-size: cover;
    text-indent: -9999px;
    overflow: hidden;
	}
	#event-review article .description_container .date .title-style-1::before { background-color:#000; margin:0 auto 10px ;display:none}
	#event-review article .description_container .date .title-style-1::after { display:none}  
	#event-review article .description_container .date::before, 
	#event-review article .description_container .date::after { background-color:#7f0069; height:3px; margin:5px auto 5px ; content:""; display:block; height:2px; width:150px; }
	#event-review article .content { width:100%; display:content ; position:relative; overflow:visible }
	#event-review article .content img { width:auto; height: 100%; display:block /* Pour que l'image respecte la hauteur */}

	
/***************************/
/************ FAQ *********/
/*************************/
	#faq { margin:0 auto; padding:30px  }
	#faq .container { max-width:1500px; margin:0 auto; padding:5% 0}
	#faq h2.title-style-3 { text-align:center; width:20%; margin:0 auto 40px }
	#faq h2.title-style-3:after { margin:0 auto ; width:100%;}
	#faq h1 { margin-bottom:30px; text-align:center }
	#faq h4 {  text-align:center }
	#faq span p { padding-top:15px; text-align:center; margin:0 auto; width:80% ; max-width:1200px }
	#faq .bloc_hover::last-child {border-bottom:none !important}
	#faq .view-more { max-width:700px; margin:0 auto; float:none; padding:5px}
	
/*********************************/
/********* SECTION ABOUT ********/
/*******************************/
	#apropos { }
	#apropos .col.quote { padding: 0 0%;}
	#apropos .contenu { max-width:90%;  padding: 0 0%;  }
	#apropos .col { background:none; min-height:auto; margin:10px  0; padding:0; gap: 0.5em; } 
	#apropos .col-30 { /* Évite tout débordement dû au padding */ padding:0 5em 0 0;}
	#apropos h2 { padding:0; }
  	#apropos h3 { max-width:80%; }
	
/******************************************************/
/******** CONTACT LINK - ADDRESS PHONE MAIL  *********/
	#contact a.link { position:relative; display:block; font-size:1.4em; line-height:1.5em; margin-bottom:12px; padding:2px 10px 10px 50px; }
    #contact a.link span.icon { display:block; width:40px; height:40px ; position: absolute; left: 0;  top: 0;} 
	#contact a.link span.mail { background: url(images/mail-black.svg) no-repeat; background-size: contain; }
    #contact a.link span.phone { background: url(images/mobile-black.svg) no-repeat; background-size: contain; }
	#contact a.link span.adress { background: url(images/place-black.svg) no-repeat; background-size: contain; }

/****************************************************************/
/*************************** PAGES *****************************/
/**************************************************************/

/********************************************************************************************/
/************************************ CATEGORY *********************************************/
/******************************************************************************************/

/******************************************************/
/************ ARROW FULLPAGE top & bottom ************/
/****************************************************/
	#category #prev_next-slide { display:block; } 
	#category.services #prev_next-slide { display:none; }
	
	#prev_next-slide {  height:100%; width:35px;  position:fixed; top:0; left:0.5vw; z-index:50000; overflow:visible; background:none  }
	#movedown a { width:35px; height:45vh; position: absolute; right:0; bottom:5vh; top:unset;  margin:0 auto; display:block;  background:url(images/arrow-long-bottom-black.svg) no-repeat ; background-size:130%;background-position:center bottom;  opacity:1;  }
	#moveup a { width:35px;  height:45vh;position:absolute; right:0; top:5vh; margin:0 auto; display:block; background:url(images/arrow-long-top-black.svg) no-repeat ; background-size: 130%;background-position:center top;  text-indent:-9999px;  opacity:1; }
	
/******************************************************************/
/******************** CATEGORY PARENTE A *************************/
/**************** SLIDE HORIZONTAL ROYAL SLIDER *****************/
/***************************************************************/
/**************************************************************/

/****************************************/	
/** MOBILE STYLE FOR CATEGORY PAGES **/
	#category section.mobile { padding:0; overflow:hidden; background:yellow}
	#category section.mobile article {  width:92vw; height:90vh;  margin-top:4vh; margin-left:3vw; background:red; display:inline-table }
	#category section.mobile article .description_container { padding:5%; padding-bottom:150px;}
	
/******************************************************************/
/******************** CATEGORY PARENTE A *************************/
/**************** SLIDE HORIZONTAL ROYAL SLIDER *****************/
/****************** SAME UNDER MOBILE & SCREEN *****************/
/**************************************************************/
	#category section#horizontal.screen { display:block !important; background:pink !important }
	#category section#horizontal.screen .royalSlider {width: calc(100% - 0px);}
	#category section#horizontal.screen article { display: flex; /* Flexbox pour aligner l'image et la description côte à côte */height: 100vh; }
	#category #horizontal.screen article a { display: contents;/* Permet aux enfants de l'élément <a> de se comporter comme des éléments séparés */}
	#category #horizontal.screen article .visuel {
	   height: 100%; 
	   width: auto; /* Garde l'image proportionnelle */
	   min-width:65vw;
	   display: flex;
	   justify-content: center; /* Centrer horizontalement */
	   align-items: center; /* Centrer verticalement */
	   flex-shrink: 0; /* Empêche l'image de se réduire */ 
	   border-right:4px solid #000; 
	}
	
	#category #horizontal.screen article .visuel img {
	   height: 80vh; /* Image prend 70vh */
	   width: auto; /* Image prend 70vw */
	   object-fit: cover; /* Garantit que l'image couvre la zone sans déformation */
	   display: block; /* Pour que l'image occupe l'espace correctement */
	}
	
	#category #horizontal.screen article .description_container {
	   padding:10vh 3% 2vh 2%; background:orange;
	   flex-grow: 1;  /* La description occupe l'espace restant a droite après l'image */
	}
	
/******************************************************************/
/******************** CATEGORY PARENTE B *************************/
/****************** SLIDER VERTICAL FULLPAGE ********************/
/***********ROYAL SLIDER HORIZONTAL UNDER MOBILE ***************/
/**************************************************************/
	#category section#vertical.screen { padding:0; overflow:hidden;  background:orange  }
	#category section#vertical.screen article {  width:94vw; height:90vh; margin-top:0vh ; margin-left:5vh; background:pink }
	#category section#vertical.screen article a { max-width:100%; margin:0 auto; display:contents; }
	#category section#vertical.screen article .description_container { display:flex; grid-column-end:span 30; padding:5%; height:100vh;  box-sizing:border-box; }
	#category section#vertical.screen article .visuel {
		grid-column-end: span 30; /* Garde l'alignement dans la grille */
		height: 90vh;
		width: 100%; /* Ajustement pour ne pas casser le layout */
		background-size: cover; /* Assure le backstretch */
		background-position: center;
		background-repeat: no-repeat;
		display: flex; /* Permet de contenir d'autres éléments si nécessaire */
	}
	
	/* Cibler chaque élément impair (1er, 3ème, 5ème, etc.) */
	#category section#vertical.screen:nth-child(odd) article  { direction: ltr; /* Définit la direction de gauche à droite */}
	/* Cibler chaque élément pair (2ème, 4ème, 6ème, etc.) */
	#category section#vertical.screen:nth-child(even) article { direction: rtl; /* Définit la direction de droite à gauche */  text-align:right }
	#category section#vertical.screen:nth-child(even) article .view-more { float: right;}
	
/***********************/
/***** SINGLE *********/
/*********************/
	#single { width:100%;min-height: 100vh; padding:0}
	#single #content_container { background: yellow; width: 98%; margin:1vh auto;  /* centrage horizontal + marges verticales */}
	#single #visuel {  display:flex; height:98vh; position:sticky; top:1vh; grid-column-end:span 30;}
	#single #content { grid-column-end:span 30; padding:5%; }
	
/********************************/
/******** 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}
	
/***************************************************************/
/******** Pages template + Articles : Category Services *******/
/*************************************************************/
	#pages_template {}
	#pages_template section {  }
	#pages_template .col { background:none }
	
	#pages_template.private-concert #intro .grid { direction: rtl;  }
	#pages_template.private-concert #intro .title-style-4{ padding:0  }
	#pages_template.private-concert #intro .grid #visuel { padding: 0 0 0 5%;}
	
	#pages_template #main_intro #head {
		  position: absolute;
		  bottom: 10vh;
		  right: 5vw;
		  padding: 1em;
		  z-index: 0;
		  width: 86%;
		  text-align: right;
	}
	#pages_template #main_intro #head h1 {color: #fff; margin: 0; margin-bottom:-10px ; margin-right: -40px/* Ajout utile pour éviter les décalages */}
	
	#pages_template #intro {   }
	#pages_template #intro::after {
		content: "";
		display: block;
		width: 99%;
		height: 2px;
		background: #144237;
		margin: 30px auto 0;
	}
	#pages_template #intro .grid { width:92%; max-width:1800px; margin:0 auto; }
	
	#pages_template #intro .grid #visuel { padding:0 5% 0 0; margin-top:-8vh; }
	#pages_template #intro .grid #visuel #portrait .mask { position:relative; }
	#pages_template #intro .grid #visuel #portrait .mask img {-webkit-border-radius: 15px; border-radius: 15px; }
	#pages_template #intro .grid #visuel #portrait .mask::after {
		content: "";
		display: block;
		height: 100%;
		width: 100%;
		border: 2px solid #022414;
		position: absolute;
		left: -15px;
		bottom: 10px;-webkit-border-radius: 15px;
		border-radius: 15px; 
	}
	
	#pages_template #intro .grid #description { padding:5% 5% 5% 2% ; max-width:96%; direction:ltr }
	#pages_template.julia-szproch #intro .grid #description { padding:4% 5% 5% 5% ; margin-top:-40px;  max-width:96%; direction:ltr;  -webkit-border-radius: 15px; border-radius: 15px; 
	background: url(images/snow.png) repeat; }
	#pages_template #grille { position:relative;} 
	#pages_template section#grille.first {  position:relative;  border-bottom:2px solid #144237; width:99%;margin: 0 auto }

	#pages_template #grille .col {  margin:15px 0;   }
	#pages_template #grille .col .padding { padding:5%;}
	#pages_template #grille .col:first-child { border-right:2px solid #144237; height:94%;  } 
	#pages_template #grille .col:first-child:before { display:none !important}
	#pages_template #grille .col .description_container { text-align:center}
	
	#pages_template #grille .col .description_container .tarifs::before {
		content: "";
		display: block;
		width: 80%; max-width:300px;
		height: 2px;
		background: #144237;
		margin: 20px auto;
	}
	#pages_template #grille .view-more { max-width:500px; margin:20px auto}
	#pages_template .col.col-20 {
    display: flex;
    flex-direction: column;
	}
	
	#pages_template .col.col-20 .links {
		margin-top: auto; /* pousse le bloc des liens en bas */
	}
	
	/** Si un seul element **/
	#pages_template #grille .col:only-child  {  grid-column-end: span 60; width:99%;  margin: 0 auto; border-right: none; }
	#pages_template #grille .col:only-child  .padding { padding:4% 2%; }
	#pages_template #grille .col:only-child  .title-style-3 { text-align:center; }
    #pages_template #grille .col:only-child  .title-style-3::after { width: 250px; margin:0 auto }
	#pages_template #grille .col:only-child  p { max-width:1200px; margin:0 auto}
	#pages_template #grille .col:only-child  .description_container .tarifs::before { display:none }
	#pages_template #grille .col:only-child before {     
		content: "";
		display: block;
		width: 98%;
		height: 2px;
		background: #144237;
		margin: 0 auto;
	} 
	
	
	/** Si 3 eme element**/
	#pages_template #grille .col:nth-child(3n) {  grid-column-end: span 60; border-top:2px solid #144237; width:99%;  margin: 0 auto }
	#pages_template #grille .col:nth-child(3n) .padding { padding:4% 2%; }
	#pages_template #grille .col:nth-child(3n) .title-style-3 { text-align:center; }
    #pages_template #grille .col:nth-child(3n) .title-style-3::after { width: 250px; margin:0 auto }
	#pages_template #grille .col:nth-child(3n) p { max-width:1200px; margin:0 auto}
	#pages_template #grille .col:nth-child(3n) .description_container .tarifs::before { display:none }
	#pages_template #grille .col:nth-child(3n)before {     
		content: "";
		display: block;
		width: 98%;
		height: 2px;
		background: #144237;
		margin: 0 auto;
	} 

/******************************/
/******** PAGE ABOUT ***********/
/****************************/
	body.page-template-template_about .julia-szproch .section .container {
		padding: 1% 3%;
		max-width: 1800px;
	}
	
	body.page-template-template_about .view-more, body.page-template-template_about a.view-more { width: 40%; display:inline-block; margin-right:15px;}
    body.page-template-template_about #intro .grid #portrait { padding:0  0 0 5%; margin-top:-8vh; }
	body.page-template-template_about #intro .grid #portrait .mask { position:relative; }
	body.page-template-template_about #intro .grid #portrait .mask img { -webkit-border-radius:15px; border-radius:15px; }
	body.page-template-template_about #intro .grid #portrait .mask::after {
		content: "";
		display: block;
		height: 100%;
		width: 100%;
		border: 2px solid #022414;
		position: absolute;
		left: -15px;
		bottom: 10px;-webkit-border-radius: 15px;
		border-radius: 15px; 
	}
	
	/****************************************/
	/** CAROUSEL HOME - ARTICLES SERVICES **/
	body.page-template-template_about #sectioncarousel  { padding-bottom:40px; }
	body.page-template-template_about #sectioncarousel .carousel-highlight,
	body.page-template-template_about #sectioncarousel .carousel-highlight-2  { top:unset !important; /*  background:yellow; */  padding:3vh 0 0 0!important ;  }
	body.page-template-template_about #sectioncarousel .flickity-slider { padding:2vh 0 0 0;	}
    body.page-template-template_about #sectioncarousel:after { display:none}
	body.page-template-template_about #sectioncarousel article { height:50vh; margin:0 3% 0 0; padding:0 500px 0 0;	position: relative; padding-left:2vw}
	body.page-template-template_about #sectioncarousel article:first-child { padding-left:2vw } 
	body.page-template-template_about #sectioncarousel article a { height: 100%; width: auto; display:block; padding:0; margin:0; text-decoration:none !important   }
	body.page-template-template_about #sectioncarousel article a h2 { font-family:'Crimson', Arial, Helvetica, Verdana}
	body.page-template-template_about #sectioncarousel article .description_container {
		position: absolute;
		height: 100%;
		width: 500px;
		margin: 0;
		top: 0;
		right: 0;
		z-index: 1;
		justify-content: space-between;
	}
	body.page-template-template_about #sectioncarousel article .description_container .description { display:block; padding:0 5%; max-width:470px  }
	body.page-template-template_about #sectioncarousel article .content { height:80%; width:100%; display:content ; position:relative; overflow:visible }
	body.page-template-template_about #sectioncarousel article .content .mask { height:100%; width:100%; border-radius:10px; display:content; overflow:hidden }
	body.page-template-template_about #sectioncarousel article .content img { width:auto; height: 100%; display:block /* Pour que l'image respecte la hauteur */}
	body.page-template-template_about #sectioncarousel article .content::before { content:""; display:block; height:100%; width:100%; border:2px solid #022414; position:absolute; left:-15px; bottom:10px; border-radius:10px; }
	body.page-template-template_about #sectioncarousel article .view-more { width:40px; padding: 5px 5px ; }
	body.page-template-template_about #sectioncarousel article .view-more .icon {  z-index: 5; position: relative; width:40px;height:40px; right: 0;}
	body.page-template-template_about #sectioncarousel article .illu { position:absolute; right:0; bottom:7vh; width:200px}
	
	
/**************************************************/
/******** PAGE PARCOUR / CV / BIOGRAPHY **********/
/************************************************/
	
    
	#parcours { }
	#parcours .grid { padding:0 3% 3% 3%;  }
	#parcours .title-style-2 {padding:5% 3% 0 3%;  margin:0 0 30px;}
    
    #parcours .col-40 { padding:0 5% 0 0; border-right:3px solid #022414 }
	#parcours .year { border-top:none; border-bottom:2px solid #022414;  }
	#parcours .year:first-child {  border-top:2px solid #022414; border-bottom:2px solid #022414; margin:20px 0 0 }
	
	#parcours .col-20 { padding:0 0 0 5%; position: sticky; top: 2rem; /* distance par rapport au haut de l’écran */align-self: flex-start; /* utile si tu es dans un grid/flex */  }
 	#parcours article { border-bottom:2px solid #022414; position:relative; padding:3% 0 5%; }
	#parcours article h1 { margin-bottom:20px; }
	#parcours article .date {
		position: absolute;
		top: 50px;
		right: 0;             /* au lieu de right:0 → on passe le bloc à gauche */
		display: flex;       /* alignement horizontal */
		align-items: center; /* centrage vertical */
		gap: 0.7rem;         /* petit espace entre les éléments */
		color: #8E1F7B;
	}

	#parcours article .date .title-style-1 {
		color: #022414;
		padding: 0;
		line-height: 1em; /* plus lisible */
		margin: 0;
	}

	#parcours article .date .sep {
		display: inline-block;       /* indispensable pour appliquer width/height */
		width: 30px;
		height: 30px;
		background: url(images/arrow-right.svg) no-repeat center center;
		background-size: cover;      /* l’image occupe toute la surface */
		   /* juste pour tester si ça marche, à retirer après */
	
		text-indent: -9999px;        /* cache le texte "to" */
		overflow: hidden;            /* évite que le texte déborde */
	}
	#parcours article .date .title-style-1 { color: #8E1F7B; padding:0; line-height: 0.8em;  } 
	#parcours article .date .title-style-1::after { display:none}
	#parcours article .date .title-style-1::before { display:none}
	
	
	
	
/******************************/
/******** ARCHIVES ***********/
/****************************/
	#archives { }
	
/******************************/
/******** SEARCH RESULT ***********/
/****************************/
	#search { }

/*******************************/
/*************** 404 **********/
/*****************************/
	body.error404 #global_wrapper section { }
	body.search #global_wrapper section { }

/******************************/
/******** FOOOOTER ***********/
/****************************/
	footer {
	  background: #022414;
	  position: relative;
	  z-index: 1;
	  width: 100%;
	  padding: 30px 0 ;
	  height: auto;
	  color: #fff;     display: flex
;
	}
	
	footer .footer-left { display: flex; align-items:center; gap:20px; margin-left:50px; float:left}
	footer a.link {display: flex;align-items: center;color: #fff; text-decoration: none;gap:10px; font-size: clamp(1.3rem, 1.5vw, 2.5rem); line-height: normal;}
	footer .separator {width: 2px; height: 40px;background: #fff;}
	
	footer #social_networks {display: flex;gap: 10px;}
	footer #social_networks a {display: block;width: 40px;height: 40px;text-indent: -9999px;padding: 0;}
	
	footer #social_networks a.fb { background: url(images/facebook.svg) center center / 90% no-repeat; }
	footer #social_networks a.insta { background: url(images/insta-white.svg) center center / 90% no-repeat; }
	footer #social_networks a.youtube { background: url(images/youtube.svg) center center / 90% no-repeat; }
	
	footer #tks { padding:0 1% 0 0; margin-top:-8px ;  width:40%; float:right; text-align:right  ; font-family: 'futurabook', Arial, Helvetica, Verdana; }
	footer #tks p { color:#fff;  }
	
/********************************************************************************/
/********************************************************************************/
/*******************************  MEDIA QUERIES  ********************************/
/********************************************************************************/
/********************************************************************************/

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

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

    /*****************************************/
    /************* Under 1250px *************/
    /***************************************/
    @media screen and (max-width:1250px) {  
    	#parcours article .date {position:unset; margin:5px 0;}
		#parcours article .date .title-style-1 { font-size:1.5em }
  		#parcours article .date .sep { width: 20px;height: 20px; }
		
		footer #tks {
			padding: 0  0 0 5%;
			margin-top:10px;
			width:90%;
			float:left;
			text-align:left;
		
		}
		
	}
    
	/****************************************/
    /**************** 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) { 
        #global_wrapper section, #global_wrapper article { grid-column-end: span 60; }
		
		.screen { display:none !important}
		.mobile { display:block !important}
				
		#category.categorie_parente_a  #prev_next-slide { display:none !important}
		
		/*** !!!! Section reset mobile !!!! ****/
		.section { position:relative; height:auto !important ;  }
		.section .content .fp-tableCell { height:auto !important }
		
		
		header #logo-container a {max-width:40vw; }
			
		#home #main_intro #logo_intro {
			top: 5vh;
			right: 0; 
			width: 90%;
			max-width:400px;
		}
		
		
		
		
		
		/*** FOOTER ***/
		footer {padding: 10px 0;}
		
		footer .footer-left {
			        display: contents;
			align-items: center;
			gap: 10px;
			margin-left: 10px;
		}
		footer a.link {
			display: block;
			padding: 10px; text-align:center
			
		}
		footer .separator {
			display:none
		}
		footer #social_networks {
			display: flex;
			/* gap: 10px; */
			top: 15px;
			position: absolute;
			right: 10px;
		}
		footer #social_networks {
       		 justify-content: center;
    	}
	}
    /************* UNDER 600px *************/
	@media screen and (max-width: 600px) { 
		
		.view-more, a.view-more { max-width:100% !important; font-size:0.9rem; line-height:2.5rem;}
		
   		
		
		/******************************************************/		
		/********** PREV NEXT FLICKITY EXTERNAL ARROW ********/	
			.prevnext {width: 95%; position:unset; margin-left:2% }
   			.prevnext button.prev { background-size: 300%; background-position: 0%; }
			.prevnext button.next {   background-size: 300%;background-position: 100%;}
   
   
		.flickity-prev-next-button {width:28px!important; height:28px!important;}
		.flickity-prev-next-button {border: 2px solid #7f0069 !important;}
    
    	#portrait .mask::before { left:-5px!important; bottom:5px!important;}
  
    	.bloc_hover.clickhover::after {top:0;}
 
     	/**************************/
		/***** 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;}
 		
		/************************************************************/
		/********************* GRID SYSTEM *************************/
		/********** https://vladocar.github.io/60gs/ **************/	
		/*********************************************************/
		.grid { display:grid; grid-template-columns: repeat(60, 1fr); }
		.col-60 { grid-column-end: span 60 } /* 1 column */
		.col-40 { grid-column-end: span 60 } /* 2 columns */
		.col-30 { grid-column-end: span 60 } /* 2 columns */
		.col-20 { grid-column-end: span 60 } /* 3 columns */
		.col-15 { grid-column-end: span 60 } /* 4 columns */
		.col-12 { grid-column-end: span 60 } /* 5 columns */
		.col-10 { grid-column-end: span 60 } /* 6 columns */
		
		.title-style-2 { padding:0 10px; margin-bottom:10px; gap:0.5em;}
		.title-style-3 { padding:0 10px 0 0!important; }
		.title-style-4 { margin-bottom:20px; padding:0}

		header #logo-container {max-width:100%;top:0 !important; background:#022414 !important;}
		header #logo-container a {max-width:60vw; margin:5px; }

		header #social_networks { display:none }
		
		#menumobile.style-b { width:23px; height:22px;right:5px; top:0 }
		#menumobile span { background: #fff;}
   		
   		header #lang { display:none; }
			
		#home #main_intro #logo_intro {top: 5vh;right:0; width:90%; max-width:90%; }
		#home #main_intro #baseline {
			position: absolute;
			bottom: 12vh;
			left: 5vw;
		}
		
		#main_intro #baseline .title-style-1 { max-width: 90%; font-size: 1.5em;}
		div.navbar { bottom:0px;}
		
		#home #sectioncarousel {padding-bottom: 0px;}
		#home #sectioncarousel article .description_container .description {display: block;padding: 2%  0;max-width: 470px;}
		#home #sectioncarousel article {height: auto; width: 100%;	margin: 3% ;	padding:3%;	position: relative;	padding-left: 5% !important; width: 90%; }
		#home #sectioncarousel:not(:last-of-type)::after  { display:none}
		#home #sectioncarousel article .content::before {left: -10px; bottom: 5px;}
   		#home  .flickity-enabled.is-draggable .flickity-viewport {cursor: move; cursor: -webkit-grab;cursor: grab;padding-bottom: 50px;}
		#home #sectioncarousel article .content img {	width: 100%; }
		#home #sectioncarousel article .description_container {position: unset; height: 100%;width: 90%;margin: 0;}
		#home #sectioncarousel article .content {height: 80%;width: 90%;}
		#home #sectioncarousel article .illu {
    position: absolute;
    right: 1vh;
    bottom: 2vh;
    width:130px; 
}
		
		#pages_template.julia-szproch #intro .grid #description { padding: 7% 5% 5% 5%;}
   
			
		body.page-template-template_about  #sectioncarousel {padding-bottom: 0px;}
		body.page-template-template_about  #sectioncarousel article .description_container .description {display: block;padding: 2%  0;max-width: 470px;}
		body.page-template-template_about  #sectioncarousel article {height: auto; width: 100%;	margin: 3% ;	padding:3%;	position: relative;	padding-left: 5% !important; width: 90%; }
		body.page-template-template_about  #sectioncarousel:not(:last-of-type)::after  { display:none}
		body.page-template-template_about  #sectioncarousel article .content::before {left: -10px; bottom: 5px;}
   		body.page-template-template_about   .flickity-enabled.is-draggable .flickity-viewport {cursor: move; cursor: -webkit-grab;cursor: grab;padding-bottom: 50px;}
		body.page-template-template_about  #sectioncarousel article .content img {	width: 100%; }
		body.page-template-template_about  #sectioncarousel article .description_container {position: unset; height: 100%;width: 90%;margin: 0;}
		body.page-template-template_about  #sectioncarousel article .content {height: 80%;width: 90%;display: unset;}
				
		
		#pages_template #sectioncarousel-other .carousel-highlight, 
		#pages_template #sectioncarousel-other .carousel-highlight-2  { padding-bottom:70px !important  }
			
		#pages_template #sectioncarousel-other .carousel-highlight article, 
		#pages_template #sectioncarousel-other .carousel-highlight-2 article { width:100%; height:unset;   }
			
		#pages_template #sectioncarousel-other .carousel-highlight article img { width:90%; margin-left:5%; height:auto} 
		#pages_template #sectioncarousel-other .carousel-highlight-2 article iframe { width:90%;margin-left:5%;} 
		
		
		#faq { margin: 0 auto;padding: 2%; }
			
			
		
		#faq h4 {text-align: center;max-width: 90%;}
			
			
		
		
		.bloc_hover { max-width: 90% !important; margin: 0 auto 1em; }
    
   
    	#event-review .col-30 { border-right: none!important;     padding: 1% 2% 2% 2% !important; border-bottom:2px solid #022414 }
 		#event-review::after { display:none !important} 
  
		#apropos h3 { max-width: 90%;   }
		#apropos .col-30 {padding: 0 1em 0 0;}
    
		/**************/
		#pages_template #main_intro #head {top: 10vh;right: 3vw;width: 90%; }
		#pages_template #main_intro #head h1 { margin-right: 0 /* Ajout utile pour éviter les décalages */;}
   		#pages_template #intro .grid #visuel { padding: 0 2% 0 0;}

   
		#pages_template #grille .col:first-child {border-bottom: 2px solid #144237; border-right:none }

		body.page-template-template_about .view-more, body.page-template-template_about a.view-more { width: 90%; margin-right: 0;}
   		body.page-template-template_about #intro .grid #portrait { padding: 0 0 0 5%; margin-top: 0;}
    
	
		#parcours .col-40 {padding: 0 2% 0 0;border-right: none;}
    	#parcours .title-style-2 {padding:5% 3% 0 3%;  margin:50px 0 30px;}
		
   		/****** FOOTER ******/
		footer #social_networks {position:unset;}
		footer #tks {
        padding: 2% 5%;
        margin-top: 10px;
        width: 90%;
        float: left; text-align:center !important;
        text-align: left;
    }

			
			
		
		
	}