body {
	--progonos-basic-blue : #0090C0 ;
	--progonos-dark-blue : #005774 ;
	--progonos-light-blue : #06C1FF ;
	--progonos-hover-blue : #0090C040 ;
	
	--progonos-basic-orange : orange ;
	
	--progonos-border-gray : #BEBEBE ;
	--progonos-light-bgGray : #EFEFEF ;
	--progonos-light-fgGray : #D1D1D1 ;
	--progonos-middle-fgGray : #959595 ;

	--shadow : 12px 12px 12px 0px rgba(0,0,0,0.79); 

	padding-top : 4em ;
	overflow-x:hidden;
	hyphens: manual;
}

body > header {
	background-color: var(--progonos-dark-blue) ;
	padding: 1em;
	color: white;
	margin-bottom: 1em;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	font-size: 14pt;
	font-family : sans-serif ;
	z-index:100 ;
}

body > header > .mainToolbar {
	float : right ;
	margin-right : 4em ;
	display : inline-flex ;
	align-items: center ;
	column-gap : 5px ;
}

body > header > .mainToolbar a {
	line-height: 12px;
}

.globalWrap {
	position: fixed;
	top: 0;
	left: 0;
	background-color: #EFEFEF85;
	width: 100vw;
	height: 100vh;
	z-index: 10000;
}

h2 {
	color : var(--progonos-global-fg) ;
	text-align : center ;
}

.menu {
	background-color : #b5987e ;
	border : 2px solid #b35605 ;
	/* position : fixed ;
	z-index : 10000 ;
	transform: translate(-100%,0); */
	/* color : #303030 ; */
	color : #ffe7d3 ;
	padding: 1em;

	display: flex;
	column-gap: 1em;
	align-items: stretch;
	align-content: flex-start;
	flex-wrap: wrap;
	justify-content: space-evenly;
	row-gap: 1em;

	width: 60vw;
	margin-left: auto;
	margin-right: auto;
	/* text-shadow: #FFF 0px 0px 8px; */
}

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

.menu div {
	border : 1px solid #b35605 ;
	padding : 0.5em ;
	border-radius : 12px ;
	width : 15em ;
	background-repeat: no-repeat;
    background-size: cover;
	cursor : pointer ;
	height: 90%;
}

.menu div.a_venir {
	filter : grayscale(80%);
}

.mention {
	background-color: #181879;
	color: white;
	padding: 0.1em 0.4em;
	border-radius: 0.4em;
	font-family: arial;
	font-weight: 400;
	white-space : nowrap;
	text-shadow: none ;
}

.menu p {
	font-weight: 700;
	font-family: sans-serif;
	text-align: justify;
	line-height: 140%;
}

.menu h3 {
	/* color : #b32605 ; */
	/* color : #ee866e ; */
	color : #ffa838;
	margin : 0 ;
	font-family : sans-serif ;
	text-align : center ;
	font-size: 16pt;
}

.menu h3 img {
	height: 1em;
	margin-right: 6px;
	position: relative;
	top: 3px;
}
.menu #lieuxDits {
	background-image:url(../img/lieuxdits.png) ;
}

.menu #decesInsee {
	background-image:url(../img/decesInsee.jpg) ;
}

.menu #defense {
	background-image:url(../img/defense.jpg) ;
}

.menu #registresPerdus {
	background-image:url(../img/registresPerdus.png) ;
}

.menu #anticPhotos {
	background-image:url(../img/anticPhotos.png) ;
}

.menu #dateRevolutionnaire {
	background-image:url(../img/datesRep.png) ;
}

.menu #releves {
	background-image:url(../img/releves.jpg) ;
}

.menu #prenoms {
	background-image:url(../img/prenoms.png) ;
	/* filter: saturate(30%); */
}
.menu #notaires {
	background-image:url(../img/notaires.jpg) ;
}

.menu #abreviations {
	background-image:url(../img/abreviations_v3.png) ;
}

.menu #apis {
	background-image: url(../img/tools.png);
}

.menu #siteWeb {
	background-image:url(../img/siteWeb.png) ;
}

.menu p {
	color: #ffd5b0;
	text-align : center ;
}

@media (prefers-color-scheme: dark) {
	body:not([mode="clair"]) {
		--shadow : 12px 12px 12px 0px rgba(20,20,20,0.90); 
	}
	body:not([mode="clair"]) a {
		color : var(--progonos-dark-blue) ;
	}
	body:not([mode="clair"]) {
		background-color : #303030 ;
		color : #D1D1D1 ;
	}
	body:not([mode="clair"]) > header {
		color : #D1D1D1 ;
	}
	body:not([mode="clair"]) > h2 {
		color : var(--progonos-light-blue) ;
	}
	body:not([mode="clair"]), body:not([mode="clair"]) label, body:not([mode="clair"]) td, body:not([mode="clair"]) th, body:not([mode="clair"]) caption {
		color : #EFEFEF ;
	}
	body:not([mode="clair"]) .note {
		background-color : #003243 ;
		color : #D1D1D1 ;
	}
	body:not([mode="clair"]) tr:nth-child(2n) {
		background-color: #404040;
	}
	body:not([mode="clair"])  input:not([type="button"]):not([type="submit"]), body  select {
		background-color: #D1D1D1;
		border: none;
	}
	body:not([mode="clair"]) input[type="button"], body  input[type="submit"] {
		background-color: #D1D1D1;
		border : none ;
		cursor : pointer ;
	}
	body:not([mode="clair"]) label, body:not([mode="clair"]) td, body:not([mode="clair"]) th, body:not([mode="clair"]) caption, body:not([mode="clair"]) .noalign {
		color : #D1D1D1 ;
	}
	body:not([mode="clair"]) .popup {
		background-color: #414141;
		border: 2px solid #9b9b9b;
	}
	body:not([mode="clair"]) .popup .content {
		border-color : #1e1e1e ;
	}
	body:not([mode="clair"]) .popup header {
		background-color: #323232 ;
	}
	body:not([mode="clair"]) .popup select {
		background-color: #d1d1d1;
	}

}

body[mode="sombre"] {
	--shadow : 12px 12px 12px 0px rgba(20,20,20,0.90); 
}
body[mode="sombre"] a {
	color : var(--progonos-dark-blue) ;
}
body[mode="sombre"] {
	background-color : #303030 ;
	color : #D1D1D1 ;
}
body[mode="sombre"] > header {
	color : #D1D1D1 ;
}
body[mode="sombre"] > h2 {
	color : var(--progonos-light-blue) ;
}
body[mode="sombre"], body[mode="sombre"] label, body[mode="sombre"] td, body[mode="sombre"] th, body[mode="sombre"] caption {
	color : #EFEFEF ;
}
body[mode="sombre"] .note {
	background-color : #003243 ;
	color : #D1D1D1 ;
}
body[mode="sombre"] tr:nth-child(2n) {
	background-color: #404040;
}
body[mode="sombre"]  input:not([type="button"]):not([type="submit"]), body[mode="sombre"]  select {
	background-color: #D1D1D1;
	border: none;
}
body[mode="sombre"] input[type="button"], body[mode="sombre"]  input[type="submit"] {
	background-color: #D1D1D1;
	border : none ;
	cursor : pointer ;
}
body[mode="sombre"] label, body[mode="sombre"] td, body[mode="sombre"] th, body[mode="sombre"] caption, body[mode="sombre"] .noalign {
	color : #D1D1D1 ;
}
body[mode="sombre"] .popup {
	background-color: #414141;
	border: 2px solid #9b9b9b;
}
body[mode="sombre"] .popup .content {
	border-color : #1e1e1e ;
}
body[mode="sombre"] .popup header {
	background-color: #323232 ;
}
body[mode="sombre"] .popup select {
	background-color: #d1d1d1;
}


.twoColumns {
	display: flex;
	max-width: 98vw;
	justify-content: space-evenly;
	column-gap: 1em;
}

.menu {
	max-width: 45vw;
}