/*
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:'Instrument Sans', Arial, Helvetica, Verdana;  }
	body { background:#fff }
	h1  { font-size:2em; line-height:1.4em;  font-family:'Bookerly Display', Arial, Helvetica, Verdana; text-transform:uppercase }
    h2  { font-size:2em; line-height:1.7em;   font-family:'Bookerly Display', Arial, Helvetica, Verdana; }
    h3  { font-size:1.4em; font-size: 1.7em;      }
    h4  { font-size:1em;   } 
    h5  { font-size:0.7em; } 
	
    p { margin:0; font-size: 1.4rem;line-height: 1.8rem; margin-bottom: 1rem;margin-top: 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; }

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
	
	

/**********************************************/ 
/*********** 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:0 ; opacity:1;  font-size:3em; font-family:'', Arial, Helvetica, Verdana; letter-spacing:0.8rem;
	text-indent:-9999px;  background:url(images/logo-big.png); background-size:cover; width:70px; height:70px;
	-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; display:none   }
	
	body.home header #logo-container {  position:fixed; top:-100px; opacity:0;  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:0; 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; }
	.mm-menu.mm-theme-black { background:#06281A !important }
	
	#menumobile.style-a {   
		padding:17px 20px;
		font-family:'Bookerly Display', Arial, Helvetica, Verdana; 
		text-decoration: none; font-size:20px; color:#000;
		z-index: 3; /* Pour s'assurer qu'il est bien visible */
		overflow: hidden;
		position: fixed;
		left:0; 
		top:0;  
		text-indent:0;
	}
	html.mm-opened #menumobile.style-a {
		right:5px; left:unset
	}
		#menumobile.style-a::after {
		content: "Menu";
	}
	
	html.mm-opened #menumobile.style-a::after {
		content: "Fermer";
	}
	.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; display:none  }
	#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; 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: 0 ;  bottom:30px;
		z-index: 1; padding:5px  
	}	
	
	
	.prevnext { height:100%; width:100%;  display: flex; align-items: center; }
    .prevnext button { 
		border: none;  
		text-indent: -9999px;
		height:50px; width:50px; 
	 	float:right; 
		background-repeat: no-repeat;
		cursor: pointer;  padding:10px;
		background-color:transparent; border:3px solid #06281A ; background-color:rgba(255,255, 255, 0.7);  -webkit-border-radius: 60px; border-radius: 60px;
	}
	.prevnext button:hover {background-color:rgba(255,255, 255, 1); }
	
	.prevnext button.prev { background-image: url(images/arrow-left.svg); background-size:80%; background-position: center; margin-right: 2px;}
	.prevnext button.next { background-image: url(images/arrow-right.svg); background-size:80%;background-position: center;}	
	
	.prev.active, .next.active { opacity: 1;  pointer-events: auto;  }
	.prev.inactive, .next.inactive {opacity: 0; pointer-events: none; }

	
	
/*****************************************/
/************** 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 {  }
	#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 {  height:auto; display:block }
	
	#global_wrapper > section a, #global_wrapper > article a { color:#000;  }
	
	#global_wrapper > section h2 { margin-bottom: 0.5rem;   }
	#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 ***********/
	/**********************************/
	
	/*******************************/
	/********* 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 */ 	}
	
	
	
/*************************/
/********** HOME *********/
/*************************/
#home .section { position:relative; overflow:hidden  ;  }

/*************************************/
/***** FIRST SECTION INTRO HOME *****/
/***********************************/
	#section_intro {  /* Prend toute la hauteur de la fenêtre */ }
	#section_intro .content { position:relative; z-index:1 }
	
	/** LOGO **/
	.logo_link {display: flex;flex-direction: column; align-items: center;  text-decoration: none;	}
    
	.logo {
		width: 130px;
		height: 130px;
		background: url(images/logo-big.png) center center / contain no-repeat;
		display: block;
		position: relative;
		z-index: 2;
	}
	
	.nom_logo {
		width: 300px;
		height: 80px;

		background: url(images/logo-text-big.png) center center / contain no-repeat;
	}
	
	.logo_row {
		position: relative;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.logo_row::before,
	.logo_row::after {
		content: "";
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		height: 2px;
		background: black;
		width: calc(48% - 80px);
	}
	
	.logo_row::before {left: 2%;}
	.logo_row::after {right: 2%;}
		
	#section_intro .content { text-align:center; }
	#section_intro .content .accroche {  max-width:1100px;margin:40px auto 80px}
	#section_intro .content .accroche h2 { padding:25px 0 0 0; text-transform:uppercase ;  max-width:980px;  margin:0 auto;     font-size: 2.4em;
    line-height: 1.5em;}
	#section_intro .content .accroche p { font-size:1.7em; line-height:1.5em ;  max-width:900px;   margin:0 auto; font-family:'Instrument Sans medium'}
	#section_intro .content hr { max-width:400px; margin:20px auto}
	
	/********************************/
	/** Section background textur **/
	/*****************************/
	#section_intro .background_img_container {
		position: fixed;
		top: 0;
		width: 100vw; height:100vh;
		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;
		opacity:0.8; z-index:0; 
	}
	
	#section_intro  .background_img_section {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background-repeat:no-repeat;
		background-size: cover;
		background-position: center; mix-blend-mode: multiply; opacity:0.4
	}
	
/***********************************/
/********* SECTION 2 ABOUT ********/
/*********************************/
	#section_about {padding-top:0 !important; background-color:#06281A !important  }
	
	/**********************************/
	/** Section background textur **/
	/*****************************/
	#section_about .background_img_container { position:absolute; top:0; left:0; height: 100%; width: 100%;inset: 0; /* remplace top/left/width/height */ }
	#section_about  .background_img_section {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background-repeat:no-repeat;
		background-size: cover;
		background-position: center; mix-blend-mode: multiply; opacity:0.4
	}
	
	
	#section_about .container {  position: relative; min-height:80vh;  }
	#section_about .container:after { content:'';  width:98%; height:93%; left:1%; top:3%; position:absolute; border:3px solid #fff}
	#section_about .description { grid-column-end: span 30; padding:8% 8% 0 10%; color:#fff }
	#section_about .description h2 { margin-bottom:25px; color:#fff }

	#section_about .description p { margin-top: 0; color:#fff}
    
	#section_about #portrait,
	#section_about #portrait .flickity-viewport,
	#section_about #portrait .flickity-slider {
		height: 100%;
	}
	
	#section_about #portrait {
    position: relative;
    grid-column-end: span 30;
    margin: 5vh;
    height: 700px;
    overflow: hidden; z-index:5
	}
	#section_about #portrait article {   height: 100%;  width: 100%;}
	#section_about #portrait article img {  width: 100%; height: 100%;  object-fit: cover;}
	#section_about #portrait::after {
		content: '';
		position: absolute;
		z-index:0;
		top: 15px;
		left: 15px;
		right: 15px;
		bottom: 15px;
	
		border: 3px solid #06281A;
		pointer-events: none; /* important pour ne pas bloquer le carousel */
	}
	
/*******************************************/	
/********* SECTION 3 GALLERIE *************/
/*****************************************/	
	#section-gallerie { position:relative; padding:15px;    }
	
	/**********************************/
	/** Section background textur **/
	/*****************************/
	#section-gallerie .background_img_container { position:absolute; top:0; left:0; height: 100%; width: 100%;inset: 0; /* remplace top/left/width/height */ }
	#section-gallerie .background_img_section {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background-repeat:no-repeat;
		background-size: cover;
		background-position: center;
	}
	
	
	#section-gallerie .container {  position: relative; background: rgba(255,255,255,0.9);  padding:25px; -webkit-border-radius:10px;border-radius: 10px;}
		
    #section-gallerie h2 { padding:20px 0 0 0; margin-bottom: 20px;  text-align:center; position:relative; z-index:5;     font-size: 2.8em;
    line-height: 2.1em;}
	  #section-gallerie h2:after { content:''; width:50%; height:1px; margin-bottom:20px; background:#000; margin:0 auto; display:block;}
	#section-gallerie .container p { margin:0 auto; text-align:center; max-width:940px; margin-top:20px; margin-bottom:45px;     font-family: 'Instrument Sans medium'; }
	#section-gallerie .carousel-highlight { top:unset !important; /*  background:yellow; */  max-width:98vw;  }
	#section-gallerie .flickity-slider { 	}
    
	#section-gallerie article { height:50vh; margin:0 2% 0 0; padding:0 0 0 0;	position: relative;}
	#section-gallerie article:first-child { } 
	#section-gallerie article a { height: 100%; width: auto; display:block; padding:0; margin:0;   }
	#section-gallerie article .description_container {
		position: absolute;
		height: 100%;
		width: 500px;
		margin: 0;
		top: 0;
		right: 0;
		z-index: 1;
		justify-content: space-between;
	}
	
	#section-gallerie article .content { height:80%; width:100%; display:contents ; position:relative; overflow:visible }
	#section-gallerie 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;
	}
	
	#section-gallerie article .content .custom-image img {
		width: auto;
		height: 100%;
		flex-shrink: 0; /* ✅ l’image garde sa taille */
		display: block;
	}
	
	 #section-gallerie 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;
	}
	#section-gallerie article .content .custom-image:hover .img-description { bottom:0  }


	
/***********************************/
/********* SECTION 4 DEVIS ********/
/*********************************/
	#section_devis { background:#06281A;  }
	
	/**********************************/
	/** Section background textur **/
	/*****************************/
	#section_devis .background_img_container { position:absolute; top:0; left:0; height: 100%; width: 100%;inset: 0; /* remplace top/left/width/height */ }
	#section_devis  .background_img_section {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background-repeat:no-repeat;
		background-size: cover;
		background-position: center; mix-blend-mode: multiply; opacity:0.4
	}
	
	#section_devis .container:after {
		content: '';
		width: 96%;
		height: 85%;
		left: 2%;
		top: 4%;
		position: absolute; z-index:1;
		border: 3px solid #fff;
	}
	#section_devis .container .grid {  position: relative; z-index:5;padding:2%; min-height:450px ; padding-bottom:50px ; margin-bottom:50px ; margin-top: 20px; }

	#section_devis {  padding-top:0 !important; background-color:#06281A !important  }
	#section_devis .description { padding:2vw; color:#fff; position:relative; z-index:2; }
	#section_devis .description.left { border-right:1.5px solid #fff;     grid-column-end: span 33; padding:5vh 15% 5vh 10%; }
	#section_devis .description.right {     grid-column-end: span 27; padding:5vh 14% 5vh 15%;}
	#section_devis .description a { color:#fff}
	#section_devis .description .Titre { margin-bottom:20px; color:#fff}
	#section_devis .description p { margin-top: 0; font-size: 1.2rem;line-height: 1.6rem; margin-bottom: 1rem; color:#fff}
    
	
	#section_devis a.link { display:block; font-size: 1.4em;    line-height: 1.5em;  margin-bottom:12px ;  padding:2px 10px 10px 50px ; position:relative}
	#section_devis a.link span.icon { width:40px; height:40px; position: absolute; left:0; top:0;   } 
	#section_devis a.link span.mail { background: url(images/mail-white.svg) no-repeat; background-size: contain; }
    #section_devis a.link span.phone { background: url(images/mobile-white.svg) no-repeat; background-size: contain; }
	#section_devis a.link span.adress { background: url(images/place-white.svg) no-repeat; background-size: contain; }
		
	
/***********************************/
/*********** 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 { 
		min-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%; min-height: 100vh; position:relative }
	#single .carousel-2 .flickity-viewport { height: 100vh ;}
	#single .carousel-2 .carousel-cell { width: 100%; min-height: 100vh; }
	#single .carousel-2 .visuel {
		width: 100%;
		min-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 ************/
/****************************/
	
/******************************/
/******** FOOOOTER ***********/
/****************************/
	footer { position: relative;
	width:100%; height:fit-content;  background:#031A11; padding:20px 0 ; z-index: 1; 
    border-top:5px solid #031A11;
	-webkit-box-shadow:inset 0 5px 10px 5px rgba(0,0,0,0.2);
	box-shadow:inset 0 5px 10px 5px rgba(0,0,0,0.2);
	}
	
	footer .credit {
    font-size: 0.8em;
    margin: 12px auto;
    width:98vw; 
    color: #fff;
	display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* espace entre texte et lignes */  
	}
	
	footer .credit::before,
	footer .credit::after {
		content: "";
		flex: 1;
		height: 1px;
		background: #fff;
		max-width:40vw; /* longueur des lignes */
	}



/*******************************/
/****** SOCIAL NETWORKS *******/
/*****************************/
	#social_networks { margin:0; display:block; position:fixed; right:10px;  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 { 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 { border:none}

    #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;}


	

	
/********************************************************************************/
/********************************************************************************/
/*******************************  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 ****************/
    /****************************************/
    
	
	@media screen and (max-width:1200px) {

    #section_about .description {
        grid-column-end: span 35;
    }

    #section_about #portrait {
        grid-column-end: span 25;
    }

    #section-gallerie article {
        height:40vh;
    }

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

	 p {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.6rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
	}

    /* RESET FULLPAGE */
    .section {
        height:auto !important;
        min-height:auto !important;
    }

    /* GRID devient simple */
    .grid {
        display: block !important;
    }

    #global_wrapper .col {
        width: 100%;
        display:block;
    }

    /* HEADER */
    header {
        padding:10px;
    }

    /* INTRO */
    #section_intro .content .accroche h2 {
        font-size: 1.6em;
        line-height:1.3em;
    }

    #section_intro .content .accroche p {
        font-size:1.2em;
    }

    /* ABOUT */
    #section_about .container {
        display:block;     position: unset;
    min-height: unset;
    padding-bottom: 102px;
    }

    #section_about .description {
        padding:30px 20px;
    }

    #section_about #portrait {
        height: 300px;
        margin:20px;
    }

    /* GALLERIE */
    #section-gallerie article {
        height:auto;
        margin-bottom:20px;
    }

    #section-gallerie article .description_container {
        position:relative;
        width:100%;
    }
	
	
	    #section-gallerie article {
        height: auto;
        width: 100%;
        margin-bottom: 20px;
    }
	
	#section-gallerie article .content {
    height: 100%;
    width: auto;
    display: unset;
    position:unset;
    overflow: visible;
}
	
	#section-gallerie article .content .custom-image {
    width: 100%;
    height: auto;
    
}
	
#section-gallerie article .content .custom-image img {
    width: 100%;
    height: auto;
    flex-shrink: unset;
    display: block;
}
   
   
   
    /* DEVIS */
    #section_devis .grid {
        display:block;
    }

    #section_devis .description.left,
    #section_devis .description.right {
        border:none;
        padding:50px 20px;
    }
	
	#section_devis .description.left {  border-bottom: 1px solid #fff;}
	
	       
}
    /************* UNDER 600px *************/
	@media screen and (max-width:600px) {

    body {
        font-size:14px;
    }

    h1, h2 {
        font-size:1.6em;
    }

    .logo {
        width:90px;
        height:90px;
    }

    .nom_logo {
        width:200px;
        height:60px;
    }
	#menumobile.style-a {
		padding: 11px 14px;
		
		font-size: 15px;
		
	}

	.navbar {max-width:100px; }
	.prevnext button { height:35px; width:35px; }

    /* boutons */
    .view-more {
        width:100%;
        text-align:center;
    }

    /* pagination */
    #pagination .prev,
    #pagination .next {
        grid-column-end: span 60;
    }

	#section_intro .content .accroche {
		
		padding: 0 8vw;
	}


	#section_about .description h2 {
    margin-top: 50px;
	}

	#section-gallerie h2 {
   
            line-height: 1.2em;
	}
	#section-gallerie h2:after {

    margin-top: 20px;
   
	}
	
	#section_devis a.link {
    font-size: 1em;
    line-height: 2.7em;
    margin-bottom: 6px;
   
    
	}
	
}