@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

:root{
	--border: rgba(0,0,0,0.2);
	--header: #8490c9;
	--white: #fafafa;	
	--container: 1360px;
}



*{
	box-sizing: border-box;
}

html, body{
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 24px;
	color: #000;
}

body{
	overflow-y: scroll;
}

body::before{
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100vh;
	/*background: url(images/background.svg);*/
	background-size: 100% 100%;
	z-index: -1;
}




html, body, input, select, option, textarea, button{
	font-family: 'Montserrat', sans-serif;
	font-variant: tabular-nums;
	-moz-font-feature-settings: "tnum";
	-webkit-font-feature-settings: "tnum";
	font-feature-settings: "tnum";
}


::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}

::-webkit-scrollbar-track {
	background: #f0f8ff;
	padding: 1px;
}

::-webkit-scrollbar-thumb {
	background: var(--primary);
	border-radius: 4px;
}


a{
	text-decoration: none;
	color: inherit;
}

#container_principal p a:not(.btn){
	text-decoration: underline;
}

.link{
	color: blue;
}

.link:hover{
	text-decoration: underline;
}

.underline{
	text-decoration: underline;
}

header{
	color: var(--white);
	display: flex;
	align-items: center;
	padding: 8px 16px;
}

header h1{
	font-size: 28px;
	margin: 0;
}

header p{
	color: var(--primary);
	font-size: 16px;
	margin: 0;
}

header img{
	height: 73px;
	margin-right: 32px;
}





.btn, input[type=submit]{
	display: inline-flex;
	border: 1px solid #000;
	padding: 8px;
	border-radius: 10px;
	background: var(--primary);
	color: var(--white);
	cursor: pointer;
	transition: .3s;
	align-items: center;
	-webkit-appearance: none;
	text-transform: initial;
	font-family: 'Montserrat', sans-serif;
}

.btn:hover, input[type=submit]:hover{
	opacity: .7;
	transition: .3s;
}

input[type=time]{
	font-family: 'Montserrat', sans-serif;
	height: 29px;
}

.btn-small{
	padding: 2px 8px!important;
}

.btn-error{
	background: #ff6060!important;
}

.btn-error:hover{
	background: #ff606099!important;
}

.btn-secondary{
	background: #FFF!important;
	color: #000!important;
}

.btn-secondary:hover{
	background: #dfdddd!important;
}





.admin_menu{
	background: var(--primary);
	padding: 8px 16px;
	color: #FFF;
	font-size: 16px;
	position: relative;
	display: flex;
	justify-content: space-between;
}

.admin_menu a, .admin_menu span{
	margin: 0 8px;
}

.admin_menu a.icon{
	position: relative;
	top: 3px;
}


#recherche_header{
	display: inline-flex;
	position: relative;
	color: #000;
}

#recherche_header #recherche{
	padding: 4px 12px;
	width: 260px;
	border: 2px solid #000;
	font-size: 12px;
}

#recherche_header svg{
	position: absolute;
	top: 2px;
	right: 8px;
}





hr{
	margin: 32px 0;
}



.container{
	padding-left: calc(50% - var(--container) / 2);
	padding-right: calc(50% - var(--container) / 2);
}

.container_nomarge{
	background: var(--gris);
	margin-top: 0!important;
}

.container h2{
	margin-top: 0;
}

#principal .container{
	padding-bottom: 30px;
	position: relative;
}

#container_principal{
	background: white;
	margin-left: calc(50% - var(--container) / 2);
	margin-right: calc(50% - var(--container) / 2);
	border-radius: 28px;
	/*padding: 40px;*/
}




.submenu{
	display: flex;
	align-items: center;
	border-bottom: 2px solid;
	font-size: 20px;
	height: 60px;
	padding-bottom: 16px;
}

.submenu a{
	padding: 9px;
	margin-left: 8px;
}

.submenu .active{
	background: var(--primary);
	color: var(--white);
	border-radius: 24px;
}

.submenu__admin{
	margin-top: 16px;
}

a.submenu__right{
	margin-left: auto;
}





.formatted p{
	margin: 0;
}

.ql-size-small{
	font-size: 15px;
}

.ql-size-large{
	font-size: 23px;
}

.ql-size-huge{
	font-size: 32px;
}





.form{
	--width: 500px;
}

.form tr td:first-child{
	text-align: right;
	padding: 8px;
}

.form .columns{
	--width: 200px;
}

.form .right{
	float: right;
}

.form input:not([type=checkbox]), .form select{
	width: var(--width);
	font-size: 16px;
}




.bullet{
	width: 12px;
	height: 12px;
	display: block;
	border-radius: 50%;
	background: var(--color);
	box-shadow: 1px 1px 5px var(--color), -1px -1px 5px var(--color);
}




.tooltip{
	position: relative;
	display: inline-block;
	cursor: help;
}

.tooltip span{
	visibility: hidden;
	width: 240px;
	font-size: 14px;
	background-color: black;
	color: #fff;
	text-align: center;
	padding: 4px;
	border-radius: 6px;
	position: absolute;
	z-index: 1;
	bottom: 100%;
	left: 50%;
	margin-left: -60px;
	z-index: 9999;
}

.tooltip:hover span{
	visibility: visible;
}



.photo{
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 100%;
}




.searchTable th{
	cursor: pointer;
}

.grille, .table{
	border-collapse: collapse;
}

.grille th, .grille td{
	border: 1px solid;
	padding: 0;
}

.grille .padding, .table td, .table th{
	padding: 4px 8px;
}

.grille th, .table th{
	background: var(--primary);
	color: var(--white);
}

.grille a{
	display: flex;
	gap: 8px;
	padding: 4px 8px;
}

.grille a:hover{
	transition: .3s;
	background: var(--primary);
	color: var(--white);
}

.grille a svg{
	height: 24px;
}




.table{
	border: 1px solid;
}

.table td{
	border-bottom: 1px solid;
}

.table.noborder td, .table tr.noBorder td{
	border-bottom: 0;
}

td.noBorder{
	border: 0;
	height: 16px;
}





.unread_number{
	display: inline-flex;
	border-radius: 50%;
	background: var(--primary);
	color: white;
	padding: 8px;
}


[data-letters]:before{
	content: attr(data-letters);
	display: inline-block;
	min-width: 30px;
	height: 22px;
	font-size: 9px;
	text-align: center;
	border-radius: 50%;
	background: var(--bg);
	margin-right: 8px;
	color: white;
}

.tag[data-letters]:before{
	border-radius: 16px;
	padding: 0 8px;
}




.align_icons li, .align_icons li a{
	display: flex;
	align-items: center;
}

.align_icons li a, .align_icons li span{
	margin-left: 8px;
}

.align_icons li::before{
	content: '•';
	font-size: 20px;
}




.alert{
	display: inline-flex;
	border: 1px solid;
	border-radius: 10px;
	padding: 8px 16px;
	margin: 8px 0;
	color: green;
}



.listing{
	display: inline-flex;
	flex-direction: column;
	border: 1px solid;
	border-top: 0;
}

.listing a{
	background: var(--header);
	color: var(--white);
	margin: 4px;
	padding: 0 8px;
	border-left: 8px solid var(--primary);
}

.listing a:hover{
	transition: .3s;
	opacity: .7;
}


.activite__title{
	display: flex;
	gap: 8px;
	align-items: center;
	border-top: 1px solid;
	padding: 4px 8px;
	min-width: 400px;
	cursor: pointer;
}

.creneau{
	display: none;
	padding-left: 16px;
}

.rotate svg{
	transform: rotate(90deg);
	transition: .3s;
}






input, select, textarea, button{
	border: 1px solid var(--border);
	font-size: 14px;
	border-radius: 6px;
	padding: 4px;
	background: #FFF;
}

select[data-ssid] {
	pointer-events: none;
	opacity: 0;
	display: flex!important;
	position: absolute;
	margin-left: -100px;
}



.cardButton{
	display: grid;
	grid-template-columns: repeat(3, 250px);
	gap: 16px;
}

.cardButton a{
	display: flex;
	gap: 8px;
	line-height: 12px;
	text-align: center;
}



.cardInline{
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.cardInline a{
	display: inline-flex;
	gap: 8px;
	line-height: initial;
	padding: 0 8px;
}




.step{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--primary);
	position: relative;
	font-size: 20px;
	padding: 8px;
	border: 1px solid;
	/*background: no-repeat center / 80% url(images/step.svg);*/
}




.pulse{
	position: relative;
	border-radius: 50%;
	
	animation: pulse 2s infinite alternate;
}


@keyframes pulse {
	0% {
		color: #FFF;
		box-shadow: inset 0 0 0 0 #FFF;
	}
	100% {
		color: var(--primary);
		box-shadow: inset 0 0 0 3px var(--primary);
	}
}





.border{
	border: 1px dashed;
	padding: 10px;
	margin: 20px auto;
}

.inline{
	display: inline-block;
}

.wrap{
	display: flex;
	gap: 80px;
	flex-wrap: wrap;
	align-items: flex-start;
}

.flex{
	display: flex;
	justify-content: center;
	align-items: center;
}

b.flex{
	justify-content: flex-start;
	gap: 8px;
}

.flex.stack{
	flex-wrap: nowrap;
	width: 100%;
	margin-top: 8px;
}

.center{
	text-align: center;
}

.hidden{
	display: none;
}

.mt{
	margin-top: 16px;
}

.ml{
	margin-left: 16px;
}

.black{
	color: black;
}

.red{
	color: red;
}

.green{
	color: #00b44b;
}

.error{
	color: #ff6060;
}




.round{
	background: var(--color, #ff6060);
	color: var(--white);
	padding: 4px 8px;
	border-radius: 16px;
}




button{
	background: none;
	border: 0;
	cursor: pointer;
	color: #000;
}



.inputFile{
	display: none!important;
}

.file-select-button{
	border: 1px solid;
	border-radius: 10px;
	padding: 8px 16px;
	/*height: 36px;*/
	line-height: 18px;
	cursor: pointer;
}

.btn-small + .file-select-button{
	padding: 0 8px;
}

.file-select-button:hover{
	background: #dadada;
}

.file-select-name{
	margin-left: 14px;
}





footer{
	margin-top: 80px;
	padding-top: 24px;
	padding-bottom: 24px;
	background: #1a1a1a;
	color: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 176px;
}

.footer a{
	color: #FFF;
	height: 40px;
}

.footer svg, .socials svg{
	width: 30px;
	margin-right: 10px;
	transition: .3s;
}

.footer svg:hover, .socials svg:hover{
	transform: scale(1.4);
}



#contact .remarque{
	display: none!important;
}






.menu-mobile, .menu-close{
	display: none!important;
}

	
.show-xs{
	display: none;
}


@media only screen and (max-width: 1380px){
	
	:root{
		--container: calc(100vw - 40px * 2);
	}
	
}

@media only screen and (max-width: 1060px){
	
	.menu, nav{
		display: none!important;
	}
	
	.menu-open, .menu-open ul{
		position: fixed!important;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		background: #FFF;
		z-index: 1000;
		display: flex!important;
		flex-direction: column;
		justify-content: center;
		-ms-align-items: center;
		align-items: center;
	}
	
	nav .menu-close, .menu-mobile{
		display: block!important;
		position: absolute;
		top: 8px;
		right: 8px;
		padding: 8px;
		cursor: pointer;
		color: #000;
		font-size: 40px;
		font-weight: bold;
		font-family: sans-serif;
	}
	
	.menu-open a{
		display: block;
		padding: 16px;
		color: #000;
	}

	.menu li a{
		margin: 8px;
		width: 320px;
	}
	
	.menu ul li:hover .sub-menu{
		display: none!important;
	}
	
	.admin_menu, #recherche_header{
		display: block;
	}
}

@media only screen and (max-width: 1000px){
	
	footer{
		flex-direction: column;
		gap: 24px;
		text-align: center;
	}
	
	.footer:nth-child(1){
		margin: auto;
	}
	
}

@media only screen and (max-width: 840px){
	
	.login-container .login-form{
		width: 100%;
	}
	
	.login-container .login-form .bloc{
		display: flex;
		flex-direction: column;
	}
	
	.login-container .login-form .bloc input[type=button]{
		order: 2;
	}
	
	.login-container .login-form .bloc .bloc-full{
		grid-column: auto;
	}
	
	.ignore_mobile input:not(input[type=checkbox]){
		width: var(--width)!important;
	}
	
	input:not(input[type=checkbox]), select{
		width: 100%!important;
		-webkit-appearance: none;
		display: block;
	}
	
	.file-select-button{
		display: flex;
		justify-content: center;
		width: 100%;
	}
	
	.login-container .float{
		float: none!important;
		display: block;
	}
	
	#container_principal{
		padding: 0 16px;
		margin: 0;
	}

	.flex{
		flex-wrap: wrap;
	}
	
}

@media only screen and (max-width: 1000px){

	.hidden-xs{
		display: none!important;
	}
	
	.show-xs{
		display: block!important;
	}
	
	#container_principal{
		overflow: auto;
	}
	
	header{
		flex-direction: column;
	}

	.footer__right{
		display: none;
	}
	
	.container{
		padding: 16px;
	}
	
	.login-form{
		margin: 16px 0!important;
		padding: 16px 8px!important;
		width: 100%;
	}
	
	.login-container .grid .bloc{
		margin: 0!important;
	}
	
	.card .ss-main{
		width: 100%!important;
	}
	
	.card .ml{
		margin-left: 0;
	}
	
	.cta-margin{
		display: block;
		margin-top: 16px;
	}
	

	.login-form .select_naissance{
		width: 100%;
		grid-template-columns: repeat(3, 1fr);
	}
	
	.menu-open{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: #FFF;
		z-index: 1000;
		display: flex!important;
		flex-direction: column;
		justify-content: center;
		-ms-align-items: center;
		align-items: center;
	}
	
	.menu-open a{
		display: block;
		padding: 16px;
		color: #000;
	}
	
	header .menu li a{
		width: 100vw;
	}
	
	.submenu{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		justify-items: center;
		height: auto;
	}
	
	.submenu span{
		grid-column: span 5;
	}
}


@media only screen and (max-width: 700px){
	.submenu{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		justify-items: center;
		height: auto;
	}
	
	.submenu span{
		grid-column: span 3;
	}
}


@media only screen and (max-width: 500px){
	.submenu{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		justify-items: center;
		height: auto;
	}
	
	.submenu span{
		grid-column: span 2;
	}
	
	.tooltip{
		/*position: static;*/
	}
	
	.tooltip span{
		bottom: auto;
		top: -38px;
		right: 0;
		/*left: 200%;*/
		/*transform: translate(-100%);*/
	}
}


@media only screen and (max-width: 330px){
	.submenu{
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		justify-items: center;
		height: auto;
	}
	
	.submenu span{
		grid-column: span 1;
	}
}