@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/*
	l'élement root possède une taille par défaut de police : html 100% précise la référence pour 1 rem.
	vw et vh : largeur et hauteur du viewport (1vw = 1% de la largeur du viewport).
*/

/* Couleurs ISM Corum charte graphique 2018 */
:root {
	--ism-orange-dark: 		#c83b1c;			/* Orange foncé */
	--ism-orange-medium: 	#ee7f36; 		/* Orange moyen */
	--ism-orange-light: 		#f6c1a0; 		/* Orange clair */
	--ism-bleu-dark: 			#385e96;			/* Bleu foncé */
	--ism-bleu-medium: 		#94b9da;			/* Bleu moyen */
	--ism-bleu-light: 		#cadced;			/* Bleu clair */
	--ism-color-dark: 		#0b3269;			/* Couleur foncée */
	--ism-color-medium: 		#7f7e7f; 		/* Couleur moyenne */
	--ism-color-light: 		#eff0f1;			/* Couleur claire */

	--notif-v50 : 				30px;	/* Valeur de référence dans le dimensionnement de la clochette des notifications. */
	--notif-v2  : calc(var(--notif-v50) *  2 / 50);
	--notif-v3  : calc(var(--notif-v50) *  3 / 50);
	--notif-v4  : calc(var(--notif-v50) *  4 / 50);
	--notif-v6  : calc(var(--notif-v50) *  6 / 50);
	--notif-v8  : calc(var(--notif-v50) *  8 / 50);
	--notif-v125: calc(var(--notif-v50) * 12.5 / 50);
	--notif-v15 : calc(var(--notif-v50) * 15 / 50);
	--notif-v25 : calc(var(--notif-v50) * 25 / 50);
	--notif-v30 : calc(var(--notif-v50) * 30 / 50);
	--notif-v32 : calc(var(--notif-v50) * 32 / 50);
}

.row {
	/* --bs-gutter-x : 0; */
}

html {
	font-size: 80%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

* {
	margin-bottom: 0;
}
*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

body {
	font-family: 'Montserrat', 'Verdana', sans-serif;
	font-size: 1rem;
	line-height: 1.5rem;
	color: black;
}
.bg-ism-orange-medium {
	background-color: var(--ism-orange-medium);
}
.bg-ism-orange-light {
	background-color: var(--ism-orange-light);
}
.bg-ism-white {
	background-color: white;
}
.bg-ism-bleu-dark {
	background-color: var(--ism-bleu-dark);
}
.text-ism-white {
	color: white;
}
.texte-simple {
	font-size: 1rem;
	line-height: 1.5rem;
	color: black;
	font-weight: 300; /* light */
}
.texte-de-chapeau {
	font-size: 1.1rem;
	line-height: 1.5rem;
	color: var(--ism-bleu-dark); /* Bleu foncé */
	font-weight: 500; /* medium */
	font-style: italic;
}
.texte-de-sous-rubrique {
	font-size: 1.5rem;
	line-height: 1.6rem;
	color: var(--ism-color-dark); /* Texte couleur foncé */
	font-weight: 700; /* bold */
}
.texte-de-rubrique {
	font-size: 1.8rem;
	line-height: 2rem;
	color: var(--ism-orange-dark); /* Orange foncé */
	font-weight: 700; /* bold */
}

h1 {
	text-transform: uppercase;
	font-size: 1.8rem;
	line-height: 2rem;
	color: var(--ism-orange-dark); /* Orange foncé */
	font-weight: 700; /* bold */
}
h2 {
	font-size: 1.5rem;
	line-height: 1.6rem;
	color: var(--ism-color-dark); /* Texte couleur foncé */
	font-weight: 700; /* bold */
}
h3 {
	font-size: 1.3rem;
	line-height: 1.4rem;
	color: var(--ism-color-dark); /* Texte couleur foncé */
	font-weight: 500;
}
h4 {
	font-size: 1.1rem;
	line-height: 1.2rem;
	color: var(--ism-color-dark); /* Texte couleur foncé */
	font-weight: 500;
}
.chapeau {
	margin-top: 0;
}
mark {
	padding: 0;
	font-weight: bold;
	background-color: var(--ism-bleu-medium);
}

/* Styles bootstrap surchargés. */
/* ============================ */
a {
	color: initial;
	text-decoration: none;
}
nav ul.nav.nav-pills a.nav-link.disabled {
	background-color: lightgrey;!important;
}
a.btn, button.btn {
	margin-right: 0.5rem;
}
table.table td {
	white-space: nowrap;
}
table.table td.retourLigne {
	white-space: normal;
}
table.table-striped {
	font-size: 1rem;
}
thead.sticky-header {
	font-size: 1rem;
}
table.table-striped a:hover {
	color: initial;
	background-color: var(--ism-bleu-light);
}
div.input-group-append button i.bi-search::before {
	line-height: 2;
}

div.xpxForms_blocBoutonsAfter a.btn-secondary i.fa-gear::before {
	line-height: 1.5;
}
input.form-control-plaintext:read-only {
	padding-left: 0.75rem;
}


/* Autres styles */
/* ============= */

div.logo {
	color: var(--ism-orange-dark);
}

nav.invisible {
	height: 0;
}

nav#navEspaces {
	padding-bottom: 0;
	border-bottom: var(--ism-bleu-dark) 5px solid;
}
nav#navEspaces .nav-item {
	margin-left: 0.1rem;
	margin-right: 0.1rem;
}

nav#navEspaces .nav-tabs .nav-link {
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
	background-color: var(--ism-bleu-light);
	border-color: var(--ism-bleu-light);
}
nav#navEspaces .nav-tabs .nav-link.active {
	background-color: var(--ism-bleu-dark);
	color: white;
	border-bottom-color: var(--ism-bleu-dark);
}
nav#navEspaces .nav-tabs .nav-link:hover {
	background-color: var(--ism-bleu-dark);
	color: white;
}

.dropdown-menu {
	background-color: var(--ism-bleu-dark);
	padding: 0 0;
	border: 2px black solid;
}
.dropdown-menu a {
	color: white;
}


nav.ism-margin {
	margin-bottom: 1rem;
}
nav ul.nav.nav-pills li.nav-item {
	margin-bottom: 1rem;
}
nav ul.nav.nav-pills a.nav-link {
	padding-right: 0.5rem;
	padding-left: 0.5rem;
	margin-right: 2rem;
	background-color: var(--ism-bleu-medium);
	color: white;
	font-weight: bold;
	border: 2px var(--ism-bleu-medium) solid;
}
nav ul.nav.nav-pills a.nav-link.chevron {
	margin-right: 0rem;
	padding: 0.5rem 0rem;
	border: 0px;
	background-color: transparent;
	color: black;
	font-size: 1.5rem;
}
nav ul.nav.nav-pills a.nav-link.active {
	background-color: var(--ism-bleu-dark);
	border: 2px var(--ism-bleu-dark) solid;
}
nav ul.nav.nav-pills a.nav-link:hover {
	background-color: var(--ism-bleu-dark);
	border: 2px var(--ism-orange-dark) solid;
}
nav ul.nav.nav-pills li.nav-item.chevron a.nav-link {
	margin-right: 0rem;
}




/* Section de page */
/*=================*/

section.container {
	min-height: 68vh;
}
section.container nav.bg-ism-bleu-dark {
	--bs-navbar-padding-y: 0rem;
}
section.container nav.bg-ism-bleu-dark a.nav-link {
	line-height: 1rem;
}
p {
	margin-bottom: 0rem;
}


/* Formulaires */
/*=============*/
div.input-group, div.form-group {
	margin-top: 0.5rem;
}
div.input-group sup, div.form-group sup {
	font-weight: bold;
	color: red;
	margin-left: 0.5rem;
	text-decoration: none;
	font-size: 1rem;
	top: -0.3em;
}

fieldset.border {
	border: 2px solid #dee2e6!important;
}
fieldset legend {
	font-size: 1rem;
}
input.form-check-input:hover {
	cursor: pointer;
}

div.xpxForms-card {
	margin-bottom: 0.5rem;
	margin-right: 1rem;
	background-color: var(--ism-bleu-dark);
	color: white;
}
div.xpxForms-card a {
	color: white;
}
div.xpxForms-card a:hover {
	color: white;
}

div.xpxForms_blocChamps div.input-group-prepend span.input-group-text {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	font-size: 1.2rem;
	height: 3.1rem;
}
div.xpxForms_blocChamps div.input-group-text div.form-check {
	margin-bottom: 0rem;
}
div.xpxForms_blocChamps div.input-group-append span.input-group-text {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
div.xpxForms_blocChamps div.input-group-append span.input-group-text i.bi-clock-history {
	font-size: 1.5rem;
}



/* Pied de page */
/*==============*/
footer div.col {
	margin-top: 1rem;
	margin-bottom: 1rem;
}
footer div.adresse {
	margin-top: 5px;
	margin-left: 7px;
	font-size: 0.9rem;
	font-weight: normal;
	line-height: 1.2rem;
}




/* Notifications */
/* ============= */
div#clocheNotifications {
	position: fixed;
	right: 0;
	top: 0;
	z-index: 1000;
}
div#clocheNotifications a.notifOpen {
	--largeur_bouton: 12rem;
	--hauteur_bouton: 3rem;
	width: var(--largeur_bouton);
	height: var(--hauteur_bouton);
	padding: 0.8rem;
	padding-right: 2rem;
	background-color: #555;
	color: white;
	text-decoration: none;
	position: absolute;
	top: 12rem;
	left: calc(-1 * var(--largeur_bouton) / 2 + -1 * var(--hauteur_bouton) / 2); /* Du fait du rotate : décalage = width/2+height/2. */

	-ms-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	transform: rotate(270deg);

	border-radius: 8px 8px 0 0 ;
}
div#mesNotifsPerso {
	padding: 0;
}
div#voletNotifications {
	--bs-modal-width: 50%; 
}
div.notification {
	width: 100%;
	position: relative;
	margin-bottom: 0.5rem;
	padding: 0.5rem;
	float: left;
	background-color: var(--ism-bleu-light);
}
div.notification.lue {
	border: 1px solid black;
	background-color: white;
}
div.notification.suppr {
	background-color: var(--ism-orange-dark);
}
div.notification div.type {
	position: relative;
	font-weight: bold;
	float: left;
}
div.notification div.date {
	position: relative;
	float: right;
	font-size: 0.8rem;
}
div.notification div.tool {
	position: relative;
	float: right;
	margin-left: 0.5rem;
	font-size: 1rem;
	cursor: pointer;
}
div.notification div.tool.tooldisabled {
	pointer-events: none;
	opacity: 0.4;
}
div.notification div.ressource {
	position: relative;
	float: right;
	font-size: 0.8rem;
	text-align: right;
}
div.notification div.texte {
	position: relative;
	float: left;
}

div.notification-box {
	position: fixed;
	z-index: 99;
	top: 0.3rem;
	right: 0.8rem;
	width: var(--notif-v50);
	height: var(--notif-v50);
	text-align: center;

	-ms-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
div.notification-bell {
}
div.notification-bell * {
	display: block;
	margin: 0 auto;
	background-color: #fff;
	box-shadow: 0px 0px var(--notif-v15) #fff;
}
span.bell-top {
	width: var(--notif-v6);
	height: var(--notif-v6);
	border-radius: var(--notif-v3) var(--notif-v3) 0 0;
}
span.bell-middle {
	width: var(--notif-v25);
	height: var(--notif-v25);
	margin-top: -1px;
	border-radius: var(--notif-v125) var(--notif-v125) 0 0;
}
span.bell-bottom {
	position: relative;
	z-index: 0;
	width: var(--notif-v32);
	height: var(--notif-v2);
}
span.bell-bottom::before, span.bell-bottom::after {
	content: '';
	position: absolute;
	top: calc(-1 * var(--notif-v4));
}
span.bell-bottom::before {
	left: 1px;
	border-bottom: var(--notif-v4) solid #fff;
	border-right: 0 solid transparent;
	border-left: var(--notif-v4) solid transparent;
}
span.bell-bottom::after {
	right: 1px;
	border-bottom: var(--notif-v4) solid #fff;
	border-right: var(--notif-v4) solid transparent;
	border-left: 0 solid transparent;
}
span.bell-rad {
	width: var(--notif-v8);
	height: var(--notif-v4);
	margin-top: var(--notif-v2);
	border-radius: 0 0 var(--notif-v4) var(--notif-v4);
}
span.notification-new {
	position: absolute;
	z-index: 1;
	top: calc(-1 * var(--notif-v6));
	right: calc(-1 * var(--notif-v4));
	width: var(--notif-v30);
	height: var(--notif-v30);
	line-height: var(--notif-v30);
	font-size: var(--notif-v15);
	font-weight: bold;
	border-radius: 50%;
	background-color: #ff4927;
	color: #fff;

	animation: zoomin 2s both 1;
}
div.notification-total {
	text-align: center;
	position: relative;
	display: inline-block;
	width: var(--notif-v30);
	height: var(--notif-v30);
	line-height: var(--notif-v30);
	font-size: var(--notif-v15);
	font-weight: bold;
	border-radius: 50%;
	background-color: #00cc00;
	color: #000;

	-ms-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
@keyframes bell {
	0% { transform: rotate(0); }
	10% { transform: rotate(30deg); }
	20% { transform: rotate(0); }
	80% { transform: rotate(0); }
	90% { transform: rotate(-30deg); }
	100% { transform: rotate(0); }
}
@keyframes rad {
	0% { transform: translateX(0); }
	10% { transform: translateX(var(--notif-v6)); }
	20% { transform: translateX(0); }
	80% { transform: translateX(0); }
	90% { transform: translateX(calc(-1 * var(--notif-v6))); }
	100% { transform: translateX(0); }
}
@keyframes zoomblink {
	0% { opacity: 0; transform: scale(0); }
	80% { opacity: 1; transform: scale(1); }
	100% { opacity: 0; }
}
@keyframes zoomin {
	0% { opacity: 0; transform: scale(0); }
	100% { opacity: 1; transform: scale(1); }
}

table {
}
table.td, table.th {
}


/* Styles tableau emploi du temps hebdomadaire */

table.annee {
}
table.annee td.semainePleine {
	background-color: #c2f0c2;
}
table.annee a:hover {
	background-color: var(--ism-bleu-light);
}


// X-Small devices portrait phones, less than 576px
// No media query for `xs` since this is the default in Bootstrap

// Small devices landscape phones, 576px and up
@media (min-width: 576px) {
}

// Medium devices tablets, 768px and up
@media (min-width: 768px) {
}

// Large devices desktops, 992px and up
@media (min-width: 992px) {
}

// X-Large devices large desktops, 1200px and up
@media (min-width: 1200px) {
}

// XX-Large devices larger desktops, 1400px and up
@media (min-width: 1400px) {
}



/* Styles spécifiques informations devis  */
/*  ===================================== */

table.ligneDevisDetails {
	font-size: 1rem;
	margin-left: 3rem;
	margin-bottom: 1rem;
}
table.ligneDevisDetails a.btn.btn-secondary {
	padding: 0.1rem 0.2rem;
	line-height: 1.1;
}

div.prestaLigneDevis {
	margin-left: 1rem;
	font-size: 0.8rem;
}
div.prestaLigneDevis a.btn.btn-secondary {
	padding: 0.1rem 0.2rem;
	line-height: 1.1;
}



/* Surcharge styles bootstrap. */
/* Labels radio disabled avec opacity=0.5 en lecture simple de formulaire. */
input.form-check-input:disabled + label.form-check-label {
	opacity: 1;
}

.bootstrap-table .fixed-table-container .fixed-table-body {
	height: unset;
}

/* Couleur de fond pour signifier la valeur actuellement enregistrée dans le select au sein d'une modal. */
.firstByDefault {
	background-color: var(--ism-bleu-light);
}

button.mesBoutons {
	margin-right: 0.5rem;
}	
table.table.table-striped td {
	cursor: pointer;
}
table.table.table-striped td.ism-wrap {
	word-wrap: break-word;
	white-space: normal !important;
}


/* Styles icônes */
i.fa-solid.fa-check {
	color: green;
	font-weight: bold;
	font-size: 1.5rem;
}
i.fa-solid.fa-xmark {
	color: red;
	font-weight: bold;
	font-size: 1.5rem;
}


div.input-group-append button i.bi-search::before {
}


table.msgexclamation td.msgContenu {
	color: black;
}