/* Remise à zéro du style */
html { width:100%; margin:0; padding:0; }
body { margin:0; font-family: var(--font); }
div, nav { padding:0; margin:0; }

/* Ajout d'une marge sur les côtés de l'écran */
body { width: 95%; padding: 0 2.5%; }
/* @media (max-width: 640px) { body { width:90%; margin:0 5% 0 5%; } }  */

/* styles de base */
h1 { width:100%; text-align: center; }
.center { text-align: center; }
.hidden { display: none; }

a,a:visited { color: var(--link-color); -webkit-text-decoration-color: var(--link-color); text-decoration-color: var(--link-color); }
a:hover,a:active { font-weight: 500; letter-spacing:-0.28px; color: var(--link-color-active); -webkit-text-decoration-color: var(--link-color-active); text-decoration-color: var(--link-color-active); }

/* Constantes de personnalisation du style */
:root {
	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--background:#fff;
	--color:#000;

	--color-main-background: #fff;
	--color-main-border: #000;
	--color-main-font: #000;
	--color-high-background: rgb(255, 243, 205);
	--color-high-border: rgb(255, 236, 181);
	--color-high-font: rgb(102, 77, 3);
	--color-standard-background: rgb(207, 226, 255);
	--color-standard-border: rgb(158, 197, 254);
	--color-standard-font: rgb(5, 44, 101);
	--color-low-background: rgb(226, 227, 229);
	--color-low-border: rgb(196, 200, 203);
	--color-low-font: rgb(43, 47, 50);
	--color-success-background: rgb(209, 231, 221);
	--color-success-border: rgb(163, 207, 187);
	--color-success-font: rgb(10, 54, 34);
	--color-success: rgb(3, 164, 93);
	--color-alert-background: rgb(248, 215, 218);
	--color-alert-border: rgb(241, 174, 181);
	--color-alert-font: rgb(88, 21, 28);
	--color-alert: #ef4444;

	--form-btn-standard-color: #fff;
	--form-btn-standard-bg: #0d6efd;
	--form-btn-standard-border-color: #0d6efd;
	--form-btn-standard-hover-color: #fff;
	--form-btn-standard-hover-bg: #0b5ed7;
	--form-btn-standard-hover-border-color: #0a58ca;
	--form-btn-standard-focus-shadow-rgb: 49, 132, 253;
	--form-btn-standard-active-color: #fff;
	--form-btn-standard-active-bg: #0a58ca;
	--form-btn-standard-active-border-color: #0a53be;
	--form-btn-standard-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--form-btn-standard-disabled-color: #fff;
	--form-btn-standard-disabled-bg: #0d6efd;
	--form-btn-standard-disabled-border-color: #0d6efd;
	--form-btn-standard-disabled-opacity:0.65;
	--form-btn-standard-focus-box-shadow: 0 0 0 0.25rem rgba(var(--form-btn-standard-focus-shadow-rgb), .5);

	--form-btn-low-color: #fff;
	--form-btn-low-bg: #6c757d;
	--form-btn-low-border-color: #6c757d;
	--form-btn-low-hover-color: #fff;
	--form-btn-low-hover-bg: #5c636a;
	--form-btn-low-hover-border-color: #565e64;
	--form-btn-low-focus-shadow-rgb: 130, 138, 145;
	--form-btn-low-active-color: #fff;
	--form-btn-low-active-bg: #565e64;
	--form-btn-low-active-border-color: #51585e;
	--form-btn-low-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--form-btn-low-disabled-color: #fff;
	--form-btn-low-disabled-bg: #6c757d;
	--form-btn-low-disabled-border-color: #6c757d;
	--form-btn-low-disabled-opacity:0.65;
	--form-btn-low-focus-box-shadow: 0 0 0 0.25rem rgba(var(--form-btn-standard-focus-shadow-rgb), .5);
	
	--table-border:solid 1px rgb(196, 200, 203);
	--table-tr-background:rgb(207, 226, 255);

	--link-color: #0d6efd;
	--link-color-active: rgb(10, 88, 202);

}
/* Style standard des formulaires  */

/* Présentation verticale des items dans un formulaire */
	form {
		display: flex;
		flex-direction: column;
		gap: 1em;
	}

/* Mise en forme standard des lignes de formulaires */
  .formLine {
		display: block;
	}

/* Mise en forme standard des labels */
	:root { --form-label-width: 10em; }
  .formLine label {
		display: inline-block;
		width: var(--form-label-width);
		line-height: 2.2;
	}

/* Mise en forme standard des champs */
	input,select,.multiSelect {
		padding: .375rem .75rem;
		font-size: 1rem;
		line-height: 1.5;
		font-weight: 400;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background: var(--background);
		color: var(--color);
		border: 1px solid #dee2e6;
		border-radius: 0.375rem;
		transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	}
	input[type="datetime-local"] {
		min-height: 1.5em;
		min-width: 9em;
	}
	.formLine input {
		max-width: calc(100% - var(--form-label-width) - 2em);
	}

/* Entourage du champ en rouge ou vert en fonction de sa validité */
	input:valid,select:valid,.multiSelect  { border-color:var(--color-success-border) ; }
  input:valid:focus,select:valid:focus  { box-shadow: 0 0 0 .25rem var(--color-success-background); outline: 0; }
	input:invalid,input.doubleError,select:invalid,select.doubleError,.multiSelect.doubleError { border-color: var(--color-alert-border); }
	input:invalid:focus,input.doubleError:focus,select:invalid:focus,select.doubleError:focus { box-shadow: 0 0 0 .25rem var(--color-alert-background); outline: 0; }

/* En cas de saisie non valide et que le champ n'est pas en cours d'édition, affichage d'un logo d'erreur */
	input:invalid:not(:placeholder-shown):not(:focus),
	input:invalid:not(:placeholder-shown).formatError,
	select:invalid:not(:placeholder-shown):not(:focus),
	select:invalid:not(:placeholder-shown).formatError,
	input.doubleError,select.doubleError {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
		background-repeat: no-repeat;
		background-position: right calc(.375em + .1875rem) center;
		background-size: calc(.75em + .375rem) calc(.75em + .375rem);
	}
	input.invalidExtend:invalid:not(:placeholder-shown):not(:focus),
	input.invalidExtend:invalid:not(:placeholder-shown).formatError,
	select.invalidExtend:invalid:not(:placeholder-shown):not(:focus),
	select.invalidExtend:invalid:not(:placeholder-shown).formatError,
	input.invalidExtend.doubleError,select.invalidExtend.doubleError {
		padding-right: calc(1.5em + .75rem);
	}

/* Mise en forme standard des messages d'erreur */
	span.formatError, span.doubleError {
		color: #ce0000;
	}

/* Mise en forme des cases à cocher */
	input[type=checkbox]:not(.switch) {
		width: 1.25em;
		height: 1.25em;
		margin-top: .25em;
		vertical-align: top;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		-webkit-print-color-adjust: exact;
		color-adjust: exact;
		print-color-adjust: exact;
	}
	input:checked[type=checkbox]:not(.switch) {
		--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
		background-color: var(--form-btn-standard-bg);
		border-color: var(--form-btn-standard-border-color);
	}

/* Mise en forme des switch */
  input[type=checkbox].switch {
		flex-shrink: 0;
		height: 1.3em;
		margin-top: .5em;
		vertical-align: top;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background-repeat: no-repeat;
		background-size: contain;
		background-color: var(--background);
		border: 1px solid var(--color-success-border);
		width: 2.6em;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
		background-position: left center;
		border-radius: 2em;
		transition: background-position .15s ease-in-out;
		-webkit-print-color-adjust: exact;
		color-adjust: exact;
		print-color-adjust: exact;
	}
	@media (max-width: 640px) {
		input[type=checkbox].switch {
			height: 1.6em;
			margin-top: 0.3em;
			width: 3.0em;
		}
	}

	input:checked[type=checkbox].switch {
		background-position: right center;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
		background-color: #0d6efd;
		border-color: #0d6efd;
	}


/* Gestion de l'affichage des messages d'erreur */
	input ~ .formatError,	input ~ .doubleError,
	select ~ .formatError,	select ~ .doubleError {
		display: block;
		visibility: hidden;
		overflow: hidden;
		height: 0;
	}
	input:invalid:not(:placeholder-shown):not(:focus) ~ .formatError,
	input:invalid:not(:placeholder-shown).formatError ~ .formatError,
	select:invalid:not(:placeholder-shown):not(:focus) ~ .formatError,
	select:invalid:not(:placeholder-shown).formatError ~ .formatError,
	input.doubleError ~ .doubleError,select.doubleError ~ .doubleError {
		visibility: visible;
		height: auto;
	}

/* Mise en forme standard des boutons */
  .buttonLine {
		display: flex;
		flex-direction: row;
		justify-content: center;
		gap: 1em;
		max-width: 100vw;
	}

	button,button.standard,a.button,a.button.standard {
		--form-btn-color: var(--form-btn-standard-color);
		--form-btn-bg: var(--form-btn-standard-bg);
		--form-btn-border-color: var(--form-btn-standard-border-color);
		--form-btn-hover-color: var(--form-btn-standard-hover-color);
		--form-btn-hover-bg: var(--form-btn-standard-hover-bg);
		--form-btn-hover-border-color: var(--form-btn-standard-hover-border-color);
		--form-btn-focus-shadow-rgb: var(--form-btn-standard-focus-shadow-rgb);
		--form-btn-active-color: var(--form-btn-standard-active-color);
		--form-btn-active-bg: var(--form-btn-standard-active-bg);
		--form-btn-active-border-color: var(--form-btn-standard-active-border-color);
		--form-btn-active-shadow: var(--form-btn-standard-active-shadow);
		--form-btn-disabled-color: var(--form-btn-standard-disabled-color);
		--form-btn-disabled-bg: var(--form-btn-standard-disabled-bg);
		--form-btn-disabled-border-color: var(--form-btn-standard-disabled-border-color);
		--form-btn-disabled-opacity: var(--form-btn-standard-disabled-opacity);
		--form-btn-focus-box-shadow: var(--form-btn-standard-focus-box-shadow);
	}
  button.low,a.button.low {
		--form-btn-color: var(--form-btn-low-color);
		--form-btn-bg: var(--form-btn-low-bg);
		--form-btn-border-color: var(--form-btn-low-border-color);
		--form-btn-hover-color: var(--form-btn-low-hover-color);
		--form-btn-hover-bg: var(--form-btn-low-hover-bg);
		--form-btn-hover-border-color: var(--form-btn-low-hover-border-color);
		--form-btn-focus-shadow-rgb: var(--form-btn-low-focus-shadow-rgb);
		--form-btn-active-color: var(--form-btn-low-active-color);
		--form-btn-active-bg: var(--form-btn-low-active-bg);
		--form-btn-active-border-color: var(--form-btn-low-active-border-color);
		--form-btn-active-shadow: var(--form-btn-low-active-shadow);
		--form-btn-disabled-color: var(--form-btn-low-disabled-color);
		--form-btn-disabled-bg: var(--form-btn-low-disabled-bg);
		--form-btn-disabled-border-color: var(--form-btn-low-disabled-border-color);
		--form-btn-disabled-opacity: var(--form-btn-low-disabled-opacity);
		--form-btn-focus-box-shadow: var(--form-btn-low-focus-box-shadow);
	}

	button, a.button {
		display: inline-block;
		padding: 0.375rem 0.75rem;
		font-size: 1rem;
		font-weight:400 ;
		line-height: 1.5;
		color: var(--form-btn-color);
		text-align: center;
		text-decoration: none;
		vertical-align: middle;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
		border: 1px solid var(--form-btn-border-color);
		border-radius: 0.375rem;
		background-color: var(--form-btn-bg);
		transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	}
	tr button, tr a.button {
		padding: 0.15rem 0.5rem;
	}
	button:hover, a.button:hover {
		color: var(--form-btn-hover-color);
		background-color: var(--form-btn-hover-bg);
		border-color: var(--form-btn-hover-border-color);
		letter-spacing: normal;
	}
	button:focus:not(:focus-visible), a.button:focus:not(:focus-visible)  {
		outline: 0;
	}
	button:focus-visible, a.button:focus-visible {
		color: var(--form-btn-hover-color);
		background-color: var(--form-btn-hover-bg);
		border-color: var(--form-btn-hover-border-color);
		outline: 0;
		box-shadow: var(--form-btn-focus-box-shadow);
	}

/* Gestion de la désactivation des boutons */
	button.disabled, a.button.disabled, input:invalid ~ button {
		cursor: not-allowed;
		color: var(--form-btn-disabled-color);
		background-color: var(--form-btn-disabled-bg);
		border-color: var(--form-btn-disabled-border-color);
		opacity: var(--form-btn-disabled-opacity);
	}

/* Style du frameset */

/* Remise des marges du body à zéro */
	body{ margin: 0; padding: 0; }

/* Définition de la barre de navigation */
	:root{
		--navbar-height-withoutMenu:3.0em;
		--navbar-height-withMenu:5.5em;
	}
	#navbar {
		background: var(--color-standard-background);
		color: var(--color-standard-font);
		top:0;
		left:0;
		width: 100vw;
		display: flex;
		flex-direction: column;
	}
  .withoutMenu #navbar { height: var(--navbar-height-withoutMenu); }
  .withMenu #navbar { height: var(--navbar-height-withMenu); }
/* Définition de la 1ère ligne de la barre de navigation où apparait le nom de l'application */
	#app-name {
		font-size: 150%;
		font-weight: bold;
		text-align: center;
		padding: 0.25em 0;
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

/* Définition de la 2ème ligne de la barre de navigation où apparait le menu par onglet */
	#tab-line {
		display: flex;
		flex-direction: row;
		justify-content: center;
		list-style: none;
		padding: 0;
		margin:0;
		font-size: 100%;
		border-bottom: 1px solid var(--color-standard-border);
	}

/* Définition des onglets */
	.tab-item {
		padding: 0.25em 1em;
		background: var(--color-standard-background);
	}
	.tab-item a {
		color: var(--color-standard-font);
		text-decoration: none;
	}
	.tab-item a:hover {
		text-decoration: underline;
	}
	.tab-item .tab-logo {
		width: 1.2em;
		height: 1.2em;
		margin-bottom: -0.2em;
		margin-right: 0.3em;
	}
	@media (max-width: 640px) {
		.tab-item {
			padding: 0.5em 1em;
		}
		.tab-item .tab-logo {
			width: 1.5em;
			height: 1.5em;
			margin-bottom: -0.4em;
		}
	}

/* Définition de l'onglet actif */
	#tab-active {
		background: var(--color-main-background);
		border: 1px solid var(--color-standard-border);
		border-radius: 0.3em 0.3em 0 0;
		border-bottom:1px solid var(--color-main-background);
		margin-bottom: -1px;
	}
	#tab-active h1 {
		/* width:100%; text-align: center; */
		display: inline;
		font-size: 100%;
		margin: 0;
	}

  #tab-active a.tab-refresh { margin-left: 0.3em; }
  #tab-active a.tab-refresh:hover { text-decoration: none; font-weight:unset; letter-spacing:unset; }

	@media (max-width: 640px) {
		.tab-logo ~ .tab-text { display: none; }
	}

/* Définition des onglets déroulants */
/* Le mécanisme d'ouverture / fermeture est basé sur une checkbox que l'on active en cliquant sur le texte
   de l'onglet qui est défini comme le label de la checkbox */
	.tab-item-droppable input[type='checkbox'] { display: none; }
	.tab-item-droppable input[type='checkbox'] + .drop-sub-menu { display: none; }
  .tab-item-droppable input[type='checkbox']:checked  + .drop-sub-menu {
		display: flex;
		flex-direction: column;
		list-style: none;
		border: 1px solid var(--color-standard-border);
		background: var(--color-standard-background);
		padding: 0.25em;
		margin-top: 0.25em;
		margin-left: -0.5em;
	}
	/* Gestion de l'affichage du sous-menu au-dessus des éléments de la page */
  #navbar { position: relative; }
	.drop-sub-menu { position: fixed; z-index: 99; }
  .drop-sub-menu.align-with-window-edge { right: 0; }
  .drop-sub-menu * { white-space: nowrap; }

/* Définition du container principal de la page avec un centrage horizontal du contenu */
	#container-zone {
		position: relative;
		width: 100vw;
	}
	#container {
		width: fit-content;
		margin: 0 auto;
		padding: 1.1em 2% 0.8em 2%;
	}
/* Gestion du défilement vertical au sein du container et non pas au niveau du body */
	body{ overflow: hidden; }
	#container-zone {
		overflow: auto;
	}
	.withoutMenu #container-zone { height: calc(100dvh - var(--navbar-height-withoutMenu)); }
	.withMenu #container-zone { height: calc(100dvh - var(--navbar-height-withMenu)); }

/* Suppression de marge haute du premier élément du container pour assurer le même alignement vertical sur toutes les pages */
	#container > *:first-child {
		margin-top: 0;
	}

/* Définition des styles standard dans le container principal */
	#container h1 {
		font-size: 150%;
		font-weight: bold;
		max-width: 100vw;
	}
	#container h2 {
		font-size: 125%;
		font-weight: bold;
		text-align: center;
		margin-top: 0;
		max-width: 100vw;
	}

/* Définition des styles standard dans les tableaux */
  table { margin-bottom: 1em; }
  th { background: var(--color-standard-background); }
	table, th, td { border: var(--table-border); }

/* Gestion des affichages alternatifs sur mobile */
	.texte-mobile { display: none; }
	@media (max-width: 640px) {
		.texte-desktop { display: none; }
		.texte-mobile { display: inline; }
		button, a { touch-action: manipulation; } /* Désactivation du zoom iOS du double-tap zoom sur des éléments cliquables */
	}