/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//+		© Copyright iDIWAY 2009
//+		Tout droits de reproduction interdits
//+		http://www.idiway.fr
//+		$Revision: 7297 $
//+		$Date: 2024-01-17 09:14:12 +0100 (mer. 17 janv. 2024) $
//+		$HeadURL: svn://svn.id.lan/pko/sat/2x/232_fdm/trunk/tpl/tpl0/css/iTpl.css $
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/* --- Color ---

	Vert :
		Dark : #2C5137
		Sapin : #467755
		medium :#008C3A
		light : #B8CB00

	Bleu :
		#00CBCB
		#00AFAF

	Gris:
		#403840
		#B2B2B2
		#F4F3F1
		#CBC7BF

*/

/* --- Font --- */
/* Parisienne */
@font-face{
	font-family: Parisienne;
	src: url('font/Parisienne/Parisienne-Regular.ttf') format("truetype");
}

/* Nunito */
@font-face{
	font-family: Nunito_sbold;
	src: url('font/Nunito/Nunito-SemiBold.ttf') format("truetype");
}
@font-face{
	font-family: Nunito_light;
	src: url('font/Nunito/Nunito-Light.ttf') format("truetype");
}
@font-face{
	font-family: Nunito_reg;
	src: url('font/Nunito/Nunito-Regular.ttf') format("truetype");
}

/*
	Taille :
		Base : Nunito 18px

		Titre section : Parisienne 60px

		Signature : Parisienne 28px

		Légende: Parisienne 24px

		Titre localisation: Nunito semibold 21
		Texte localitation: Nunito regular 18

		Titre contact: Nunito 25

		input: Nunito light 16
*/

:root{
	--TPL-font-primary	: Nunito_reg;
	--TPL-font-secondary: Parisienne;

}

.iPko-spc-pub {
	--color__background	: #F8F3EB;
	--color__txt		: black;
}

.iTpl-body.iPko-usr .iTpl-spc-pub,
.iTpl-body:not(.iPko-usr) .iTpl-spc-usr {display: none;}

@keyframes logoRight {
	from { left: 50px; opacity: 0; }
	to { left: 0; opacity: 1; }
}

/* --- GNL --- */
*{ box-sizing: border-box; }
html{ height: 100%; }
a {text-decoration: none; color: var(--color__txt);}
a:hover {text-decoration: underline;}

.iTpl-body{ min-height: 100%; margin: 0; padding: 0; letter-spacing: 0px; word-spacing: 0px; line-height: 1.5rem; background-color: var(--color__background); color: var(--color__txt); font-size: 18px; font-family: var(--TPL-font-primary); display: block; }

h1 { margin: 0; }

/* NAV */

.iTpl-menu { position: fixed; z-index: 1000; top: 0; left: -100%; width: 100%; height: 100%; background-color: #F8F3EB; transition: 1s; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 2em 10em;  }
.iTpl-body.iTpl-menu-show .iTpl-menu { left: 0; }

.iTpl-body::before { content: ''; position: fixed; background-color: rgba(0,0,0,0.2); width: 100vw; height: 100vh; left: 0; top: 0; transition: 0.5s; opacity: 1; z-index: 500;}
.iTpl-body:not(.iTpl-menu-show)::before {opacity: 0; pointer-events: none;}

/* HEADER + TDM */

.iTpl-head { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .4) 50%, rgba(0, 0, 0, .3) 80%, transparent 100%); }

.iTpl-head .iTpl-head-menu { display: flex; justify-content: space-between; align-items: center; }

.iTpl-head .logo { width: 15%; min-width: 200px; margin: 20px; }
.iTpl-head .logo img { max-width: 100%; }

.iTpl-head .tdm-menu { margin-right: 1em; width: max(1.5%, 25px); }
.iTpl-head .tdm-menu img { width: 100%; }

.iTpl-head .tdm-itm,
.iTpl-menu .tdm-itm { margin: 0 10px; z-index: 10; }
.iTpl-head .tdm-itm a { color: white; }
.iTpl-head .tdm-itm:hover,
.iTpl-menu .tdm-itm:hover { cursor: pointer; text-decoration: underline; }

.iTpl-menu .iTpl-menu-close { width: 100%; text-align: center; font-family: var(--TPL-font-secondary); margin-top: -1em; }
.iTpl-menu .iTpl-menu-close-svg { position: absolute; top: 2.5em; right: 1em; width: max(1.5vw, 25px); height: max(1.5vw, 25px); }

.iTpl-menu-content .tdm-itm { font-size: 1.3em; line-height: 1em; margin-top: 1.5em; }

/* MEP */

.iTpl-col-ctn { position: relative; }
.iTpl-col-ctn .img-acc {width: 100%;}

.iTpl-row-pag {position: relative;}
.iTpl-row-pag:not(.first) {margin: 0 5%;}

.iTpl-tit{ font-size: 3.33em; line-height: 1em; font-family: Parisienne; }
.iTpl-sTit { font-size: 2.67em; line-height: 1em; }
.iTpl-leg { font-size: 1.33em; }

.iTpl-tit-loc { font-family: Nunito_sbold; font-size: 1.17em; margin-bottom: 1em; }

.lien { margin-top: 1em; }

.iTpl-video { max-width: 100%; margin: 5em 0; }

.rel { position: relative; }

/* --- RETOUR ACCUEIL --- */

.iTpl-row-pag.retour .iTpl-col-ctn { margin: 0; position: absolute; left: 10px; top: 0; }
.iTpl-row-pag.retour .iTpl-col-ctn img { width: 20px; vertical-align: middle; }

/* --- FOOT --- */

.iTpl-foot::before { content: ''; background-image: url('../img/mep/foot/traits-footer.png'); background-size: contain; background-repeat: no-repeat; height: 10px; max-width: 1500px; width: 80%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.iTpl-foot.iTpl-row-pag { min-height: 20vh; position: relative; padding: 3em 10%; box-sizing: border-box; margin: 0; justify-content: space-between; }
.iTpl-foot .foot-contact { max-width: 70%; }

.iTpl-foot .iTpl-tit { font-size: 2.22em; margin-bottom: 1em; }

.iTpl-foot .foot-info { text-align: right; padding: 0 10%; margin-top: 2em; }
	.foot-info .iTpl-txt { margin-bottom: 1em; }
	.foot-info .foot-rs { margin-top: 3em; }

/* FOOT RS */

@media screen and (max-width: 800px) {
	.iTpl-foot::before { background-image: url('../img/mep/foot/traits-footer-mobile.png'); width: 100%; left: 0; transform: none; }
	.iTpl-foot.iTpl-row-pag { flex-direction: column; }
	.iTpl-foot .foot-contact { max-width: 100%; }

	.iTpl-foot .iTpl-tit { text-align: left; }

	.iTpl-foot .foot-info { text-align: center; padding: 0; margin-top: 8em; margin-bottom: 10em; }
}

/* --- MODAL --- */
.iTpl-modal{ position: fixed; z-index: 6000; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); opacity: 0; text-align: center; white-space: nowrap; transition: opacity 0.5s ease; }
.iTpl-modal.show{ opacity: 1; }
.iTpl-modal:before{ content: ''; display: inline-block; vertical-align: middle; width: 0; height: 100%; }
.iTpl-modal .iTpl-modal-win{ background-color: #FFF; box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2); display: inline-block; vertical-align: middle; padding: 25px; white-space: normal; width: 700px; margin: 15px; max-width: calc(100% - 30px); }
.iTpl-modal .iTpl-tit{ margin: 10px 0; }
.iTpl-modal .iTpl-modal-btn{ text-align: center; }

/* --- POPUP --- */

.iTpl-body.iPko-popup .iTpl-main .iTpl-col-pag { padding: 25px; }

/* CONTACT */

.iTpl-row-pag.iTpl-ctc .iTpl-col-ctn { margin: 0 30%; }
.iTpl-ctc .iTpl-tit { margin-bottom: 1em; }

.form-champs > div { width: 300px; min-width: max-content; max-width: 50%; }

#frmContact { font-family: Nunito_light; font-size: 16px; }

#frmContact input { background-color: var(--color__background); border: none; width: 80%; }
#frmContact textarea { background-color: var(--color__background); border: none; width: 100%; resize: none; }
#frmContact input:focus,	
#frmContact textarea:focus { outline: none; }
#frmContact input::placeholder { color: black; opacity: 50%; font-family: Nunito_light; font-size: 16px; }

#frmContact input:not([type="checkbox"]) { margin-bottom: 2em; }

#frmContact .input::before { content: url('../img/mep/foot/traits-doubles-input.png'); position: absolute; bottom: 10px; left: 0; z-index: -1; }
#frmContact .textarea::before { content: ''; background-image: url('../img/mep/foot/traits-input-message.png?v=230712'); background-size: contain; background-repeat: no-repeat; width: 100%; height: 100%; position: absolute; top: -5px; left: -5px; z-index: -1; }

#frmContact .label-msg { margin-bottom: 10px; }

	/* CUSTOM CHECKBOX  */
	#frmContact .checkbox { text-align: left; margin-top: 3em; max-width: 100%; }
	#frmContact .checkbox label { display: flex; width: 80%; }
	#frmContact .checkbox .mix { margin-left: 2em; }

	#frmContact .lbl { position: relative; }

	#frmContact input[type="checkbox"] { visibility: hidden; width: 2em; }
	#frmContact .checkbox-style { position: absolute; left: 0; top: -0.2em; width: 2em; height: 2em; border: 1px solid black; border-radius: 5px; }
	#frmContact label:hover .checkbox-style { background-color: #D8D3CB; }

	#frmContact .checkbox-style:after { content: ''; position: absolute; top: 0.3em; left: 0.6em; display: none; width: 0.5em; height: 0.9em; border: solid black; border-width: 0 3px 3px 0; transform: rotate(45deg); }
	#frmContact input:checked ~ .checkbox-style:after { display: block; }

#frmContact .privacy { text-decoration: underline; }

#frmContact .grp.prv { margin-top: 1em; }
#frmContact .grp.iup { width: 100%; }
#frmContact .ctc-pj { justify-content: space-between; margin-top: 1em; max-width: 300px; }
#frmContact .pj-btn { text-decoration: underline; }

#frmContact input.f_name_input { width: max-content; }
#frmContact .f_name_span { display: none; }

#frmContact .form-sbm { justify-content: flex-end; width: 75%; margin-top: 1em; }

#frmContact .submit { text-align: right; position: relative; z-index: 5; align-self: end; font-size: 18px; }
#frmContact .submit::before { content: ''; background-image: url('../img/mep/foot/btn-send.svg'); background-size: contain; background-repeat: no-repeat; width: 240%; height: 100%; position: absolute; top: 0; left: -3.5em; z-index: -1; }
#frmContact #sbmBtn:hover { cursor: pointer; display: inline-block; }

#frmContact .iUp_trash_ctnu { display: none; }

#frmContact .msg.warn { padding: 10px; margin-bottom: 0.5em; background-color: #FCB; border-radius: 20px; }
#frmContact #err_email { width: 60%; }
#frmContact #err_msg { width: 100%; }
#frmContact #err_prv { width: 80%; }

#frmContact #reload { text-align: center; width: 100%; align-items: center; flex-direction: column; }
#frmContact #reloadBtn { font-family: var(--TPL-font-primary); text-decoration: underline; }
#frmContact #reloadBtn:hover { cursor: pointer; }

/* CONTACT RS */

@media screen and (max-width: 1230px) {
	#frmContact .checkbox-style { top: -0.4em; }
}

@media screen and (max-width: 800px) {
	#frmContact { font-size: 14px; }

	#frmContact .form-champs { flex-direction: column; }
	.form-champs > div { width: 100%; max-width: 100%; }
	.form-champs > div > div { margin-bottom: 2em; }

	#frmContact input,
	#frmContact textarea { width: 100%; }
	#frmContact input::placeholder { font-size: 14px; }

	#frmContact .checkbox .mix { margin-left: 1em; }

	#frmContact .form-msg > div { width: 100%; }

	#frmContact .checkbox label { width: 100%; }

	#frmContact .form-chk { flex-direction: column; }
	#frmContact .form-sbm { justify-content: end; margin-top: 2em; width: 80%; }

	#frmContact .submit { font-size: 16px; }
	#frmContact .submit::before { width: 270%; height: 100%; }
}

/* 404 */
.pag-404 h1 { margin-bottom: 5em; }


/**
 * 
 * GRID
 * 
 */

.iTpl-grid { display: grid; }

/**
 * 
 * FLEX
 * 
 */

.iTpl-flex{ display: flex; }
.iTpl-flex > *{ flex: none; }
.iTpl-flex .iTpl-flex-max{ flex: 1 1 auto; }
.iTpl-flex .iTpl-flex-min{ flex: 1 0 0%; }
.iTpl-flex .iTpl-flex-left{ text-align: left; }
.iTpl-flex .iTpl-flex-center{ text-align: center; }
.iTpl-flex .iTpl-flex-right{ text-align: right; }

/**
 *
 * ICON
 *
 */

.svg__icon { width: 16px; height: 16px; }
.svg__icon--baseline {  height: 10px !important; vertical-align: baseline !important;; }
.svg__icon--8 { width: 8px !important; height: 8px !important; }
.svg__icon--10 { width: 10px !important; height: 10px !important; }
.svg__icon--12 { width: 12px !important; height: 12px !important; }
.svg__icon--16 { width: 16px !important; height: 16px !important; }
.svg__icon--20 { width: 20px !important; height: 20px !important; }
.svg__icon--24 { width: 24px !important; height: 24px !important; }
.svg__icon--32 { width: 32px !important; height: 32px !important; }
.svg__icon--48 { width: 48px !important; height: 48px !important; }
.svg__icon--64 { width: 64px !important; height: 64px !important; }
.svg__icon--128 { width: 128px !important; height: 128px !important; }
.svg__icon--256 { width: 256px !important; height: 256px !important; }

/**
 *
 * RWD
 * 
 * pc hd : 	> 1920
 * pc : 	1025-1919
 * tab : 	800-1024
 * mob : 	< 800
 *
 */

.r-pcHd-show,
.r-tab-show,
.r-tab-flex,
.r-pc-show,
.r-mob-show,
.r-mob-block,
.r-mob-inline-block,
.r-mob-inline,
.r-mob-list-item,
.r-mob-table,
.r-mob-table-row,
.r-mob-table-cell,
.r-mob-initial,
.r-mob-flex,
.r-mob-inherit { display: none !important; }

/* PC HD */
@media screen and (min-width: 1920px) {
	.r-pcHd-show,
	.r-pcHd-block { display: block !important; }
	.r-pcHd-inline-block { display: inline-block !important; }
	.r-pcHd-inline { display: inline !important; }
	.r-pcHd-list-item { display: list-item !important; }
	.r-pcHd-table { display: table !important; }
	.r-pcHd-table-row { display: table-row !important; }
	.r-pcHd-table-cell { display: table-cell !important; }
	.r-pcHd-initial { display: initial !important; }
	.r-pcHd-inherit { display: inherit !important; }
	.r-pcHd-flex { display: flex !important; }
	.r-pcHd-hide { display: none !important; }
}

/* PC */
@media screen and (min-width: 1025px) and (max-width: 1919px) {
	.r-pcHd-show{ display: none !important }

	.r-pc-show,
	.r-pc-block { display: block !important; }
	.r-pc-inline-block { display: inline-block !important; }
	.r-pc-inline { display: inline !important; }
	.r-pc-list-item { display: list-item !important; }
	.r-pc-table { display: table !important; }
	.r-pc-table-row { display: table-row !important; }
	.r-pc-table-cell { display: table-cell !important; }
	.r-pc-initial { display: initial !important; }
	.r-pc-inherit { display: inherit !important; }
	.r-pc-flex { display: flex !important; }
	.r-pc-hide { display: none !important; }
}

/* TAB */
@media screen and (max-width: 1024px) {
	.r-tab-show,
	.r-tab-block { display: block !important; }
	.r-tab-inline-block { display: inline-block !important; }
	.r-tab-inline { display: inline !important; }
	.r-tab-list-item { display: list-item !important; }
	.r-tab-table { display: table !important; }
	.r-tab-table-row { display: table-row !important; }
	.r-tab-table-cell { display: table-cell !important; }
	.r-tab-initial { display: initial !important; }
	.r-tab-inherit { display: inherit !important; }
	.r-tab-flex { display: flex !important; }
	.r-tab-hide { display: none !important; }

	.ntf{bottom: calc(var(--share__h) + var(--footer__h) + var(--pnlLeft__h));}
}

/* Mobile */
@media screen and (max-width: 800px) {
	.r-mob-show,
	.r-mob-block { display: block !important; }
	.r-mob-inline-block { display: inline-block !important; }
	.r-mob-inline { display: inline !important; }
	.r-mob-list-item { display: list-item !important; }
	.r-mob-table { display: table !important; }
	.r-mob-table-row { display: table-row !important; }
	.r-mob-table-cell { display: table-cell !important; }
	.r-mob-initial { display: initial !important; }
	.r-mob-inherit { display: inherit !important; }
	.r-mob-flex { display: flex !important; }
	.r-mob-hide { display: none !important; }
}