/* ANIM PAGE INDEX */

article {
 animation: depth-rotate-animation 3.5s ease-in-out  alternate;
}

@keyframes depth-rotate-animation {
  from {
	  /*opacity:0;*/
    transform: scale(0.2);/*scale3d(1, 1, 1);*/
  }
  to {
	  /*opacity:1;*/
    transform: scale(1);/*scale3d(0.85, 0.5, 1.5) rotate3d(1, 0, 0, 45deg);*/
  }
}
/* FIN ANIM PAGE INDEX */

/* DIALOG */
/*ci-dessous permet de changer le grisé du showModal en un fond différent*/
dialog::backdrop {
  background: repeating-linear-gradient(
    60deg,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 1px,
    rgba(0, 0, 0, 0.3) 1px,
    rgba(0, 0, 0, 0.3) 20px
  );
  backdrop-filter: blur(2px);
}

dialog{
	width:90%;
	height:90%;
	border-radius:1rem;
	border: .6rem solid lightgray;
	padding:0;
	margin:auto;
/* apparition lente en liaison avec dialog[open] */	
	display: block;
    opacity:0;
	scale: 0;
	transition: all 2s;
	background:var(--color-item);
}

dialog[open]{
  opacity: 1;
  scale: 1;
}

.article{color:blue;font-size:1.1em;padding:0.5em;	text-align:justify; font-weight:bold;}
.datef{color:blue;font-size:.9em;float:right;line-height: 3em;}

.titre-flash{
	font-size:2rem;
	color: var(--color-title);
	margin-left:0.5em;
}

.btn_close_dial{
	color:var(--color-title);
	background:var(--color-item);
	position:absolute;
	/*margin-top:.3%;*/
	/*padding:0;*/
	right:1.875rem;
	font-size:1.2rem;
	font-weight:bold;
	cursor:pointer;
	border-radius: 1em;/*25px;*/
	/*border:1px solid #0040ff;*/
	box-shadow: 1px 1px 0 2px var(--color-border);
}

.titre-dial {
    display: flex;
    height: 3.125rem;/*50px;*/
    align-items: center;
	top:0;
	color:var(--color-title);
	background: var(--color-item);
	border-bottom:0.313rem solid gray; /*5px*/
}

/* FIN DIALOG */