/* module "qui somme nous" */
.whoweare-containera {
	width: 100%;
	text-align: center;
	position: relative;
	align-content: center;
}

.whoweare-container {
	width: 100%;
	text-align: center;
	position: relative;
	/* height: 40vh; */
	height: 30vw;
	align-content: center;
}

.hidden-date-describe {
	display:none;
	width: 0px;
	animation-delay:0.6s
	aspect-ratio:2/1;
	align-content: center;
	transition: transform 0.6s, display 0.6s, width 0.6s;
	height: 100% !important;
	align-self: self-end;
	overflow-wrap: anywhere; /* ajout */
	font-size:1.8vw; /* ajout */
}

.hidden-date-describe > p {
	height: 100%;
	font-size:1.8vw; /* ajout */
}

.date-val {
	display:block;
	width: 100%;
	font-size: 3vw;
	animation-delay:0.6s;
	transition: transform 0.6s, display 0.6s, width 0.6s;
	align-content: center;
	height: 100%;
	aspect-ratio:2/1;
}

.date-val > p {
	justify-content:center;
}

.round-date {
	/*font-size:calc(20px + 0.5vw);*/
	font-size:2vw;
	background-color: rgba(120, 120, 120,0.2);
	backdrop-filter:  sepia(5%) blur(5px);
	color:#0000ff;
	border: 5px solid #0000ff;
	text-align:center;
	border-radius:50%;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	display: inline-block;
	position: relative;
	width:80%;
	vertical-align: middle;
	aspect-ratio: 1/1;
	overflow: hidden;
	transition: transform 0.6s, background-color 0.6s, color 0.6s, box-shadow 0.6s, width 0.6s, border-radius 0.6s, vertical-align 0s, aspect-ratio 0.6s;
	&:hover {
		background-color:#0000ff;
		color:#ffffff;
		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4);
		width:80%;
		border-radius:15px;
		aspect-ratio:unset;
		max-height:100%;
		min-height:80%;
	}
	&:hover .hidden-date-describe  {
		overflow-wrap: anywhere; /* ajout */
		transition: transform 0.6s, display 0.6s, width 0.6s, aspect-ratio 0.6s, height 0.6s;
		animation-delay:0.6s;
		align-self: self-end;
		display: block;
		width:100%;
		height:100%;
		align-content: end;
		font-size:1.8vw; /* ajout */
	}
	&:hover .date-val {
		transition: transform 0.6s, display 0.6s, width 0.6s, aspect-ratio 0.6s, height 0.6s;
		animation-delay:0.6s;
		text-align:center;
		width:100%;
		height:30%;
	}
}

.round-date-pair {
	background-color:#ffffff;
	color:#0000ff;
	text-align:center;
	border-radius:50%;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	margin-left:5%;
	margin-right:5%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height:150px;
	width:150px;
	transform:translateX(-50%);
	transition: transform 0.6s, background-color 0.6s, color 0.6s, box-shadow 0.6s, width 0.6s, border-radius 0.6s;
	&:hover {
		transition: transform 0.6s, display 0.6s, width 0.6s, height 0.6s;
		animation-delay:0.6s;
		background-color:#0000ff;
		color:#ffffff;
		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4);
		width:50%;
		height:!important 100%;
		border-radius:15px;
	}
	&:hover > div > .hidden-date-describe  {
		transition: transform 0.6s, display 0.6s, width 0.6s;
		overflow-wrap: anywhere; /* ajout */
		animation-delay:0.6s;
		display: block;
		width:70%;
		font-size:1.8vw; /* ajout */
	}
	&:hover > div > .date-val {
		transition: transform 0.6s, display 0.6s, width 0.6s;
		animation-delay:0.6s;
		text-align:center;
		width:30%;
	}
}