/*
Theme Name: Angel Barrero
Theme URI: http://angelbarrero.be/
Author: Ton Nom
Author URI: https://example.com
Description: Description du thème
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: mon-theme
*/
@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 ********/
/**********************/
	* { }
    html, body { padding:0; margin:0; color:#000; letter-spacing:0.05rem; font-family:'Raleway', Arial, Helvetica, Verdana;  }
	body { background:#fff }
	h1  { font-size:2em; line-height:1.4em;    }
    h2  { font-size:1.7em;    }
    h3  { font-size:1.4em; font-size: 1.7em;      }
    h4  { font-size:1em;   } 
    h5  { font-size:0.7em; } 
	
    p { margin:0; font-size: 1rem; line-height:1.5rem; margin-bottom: 1rem;}
	a { text-decoration:underline; color:#000; }
    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:5px 0 15px 0; border-style:none; border-width:0; height: 1px ; background:#000;  }
	.clearer { clear:both; display:table; width:100%; }
   
   	.wp-block-image > a, .wp-block-image > figure > a { display: block !important; }

/**********************************************/ 
/*********** Scroll bar design ***************/ 
/***** Pour les navigateurs basés sur Webkit (Chrome, Safari, Edge) *****/
	::-webkit-scrollbar { width: 6px; height: 6px;}
	::-webkit-scrollbar-track { background: #f1f1f1;}
	::-webkit-scrollbar-thumb { background: #888;}
	::-webkit-scrollbar-thumb:hover {  background: #555;}
	/* Pour Firefox */
	html { scrollbar-width: thin;    scrollbar-color: #000 #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:fixed !important; width:100%;display:block; top:0;   padding:0; z-index:4; }
	

/**********************/		
/****** HEADER *******/
/********************/	
	header nav {}
	header nav#menu { display: flex; float: right; margin-top:10px/* Inverser l'ordre des éléments */}
	header nav#menu .menu-nav-container { float:left; display:none; }
	header nav#menu .menu-nav-container ul {  }
	header nav#menu .menu-nav-container ul li { float:left; display:block; }
	header nav#menu .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:#fff; color:#000 !important }
	header nav#menu li.current-menu-item a { background:#fff; color:#000 !important }
	
	header nav#menu li.current-post-parent { background:#fff; color:#000 !important }
	header nav#menu li.current-post-parent a { background:#fff; color:#000 !important }
	
	header nav#menu li a:hover { background:#fff; color:#000 }

	/********************/		
	/***** 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:#000}
    #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; }
	
/*******************************/	
/************ LOGO ************/
/*****************************/	
	header #logo-container { position:fixed; display:block; top:5px ; opacity:1; left:10px;  font-size:3em; font-family:'', Arial, Helvetica, Verdana; letter-spacing:0.8rem;
	text-indent:-9999px;  background:url(images/favicon.png); background-size:cover; width:55px; height:55px;
	-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; }
	
	body.home header #logo-container { position:fixed; top:-100px; opacity:0; right:10px;  font-size:3em; font-family:'', Arial, Helvetica, Verdana; letter-spacing:0.8rem; 
	-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; }
	
	header #logo-container a { text-decoration:none; display:block; height:60px; }
	
	body.home header.sticky #logo-container { top:5px; opacity:1; 
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out; 
	}

/*****************************/
/********* MM MENU **********/
/***************************/
/************* Menu mobile icon animation / transformation **************/
    #mm-blocker { z-index:15 !important; }
	#menumobile {   
        width:35px;
        height:25px; 
        padding:5px 10px; 
        position:fixed; 
        right:5px;  
        top: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:#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 ***************/
/*****************************************/
	
	/* Wrapper MM menu */
	#wrapper { top:0; left:0; height:100%; width:100%; min-height:100% !important; 
		-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;
	}

/**************************/
/******** FULLPAGE *******/
/************************/
	html.mm-blocking, html.mm-blocking body { overflow: hidden !important;}
	#prev_next-slide {  height:90px; position:fixed; bottom:2%; left:1%; z-index:50000; overflow:visible;  }
	#movedown a {width:40px; height:50px; margin:0 auto; display:block; background:url(images/arrow-bottom.png) no-repeat; background-size:95%; text-indent:-9999px; position:relative; opacity:1; }
	#moveup a {width:40px; height:50px; margin:0 auto; display:block; background:url(images/arrow-top.png) no-repeat; background-size:95%; text-indent:-9999px; position:relative; opacity:1; }
	
	#prev_next-slide #movedown  { border-top:2px solid transparent;}
	.section.active:not(:first-child):not(:last-child) ~ #prev_next-slide #movedown {  border-top: 2px solid #000;}
	
	.section.active:first-child ~ #prev_next-slide #moveup { visibility:hidden;}
	.section.active:nth-last-child(2) ~ #prev_next-slide #movedown { visibility:hidden;  }

/*******************************************/
/********** FLICKITY SLIDER ***************/
/*****************************************/
	
	/********************************************************/
	/******** INTERNAL PREV NEXT CARROUSEL (default)********/
	/******************************************************/
	.flickity-viewport { transition:height 0.2s; margin-bottom:1%; position:relative  }
	.flickity-prev-next-button {position:absolute; bottom:0; right:0; display:block; border-radius: 0 !important ; display:none}
    .flickity-prev-next-button .flickity-button-icon { display:none}
    .flickity-prev-next-button.next { background:url(images/arrow-right.png) no-repeat; background-size:90%;background-position:center; border:none; width:50px; height:50px; right:10px}
    .flickity-prev-next-button.previous {  background:url(images/arrow-left.png) no-repeat; background-size:90%;background-position: center; border:none; width:50px; height:50px; right:65px}
       
    .no-scroll-lg .flickity-prev-next-button.previous { display:none !important}
    .no-scroll-lg .flickity-prev-next-button.next { display:none !important}

	/******************************************************/		
	/********** PREV NEXT FLICKITY EXTERNAL ARROW ********/	
	/****************************************************/
	.navbar {
		height: 30px; width:98%; max-width:120px; 
		display:flex;
		align-items: center;
		position: absolute;
		right: 15px ;  bottom:25px;
		z-index: 1; padding:1%; 
	}	
	
	.prevnext { height:100%; width:100%;  display: flex;  align-items: center; padding:7px 3px; background-color:#fff ; -webkit-border-radius: 40px; border-radius: 40px; }
    .prevnext button { 
		border: none;  
		text-indent: -9999px;
		height:100%; width:50%; 
		margin:5px;  float:right; 
		background-repeat: no-repeat;
		cursor: pointer; 
		background-color:transparent; 
	}
	
	.prevnext button.prev { background-image: url(images/arrow-long-left-black.svg); background-size:25vw; background-position: 0%; }
	.prevnext button.next { background-image: url(images/arrow-long-right-black.svg); background-size:25vw;background-position: 100%;}	


	/***********************************************/
	/******** EXTERNAL PREV NEXT CARROUSEL ********/
	/*********************************************/
	.carousel-nav {
		position: absolute;
		bottom: 0.5%;
		right: 0.5%;
		display: flex;
		z-index: 10;
	}
	.carousel-nav button {
		width: 55px;
		height: 55px;
		border: none;
		background: rgba(0, 0, 0, 0.5);
		color: white;
		font-size: 24px;
		line-height: 44px;
		text-align: center;
		cursor: pointer;
		transition: background 0.3s;
		text-indent: -9999px;
	}
	.carousel-nav button.prev {
		background: url(images/arrow-left.png) no-repeat;
		background-size: 90%;
		background-position: center;
	}
	.carousel-nav button.next {
		background: url(images/arrow-right.png) no-repeat;
		background-size: 90%;
		background-position: center;
	}
	
	#hightlight:not(.first-slide):not(.last-slide) .carousel-nav button.next {  border-left: 2px solid #000; }
   	#hightlight.first-slide .carousel-nav .prev { visibility:hidden;}
	#hightlight.last-slide .carousel-nav .next { visibility:hidden;}
	
	.slide:not(.first-slide):not(.last-slide) .carousel-nav button.next {  border-left: 2px solid #000; }
	.slide.first-slide .carousel-nav .prev{ visibility:hidden;}
	.slide.last-slide .carousel-nav .next{ visibility:hidden;}
	
/*****************************************/
/************** PAGINATION ***************/
/*****************************************/
	#pagination { width:100%; background: #fff; border-left:none; border-right:none; position:relative; z-index:10;  }
	#pagination .prev { text-align:center; grid-column-end:span 30; border-right: 1px solid #000;  }
	#pagination .next { text-align:center;  grid-column-end: span 30;border-left: 1px solid #000;    }
	#pagination .prev a, #pagination  .next a { display:block; padding:10px 0; text-decoration: none; font-weight:bold  }
	#pagination .prev:hover a, #pagination .next:hover a { background:#000; color:#fff} 
	
	#pagination .prev a:after, #pagination .next a:after { content:''; display:block; height:35px; width:25px; position: absolute; top:0;     }
	#pagination .prev a:after {background:url(images/arrow-left.png) no-repeat ; background-size:contain; background-position: left;  left:2%  }
	#pagination .next a:after {background:url(images/arrow-right.png) no-repeat ; background-size:contain; background-position:right;  right:2%  }
	
	#pagination .prev:hover a:after {background:url(images/arrow-left-white.png) no-repeat ;  background-size:contain; background-position: left;  left:2%  }
	#pagination .next:hover a:after {background:url(images/arrow-right-white.png) no-repeat ;  background-size:contain; background-position:right;  right:2%  }

/*******************************************************/
/******************** CAT SELECTOR ********************/
/*****************************************************/
	.bar {
		margin-bottom: 20px;
		position: fixed;
		top:20px; left:75px;width:50%;display:block;
		z-index: 600000;
	}
	
	.button {
		background:none; font-weight:bold; text-transform:uppercase;
		border: none;
		padding: 10px 2%;  display:block; float:left;
		cursor: pointer;
	   
	}
	
	.button.is-checked {
		border-bottom:2px solid #000 /* Couleur du bouton sélectionné */
	}
	
/************************************************************/
/********************* 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 */		
	
/*******************************/
/********** Loader ************/
/*****************************/
	.loader {
		position: fixed;
		left: 0px;
		top: 0px; margin:0; padding:0;
		width: 100%;
		height: 100%;
		z-index: 999999999;
		background: url('images/loading-neg.gif') 50% 50% no-repeat rgb(0,0,0);
		background-size:30px; overflow:hidden !important; 
	}	

/*** GLOBAL STYLE - DEFAUT ***/
/*** GLOBAL STYLE - DEFAUT ***/
/*** GLOBAL STYLE - DEFAUT ***/
	.mobile {display:none}
	.screen {display:block}
	
	#global_wrapper section { background:#fff }

	#global_wrapper article { margin:0.2rem 0.2rem 0 0.2rem; padding:2%; }
	#global_wrapper article .content { overflow:hidden; position:relative  }
	#global_wrapper article a { margin-bottom:10px; padding-bottom:10px; text-decoration:none; }
	#global_wrapper h3 { padding:0.2rem 1rem 0rem 1.2rem;}
	#global_wrapper article h2, #global_wrapper article h3,  #global_wrapper article h4  { padding: 0 0 0.2rem 0; }
	#global_wrapper article p { font-size: 1.2rem;  line-height: 1.7rem; }

	#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 { margin-bottom: 0.5rem; border-bottom: 1px solid #fff;  border-top: 1px solid #fff; }
	#global_wrapper article h2  { margin-left:0!important }
	
	
	/*********************************/
	/******* CTA LINKS EFFECT *******/
	/*******************************/
	.view-more {     
		position: relative;
		float:left;
		overflow: hidden;
		border: 2px solid #000;
		text-align: center;
		display: block;
		margin:0.5rem 0.5rem 0 0;
		max-width: 300px;
		padding:1.2% 4%;
		position: relative; font-weight:bold;line-height: 1.5em;
	}
	.view-more span.bgmove { width:140%; height:110%; background:#000; position:absolute; top:0; left:-150%; z-index:0; 
		-moz-transform: skewX(-25deg);
		-webkit-transform: skewX(-25deg);
		-o-transform: skewX(-25deg);
		-ms-transform: skewX(-25deg);
		transform: skewX(-25deg);
			
		-webkit-transition: all 1s ease;
		-moz-transition: all 1s ease;
		-ms-transition: all 1s ease;
		-o-transition: all 1s ease;
		transition: all 1s ease;
	   }
	.view-more span.centered { display:inline-block; margin:0 auto; position:relative; /* font-family:Verdana, Geneva, sans-serif */ }
	.view-more span.arrow { 
		background:url(images/arrow-right.png) no-repeat ;  background-size:contain; 
		width: 25px;
		height: 20px;
		display: block;
		float: right;
		margin: 1px 0 0 30px
	}
	
	a.view-more:hover { color:#fff !important   } 
	a.view-more:hover  span.arrow { background:url(images/arrow-right-white.png) no-repeat ;  background-size:contain; }
	a.view-more:hover span.bgmove { left:-10%}
		
	/************************************/
	/************ BACKSTRECH ***********/
	/**********************************/
	.background_img_container {
		position: fixed;
		top: 0;
		height: 100vh;
		min-height: 100vh;
		width: 100vw;
		margin: 0 auto;
		background-size: cover;
		background-position: center;
		opacity: 1;
		-webkit-border-radius: 0 0 20px 20px;
		border-radius: 0 0 20px 20px;
		overflow: hidden;
	}
	
	/*******************************/
	/********* ACCORDEON **********/
	/*****************************/
	.bloc_hover {
		position: relative;
		cursor: pointer;
		transition: background 0.3s ease-in-out;
		outline: none; padding: 0.2em 2.5em 2em 1em ; margin-bottom:2em;
    	border-bottom: 1px solid grey;
	}
	
	/* 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: 0;
		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;  right:10px;
		font-size: 1.9rem; /* Ajuste la taille du caractère ici */
	 
		-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 */ 	}
	
	/******************************************/
	/********** BANDE TITRE SECTION **********/
	/****************************************/
	#bande {
		position:absolute;
		background: #fff;      /* bande toujours visible */
		top: 0;
		left: 0; 
		height: 100vh;        /* prend toute la hauteur */
		width: 75px;           /* largeur de la bande */
		display: flex;
		flex-direction: column;
		align-items: center;   /* centre horizontalement le contenu */
		justify-content: center; /* centre verticalement le contenu */
		z-index: 2; border-right:2px solid #000;
	}
	
	#bande h1 {
		writing-mode: vertical-rl; 
		text-orientation: mixed; 
		transform: rotate(180deg); /* inverse le sens */
		margin: 0;                /* supprime les marges inutiles */
		font-size: 2.7em; 
		font-family: 'raleway Medium', Arial, Helvetica, Verdana; 
		text-transform: uppercase;
	}

/*************************/
/********** HOME *********/
/*************************/
#home .section { position:relative; overflow:hidden  ;  }

/***************************************/
/***** FIRST SECTION + INTRO HOME *****/
/*************************************/
	#section_intro { display: flex;  height: 100vh; /* Prend toute la hauteur de la fenêtre */ }
	#section_intro #logo_intro { position: absolute; left: 5%;bottom: 5%; z-index: 2;}
	#section_intro #logo_intro a { font-family:'aktivgrotesk-bold', Arial, Helvetica, Verdana; font-size:18vh; line-height:16vh; position:relative; display: grid; text-decoration:none; }
	#section_intro #logo_intro a span.gallery  { font-family:'raleway SemiBold', Arial, Helvetica, Verdana; font-size:4vh;position:absolute;left:73%; top:14%;   text-transform:uppercase}
	#section_intro #logo_intro a span.baseline { font-family:'raleway SemiBold', Arial, Helvetica, Verdana;font-size:3.2vh; line-height: 4vh; margin-left:15px}

/*********************************/	
/***** SECTION HIGHTLIGHT *******/
/*******************************/	
	#hightlight { width:100%; height:100%; 	}
	#hightlight .carousel { padding-left:80px; margin-top:5vh;}
	#hightlight .flickity-viewport { overflow:visible; /** important **/}
	#hightlight article {position: relative;   	margin-right: 1vw;}
	#hightlight article h4.cat { display:inline-block; border-right:2px solid #000; padding:5px 10px; margin-bottom:10px; font-weight:bold }
	#hightlight article h4.cat:first-of-type { padding:5px 10px 5px 0}
	#hightlight article h4.cat:last-of-type { border-right:none}
	
	/* Ligne entre chaque article */
	#hightlight article::after {
		content: '';
		position: absolute;
		top: 2.5vh; /* depuis le haut de #hightlight */
		right: -0.5vw; /* juste entre les articles */
		width: 2px;
		height: 86vh; /* ou 100% si #hightlight a la bonne hauteur */
		background:#000;
	}
	
	/* Option : on enlève la ligne sur le dernier article */
	#hightlight article:last-child::after {display: none;}
	#hightlight article a { display: block; position: relative; max-height: 60vh; }
	#hightlight article .content img { display: block; max-height: 60vh;width: auto;height: auto;}
	#hightlight article .description_container {
		position: absolute;
		top: calc(100% - 0px);   /* clé : part du bas de l'image */
		left:0;
		width: 100%;
		box-sizing: border-box;
		padding-top: 0.5rem;     /* espace si tu veux */
		background: rgba(255,255,255,1);
	}

	#hightlight .allworks { position:absolute; bottom:5px; right:120px; display:none }

/*********************************/
/********* SECTION ABOUT ********/
/*******************************/
	#section_about { min-height:100vh; padding-top:0 !important;  }
	#section_about .description { grid-column-end: span 30; padding:3% 2% 3% 100px; }
	#section_about .description .Titre { margin-bottom:20px}
	#section_about .description p {     margin-top: 0; font-size: 1.2rem;line-height: 1.6rem; margin-bottom: 1rem;}
    
	#section_about #portrait { position:relative; z-index:0; grid-column-end: span 30; margin-left:2vw;   height:100vh;  position:relative ;  }
	#section_about #portrait .mask {
		height: 100vh;
		width: 100%;
		overflow: hidden;
		position: relative;
	}
	#section_about #portrait .mask img {
		position: absolute;
		top: 50%;
		left: 50%;
		height: 100%;
		width: 100%;
		object-fit: cover; /* Assure que l'image remplit le conteneur */
		transform: translate(-50%, -50%);
		display: block;
	}
	
/***********************************/
/*********** SINGLE ***************/
/*********************************/
	body.single #social_networks { top: 5px; }
	#single #global_wrapper {  position:relative;}
	#single #content_container .slide { position:relative; position:sticky; top:0}
	#single #content_container .slide { background: url(images/bg-img.jpg); }
	#single #content_container .slide .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 #content_container .description_container .description { padding:5%; padding-top:80px;}
	#single #content_container .description_container .description.titre { text-transform:uppercase}
	#single #content_container .description_container .description .titre, 
	#single #content_container .description_container .description #pagination { margin-bottom: 20px; text-align: left; max-width:60%; min-width: 320px;}
#single .carousel-nav {    right: -120px;}

/**********************************/
/***** CAROUSEL HIGHTLIGHT 2 *****/
/********************************/
	#single .carousel-2  { width:100%; height: 100vh; position:relative }
	#single .carousel-2 .flickity-viewport { height: 100vh ;}
	#single .carousel-2 .carousel-cell { width: 100%; height: 100vh; }
	#single .carousel-2 .visuel {
		width: 100%;
		height: 100vh;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}

/********************************/
/*********** PAGES *************/
/******************************/
	
	/************************/
	/****** ALL WORKS ******/
	/**********************/
	#page_all_works { width:99%; margin:5% auto  }
	.mm-opened #page_all_works { margin:0 auto}
	
	#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; display: block; overflow:hidden; }
	#page_all_works article.articles .description_container {  width:96%; margin:0;  background:#fff; padding:3% 2% 0 2%;}
	
	#page_all_works article.articles .description_container h1 { font-size:1em; font-weight:bold; text-transform:uppercase;margin-bottom:3px }
	#page_all_works article.articles .description_container h4 { display:none}
	#page_all_works article.articles .description_container .excerpt p { font-size:0.8em; line-height:1.2rem }
	
	/***********************/
	/****** CATEGORY ******/
	/*********************/
	#category #global_wrapper { position:relative; margin-top:0 !important  }
	#category #global_wrapper section#content  { position:relative; max-width:100%; margin:0 auto;  }
	#category .cat { padding:2%; border:1px solid #fff; border-right:none; border-left:none}
	
	/***********************************/
	/***** PAGES (No template) ********/
	/*********************************/
	#pages #global_wrapper { position:relative;   }
	#pages #global_wrapper section#content  { position:relative;max-width:100%; padding:2%; margin:0 auto;  }
	#pages #global_wrapper > section a { text-decoration:underline}
	.wp-block-columns {
		flex-wrap: nowrap !important;
		max-width: 1600px;
		margin: 0 auto;
	}

/******************************/
/******** ARCHIVES ***********/
/****************************/
	#archives {}
	
/******************************/
/******** SEARCH RESULT ***********/
/****************************/
	#search { }

/*****************************/
/*************** 404 *******/
/*****************************/
	body.error404 {}
	body.error404 #global_wrapper section { max-width:90%; margin:0 auto; margin-top:5%}
	body.search #global_wrapper section { max-width:90%; margin:0 auto; margin-top:5%}
	body.search #global_wrapper section .searchfield { grid-column-end: span 60;}

/******************************/
/******** FOOOOTER ***********/
/****************************/
	footer { position: fixed; bottom:-100px;z-index: 5; width: 100%; height: fit-content; }
	footer .container { position:relative;  }
	footer .container .credit { font-size: 0.8em; float: right; margin: 12px;}

/*******************************/
/****** SOCIAL NETWORKS *******/
/*****************************/
	#social_networks { margin:0; display:block; position:fixed; right:65px;  top:-15%; z-index:5; 
	-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;	 
	} 
 	#social_networks.active { top:5px; }
	
	#social_networks a { width: 40px; height:40px; line-height:3rem; margin:0; display: block; float: left; text-indent:-99999px; padding:5px ; border-right:2px solid #000; }
    #social_networks a:last-child {}

    #social_networks a.mail { background:url(images/mail.svg) center 80% /80% no-repeat;}
	#social_networks a.phone { background:url(images/phone.svg) center 90% /90% no-repeat;}
	#social_networks a.facebook { background:url(images/facebook.svg) center 90% /90% no-repeat; }
    #social_networks a.instagram { background:url(images/instagram.svg) center 80% /80% no-repeat;}


	/** social network intro **/
	#section_intro #social_networks { position:fixed; right:unset; top:-50%; left:10px ;}
	#section_intro #social_networks a:last-child { border:none}
	#section_intro.active #social_networks { top:5px; }
	#section_intro #social_networks a { width:unset; height:unset; line-height:3rem; background:none; margin:0; display: block; float: left; text-indent:0; padding:5px 10px ; font-weight:bold }

	
/********************************************************************************/
/********************************************************************************/
/*******************************  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) {  }
    
	/****************************************/
    /**************** 1040PX ****************/
    /****************************************/
    
	/************************************/
	/******* !!! OVER 1040px!!!  ********/
	/************************************/
    @media screen and (min-width:1040px) { 
		/*** !!! Masque le MM menu si resize sup à 1040px !!! ***/
		html.mm-blocking, html.mm-blocking body { overflow:hidden !important; }
    }
	
	/****************************************/
    /************* UNDER 1040px *************/
    /****************************************/
    @media screen and (max-width:1040px) {  }
    
	/************* UNDER 900px *************/
    @media screen and (max-width:900px) { 
        .mobile { display:block}
		.screen { display:none}
		#global_wrapper .grid, #global_wrapper .col { grid-column-end: span 60 !important;  }
		
		.mm-listview a { font-size: 1rem; line-height: 1.5rem !important;}
		
		#global_wrapper section { grid-column-end: span 60; }
		#global_wrapper article { grid-column-end: span 60; }
		
		/* Section reset */
		.section { position:relative; height:auto !important ;  }
		.section .content .fp-tableCell { height:auto !important }
		    
		/***********************/
		/***** SINGLE *********/
		/*********************/
		#single #content_container .visuel_container { position:relative; position:unset; top:0; }
		#single #content_container .carousel-2 .visuel { width: 100%; height:auto; }
		#single #content_container .carousel-2 { height:auto;  }
		#single #content_container .carousel-nav {
			position: unset; 
			bottom: 0.5%;
			right: 0.5%;
			display: flex;
			z-index: 10;
		}
		#single #content_container .description_container .description { padding-top: 10vh; padding-bottom: 10vh;}
		#single #content_container .description_container .description #pagination { 
			margin-bottom:0; 
			max-width: 100%;
			position: fixed; left:0;
			bottom: 0; 
			border: 2px solid #000;
			border-left: none;
		}
			
	
	}
    /************* UNDER 600px *************/
	@media screen and (max-width: 600px) { 
		
		header { background: #fff;height: 55px;border-bottom: 2px solid #000;}
		header #logo-container {     width: 45px;    height: 45px; top:4px; left:5px; }
		#social_networks a { width: 35px; height: 35px;}
 		#menumobile { top:9px;}
   

		
		/*************************************/
		/********** BANDE VERTICALE *********/
		/***********************************/
		#bande {
			position: unset;
			height: auto;
    		width: 100vw;
			display:block;
			flex-direction:unset;
			align-items: center;
			justify-content: center;
			z-index: 2;
			border-right:none; border-top:2px solid #000; border-bottom:2px solid #000
		}
		#bande h1 {
			writing-mode: unset;
			text-orientation: unset;
			transform: none;
			margin: 0; padding:2% 0;
			font-size: 2em; text-align:center
			
		}

		/*************************/
		/********** HOME *********/
		/*************************/
		/***** FIRST SECTION + INTRO ALL PAGES *****/
		#section_intro #logo_intro { position: absolute; left: 5%;bottom: 5%; z-index: 2;}
		#section_intro #logo_intro a {     font-family: 'aktivgrotesk-bold', Arial, Helvetica, Verdana; font-size: 8vh; line-height: 8vh; position: relative;  display: grid; text-decoration: none;}
    	#section_intro #logo_intro a span.gallery  { font-family:'raleway SemiBold', Arial, Helvetica, Verdana; font-size:3vh;position:absolute;left:70%; top:10%;   text-transform:uppercase}
		#section_intro #logo_intro a span.baseline { font-family:'raleway SemiBold', Arial, Helvetica, Verdana;font-size:3vh; line-height: 4vh; margin-left:5px}
		
		#section_intro.active #social_networks {  top: -100%; }
		#social_networks { top: 5px; }
    	body.home header #logo-container { opacity:1; top: 5px; }

		/*********************************/	
		/***** SECTION HIGHTLIGHT *******/
		/*******************************/	
		#hightlight  { width:100%; margin:0 auto; z-index:2;  min-height:unset!important ; height:unset!important  } 
		#hightlight .carousel { padding-left:0; padding-top:0;}
      
		#hightlight article { height:min-content; width:95%; }
		#hightlight article::after {top:0; right:0; height:100%; }
   		
		#hightlight article a { grid-template-columns: unset !important; max-width:85%; margin:0 auto; max-height: inherit }
		#hightlight article a .content {overflow:visible; position: relative; width: 100%; }
		#hightlight article a .content img { width: 100%;  height: auto; }
  		#hightlight article a .description_container { position:unset; }

		/*************************/
		/**** Section ABOUT *****/
		/***********************/
		#section_about #portrait { grid-column-end: span 60; height: unset !important; margin-left:0 }
		#section_about #portrait .mask {height: 58vh;width: 100%; position: relative;}
		#section_about .description { grid-column-end:span 60;  padding:15% 7% 10% 7%; }
		
		
		/************************/
		/****** ALL WORKS ******/
		/**********************/
		#page_all_works { padding-top:25%;}
		#page_all_works article.articles {margin: 0;   width: 90% !important; margin-left:2%}
		#page_all_works .bar { display:none}
	
	}