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

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

/*////////////////////////
Système
////////////////////////*/

.panneauScroll
{
	display: flex;
	overflow-x: auto;
	cursor: grab;
	
	width: 100%;
	
	/* Masquer scrollbar Firefox */
	scrollbar-width: none; 
	
	/* inertie iOS */
	-webkit-overflow-scrolling: touch; 
}
.grabbing
{
	cursor: grabbing;
}
/* Chrome, Safari, iOS */
.panneauScroll::-webkit-scrollbar 
{
	display: none; 
}
.item
{
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: calc(100% / 2);

	display: flex;
	flex-direction: column;
		
	/* évite la sélection de texte pendant le drag */
	user-select: none; 
	
	position: relative;
	
	/* Réduire les effets de sous-pixel rendering, arrondis, anti-aliasing... */
	transform: scale(1);
}
@media (min-width: 700px) and (max-width: 1365px)
{
	.item
	{
		flex-basis: calc(100% / 3);
	}
}
@media (min-width: 1366px)
{
	.item
	{
		flex-basis: calc(100% / 4);
	}
	
}

/*////////////////////////
Contenu des items
////////////////////////*/

h2,
h3,
.petit,
p
{
	text-align: left;
	padding-right: 2rem;
}
h2,
p
{
	color: var(--couleur-secondaire);
}
h3
{
	margin-bottom: 0;
}
p ~ h3
{
	margin-top: 1.25rem;
}
.petit
{
	margin-top: .25rem;
}
.panneauScroll p:not(.petit)
{
	margin-top: 1.25rem;
}
h2
{
	padding-bottom: 1.6rem;
	/* border-bottom:1px solid var(--couleur-habillage); */
	margin-bottom: 1.8rem;
	/* position: relative; */
}
.liseret
{
	border-bottom: 2px solid var(--couleur-habillage);
	position: absolute;
	left: 0; right: 0;
	top: 3.2rem;
	height: 2px;
}
.liseret.degradeDebut
{
	border-image: linear-gradient(
		to right, 
		var(--couleur-habillage-transparente), 
		var(--couleur-habillage))
		1;
}
.liseret.degradeFin
{
	border-image: linear-gradient(
		to left, 
		var(--couleur-habillage-transparente), 
		var(--couleur-habillage))
		1;
}
.liseret.puce::after
{
	content:"";
	display: block;
	position: absolute;
	background-color: var(--couleur-habillage);
	border-radius: 100%;
	width: .6rem;
	height: .6rem;
	left: 0;
	top: -.25rem;
}
@media (min-width: 600px) and (max-width: 1365px)
{
	h2
	{
		padding-bottom: 1.8rem;
		margin-bottom: 2rem;
	}
	.liseret
	{
		top: 3.7rem;
	}
	.liseret.puce::after
	{
		width: .7rem;
		height: .7rem;
		top: -.3rem;
	}
}
@media (min-width: 1366px)
{
	h2
	{
		padding-bottom: 2.3rem;
		margin-bottom: 2.6rem;
	}
	.liseret
	{
		top: 4.7rem;
	}
	.liseret.puce::after
	{
		width: .8rem;
		height: .8rem;
		top: -.35rem;
	}
}

/*////////////////////////
Animations
////////////////////////*/

.mot
{
	perspective: 9.5rem;	
	/* perspective-origin: bottom center; */
}
.lettre
{
	transform-origin: bottom center; 
	opacity: 0;
	transform: rotateX(110deg);
    
	transform-style: preserve-3d;
	  
	animation: texteApparait 1s forwards;
}
@keyframes texteApparait 
{
	10%
	{
		opacity: 1;
	}
	60% 
	{
		transform: rotateX(-30deg); 
	}
	100% 
	{
		opacity: 1;
		transform: rotateX(0);
	}
}
.accroche 
{	
	opacity: 0;
	animation: elementApparition .5s ease-out forwards;
	animation-delay: .5s;
}
@keyframes elementApparition
{
	to { opacity: 1; }
}
.panneauScroll
{
	opacity: 0;
	animation: elementApparition .5s ease-out forwards;
	animation-delay: 1s;
}