@charset "utf-8";

:root {

	--template-couleur-primaire:rgba(242, 132, 51, 1);
	--template-couleur-secondaire:rgba(44, 90, 160, 1);
	--template-couleur-secondaire-80:rgba(44, 90, 160, 0.9);

	--template-couleur-fond-primaire:rgba(242, 132, 51, 1);
	--template-couleur-fond-primaire-10:rgba(44, 90, 160, 0.1);

	--template-couleur-fond-secondaire-50:rgba(255, 255, 255, 0.5);
	--template-couleur-fond-secondaire-60:rgba(255, 255, 255, 0.6);
	--template-couleur-fond-secondaire-80:rgba(255, 255, 255, 0.8);
	--template-couleur-fond-secondaire-90:rgba(255, 255, 255, 0.9);

	--template-couleur-text-primaire:rgba(50, 50, 50, 1);
	--template-couleur-text-secondaire:rgba(100, 100, 100, 1);

	--template-couleur-bouton-primaire:rgba(240, 240, 240, 0.5);
	--template-couleur-bouton-primaire-hover:rgba(230, 230, 230, 0.6);
	--template-couleur-bouton-primaire-active:rgba(230, 230, 230, 1);

	--template-couleur-bulle-fond-secondaire:rgba(180, 180, 180, 1);

	--template-couleur-form-default:rgba(100, 100, 100, 1);
	--template-couleur-form-ok:rgba(44, 90, 160, 1);
	--template-couleur-form-ko:rgba(240, 100, 100, 1);

}
/*
@font-face {
	font-family: Arial_Monospaced;
	src: url(Arial_Monospaced_MT.ttf?v=var(--sirius_version));
}
*/
body, html {

	overflow:hidden;
	overflow-x:hidden;
	
} 

html {

	overflow-y:hidden;
	box-sizing:border-box;

}

*, *:before, *:after {
	box-sizing: inherit;
}


body {

	padding:0;
	margin:0;

	font-size: 1.3vw;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	color:var(--template-couleur-text-primaire);
	
}

body, label, input, textarea, select, button, a, p, h1, h2, h3 {

	
	font-family: Arial,"Helvetica Neue", sans-serif;

}

img {
	border:0;
}

a:active, a:focus {
	outline:none;
}

canvas, canvas:active, canvas:focus {
	outline:none;
}

button, button:active, button:focus {
	
	cursor:pointer;
	outline:none;
	
	border-style:unset;
	
}

/* Definitions des textes */

h1 {

	margin:0.4em 0 0.2em 0;
	padding:0;

	font-weight:normal;
	
	color:var(--template-couleur-primaire);
	
	font-size:1.3em;
	width: 100%;
	
	display: block;
	float: left;

}

h1.construction {

	margin:1em 0;
	padding:1em;

	font-weight:lighter;
	
	background-color:#aaa;
	
	border-radius:3em;
	
	color:#fff;
	
	font-size:1.3em;
	width: auto;
	
	display: block;
	float: left;

}

a {
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;	
	
	cursor:pointer;
	
	color:color:var(--template-couleur-secondaire);
	text-decoration:underline;
	
}

h2.renforce {

	color:var(--template-couleur-secondaire);

}

h2 {

	margin:0.3em 0 0.15em 0;
	padding:0;

	font-weight:normal;
	
	font-size:1.1em;

	color:var(--template-couleur-text-secondaire);
	width: 100%;

}

h3 {

	margin:0.3em 0 0.15em 0;
	padding:0;

	font-weight:normal;

	color:#999;
	
	font-size:1em;

	width: 100%;
	
}

h4 {

	margin:0.2em 0 0.1em 0;
	padding:0;

	font-weight:normal;

	color:#999;
	
	font-size:1.1em;

	width: 100%;	
	
}

p {

	padding:0.5em 0 0.5em 0;
	margin:0;

	font-weight:normal;
	text-align:justify;

	color:#666;
	font-size:1em;

}

p.decallage {

	padding:0.5em;

}

p.decallage_que_horizontal {

	padding:0 0.75em;

}


ul {

	padding:0;
	margin:0 1em;

	list-style-type: none;

	text-align:justify;
	font-size:1em;

}

ul li {

	padding:0 0 0.75em 0.6em;
	margin:0;

	font-size:1em;

	width:100%;
	
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
	flex-wrap:wrap;	
	
	position:relative;	
	display:flex;
	float:left;	
	
}

ul li:last-child {
	padding-bottom:0;
}

ul li p {

	width: calc(100% - 4em);
	padding:0;
	
}

ul li:before {
	
	content: "■";

	padding: 0 0.85em 0 0;
	margin: -0.1em 0 0 0;
	
	font-size:1em;
	
	position:relative;	
	display:block;
	float:left;
	
}

ol {

	padding:0 0 0 1em;
	margin:0 1em;

	text-align:justify;
	font-size:1em;

}

ol li {

	padding:0 0 0 0.6em;
	margin:0 0 0.5em 0;

}

ol li:before {
	
	padding:0em 1em 0 0;
	margin:0;
	
	line-height:1em;
	font-size:1em;

	color:666;
	
	float:left;
	
}

/* 3 Zones */

.haut {
	
	margin:0;
	padding:0;
	
	font-size:1em;
	width:100%;
	height:4em;
	
	justify-content:space-between;
	align-items:center;
	align-content:center;
	flex-wrap:nowrap;

	border-top: 0.2em solid var(--template-couleur-secondaire);
	
	background-color:#fff;
	box-shadow: 0em 0em 0.3em #555555;

	z-index:100;
	
	top:0;
	left:0;

	position:fixed;
	display:flex;

}

.haut .logo {
	
	margin:0 1em;
	padding:0;
	
	font-size:1em;
	height:100%;
	width:15em;
	
	justify-content:center;
	align-items:center;
	align-content:center;
	flex-wrap:nowrap;
	
	cursor:pointer;

	background-repeat: no-repeat;
    background-size: 15em auto;
    background-position: center center;
	
	background-image: url(../img/logo/Logo_Sirius_Plan_Horizontal.svg?v=1.5);

	position:relative;
	display:flex;
	
	float:left;

}


.haut .menu {
	
	margin:0 2em 0 1em;
	padding:0;
	
	font-size:1em;
	height:100%;
	
	justify-content:flex-end;
	align-items:center;
	align-content:center;
	flex-wrap:nowrap;

	position:relative;
	display:flex;
	
	float:right;

}

.haut .menu .bouton {
	
	margin:0 0 0 0.5em;
	padding:0.5em 1em;
	
	font-size:1em;
	height:100%;
	
	border-bottom:0.1em solid transparent;
	background-color:var(--template-couleur-bouton-primaire);
	
	justify-content:center;
	align-items:center;
	align-content:center;
	flex-wrap:nowrap;

	position:relative;
	display:flex;
	
	transition:all 0.5s easy;
	
	float:left;

}

.haut .menu .bouton:hover {
	
	color: var(--template-couleur-secondaire);
	border-bottom-color:var(--template-couleur-primaire);
	background-color:var(--template-couleur-bouton-primaire-hover);

}

.haut .menu .bouton.active {
	
	color: var(--template-couleur-secondaire);
	border-bottom-color:var(--template-couleur-primaire);
	background-color:var(--template-couleur-bouton-primaire-active);

}


.bas {
	
	margin:0;
	padding:0;
	
	font-size:1em;
	width:100%;
	height:1.5em;
	
	justify-content:center;
	align-items:center;
	align-content:center;
	flex-wrap:nowrap;

	background-color:#fff;

	z-index:100;
	
	bottom:0;
	left:0;

	position:fixed;
	display:flex;

}

.bas span {
	
	margin:0;
	padding:0;
	
	font-size:0.7em;	

}


.centre {
	
	margin:0;
	padding:0;
	
	font-size:1em;
	width:100%;
	height:calc(100% - 5.5em);
	
	justify-content:center;
	align-items:center;
	align-content:center;
	flex-wrap:wrap;
	flex-direction: column;

/*	background-color:var(--template-couleur-fond-primaire-10); */
	
	background-repeat: repeat-x;
    background-position: bottom;

	background-color: var(--template-couleur-fond-primaire-10);	
	background-image: url(../img/centre_fond.svg?v=1.5);
	
	z-index:50;

	top:4em;
	left:0;

	position:fixed;	
	display:flex;

}

.centre:before {
	
	margin:0;
	padding:0;
	
	font-size:1em;

	top:0;
	bottom:0;
	left:0;
	right:0;
	
	content:'';
	
	justify-content:center;
	align-items:center;
	align-content:center;
	flex-wrap:wrap;

/*	background-color:var(--template-couleur-fond-primaire-10); */

	background: rgba(255, 255, 255, 0.6);

	position:absolute;	
	display:flex;

}



.centre .page {
	
	margin:0;
	padding:1em;
	
	font-size:1em;
	width:100%;
	
	justify-content:flex-start;
	align-items:center;
	align-content:flex-start;
	flex-wrap:wrap;

	position:relative;	
	display:flex;
	float:left;

}

.centre .page.avec_scroll {
	
	overflow:auto;

}

.page .ligne {
	
	margin:0;
	padding:0;
	
	font-size:1em;
	width:100%;
	
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
	flex-direction:row;
	flex-wrap:nowrap;

	position:relative;	
	display:flex;
	float:left;

}

.page .colonne {
	
	margin:0;
	padding:1em;
	
	font-size:1em;
	width:100%;
	
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
	flex-wrap:wrap;

	position:relative;	
	display:flex;
	float:left;

}

.page .boite {
	
	margin:0 0 0.5em 0;
	padding:0.5em 1em;
	
	font-size:1em;
	width:100%;
	
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
	flex-wrap:wrap;

	background: rgba(255, 255, 255, 1);
	border:0.2em dotted #ddd;

	position:relative;	
	display:flex;
	float:left;

}

.page .milieu {
	
	justify-content:center;
	align-items:center;
	
}

.page .cliquable {
	
	cursor:pointer;
	background-color:unset;
	
}

.page .cliquable:hover {
	
	background-color:var(--template-couleur-bouton-primaire);
	
}

.page .vertical {
	
	align-content:center;
	flex-direction:column;
	
}

.page .sans_margintop {
	
	justify-content:center;
	align-items:center;
	flex-direction:column;
	
}

span.bulle {
	
	margin:0.75em;
	padding:0.75em 1em;
	
	font-weight: normal;
	
	background-color: var(--template-couleur-secondaire);

	border-radius: 3em;

	color: #fff;
	font-size: 1em;
	width: auto;

	justify-content:flex-start;
	align-items:center;
	align-content:flex-start;
	flex-wrap:wrap;

	display: flex;
	float: left;

}

.cliquable span.bulle {

	background-color: var(--template-couleur-bulle-fond-secondaire);

}

span.icone {
	
	margin:0 0.5em 0 0.2em;
	padding:0;
	
	font-weight: normal;
	
	background-repeat:no-repeat;
	background-size: 90% 90%;
	background-position: center center;
	
	color: #fff;

	font-size: 1em;
	
	width:1.5em;
	height:1.5em;

	display: block;
	float: left;

}

span.icone.telephone {
	
	background-image:url('../img/icones/icone_telephone.svg?v=1.5');

}

span.icone.dna {
	
	background-image:url('../img/icones/icone_dna.svg?v=1.5');

}

.page a.bouton {
	
	margin:0;
	padding:0.5em 1em;
	
	font-size:1em;
	height:100%;
	
	background-color:var(--template-couleur-bouton-primaire);
	
	border-radius:0.8em;
	
	justify-content:center;
	align-items:center;
	align-content:center;
	flex-wrap:nowrap;

	position:relative;
	display:flex;
	
	transition:all 0.5s easy;
	
	float:left;

}

.page a.bouton:hover {
	
	color: var(--template-couleur-secondaire);
	background-color:var(--template-couleur-bouton-primaire-hover);

}

.page a.bouton.active {
	
	color: var(--template-couleur-secondaire);
	border-bottom-color:var(--template-couleur-primaire);
	background-color:var(--template-couleur-bouton-primaire-active);

}

.reveal a.bouton:hover img {
    background:unset;
    border-color:unset;
    box-shadow:unset;
}




/* Page modal */

.centre .page_modal {
	
	margin:0;
	padding:4em 10em;
	
	font-size:1em;
	width:100%;
	height:100%;
	
	justify-content:flex-start;
	align-items:center;
	align-content:flex-start;
	flex-wrap:wrap;
	
	background-color:rgba(175, 175, 175, 0.7);
	
	z-index:100000;
	
	animation: affichage_opaque 400ms linear;
	animation-direction: reverse;
	
	position:absolute;	
	display:none;
	float:left;

}

.centre .page_modal.actif {

	animation: affichage_opaque 400ms linear;
	display:flex;
	
}

.page_modal .page_conteneur {

	margin:0;
	padding:1em;
	
	font-size:1em;
	width:100%;
	height:100%;
	
	justify-content:flex-start;
	align-items:center;
	align-content:flex-start;
	flex-wrap:wrap;
	
	background-color:rgba(255, 255, 255, 1);
	box-shadow: 0em 0em 0.3em #555555;
	
	position:relative;
	display:flex;
	float:left;
	
	
}

.page_modal .bouton {

	margin:0;
	padding:0;
	
	font-size:1em;

	cursor:pointer;
	
	background-color:transparent;
		
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	
	position:relatif;	
	display:flex;
	float:left;
	
}

.page_modal .bouton .bouton_icone {

	margin:0;
	padding:0;
	
	font-size:1em;

	width: 2.5em;
	height:	2.5em;

	background-color:transparent;

	background-repeat:no-repeat;
	background-size: 80% 80%;
	background-position: center center;

	transition: all 0.2s ease;
	
	position:relatif;	
	display:block;
	float:left;
	
}

.page_modal .bouton.bouton_fermer .bouton_icone {

	top:0;
	right:0;

	position:absolute;
	
}

.page_modal .bouton.bouton_fermer .bouton_icone {

	background-image:url('../img/boutons/bouton_fermer.svg?v=1.5');
	
}

.page_modal .bouton .bouton_icone:hover {

	background-color:var(--template-couleur-bouton-primaire-hover);
	
}


/* formulaire */

.formulaire {
	
	margin:0 0 0.5em 0;
	padding:0 0.5em;
	
	font-size:0.8em;
	width:100%;
	
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
	flex-wrap:wrap;

	position:relative;	
	display:flex;
	float:left;

}

.formulaire .formulaire_champs {
	
	margin:0 0 0.5em 0;
	padding:0;
	
	font-size:1em;
	width:100%;
	
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
	flex-wrap:wrap;

	position:relative;	
	display:flex;
	float:left;

}

.formulaire .formulaire_ligne {
	
	margin:0;
	padding:0;
	
	font-size:1em;
	width:100%;
	
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
	flex-wrap:nowrap;

	position:relative;	
	display:flex;
	float:left;

}

.formulaire .formulaire_ligne.menu_boutons {

	margin-top:1em;

	justify-content:space-around;
	align-items:center;
	align-content:center;
	
}

.formulaire .formulaire_ligne .formulaire_champs {

	margin-left:0.5em;
	margin-right:0.5em;

}

.formulaire .formulaire_ligne .formulaire_champs:first-child {

	margin-left:0;

}

.formulaire .formulaire_ligne .formulaire_champs:last-child {

	margin-right:0;

}

.formulaire_champs .formulaire_champs_entete {
	
	margin:0;
	padding:0.25em 0;
	
	font-size:1em;
	width:100%;
	
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
	flex-wrap:wrap;

	position:relative;	
	display:flex;
	float:left;

}

.formulaire_champs .formulaire_champs_entete span {

	color:var(--template-couleur-form-default);
	
}

.formulaire_champs.ok .formulaire_champs_entete span {

	color:var(--template-couleur-form-ok);
	
}

.formulaire_champs .formulaire_champs_entete span.message {

	margin:0;
	padding:0;
	
	font-size:0.8em;
	width:100%;

	color:var(--template-couleur-form-ko);
	
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
	flex-wrap:wrap;

	position:relative;	
	display:none;
	float:left;

}

.formulaire_champs.ko .formulaire_champs_entete span.message {

	display:flex;

}

.formulaire_champs .formulaire_champs_valeur {
	
	margin:0;
	padding:0;
	
	font-size:1em;
	width:100%;
	
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
	flex-wrap:wrap;

	position:relative;	
	display:flex;
	float:left;

}

.formulaire_champs .formulaire_champs_valeur input {
	
	margin:0;
	padding:0.25em 0.5em;
	
	font-size:1em;
	width:100%;
	
	color:var(--template-couleur-form-default);
	border:0.1em solid var(--template-couleur-form-default);
	
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
	flex-wrap:wrap;

	position:relative;	
	display:flex;
	float:left;

}

.formulaire_champs.ok .formulaire_champs_valeur input {

	border-color:var(--template-couleur-form-ok);
	color:var(--template-couleur-form-ok);
	
}

.formulaire_champs.ko .formulaire_champs_valeur input {

	border-color:var(--template-couleur-form-ko);
	color:var(--template-couleur-form-ko);
	
}


.formulaire_champs .formulaire_champs_valeur textarea {
	
	margin:0;
	padding:0.25em 0.5em;
	
	font-size:1em;
	line-height:1;
	min-height:6.6em;
	width:100%;
	
	color:var(--template-couleur-form-default);
	border:0.1em solid var(--template-couleur-form-default);
	
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
	flex-wrap:wrap;

	position:relative;	
	display:flex;
	float:left;

}

.formulaire_champs.ok .formulaire_champs_valeur textarea {

	border-color:var(--template-couleur-form-ok);
	color:var(--template-couleur-form-ok);
	
}

.formulaire_champs.ko .formulaire_champs_valeur textarea {

	border-color:var(--template-couleur-form-ko);
	color:var(--template-couleur-form-ko);
	
}


.formulaire .bouton {
	
	margin:0;
	padding:0.5em 1em;
	
	font-size:1em;
	
	background-color:var(--template-couleur-bouton-primaire-30);
	
	border-radius:0.3em;
	border:0.1em solid #fff;
	
	justify-content:center;
	align-items:center;
	align-content:center;
	flex-wrap:nowrap;

	position:relative;
	display:flex;
	float:left;	

}

.formulaire .bouton:hover {

	background-color:var(--template-couleur-bouton-primaire);

}

.formulaire .bouton.envoyer {

	color:#fff;
	background-color:var(--template-couleur-secondaire-80);
	

}

.formulaire .bouton.envoyer:hover {

	background-color:var(--template-couleur-secondaire);

}







@keyframes affichage_opaque {
	
	0% {
		opacity: 0.2;
	}
	50% {
	}
	100% {
		opacity: 1;
	}
	
}