/*////////////////////////
Main
////////////////////////*/

main
{
	justify-content: center;
	align-items: flex-start;
}

/*////////////////////////
Titre
////////////////////////*/

.contactTitre { margin-bottom: 2.5rem; }
@media (min-width: 600px) and (max-width: 1365px)
{
	.contactTitre { margin-bottom: 3rem; }
}
@media (min-width: 1366px)
{
	.contactTitre { margin-bottom: 4rem; }
}
.lettre
{
	opacity: 0;
	transform-origin: bottom center; 
	transform: scale(0);
	animation: texteApparait .5s forwards;
}
@keyframes texteApparait 
{
	to
	{
		transform: scale(1);
		opacity: 1;
	}
}

.contactTitre p
{
	color:var(--couleur-secondaire);
	
	opacity: 0;
	animation: elementApparition .5s ease-out forwards;
	animation-delay: .5s;
}
@keyframes elementApparition
{
	to { opacity: 1; }
}

/*////////////////////////
Ligne contacts
////////////////////////*/

.ligneContacts
{
	width: 100%;
	border-top: 1px solid var(--couleur-habillage);
	padding: 1rem 0;
	display: flex;
	justify-content: space-between;
	align-items: center;

	overflow: hidden;
	width: 0;
	animation: ligneContactApparait .5s ease-out forwards;
	animation-delay: .7s;
}
@keyframes ligneContactApparait
{
	to { width: 100%; }
}

.ligneContacts:last-child
{
	border-bottom: 1px solid var(--couleur-habillage);
	margin-bottom: 2rem;
}
.ligneContacts p 
{
	white-space: nowrap;
}
.ligneContacts p span:nth-child(1)
{
	display: none;
}
.ligneContacts p span:nth-child(1),
.ligneContacts p span:nth-child(2)
{
	font-weight: 800;
	--font-size:var(--corps-mobile-titre3);
	font-size: var(--font-size);
	letter-spacing: calc(var(--font-size)*var(--letter-spacing-rem));
	line-height: var(--font-size);	
	padding-right: 4.2rem;
}
.ligneContacts p span:nth-child(3)
{
	display: none;
}
.ligneContacts p span:last-child
{
	color: var(--couleur-secondaire);
}
@media (min-width: 310px) and (max-width: 599px)
{
	.ligneContacts p span:nth-child(3)
	{
		display: block;
	}
}
@media (min-width: 600px) and (max-width: 1365px)
{
	.ligneContacts p span:nth-child(1)
	{
		display: inline;
	}
	.ligneContacts p span:nth-child(1),
	.ligneContacts p span:nth-child(2)
	{
		--font-size:var(--corps-tablette-titre3);
		padding-right: 4rem;
	}
	.ligneContacts p span:nth-child(3)
	{
		display: inline;
	}
}
@media (min-width: 1366px)
{
	.ligneContacts p span:nth-child(1)
	{
		display: inline;
	}
	.ligneContacts p span:nth-child(1),
	.ligneContacts p span:nth-child(2)
	{
		--font-size:var(--corps-desktop-titre3);
		padding-right: 6rem;
	}
	.ligneContacts:last-child
	{
		margin-bottom: 3rem;
	}
	.ligneContacts p span:nth-child(3)
	{
		display: inline;
	}
}

/*////////////////////////
Liens
////////////////////////*/

.ligneContacts a
{
	border-radius: 3rem;
}
.ligneContacts a div
{
	flex-shrink: 0;
	border: var(--bordure-pleine-habillage);
	border-radius: 3rem;
	padding: .8rem;
	width: 2.915rem;
	height: 2.915rem;
	display: flex;
	flex-direction: column;
	align-items: center; 
	justify-content: center; 
	overflow: hidden;
	transform: scale(1);
	transition: transform .3s ease-out, background-color .1s ease, border-color .1s ease;
}
.ligneContacts a div img,
.ligneContacts a div svg
{
	width: 100%;
	height: auto; 
	object-fit: cover;  /* l'image remplit même si elle dépasse */
	display: block; /* enlever l’espace en dessous causé par les images inline */
}
@media (min-width: 1366px)
{
	.ligneContacts a div
	{
		width: 3.51rem;
		height: 3.51rem;
	}
	.ligneContacts a div svg
	{
		width: 80%;
	}
}
.ligneContacts a div svg
{
	fill: var(--couleur-primaire);
	transition: fill .1s ease;
}
@media (hover: hover)
{
	.ligneContacts a:hover div
	{
		border-color: var(--couleur-primaire);
		background-color: var(--couleur-primaire);
	}
	.ligneContacts a:hover div svg
	{
		fill: var(--couleur-fond);
	}
}
.ligneContacts a:active div
{
	transform: scale(.85);
	transition: none;
}