@charset "utf-8";
/* CSS Document */

/* ================================================
  Fichier    :   custom.css         
  Application:   basic Template     
                 Pour la gestion du template

  Auteur     :   . Ricardo Bandeira
  Version    :   1 
  Date       :   21/09/2025 

  Notes     :
                * tpl est la désignation de template 
                  et sera utilisé pour désigner les blocs de position (les sections du template) 
								* norme BEM Bloc__Element-name_modificateur-name_modificateur-valeur 
								exemple: .tpl__inner
								block-name__elem-name_mod-name_mod-val


	Ref. couleur : 

	// Index des sections:
	@grp Tags de base
	@grp Classes
	
	@grp Global ---- pour toutes les pages ou des éléments en général 
	@grp Zone de Override

	@grp Header
		LOGO ====
		MENU ====

	@grp wrapper

	@grp Accueil

	@grp MainContent
	@grp Autoportrait
	
	@grp Actualités 
	@grp presentation
	
	@grp Page_Erreur 

	
	@grp Articles (maincontent)

	@grp Pied de Page (ppg) 

	@grp Responsive Media queries
	@grp RESPONSIVE

================================================ */

	
/* ==============================================================================
   @grp Fontface                                                                 
============================================================================== */



/* @grp Fontface  (FIN)
============================================================================== */



/* ==============================================================================
   @grp Tags de base                                                             
	 pour redéfinir les tags de base
============================================================================== */
	:root { 
		
	}

  /* @Fonts ============================================================ */
    
    
  /* @Fonts (FIN) ====================================================== */



/* @grp Tags de base  (FIN)
============================================================================== */




/* ==============================================================================
   @grp Accueil (Hero)                                                           
============================================================================== */

	.accueil__votre-image {
		background-color: #fff;
		min-height: 630px;
		padding: 280px 0 40px 0;
	}	
	.img_Interactive{
		position: relative;	
	}
	.img_Interactive {
		position: relative;
		width: 562px;
		margin: 0 auto;
		z-index: 5;
	}
.bg_img_Interactive {
	background: #478016 none repeat scroll 0 0;
	position: relative;
	top: -66px;
	height: 70px;
	z-index: 1;
}
.txt_img_Interactive {
	min-height: 300px;
	padding: 20px 10%;
}
.accroche_accueil p {
	float: right;
	font-size: 1.5em;
	color: #4e4e4e;
	text-align: justify;
	letter-spacing: 3px;
	line-height: 1.3em;
	margin: 0 auto 60px;
	width: 60%;
}
.bt_fleche_intro::before {
	content: "";
	display:block;
	background-image: url(/images/_Design/voir_plus.png);
	background-repeat: no-repeat;
	background-position: 50% 0px;
	height: 84px;
	width: 163px;
}
.bt_fleche_intro {
	display: block;
	float: right;
	font-size: 18px;
	text-align: center;
	width: 190px;
	padding: 60px 0px 4px;
	border: 0px solid #999;
	overflow: hidden;
	transition:all .5s ease-in;
}
.bt_fleche_intro:hover::before{
	background-image: url(/images/_Design/voir_plus_hover.png);
	background-position: 50% 0;
	transition:all .5s ease-in;
}
.bt_fleche_intro:hover {
	text-indent: -999px;
	transition:all .2s ease-in;	
}

/* @grp Accueil (Hero) (FIN)
============================================================================== */






/* ==============================================================================
   @grp Classes (Utilitaires)                                                    
============================================================================== */
	/* couleurs Texte et Background */
		.txt_vert_BAS{ color: var(--color_Main); }
		.txt_blanc{ color:#FFF; }
		.txt_rouge{ color:#F00; }
		.txt_bleu { color:#09C; }
		.txt_vert { color:#093; }
		.txt_orange{ color:#F90; }
		.txt_jaune{ color:#FF3; }
		.txt_gris_80{ color:#CCC; }
		.txt_gris_60{ color:#999; }
		.txt_gris_40{ color:#666; }
		.txt_gris_20{ color:#333; }
		
		
		
		.bg_vert_BAS{ background-color: var(--color_Main);  }
		.bg_rouge{ background-color:#F22; }
		.bg_bleu { background-color:#09C; }
		.bg_vert { background-color:#093; }
		.bg_orange { background-color:#F90; }
		.bg_noir { background-color:#000; }
		.bg-gris-clair{background-color:var(--Arcade_gris_clair); }
		.bg_gris_80{ background-color:#CCC; }
		.bg_gris_60{ background-color:#999; }
		.bg_gris_40{ background-color:#666; }
		.bg_gris_20{ background-color:#333; }
	
	
	/* positionnement */
		.deuxColonnes {
			display: flex;
			justify-content: space-around;
		}
		.deuxColonnes > div{
			width:45%;
		}
		.droite,.right{float:right;}
		.gauche,.left{float:left;}
		.clear{	clear:both; }
		/* Clear 
		===========================*/
			.clearFixBox{
				display:block;
				clear:both;
				height:0;
			}
		/* =========================== */
		.clearFix::after{
			display:block; 
			clear:both;    
			height:0;      
		}

		.clearD{ clear:right; }
		.clearG{ clear:left; }
	
	/* visibilité */
		.cache{ display:none; }
		.inactif{ background:#666; color:#999;}
		.actif{ background:#CF0; color:#999;}
	
	/* marges externes */
	.spacer_top{margin-top:var(--spacer); }
	.spacer_full{
			margin-top:var(--spacer); 
			margin-bottom:var(--spacer);
	}
	.spacer_bottom{margin-bottom:var(--spacer); }
		.mg_10{ margin:10px; }
		.mg_20{ margin:10px; }
		.mg_30{ margin:10px; }
		.mg_40{ margin:10px; }
		.mgh_10{ margin-top:10px; }	
		.mgh_20,
		.espace_haut_20{ margin-top:20px; }	
		.mgh_30{ margin-top:30px; }	
		.mgh_40{ margin-top:40px; }	
		
		
	/* marges externes */
		.pad_10{ padding:10px; }
		.pad_20{ padding:20px; }
		.pad_30{ padding:30px; }
		.pad_40{ padding:40px; }
		
		
	/* taille texte */
		.txt_h10 { font-size:10px; }
		
	
		.txt-justify,
		.pg__article p{ text-align:justify;}

		.display--none,
		.menu--hidden,
		.element--hidden {	display: none; }
		.display--block {	display: block; }

#elModal {
	position: absolute;
	top: 65px;
	right: 0;
	background-color: #fff;
	padding: 2rem 0.9rem 0.5rem;
}

/* affichage d'un code */
.code {
	background-color: var(--Arcade_gris_clair);
	color:#063;
	font-style:italic;
	padding: 2rem;
	margin: 2rem;
}

	/* Barre témoin défilement */
		.barreScroll {
			position: fixed;
			top: 0px;
			left: 0;
			right: 0;
			background-color: var(--Arcade_gris_clair);
			/* background-color: #d0d0d0; */
			height: 3px;
			
			overflow: hidden;
			z-index: 1500;
		}
		
		.barreScroll div {
			position:absolute;
			top:0px;
			/* 
			left:50%;
			background-color: var(--color_Main);
			background: linear-gradient(90deg, var(--color_Main) 0%, rgba(0,212,255,1) 100%); */
			background: linear-gradient(90deg, var(--Arcade_gris_clair) 0%, var(--color_Main) 100%);
			background: linear-gradient(90deg, var(--color_link--hover) 0%, var(--color_Main) 100%);
			border-radius:0 2px 2px 0;
			width: 0%;
			height: 3px;
		}

/* @grp Classes  (FIN)
============================================================================== */






/* ==============================================================================
   @grp Zone de Override                                                         
============================================================================== */
	#system-message-container {
		position: fixed;
		top: 150px;
		width: 81%;
		z-index: 500;
		left: 40px;
	}
	.itemBackToTop{ display:none; }
	.scrollToTop {
		background-image:url("/images/_Design/to_Top.png");
		background-color:transparent;
		background-repeat:no-repeat;
		background-attachment:scroll;
		background-position: center center;

		text-indent: -999px;		
		
		width: 50px;
		height: 50px;
		padding: 10px;
		margin:0 20px 30px 0;

		opacity:0.8;
		overflow: hidden;
		z-index:1400;
		transition:all 0.2s;
	}
	.scrollToTop:hover{ 
		background-image:url("/images/_Design/to_Top_hover.png");
		background-color:var(--BAS_gris_clair);
		background-repeat:no-repeat;
		background-attachment:scroll;
		background-position: center center;
		opacity:1;
		transition:all 0.2s;
	}
	.animate { overflow: hidden; }
	.camera_prevThumbs, 
	.camera_nextThumbs,
	.camera_prev, .camera_next,
	.camera_commands,
	.camera_thumbs_cont { background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0; }

	/* Pour le fond du Titre du Slideshow   */
		#camera_wrap_110 .camera_caption > div {
			border-radius:0;
			font-family: Arial, Helvetica, sans-serif;
			font-size:16px;
		}

	/* ==== Mediabox CK ============= */
		#mbMedia {
			cursor: pointer;
		}
		#mbCenter, #mbToolbar {
			border-radius: 0px;
			-webkit-box-shadow: none;
			-moz-box-shadow: none;
			box-shadow: none;
		}
		#mbImage, #mbMedia {
			position: relative;
			left: 0;
			top: 0;
			box-sizing: border-box;
			height: 100%;
			font-family: Arial, Helvetica, sans-serif;
			padding: 0;
		}
		#mbTitle, #mbPrevLink, #mbNextLink, #mbCloseLink, #mbPlayLink, #mbPauseLink, #mbZoomMinus, #mbZoomValue, #mbZoomPlus {
			color: #fff;
		}

/* @grp Zone de Override  (FIN) 
============================================================================== */




/* ==============================================================================
   @grp Global                                                                  
============================================================================== */
	.wrapper__Header,
	.wrapper {
		background-color: var(--color_bg-Wrapper);
		width: 100%;
		max-width: var(--inner_max-width_GLOBAL);
		margin: 0 auto;
	}

	.inner {
		width: 100%;
		max-width: var(--inner_max-width_GLOBAL);
		margin:var(--inner_margin);
		padding: var(--inner_padding);
	}
	.tpl__inner {
		max-width: var(--inner_max-width);
		margin:var(--inner_margin);
		padding: var(--inner_padding);
	}



	.texte__intro_gauche{
		float:left;
		width:25%;
	}
	
	
	.img__Article{
		display:block;
		width:100%;
		margin:3rem auto 1rem auto;
	}


	.mdl__header{
		text-transform: uppercase;
		font-weight:100;
		padding-bottom: 2.5rem;
		padding-top: 4rem;
	}
	
	



/* @grp Global  (FIN)
============================================================================== */






/* ==============================================================================
   @grp Header                                                                   
============================================================================== */
	.wrapper__Header,
	.wrapper__Header *{	transition:all .5s ease-in; }

	.wrapper__Header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color:var(--color_bg-Wrapper);
		height: var(--header-height);

		border-bottom: 1px #eee solid;
		z-index: 1500;
	}
	.wrapper__Header > .inner {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;

		width: 95%;
		max-width: var(--inner_max-width);
		padding: 5px 0;
	}
	.wrapper__Header.reduced { 
		height: var(--header-height-reduced); 
		padding: 5px 0;
	}

	/* Logo Main  =========== */
		.main-logo {
			font-family: 'Cormorant Garamond',Arial, Helvetica, sans-serif;
			font-size: 1.6rem;
			margin: 0;
		}
		.main-logo__heading {
			font-size: 4rem;
			padding: 0.5em 0 0 0.5em;
			line-height: 3rem;
		}
		.reduced .main-logo__heading {
			font-size: 2rem;
			line-height: 1rem;
		}
		
		.main-logo__link{
			display: flex;
			justify-content: space-between;
			align-items: end;
			
			width: auto;
			height: var(--logo-height);
			transition:all .5s ease-in; 
		}
		.reduced .main-logo__link{
			height: var(--logo-height-reduced);
			transition:all .5s ease-in; 
		}

		.main-logo__image {
			background-image:url(/images/_Design/logo.png);
			background-position:center;
			background-repeat:no-repeat;
			background-size: contain;
			width: var(--logo-width); /* 195px; */
			height: var(--logo-height);/* 133px; */
			transition:all .5s ease-in; 
		}
		.main-logo__link:hover .main-logo__image {
			background-image:url(/images/_Design/logo_hover.png);
			transition:all .5s ease-in; 
		}
		.reduced .main-logo__image {
			width: var(--logo-width-reduced); /* 48px; */
			height: var(--logo-height-reduced);/* 67px; */
			transition:all .5s ease-in; 
		}
		

	/* MENU Main  =========== */
		.nav.menu__main {
			display: flex;
			justify-content: space-between;
		}
		.nav-item.current.active a {
			background-color: var(--color_Main);
			color: #fff;
		}	
		ul.menu li a,
		ul.nav li a,
		#tpl__main_menu ul.maximenuck li {
			color:var(--color_link);
		}
		ul.menu li:hover a,
		ul.nav li:hover a,
		#tpl__main_menu ul.maximenuck li:hover a{
			color:var(--color_link--hover);
		}

	/* Modificateurs =========== */
		.wrapper__Header.menu-reduced{
			height: var(--header-height-reducedd);
			border:none;
		}
		.wrapper__Header.menu-reduced  > .inner {
			grid-template-columns: 15rem minmax(auto, 80%);
			grid-gap: 1rem;
			align-items: center;
			padding: .5rem .5rem 0 .5rem;
		}	
		
		.menu-reduced .main-logo__link {
			width: 10rem;
			height: 6.7rem;
		}

/* @grp Header  (FIN)
============================================================================== */



/* ==============================================================================
@grp wrapper                                                                  
============================================================================== */
	.wrapper{ padding-top: var(--header-height); }


/* @grp wrapper  (FIN)
============================================================================== */










/* ==============================================================================
   @grp Accueil                                                                  
============================================================================== */




/* @grp Accueil  (FIN)
============================================================================== */





/* ==============================================================================
   @grp MainContent                                                    
============================================================================== */



/* @grp MainContent  (FIN)
============================================================================== */








/* @Grp Galerie ========================================================== */
	.galerie { background-color: #b3b3b3; }
  .galerie__inner {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .galerie h3 {
		padding: 0.5em 0 0.1em;
		font-size: 2.2rem;
		letter-spacing: normal;
		font-weight: 300;
	}
  .galerie__item {
    position: relative;
    flex: 0 1 21.5%;
    background-color: #fff;
    min-width: 250px;
    max-width: 600px;
    margin: 0.4em;
    padding: 10px;
    border: 1px #d5d2d2 solid;
    overflow: hidden;
    transform: scale(1);
    z-index: 1;
    transition: all 0.2s ease-in;
  }
	/*
  .galerie__item:first-child { margin-left: 0; }
  .galerie__item:last-child { margin-right: 0; }
	*/
  .galerie__item-caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.1);
		max-height: 100%;
    padding: 1em;
    transform: scale(0);
    z-index: 2;
    transition: all 0.2s ease-in;
  }
  .galerie__item:hover{
    transform: scale(1.07);
    transition: all 0.2s ease-in;
  }
  .galerie__item:hover .galerie__item-caption {
    background-color: rgba(255,255,255,0.9);
    /* transform: translateY(0%); */
    transform: scale(1);
    transition: all 0.2s ease-in;
  }
	.galerie__item-caption__inner {
		padding: 0.8em;
		border: 1px #bbb solid;
		height: 90%;
	}
  .galerie__item img {
    max-width: 100%;
    display: block;
    transition: all 0.2s ease-in;
  }
  .galerie__affiche{ 
    display: none;
  }

  .mDesign{ flex: 1 1 100%; }
  .mDesign__inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .mDesign__item {
    flex: 0 1 47%;
    background-color: #fff;
    min-width: 250px;
    padding: 0.8em 0.4em;
  }
  .mDesign__item {
    flex: 0 1 47%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;
    min-width: 250px;
    min-height: 420px;
    padding: 0.8em 0.4em;
  }
  .mDesign__Text { min-height: 120px; }

  .mDesign__iframe {
    display: block;
    background-color: #555;
    padding: 10px;
    margin: 0 auto;
  }

/* @Grp Galerie (FIN) ==================================================== */



/* @Grp Social-Media ========================================================== */
  .socialmedia {
    display: flex;
    justify-content: space-between;
    padding: 5em 2%;
    border: 1px #eee solid;
  }
  .social__item { 
    flex: 1 1 33%;
  }
  .social__item a {
    display: block;
    background-color: var(--color_Main_sombre);
    color: #fff;
    border: 1px #eee solid;
    padding: 6% 2%;
  }
  .social__item a:hover {
    background-color: var(--color_gris--sombre);
    color: #fff;
  }
  .social__item a span{
    display: block;
  }

/* @Grp Social-Media (FIN) ==================================================== */



/* @Grp Liens ========================================================== */
  .bloc-lecture {
    width: 95%;
    margin: 0 auto;
    max-width: var(--inner_max-width);
  }
  .bt-btn {
    display: block;
    background-color: #1e241e;
    color: white;
    font-weight: 100;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    width: 60%;
    max-width: 800px;
    padding: 1em 1em;
    margin: 4.5em auto;
  }
  .liens {
		background-color: #d9ead2;
    margin: 0 auto;
    padding: 50px 10px 10px 10px;
    border: 1px #eee solid;
  }

	.liens h3.galerie__item-Heading {
		font-weight: normal;
	}
	.liens h4.galerie__item-Heading {
		font-weight: normal;
	}
	.liens_liste {
		list-style: none;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
		margin: 0;
		padding: 1em 0;
	}
  .liens_liste_item {
		display: block;
		flex-grow: 0;
		flex-shrink: 1;
		flex-basis: 30%;
		margin: 0;
		padding: 2px 2px 10px 2px;
		border: 1px #eee solid;
	}
  .liens_liste_link,
  a.liens_liste_link {
		display: block;
		background-color: #468641;
		padding: 30px 10px 5px 10px;
		margin: 0;
		text-align: center;
		font-weight: bold;
		color: #fff;
		text-decoration: none;
	}
  .liens_liste_link:hover {
    background-color: var(--color_gris--sombre);
  }


/* @Grp Liens (FIN) ==================================================== */









/* ==============================================================================
   @grp Notre métier                                                             
============================================================================== */
	.notre-metier__items {
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(17rem,1fr));
		align-items: center;
		grid-gap: 2rem;
	}
	
	.notre-metier__item {
		border: 1px #ccc solid;
		min-height: 150px;
	}
/* @grp Notre métier (FIN)
============================================================================== */




/* ==============================================================================
   @grp Articles                                                    
============================================================================== */

/* @grp Articles  (FIN)
============================================================================== */






/* ==============================================================================
   @grp Autoportrait                                                    
============================================================================== */
	#tpl__autoportrait {
		background-color: #efefef;
	}
	.autoportrait__image {
		width: 100%;
		height: auto;
		max-height: 100%;
	}

/* @grp Autoportrait  (FIN)
============================================================================== */







/* ==============================================================================
   @grp Articles                                                    
============================================================================== */
	.proj-web__container {
		max-width: 1200px;
		margin: 0 auto;
	}
	.c-projets__header-block {
		padding: 2em 1em;
		border: 1px #ccc solid;
		border-radius: 35px;
	}
	.c-projets__header span {
		display: block;
		text-align: right;
		font-size: 0.9em;
		letter-spacing: 0.8em;
		background-color: #abdda1;
		color: var(--color_Main_sombre);
	}
	.c-projets__frameset {
		max-width: 720px;
		margin: 0 auto;
		height: 500px;
		overflow-x: auto;
		overflow-y: scroll;
	}
	.c-projets__descript {
		width: 50%;
		margin-left: 2.8em;
		border: 1px #ccc solid;
		border-radius: 1em;
		background-color: #dde6da;
	}
	.c-projets__descript-item {
		display: block;
		list-style: none;
		padding: 0.4em;
		margin-left: 0;
		width: 95%;
	}

/* @grp Articles  (FIN)
============================================================================== */










/* ==============================================================================
   @grp Action Pédagogique                                                       
============================================================================== */


		
/* @grp Action Pédagogique  (FIN)
============================================================================== */



/* ==============================================================================
   @grp Formulaire                                                     
============================================================================== */
	.formControls * {	
		font-size: 1.4rem;
	}

/* @grp Formulaire   (FIN)
============================================================================== */



/* ==============================================================================
   @grp Actualités                                                               
============================================================================== */

/* @grp Actualités  (FIN)
============================================================================== */





/* ==============================================================================
   @grp Expositions                                                              
============================================================================== */
		

/* @grp Expositions  (FIN)
============================================================================== */






/* ==============================================================================
   @grp Page_Erreur                                                              
============================================================================== */
	#bgPageErreur{ background-image:url(/images/_Design/bg_Page_Erreur.jpg); }
	#codePgErreur .label.label-inverse {
		float:left;
		font-size: 35px;
		display: block;
		line-height: 100px;
		width:150px;
	}
/* @grpPage_Erreur  (FIN)
============================================================================== */




/* ==============================================================================
   @grp Debug                                                             
============================================================================== */
	#scrollDebug{ 
		position:fixed;
		bottom:60px;
		right:10px;
		background-color:#FFF;
		font-size:12px;
		min-width:10px;
		min-height:20px;
		padding:5px;
		border:2px red solid;
		z-index:2000;
	}


/* @grp Debug  (FIN)
============================================================================== */




/* ==============================================================================
   @grp Presentation                                                             
============================================================================== */

	
/* @grp Presentation  (FIN)
============================================================================== */






/* ==============================================================================
   @grp Articles                                                                 
============================================================================== */


/* @grp Articles (FIN) 
============================================================================== */





/* ==============================================================================
   @grp Archives                                                                 
============================================================================== */

/* @grp Archives (FIN) 
============================================================================== */





/* ==============================================================================
   @grp Pied de Page (ppg)                                                       
============================================================================== */
	#wrapper__footer{
		background-color:#999;
		min-height:25vh;	
		padding-top: var(--u-margin-top);
	}
	.footer{
		min-height:25vh;	
		border:#333 1px solid;
	}
/* @grp Pied de Page (ppg)
============================================================================== */






/* ( @grp RESPONSIVE ) ============================================================================================================================================================= */




/* ==============================================================================
   @grp Responsive Media queries                                                 
============================================================================== */
	@media screen and (max-width: 1480px) {
		
	
	} /* < 1480 (FIN )*/
	
	@media screen and (max-width: 1300px) {
			
	} /* < 1200 (FIN )*/

	@media screen and (max-width: 1200px) {
				
	
	} /* < 1200 (FIN )*/


	@media screen and (max-width: 1100px) {
		
	
	} /* < 1100 (FIN )*/
	
	
	@media screen and (max-width: 1025px) {
		
	} /* < 1025 (FIN )*/
	
	
	@media screen and (max-width: 950px) { /* (min-width: 759px) and            */

			
			
	} /* < 950px (FIN) */
	




	@media screen and (max-width: 758px) { /* 758px */

				
	} /* < 758px (FIN) */
	
	
	@media screen and (max-width: 650px) {
		/* Header */
		

	} /* < 650px (FIN) */
	
	
	
	@media screen and (max-width: 550px) {

	} /* < 550px (FIN) */
	
	
	@media screen and (max-width: 480px) {

	} /* < 480px (FIN) */
	
	
	
	
	@media screen and (max-width: 420px) {
		

	} /* < 420px (FIN) */
	
	@media screen and (max-width: 340px) {

	} /* < 340px (FIN) */
	
	@media screen and (max-width: 320px) {
		


	} /* < 320px (FIN) */
		


@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */ 


	}

/* @grp Responsive Media queries  (FIN) ====================================== */