/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//+   © Copyright iDIWAY 2016
//+   Tout droits de reproduction interdits
//+   http://www.idiway.fr
//+   $Revision: 9278 $
//+   $Date: 2025-11-04 17:01:21 +0100 (mar. 04 nov. 2025) $
//+   $HeadURL: svn://svn.id.lan/pko/sat/2x/241_tgo/eval1/tpl/ihm20/css/ihm.esp_pub.css $
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

:root {
	/*--header__h: 60px;*/
}

.header { container-type: inline-size; container-name: header; }
.main { container-type: inline-size; container-name: main; }

.header__space__ctn { display: flex; justify-content: center; align-items: center; padding: 0 80px;  }
.header__space__ctn { position: absolute; top:0; right: 0; left: 0; bottom: 0; z-index: -1;  }

.header__logo--space { display: flex; justify-content: center; align-items: center; column-gap: 20px; font-size: 30px; color:#000; text-decoration: none; }
.header__space--flag { position: absolute; right: 0; font-size: 12px; opacity:0.8; }
/*body:not(._space_tgo) .header__logo--space { display: flex; justify-content: center; align-items: center; column-gap: 20px; font-size: 30px; text-decoration: none; background: url(../../tpl0/img/mep/bg-btn-input.svg); background-size: contain; background-repeat: no-repeat; }*/
.header__logo--space { position: relative; z-index: 0; width: 100%; max-width: 250px; margin: 0 20px; }
/*body:not(._space_tgo) .header__logo--space:before{ content: ''; position: absolute; z-index: -1; top:0; right: -10px; bottom: 0; left: -10px;  background:#fff; border-radius: 5% / 50%; }*/
.header__logo--space .bg{ content: ''; position: absolute; z-index: -1; top:0; right: -10px; bottom: 0; left: -10px;  background:#fff; border-radius: 5% / 50%; }

.header__nav--space {  position:relative; }
.header__nav--space > *{  position: absolute; top:-20px; left: -10px}
/*.header__nav--space { display: flex; align-items: center; column-gap: 10px; padding: 5px; }*/
/*._space_tgo .header__nav--space{align-self: flex-end;  margin-bottom: 6px;}*/
/*.header__nav--space .i-fly__flyer { background-color: #333; }*/
/*
.header__nav--space a { text-decoration: none; font-size: 14px; display: inline-block; width: 100%; }
.header__nav--space .i-fly__flyer {top: auto; right: auto; bottom: 0; left: 100%;}
.header__nav--space .i-fly__flyer a { color: #000; }
.header__nav--space .i-fly__flyer a:hover { color: #669; }

.header__nav--space .nav--arrows { display: flex; flex-direction: column; justify-content: center; /*row-gap: 3px;* / }

*/

/*.header__nav--space .isSld { font-weight: bold; }*/

.space-nav { position: absolute; right: 150px; display: flex; align-self: center; justify-content: center; z-index: 2000; }
.space-nav-ctn { width: 100%; padding: 20px; display: flex; align-items: flex-start; justify-content: space-around; }

.space-nav-adm {
	position: fixed; left: 50%; top: calc(var(--header__h) + 15px); transform: translateX(-50%); color: #000;

	.space-nav-ctn { padding: 10px; max-width: max-content; }

	/* Ajoute du padding si nav admin présente */
	.ihm:has(> .header > &) .main {
		padding-top: 80px;
	}
}

.space-nav.space-nav-mob { display: none; }
.header__nav--space{ display: none; }
.spaceTdm .spaceTdm--itm { opacity: 0.8; border-bottom: 1px solid transparent; cursor: pointer;}
.spaceTdm .spaceTdm--itm.isSld { opacity: 1; border-bottom: 1px solid white;}

/*.space-nav-adm{ display:flex; flex-wrap:wrap; align-items:center; justify-content: center; width: 800px; margin: 0 auto; position: relative;}*/
a.space-nav-itm{ position: relative; text-decoration:none; padding: 10px; display: flex; flex-direction: column; align-items:center;  justify-content:center; font-size: 12px; }
a.space-nav-itm >span{ border-bottom: 1px solid transparent;}
.space-nav-itm--dft .svg__icon {position: absolute; top: -2px; opacity: 0.8; }

.space-nav-adm .space-nav-itm{transition:0.5s; margin:10px 4px; padding: 0 10px; font-size:1.1rem; color: #666; position: relative; border-raduis: 50%; }
.space-nav-adm .space-nav-itm .svg__icon + span{ margin-left: 4px; }
.space-nav-adm .space-nav-itm.space-nav-itm--sld{color: #fff; }
.space-nav-adm .space-nav-itm.space-nav-itm--sld::before { border-radius: 10px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: auto; content: ""; height: 100%; z-index: -1; background-image: url('../img/mep/bg_btn.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center bottom; text-decoration: none; }
.space-nav-adm .space-nav-itm:hover{ transform: scale(120%, 120%);}

.space-nav:not(.space-nav-adm) .space-nav-itm.space-nav-itm--sld > span{ border-bottom: 1px solid white;}
.space-nav:not(.space-nav-adm) .space-nav-itm:not(.space-nav-itm--sld) { /*color: #AAA;*/ opacity: 0.8; }
/*.space-nav-itm--sld { background-color: var(--color__ihm__3); }*/

.btnPopOver--space { background-color: transparent; border: none; color: #FFF; opacity: 0.8; padding: 0; display: flex; align-items: center; column-gap: 10px; }
.space-nav-main .btnPopOver--space { padding: 10px; }
.header__nav--space .btnPopOver--space { padding: 10px; }
.btnPopOver--space svg{ display: block;}


.space__hero {
	height: calc(30dvh + 30px); overflow: hidden; display: flex; position: relative; flex-shrink: 0; padding-top: 30px;


	clip-path: url('../img/mep/ban_clippath.svg#hero');

	/* retire le padding si présente de la hero */
	.main:has(> &) {
		padding-top: 0;
	}
	.ihm:has(> .main &) {
		grid-template-rows: 0 100%;
	}
	.ihm:has(> .main &) .header{
		position: absolute; top:0; left: 0; right: var(--pnlRight__w);
	}
	.ihm:has(> .main &) .header__space__ctn{
		clip-path:url('../img/mep/ban_clippath.svg#header');
	}
}

.space__hero .idSliderVw { width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.space__hero .idSliderItm { background-size: cover; background-repeat: no-repeat; background-position-y: var(--cropY, 50%); background-position-x: var(--cropX, 50%); }

.space__hero--img { width: 100%; object-fit: cover; }
.space__hero--lgd { position: absolute; right: 30px; bottom: 35px; font-size: 14px; color: #fff; display:flex; align-items: baseline; column-gap: 6px; opacity: 0.9}

#heroCtr{ position: relative; width: 100%; }
#heroCtr article{ display: none; transition: opacity 0.25s linear; opacity: 0; }
#heroCtr article.sld{ display: block; opacity: 1; }
#heroCtr article.hide{ display: block; opacity: 0; }

.hero-nav.small{ position: absolute; left: 10px; text-align: center; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; }
.hero-nav.small .pt{ display: inline-block; vertical-align: middle; width: 10px; height: 10px; padding: 0; background-color: #fff; cursor: pointer; margin: 5px; border-radius: 50%; }
.hero-nav.small .pt.sld{ background-color: #e7c398; }

.space__sponsors { display: flex; align-items: center; height: 30px; column-gap: 100px; }
.space__sponsors > div { flex: 1; text-align: center; border: 1px solid #ccc;}


.space-ctrMsgCook{ display: none; position: relative; width: max-content;   max-width: 100%; margin: 0 auto; margin-bottom: 30px;}
.space-ctrMsgCook .i-msg__ico{align-self: flex-start;}
.space-ctrMsgCook .btnClose{ padding: 10px; position: absolute; top: 0; right: 0}
.space-ctrMsgCook .btnClose svg{ display: block;}
.space-ctrMsgCookShow .space-ctrMsgCook{ display: block;}
.space-ctrMsgCook.space-ctrMsgCookHide{ display: none !important;}

/* Liste spaces */
.space__all { padding: 10px 20px 20px 20px; }
.space__all .space__all--lbl { text-align: center; font-size: 16px; font-weight: bold; margin-bottom: 20px; }
.space__all .space__itm { display: flex; margin: 5px 0; opacity: 0.7; text-decoration:none; column-gap:8px; align-items: center; }
.space__all .space__itm:hover { background-color: var(--color__hover); border-radius: 4px;}
.space__all .space__itm:hover > *:nth-child(4){ text-decoration:underline; }
.space__all .space__itm > *{ padding:5px 0; }
/*.space__all .space__itm > *:nth-child(1){ width: 20px; }*/
.space__all .space__itm > *:nth-child(1){ width: 20px; text-align:center; }
.space__all .space__itm > *:nth-child(2){ width: 20px; text-align:center; }
.space__all .space__itm > *:nth-child(3){ width: 85px; }
.space__all .space__itm > *:nth-child(4){ flex: 1; }
.space__all .space__itm > *:nth-child(5){ width:max-content; }
.space__all .shadow_li {background-color: #d7d7d7; border-radius: 5px; opacity: 0.5; display: block;}
.space__all .space__itm .label_fav {  cursor: pointer;}
.space__all .space__itm .space_ptd { visibility:hidden; }
.space__all .space__itm--isPtd {  opacity: 1;  }
.space__all .space__itm--isPtd  > *:nth-child(4){ text-decoration:underline; }
.space__all .space__itm--isPtd .space_ptd { visibility:visible; }
.space__all .space__itm .space_handle { visibility:hidden; cursor:move; }
.space__all .space__itm--isFav .space_handle { visibility:visible; }

input.fav_space { display: none;}
input.fav_space:checked + span .fav__ico--off,
input.fav_space:not(:checked) + span .fav__ico--on { display: none; }


@container header (width <= 1000px) {
	.space-nav.space-nav-main{ display:none; }
	.space-nav.space-nav-mob { display: flex; }
	.header__nav--space{ display: block; }

	.space-nav:not(.space-nav-adm) { position: absolute; left: 0; right: 0; top: 100dvh; transform: translateY(-100%); width: 100%; background-color: #333; 
		background-image: url('../img/mep/ban_light.jpg');
		background-size: cover; 
		background-repeat: no-repeat;
		background-position: center top;
		clip-path:url('../img/mep/ban_clippath.svg#footer');
	}
	.space-nav-adm { top: calc(var(--footer__h) + 10px); width: max-content; }
	.space-nav-ctn { padding: 18px 0 10px 0;}

	.btnPopOver--space .header__nav--lbl{ display: none;}
}

@media screen and (max-width: 1000px) {
	.space-nav.space-nav-main{ display:none; }
	.space-nav.space-nav-mob { display: flex; }
	.header__nav--space{ display: block; }

	.space-nav:not(.space-nav-adm) { position: absolute; left: 0; right: 0; top: 100dvh; transform: translateY(-100%); width: 100%; background-color: #333; 
		background-image: url('../img/mep/ban_light.jpg');
		background-size: cover; 
		background-repeat: no-repeat;
		background-position: center top;
		clip-path:url('../img/mep/ban_clippath.svg#footer');
	}
	.space-nav-adm { top: calc(var(--footer__h) + 10px); width: max-content; }
	.space-nav-ctn { padding: 18px 0 10px 0;}

	.btnPopOver--space .header__nav--lbl{ display: none;}
}


@container header (width <= 800px) {
	.space__all { padding-left: 10px; padding-right: 10px; }
	.header__nav--space { padding: 0; }
}

@media screen and (max-width: 800px) {
	.space__all { padding-left: 10px; padding-right: 10px; }
	.header__nav--space { padding: 0; }
}