:root {
	--stickyHeight:4rem;
}
/* Index > help 
   ========================================================================== */
.help-button {
	position:fixed;
	top:50%;
	right:0;
	z-index:2;
	margin:1rem;
	transition:.15s all ease-out;
}
.help-button-show {
	opacity:1;
}
.help-button-close {
	opacity:0;
	pointer-events:none;
}
.help-button button {
	background:#000;
	width:4rem;
	height:4rem;
	border-radius:50%;
}
.help-modal {
	position:fixed;
	bottom:0;
	right:0;
	margin-right:2rem;
	margin-bottom:2rem;
	background:rgb(239, 216, 220);
	transition: .15s all ease-out;
	border: 2px solid #f5818c;
	border-radius: 12px;
}
.help-modal-show {
	opacity:1;
	min-height:auto;
	z-index:9;
}
.help-modal-close {
	opacity:0;
	min-height:0;
	z-index:0;
	pointer-events:none;
}
.help-titre {
	margin:0 0 1rem 0;
	font-family: Noah Bold;
	color: #F5818c;
	white-space: nowrap;
	font-size: 1.2rem;
	line-height:20px;
	width:92%;
}
.help-titre:after {
	background-color: #F5818c;
	block-size:1px;
	content:"";
	display:block;
	inline-size: 100%;
	margin-inline-start: .5rem;
}
/* Index > sticky-header
   ========================================================================== */
.layout-header {
	position: fixed;
	top: 0;
	z-index: 99;
	width: 100%;
	height: var(--stickyHeight);
	display: flex;
	align-items:center;
	justify-content: space-between;
	background-color: #03314c;
	box-shadow: 0 5px 5px 0 rgba(0,0,0,.25);
	box-sizing: border-box;
}
.layout-header .header_title {
	font-family: Noah Bold;
	color:white;
	font-size:1.1rem;
	letter-spacing:.05rem;
}
.layout {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.layout.bg {
	background-color: #045f7d;
}
.layout-content {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: column;
	flex-flow: column;
	box-sizing:inherit;
	flex-grow:1;
	background-color:#045f7d;
	margin-top: var(--stickyHeight);
    position: relative;
}
.container {
	padding:0 1rem;
	box-sizing: border-box;
  	margin: 0;
  	flex-basis: 100%;
  	flex-grow: 0;
  	max-width: 100%;
}
/* Très petits écrans, téléphones en mode portrait */
@media (max-width: 480px) {
	.layout-header {
		padding: 0 5px;
	}
	.layout-header .separation {
		height:60%;
		margin:auto 1rem;
		border-left:1px solid #fff;
		opacity:.2;
	}
	.login-name {
		display:none;
	}
}
/* Petits à moyens smartphones, y compris certains en mode paysage */
@media (min-width: 481px) and (max-width: 767px) {
	.layout-header {
		padding: 0 1rem;
	}
	.layout-header .separation {
		height:60%;
		margin:auto 1rem;
		border-left:1px solid #fff;
		opacity:.2;
	}
}
@media only screen and (min-width:992px){
	.layout-header {
		padding: 0 1rem;
	}
} 
@media (max-width: 767px) {
	.loginPage.bg {
	  	background-color:#045f7d;/* nécessaire pour avoir le footer avec le background */
	}
	.message-zone {
		margin-bottom:1rem;
		background: #ee7d00;
		color: #173166;
		padding: 1rem 1rem 0 1rem;
		display: flex;
		align-items: flex-start;
		transition: padding .2s linear;
		position:relative;
		border-radius:5px;
		border: 1px solid #173166;
	}
	.message-zone button i {
		color:#173166;
	}
	.message-text:not(.message-close) {
	    max-height: 500px; 
	    opacity: 1;
	    padding-top: 1.2rem;
	}
	.message-zone > div:first-child i {
		margin-right:5px;
	}
	.message-zone p.message-intro {
		font-family: Noah Bold;
	    font-size: .905rem;
	    line-height: 1.4;
	}
	.message-text {
		max-height: 0;
	  	overflow: hidden;
	  	opacity: 0;
	  	transition: max-height 0.5s ease-in-out;
  		max-height: 0;
  		overflow: hidden;
  		padding-top: .6rem;
  		padding-bottom: .6rem;
  		padding-right: 2.5rem;
  		transition: max-height .2s linear;
	}
	.message-expand {
		padding: 0;
	  	border: 0;
	  	background: #ee7d00;
	  	position: absolute;
	  	top: 100%;
	  	left: 50%;
	  	margin-top: -1rem;
	  	margin-left: -1.4rem;
	  	height: 2rem;
	  	width: 2rem;
	  	pointer-events: all;
	  	transition: transform .2s linear;
  		transform-origin: center;
  		border-radius:50%;
  		border: 1px solid #173166;
	}
}
#div_sticky_header_V .titre {
	color:#fff;
	line-height:48px;
	padding:0 10px;
	font-size: 1.75rem;
	font-family: Nunito;
}
#div_sticky_header_V .row_titre {
	display:flex;
	flex:1 0 auto;
	justify-content:flex-end;
	align-items:center;
}
#div_sticky_header_V .user_name {
	font-size:.825rem;
	color:#fff;
	text-decoration:none;
	padding:0 10px
}
#div_sticky_header_V .header_apps_title {
	display: flex;
	align-items: center;
	position:relative;
	color:#fff;
	font-weight:700;
	font-size: 1.2rem;	
}
#div_sticky_header_V .login-name {
	color:var(--gray-0);
	padding:0 10px 0 0;
}
#div_sticky_header_V .separation {
	height:60%;
	margin:auto 1rem;
	border-left:1px solid #fff;
	opacity:.2;
}
/* Banner cover background
   ========================================================================== */
.banner-image {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("/images/background/boarding.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index:100;
}
.banner-image, .banner-scroll {
	transition: opacity 0.5s, transform 0.5s, height 0.5s, margin 0.5s, padding 0.5s;
}
.banner-image.h200 {
	height: 200px;
}
.banner-image.h300 {
	height: 300px;
}
.banner-image .pane-inner .page-title h1 {
	font-family: Noah bold;
	font-size: 3.5rem;
	line-height: 3.5rem;
	letter-spacing: -0.015em;
	text-align:left;
	color:#333;
}
.banner-image .pane-inner .page-title h1 > span {
	background-color: #fff;
	-webkit-box-shadow: 1.5rem 0 0 #fff,-1.5rem 0 0 #fff;
	box-shadow: 1.5rem 0 0 #fff,-1.5rem 0 0 #fff;
}
.banner-image .pane-inner {
	max-width: 980px;
	margin: 0 auto 0 5vw;
	height: auto !important;
	padding-top: calc(2vw);
	min-height: auto!important;
}
.banner-image .pane-inner .page-title {
	color:#fff;
}
.pane-inner .secondary {
	background: white;
	display: inline-block;
	padding: 10px;
	font-family: Noah Bold;
	margin-top: 10px;
}
.banner-is-hidden {
    opacity: 0 !important;
    transform: translateY(-100%) !important;
    height: 0px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none; /* Désactive les interactions */
}
.banner-logo {
	margin:10px;
}

.banner-logout .NomLogged {
	color: black;
	text-decoration: none;
	padding: 5px 10px;
	background: white;
	margin: 5px;
	opacity:.75;
}
/* footer 
   ========================================================================== */
#div_footer_V {
	position:relative;
	background-color:var(--charte-uimm-footer);
	font-family: Noah;
	color:#fff;
	max-height: 12.5rem;
	padding: 20px 30px 0 30px;
}
footer.loginPage {
	font-family: Noah;
 	font-size:.875rem;
 	color:#fff;
 	text-align:center;
}
footer .footer .enseigne {
	font-size: 1.25rem;
	text-transform: uppercase;
}
footer .footer .sites {	
	font-size: 10px;
	line-height: 2;
}
footer .copyright {
	color:#fff;
	text-align:center;
	margin-bottom:0;
	font-size:12px;
	font-weight:700;
}
footer .rgpd {
	margin:0 2rem;
	padding:5px 0;
	color:gray;
	line-height:1;
	border-top:1px solid gray;
}
footer#div_footerApps_V .copyright {
	color:black;
}
/* login page
   ========================================================================== */
.appContainer-login {
	display:flex;
	align-items:center;
	justify-content: center;
	width:100%;
	height:100%;
	box-sizing:border-box;
}
.login-titre {
	font-size:1.5rem;
	font-family:Noah Bold;
	border-bottom:1px solid #666;
	margin-bottom:1.5rem;
	padding-bottom:10px;
}
.mainpush-footer {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-end;
	height: 100%;
}
@media only screen and (min-width:200px) and (max-width:767px) {
	footer .footer {
		padding: 10px 1rem;
	}
}
.login-container {
	width: 330px !important;
	background: rgba(255,255,255,0.9);
	border-radius: 10px;
	box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
	padding: 30px;
	border: 1px solid #d5d5d5;
}
/* home page : background
   ========================================================================== */
.cover {
	position:relative;
	box-sizing:border-box;
	width:100%;
	height:100vh;
	display: flex;
	flex-direction: column;
	z-index:2;
}
.appContainer {
	height:100%;
	display:flex;
	flex-direction:column;
}
.appContainer.signup {
	background:url('/images/background/fab2560x1440.jpg');
	background-size: cover;
}
.main-layout {
	display: flex;
  	flex-direction: column;
	margin:0 auto;
	max-width:1024px;
	width:1024px;
	flex-grow:1;
	flex-shrink:0;
}
/* home page : titre
   ========================================================================== */
.front-row--title {
	margin:10px auto;
	color:#fff;
	font-size:1.4rem;
	text-transform:uppercase;
	font-weight:700;
	text-align:center;
	line-height:1.2;
}
.front-login--title {
	padding:1rem 0 1rem 0;
	text-align:center;
}
.front-login--title p {
	font-family: Noah Bold;
	font-size: 2.8rem;
	letter-spacing: -0.015em;
	color:#199fe2;
	text-transform: uppercase;
	margin-bottom: .5rem;
}
.front-login--title p:nth-child(2){
	margin-top:1rem;
	font-size: 1.5rem;
	text-transform:initial;
	color:#666;
}
.login-footer {
	font-family: Noah;
	font-size:12px;
	text-transform:uppercase;
	flex-direction:column;
	min-height:62px;
	padding:16px;
	background-color:#eef7fc;
}
.login-footer p {
	line-height:1.5;
}
.home_text-alert {
	padding-top: 5px;
	color: var(--error-color);
	font-style: italic;
}
h1.pageheader {
	font-family: Noah Bold;
	font-size: 48px;
	letter-spacing: -.015em;
	line-height: 1.25;
    background-image: linear-gradient(to right, var(--color-start, #03314c), var(--color-end, #eee));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* home page PAE/INTRANET devices smartphone + tablettes
   ========================================================================== */
@media only screen and (min-width:320px) and (max-device-width : 480px) {
	.uimm__startpage_sidepanel {
		flex-basis:380px;
		min-width:380px;
		background-color: #045f7d;
		overflow-y: auto;
	}
	.uimm_startpage_inside {
		min-height:calc(100% - 20px);
		padding:1rem;
		display: flex;
		justify-content: center;
		box-sizing:border-box;
	}
	.uimm__startpage_logo {
		position:fixed;
		bottom:20px;
	}
	.uimm__startpage_button {
		margin-top:10px;
	}
	.uimm__startpage_logo_dim {
		width:122px;
		height:auto;
	}
	.uimm__startpage_title {
		font-family: Noah;
		padding:10px 20px 0;
		text-align:center;
		text-transform:uppercase;
		font-size:2rem;
		color:#fff;
		letter-spacing: .035em;
	}
	.front-login--title {
		padding:2rem 1rem 1rem 1rem;
	}
	.front-login--title p {
		font-size: 1.8rem;
		padding:0 1rem;
	}
	.front-login--title p:nth-child(2){
		font-size: 1rem;
	}
	footer .rgpd {
		display:none;
	}
	footer .footer .sites {
		display:none;
	}
	footer .footer .enseigne {
		width:70%;
		font-size:1rem;
	}
	footer .footer .enseigne-marque {
		font-size:.705rem;
	}
}
/* Error Page 
   ========================================================================== */
.home-error-progressBar {
    margin:1rem auto;
	width: 100%;
	max-width:160px;
	background-color: #ddd;
}
.home-error-progressBar-background {
 	width: 0%;
 	height: 16px;
 	background-color: #4CAF50;
 	transition: width 5s linear;
 	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);
 	background-size: 20px 20px; /* ajuster pour contrôler la taille des hachures */
}
/* home page PAE/INTRANET devices laptop >= 768px 
   ========================================================================== */
@media only screen and (min-width:768px) {
	.uimm__startpage_sidepanel {
		flex-basis:480px;
		min-width:480px;
		background-color: #045f7d;
		overflow-y: auto;
	}
	.uimm_startpage_inside {
		min-height:calc(100% - 20px);
		padding:2rem 4rem;
		display: flex;
		justify-content: center;
		box-sizing:border-box;
	}
	.uimm__startpage_button {
		margin-top:1rem;
		position:relative;
		z-index:2;
	}
	.uimm__startpage_logo {
		position:fixed;
		bottom:2rem;
	}
	.uimm__startpage_title {
		padding:2rem 0;
		text-align:center;
		text-transform:uppercase;
		font-size:2rem;
		color:#fff;
	}
}	
/* home page APPS PAE/INTRANET devices <= 768px and less
   ========================================================================== */
@media only screen and (max-device-height: 768px) {
	.uimm__startpage_title {
		padding:2rem 0 1rem 0;
		text-align:center;
		text-transform:uppercase;
		font-size:2rem;
		color:#fff;
	}
	.uimm_startpage_inside {
		min-height:calc(100% - 20px);
		padding:2rem;
		display: flex;
		justify-content: center;
		box-sizing:border-box;
	}
	.uimm__startpage_logo_dim {
		width:162px;
		height:auto;
	}	
	.uimm__startpage_logo {
		position:fixed;
		bottom:20px;
	}
}
.login__imageback.main {
	background:url('/images/background/fab2560x1440.jpg');
	background-size: cover;
	background-position: center;
	height:100%;
}
.login__preinsc.habilitation {
	background:url('/images/background/robot2048x1367.jpeg');
	background-size: cover;
}
/* infos
   ========================================================================== */
.front-info {
	font-style:italic;
	margin-top:var(--spacing-md);
	color:#fff;
	padding:.25rem 0 .25rem 10px;
}
.front-info.red {
	border-left:4px solid var(--charte-uimm-logo-rouge);
}
.front-info.blue {
	border-left:4px solid #0085C3;
}
.front-info.yellow {
	border-left:4px solid #ffcc00;
}
/* Boutons submit
   ========================================================================== */
.mobile-submitBtn {
	width:100%;
	border:1px solid #ddd !important;
}