@import url(ui/css/menu.css);
@import url(alphabetic_list.css);
@font-face {
  font-family: 'Ubuntu';
  src: url('../fonts/Ubuntu-R.ttf');
}
/* pages statiques */
.addresse {
	margin-left: 30px;
}
:root {
	/* couleurs nouveau bandeau : 
	#90a8cd
	#719dc6 (slightly lighter)
	#c6d1e3 (lighter)
	#4b7eb6 (lightly darker)
	#1f69aa (darker)
	#04349c (darker, good for font on white background)
	#00294B really darker => links in menu
	#668cbd		(presque identique base)
	*/
	--page-background-color:#cde6ff ;
	--sideMenuBackgroundColor: #c6d1e3;
	--sideMenuLink: #00294B;
	--sideMenuLinkHover:#C9DDED;
	--complementary:#FFFCF8;
	--titleFont :#04349c;
	--lightRed :  #FFCCCB;
  } 
.a_modifier {
	color: red;
	font-weight:bold;
}

html, body {
	height: 100%;
	margin: 0;
	/* background:#c6d1e3; */
	background:var(--page-background-color);
	scrollbar-face-color: #8EB3D2;
	scrollbar-darkshadow-color: #000000;
	scrollbar-shadow-color: #000000;
	scrollbar-highlight-color: #E5E4D4;
	scrollbar-3dlight-color: #92a3c0;
	scrollbar-track-color: #CDE6FF;
	scrollbar-arrow-color: #29353B;
	overflow: hidden;
	font-family: 'Ubuntu';
	}

	header {
		display:flex; 
		flex-direction : row;
	}


section.content {
	/* background-color: wheat; */
	padding: 0 1em;
	margin:2em 0;
	display: none;
}

section.content:has(.container :not([data-content='false'])) {
	display:block;
}

section#etat_civil{
	border:1px solid gray;
	border-radius:20px;
	padding:20px;
}
section#etat_civil h2{
	padding-top:0;
	margin-top:0;
}


div[data-content='false'] {
	display:none;
}
.container.collapsible {
	display:none;
}

.container.collapsible.active {
	display:flex; 
	flex-direction: column;
	flex-wrap: wrap;
	gap:.3em 0 ;
}
#container_figure-container {
	/* flex-direction: row; */
	/* justify-content: center; */
	flex-direction: column;
	gap:1em;
	flex-wrap: wrap;
	justify-content: left;
}
figure.archive {
	text-align:center;
	width:200px;
	margin: 0 0 0 0;
}
figure.archive img {
	border:1px solid black;
	font-style:italic;
	width:200px;
	min-height:100px;	
	display:block;
	text-align: center;
	color:gray;
	margin:auto;
	align-content: center;
}


	/* Menu */



.img1 {
	
	top:0px;
	left:0px;
	border:0;
	width:152px;
	height:110px;
	}
	
.img2 {
	position:absolute ;
	top:0px;
	left:152px;
	border:0;
	width:374px;
	height:89px;
	}

.img3 {
	position:absolute;
	top:0px;
	left:526px;
	border:0;
	width:244px;
	height:138px;
	}

.img4 {
	position:absolute;
	top:110px;
	left:0px;
	border:0;
	width:152px;
	height:21px;
	}	
/* 
.img1 {
	position:absolute;
	top:0px;
	left:0px;
	border:0;
	width:152px;
	height:110px;
	}
	
.img2 {
	position:absolute ;
	top:0px;
	left:152px;
	border:0;
	width:374px;
	height:89px;
	}

.img3 {
	position:absolute;
	top:0px;
	left:526px;
	border:0;
	width:244px;
	height:138px;
	}

.img4 {
	position:absolute;
	top:110px;
	left:0px;
	border:0;
	width:152px;
	height:21px;
	}	 */
	 
		
#global {
	min-height: 100%;
	height:100%;
	/* width: 70%; */
	width: 100%;
	/* width: 770px; */
	padding: 0 ;
	margin: 0 auto;
	position: relative;
	background: none ; /* none */
	color: #3F4B50;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 35fr 210fr 10fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	}
#header  { grid-area: 1 / 1 / 2 / 2; }

#center { 
	grid-area: 2 / 1 / 3 / 2;
	overflow: hidden;
  	height: inherit;
}
#footer { grid-area: 3 / 1 / 4 / 2; } 

#header {
	width:100%;
	background-color: #cde6ff  ; /* white */
	color: #00294B;
}	

#center {
	background-color: var(--complementary) ;
	display: grid;
	grid-template-columns: repeat(14, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 10px;
	grid-row-gap: 0px;
}


#footer {
	background: var(--sideMenuBackgroundColor);
	/* background: LightSteelBlue; */
	/* color:black; */
	color:var(--titleFont);
	padding:  5px 0 0 0 ;
	font-size: 0.8em;
	text-align:center;
	width: 100%;
	}

div#interactive{
	padding:10px 10px 0 0 ;
	grid-area: 1 / 14 / 1 / 14;
	display:flex;
	flex-direction:row;
	gap:5px;
	height:fit-content;
	justify-content: flex-end;
}
div#interactive button {
	cursor:pointer;
	padding:0;
	border:none;
	background-color: inherit;
}

.interactiveUI_image {
	width:25px;
} 

#sidebar{
	grid-area: 1 / 1 / 2 / 4;
}

#content {
	grid-area: 1 / 5 / 2 / 11;
	
	display:flex;
	flex-direction:column;

	float: right; 
	margin: 0px;
	
	
	/* texte */ 
	/* font-family: Verdana, Arial, Helvetica, sans-serif; */
	/* font-size: 12px; */
	color: #000000;
	/* text-indent: 16pt; */
	overflow: hidden;
  	height: inherit;
}

#data-container {
	overflow: auto;
	height: inherit;
	/* height: 50%; */
}


 #footer p {

	margin:0; 
	padding: 0;
 }  


h1 {
	font-size: 1.875em;
	text-align:center;
	/* font-size: 2.5em; */
	/* font-size: 14px; */
	/* line-height: 18px; */
	/* color: #00294B; */
	/* color:var(--titleFont); */
	color:var(--sideMenuLink);
	/* text-align:left; */
	/* letter-spacing: -1px; */
	font-weight: bold;
	/* left:-15px; */
	/* text-indent:0;	 */
	}
h2 {
	
	color: #00294B;
}

#content .titre3 {
	font-size: 14px;
	line-height: 18px;
	color: #668BB5;
	text-align:left;
	letter-spacing: -1px;
	font-weight: bold;
	text-indent:0;	
	}
	
#content p.corp {
	/* font-size: 12px;  */
	/* line-height: 18px; */
	text-align:left;
	/* text-indent:0;	 */
	}

#content .titre4 {
	font-size: 14px;
	line-height: 18px;
	color: #668BB5;
	text-align: left;
}

#content .texte {
	line-height: 15px;
	/* text-indent: 10px; */
}

#content .exposant {
	font-size:x-small;
	vertical-align: text-top;
}

#content .nonind {
	text-indent: 0pt;
}



a.menu {
	color: #CE3131;
	font-size: 11px;
	letter-spacing: -1px;	
}
a.menu:link {color: #CE3131; text-decoration: none}
a.menu:visited {color: #F29142; text-decoration: none}
a.menu:hover {color: #FABB6A; text-decoration: none}

a.menu2 {
	color: #CE3131;
	font-size: 20px;
	letter-spacing: -1px;	
}
a.menu2:link {color: #CE3131; text-decoration: none}
a.menu2:visited {color: #F29142; text-decoration: none}
a.menu2:hover {color: #FABB6A; text-decoration: none}



a.liens {
	/* font-family: Verdana, Arial, Helvetica, sans-serif;  */
	color: #CE3131;
	font-size: 12px;
	font-weight: normal;
}
a:link {color: #16166B; text-decoration: none}
a:visited {color: #404095; text-decoration: none}
a:focus {background-color: #C9DDED; text-decoration: none}
a:hover {cursor:pointer}
a:active {color:#404095;  text-decoration: none}
li:focus {background-color: #C9DDED; text-decoration: none}

.auteur {
	/* font-family: Verdana, Arial, Helvetica, sans-serif; */
	font-size: 10px;
	font-style: normal;
	line-height: 14px;
	color: #000000;
	letter-spacing: normal;
	text-align: right;
	}
#content p.palignr{
text-align:right;


}

#content p.palignr2{
text-align:center;


}

#content select.short {
 	width: 200px;
	}

#content input.formulaire {
	width: 180px;
	/*size:40px;
	maxlength:120px;*/
	}

#content table tr.haute {
	height:80px;

	}

#content table.largeur{
	text-indent:0pt;

	}
	
	
#content table td.col1{
	width:25px;
	font-weight:bold;			
	}
	
	
#content table td.col2 {
	width:220px;
	margin-left:10px;
	margin-right:10px;
	}
	
#content table td.col3 {
	width:220px; /* 220px*/
	align:left;
	text-align: left;
	}
	
#content a.loupe {
	bordercolor:0; 
	text-decoration:none;
	}
	
#content a.loupe img {
	width:20; 
	height:20; 
	border:none;
	}

#content .nomdumarin {
	font-size: 14px;
	line-height: 18px;
	color: #00294B;
	text-align:left;
	font-weight: bold;
	}
	
#content table tr.haute {
	height:80px;
	}

#content tr.petite{
	text-align:center;
	font-weight:bold;	
	}
	
#content img.ref {
	width:100px;
	height:80px;
	border:none;
	margin:5px;
	margin-bottom:0px;
	margin-top:20px;
	}
	
#content h2.nom-marin {
	position:absolute;
	left:160px;
	top:160px;
	width:400px;
	color: #CE3131;
	font-weight: bold;
	background-color:none;
	text-align:center;
	font-size:16px;
	display:block;
	letter-spacing:-1px;	
	}
.w35 {
	width:35px;
	}
.w250 {
	width:250px;
	}

  abbr {
	cursor: help;
  }

  button.button-as-title {
	cursor:pointer;
	background-color:inherit;
	background:inherit;
	border:none;
	font-style:inherit;
	font-weight:inherit;
	width:100%;
	text-align:inherit;
  	color: inherit;
  	font-size: inherit;
	margin:0;
	padding:0;
	/* display:block; */
	position:relative;
  }

button.button-as-title:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: inherit;
  color: white;
  float:right;
  /* position:absolute;
  right:0;
  display:inline-block; */
}

button.button-as-title.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

.image_bandeau {
		width:100%;
}
#img_bandeau_media_ecran_large {
	/* montre l’image de base */
	display:none;
}
#img_bandeau_media_par_defaut {
	display:block;
}
#img_bandeau_media_mobile {
	display:none;
}

@media only screen and (max-width: 600px) {
	/* CSS mobile */
	#global {
		width:100%;
	}
	#center {
		/* display:block; */
		display:grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 25fr; 
		/* grid-template-rows: repeat(22, 1fr); */
	}
	#content {
		grid-area: 2 / 1 / 2 / 1;
		width:unset;
		float: unset;
		padding: 0;
		padding: 0 10px 0 10px;
		height: 100%;
	}
	#data-container {
		height:85%;
	}
	div#interactive {
		position: absolute;
		right: 0;
		z-index: 9999999;
		padding:0;
		margin-right:10px;
	}
	.interactiveUI_image {
  		width: 20px;
	}
	#img_bandeau_media_ecran_large {
		/* montre l’image de base */
		display:none;
	}
	#img_bandeau_media_par_defaut {
		display:none;
	}
	#img_bandeau_media_mobile {
		display:block;
	}
}

@media only screen and (min-width: 1500px) {
	/* CSS écran large */
	#img_bandeau_media_ecran_large {
		/* montre l’image de base */
		display:block;
	}
	#img_bandeau_media_par_defaut {
		display:none;
	}
	#img_bandeau_media_mobile {
		display:none;
	}
	#global {
		width:70%
	}
}
.logo_container {
	display:flex; flex-direction:row;
	gap:10px;
	align-items: center;
	justify-content: space-evenly;
}
.logo  {
max-width:100px;
}