@font-face {
	font-family: "Noto";
	src: url("../fonts/Noto_Sans_KR/NotoSansKR-Medium.otf") format("opentype"),
		url("../fonts/Noto_Sans_KR/NotoSansKR-Regular.otf") format("opentype");
}
@font-face {
	font-family: "Roboto";
	src: url("../fonts/Roboto/Roboto-Bold.ttf") format("truetype"),
		url("../fonts/Roboto/Roboto-Medium.ttf") format("truetype");
}

/* ============================ Couleurs ============================== */
body {
	background-color: var(--genIndex-body-bg);  /* new V4 */
	color : var(--genIndex-body-fg) ;
	font-size: 14px;	
}

body:not(.freeHeight) {
	overflow: hidden;
}

body[fontFamily="sansSerif"] {
	font-family: sans-serif;
}

body[fontFamily="serif"] {
	font-family: times, serif;
}

.shadowedBox {
	box-shadow: 7px 7px 7px 0px var(--genIndex-shadowColor);
}

.leftShadowedBox {
	box-shadow: -7px 7px 7px 0px var(--genIndex-leftShadowColor) ;
}

.leftShadowedBox.largeShadow {
	box-shadow: -15px 15px 13px 4px var(--genIndex-leftShadowColor) ;
}

a, a:visited {
	color : var(--genIndex-hyperlink) ;
}
/* style="color:darkred; background-color:yellow" */
.importantText {
	color : var(--genIndex-important-bg) ;
	font-weight : 900 ;
}
.importantBackground {
	background-color : var(--genIndex-important-bg) ;
	color : var(--genIndex-important-fg) ;
	padding : 0.3em 0 ;
}
.centeredArea {
	width : 100% ;
	text-align : center ;
}

/* ============================= Page connexion =============================== */

.videoAccueil {
	width:25%;
	position:absolute; bottom : 1em ;
	left : 1em;
	border : 2px solid var(--genIndex-color);
}

.texteVideoAccueil {
	display:inline-block;
	width:100%;
	color:var(--genIndex-color);
	position : absolute;
	top : 20px;
	left : 0;
	z-index : 9999 ;
	font-size : 200%;
	text-align : center ;
	background-color : var(--genIndex-body-bg);
}

/* ============================= Actions =============================== */

/* Effacement d'élements selon le type d'interacteurs choisi */
body:NOT(.useButtons) .actionButton, 
body:NOT(.useLinks) .actionLink, 
body:NOT(.useIcons) .actionIcon:not(.permanentIcon):not(.admin):not(.adminIcon),
body:NOT(.useIcons) .cartouche:not(.admin):not(.permanentCartouche),
body:not(.useButtons) .buttonsCartouche, 
body:not(.useLinks) .linksCartouche {
	display : none !important ;
}

body:not(.useIcons) .tabsBodies.ongletAdmin .actionIcon { /* Les onglets admin fonctionnenent avec des icônes */
	display : inline-block !important ;
}
.tabsBodies.ongletAdmin .actionButton, .tabsBodies.ongletAdmin .actionLink { /* Les onglets admin n'ont ni bouton ni lien comme actionneur */
	display : none ;
}

.menu {
	width : 8rem ;
	background-color : var(--genIndex-popup-bg) ;
	border : 1px solid var(--genIndex-secondary-text-border) ;
	margin-right : 1rem ;
	z-index : 9000 ;
	position : relative ;
}

.menu ul {
  margin-bottom: 1em;
}

.menu .menuTitle {
	text-align : center ;
}

.menuOptions {
	display : none ;
	text-decoration: none;
	list-style: none;
	text-align: left;
	margin: 0;
	padding: 0;
}

.menuOptions li {
	margin-left : 0.5rem;
	margin-top : 0.2rem;
}

.menuOptions li input {
	width : 7rem ;
}

.menu:hover .menuOptions{
	display : block ;
}

.menu .menuAlerte {
	border: 2px solid var(--genIndex-alertMsg);
	border-radius: 0.4em;
	padding: 0.2em;
	position: relative;
	top: 0.3em;
}

.buttonsCartouche { /* TODO_Phase1 : linksCartouche à styler */
	min-width : 8rem ;
	background-color : var(--genIndex-popup-bg) ;
	border : 1px solid var(--genIndex-color) ;
	margin-top : 0.5rem ;
	margin-right : 1rem ;
	z-index : 9000 ;
	position : relative ;
	text-align: center;
	cursor : pointer ;
}

body.useButtons .structuredH2:hover .buttonsCartouche.list:hover {
	transform: translate(0, -43%) ;
}
body.useButtons .structuredH2:hover .buttonsCartouche:hover {
	padding: 0 2px;
	border: 1.5px solid var(--genIndex-color);
}

.buttonsCartouche .actionButton.active {
	border: 1px solid var(--genIndex-color);
	color: var(--genIndex-color);
	border-radius: 3px;
}

.rightSpacedButton {
	margin-right: 1em;
}
.buttonOnRight {
	float: right;
}

.smallActionButton, .smallActionLink {
	font-size : 70%;
}

.buttonsCartouche legend {
	text-align: center;
	margin-left: 2px !important;
	margin-right: 2px !important;
	border: none;
	background-color: transparent;
	font-size: 0.8em;
}

body.useButtons .structuredH2:hover .buttonsCartouche:hover legend {
	color : 1.5px solid var(--genIndex-color);
}

.buttonsCartouche ul {
	display : none ;
	text-decoration: none;
	list-style: none;
	text-align: left;
	margin: 10px 0;
	padding: 0;
}

.buttonsCartouche li {
	text-align : center ;
	font-size: 1rem;
}

.buttonsCartouche:hover ul {
	display : block ;
}



/* ============================= Header =============================== */
body > header {
	position : fixed ;
	top : 0 ;
	left : 0 ;
	width : 100% ;
	text-align : center ;
	background-color : var(--genIndex-header-bg) ;
	height: 3em;
	z-index : 1199 ;
	display : flex ;
	flex-direction: row ;
	flex-wrap: wrap ;
	justify-content:space-around;
	align-items: center ;
	user-select: none; 
}

body.useButtons > header, body.useLinks > header {
	align-items: flex-start ;
}

body.darkMode > header {
	background-color: var(--darkHeaderBackground);
}

/* body.useButtons > header #logo, body.useLinks > header #logo, body.useButtons > header #titre, body.useLinks > header #titre {
	margin-top : 1em ;
} */

body[modeDisplay="dark"] > header .logo[modeDisplay="light"], body[modeDisplay="light"] > header .logo[modeDisplay="dark"], body:not([modeDisplay]) > header .logo[modeDisplay="dark"], 
body[modeDisplay="dark"] > header .titre[modeDisplay="light"],body[modeDisplay="light"] > header .titre[modeDisplay="dark"], body:not([modeDisplay]) > header .titre[modeDisplay="dark"] {
	display : none ;
}

body > header .logo {
	height: 2rem;
}

body > header .titre {
	height: 1.5rem;
}

#recherches {
	position: absolute;
	top: 5rem;
}
/* ============================= Onglets =============================== */
.barreOnglets, ul.subOnglets {
	border-bottom : 1px solid var(--genIndex-onglets-border) ;
}

.barreOnglets {
	background-color : var(--genIndex-header-bg) ;
	position : fixed ;
	top : 2rem;
	left : 0 ;
	width : 100% ;
	padding-top : 1em ;
	padding-left : 2em ;
	z-index : 999;
	display:flex;
	align-items:flex-end;
	justify-content: flex-start;
}

ul.subOnglets {
	width: 99.9vw;
	height: 3em;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	position: fixed;
	top: 5em;
	background-color: var(--genIndex-body-bg);
	left: 0;
	box-sizing: border-box;
	padding: 0 0 0 6em;
}

body.darkMode .barreOnglets {
	background-color: var(--darkHeaderBackground);
}
body.darkMode ul.subOnglets {
	background-color: var(--genIndex-sousOnglet_bg);
}

body.darkMode .barreOnglets, body.darkMode ul.subOnglets {
	background-color: var(--darkHeaderBackground);
}

.tabsBodies {
	margin-top : 1em !important ;
	position: relative;
	z-index: 100;
	font-family: sans-serif;
	line-height: 140%;
	height: 82vh;
	overflow : hidden auto ;
	width: 99.5vw ;
	padding-bottom : 3em;
	box-sizing : border-box ;
}
/* .tabsBodies:not(.freeHeight) {
	overflow: hidden auto;
} */

.tabsBodies:not(.freeHeight) {
	overflow: hidden;
	height: 82vh;
}

.tabsBodies.withTitleAlwaysOnTop { /* l'onglet contient un titre en position fixed en haut du corps d'onglet */
	padding-top:5em;
}

.interactorOnRight {
	position: absolute;
	left: calc(100vw - 1.5em);
	font-size: 15pt;
	cursor: pointer;
}

.alwaysOnTop {
	position: fixed;
	top: 3.5em;
	width: 98%;
	background-color: var(--genIndex-body-bg);
	z-index: 1000000;
}

.subTabBody {
	clear: both;
	margin-top: -1px;
	margin-top: 5em;
	padding-bottom : 3em;
}


.subTabBody {
	padding-top: 2em;
	display: none;
}

.subTabBody.freeHeight {
	overflow: hidden auto !important;
	max-height: 80vh !important;
}

body[fontFamily="serif"] .tabsBodies{
	font-family : serif;
}
body[fontFamily="sansSerif"] .tabsBodies{
	font-family : sans-serif;
}
body[fontSize="10"] .tabsBodies{
	font-size : 10px;
}
body[fontSize="12"] .tabsBodies{
	font-size : 12px;
}
body[fontSize="14"] .tabsBodies{
	font-size : 14px;
}
body[fontSize="16"] .tabsBodies{
	font-size : 16px;
}
body[fontSize="18"] .tabsBodies{
	font-size : 18px;
}
body[fontSize="20"] .tabsBodies{
	font-size : 20px;
}
body[fontWeight="200"] .tabsBodies{
	font-weight : 200;
}
body[fontWeight="400"] .tabsBodies{
	font-weight : 400;
}
body[fontWeight="600"] .tabsBodies{
	font-weight : 600;
}
body[fontWeight="800"] .tabsBodies{
	font-weight : 800;
}
body[fontWeight="1000"] .tabsBodies{
	font-weight : 1000;
}
body[letterSpacing="tight"] .tabsBodies{
	letter-spacing : -0.05em;
}
body[letterSpacing="smaller"] .tabsBodies{
	letter-spacing : 0.05em;
}
/* body[letterSpacing="small"] .tabsBodies{
	letter-spacing : 0.05em;
} */
body[letterSpacing="avg"] .tabsBodies{
	letter-spacing : 0.1em;
}
body[letterSpacing="large"] .tabsBodies{
	letter-spacing : 0.2em;
}
body[letterSpacing="larger"] .tabsBodies{
	letter-spacing : 0.4em;
}
body[wordSpacing="tight"] .tabsBodies{
	word-spacing : -0.05em;
}
body[wordSpacing="smaller"] .tabsBodies{
	word-spacing : 0.05em;
}
body[wordSpacing="avg"] .tabsBodies{
	word-spacing : 0.2em;
}
body[wordSpacing="large"] .tabsBodies{
	word-spacing : 0.4em;
}
body[lineHeight="tight"] .tabsBodies{
	line-height : 0.8em;
}
body[lineHeight="smaller"] .tabsBodies{
	line-height : 1.2em;
}
body[lineHeight="avg"] .tabsBodies{
	line-height : 1.4em;
}
body[lineHeight="large"] .tabsBodies{
	line-height : 1.6em;
}
body[lineHeight="larger"] .tabsBodies{
	line-height : 1.8em;
}

/* ============================= Messages =============================== */
#messages {
	position : fixed ;
	bottom : 0.4em ;
	right : 0.4em ;
	border-radius : 1em 1em 0 1em ;
	border : 1px solid var(--genIndex-secondary-text-border) ;
	background-color : var(--genIndex-messages-bg) ;
	z-index:100000;
	font-size: 14px;
}

#messages header {
	min-width : 1em ;
	min-height : 1em ;
	border-bottom: 1px solid var(--genIndex-secondary-text-border);
	padding: 0.25em 1em;
	box-sizing: border-box;
}

#messages header .smallHeaderButton {
  font-size: 80%;
  padding: 0;
  margin-left: 0.5em;
}

#messages .body {
	min-width : 1em ;
	min-height : 1em ;
	max-width : 15em ;
	max-height : 60vh ;
	overflow-x : hidden ;
	overflow-y : auto ;
	user-select: none;
	cursor: pointer;
}

#messages .btnInMessage {
	/* pour mettre un bouton, ajouter une balise i dans le message, e.g. :
		Cliquer <i class="btnInMessage" onclick="(function(event) { event.stopPropagation() ; tools.copyToClipBoard(undefined, ${result.idActe}, 'n° copié dans le presse-papier') ; })(event);">ici</i> pour ... */
	border: 1px solid var(--genIndex-color);
	padding: 0 0.3em;
	border-radius: 0.3em;
	color: var(--genIndex-received-msg);
	font-style: initial;
	font-weight: 400;
	cursor: pointer;
}

#messages .body > span {
	display : block ;
	margin : 1.5em 1em 1em 1em ;
	color : var(genIndex-color) ;
}

#messages .body > span:not(:first-child) {
  border-top: 0.5px solid #606060;
  padding-top: 0.5em;
}

#messages span.info {
	color:var(--genIndex-infoMsg);
}

#messages span.dictionnaire {
	color:var(--genIndex-important-fg);
}

#messages span.dictionnaire .termeDico {
	font-weight : 900 ;
}

#messages span.dictionnaire .exempleDico {
	font-weight : 200 ;
	font-style : italic ;
	margin-top : 0.5em ;
}

#messages span.dictionnaire .exempleDico .auteur {
	font-style: initial;
	font-size: 80%;
}

#messages span.dictionnaire .sourceDico {
	font-weight : 200 ;
	font-size : 80% ;
	margin-top : 1em ;
}

#messages span.dictionnaire {
	color:var(--genIndex-important-fg);
}

#messages span.warning {
	color:var(--genIndex-warningMsg);
}

#messages.small header {
	border : none ;
}

#messages.small .viewWhenNotSmall, #messages:not(.small) .viewWhenSmall {
	display : none ;
}

/* span.error { Supprimé le 14/06/2024 car pose problème dans l'aide
	display : block ;
} */
.error {
	color: var(--genIndex-errorMsg) !important;
	font-weight : 900 ;
}

.importantMsg {
	padding-left: 12em;
	color: var(--genIndex-errorMsg);
}

.oldError {
	color:#606060 !important;
	font-weight : 900 ;
}

#messages span span.tag {
	color : red ;
	background-color : yellow ;
}

/* ============================= Préférences =============================== */
#preferences {
	font-size: 14px;
	line-height: 160%;
}

#preferences hr {
	border-top : 0.5px solid var(--genIndex-popup-border) ;
	border-bottom : 0 ;
	margin-bottom : 0 ;
	margin-top : 1.5em ;
	width : 80%;

}

.prefLabel {
	display : inline-block;
	width : 5em;
	text-align : right;
	margin-right : 0.6em;
	position : relative;
	top : -0.2em;
}

#demoTexte {
	display : inline-block;
	border : 1px solid var(--genIndex-popup-border) ;
	padding : 0.5em;
	width : 80% ;
	margin-left : 10% ;
}

#preferences .detailsRubrique {
	padding-left : 2em ;
}

#preferences .detailsRubrique ul {
	margin-top: 0;
}

#preferences .detailsRubrique ul:not(.ui-sortable) {
	margin-left: 7em;
}

#preferences .detailsRubrique ul.ui-sortable li {
	width : 20em ;
}

.spanTitle {
	position : relative ;
	top : 1em ;
	padding : 0 0.5em ;
	background-color: var(--genIndex-popup-bg) ;
}

/* ============================= Formulaires =============================== */
div#probleme {
	position : fixed ;
	bottom : 1em ;
	right : 1em ;
}
#loginImpossible {
	position : absolute ;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding : 0.5em;
	width : 60%;
	z-index : 9999 ;
	background-color : var(--genIndex-popup-bg) ;
	border-radius : 0.5em;
	border : 1px solid var(--genIndex-popup-border) ;
}

/* Font-color displayed as background */
#preferences .fontColor.fg1 {
	background-color : var(--genIndex-critColor-fg1) ;
}
#preferences .fontColor.fg2 {
	background-color : var(--genIndex-critColor-fg2) ;
}
#preferences .fontColor.fg3 {
	background-color : var(--genIndex-critColor-fg3) ;
}
#preferences .fontColor.fg4 {
	background-color : var(--genIndex-critColor-fg4) ;
}
#preferences .fontColor.fg5 {
	background-color : var(--genIndex-critColor-fg5) ;
}
#preferences .fontColor.fg6 {
	background-color : var(--genIndex-critColor-fg6) ;
}
#preferences .fontColor.fg7 {
	background-color : var(--genIndex-critColor-fg7) ;
}
#preferences .fontColor.fg8 {
	background-color : var(--genIndex-critColor-fg8) ;
}
#preferences .fontColor.fg9 {
	background-color : var(--genIndex-critColor-fg9) ;
}
#preferences .fontColor.fgA {
	background-color : var(--genIndex-critColor-fgA) ;
}
#preferences .fontColor.fgB {
	background-color : var(--genIndex-critColor-fgB) ;
}
#preferences .fontColor.fgC {
	background-color : var(--genIndex-critColor-fgC) ;
}
#preferences .fontColor.fgD {
	background-color : var(--genIndex-critColor-fgD) ;
}
#preferences .fontColor.fgE {
	background-color : var(--genIndex-critColor-fgE) ;
}
#preferences .fontColor.fgF {
	background-color : var(--genIndex-critColor-fgF) ;
}

.bg1 {
	background-color : var(--genIndex-critColor-bg1) !important ;
}
.bg2 {
	background-color : var(--genIndex-critColor-bg2) !important ;
}
.bg3 {
	background-color : var(--genIndex-critColor-bg3) !important ;
}
.bg4 {
	background-color : var(--genIndex-critColor-bg4) !important ;
}
.bg5 {
	background-color : var(--genIndex-critColor-bg5) !important ;
}
.bg6 {
	background-color : var(--genIndex-critColor-bg6) !important ;
}
.bg7 {
	background-color : var(--genIndex-critColor-bg7) !important ;
}
.bg8 {
	background-color : var(--genIndex-critColor-bg8) !important ;
}
.bg9 {
	background-color : var(--genIndex-critColor-bg9) !important ;
}
.bgA {
	background-color : var(--genIndex-critColor-bgA) !important ;
}
.bgB {
	background-color : var(--genIndex-critColor-bgB) !important ;
}
.bgC {
	background-color : var(--genIndex-critColor-bgC) !important ;
}
.bgD {
	background-color : var(--genIndex-critColor-bgD) !important ;
}
.bgE {
	background-color : var(--genIndex-critColor-bgE) !important ;
}
.bgF {
	background-color : var(--genIndex-critColor-bgF) !important ;
}

/* font-color, qui s'applique aussi aux carrés colorés des préférences, mais comme il n'y a pas de texte dedans, ça n'a aucun impact */
.fg1 {
	color : var(--genIndex-critColor-fg1) !important ;
}
.fg2 {
	color : var(--genIndex-critColor-fg2) !important ;
}
.fg3 {
	color : var(--genIndex-critColor-fg3) !important ;
}
.fg4 {
	color : var(--genIndex-critColor-fg4) !important ;
}
.fg5 {
	color : var(--genIndex-critColor-fg5) !important ;
}
.fg6 {
	color : var(--genIndex-critColor-fg6) !important ;
}
.fg7 {
	color : var(--genIndex-critColor-fg7) !important ;
}
.fg8 {
	color : var(--genIndex-critColor-fg8) !important ;
}
.fg9 {
	color : var(--genIndex-critColor-fg9) !important ;
}
.fgA {
	color : var(--genIndex-critColor-fgA) !important ;
}
.fgB {
	color : var(--genIndex-critColor-fgB) !important ;
}
.fgC {
	color : var(--genIndex-critColor-fgC) !important ;
}
.fgD {
	color : var(--genIndex-critColor-fgD) !important ;
}
.fgE {
	color : var(--genIndex-critColor-fgE) !important ;
}
.fgF {
	color : var(--genIndex-critColor-fgF) !important ;
}

/* Borders */
.bd1 {
	border : 1px solid var(--genIndex-critColor-fg1) !important ;
}
.bd2 {
	border : 1px solid var(--genIndex-critColor-fg2) !important ;
}
.bd3 {
	border : 1px solid var(--genIndex-critColor-fg3) !important ;
}
.bd4 {
	border : 1px solid var(--genIndex-critColor-fg4) !important ;
}
.bd5 {
	border : 1px solid var(--genIndex-critColor-fg5) !important ;
}
.bd6 {
	border : 1px solid var(--genIndex-critColor-fg6) !important ;
}
.bd7 {
	border : 1px solid var(--genIndex-critColor-fg7) !important ;
}
.bd8 {
	border : 1px solid var(--genIndex-critColor-fg8) !important ;
}
.bd9 {
	border : 1px solid var(--genIndex-critColor-fg9) !important ;
}
.bdA {
	border : 1px solid var(--genIndex-critColor-fgA) !important ;
}
.bdB {
	border : 1px solid var(--genIndex-critColor-fgB) !important ;
}
.bdC {
	border : 1px solid var(--genIndex-critColor-fgC) !important ;
}
.bdD {
	border : 1px solid var(--genIndex-critColor-fgD) !important ;
}
.bdE {
	border : 1px solid var(--genIndex-critColor-fgE) !important ;
}
.bdF {
	border : 1px solid var(--genIndex-critColor-fgF) !important ;
}

/* Accents, pour les input radio et checkbox */
.acc1 {
	accent-color : var(--genIndex-critColor-fg1) !important ;
}
.acc2 {
	accent-color : var(--genIndex-critColor-fg2) !important ;
}
.acc3 {
	accent-color : var(--genIndex-critColor-fg3) !important ;
}
.acc4 {
	accent-color : var(--genIndex-critColor-fg4) !important ;
}
.acc5 {
	accent-color : var(--genIndex-critColor-fg5) !important ;
}
.acc6 {
	accent-color : var(--genIndex-critColor-fg6) !important ;
}
.acc7 {
	accent-color : var(--genIndex-critColor-fg7) !important ;
}
.acc8 {
	accent-color : var(--genIndex-critColor-fg8) !important ;
}
.acc9 {
	accent-color : var(--genIndex-critColor-fg9) !important ;
}
.accA {
	accent-color : var(--genIndex-critColor-fgA) !important ;
}
.accB {
	accent-color : var(--genIndex-critColor-fgB) !important ;
}
.accC {
	accent-color : var(--genIndex-critColor-fgC) !important ;
}
.accD {
	accent-color : var(--genIndex-critColor-fgD) !important ;
}
.accE {
	accent-color : var(--genIndex-critColor-fgE) !important ;
}
.accF {
	accent-color : var(--genIndex-critColor-fgF) !important ;
}
.typeRecherche input[type="checkbox"] {
	accent-color: var(--genIndex-infoMsg) !important;
}

.doubleColonne {
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
}


.doubleColonne div:first-child {
	/* background-color: yellow; */
	padding-right: 0.2em;
	white-space: nowrap;
}


.flexButtonsBar {
	width: 80%;
	margin-top: 1em;
	background-color: var(--genIndex-buttons-bar-bg	);
	border-radius: 0.4em;
	padding: 0.4em 0 0.4em 0;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left : 10% ;
}

.flexButtonsBar i {
	height : auto !important ;
	font-size : 120% ;
}

.flexButtonsBar i:not(:first-child) {
	margin-left : 0.5em ;
}

.doubleColonne .buttonsBar {
	width : auto !important ;
	margin : 0.7em 0 0 0 !important ;
	display: flex;
	justify-content: space-around;
	flex-direction: column;
	padding:0 0.5em;
}

.doubleColonne .buttonsBar .button {
	margin : 0 !important ;
}


input.longRadio {
	vertical-align: top;
	/* margin-top: 0.6em; */
}



@media screen and (max-width: 1250px) {
	.critere .listeOptions {
		display : block ;
		padding-left : 11em ;
	}
	.critere.secondSelect {
		display : block ;
	}
	.critere.secondSelect label {
		display: inline-block;
		text-align: right;
		width: 10em;
		margin-right: 0.4em;
		margin-top: 0.2em;
		vertical-align: top;
		margin-left : 0 ;
	}
	.ifBigWidth {
		display : none ;
	}
	.secondLabelOnLine {
		margin-left : 0 !important ;
	}
}

/* @media only screen and (max-width: 980px) {
	.critere .listeOptions {
		display : block ;
		padding-left : 0 !important ;
	}
	label.debutLigne, .critere.secondSelect label {
		display : block ;
		text-align : left ;
	}
} */

@media only screen and (max-width: 980px) {
	.formRecherche td {
		display : block ;
	}
	.formRecherche .critere {
		padding-left : 2em ;
	}

	.formRecherche .criteret:has(span.onLeft) {
		padding-left : 4em ;
	}
	
	.formRecherche label.debutLigne {
		display: block !important;
		text-align: left !important;
		width: auto !important;
		margin-left : -2em ;
	}
	.formRecherche label.debutLigne span.onLeft {
		display: block !important;
		text-align: center !important;
		width: auto !important;
		float : none ;
		background-color: #34b6e138;
	}
	.formRecherche .listeOptions {
		display : block ;
	}
	.alerteCoherence {
		display : none ;
	}
}


.cocheAll {
	cursor : pointer ;
}

.rubrique {
	clear:both;
}
.sectionIndicator {
	width: 2em;
	float: left;
	margin-top: 0.1em;
	margin-left: 0.1em;
	margin-right: 0.4em;
	background-color: var(--genIndex-secondary-text); /* bg qui sert de fg par transparence */
	cursor : pointer ;
}
.basculeMasquage {
	cursor : pointer ;
}

label.labelRubrique {
	display : inline-block ;
	text-align : left ;
	width : calc(99% - 3.1em) ;
	margin-left : 1em;
	font-weight : 900 ;
	color : var(--genIndex-title-fg) ;
	margin-top : 0.4em ;
}

.rubrique.separation {
	border-top : 1px solid var(--genIndex-sousOnglet_bg) ;
	margin-top: 0.5em;
}

.inputRequired {
	color : var(--genIndex-errorMsg) ;
}

select {
	max-width : 14em;
}
.editTranscripteur select {
	max-width : 25em;
}

.chosen-container .chosen-results-scroll-down span, .chosen-container .chosen-results-scroll-up span, .chosen-container-multi .chosen-choices .search-choice .search-choice-close, .chosen-container-single .chosen-search input[type="text"], .chosen-container-single .chosen-single abbr, .chosen-rtl .chosen-search input[type="text"] {
	background-size: 47px 17px !important;
}

.chosen-container-single .chosen-single div b {
	background-position-y: -3px;
}

.chosen-container-single .chosen-single {
	height: 1.5em !important ;
	line-height: 1.5em !important;
	color: var(--genIndex-input-fg) ; /* Modifié le 04/07/24, en remplaçant var(--genIndex-legend-color) ; var les valeurs sélectionnées étaient bleues et différentes des autres inputs */
	/* background: linear-gradient(var(--genIndex-relief-top) 20%, var(--genIndex-relief-center) 52%, var(--genIndex-relief-bottom) 100%); */
	background: none;
	background-color: var(--genIndex-input-bg);
	border-left: 1px solid var(--genIndex-input-border-left);
	border-top: 1px solid var(--genIndex-input-border-top);
	border-right: 1px solid var(--genIndex-input-border-right);
	border-bottom: 1px solid var(--genIndex-input-border-bottom);
	box-shadow : none !important ;
}

.chosen-container .chosen-drop {
	z-index: 9999;
	color : var(--genIndex-input-fg) ;
	background-color: var(--genIndex-input-bg);
}

.chosen-container .chosen-results {
	color : var(--genIndex-input-fg) ;
}

body.highlightTumbs ul.chosen-results li.avecCimetiere {
	color : var(--genIndex-color) !important ;
}

body.highlightTumbs ul.chosen-results li.withCimetiere:before {
	content: '';
	background:url(../img/cimetiere.png) ;
	height : 12px ;
	width : 15px ;
}

select.longSelect {
	max-width : none;
	width : 25em;
	max-width : 25em;
}

select.hugeSelect {
	max-width : none;
	width : 50em;
	max-width : 50em;
}

input.jour, input.mois, input.delay, select.jour, select.mois {
	width : 5em ;
}

input.kmAutour {
	width : 3.5em ;
}

input.annee, select.annee {
	width : 6em ;
}

input.longText, textarea.longText {
	width : 30em ;
}

.note {
	display: block;
	float: right;
	width: 11%;
	font-size: 80%;
	text-align: justify;
	/* max-height: 6em; */
	overflow-x: hidden;
	overflow-y: auto;
	background-color: var(--genIndex-secondary-text-bg2);
	color: var(--genIndex-secondary-text-fg2);
	padding: 0.4em;
	line-height: initial;
	font-weight: 400;
}
.note:hover {
	transform: scale(1.4);
	transform-origin: center right;
}
.note.large {
	width: 25%;
}

body.noHelp .note, body[useHelp="0"] .note {
	display : none ;
}

.indication {
	color : var(--genIndex-secondary-text) ;
}
.tableActes .indication {
	color: var(--genIndex-secondary-text);
}

.errorMsg {
	color : var(--genIndex-errorMsg) ;
	display : none ;
	font-size : 80%;
}

.warning {
	color : var(--genIndex-warningMsg) ;
	font-size : 80%;
	user-select: none;
}

.validMsg {
	color : var(--genIndex-okMsg) ;
	display : none ;
	font-size : 80%;
}

.invalid {
	border : 2px solid var(--genIndex-errorMsg) ;
}

.widgetEnErreur {
	background-color: var(--genIndex-important-bg);
	color: var(--genIndex-body-bg) !important;
}

input[type="text"].widgetEnErreur {
	border : 2px solid var(--genIndex-errorMsg) !important ;
	color: var(--genIndex-errorMsg) !important;
}

.errMessage {
	display : block ;
	margin-left : 20em;
	color : var(--genIndex-errorMsg) ;
	display : none ;
}

@media only screen and (max-width: 980px) {
	.errMessage {
		margin-left : 0;
	}
}

/* ============================ navigation ============================== */
nav {
	/* float : right ; */
	margin-right : 1em;
	/* display : none ; */
}

.button, .smallButton, .closeButton {
	transition: all .2s ease-in-out;
}

.button:hover, .smallButton:hover, .closeButton:hover {
	transform: scale(1.5);
	color : var(--genIndex-errorMsg) ;
	z-index : 9999 ;
}

.buttonsBar {
	width : 80%;
	margin : auto ;
	margin-top : 1em ;
	background-color : var(--genIndex-buttons-bar-bg) ;
	border-radius : 0.4em ;
	padding : 0.4em 0 0.4em 0 ;
	display: flex;
	column-gap: 1em;
	justify-content: center;
	flex-wrap: nowrap;
}
.buttonsBar.noBackground {
	background-color: transparent !important;
}
.buttonsBar.leftAndRight {
	justify-content: space-between;
	align-items: center;
	padding-left : 2em ;
	padding-right : 2em ;
}
.buttonsBar.fixed {
	position : fixed ;
	top : 6em ;
	margin : 0 !important ;
	/* left : 18.2vw ;
	width : 62.3vw !important ; */
}
.buttonsBar.fixedOnBottom {
	position : fixed ;
	bottom : 1em ;
	margin-left : 10% ;
}
.buttonsBar.aligned {
	display: flex;
	justify-content: center;
	align-items:center ;
}
.buttonsBar .button {
	height: 1.3em !important;
}

.bigBottomPadding {
	padding-bottom : 2.5em
}

.buttonsBarEdit {
	position: absolute;
	bottom: 1em;
	margin-left: 10%;
	height: 1.7em;
}

.formRecherche .buttonsBar {
	width : 85% ;
	margin-bottom:0 ;
	position : fixed ;
	bottom: 1em ;
	left : calc(50% + 4.5vw) ;
	transform : translate(-50%, 0) ;
	background-color : var(--genIndex-buttons-bar-semiTransparent-bg) ;
	z-index : 9900 ;
	padding-bottom: 0.6em;
	padding-top: 0.6em;
	border: 1px solid var(--genIndex-color);
	box-sizing: border-box;
	justify-content: center;
	column-gap: 1em;
	align-items: center;
}

.releve .buttonsBar, body.useButtons .buttonsBar, body.useLinks .buttonsBar {
	width : 90%;
}

.releve .buttonsBar {
	background-color : var(--genIndex-buttons-bar-bg) ;
}

.button {
	/* width : 1.5em; */
	height : 1.3em;
	cursor : pointer;
}

.btnAdmin {
	height : 3em !important;
	margin-left : 5em !important ;
	cursor : pointer;
}

/* .releve .buttonsBar .button {
	width : 7%;
} */

nav .button {
	margin-top : 0.5em ;
}

.smallButton {
	width : 1em;
	cursor : pointer;
	position: relative;
	top: 0.2em;
	background-size: 100% 100%;
	border: 0px solid transparent;
	padding: 0;
	background-color: transparent;
}

.mediumButton {
	height : 1.5em;
	cursor : pointer;
	padding: 0;
}

:NOT(.tableRechercheSimple) .smallButton {
	margin-left: 0.3em;
}

input.smallButton {
	top: 0px;
	width: 1.4em;
	height: 1.4em;
	display: inline-block;
}

.closeButton {
	float : right ;
	cursor : pointer;
}

:NOT(.tableRechercheSimple) .closeButton {
	margin-right : 0.4em;
}

.hidden {
	display : none ;
}

.invisible {
	display : none !important ;
}

/* ========================== Liste de relevés ============================ */
.iconReleve {
	float : left ;
	margin-left : 0.4em;
}
.iconSource {
	float : right ;
	width : 1.4em;
}
li .iconSource {
	float : none ;
	margin-left : 1em ;
}
.iconSource.noFloat {
	float : none !important ; 
}

.button:NOT(:first-child) {
	margin-left : 0.3em;
}
.resultats {
	width : calc(90vw - 12px) ;
	margin-left : 10vw ; /* Pour laisser la place à criteriaList */
	padding : 0 5% ;
	box-sizing: border-box ;
	/* display : none ; Ne JAMAIS effacer totalement .resultats, cela perturbe l'affichage de la map */
	z-index: 8999;
	position: relative;
	/* height : 82vh ; 
	overflow : hidden auto ;*/
	overflow : hidden ;
	padding: 0 0.2em 8em 0;
	font-weight: 600;
	margin-top: 1em;
}

.resultats[mode="liste"] .panneaux {
	display : none ;
}

.resultats[mode="panneaux"] .liste, .resultats[mode="panneaux"] h2 .cartouche.zoom {
	display : none ;
}

body.fullScreen .tabsBodies .resultats {
	display: none !important;
}

.tris {
	display : none ;
}

/* ========================== Saisie des relevés ========================== */



/* ========================== Edition d'un relevé ========================== */

/* ========================== Panneau d'un relevé ========================== */
.releve {
	margin-top : 1em ;
	width : 30% ;
	border : 1px solid var(--genIndex-popup-border) ;
	border-radius : 0.4em ;
	padding : 0 0.4em 0.4em 0.4em;
	border : 1px solid var(--genIndex-color) ;
	background-color : var(--genIndex-popup-bg) ; ;
	user-select: none; 
}

.bapteme, .deces, .tombe, .testament, .contrat, .mariage {
	margin-top : 0.5em;
	margin-bottom : 0.5em;
}

.releve[typeActe="B"] .identite { /* Baptême */
	background-color: var(--genIndex-panneau-B-header-bg);
}

.releve[typeActe="CM"] .signature { /* Contrat de Mariage */
	background-color: var(--genIndex-panneau-CM-header-bg); 
}

.releve[typeActe="M"] .signature { /* Mariage */
	background-color: var(--genIndex-panneau-M-header-bg); 
}

.releve[typeActe="T"] .identite { /* Testament */
	background-color: var(--genIndex-panneau-T-header-bg); 
}

.releve[typeActe="S"] .identite { /* Sépulture */
	background-color: var(--genIndex-panneau-S-header-bg); 
}

.releve[typeActe="C"] .identite { /* Cimetière */
	background-color: var(--genIndex-panneau-C-header-bg); 
}


.releve .identite {
	display:flex ;
	flex-direction: row ;
	justify-content : space-between;
	align-items : center ;
	padding : 0.2em 0 0.2em 0 ;
}
.releve .identite span.nom {
	max-width: 15em;
	display: inline-block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.releve .identite .smallButton {
	top : 0 !important ;
}

.releve .identite, .releve .signature {
	font-weight : 900 ;
	text-align : center ;
	color : var(genIndex-color) ;
	margin-left: -0.4em;
	width: calc(100% + 0.8em);
	border-top-left-radius: 0.4em;
	border-top-right-radius: 0.4em;
}

.releve .observations {
	font-size : 90% ;
	width : 90% ;
	margin : auto ;
	margin-top: 0.4em;
}

.comments, .corrections {
	width : 90%;
	margin : auto ;
	text-align: justify;
	padding : 0.4em ;
	border : 1px solid var(--genIndex-popup-border) ;
	max-height : 5em ;
	overflow-x : hidden ;
	overflow-y : auto;
	font-size : 90%;
	margin-top : 0.4em;
}

.comments a {
	text-decoration: underline;
	cursor : pointer ;
	color : var(--genIndex-tableRow-hyperlink);
}

.comment textarea, .correction textarea {
	width : 90%;
	margin-left : 5% ;
	height : 5em;
}

img.gender  {
	width : 0.5em;
	margin-left : 0.3em;
}

/* ================================ Wait ================================== */
#wait {
	text-align : center ;
/*	 position : fixed ;
	top : 6em;
	color : #00AAFF ;
	width : 100%;
	height : calc(100% - 7em) ;
	padding-top : 10em ;
	background-color : rgba(255,255,255,0.9);  */
}

#wait img {
	width : 4em;
}

/* ================================ modalBackground ================================== */
.modalBackground{
	position : fixed ;
	top : 0 ;
	left : 0 ;
	width : 100%;
	height : 100%;
	background-color: rgba(255, 255, 255, 0.4) ;
	z-index : 9999 ;
	display : inline-block;
	vertical-align: middle ;
}

.modalBackground fieldset {
	background-color: var(--genIndex-body-bg); ;
	display : block ;
	width : 60% ;
	margin-left : 20% ;
	border-radius : 0.4em ;
	border : 1px solid var(--genIndex-color) ;
	/* margin-top: 15%; supprimé le 18/06/2024 : edition des préférences */
}

.adminCommunes .modalBackground textarea {
	height : 6em;
	margin : 0 !important ;
}


/* 
.modalBackground{
	position : fixed ;
	top : 0 ;
	left : 0 ;
	width : 100%;
	height : 100%;
	background-color: rgba(125,125,125,0.8);
	z-index : 9999 ;
	display : none;
	vertical-align: middle ;
} */

.modalBackground .interactionArea {
	width : 60%;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding : 0.5em;
	max-height: 90vh;
	overflow-y: auto;
	overflow-x: hidden;
}

.modalBackground .interactionArea:not(.discrete) {
	background-color : var(--genIndex-popup-bg) ;
}

#divConsentement  {
	display : block ;
}

#divConsentement .interactionArea {
	border : 2px solid var(--genIndex-popup-border) ;
}


.modalBackground .interactionArea fieldset {
	width : 90% ;
	margin : auto ;
	border-radius : 0.4em ;
	border : 2px solid var(--genIndex-color) ;
}

.modalBackground .interactionArea fieldset legend {
	color : var(--genIndex-color);
	border: 1px solid var(--genIndex-color);
}


.field {
  margin-bottom: 4px;
}

.modalBackground  .interactionArea .rubrique {
	font-weight : 900 ;
}
.modalBackground  .interactionArea .rubrique:not(:first-child) {
	border-top: 0.5px solid var(--genIndex-input-fg);
	margin-top: 1em;
}

.modalBackground  .interactionArea input[type="button"] {
	cursor : pointer ;
}


/* ================================ Demandes et erreurs ================================== */


/* ================================ Messagerie ================================== */


/* ================================ Gestion des recherches ================================== */

#getNomRecherche input[type="text"] {
	width: calc(65% - 5.7rem);
}


.limitedHeight {
	width : 100%;
	overflow-x : hidden ;
	overflow-y : auto ;
	max-height : 50vh;
}

.etatReleves .datesRegistres {
	font-weight : 200 ;
}
.etatReleves .datesRegistre {
	border: 0.5px solid var(--genIndex-sousOnglet_bg);
	margin: 0 0.5em;
	border-radius: 0.3em;
	padding: 0.1em 0.3em;
}

.etatReleves .annees, .etatNotaires .annees {
	width: 6em !important;
	display: inline-block;
	text-align: right;
	white-space: nowrap;
}
.etatReleves .decompte:nth-child(2n) {
	color: var(--genIndex-color);
}
.etatReleves .decompte:hover {
	background-color : var(--genIndex-inactive-bg) ;
}
.etatReleves .nombre, .etatNotaires .nombre {
	width: 4em !important;
	display: inline-block;
	text-align: right;
	padding-left: 0.5em;
}

.discreteDot {
	color: var(--genIndex-secondary-text);
	padding: 0 0.1em;
}

h1 {
	color : var(--genIndex-title-fg) ;
}

h1.structuredH1 {
	display : flex ;
	justify-content : space-between;
	padding : 0 1em ;
	align-items : center ;
}
.subMenu {
	display : flex ;
	justify-content : space-evenly;
	padding : 0 1em ;
	align-items : center ;
	width: 60vw;
	margin-left: 20vw;
	background-color: var(--genIndex-sousOnglet_bg);
	padding: 0.5em;
	box-sizing: border-box;
	border-radius: 1em;
}
.subMenu .sources {
	color: initial;
	font-weight: 400;
	font-size: 1rem;
}
h1.structuredH1 nav {
	display : flex ;
	align-items : center ;
	gap : 1em ;
	margin : 0 ;
}
.subMenu nav input.filter {
	background-color: var(--genIndex-secondary-text-bg);
	border: none;
	border: 1px solid var(--genIndex-secondary-text-border);
	color: var(--genIndex-secondary-text-fg2);
	padding: 0.2em;
}

.critere {
	margin-top:0.4em;
}

.critere.spaceBelow {
	margin-bottom : 0.6em ;
}

.critere .listeOptions {
	white-space: nowrap;
}


.exclusif {
	text-orientation: sideways;
	writing-mode: vertical-rl;
	writing-mode: sideways-lr;
	background-color: var(--genIndex-secondary-text-border);
	color: var(--genIndex-body-bg);
	font-size: 80%;
	height: 10em;
	text-align: center;
	font-family: sans-serif;
	padding: 0 0.2em;
	position: absolute;
	user-select:none;
	cursor:help;
}

.alerteCoherence {
	text-orientation: sideways;
	writing-mode: vertical-rl;
	writing-mode: sideways-lr;
	background-color: var(--genIndex-secondary-text-border);
	color: var(--genIndex-body-bg);
	font-size: 80%;
	height: 10em;
	text-align: center;
	font-family: sans-serif;
	padding: 0 0.2em;
	position: absolute;
	user-select:none;
	cursor:help;
	margin-top: 0.8em;
	white-space: nowrap;
	text-overflow: clip;
	overflow: hidden;
}

.colorPickers {
	display: inline-flex;
	column-gap: 3px;
	align-items: center;
	justify-content: center;
}

.colorPicker {
	width : 1em ;
	height : 1em ;
	display:inline-block ;
}

.colorPicker:NOT(.selected) {
	transition: all .2s ease-in-out;
}

.colorPicker:NOT(.selected):hover {
	transform: scale(1.5);
	z-index : 9999 ;
}

/* .colorPicker.bordered { Supprimé le 18/06/2024 : enlevé de mgtPreferences => inutile ?
	border : 1px solid var(--genIndex-popup-border) ;
} */

.colorPicker.fg0, .colorPicker.bg0 {
	font-family: sans-serif;
	border: 1px dotted var(--genIndex-inactive-fg);
	border-radius : 0.2em;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding-top: 3px;
}

.colorPicker.fg0.selected, .colorPicker.bg0.selected {
	line-height: 1.4em;
}

.colorPicker.selected {
	width : 1.4em ;
	height : 1.4em ;
	border-radius : 0.2em;
	border : 1px solid var(--genIndex-popup-border) ;
}

.veryLongLabel {
	display: inline-block;
	text-align: right;
	width: 32em;
	margin-right: 0.4em;
}

label.secondLabelOnLine {
	margin-left : 6px ;
	width : 5em !important ;
}

input.secondLabelOnLine {
	margin-left : 2.5em ;
}

img.btnSearch.reinit {
	height : 1.5em;
	width : auto !important ;
}


.identiteInconnue {
	color: var(--genIndex-secondary-text) !important;
}

/* ================================ Plans des cimetières ================================== */

.panneauPlanCimetiere {
	display : inline-block;
	border-radius : 0.4em ;
	border : 1px solid var(--genIndex-color) ;
	background-color: var(--genIndex-color);
	user-select: none; /* webkit (safari, chrome) browsers */
	z-index : 99999 ;
	position : fixed ;
	top : 4em ;
	left : 9vw ;
	overflow: hidden;
	height: 70vh;
	width: 40vw;
}

.panneauPlanCimetiere header {
	display:flex ;
	flex-direction: row ;
	justify-content : space-between;
	align-items : center ;
	padding : 0.2em 0 0.2em 1em ;
	color: var(--genIndex-popup-bg) ;;
	border-top-left-radius: 0.4em;
	border-top-right-radius: 0.4em;
	cursor : move ;
	position : absolute ;
	top : 0 ;
	background-color : var(--genIndex-body-fg) ;
	width: 100%;
	box-sizing: border-box;
	padding-right : 1em ;
}

.panneauPlanCimetiere section {
	margin-top : 1em ;
	overflow-x: hidden;
	overflow-y: auto;
	position : absolute; 
	top : 1em ;
	left : 0 ;
	width : 100% ;
	height : 100% ;
}

.panneauPlanCimetiere section  h2 {
	white-space: nowrap;
}

.panneauPlanCimetiere img {
	width: calc(100% - 2em);
	margin-left: 1em;
}


h2 {
	color : var(--genIndex-color) ;
}

h2.complexH2 { /* Titre qui contient des boutons */
	margin-bottom : 0.2em;
}
h2.complexH2 > img {
	height : 0.75em ;
}
h2.complexH2 > .cartouches {
	font-size : 75% ;
}
.titreGrille {
	font-style: italic;
	color: var(--genIndex-secondary-text);
	font-size: 90%;
}

.smallText {
	font-size : 90%;
	color : var(--genIndex-secondary-text) ;
}

.pagePlanCimetiere h1, .pagePlanCimetiere h2 {
	color: var(--genIndex-color);
}

.panneauPlanCimetiere h2 {
	color : var(--genIndex-opposite-color) ;
}

.planCimetiere {
	max-width: calc(100% - 15px);
	border-bottom-left-radius: 0.4em;
	border-bottom-right-radius: 0.4em;
}

#statsComments {
	position: relative;
	width: 1.6em;
	display: inline-block;
}

#statsComments span {
	font-size: 70%;
	position: absolute;
	right: 0;
	color: var(--genIndex-secondary-text-bg) ;
	background-color: var(--genIndex-color);
	padding: 0.2em;
	border-radius: 0.8em;
	bottom: 0;
	font-weight: bold;
}

.listComments .comment:not(:first-child) {
	margin-top: 1em;
}

.listComments .comment.myComment {
	background-color : var(--genIndex-alertMsg);
}

.listComments .comment header {
	color : var(--genIndex-color);
	font-weight : bold ;
}

.listComments .comment section {
	display : inline-block;
	margin-left : 2em ;
}

/* ================================ Export Geneabank ================================== */

ul#exportsEnCours li{
	cursor : pointer ;
}

ul#exportsEnCours li:hover span{
	background-color : var(--genIndex-tableRow-hover-bg) ;
	color : var(--genIndex-tableRow-hover-fg) ;
}


.blinking {
	animation: blinker 4s linear infinite;
}
@keyframes blinker {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
}

#export.btnAdmin {
	height : 3em !important;
	margin-left : 0 !important ;
	cursor : pointer;
}

#export #mois {
	width: 3em;
}

#export #annee {
	width: 5em;
}

#export #previousExport {
	width: 20em;
	max-width: none;
}

.fichier {
	margin-bottom : 0.3em;

}

.statut {
	margin-right : 0.5em;
}

/* ================================ Pages d'aide ================================== */
.help {
	width : 99.9vw ;
	overflow-x: hidden ;
	padding-bottom : 100vh ;
}

.help section#main {
	padding-top : 5em ;
	width:90%;
	margin-left:5%;
	text-align:justify;
}

#gotoTop {
	width: 1em;
	position: absolute;
	right: 2em;
	top : 1em ;
}

.help #main img {
	max-width : 99.9vw ;
	display:block ;
	margin : auto ;
	border : 2px solid var(--genIndex-color) ;
	padding : 0.5em ;
	border-radius : 0.5em;
	margin-top : 0.5em ;
	margin-bottom : 0.5em ;
	transition: all .5s;
}

.help #main img.dansTexte {
	display : inline-block ;
	margin : 0 ;
	border : none ;
	height : 1.5em;
	position : relative ;
	top : 0.6em;
}

.help #main img.enLigne {
	display : inline-block ;
	margin : 0 ;
	border : none ;
	height : 1.5em;
	position : relative ;
	top : 0.6em;
}

.help #main img.dansTexte.small {
	height: 1em;
	top: 0.2em;
	padding: 0 0.2em;
	border-radius: 0;
}

.help #main img:hover {
	transform: scale(1.5);
	z-index : 9999 ;
	background-color:var(--genIndex-body-bg) ;
}

.help img.quart {
	width : 25%;
}

.help img.tiers {
	width : 33%;
}

.help img.demi {
	width : 50%;
}

.help img.deuxtiers {
	width : 66%;
}

.help img.troisquarts {
	width : 75%;
}

.help h2, #tabBodyPostImport h2 {
	background-color : var(--genIndex-color);
	color : var(--genIndex-opposite-color) ;
	padding : 0.1em 1.5em 0 1.5em ;
	box-sizing: border-box;
}

.help h3 {
	color : var(--genIndex-color);
	font-style:italic;
	text-decoration: underline;
}
.help h4 {
	color : var(--genIndex-color);
}

.help .important {
	margin : 0 2em;
	border : 1px solid var(--genIndex-secondary-text-border) ;
	background-color : var(--genIndex-popup-bg) ;
	padding : 0.5em;
	box-sizing: border-box;
}

.help blockquote {
	margin : 0 2em;
	border : 1px solid var(--genIndex-secondary-text-border) ;
	background-color : var(--genIndex-popup-bg) ;
	padding : 0.5em;
	box-sizing: border-box;
	display : inline-block ;
}

.fakeLien {
	color : var(--genIndex-inactive-fg);
	text-decoration: underline;
}

.help label {
	display : inline-block ;
	width : 12em ;
	text-align : right ;
	margin-right : 0.5em;
}

#sommaire {
	float: right;
	background-color: var(--genIndex-summary-bg);
	border: 2px solid var(--genIndex-color);
	margin-left: 1em;
	display : none ;
}

#sommaire h1 {
	text-align : center ;
}

#sommaire li {
	cursor : pointer ;
}

.enlighten {
	color : var(--genIndex-important-bg) ;
	background-color : var(--genIndex-surlignage-1) ;
	font-weight: 900 ;
}

.annonceAssoce {
	position: fixed;
	top: 3em;
	right: 1em;
	display: inline-block;
	z-index: 9999;
	background-color:var(--genIndex-popup-bg);;
	width: 500px;
	max-height: 230px;
	padding: 0 0.5em 0.5em 0.5em;
	border-radius: 0.5em;
	-webkit-box-shadow: -9px 10px 9px 4px var(--genIndex-shadowColor); 
	box-shadow: -9px 10px 9px 4px var(--genIndex-shadowColor);
}

.annonceAssoce.hiddenFirst {
	display : none ;
}

.annonceAssoce iframe {
	background-color: var(--genIndex-popup-bg) ;
}
.externalLink {
	color : var(--genIndex-inactive-fg) ;
	float : right ;
	margin-right : 1.5em ;
	text-decoration: none;
}

.annonceAssoce header {
	height : 1em ;
	font-variant: small-caps;
	color : var(--genIndex-popup-bg) ;
}


.annonce {
	position: fixed;
	top: 3em;
	right: 1em;
	display: inline-block;
	z-index: 9999;
	background-color: var(--genIndex-popup-bg);
	max-width: 30vw;
	max-height: 30vh;
	padding: 0.5em;
	border-radius: 0.5em;
	min-width: 10em;
	color: var(--genIndex-popup-text);
	border : 1px solid var(--genIndex-errorMsg) ;
}

.annonce section.titre, .annonce section.actions {
	text-align : center ;
	font-family: sans-serif;
}

.annonce section.titre {
	margin-bottom: 0.5em;
}
.annonce section.actions {
	margin-top: 0.5em;
}

.annonce section.texte {
	width:100% ;
	max-height : calc(30vh - 2.5em) ;
	overflow-x : hidden ;
	overflow-y : auto ;
	/* background-color: var(--genIndex-secondary-text-bg) ; ; */
	min-height: 3em;
}

/*	===================================================================================
	Nouveautés sur les relevés */

.btnWithSelect {
	display: inline-block;
	border : 1px solid var(--genIndex-color);
	color: var(--genIndex-color);
	padding: 0.2em 0.5em;
	margin-bottom: 1em;
	border-radius: 0.3em;
	margin-right: 1em;
	cursor : pointer ;
}

.btnWithSelect.actif {
	background-color: var(--genIndex-color);
	color: var(--genIndex-opposite-color);
	border-width: 0 ;
}

.noNews {
	color : var(--genIndex-inactive-bg) ;
}

.datesNews {
	font-size : 80% ;
}

.voirRelevesNew {
	background-color : var(--genIndex-color) ;
	color : var(--genIndex-opposite-color) ;
	border-radius : 0.2em;
	border : 1px solid var(--genIndex-secondary-text-border) ;
	cursor:pointer;
}

.formatNumber {
	display: inline-block;
	width: 4em;
	text-align: right;
	margin-right: 0.4em;
}

.voirRelevesNew.newB {
	background-color : var(--genIndex-panneau-B-header-bg) ;
	color : var(--genIndex-panneau-fg) ;
}

.voirRelevesNew.newCM {
	background-color : var(--genIndex-panneau-CM-header-bg) ;
	color : var(--genIndex-panneau-fg) ;
}

.voirRelevesNew.newM {
	background-color : var(--genIndex-panneau-M-header-bg) ; ;
	color : var(--genIndex-panneau-fg) ;
}

.voirRelevesNew.newT {
	background-color : var(--genIndex-panneau-T-header-bg) ; ;
	color : var(--genIndex-panneau-fg) ;
}

.voirRelevesNew.newS {
	background-color : var(--genIndex-panneau-S-header-bg) ;
	color : var(--genIndex-panneau-fg) ;
}

.voirRelevesNew.newC {
	background-color : var(--genIndex-panneau-C-header-bg) ;
	color : var(--genIndex-panneau-fg) ;
}


.releves {
	user-select: none; 
}

.tabsBodies .releves .titre {
	margin-top : 1em;
	margin-bottom : 1em;
	width : 100% ;
	text-align : right ;
	padding-right : 2em ;
}

.tabsBodies .message {
	z-index: 1000000;
	position: relative;
}

#tabBodyNouveautes .panneaux {
	clear:both;
}

.filtre {
	float: left;
	font-size : 90% ;
}

.tabsBodies .cartouches {
	float : right ;
}

/* .cartouche {
	display : inline-block ;
	font-weight : 200 ;
	font-size : 90% ;
	border : 1px solid var(--genIndex-color) ;
	border-radius : 0.3em;
	padding-right : 0.4em;
	height: 1.4em;
} */

.cartouche.withLeftSpace {
	padding-left: 0.4em;
}

.cartouche input[type="text"] {
	border: none;
}

h2.structuredH2 .cartouche {
	padding: 0 0.4em;
	display: flex;
	align-items: center;
	margin-top: 2px;
	margin-bottom: 2px;
	height : auto ;
}

span.smallButton {
	top: 0 !important;
	margin-top: 0.1em;
	margin-bottom: 0.1em;
	display: inline-block;
	width: auto !important;
	font-weight: 700;
	background-color: var(--genIndex-color);
	color: var(--genIndex-opposite-color);
	padding: 0.2em 0.4em 0 0.4em;
	border-radius: 0.8em;
}

.modeTest {
	height: 2em;
	top: 0.7em;
	position: relative;
}


/*	===================================================================================
	Gestion des abonnements */

.pagination {
	width : 95vw ;
	text-align : right ;
}

.btnMention {
	border : 1px solid var(--genIndex-color) ;
	border-radius : 0.2em ;
	background-color: var(--genIndex-input-bg) ;
	cursor : pointer ;
	font-size: 70%;
	padding: 0.2em;
}

.btnMention:hover {
	color : var(-genIndex-important-border) ;
	border : 1px solid var(-genIndex-important-border) ;
}

.indicator {
	color: var(--genIndex-secondary-text);
	font-size: 80%;
	position: relative;
	top: -1.9%;
	font-family: sans-serif;
	font-weight: 200;
}

.abonnement {
	border-top: 0.5px solid var(--genIndex-body-fg);
	margin-top: 1em;
	padding-top: 0.5em;
}

.abonnement.inactif {
  color: var(--genIndex-tableRow-disabledHyperlink);
}

.abonnement.actif .activate {
	display: none;
}

.abonnement:not(.actif) .deactivate {
	display: none;
}

#invisibleCriteriaTop, #invisibleCriteriaBottom {
	background: var(--genIndex-secondary-text-bg) ; ;
	border : 1px solid var(--genIndex-inactive-bg) ;
	color : var(--genIndex-inactive-fg) ;
	display : inline-block;
	position : fixed ;
	right : 1em ;
	display : none ; 
	padding : 0 0.5em ;
	font-family: sans-serif;
	font-size: 80%;
}

#invisibleCriteriaTop:after {
	bottom: 100%;
	right: 10px;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-bottom-color: var(--genIndex-body-fg);
	border-width: 5px;
	margin-left: -5px;
}
#invisibleCriteriaBottom:after {
	top: 100%;
	right: 10px;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: var(--genIndex-body-fg);
	border-width: 5px;
	margin-left: -5px;
}

.criteriaList {
	position : fixed ;
	top : 14em ;
	left : 0.5em ;
	max-height : calc(100vh - 15em) ;
	max-width : 10vw ;
	overflow-y: auto ;
	font-family: sans-serif;
	white-space : nowrap;
	overflow-x : hidden;
	cursor : pointer;
	z-index : 9998 ; 
	display : inline-block;
	color : var(var(--genIndex-secondary-text)) ;
	font-size: 85%;
	line-height: 100% !important;
	padding: 1em 0 1em 4px;
}

.criteriaList:not(:empty) {
	border-left: 2px solid var(--genIndex-criteriaList-fg);
	border-top-left-radius: 1em;
	border-bottom-left-radius: 1em;
}

.criteriaList .titre {
	color : var(--genIndex-criteriaList-fg) ;
}

.criteriaList #areaModifier {
	text-align:center;
	margin-top:1em;	
}

.criteriaList #areaModifier input {
	color : var(--genIndex-criteriaList-fg) ;
}

.criteriaList .criterion {
	display : block;
	margin-bottom : 0.3em;
	width : 8.5vw ;
	text-overflow: ellipsis;
	overflow : hidden;
	position:relative;
	transition: all .4s ease-in-out;
	padding-left: 0.5em !important;
}

.criteriaList .alerte, .criteriaList .alerte:hover {
	color : var(--genIndex-important-bg);
}

.criteriaList .useless {
	padding : 0.2em 0 ;
	color: var(--genIndex-alertMsg);
	/* border: 0.5px solid var(--genIndex-alertMsg); */
	background-color : var(--genIndex-surlignage-1) ;
	background: linear-gradient(90deg, var(--genIndex-surlignage-1) 80%, transparent 100%);
}

.criteriaList .symbol {
	font-size : 90%;
	position : relative ;
	top : -5%;
	margin-right : 0.2em ;
	width: 1em;
	display: inline-block;
	text-align: center;
}

.criterion b {
	border-left: solid 1px var(--genIndex-color);
	position: relative;
	top: -1px;
	margin: 0 0.1em;
}

.customProgressBar {
	width: 50%;
	height: 16px;
	background-color: var(--genIndex-progress-todo-bg); /* #7c7c7c */
	margin: 10px auto;
	border-radius: 4px;
	overflow: clip;
	position : relative ;
}
.customProgressBar .done {
	background-color: var(--genIndex-progress-done-bg); /* #25ae25 */
	width: 0 ;
	height: 100%;
	font-size: 12px;
	padding-top: 2px;
	box-sizing: border-box;
	text-align: center;
	font-family: sans-serif;
	font-weight: 900;
	padding-top: 0;
	position: absolute;
	top: 0;
	left: 0;
}

.customProgressBar .percent {
	color: var(--genIndex-progress-done-fg);
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
}

.remainingTime {
	width : 100% ;
	text-align : center ;
}

/* ============================ Couleurs ============================== */
.sectionIndicator {
	width : auto !important ;
	background-color : inherit !important ;
}

/* ============================ Recherche facile ============================== */
#rechercheFacile > header {
	position : absolute ;
	position : fixed ;
	top : 0 ;
	left : 0 ;
	width : 99.9vw ;
	background-color : var(--genIndex-body-bg) ;
	padding : 0.4em ;
	z-index : 99999;
	border-bottom : 2px solid var(--genIndex-color);
	-webkit-box-shadow: 0px 12px 9px 0px var(--genIndex-sousOnglets_ShadowColor);
	-moz-box-shadow: 0px 12px 9px 0px var(--genIndex-sousOnglets_ShadowColor);
	box-shadow: 0px 12px 9px 0px var(--genIndex-sousOnglets_ShadowColor);
	margin-top: 5.9em;
}

#rechercheFacile > header .version {
	position : absolute ;
	bottom : 0.3em ;
	left : 0.3em ;
	color : var(--genIndex-color);
	font-size : 80% ;
}

#rechercheFacile nav {
	clear : both;
	width : 100% ;
	text-align : center ;
	padding-top: 4px;
}

#rechercheFacile nav ul {
	margin : 0 ;
}

#rechercheFacile nav ul li {
	display : inline-block ;
	padding: 0.1em 0.5em 0.1em 0.5em;
	border : 1px solid var(--genIndex-color);
	color : var(--genIndex-color);
	margin-right : 1em ;
	border-radius : 0.5em;
	cursor : pointer;
}

#rechercheFacile nav ul li:hover{
	background-color : var(--genIndex-color);
	color : var(--genIndex-opposite-color) ;
}

#rechercheFacile nav ul li.switchSearch {
	border : 1px solid var(--genIndex-admin-color);
	color : var(--genIndex-admin-color);
}
#rechercheFacile nav ul li.switchSearch:hover{
	background-color : var(--genIndex-admin-color);
	color : var(--genIndex-opposite-color) ;
}

#rechercheFacile nav ul li > a {
    color: inherit;
    text-decoration: none;
}

#rechercheFacile #infos {
	margin-left : 3em ;
	text-align : justify ;
	width : calc(100vw - 9em) ;
	margin-top: 7.5em;
}

#rechercheFacile fieldset {
	border : 1px solid var(--genIndex-color);
	border-bottom-width : 3px;
	border-left-width : 3px;
	border-radius : 1em;
	margin-top: 2em;
	margin-bottom: 2em;
	padding : 1em 0 1em 0 ;
}

#rechercheFacile legend {
	color : var(--genIndex-color);
	font-weight : 900 ;
	padding : 0 0.5em 0 0.5em ;
	margin-left : 2em ;
}

#rechercheFacile legend .reverse {
	padding: 0 0.5em 0 0.5em;
	text-transform : capitalize ;
	font-variant : small-caps ;
	font-style: oblique;
	color: var(--genIndex-legend-color-reverse);
}

#rechercheFacile label {
	width : 14em ;
	display : inline-block ;
	text-align : right ;
}

#rechercheFacile .lastname {
	text-transform: uppercase;
}

#rechercheFacile .btnChoix, .btnSubmit {
	background-color : var(--genIndex-color);
	color : var(--genIndex-opposite-color) ;
	font-weight : 900 ;
	border : none ;
	padding : 0.3em 0.8em 0.3em 0.8em ;
	position : relative ;
	border-radius : 0.4em ;
	cursor : pointer;
}

#rechercheFacile .btnChoix:hover, .btnSubmit:hover {
	background-color : var(--genIndex-color);
}


#rechercheFacile .btnBar {
	margin-top : 1em ;
	width : 100% ;
	text-align : center ;
}

#rechercheFacile .guidage {
	font-size:90%;
}

#rechercheFacile .choixLieu {
	position: absolute;
	position: fixed;
    top: 0;
    left: 0;
	width: 99.9vw;
	height: calc(99.9vh - 6em);
    z-index: 999999;
    background-color: var(--genIndex-header-bg);
    display: none;
    -webkit-box-shadow: -14px 11px 8px -5px var(--genIndex-shadowColor);
    -moz-box-shadow: -14px 11px 8px -5px var(--genIndex-shadowColor);
    box-shadow: -14px 11px 8px -5px var(--genIndex-shadowColor);
	margin-top: 6em;
	padding-top: 1em;
}

#rechercheFacile .choixLieu h2 {
	margin-bottom : 0 ;
	padding-left:0.5vw;
}

#rechercheFacile .CNIL {
	padding: 0 0.5vw;
	margin: 1em 0;
	font-size: 80%;
}

#rechercheFacile .closeButton {
	float : right ;
	width : 1em;
    cursor : pointer;
    position: relative;
    top: 0.5em;
    right : 0.5em;
    border: 0px solid transparent;
    padding: 0;
    background-color: transparent;
    transition: all .2s ease-in-out;
}

#rechercheFacile .closeButton:hover {
    transform: scale(1.5);
	z-index : 999999 ;
}

#rechercheFacile #listeLieux {
	max-height : calc(100% - 10.5em);
	overflow-y : auto ;
	overflow-x : hidden ;
}

#rechercheFacile #titre {
	font-size : 140%;
	font-weight : bold ;
	width : 80vw;
	text-align : center ;
	position : relative ;
	left : 50%;
	transform: translate(-50%);
	color : var(--genIndex-title-fg) ;
}

#rechercheFacile .bilanReleves {
	display : inline-block ;
	position : relative ;
	left : 50%;
	transform: translate(-50%);
	border : 1px solid var(--genIndex-secondary-text-border) ;
	padding : 0.4em;
}

#rechercheFacile .filtre {
	position : absolute ;
	width : 100%;
	padding : 0.5em 1em 0.5em 1em ;
	box-sizing: border-box;
	background-color : var(--genIndex-buttons-bar-bg) ;
	color : var(--genIndex-color) ;
	text-align : center ;
	bottom : 1em ;
	left : 0 ;
}

#rechercheFacile .filtre a.initiale {
	color : var(--genIndex-color) ;
	background-color : var(--genIndex-buttons-bar-bg) ;
	text-decoration : none;
	border : 1px solid var(--genIndex-color) ;
	width : 1.2em ;
	text-align : center ;
	display : inline-block ;
	border-radius : 0.2em;
	margin-right : 0.5em;
	padding-top: 0.1em;
}

#rechercheFacile filtre a.initiale:hover {
	background-color : var(--genIndex-secondary-text-bg) ;
	color : var(--genIndex-title-fg) ;
}

#rechercheFacile .filtre span.initialeInactive, #rechercheFacile a.initiale.disabled {
	pointer-events : none ;
	color : var(--genIndex-tableRow-disabledHyperlink) ;
	background-color : var(--genIndex-inactive-bg) ;
	border : 1px solid var(--genIndex-inactive-fg) ;
	width : 1.2em ;
	text-align : center ;
	display : inline-block ;
	border-radius : 0.2em;
	margin-right : 0.5em;
}

#rechercheFacile .filtre .note {
	font-size : 90%;
	font-style : italic;
}

#rechercheFacile .listeCommunes {
	border-collapse: collapse;
    width: calc(99% - 0.5vw);
    margin-left: 0.5vw;
    font-size: 90%;
}

#rechercheFacile .listeCommunes th {
	vertical-align : middle ;
	text-align : center ;
}

#rechercheFacile .invisible {
	display : none ;
}

#rechercheFacile .listeCommunes th.initiale {
	background-color : var(--genIndex-color) ;
	color : var(--genIndex-opposite-color) ;
	font-size : 120% ;
	font-weight : 900 ;
}

#rechercheFacile .listeCommunes .periodePhotos {
	text-align : right ;
	font-size : 60% ;
	margin-right : 0.5em ;
	vertical-align:middle ;
}

#rechercheFacile .listeCommunes .periodePhotos:hover {
	font-size : 100% ;
}

#rechercheFacile .guidageListe {
	display : none ;
	position : fixed ;
	top : 8em ;
	/* transform: translate(0, -50%); */
	right : 2em ;
	border : 2px solid var(--genIndex-secondary-text-border) ;
	color : var(--genIndex-secondary-text-fg2) ;
	background-color : var(--genIndex-secondary-text-bg);
	padding : 0.5em ;
	width : 20vw ;
	border-radius : 1em;
}

#rechercheFacile .guidageListe:after, .guidageListe:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

#rechercheFacile .guidageListe:after {
	border-color: rgba(239, 239, 239, 0);
	border-bottom-color: #EFEFEF;
	border-width: 30px;
	margin-left: -30px;
}
#rechercheFacile .guidageListe:before {
	border-color: rgba(0, 144, 192, 0);
	border-bottom-color: #00769D;
	border-width: 33px;
	margin-left: -33px;
}

#rechercheFacile .cgdSearchResult {
	position : fixed ;
	top : 0 ;
	left : 0 ;
	width : 99.9vw ;
	min-height:99.9vh;
	z-index:999999;
	background-color: var(--genIndex-secondary-text-bg) ;
}

#rechercheFacile .twoColumns {
	columns:2 ;
	margin-top : 1em ;
}

#rechercheFacile .nonBreakableColumn {
	break-inside: avoid;
}

#rechercheFacile .nonBreakableColumn:NOT(:first-child) {
	border-left : 1px solid var(--genIndex-color);
}

#rechercheFacile .columnsTitle {
	text-align : center ;
	font-weight: 900 ;
}

#rechercheFacile input[version] {
    border: none;
    background-color: var(--genIndex-button-bg);
    margin-right: 0.6em;
    border-radius: 0.3em;
	margin-bottom:0.3em;
}

#rechercheFacile input[version].actif {
    background-color: var(--genIndex-active-button-bg);
}

#rechercheFacile .smallText {
	color : var(--genIndex-secondary-text) ;
	float : left ;
	margin-right : 1.5em ;
	text-decoration: none;
	font-size : 80% ;
	padding-top: 0.1em;
}

.limitTableHeight {
	max-height : 80vh ;
	overflow-y : auto ;
	max-width : 80% ;
}

/* .tabBodyTranscripteurs label.debutLigne {
	width : 11em ;
} */

.leaflet-popup-content .smallIcon {
	position: static;
}

body > header #titre {
	width: 25% !important;
}
body > header > nav {
	padding: 1em 0.5em 0.5em 0.5em ;
	display: flex;
	align-items: center;
	/* width: 50em ; */
	max-width: 70em;
	justify-content: space-between;
}
body.useButtons > header > nav, body.useLinks > header > nav {
	align-items : flex-start ;
}
.cartouche {
	padding : 0.2em 0.5em ;
	/* padding : 0.2em 0.5em 0 0.5em ; */
	border: 0.7px solid var(--genIndex-color);
	color: var(--genIndex-color);
	background-color : var(--genIndex-cartouche-bg) ;
	display : inline-flex ;
	align-items : center ;
	position : relative ;
	margin-right: 0.5em;
	column-gap: 3px;
	border-radius: 4px;
	height: 1.2em;
}
.cartouche.noborder {
  border: none;
}

.cartoucheGroup:not(:last-child):has(.iconContainer) {
	border-right: 0.5px solid var(--genIndex-popup-border);
	padding-right: 4px;
}

body > header > nav .cartouche.admin, .buttonsBar .cartouche.admin {
	border-color : var(--genIndex-admin-color) !important ;
	color : var(--genIndex-admin-color) ;
}
.buttonsBar .cartouche.admin {
	margin-left : 0.3em ;
}
body > header > nav .button {
	margin-top: 0 !important;
}

body > header > nav > .cartouche > legend {
	font-size: 80%;
	border: none;
	position: absolute;
	left : 50% ;
	top: -1.1em ;
	background-color: transparent !important ;
	display : none ;
	text-align: center;
	color: var(--genIndex-color);
	transform : translate(-50%, 0) ;
	font-weight : 900 ;
	z-index : 1000000 ;
	white-space : nowrap ;
}

body > header > nav .cartouche.admin > legend {
	color : var(--genIndex-admin-color) ;
}

body > header > nav > .cartouche:hover > legend {
	display : inline-block ;
}

body.useButtons .structuredH2:hover .buttonsCartouche:hover legend {
	color : 1.5px solid var(--genIndex-color);
}

.cartouche .iconContainer {
	height: 1em;
	position : relative ;
}

.cartouche .iconContainer .iconLegend {
	font-size: 80%;
	border: none;
	position: absolute;
	top: 170%;
	left : 50% ;
	/* background-color: transparent !important ; */
	display : none ;
	color: var(--genIndex-secondary-text);
	transform : translate(-50%, 0) ;
	background-color: var(--genIndex-header-bg);
	padding: 0.2em 0.4em;
	border-radius: 0.4em;
	z-index : 1000001 ;
	white-space : nowrap ;
}

/* .cartouche.admin .iconContainer .iconLegend {
	color: var(--genIndex-admin-color);
} */

.cartouche .iconContainer .iconLegend {
	background: var(--genIndex-header-bg);
	/* border-top: 1px solid var(--genIndex-action-icon); */
	border-top: 1px solid var(--genIndex-secondary-text);
}

/* .cartouche.admin .iconContainer .iconLegend {
	border-top: 1px solid var(--genIndex-admin-color);
} */

.cartouche .iconContainer .iconLegend:after, .cartouche .iconContainer .iconLegend:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.cartouche .iconContainer .iconLegend:after {
	border-color: rgba(80, 220, 242, 0);
	border-bottom-color: var(--genIndex-header-bg);
	border-width: 5px;
	margin-left: -5px;
}

.cartouche .iconContainer .iconLegend:before {
	border-color: rgba(242, 112, 135, 0);
	/* border-bottom-color: var(--genIndex-action-icon); */
	border-bottom-color: var(--genIndex-secondary-text);
	border-width: 6px;
	margin-left: -6px;
}

/* .cartouche.admin .iconContainer .iconLegend:before {
	border-bottom-color: var(--genIndex-admin-color);
} */

.cartouche .iconContainer:hover .iconLegend {
	display : inline-block ;
} 


/* ============================= Formulaires =============================== */
.buttonsBar2 {
	width : 80%;
	margin : auto ;
	text-align : center ;
	margin-top : 1em ;
	background-color : var(--genIndex-buttons-bar-bg) ;
	border-radius : 0.4em ;
	padding : 0.4em 0 0.4em 0 ;
	display:flex
}

/* .flexBar {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	z-index: 9998;
	position:relative;
}

.flexBar .button, .flexBar .actionIcon, .flexBar .helpIcon {
	height : 1em !important ;
	margin-left: 1em;
}

.flexBar .bigger {
	height : 1.6em !important ;
} */

/* ============================= Formulaires =============================== */

/* Un Structured H2 contient 2 zones obligatoires : infoReleves and cartouches */
h2.structuredH2 {
	display : flex ;
	justify-content: space-between; /* pour placer la zone 1 à gauche et la zone 2 à droite */
	align-items: center;
	width : 84% ;
	margin-left : 8% ;
	padding : 0 1em ;
	z-index : 10000 ;
	box-sizing: border-box;
	position : relative;
}

h2.structuredH2:not(.inTheFlow) {
	margin-bottom:0 ;
	position : fixed ;
	bottom: 0.5em ;
	/* align-items: flex-start; Supprimé le 13/06/2024 pour le structuredH2 des résultats de recherche avancée */
	/* background-color : var(--genIndex-input-bg) ; Supprimé le 13/06/2024 pour le structuredH2 des résultats de recherche avancée */
	background-color : var(--genIndex-buttons-bar-semiTransparent-bg) ; 
}

h2.withLineAbove {
	border-top: 2px solid var(--genIndex-color);
	padding-top: 0.2em;
}

.resultats .structuredH2 {
	font-size: 160%;
	padding: 0.3em;
	margin-left: auto;
	box-sizing: border-box;
	left: 50%;
	transform: translate(-50%,0);
	white-space: nowrap;
	min-width: 60%;
	max-width: 96%;
	width:auto;
	display: flex;
	align-items: center;
	column-gap: 3em;
	border: 1.5px solid var(--genIndex-title-border);
	border-radius: 0.3em;
	height: 3rem;
	z-index: 999999;
}

.resultats .structuredH2 .actionIcon, .resultats .structuredH2 .inactiveIcon {
	font-size: 80%;
}

/* Les composants de chaque zone sont des flex-items, il faut ajouter de l'espace entre eux */
h2.structuredH2 .infoReleves :NOT(:first-child) {
	margin-left : 0.4em ;
}
h2.structuredH2 .cartouches :NOT(:first-child) {
	margin-left : 0.2em ;
}

/* Tous les composants actionneurs ont un curseur en forme de pointer */
h2.structuredH2 .actioner {
	cursor : pointer;
}

h2.structuredH2 .actioner.repereNavigation {
	line-height: 120%;
	padding: 0 0.3em;
}

/* Les zones infoReleves et cartouches sont aussi des flexbox, les éléments sont alignés au centre verticalement  */
h2.structuredH2 .infoReleves, h2.structuredH2 .cartouches {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}
/* 
h2.structuredH2 .cartouches {
	margin-left: 3em;
} */

/* infoReleves a ses items centrés à gauche  */
h2.structuredH2 .infoReleves {
	justify-content: flex-start ;
}
/* Cartouches a ses items centrés horizontalement  */
h2.structuredH2 .cartouches {
	justify-content: center;
}

/* Items dans infoReleves */
h2.structuredH2 .infoReleves .actioner {
	height : 0.8em ; /* Dans la zone infoReleves, les items font 0.8em de haut */
}

/* Items dans cartouches : cartouches est composé de plusieurs cartouche, chaque cartouche est entouré d'une bordure et contient des actioners */
h2.structuredH2 .cartouches .cartouche {
	display : flex ;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center ;
	font-weight : 200 ;
	font-size : 60% ;
	border : 1px solid var(--genIndex-color) ;
	border-radius : 0.3em;
	padding: 0.2em 0.4em;
	height: 1.4em;
}


h2.structuredH2 .cartouche#sortReleves span {
	display: inline-block;
	background-color: var(--genIndex-panneau-header-bg);
	color: var(--genIndex-opposite-color);
	padding: 0.1em;
	border-radius: 0.3em;
	text-align: center;
	user-select: none ;
	cursor : pointer ;
	transition: all .2s ease-in-out;
}

h2.structuredH2 .cartouche#sortReleves span:hover {
	transform: scale(1.5);
}

h2.structuredH2 .cartouche#sortReleves span img {
    height: 1em;
    position: relative;
    top: -0.1em;
}

h2.structuredH2 .cartouche.masquage {
	align-items : flex-start ;
}


h2.structuredH2 .cartouche .actioner {
	font-weight: 700;
}

h2.structuredH2 .cartouche.masquage .actioner {
	display: inline-block;
	color: var(--genIndex-color);
	padding: 0.1em 0.4em 0 0.4em;
	border-radius: 0.3em;
	text-align: center;
	height: 1.2em;
}
h2.structuredH2 .cartouche.masquage .actioner.inactif {
	background-color: var(--genIndex-inactive-bg);
	color:var(--genIndex-inactive-fg) ;
}
h2.structuredH2 .cartouche.masquage .actioner:not(.inactif):hover {
	height: 2.8em;
	background-color: var(--genIndex-input-bg);
}

h2.structuredH2 .cartouche.masquage .actioner.masqueActif {
	background-color: var(--genIndex-important-bg);
	/* color : var(--genIndex-important-fg) ; remplacé le 06/02/2025 : illisible en mode clair */
	color : var(--genIndex-color);
}

h2.structuredH2 .cartouche.masquage .actioner .actions {
	display : none ;
}
h2.structuredH2 .cartouche.masquage .actioner:NOT(.inactif):hover .actions {
	display : block ;
}
h2.structuredH2 .cartouche.masquage .actioner .actions .navigate {
	color : var(--genIndex-navigation-button-fg) ;
}
h2.structuredH2 .cartouche.masquage .actioner:NOT(.masqueActif) .actions .showReleves {
	display : none ; /* Masque inactif == relevés affichés == bouton voir relevés masqué */
}
h2.structuredH2 .cartouche.masquage .actioner.masqueActif .actions .showReleves {
	display : initial ; /* Masque actif == relevés masqués == bouton voir relevés affiché */
}
h2.structuredH2 .cartouche.masquage .actioner:NOT(.masqueActif) .actions .hideReleves {
	display : initial ; /* Masque inactif == relevés affichés == bouton cacher relevés affiché */
}
h2.structuredH2 .cartouche.masquage .actioner.masqueActif .actions .hideReleves {
	display : none ; /* Masque actif == relevés masqués == bouton cacher relevés masqué */
}
h2.structuredH2 .cartouche.masquage .actioner .actions .hideReleves.inactif {
	background-color : var(--genIndex-inactive-gg) ; /* bouton masquer relevés inactif => colorisé en gris foncé */
	color : var(--genIndex-inactive-fg) ; /* bouton masquer relevés inactif => colorisé en gris foncé */
}

h2.structuredH2 .cartouche.zoom .actioner, h2.structuredH2 nav.cartouche .actioner {
	height : 1em;
}

h2.structuredH2 .cartouche.zoom .actioner .repereNavigation, h2.structuredH2 nav.cartouche .actioner .repereNavigation {
	position: relative;
	top: -2px;
}


h2.structuredH2 .actionGroup {
	display: flex;
	column-gap: 0.3em;
	align-items: center;
}


.resultats[mode="liste"] .hauteurPanneau {
  display: none;
}

#dateConsentement {
    position: fixed;
    color: var(--genIndex-opposite-color);
    padding: 0.3em;
    z-index: 10000;
    background-color: var(--genIndex-color);
    font-size: 80%;
	display : none ;
	bottom: 0.5rem;
	left: 0.5vw;
	text-align: center;
	width: 18.9vw;
}

.critere {
	margin-top : 0.2em !important ;
}

/* #tabBodyRegistresBSM .withDebutLigne {
	margin-left : 13em;
} */
/* #tabBodyRegistresBSM label.long {
	width : 15em !important;
} */
#tabBodyRegistresBSM h2.structuredH2 {
	position : static;
	justify-content: flex-start;
}
#tabBodyRegistresBSM h2.structuredH2 .cartouche {
	display : none ;
	align-items : center ;
	margin-left : 1em ;
}
/* Items dans infoReleves */
#tabBodyRegistresBSM h2.structuredH2 .actioner {
	height : 1em ;
}

.champ .actionIcon {
	font-size : 80% ;
	padding-top : -10% ;
}


.adminCommunes .datesRegistre:not(:first-child) {
	margin-left: 1em;
	border-left: 1px solid var(--genIndex-secondary-text);
	padding-left: 0.5em;
	white-space: nowrap;
}


.noAcess {
	color: var(--genIndex-errorMsg);
	border: 1px solid var(--genIndex-errorMsg);
}

.partialAccess {
	border: 1px solid var(--genIndex-color);
	color: var(--genIndex-color);
}

.nbPoints {
	font-family: Noto;
	font-size: 12px;
	background-color: var(--genIndex-color);
	color: var(--genIndex-secondary-text-bg);
	padding: 0 1em;
	position: absolute;
	right: 3em;
	display : none ;
}

.smallButton {
	width : auto !important;
	height : 1em !important;
	position : static !important;
	top : auto !important;
}

/* ============================ Couleurs ============================== */

.sectionIndicator {
	width : auto !important ;
	background-color : inherit !important ;
}

.limitTableHeight {
	max-height : 80vh ;
	overflow-y : auto ;
	max-width : 80% ;
}

/* .tabBodyTranscripteurs label.debutLigne {
	width : 11em ;
} */

.leaflet-popup-content .smallIcon {
	position: static;
}

.popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--genIndex-popup-bg);
	z-index: 10000;
	padding: 7em 2em 0 2em ;
	box-sizing: border-box;
	font-size: 120%;
	line-height: 140%;
	font-family : sans-serif ;
}

.popup.centeredOnPage {
	width : 40em ;
	top : 50% ;
	left : 50% ;
	transform : translate(-50%, -50%) ;
	padding: 0;
	height: auto;
	background-color: transparent;
	font-weight: 400;
	font-family: sans-serif;
}

.popup h2 {
	width : 100% ;
	text-align : center ;
	color : var(--genIndex-important-bg ) ;
}

.popup header {
	background-color : var(--genIndex-tableHead-bg) ;
	color : var(--genIndex-tableHead-fg) ;
	width : 100% ;
	box-sizing : border-box ;
	border-top-left-radius : 1em ;
	border-top-right-radius : 1em ;
	text-align : center ;
}

.popup .body {
	width : 100% ;
	box-sizing : border-box ;
	max-height : 50vh ;
	overflow : hidden auto ;
	background-color: var(--genIndex-popup-bg);
	border : 1px solid var(--genIndex-tableHead-bg) ;
	padding : 0.5em ;
}

.popup .body.maxHeight {
	max-height: 70vh;
}

.popup .body li {
	color : var(--genIndex-errorMsg) ;
}

.typesActesSelection {
	border-collapse: collapse ;
}
label.disabled {
	color: var(--genIndex-inactive-fg);
}

.resultatFiltre {
	background-color:var(--genIndex-navigation-button-fg) ;
	font-weight : 900 ;
}

.surligne {
	background-color: var(--genIndex-surlignage-defaut);
}

.surligne1 {
	background-color : var(--genIndex-surlignage-1) ;
}
.surligne2 {
	background-color : var(--genIndex-surlignage-2) ;
}
.surligne3 {
	background-color : var(--genIndex-surlignage-3) ;
}
.surligne4 {
	background-color : var(--genIndex-surlignage-4) ;
}
.surligne5 {
	background-color : var(--genIndex-surlignage-5) ;
}
.surligne6 {
	background-color : var(--genIndex-surlignage-6) ;
}

.surligne, .surligne1, .surligne2, .surligne3, .surligne4, .surligne5, .surligne6 {
	color : var(--genIndex-surlignage-fg) !important ;
}

.searchResult { /* Utilisé dans le surlignage à la demande ou le surlignage des termes cherchés */
	color: var(--genIndex-surlignage-fg);
}

.searchResult.colorTerm0 {
	background-color: var(--genIndex-surlignage-defaut);
}

.searchResult.colorTerm1 {
	background-color: var(--genIndex-surlignage-1);
}

.searchResult.colorTerm2 {
	background-color: var(--genIndex-surlignage-2);
}

.searchResult.colorTerm4 {
	background-color: var(--genIndex-surlignage-3);
}

.searchResult.colorTerm5 {
	background-color: var(--genIndex-surlignage-4);
}

.sloganProgonos {
	position: fixed;
	bottom: 1em;
	right: 1em;
	font-family: sans-serif;
	letter-spacing: 1px;
}

.progonosPart1 {
	color: #e89600 !important
}
.progonosPart2 {
	color: #06C1FF !important;
}

#sortReleves span.fa-stack {
	font-size: 10px !important;
	color: var(--genIndex-color) !important;
}

h2.structuredH2 .cartouche#sortReleves span.active {
	background-color: var(--genIndex-ok-bg);
}
h2.structuredH2 #sortReleves .fa-stack.active .fa-stack-2x {
	color: var(--genIndex-infoMsg) ;
}

#sortReleves .fa-stack:hover .fa-stack-1x {
	opacity: 60%;
}

span.fa-stack .fa-stack-1x {
	font-size: 12px !important;
	position: relative;
	left: -3px;
	top: 3px;
}

.symbolReleve * {
	margin : 0 ;
}

#displayActiveNotaires, #displayInactiveNotaires, div.filters #filterOnText {
	margin-right : 1em;
}
#displayActiveNotaires.hide .fa-toggle-on, #displayInactiveNotaires.hide .fa-toggle-on {
	display: none;
}

#displayActiveNotaires.display .fa-toggle-off, #displayInactiveNotaires.display .fa-toggle-off {
	display: none;
}

div.filters .fa-stack {
	height: 1em !important;
	line-height: 1em !important;
	width: 1em !important;
	font-size: 1em !important;
}

div.filters .fa-stack-2x {
	font-size: 1em !important;
}

div.filters span.fa-stack .fa-stack-1x {
	top: 0.3em !important;
	left: 0.4em !important;
	font-size: 0.6em !important;
}

div.filters .active .disabled {
	display : none ;
}

div.filters .filtre {
	float : none ;
}
div.filters .filtre.actif .disabled, div.filters .filtre.inactif .enabled {
	display : none ;
}

/* ================================== Rephonétisations ======================================= */

.tabBodyPhonetisation h1 {
	color : var(--genIndex-color) ;
	text-align: center;
}

.tabBodyPhonetisation .listeTables {
	display: inline-flex;
	width: 60vw;
	flex-wrap: wrap;
	justify-content: flex-start;
	row-gap: 8px;
	column-gap: 8px;
}
.tabBodyPhonetisation .listeTables img {
	height : 3em ;
}
.tabBodyPhonetisation label.onTop {
	height: 100%;
	display: inline-block;
	vertical-align: top;
}
.tabBodyPhonetisation meter {
	width: 12em;
	height: 6px;
}

.tabBodyPhonetisation .listeTables input[type="button"] {
	cursor : pointer ;
	font-weight : 900 ;
}

.tabBodyPhonetisation .phonetiqueAjour {
	color : var(--genIndex-okMsg) ;
}

.tabBodyPhonetisation .phonetiqueDepassee {
	color : var(--genIndex-errorMsg) ;
}

.tabBodyPhonetisation .fichiersExportes, .tabBodyPhonetisation .fichiersPhonetises {
	color : var(--genIndex-warningMsg) ;
}

.tabBodyPhonetisation input.active {
	color: var(--genIndex-okMsg) !important;
	background-color: var(--genIndex-ok-bg) !important;
	border: 1px solid var(--genIndex-okMsg);
	border-radius: 6px;
}

.listeLieux {
	border: 1px solid var(--genIndex-popup-border);
	margin-left: 8.7em;
	margin-top: 3px;
}
.listeLieux header {
	height: 1em;
	padding-top: 3px;
}
.listeLieux ul {
	width: calc(100% - 0.5em);
	max-height: 10vh;
	overflow-x: hidden;
	overflow-y: auto;
	box-sizing: border-box;
	padding-left: 0.8em;
	margin-left: 0.5em;
}
.listeLieux ul li {
	cursor: pointer;
}
input.selectionLieu.selectPB {
	background-color: var(-genIndex-alertMsg);
}
input.selectionLieu.selectOK {
	background-color: var(--genIndex-okMsg) !important;
}
.champ #transcription {
	width: 98%;
	border: 1px solid var(--genIndex-popup-border);
	padding: 2px;
	box-sizing: border-box;
	color : var(--genIndex-popup-text) ;
	border-radius: 2px;
	text-align: justify;
}

.customColors .lightmodeCell {
	background-color : #e1e1e1 ; /* On ne peut pas utiliser --genIndex-body-bg sinon ça varie avec le mode */
}

.customColors .darkmodeCell {
	background-color : #373737 ; /* On ne peut pas utiliser --genIndex-body-bg sinon ça varie avec le mode */
}

.customColors .thumbnailBgColor, .customColors .thumbnailFgColor {
	display: inline-block;
	padding: 2px 5px;
	border-radius : 4px ;
	user-select : none ;
	cursor : pointer ;
}

.customColors .thumbnailBgColor {
	color : var(--genIndex-body-fg) ;
	border : 1px solid var(--genIndex-body-fg)
}

.customColors .thumbnailFgColor {
	background-color : var(--genIndex-body-bg) ;
	border : 1px solid var(--genIndex-body-fg)
}

.customColors .thumbnailBgColor.customized, .customColors .thumbnailFgColor.customized { /* Couleurs personnalisées AVANT l'édition en cours */
	border: 2px solid var(--genIndex-okMsg);
}

.customColors .thumbnailBgColor.changed, .customColors .thumbnailFgColor.changed { /* Couleurs personnalisées PENDANT l'édition en cours */
	border: 2px solid var(--genIndex-errorMsg);
}

.clr-field {
	position:absolute !important ;
	top : 0 ;
	left : 0 ;
}

.floute {
  filter: blur(3px);
}

span.calendar {
	font-size: 0.85em;
	border : 1px solid var(--genIndex-inactive-fg);
	background: var(--genIndex-inactive-bg);
	border-radius: 3px;
	user-select: none;
	color: var(--genIndex-inactive-fg);
	font-variant : small-caps ;
	width: 1em;
	height: 1em;
	float: right;
	margin-right: 1em;
}

.listDepots {
	width: 90vw;
	margin-left: 5vw;
	box-sizing: border-box;
	margin-top: 2em;
}

.depot:not(:first-child) {
	margin-top: 1.5em;
}

.depot.nonVerifie {
	color : var(--genIndex-alertMsg) ;
}

.depot .listeFichiers {
	padding-left: 2em;
}

.depot file.nonVerifie {
	color : var(--genIndex-alertMsg) ;
}
.depot file.verifie {
	color : var(--genIndex-okMsg) ;
}

.depot file img {
	max-width : 80vw ;
}

.contributions {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	width: 60vw;
	margin-left: 20vw;
	height: 60vh;
	margin-top: 10vh;
	align-content: space-evenly;
}

.contributions a {
	background-color: var(--genIndex-activeOnglet_bg);
	color: white;
	padding: 2em;
	text-align: center;
	font-family: sans-serif;
	font-variant: small-caps;
	text-decoration: none;
	font-size: 20px;
	display: flex;
	align-items: center;
	max-width: 30%;
}

.extension.active .inactiveBtn {
	display : none ;
}
.extension.inactive .activeBtn {
	display : none ;
}

#logExtensions {
  font-family: sans-serif;
}

#logExtensions .simulation {
	text-align: center;
	font-size: 120%;
	padding: 1em 0;
	font-variant: small-caps;
	font-weight: 900;
	box-sizing: border-box ;
}

#logExtensions .simulation .doNotChangeFontVariant {
	font-variant : normal ;
}

/* .verifSuccess {
	color : var(--genIndex-okMsg) ;
} */
.verifFail {
	color : var(--genIndex-errorMsg) ;
}
.verifWarning {
	color : var(--genIndex-alertMsg) ;
}

.espaceAuDessus {
	margin-top : 2em ;
}

.twoColumns {
	columns : 2 ;
}

.threeColumns {
	columns : 3 ;
}

.traces {
	border : 1px solid red ;
	color : red ;
	position : fixed ;
	top : 0 ; 
	left : 0 ; 
	display : inline-block ;
}

.dictionable {
	user-select: text !important;
}

.bottomMessage {
	position: fixed;
	bottom: 2em;
	border: 1px solid var(--genIndex-color);
	width: 99vw;
	padding: 0.3em 0.5em;
	box-sizing: border-box;
}
.tabsBodies.ongletAdmin .bottomMessage {
	border: 1px solid var(--genIndex-admin-color);
}


.clickable {
	cursor:pointer ;
}

.persistantMessage {
	position: fixed;
	top: 70vh;
	font-family: sans-serif;
	color: var(--genIndex-errorMsg);
	background-color : var(--genIndex-popup-text) ;
	border: 2px solid var(--genIndex-errorMsg);
	padding: 0.5em;
	border-radius: 0.4em;
	max-width: 10em;
	text-align: center;
	left: 1.5em;
}

.byname {
	position: absolute;
	bottom: -4px;
	left: calc(100vw - 10em);
	font-size: 80%;
	font-family: sans-serif;
	width: 9em;
}

.arrowedTip {
	position: absolute;
	z-index: 9999999;
	top: 100px;
	left: 100px;
	background-color: var(--genIndex-tips-bg);
	max-width: 15em;
	padding: 0.5em;
	border: 2px solid var(--genIndex-tips-bd);
	min-height : 40px ;
	display : flex ;
	align-items : center ;
	border-radius: 0.7em;
	color : var(--genIndex-tips-fg) ;
}

#dumbSpanForPositionOfTip {
	display:inline-block ;
	width : 0;
	height:1em ;
}

.arrowedTip.arrowLeft:after, .arrowedTip.arrowLeft:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrowedTip.arrowLeft:after {
	border-color: rgba(140, 231, 140, 0);
	border-right-color: var(--genIndex-tips-bg) ;
	border-width: 15px;
	margin-top: -15px;
}
.arrowedTip.arrowLeft:before {
	border-color: rgba(0, 127, 0, 0);
	border-right-color: var(--genIndex-tips-bd);
	border-width: 18px;
	margin-top: -18px;
}

.arrowedTip.arrowBottom:after, .arrowedTip.arrowBottom:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrowedTip.arrowBottom:after {
	border-color: rgba(140, 231, 140, 0);
	border-top-color: var(--genIndex-tips-bg);
	border-width: 15px;
	margin-left: -15px;
}
.arrowedTip.arrowBottom:before {
	border-color: rgba(0, 127, 0, 0);
	border-top-color: var(--genIndex-tips-bd);
	border-width: 18px;
	margin-left: -18px;
}

.arrowedTip.arrowRight:after, .arrowedTip.arrowRight:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrowedTip.arrowRight:after {
	border-color: rgba(140, 231, 140, 0);
	border-left-color: var(--genIndex-tips-bg);
	border-width: 15px;
	margin-top: -15px;
}
.arrowedTip.arrowRight:before {
	border-color: rgba(0, 127, 0, 0);
	border-left-color: var(--genIndex-tips-bd);
	border-width: 18px;
	margin-top: -18px;
}

.arrowedTip.arrowTop:after, .arrowedTip.arrowTop:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrowedTip.arrowTop:after {
	border-color: rgba(140, 231, 140, 0);
	border-bottom-color: var(--genIndex-tips-bg);
	border-width: 15px;
	margin-left: -15px;
}
.arrowedTip.arrowTop:before {
	border-color: rgba(0, 127, 0, 0);
	border-bottom-color: var(--genIndex-tips-bd);
	border-width: 18px;
	margin-left: -18px;
}

.resultats[mode="panneaux"] .btnPanneaux, .resultats[mode="liste"] .btnListe {
	border: 2px solid var(--genIndex-title-border);
	border-radius: 0.4em;
}