dialog {
	border-radius : 1em;
	padding : 0;

	font-size: small;
	overflow: hidden;
	display: none; /* vieux navigateur on gere a la main*/
}

dialog[data-show=true] {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	box-shadow: 5px 5px 5px black;
}

/*
dans dialog on a un div qui contient tout pour ne pas interferer avec les 
mechaniques specifiques a dialogue.
Ce div contient header / zone centrale / toolbox
*/
dialog > div {
	max-width: 75vw;
	max-height: 50vh;

	display : inline-flex;
	flex-direction : column;
	align-items:center;

	align-items:stretch;
	margin : 0;
	/* marge negative rattrape un petit bug graphique sous firefox */
	margin : -1px;
	padding : 0;

	text-align : center;
}

dialog > div > div {
	padding : 1em;
	overflow: auto;
flex-grow:1;
flex-shring: 1;
}

/* premier VBOX du contenu */
#dialog-vcard > div > div {
	display : flex;
	flex-direction : row;
	align-items : stretch;
	padding : 1em;
	gap : 0.5em;
}

/* la VBOX contient des tuiles en HBOX */
#dialog-vcard > div > div > * {
	display : flex;
	flex-direction : column;
	align-items : center;

	border : 1px solid #FF8000;
	border-radius : 1em;
	padding : 0.5em;

	gap  : 0.5em;
}

dialog a {
	text-decoration : none;
}


dialog .toolbox {
	display : flex;
	flex-direction : row;
	justify-content: center;
	padding : 0.2em;

	overflow: clip;
	flex-grow: 0;
	flex-shrink: 0;
}

dialog .toolbox button {
	color : white;
	border: 2px outset black;
	cursor : pointer;
	padding : 0.5em;
	padding-left : 1em;
	padding-right : 1em;
	border-radius : 1em;
}

dialog h1 {
	font-size : large;
	text-align : center;
	margin : 0;
}

dialog h2 {
	font-size: large;
}