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

.lettre
{
	opacity: 0;
	width: 0;
	animation: texteApparait .5s steps(1) forwards;
}
@keyframes texteApparait 
{
	to
	{
		opacity: 1;
		width: auto;
	}
}
.curseur 
{
	opacity: 0;
	animation: clignoter 0.6s step-end 4;
	animation-delay: .05s; 
	animation-fill-mode: forwards;
	border-right: 3px solid var(--couleur-primaire);
	margin-left:.2rem;
}
@keyframes clignoter 
{
	0%, 100% { opacity: 0; }
	50%      { opacity: 1; }
}

/*////////////////////////
Accroche
////////////////////////*/

.accroche 
{
	opacity: 0;
	animation: elementApparition .5s ease-out forwards;
	animation-delay: .7s;
}
@keyframes elementApparition
{
	to { opacity: 1; }
}

/*////////////////////////
Sections
////////////////////////*/

section
{
	opacity: 0;
	animation: elementApparition .4s ease-out forwards;
	animation-delay: 1.2s;
}

/*////////////////////////
Grille
////////////////////////*/

section .grille
{
	border-top: 1px solid var(--couleur-habillage);
	padding: 1.6rem 0;
}
section .grille:last-child
{
	border-bottom: 1px solid var(--couleur-habillage);
}
.colonne1
{
	color: var(--couleur-secondaire);
}
.colonne2span2 p
{
	color: var(--couleur-secondaire);
}
.colonne4
{
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
}
@media (min-width: 1366px)
{
	section .grille
	{
		padding: 2.2rem 0;
	}
}