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

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

  Auteur     :   . Ricardo Bandeira
  Version    :   1 
  Date       :   01/12/2024 

  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 pasges 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


RAPPEL
	https://docs.joomla.org/Using_the_Page_Class_Suffix_in_Template_Code

TEMPLATING WITH K2 components and so on... 
	https://getk2.org/documentation/tutorials/item/174-templating-with-k2-and-the-concepts-of-sub-templates
	https://getk2.org/documentation/tutorials/174-templating-with-k2-and-the-concepts-of-sub-templates



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

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



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



/* ==============================================================================
   @grp Tags de base                                                             
============================================================================== */
	:root { 
    --color_gris--clair:rgb(239,239,240);
    --color_gris--moyen:#809589;
    --color_gris--sombre:#202a25;


		--color_texte-courant:rgb(50,50,50);
		--color_Main: rgb(71, 128, 22); /* ARCADE PRINCIPALE BLEU MACHIN */
		--color_Main_Hexa: #093;
		--color_Main_sombre:rgb(36, 68, 9); /*rgb(36, 66, 10);*/
		
		--color_link: rgb(71, 128, 22);
		--color_link--hover: rgb(36, 66, 10);
		--color_link--visited: rgb(126, 134, 120);
		--color_selection: rgb(71, 128, 22);
		--color_selection-texte: rgb(255, 255, 255);

    --color_title_h1:var(--color_gris--sombre);
    --color_title_h2:var(--color_gris--sombre);
    --color_title_h3:var(--color_gris--sombre);

    --font_main:"Poppins", Arial, Helvetica, sans-serif;
    --font_Title:"Cormorant Garamond", Arial, Helvetica, sans-serif;

		
		--grid_gap:2rem;
		--spacer: 1rem;
		
		--u-margin-top:5rem;
		/* Inner global */
		--inner_max-width: 1280px; 
		--inner_margin:0 auto;
		--inner_padding:0.5em 0 0.3em;
		
	}

  /* @Fonts ============================================================ */
    .cormorant-garamond-light {
      font-family: "Cormorant Garamond", Arial, Helvetica, serif;
      font-weight: 300;
      font-style: normal;
    }
    
    .cormorant-garamond-regular {
      font-family: "Cormorant Garamond", Arial, Helvetica, serif;
      font-weight: 400;
      font-style: normal;
    }
    
    .cormorant-garamond-medium {
      font-family: "Cormorant Garamond", Arial, Helvetica, serif;
      font-weight: 500;
      font-style: normal;
    }
    
    .cormorant-garamond-semibold {
      font-family: "Cormorant Garamond", Arial, Helvetica, serif;
      font-weight: 600;
      font-style: normal;
    }
    
    .cormorant-garamond-bold {
      font-family: "Cormorant Garamond", Arial, Helvetica, serif;
      font-weight: 700;
      font-style: normal;
    }
    
    .cormorant-garamond-light-italic {
      font-family: "Cormorant Garamond", Arial, Helvetica, serif;
      font-weight: 300;
      font-style: italic;
    }
    
    .cormorant-garamond-regular-italic {
      font-family: "Cormorant Garamond", Arial, Helvetica, serif;
      font-weight: 400;
      font-style: italic;
    }
    .poppins-thin {
      font-family: "Poppins", sans-serif;
      font-weight: 100;
      font-style: normal;
    }
    
    .poppins-extralight {
      font-family: "Poppins", sans-serif;
      font-weight: 200;
      font-style: normal;
    }
    
    .poppins-light {
      font-family: "Poppins", sans-serif;
      font-weight: 300;
      font-style: normal;
    }
    
    .poppins-regular {
      font-family: "Poppins", sans-serif;
      font-weight: 400;
      font-style: normal;
    }
    
    .poppins-medium {
      font-family: "Poppins", sans-serif;
      font-weight: 500;
      font-style: normal;
    }
    
    .poppins-semibold {
      font-family: "Poppins", sans-serif;
      font-weight: 600;
      font-style: normal;
    }
    
    .poppins-bold {
      font-family: "Poppins", sans-serif;
      font-weight: 700;
      font-style: normal;
    }
    
    .poppins-extrabold {
      font-family: "Poppins", sans-serif;
      font-weight: 800;
      font-style: normal;
    }
    
    .poppins-black {
      font-family: "Poppins", sans-serif;
      font-weight: 900;
      font-style: normal;
    }
    
    .poppins-thin-italic {
      font-family: "Poppins", sans-serif;
      font-weight: 100;
      font-style: italic;
    }
    
    .poppins-extralight-italic {
      font-family: "Poppins", sans-serif;
      font-weight: 200;
      font-style: italic;
    }
    
    .poppins-light-italic {
      font-family: "Poppins", sans-serif;
      font-weight: 300;
      font-style: italic;
    }
    
    .poppins-regular-italic {
      font-family: "Poppins", sans-serif;
      font-weight: 400;
      font-style: italic;
    }
    
    .poppins-medium-italic {
      font-family: "Poppins", sans-serif;
      font-weight: 500;
      font-style: italic;
    }
    
    .poppins-semibold-italic {
      font-family: "Poppins", sans-serif;
      font-weight: 600;
      font-style: italic;
    }
    
    .poppins-bold-italic {
      font-family: "Poppins", sans-serif;
      font-weight: 700;
      font-style: italic;
    }
    
    .poppins-extrabold-italic {
      font-family: "Poppins", sans-serif;
      font-weight: 800;
      font-style: italic;
    }
    
    .poppins-black-italic {
      font-family: "Poppins", sans-serif;
      font-weight: 900;
      font-style: italic;
    }
    
  /* @Fonts (FIN) ====================================================== */
	*,
	*::before,::before
	*::after, ::after{
		outline:none;
		-webkit-box-sizing:border-box;
		-ms-box-sizing:border-box;
		box-sizing:border-box; /* Pour forcer le BOX-MODEL: padding and border are included in the width and height*/
	}
	*::-moz-selection,
	*::-webkit-selection,
	*::selection,
	::selection {
		background-color: var(--color_selection);
		color:  var(--color_selection-texte);
		text-shadow: none;
	}

	html { 
		scroll-behavior: smooth; 
		font-size: 62.5%; /*Ceci étabit l'utité de base à 10px = 1rem */
	}

	html,
	body{ 
		cursor:url(/images/_Design/cursor.png), auto;
		font-family: var(--font_main);
		width:100%;
		height:100%;
		margin:0;
		padding:0;
	}
  .fs_Noto{ font-family:'Noto Sans JP',Arial, Helvetica, sans-serif; }
  .CormorantGaramond{
    --font-size_garamond:3.1rem;
    font-family:'Cormorant Garamond',Arial, Helvetica, sans-serif;
    font-size:var(--font-size_garamond);
  }

	body{
		font-size:1.6rem;
		color:var(--color_texte-courant);
		font-weight: 100;
		letter-spacing:1px;
		line-height: 1.5;
	}
  
	h1, h2, h3, h4, h5, h6 {
    margin: 0;
		font-family: inherit;
		font-weight: 100;
		line-height: 2.6rem;
	}	
	h1{
    font-family:'Cormorant Garamond',Arial, Helvetica, sans-serif;
		font-size: 4.2rem;
		text-transform: uppercase;
    color: var(--color_title_h1);
		padding: 1.5em .5em;
	}
	h2{
    font-family:'Cormorant Garamond',Arial, Helvetica, sans-serif;
    font-size: 4rem;
    font-weight: 300;
    color: var(--color_title_h2);
		line-height: 4rem;
		letter-spacing:0.2rem;
		text-transform:uppercase;
    padding: 1.5em 0 0 0;
		transition: all 0.2s ease-in-out;
	}
	h3{
    font-size: 3.1rem;
		font-weight:100;
		color: var(--color_Main_sombre);
    color: var(--color_title_h3);
		padding: 1.5em 0 1em 0;
		letter-spacing: 3px;
		line-height: 1.1em;
	}
	h4{
		font-size: 2.1rem;
		font-weight:bold;
	}
	h5{
    font-size: 1.2rem;
  }
	h6{
    font-size: 1.2rem;
  }
	h1 span,
	h2 span, 
	h3 span,
	h4 span,
	h5 span{
		display: block;
		font-size: 0.7em;
	}
	h3 span.bg-gris-clair{ 
		font-size: 0.5em;
		background-color:var(--Arcade_gris_clair);
	}
	
	p {
		letter-spacing: 1px;
		font-weight: 400;
		line-height: 28px;
		margin: 0 0 5px;
		padding: 0 0 5px 0;
	}
	p {
		letter-spacing: 1px;
		font-weight: 400;
		line-height: 28px;
		margin: 0 0 5px;
		padding: 0 0 5px 0;
	}	
	ol,
	ul,
	ol li,
	ul li{ 	margin-left:30px; }

	a:link,
	a:visited{
		font-weight: bold;
		color: var(--color_link);
		text-decoration: none;
	}	
	a:link,
	a:visited{
		cursor:url(/images/Design/cursor_hand.png), pointer;
	
		font-weight: bold;
		color: var(--color_link--visited);
		text-decoration: none;
	}	
	
	a:hover,
	a:active{
		color: var(--color_link--hover);
	}	
	blockquote {
		padding: 0 0 0 15px;
		margin: 0 0 18px;
		border-left: 5px solid #eee;
		display: block;
		height: 150px;
		background: #555;
	}
	details {
		padding: 1rem 0 5rem 0;
	}
	.text__article.txt_en {	font-style: italic; }
/* @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 Galerie ========================================================== */

  .galerie__inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: #eee;
  }
  .galerie h3 {
    padding: 0.5em 0 0.1em;
    font-size: 2.5rem;
    letter-spacing: 2px;
  }
  .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);
    padding: 1.6em;
    transform: scale(0);
    z-index: 2;
    transition: all 0.2s ease-in;
  }
  .galerie__item:hover{
    transform: scale(1.1);
    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 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 {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
    border: 1px #eee solid;
    padding: 10px;
  }
  .liens_liste {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
  }
  .liens_liste_item {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 30%;
  }
  .liens_liste_link,
  a.liens_liste_link {
    display: block;
    background-color: #468641;
    padding: 10px;
    margin: 2px;
    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 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                                                                  
============================================================================== */
	.inner {
		width: 95%;
		max-width: var(--inner_max-width);
		margin:var(--inner_margin);
		padding: var(--inner_padding);
	}
	.tpl__inner {
		max-width: var(--inner_max-width);
		margin:var(--inner_margin);
		padding: var(--inner_padding);
	}


	.pg__accueil .maincontent .tpl__inner {
		width:100%;
		max-width: inherit; /* 1280px; */
		margin:0 auto;
		padding-top: 0px;
		padding-bottom: 0px;
		transition:all 0.5s ease-in;
	}
	.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: #fff;
		height: 11.4rem;
		border-bottom: 1px #eee solid;
		z-index: 1500;
	}
	#wrapper__header > .inner {
		position: relative;
		display: grid;
		grid-template-columns: 20rem minmax(auto, 80%);
		grid-gap: 1rem;
		align-items: end;
		padding: 1rem 1rem 0 1rem;
	}	

	/* Logo Main  =========== */

		.logo__main_link{
			display:block;
			background-image:url(/images/_Design/logo.png);
			background-position:center;
			background-repeat:no-repeat;
			background-size: contain;		
			width: 13.8rem;
			height: 9.4rem;
		}
		.logo__main_link:hover{
			background-image:url(/images/_Design/logo_hover.png);
			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--Reduce{
			height: 9rem;
			border:none;
		}
		#wrapper__header.menu--Reduce  > .inner {
			grid-template-columns: 15rem minmax(auto, 80%);
			grid-gap: 1rem;
			align-items: center;
			padding: .5rem .5rem 0 .5rem;
		}	
		
		.menu--Reduce .logo__main_link {
			width: 10rem;
			height: 6.7rem;
		}

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




/* ==============================================================================
   @grp wrapper                                                                  
============================================================================== */
	#wrapper {
		width: 100%;
		max-width: 2500px;
		margin: 0 auto;
		padding-top: 0;
	}
  .wrapper {
    width: 95%;
    margin: 0 auto;
  }
  
  
  
  
	#wrapper > .inner {
		padding: 5.2rem 0 5rem;
	}

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





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




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





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



/* @grp MainContent  (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) ====================================== */