@charset "utf-8";

/* Customisation calendrier */
input[type=date]::-webkit-calendar-picker-indicator {
  margin-left: -15px;
}

/* CSS Document */
@font-face { font-family: Comfortaa; src: url('Comfortaa-Regular.ttf'); } 
@font-face { font-family: Comfortaa; font-weight: bold; src: url('Comfortaa-Bold.ttf');}

/*
@media (prefers-color-scheme: dark) {
	:root{
		--color-primary-background: #112d4e;
		--color-primary-text: #F9F7F7;
		--color-second-background: #FFF;
		--color-second-text: #112d4e;
		--color-third-background: #F9F7F7;
		--color-third-text: #3F72AF;
		--color-panel-background: #112d4e;
		--color-panel-text: #FFF;
		--color-success-background: #F9F7F7;
		--color-success-text: #3faf42;
	}
}

@media (prefers-color-scheme: light) {
	:root{
		--color-primary-background: #F9F7F7;
		--color-primary-text: #112d4e;
		--color-second-background: #112d4e;
		--color-second-text: #FFF;
		--color-third-background: #3F72AF;
		--color-third-text: #F9F7F7;
		--color-panel-background: #FFF;
		--color-panel-text: #112d4e;
		--color-success-background: #3faf42;
		--color-success-text: #F9F7F7;
	}
}
*/

:root{
	--color-primary-background: #F9F7F7;
	--color-primary-text: #112d4e;
	--color-second-background: #112d4e;
	--color-second-text: #FFF;
	--color-third-background: #3F72AF;
	--color-third-text: #F9F7F7;
	--color-panel-background: #FFF;
	--color-panel-text: #112d4e;
	--color-success-background: #3faf42;
	--color-success-text: #F9F7F7;
}

.iconify{
	vertical-align: middle;
	margin: 0 1em 0 0.5em;
}
body, html {
	scroll-behavior: smooth;
	margin: 0;
	padding: 0;
	background-color: var(--color-primary-background);
	color: var(--color-primary-text);
	-webkit-font-smoothing: antialiased;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Style général */
.row-item{
	background-color: transparent;
}
*, :after, :before {
    box-sizing: border-box;
}
.container.navTop:before,.container.navTop:after, .container.dropdown-content:before,.container.dropdown-content:after, .modal-header:before, .modal-header:after{
	display: none;
}
hr {
	margin-top: 1rem;
	margin-bottom: 1rem;
	border: 0;
	border-top: 1px solid var(--color-primary-text);
}
input:invalid{
	box-shadow: 0 0 2px 1px red;
}
input:focus:valid{
	box-shadow: 0 0 3px 2px skyblue;
}
a:hover{
	text-decoration: none;
}
a:focus{
	text-decoration: none;
}
h1{
	font-family: Comfortaa;
	font-weight: bold;
	font-size: 3.5em;
}
h2{
	font-family: Comfortaa;
	font-weight: bold;
	font-size: 2.5em;
}
h3{
	font-family: Comfortaa;
	font-weight: bold;
	font-size: 1.8em;
}
h4{
	font-family: Comfortaa;
	font-weight: bold;
	font-size: 1.3em;
}
.modal{
	text-align: center;
	padding: 0!important;
  }
.modal-header{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.modal-body{
	display: flex;
	flex-direction: column;
}
.modal-body .col-lg-12, .modal-body .col-lg-11, .modal-body .col-lg-10{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.modal-sous-titre{
	display: flex;
	color: var(--color-primary-text);
	font-family: Comfortaa;
	font-size: 2rem;
	font-weight: bold;
}
.close{
	color: var(--color-primary-text);
	opacity: 1;
}
.close:hover{
	color: var(--color-third-background);
	opacity: 1;
}

/* Tooltip */
.bulle {
	position: relative;
	display: inline-block;
	border-bottom: 1px solid var(--color-second-background);
}
.bulletext{
	visibility: hidden;
	background-color: var(--color-second-background);
	color: var(--color-second-text);
	font-weight: normal;
	text-align: center;
	padding: 8px;
	border-radius: 4px;
	position: absolute;
	z-index: 1;
	top: 130%;
	margin-left: -100px;
	width: 200px;
	left: 50%;
	opacity: 0;
	transition: 0.2s ease-in-out;
}
.bulle:hover{
	cursor: text;
}
.bulle:hover .bulletext {
	visibility: visible;
	opacity: 1;
}
.bulle .bulletext::after {
	content: " ";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -5px;
	border: 5px solid;
	border-color: transparent transparent var(--color-second-background) transparent;
} 

/* Bannière supérieure*/
.top-banner{
	display: flex;
	justify-content: center;
	padding: 0.6em;
	font-family: Comfortaa;
	font-weight: bold;
	font-size: 12px;
	background-color: var(--color-primary-background);
	color: var(--color-primary-text);
}

/* Navigation */

/* Logo et Nav Top */
.navContainer{
	margin-bottom: 0 !important;
	background-color:var(--color-second-background);
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 3;
}
.navTop{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 3rem 0;
}
.navTop a{
	color: var(--color-second-text);
	font-family: Comfortaa;
	font-size: 1.7rem;
	text-decoration: none;
	padding: 1rem 1rem;
	display: block;
	border-bottom: 3px solid transparent;
	transition: 0.2s ease-in-out;
}
.navTop a:hover, #dropSpe a:hover, #dropFav a:hover{
	border-bottom: var(--color-second-text) solid 3px;
	transition: 0.2s ease-in-out;
	scale: 90%;
}
.navTop a:active, #dropSpe a:active, #dropFav a:active{
	border-bottom: var(--color-second-text) solid 3px;
	transition: 0.2s ease-in-out;
	scale: 90%;
}
#logoContainer{
	font-size: 2rem;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}
#logo{
	height: 3rem;
	padding: 0 10px;
	fill: var(--color-second-text);
}
#dropSpe, #dropFav{
	display: none;
	border-top: var(--color-second-text) solid 2px;
	background-color: var(--color-second-background);
	padding: 1em;
	width: 100%;
	top: 100%;
	position: absolute;
}
.dropdown-content{
	padding: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
#dropFav .dropdown-content{
	justify-content: space-evenly;
}
.dropdown-content a{
	font-size: 1em !important;
	color: var(--color-second-text);
	font-family: Comfortaa;
	font-size: 1.7rem;
	padding: 1rem 1rem;
	border-bottom: 3px solid transparent;
	transition: 0.2s ease-in-out;
}
#caretRap{
	transform: rotate(0deg);
	transition: 0.2s ease-in-out;
}
/* Favoris */
.navTop .icon{
	display: none;
}

/* Style containers main */

.main{
	padding-top: 80px;
	z-index: 1;
}
.main h2{
	padding: 0 0 60px 0;
	text-align: center;
}
.sectionRapport{
	margin-top: -200px;
	margin-bottom: 200px;
}

/* Style page d'accueil */
.accueil{
	height: 100%;
	background-color: var(--color-primary-background);
	color: var(--color-primary-text);
}
.accueil .row{
	margin: 30px 0;
	align-items: center;
	display:flex;
}
.accueil img{
	padding: 10px;
}
.accueilTitre{
	padding: 100px 0;
}

/* Style pages legales*/
.legal{
	margin-top: 30px;
}
.legal h2{
	margin-top: 40px;
}

/* Style anamnèse et status */

/* Style des blocks */
.panel-group{
	padding: 0 0 100px 0;
}
.panel-heading{
	background-color: var(--color-panel-background) !important;
	color: var(--color-panel-text) !important;
	display: flex;
	align-items: center;
	padding: 20px;
	border-radius:6px 6px 0 0;
	transition: all 0.2s ease-in-out;
}
.panel-heading:hover{
	cursor: pointer;
}
.collapsed{
	border-radius: 6px !important;
	transition: all 0.4s ease-in-out;
}
.panel-body{
	background-color: var(--color-panel-background) !important;
	color: var(--color-panel-text) !important;
	padding: 1.3rem;
	border-radius: 0 0 6px 6px !important;
	display: flex;
	flex-direction: column;
}
.panel-body .row{
	padding: 0.5rem;
}
.panel{
	border-radius: 6px !important;
	border: none;
	box-shadow: 0px 4px 12px rgb(61 74 84 / 12%), 0px 4px 16px rgb(61 74 84 / 6%);
	transition: all 200ms ease-in-out ;
}
.panel:hover{
	box-shadow: 8px 8px 24px rgb(61 74 84 / 10%), 14px 14px 16px rgb(61 74 84 / 5%);
	translate: -4px -4px;
	transition: all 200ms ease-in-out ;
}


.spe-body .spe-row{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

/* Oui / Non / NT */
.tripleChoix {
	display: flex;
	float: right;
}
.tripleChoix input {
	display: none;
}
.tripleChoix label {
	font-size: 12px;
	line-height: 1;
	text-align: center;
	align-items: center;
	margin: 0;
	padding: 4px 8px;
	box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
	transition: all 0.2s ease-in-out;
}
.tripleChoix label:hover {
	cursor: pointer;
	box-shadow: inset 0 0 5px 1px rgba(0, 0, 0, 0.2);
}
.tripleChoix input:checked + label {
	background-color: var(--color-third-background);
	color: var(--color-third-text);
}
.tripleChoix label:first-of-type {
	border-radius: 4px 0 0 4px;
}
.tripleChoix label:last-of-type {
	border-radius: 0 4px 4px 0;
}

.coordination label{
	background-color: var(--color-second-background);
	color: var(--color-second-text);
	box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.5);
}
.coordination label:hover{
	box-shadow: inset 0 0 5px 1px rgba(0, 0, 0, 0.3);
}
.coordination label:active{
	background-color: var(--color-primary-background);
	color: var(--color-primary-text);
}

.multipleChoix {
	display: flex;
	flex-wrap: wrap;
	justify-content: end;
	float: right;
}
.multipleChoix input {
	display: none;
}
.multipleChoix label {
	font-size: 12px;
	line-height: 1;
	text-align: center;
	padding: 4px 8px;
	box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
	border-radius: 4px;
	margin-left: 4px;
	transition: all 0.2s ease-in-out;
}
.multipleChoix label:hover {
	cursor: pointer;
	box-shadow: inset 0 0 5px 1px rgba(0, 0, 0, 0.2);
}
.multipleChoix input:checked + label {
	background-color: var(--color-third-background);
	color: var(--color-third-text);
}

/* SVG items*/
.mySVG {
	display:inline-block;
	text-align: center;
	padding: 20px;
}
.mySVG label {
	pointer-events: none;
	position: absolute;
}
.mySVG label svg use {
	pointer-events: visiblePainted;
	cursor: pointer;
}
.mySVG input[type="checkbox"] {
	display: none;
}
.mySVG svg {
	fill: var(--color-primary-background);
	stroke: var(--color-second-background);
	stroke-width: 2;
	width: 250px;
}
.mySVG svg text{
	fill: var(--color-primary-text);
	stroke-width: 0;
}
.mySVG svg .st0{
	stroke-width: 0;
}
.mySVG svg .st1{
	fill: var(--color-second-background);
	stroke-width: 0;
}
.mySVG svg .st2{
	fill: none;
	stroke-width: 2;
}
.mySVG input[type="checkbox"]:checked+label svg{
	fill: var(--color-third-background) !important;
}

/*Hide ou Show*/
.masquer{
	display:none;
}

/*Inputs (select, button, numbers, ...)*/
.inputAA{
	width: 100%;
	resize: none;
	padding: 10px;
}
.inputAuto{
	resize: none;
	line-height: 1;
	margin: 0px 0 5px 0px;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.2);
}
.inputMoitie{
	width: 50%;
	float: right;
	resize: none;
	line-height: 1;
	margin: 0 0 5px 0;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	text-align: center;
}
.labelChamp{
	float: right;
	margin-left : 10px;
}
.bouttons{
	background-color: transparent;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	margin: 0 5px 0 0;
	float: right;
	transition: all 0.2s ease-in-out;
}
.bouttons:hover{
	box-shadow: inset 0 0 5px 1px rgba(0, 0, 0, 0.2);
}
.plus-minus{
	font-weight: 800;
	min-width: 30px;
	margin: 0;
}
.btn-modal{
	background-color: transparent;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	text-align: center;
	padding: 4px 12px;
	margin: 10px 10% 0 0;
	width : 100%;
}
.btn-modal:hover{
	box-shadow: inset 0 0 5px 1px rgba(0, 0, 0, 0.2);
}

/* Rapport */
.rapport{
	margin: 0 auto 5rem auto;
	width: 80%;
	background-color: var(--color-panel-background);
	padding: 4rem 5rem;
	border-radius: 10px;
	box-shadow: 0px 4px 12px rgb(61 74 84 / 12%), 0px 4px 16px rgb(61 74 84 / 6%);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
}

.blockRapport:first-letter{
	text-transform: uppercase;
}

/*Spécialités*/
.footer-spe{
	border-top: solid 2px;
	padding: 1em 1em 0 1em;
	margin: 1em 0 0 0;
}
.organe-icone{
	max-width: 5rem;
	margin-right: 2rem;
	fill: var(--color-second-background);
}
.panel-heading .organe-icone{
	max-width: 2.5rem;
	margin-right: 1.5rem;
}
.spe-title{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 0 10rem 0;
}
.spe-title h2{
	padding: 0;
	margin: 0;
}

/*Bouton copier*/
.copier{
	border: solid var(--color-primary-text) 2px;
	border-radius: 50px;
	width: 100%;
	font-weight: bold;
	color: var(--color-primary-text);
	background-color: white;
	text-align: center;
	padding: 6px 12px;
	margin: 0 0 1rem 0;
	transition: all 200ms ease-in-out ;
}
.copier:hover{
	transform: scale(97%);
	transition: all 200ms ease-in-out ;
}
.copier:active{
	box-shadow: inset 0 0 4px 2px rgba(0, 0, 0, 0.2);
}

/*Zone rapport éditable*/
.editable{
	text-align: left;
	margin: 7px 0 0 0;
	padding: 0.6rem;
	width: 100%;
	min-width: 100px;
	color: rgba(0, 0, 0, 0.6);
	box-shadow: rgba(145 158 171 / 54%) 0px 0px 3px 1px;
}
.blanc-edit{
	background-color: var(--color-primary-background);
}

/*Snackbar copier*/
#rapportCopie, #savedFav {
  display:none;
  background-color: var(--color-success-background);
  color: var(--color-success-text);
  border-radius: 50px;
  padding: 14px 56px;
  position: fixed;
  z-index: 9999;
  bottom: 100px;
  font-size: 17px;
}
#rapportCopie.show, #savedFav.show {
  display:flex;
  justify-content: center;
  animation: fadein 0.2s, fadeout 0.2s 1.6s;
}
@keyframes fadein {
  from {bottom: 0px;opacity: 0;}
  to {bottom: 100px; opacity: 1;}
}
@keyframes fadeout {
  from {bottom: 100px; opacity: 1;}
  to {bottom: 0px; opacity: 0;}
}

/* Footer */
.footer{
	margin: 3em 0 0 0;
	background-color: var(--color-second-background);
	color: var(--color-second-text);
	text-align: justify;
	font-size: 12px;
	font-family: sans-serif;
}
.footer a{
	color: var(--color-second-text);
	text-decoration: underline;
}
.footerTier{
	box-shadow:inset -2px 0px 0px 0px var(--color-primary-background);
	padding:2em;
}
.footerTitre{
	font-size: 1.5em;
	font-family: Comfortaa;
	font-weight: bold;
	color: var(--color-second-text);
	padding-bottom: 6px;
}

/* Responsiveness */
@media screen and (max-width: 991px){
	.sectionRapport {margin-top: -400px; margin-bottom: 400px;}
	.navTop{
		flex-flow: column;
	}
	#logoHamburger{
		display: flex;
		align-items: center;
		flex-flow: row;
		justify-content: space-between;
	}
	.navTop .navItem {
		display: none;
	}
	.navTop .icon{
		display: flex;
	}
	.navTop div{
		position: relative;
		text-align: center;
		background-color: transparent;
		box-shadow: none;
	}
	.montrer .navItem{
		display: flex;
	}
	.dropdown-content{
		flex-direction: column;
		align-items: center;
	}
}