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

main
{
	flex-direction: row;
}

/*////////////////////////
Visionneuse et nav
////////////////////////*/

/*
Au démarrage, tout est inactif pour éviter de voir un bref laps de temps l'écran se configurer.
Cette classe est remove() en JS.
*/
div.inactif
{
	display:none;
}

.bandeau
{
	overflow: hidden;
	
	display: flex;
	flex-direction: row;
	justify-content:stretch;
	align-items: stretch;
	
	/* overflow-x: auto; */
}

.visionneuse
{	
	display: flex;
	flex-direction: row;
	justify-content: stretch;
	align-items: stretch;
	transition: transform .3s ease-in-out;
}

.visionneuseNav
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	bottom:1.5rem;
	right:1.5rem;
	z-index: 10;
}
@media (min-width: 600px) 
{
	.visionneuseNav
	{
		bottom:1.9rem;
		right:1.9rem;
	}
}
.visionneuseNav button
{
	border-radius: 3rem;
	padding: .1rem;
	overflow: hidden;
}
.visionneuseNav button div
{
	border: var(--bordure-pleine-primaire);
	border-radius: 3rem;
	padding: .8rem;
	width: 2.915rem;
	height: 2.915rem;
	display: flex;
	align-items: center; 
	justify-content: center; 
	transition: transform .3s ease-out, background-color .1s ease;
}
.visionneuseNav button img,
.visionneuseNav button 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)
{
	.visionneuseNav button div
	{
		width: 3.51rem;
		height: 3.51rem;
	}
	.visionneuseNav button svg
	{
		width: 80%;
	}
}
.btnPrev div
{
	transform: scaleX(-1);
	margin-right: .5rem;
}
.btnNext div
{
	transform: scale(1);
}
.visionneuseNav button.inactif
{
	opacity: .2;
	cursor: not-allowed;
}
.visionneuseNav button svg
{
	fill: var(--couleur-primaire);
	transition: fill .1s ease;
}
@media (hover: hover)
{
	.visionneuseNav button:not(.inactif):hover div
	{
		background-color: var(--couleur-primaire);
	}
	.visionneuseNav button:not(.inactif):hover svg
	{
		fill: var(--couleur-fond);
	}
}
.btnPrev:not(.inactif):active div
{
	transform: scaleX(-1) scale(.85);
	transition: none;
} 
.btnNext:not(.inactif):active div
{
	transform: scale(.85);
	transition: none;
} 
@media 
	(max-height: 550px) and (max-width:599px),
	(min-width: 600px) and (max-height: 640px) and (max-width:699px),
	(min-width: 700px) and (max-height: 450px) and (max-width:1365px),
	(min-width: 1366px) and (max-height: 580px)
{
	.visionneuse
	{
		flex-direction: column;
	}
	.visionneuseNav
	{
		visibility: hidden;
		pointer-events: none;
	}
}

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

section
{
	display: flex;
	justify-content: stretch;
	align-items: center;
	margin: 0;
	padding:0;
	
	flex-grow: 1;
	flex-shrink: 1;
	/* largeur gérée en js*/
}
section:first-child
{
	margin-right: 4rem;
} 
section:nth-child(2)
{
	margin-right: 4rem;
} 
@media 
	(max-height: 550px) and (max-width:599px),
	(min-width: 600px) and (max-height: 640px) and (max-width:699px),
	(min-width: 700px) and (max-height: 450px) and (max-width:1365px),
	(min-width: 1366px) and (max-height: 580px)
{
	section
	{
		padding: 0 0 5rem 0;
	}
	section:nth-child(1)
	{
		flex-basis: calc(100dvh - 5rem);
	}
	section:nth-child(2)
	{
		padding-bottom: 6rem;
	}
}

/*////////////////////////
Textes
////////////////////////*/

h1
{
	margin-bottom: 0;
}
.indexTexte
{
	color:var(--couleur-secondaire);
	margin-bottom: 1rem;
}
.partieTexte
{
	color:var(--couleur-secondaire);
	margin-top: 1.5rem;
	margin-bottom: 1rem;
}
.petit
{
	color: var(--couleur-secondaire);
}
@media (min-width: 600px) 
{
	.partieTexte
	{
		margin-right: 4rem;
	}
}

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

.partie
{
	display: flex;
	gap: 1.25rem; 
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
@media (min-width: 700px) and (max-width: 1365px)
{
	.partie
	{
		gap: 1.5rem;
	}
}
@media (min-width: 1366px)
{
	.partie
	{
		gap: 2rem;
	}
}
.partie p
{
	text-align: left;
}
.partie img
{
	width: 100%;
	height: auto;
	margin-bottom: .5rem;
	border-radius: var(--border-radius);
}
.partie a
{
	border-radius: var(--border-radius);
}
.partie a div
{
	display: block;
	transform: scale(1);
	transition: opacity .2s ease-in-out, transform .3s ease-out;
}
@media (hover: hover)
{
	.partie a:hover div
	{
		opacity: .6;
	}
}
.partie a:active div
{
	transform: scale(.85);
	/* pas d'anim à l'entrée de l'état : */
	transition: none;
}
.colTout a
{
	border-radius: var(--border-radius);
}
.colTout a div
{
	border-radius: var(--border-radius);
	border: 1px solid var(--couleur-primaire);
	padding-bottom: .8rem;
	transition: opacity .2s ease-in-out, transform .3s ease-out;
}
.colTout .extraGras
{
	margin: 0 1rem;
}
@media (min-width: 700px) and (max-width: 1365px)
{
	.colTout a div
	{
		padding-bottom: 1rem;
	}
	.colTout .extraGras
	{
		margin-left: 1.2rem;
	}
	.colMargeHaute
	{
		margin-top: 1rem;
	}
}
@media (min-width: 1366px)
{
	.colTout a div
	{
		padding-bottom: 1.3rem;
	}
	.colTout .extraGras
	{
		margin-left: 1.5rem;
	}
	.colMargeHaute
	{
		margin-top: 1.4rem;
	}
}


.col1,
.colCreation,
.colTout
{
	display: flex;
	flex-direction: column;
}
.col1 
{
	flex-basis: 100%;
}
.colCreation,
.colTout
{
	flex-basis: calc(50% - .75rem);
}
@media (min-width: 700px) and (max-width: 1365px)
{
	.col1
	{
		flex-basis: 50%;
	}
	.colCreation,
	.colTout
	{
		flex-basis: calc(25% - 1.5rem);
	}
	
}
@media (min-width: 1366px)
{
	.col1
	{
		flex-basis: 50%;
	}
	.colCreation,
	.colTout
	{
		flex-basis: calc(25% - 2rem);
	}
	
}

.colSousPartie
{
	display: flex;
	gap: 1.25rem; 
	justify-content: stretch;
	align-items: stretch;
}
.colArticle
{
	display: flex;
	justify-content: stretch;
	align-items: stretch;
}
.colArticle a
{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-end;
	flex-shrink: 1;
	flex-grow: 1;
	border-radius: var(--border-radius);
}
.colArticle a div
{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-end;
	flex-basis: 100%;
	border-radius: var(--border-radius);
	border: 1px solid var(--couleur-secondaire);
	padding: 1rem;
}
.colArticle .extraGras
{
	margin-bottom: -.2rem;
}
.colArticle,
.colSousPartie .colTout
{
	flex-basis: 50%;
}
@media (min-width: 700px) and (max-width: 1365px)
{
	.colSousPartie
	{
		flex-basis: calc(50% - 1.5rem);
		gap: 1.5rem;
	}
	.colArticle a div
	{
		padding: 1.2rem;
	}
	.colArticle,
	.colSousPartie .colTout
	{
		flex-basis: 50%;
	}
}
@media (min-width: 1366px)
{
	.colSousPartie
	{
		flex-basis: calc(50% - 2rem);
		gap: 2rem;
	}
	.colArticle a div
	{
		padding: 1.5rem;
	}
	.colArticle,
	.colSousPartie .colTout
	{
		flex-basis: 50%;
	}
}

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

.lettre
{
	opacity: 0;
	filter: blur(20px);
	transform: scale(0) translateX(3rem) rotateZ(-10deg);
	animation: texteApparait .5s forwards;
}
@keyframes texteApparait 
{
	30%
	{
		opacity: .5;
		transform: scale(.5) translateX(3rem) rotateZ(-10deg);
	}
	60%
	{
		filter: blur(0);
		transform: scale(1.3) translateX(.1rem) rotateZ(0);
	}
	100%
	{		
		opacity: 1;
		filter: blur(0);
		transform: scale(1) translateX(0);
	}
}

.indexTexte
{
	opacity: 0;
	animation: indexTexteAnim .5s ease-out forwards;
	animation-delay: 1.5s;
}
@keyframes indexTexteAnim
{
	to { opacity: 1; }
}
.colonne1span2.lien
{
	animation: appelActionAnim .5s ease-out forwards;
	animation-delay: 1.5s;
	transform: scale(0);
	transform-origin: center left;
}
@keyframes appelActionAnim
{
	30%
	{
		transform: scale(1.2);
		
	}
	60%
	{
		transform: scale(.8);
	}
	100%
	{ 
		transform: none;
	}
}

.visionneuseNav
{
	transform: translateY(10rem);	
	animation: visionneuseNavAnim .4s ease-out forwards;
	animation-delay: 1.5s;
}
@keyframes visionneuseNavAnim
{
	to
	{
		transform: translateY(0);
	}
}