html
	{
		height:100%;
	}

html, body
	{
		background-image:url("Img/Interface/Fond.jpg");
		background-size:cover;
		background-repeat:no-repeat;
		background-attachment:fixed;
	}

*
	{
		user-drag:none;
		-webkit-user-drag:none;
		-khtml-user-drag:none;
		-moz-user-drag:none;
		-o-user-drag:none;
	}
	
header img, #planteMenu, section#messageAccueil #lecteurAccueil img
	{
		user-select:none;
	}
	
body
	{
		margin:0;
		font-family:"canada-type-gibson", sans-serif;
	}
	
:root
	{
		--innu:#921a31;
		--fondements:#384c86;
		--langue:#667337;
		--posture:#f6b252;
		--perspective:#6b4a1c;
		--orange:#bd5f29;
	}

header
	{
		--hauteurImgHeader:75px;
		display:inline-flex;
		flex-flow:column;
		
		width:calc(100% - (2 * 4em));
		margin:4em 4em 2em 4em;
		
		position:relative;
		transition-duration:0.25s;
	}

header #logos
	{
		display:inline-flex;
		gap:3em;
		
		transition-duration:inherit;
	}

header #logos img
	{
		height:var(--hauteurImgHeader);
		
		transition-duration:inherit;
		
		cursor:pointer;
	}

header #logos img:first-child
	{
		border-right:1px solid black;
		padding-right:3em;
	}

header #btnMenu
	{
		appearance:none;
		
		background-image:url("Img/Interface/menu.png");
		background-position:center;
		background-repeat:no-repeat;
		background-size:contain;
		width:2.5em;
		
		margin:auto;
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		
		cursor:pointer;
	}

header #btnMenu:checked
	{filter:invert(0.5);}

header:has(#btnMenu:checked) ul
	{display:block;}

header ul
	{
		display:none;
		
		--couleurFondMenu:#000000e0;
		background-color:var(--couleurFondMenu);
		color:white;
		text-transform:uppercase;
		
		position:absolute;
		top:0;
		z-index:2;
		align-self:end;
		margin-right:4em;
		
		margin-block:0;
		padding:1.5em 2em;
		border-radius:1em;
		backdrop-filter:blur(2px);
		box-shadow:0 0 0.5em white;
		
		list-style-type:none;
	}

header ul::before
	{
		content:"";
		
		position:absolute;
		top:calc(var(--hauteurImgHeader) / 3);
		right:-1em;
		
		width:0;
		height:0;
		border-left:1em solid var(--couleurFondMenu);
		border-top:1em solid transparent;
		border-bottom:1em solid transparent;
		
		transition-duration:0.25s;
	}

header ul li
	{
		cursor:pointer;
		padding:0.5em 1em;
		
		color:var(--couleurVariableTexte, white);
		text-shadow:0 0 1em var(--couleurVariableTexte, black);
		transition-duration:0.25s;
	}

/* Couleurs du menu texte actif ou hover */
body:has(section#planteMenu #innu.actif) header ul li:nth-child(1), header ul li:nth-child(1):hover
	{
		--couleurVariableTexte:var(--innu);
		filter:brightness(1.5);
	}
body:has(section#planteMenu #fondements.actif) header ul li:nth-child(2), header ul li:nth-child(2):hover
	{
		--couleurVariableTexte:var(--fondements);
		filter:brightness(1.5);
	}
body:has(section#planteMenu #langue.actif) header ul li:nth-child(3), header ul li:nth-child(3):hover
	{
		--couleurVariableTexte:var(--langue);
		filter:brightness(1.5);
	}
body:has(section#planteMenu #posture.actif) header ul li:nth-child(4), header ul li:nth-child(4):hover
	{--couleurVariableTexte:var(--posture);}
body:has(section#planteMenu #perspective.actif) header ul li:nth-child(5), header ul li:nth-child(5):hover
	{
		--couleurVariableTexte:var(--perspective);
		filter:brightness(1.5);
	}

/* Flèche de retour coloré */
#retourAccueilColore
	{
		display:none;
		
		position:absolute;
		z-index:1;
		margin:auto;
		top:0;
		bottom:0;
		left:1em;
		
		width:0;
		height:0;
		
		/* Aligner verticalement à tout l'écran sans la hauteur du menu */
		transform:translateY(calc(var(--hauteurMenuMobile) / 2));
		
		border-top:2em solid transparent;
		border-right:2em solid var(--couleurVariable);
		border-bottom:2em solid transparent;
		border-left:none;
		
		transition-duration:0.25s;
		
		cursor:pointer;
	}

body:has(section#planteMenu .actif) #retourAccueilColore
	{display:block;}


/* Couleurs variables de la page entière */
body:has(section#planteMenu #innu.actif)		{--couleurVariable:var(--innu);}
body:has(section#planteMenu #fondements.actif)	{--couleurVariable:var(--fondements);}
body:has(section#planteMenu #langue.actif)		{--couleurVariable:var(--langue);}
body:has(section#planteMenu #posture.actif)	{--couleurVariable:var(--posture);}
body:has(section#planteMenu #perspective.actif){--couleurVariable:var(--perspective);}


main
	{
		display:grid;
		
	/* On divise les 2 derniers blocs par 3.5 pour qu'ils soient moins hauts */
		grid-template-columns:repeat(2, calc(50% - 2em)) repeat(2, calc((100% - 8em) / 3.5));
		
		gap:0 4em;
		align-items:center;
		
		margin:0 12em;
		
		/*overflow-x:auto;*/
		overflow:hidden;
		
		scroll-snap-type:x mandatory;
		
		height:calc(100dvh - var(--hauteurMenuMobile));
	}

header.navigation ~ main
	{
		margin:0 4em;
		grid-template-columns:calc(50% - 4em) calc((100% - 8em) / 2.35) repeat(2, calc((100% - 8em) / 3.5));
		
		/*overflow:hidden;*/
	}


main section
	{
		position:relative;
		/*outline:1px dashed #459734;*/
		scroll-snap-align:center;
	}


/* * * Plante-menu * * */
header:not(.navigation) ~ main section#planteMenu
	{
		margin:1.5em;
	}

#planteMenu
	{
		order:2;
		position:relative;
	}
	
#planteMenu #planteImg
	{
		mix-blend-mode:multiply;
		display:block;
		margin:auto;
		max-width:100%;
	}

/* Boutons de la plante-menu */
#planteMenu img:not(#planteImg)
	{
		width:5em;
		border-radius:100%;
		
		cursor:pointer;
		transition-duration:0.25s;
		position:absolute;
		
		transform:translate(-50%, -50%);
	}

#planteMenu img#innu
	{
		--couleurAnimation:var(--innu);
		top:calc(1% + (5em / 2));
		left:44%;
	}
	
#planteMenu img#fondements
	{
		--couleurAnimation:var(--fondements);
		top:22%;
		left:74%;
	}
	
#planteMenu img#langue
	{
		--couleurAnimation:var(--langue);
		top:50%;
		left:30%;
	}
	
#planteMenu img#posture
	{
		--couleurAnimation:var(--posture);
		top:62%;
		left:60%;
	}
	
#planteMenu img#perspective
	{
		--couleurAnimation:var(--perspective);
		top:calc(99% - (5em / 2));
		left:29%;
	}

#planteMenu:not(:has(.actif)) img:not(#planteImg)
	{
		animation-name:pulsation;
		animation-duration:3s;
		animation-iteration-count:infinite;
		animation-timing-function:ease;
	}

/*#planteMenu:not(:has(.actif)) #innu{animation-delay:-1.5s;}*/
#planteMenu:not(:has(.actif)) #fondements	{animation-delay:-1s;}
#planteMenu:not(:has(.actif)) #langue		{animation-delay:-0.5s;}
#planteMenu:not(:has(.actif)) #posture		{animation-delay:-2s;}
#planteMenu:not(:has(.actif)) #perspective	{animation-delay:-2.5s;}

@keyframes pulsation
	{
		0%
			{
				outline:0 solid var(--couleurAnimation);
				box-shadow:0 0 0 var(--couleurAnimation);
			}
		50%
			{
				outline:1em solid transparent;
				box-shadow:0 0 1.5em 1.5em transparent;
				
				transform:translate(-50%, -50%) scale(1.1);
				filter:opacity(0.9) contrast(1.1) brightness(1.1);
			}
		100%
			{
				outline:0 solid transparent;
				box-shadow:0 0 0em transparent;
			}
	}

#planteMenu img.actif:not(#planteImg)
	{
		z-index:1;
		
		animation-name:pulsationSelect;
		animation-duration:2s;
		animation-iteration-count:infinite;
	}

@keyframes pulsationSelect
	{
		0%
			{
				outline:0 solid var(--couleurAnimation);
			}
		100%
			{
				outline:2em solid transparent;
				box-shadow:0 0 1.5em 1.5em transparent;
			}
	}
/* * * FIN plante-menu * * */


/* * * Message d'accueil * * */
section#messageAccueil
	{
		order:1;
		
		padding:2em 2em 0.5em 2em;
		
		font-size:1.3em;
	}

section#messageAccueil h1
	{
		font-size:1em;
		text-align:center;
	}

/* Lecteur audio #messageAccueil */
section#messageAccueil #lecteurAccueil
	{
		font-size:0.7em;
		
		width:60%;
		margin:4em auto 2.5em;
		display:grid;
		grid-template-columns:repeat(5, 1fr);
		align-items:center;
		
		filter:contrast(0.25);
		mix-blend-mode:difference;
	}

section#messageAccueil #lecteurAccueil img
	{
		max-width:2em;
		max-height:2em;
		margin:auto;
		transition-duration:0.1s;
		
		cursor:pointer;
	}

section#messageAccueil #lecteurAccueil #pauseAccueil
	{
		display:none;
	}

section#messageAccueil #lecteurAccueil #avancerAccueil
	{
		transform:rotate(180deg);
	}

section#messageAccueil #lecteurAccueil #avancerAccueil.actif
	{
		transform:rotate(180deg) scale(0.8);
	}

section#messageAccueil #lecteurAccueil #reculerAccueil.actif
	{
		transform:scale(0.8);
	}

section#messageAccueil #lecteurAccueil	#progressionAccueil
	{
		grid-column:span 5;
		width:100%;
		margin-top:1em;
		cursor:pointer;
		filter:invert(1);
	}

section#messageAccueil #lecteurAccueil:has(#reculerAccueil.actif) #progressionAccueil, section#messageAccueil #lecteurAccueil:has(#avancerAccueil.actif) #progressionAccueil
	{
		filter:invert(1) saturate(20) brightness(2) hue-rotate(260deg);
		outline:1px solid #00000025;
		border-radius:0.5em;
	}

#tempsProgression, #tempsRestant
	{
		margin-block:0;
	}

#tempsProgression
	{
		grid-column:1;
	}

#tempsRestant
	{
		grid-column:5;
		text-align:right;
	}
/* FIN lecteur audio #messageAccueil */
/* * * FIN du message d'accueil * * */


/* * * Liste de ressources * * */
section#ressources #listeRessources, section#contenu
	{
		aspect-ratio:9/16;
		width:calc(100% - (2 * 2px));
		max-height:calc(100dvh - var(--hauteurBandeauAudio) - var(--hauteurMenuMobile));
		border-radius:2em;
		
		overflow-y:auto;
		
		transition-duration:0.25s;
	}

section#ressources #btnJouer
	{
		--remplissageProgression:var(--couleurVariable);
		
		font-size:1.5em;
		font-family:"menco", sans-serif;
		font-weight:900;
		line-height:1em;
		text-transform:uppercase;
		color:var(--couleurVariable);
		
		position:sticky;
		top:0;
		z-index:1;
		
		display:grid;
		grid-template-columns:auto auto;
		align-items:center;
		justify-items:center;
		gap:0.5em;
		
		width:calc(100% - 2em);
		margin:0.25em auto;
		padding:0.25em 0;
		opacity:60%;
		mix-blend-mode:multiply;
		
		transition-duration:0.5s;
	}

section#ressources #btnJouer span.retour, section#contenu span.retour
	{
		display:none;
		
		position:absolute;
		top:0;
		bottom:0;
		left:0.5em;
		margin:auto;
		
		width:0;
		height:0;
		
		border-top:2em solid transparent;
		border-right:2em solid white;
		border-bottom:2em solid transparent;
		border-left:none;
		
		font-size:0.5em;
	}
	
section#contenu span.retour
	{
		position:sticky;
		margin:unset;
		top:calc(50% - 2em);
	}

section#contenu span.retour::after
	{
		content:"";
		
		position:absolute;
		right:-2em;
		transform:translateY(-50%);
		
		display:block;
		width:2px;
		height:calc(100dvh - var(--hauteurMenuMobile));
		background-color:white;
	}

section#ressources #btnJouer span:not(.retour)
	{
		display:none;
	}

/* Affichage du bon bandeau dépendant de la section active */
#planteMenu:has(#innu.actif) ~ section#ressources #btnJouer span.innu,
#planteMenu:has(#fondements.actif) ~ section#ressources #btnJouer span.fondements,
#planteMenu:has(#langue.actif) ~ section#ressources #btnJouer span.langue,
#planteMenu:has(#posture.actif) ~ section#ressources #btnJouer span.posture,
#planteMenu:has(#perspective.actif) ~ section#ressources #btnJouer span.perspective
	{display:block;}

/* Lecteur audio circulaire */
#progressionCirculaire
	{
		--grosseur:70px;
		--angleDepart:0deg;
		--angleFin:180deg;
		--couleurFondTrack:transparent;
	/* 0.6em Équivaut à l'épaisseur de la ligne de progression */
		--tailleCercleInterne:calc(var(--grosseur) - 0.6em);
		
		background:conic-gradient(var(--remplissageProgression) var(--angleDepart), var(--remplissageProgression) var(--angleFin), var(--couleurFondTrack) var(--angleFin));
		
		width:var(--grosseur);
		aspect-ratio:1;
		clip-path:circle(50%);
		position:relative;
		text-align:center;
		
		cursor:pointer;
	}

#progressionCirculaire::before, #progressionCirculaire::after
	{
		position:absolute;
		margin:auto;
		top:0;
		bottom:0;
		left:0;
		right:0;
		
		width:var(--tailleCercleInterne);
		aspect-ratio:1;
	}

#progressionCirculaire::before
	{
		content:"";
		
		background-color:var(--couleurVariable);
		
		mask-image:url("Img/Interface/Jouer.svg");
		-webkit-mask-image:url("Img/Interface/Jouer.svg");
		mask-repeat:no-repeat;
		-webkit-mask-repeat:no-repeat;
		mask-position:center;
		-webkit-mask-position:center;
		
		z-index:1;
	}

#progressionCirculaire.joue::before
	{
		mask-image:url("Img/Interface/Pause.svg");
		-webkit-mask-image:url("Img/Interface/Pause.svg");
	}
	
#progressionCirculaire::after
	{
		content:"";
		
		background-color:white;
		clip-path:inherit;
	}
/* FIN lecteur audio circulaire */



section#ressources
	{
		order:3;
	}

section#ressources #listeRessources
	{
		display:grid;
		grid-template-columns:50%;
		gap:2.5em;
		
		justify-content:center;
		
		border:2px solid var(--couleurVariable);
		
		scrollbar-color:var(--couleurVariable) #ffffff50;
	}
	
section#ressources #listeRessources article
	{
		display:none;
	}

/* Affichage de la bonne liste dépendant de la section active (~ après, peu importe la distance (tout ce qui correspond)) */
#planteMenu:has(#innu.actif) ~ section#ressources #listeRessources article.innu,
#planteMenu:has(#fondements.actif) ~ section#ressources #listeRessources article.fondements,
#planteMenu:has(#langue.actif) ~ section#ressources #listeRessources article.langue,
#planteMenu:has(#posture.actif) ~ section#ressources #listeRessources article.posture,
#planteMenu:has(#perspective.actif) ~ section#ressources #listeRessources article.perspective
	{display:block;}

section#ressources #listeRessources article > span
	{
		font-weight:500;
		
		display:grid;
		justify-items:center;
		
		cursor:pointer;
	}

section#ressources #listeRessources article span.sousTitre
	{
		font-weight:lighter;
		display:block;
	}

section#ressources #listeRessources article div.cadre
	{
		overflow:hidden;
		/*max-height:200px;*/
		aspect-ratio:4/5;
		
		outline:4px solid black;
		border-radius:0.5em;
		margin-bottom:0.75em;
		
		transition-duration:0.1s;
	}

section#ressources #listeRessources article.actif div.cadre
	{outline:8px solid var(--couleurVariable);}

section#ressources #listeRessources article img
	{
		width:100%;
		/*display:block;*/
		
		height:100%;
		object-fit:cover;
	}


/* * * Contenu * * */
section#contenu
	{
		order:4;
		
		border:2px solid var(--couleurVariable);
		background-color:var(--couleurVariable);
		
		word-break:break-word;
		hyphens:auto;
		
		margin-top:var(--hauteurBandeauAudio);
	}

/* Texte noir sur fond jaune */
#planteMenu:has(#posture.actif) ~ section#contenu div
	{
		color:black;
	}

section#contenu input#pleinEcran
	{
		appearance:none;
		
		background-image:url("Img/Interface/Ouvrir.png");
		background-size:contain;
		background-repeat:no-repeat;
		background-position:center;
		
		opacity:0.75;
		width:40px;
		aspect-ratio:1;
		position:sticky;
		top:1em;
		right:1em;
		
		float:right;
		margin:-1em;
		
		filter:drop-shadow(0 0 1px var(--couleurVariable));
		
		cursor:pointer;
	}

section#contenu input#pleinEcran:checked
	{
		background-image:url("Img/Interface/Fermer.png");
	}

section#contenu:has(input#pleinEcran:checked)
	{
		position:fixed;
		left:0;
		top:0;
		bottom:0;
		right:0;
		z-index:100;
		
		margin:auto;
		
		width:unset;
		height:calc(100dvh - 2em - 4px);
		max-height:calc(100dvh - 2em - 4px);
		
		box-shadow:0 0 100vw 50vw #000000E0;
		outline:1px dashed white;
	}

section#contenu div:not(#blocContenu, .aDroite)
	{
		color:white;
		padding:2em;
		
		transition-duration:0.25s;
	}

section#contenu #titre, section#contenu #sousTitre, section#contenu #auteur
	{
		text-align:right;
		white-space:pre-wrap;
	}

section#contenu #titre
	{
		font-size:16pt;
		font-weight:900;
		text-transform:uppercase;
		margin-block-start:1.5em;
		margin-block-end:0.25em;
	}

section#contenu #sousTitre
	{
		font-size:12pt;
		font-weight:lighter;
		
		margin-block:0;
	}

section#contenu #auteur
	{
		font-size:14pt;
		font-weight:500;
		
		margin-block:0;
	}

section#contenu #blocContenu
	{
		margin-top:2em;
		height:fit-content;
	}

section#contenu #blocContenu .aDroite
	{
		float:right;
		min-width:min-content;
		width:45%;
		margin:0 0 1.5em 5%;
		
		display:grid;
		gap:1em;
		word-break:normal;
		
		justify-items:center;
	}

section#contenu #blocContenu img
	{
		max-width:100%;
		border-radius:0.25em;
		
		max-height:calc(100dvh - var(--hauteurMenuMobile));
	}

section#contenu #blocContenu #lien[href="#"], section#contenu #blocContenu #lien[href=""]
	{display:none;}/* Cacher lorsque le lien est vide */

section#contenu #blocContenu #lien
	{
		font-size:10pt;
		text-transform:uppercase;
		text-decoration:none;
		font-weight:750;
		
		width:fit-content;
		
		background-color:white;
		color:black;
		border-radius:0.25em;
		padding:0.5em 1em;
	}

section#contenu #blocContenu h3
	{
		font-size:1em;
		font-weight:750;
		letter-spacing:0.025em;
	}

section#contenu #blocContenu h3 sup
	{
		font-weight:normal;
		font-size:0.75em;
	}

section#contenu #blocContenu a:not(#lien)
	{
		color:inherit;
		font-weight:bold;
	}

section#contenu #blocContenu p
	{
		font-family:"menco", sans-serif;
		font-weight:500;
		
		white-space:pre-wrap;
	}

section#contenu #blocContenu p#descriptionSommaire
	{
		font-size:11pt;
	}

section#contenu #blocContenu p#descriptionSommaire h2
	{
		margin-block-end:0;
	}

section#contenu #blocContenu p#descriptionSommaire img
	{
		max-width:50%;
	}

section#contenu #blocContenu hr
	{
		clear:both;
		border:transparent;
	}

/* Cacher <h3> lorsqu'il est suivi d'une balise <p> vide OU (Pour les navigateurs moins compatibles) cacher si la class .vide est présente */
h3:has(+ p#pistesReflexion:empty), h3:has(+ p#pistesPedagogiques:empty), h3:has(+ p#plusLoin:empty), .vide
	{display:none;}

/* Cacher lorsque vide */
#sousTitre:empty, #auteur:empty, p#pistesReflexion:empty, p#pistesPedagogiques:empty, p#plusLoin:empty
	{display:none;}



@media (width <= 1650px)
	{
		header
			{
				margin:1em 4em;
			}
		
		section#messageAccueil
			{
				font-size:1em;
			}
		
		section#ressources #btnJouer
			{
				font-size:1.25em;
			}
		
		section#contenu input#pleinEcran
			{
				width:50px;
			}
		section#contenu #titre
			{
				margin-block-start:50px;
			}
	}


/* Écran environ style tablette ou faible résolution */
@media (width <= 1200px)
	{
		main
			{
				grid-template-columns:repeat(4, calc(50% - 1em));
				gap:2em;
				grid-template-rows:calc(100dvh - var(--hauteurMenuMobile) - 1em);
				margin:0 6em;
				
				overflow:hidden;
			}
		
		header.navigation ~ main
			{
				grid-template-columns:repeat(4, calc((100% - 10%) / 2));
				gap:0 10%;
				margin:0 4em;
			}
		
		section#planteMenu img#planteImg
			{
				max-height:calc(100dvh - var(--hauteurMenuMobile) - 1em);
			}
		
		section#messageAccueil #lecteurAccueil
			{
				width:90%;
			}
		
		section#messageAccueil, section#planteMenu
			{
				max-height:100%;
				
				align-content:center;
				
				overflow-y:auto;
			}
		
		#planteMenu img:not(#planteImg)
			{
				width:3em;
			}
		
		section#ressources
			{/* On met ça juste à section#ressources, sinon à une taille d'écran très spécifique ça ne défile pas assez pour afficher le 2e écran de cellulaire, ça ne semble pas causer de conflit que seul celui-ci soit à start et les autres à center */
				scroll-snap-align:start;
				
			/*Permet de défiler jusqu'à la liste, puis quand on clique sur un de ses éléments, jusqu'au contenu.
				scroll-snap-align:end;*/
			}
		
		/*section#contenu:has(input#pleinEcran:checked)
			{
				aspect-ratio:16/9;
				width:calc(100vw - 2em - 4px);
				border-radius:2em;
			}*/
	}
/* FIN de écran environ style tablette ou faible résolution */

/* Liste de ressources sur 2 colonnes */
@media (width >= 650px) AND (width <= 1000px)
	{
		section#ressources #listeRessources
			{
				grid-template-columns:repeat(2, 30%);
				gap:4em;
			}
		
	/* Empêche le <span> espaceur invisible du début de décaler les vignettes */
		section#ressources #listeRessources > span
			{grid-column:2;}
	}

/* Environ cellulaire horizontal à faible hauteur */
@media (height <= 650px) AND (orientation:landscape)
	{
		header
			{
				--hauteurImgHeader:50px;
				margin:0.5em 4em;
			}
		
		header.navigation
			{
				--hauteurImgHeader:50px;
			}
		
		header #btnMenu
			{
				width:1.5em;
			}
		
		#progressionCirculaire
			{
				--grosseur:50px;
			}
		
		#progressionCirculaire::before
			{
				-webkit-mask-size:20px;
				mask-size:20px;
			}
		
		#progressionCirculaire.joue::before
			{
				-webkit-mask-size:15px;
				mask-size:15px;
			}
	}



/* * * Environ écran style cellulaire * * */
@media (width <= 1000px)
	{
		header
			{
				--hauteurImgHeader:50px;
				width:calc(100% - (2 * 1em));
				margin:unset;
				padding:1em;
				background-color:white;
				
				position:sticky;
				top:0;
				z-index:10;
			}
		
		header.navigation
			{
				--hauteurImgHeader:50px;
			}
		
		header ul::before
			{
				top:calc(var(--hauteurImgHeader) / 2);
			}
		
		header #logos
			{
				gap:1em;
			}
		
		header #logos img:first-child
			{
				padding-right:1em;
			}
			
		header #btnMenu
			{
				right:1em;
			}
		
		body:has(section#planteMenu .actif) #retourAccueilColore
			{
				display:none;
			}
		
		main
			{
				height:calc(100dvh - var(--hauteurMenuMobile));
				
				overflow-y:auto;
				scroll-snap-type:none;
			}
		
		main, header.navigation ~ main
			{
				grid-template-columns:repeat(3, 100%);
				grid-template-rows:calc(100dvh - var(--hauteurMenuMobile));
				gap:0;
				
				margin:unset;
				align-items:unset;
			}
		
		header.navigation ~ main
			{
				overflow-y:hidden;
				scroll-snap-type:x mandatory;
			}
		
		section#planteMenu
			{
				order:1;
				
				align-self:center;
				justify-self:center;
				
				width:fit-content;
				height:fit-content;
				max-height:calc(100dvh - var(--hauteurMenuMobile));
			}
		
		section#planteMenu, section#messageAccueil
			{
				grid-column:1;
				
				overflow-y:unset;
			}
		
		section#messageAccueil
			{
				grid-row:2;
				order:2;
				
				padding:0.5em 2em;
				margin-top:calc((100dvh - var(--hauteurMenuMobile) - var(--hauteurPlanteMenu)) / 2 * -1);/* Mettre le texte directement sous la plante-menu */
				
				font-size:1.25em;
			}
		
		section#messageAccueil h1
			{
				margin-block:0;
			}
		
		section#messageAccueil #lecteurAccueil #avancerAccueil.actif
			{
				transform:rotate(180deg) scale(1.2);
			}

		section#messageAccueil #lecteurAccueil #reculerAccueil.actif
			{
				transform:scale(1.2);
			}
		
		section#planteMenu img:not(#planteImg)
			{
				width:3.5em;
			}
			
		section#ressources #listeRessources, section#contenu
			{
				border:none;
				border-radius:0;
				aspect-ratio:unset;
			}
		
		section#ressources #btnJouer
			{
				--remplissageProgression:white;
				
				margin:0 auto;
				
				width:95%;
				height:fit-content;
				padding:0.5em 2.5%;
				
				color:white;
				opacity:1;
				mix-blend-mode:unset;
				
				background-color:var(--couleurVariable);
			}
		
		/*	Ne pas jeter pour l'instant, si les fleches reviennent un jour
		section#ressources #btnJouer span.retour, section#contenu span.retour
			{
				display:block;
			} */
		
		section#ressources #btnJouer #progressionCirculaire::before
			{
				background-color:white;
			}
			
		section#ressources #btnJouer #progressionCirculaire::after
			{
				background-color:var(--couleurVariable);
			}
		
		section#ressources #listeRessources
			{
				height:calc(100dvh - var(--hauteurMenuMobile) - var(--hauteurBandeauAudio));
			}
		
		section#contenu
			{
				height:unset;
				max-height:unset;
				width:100%;/* Empêcher la mesure - border */
				margin-top:unset;
			}
		
		section#contenu #pleinEcran
			{
				display:none;
			}
		
		section#contenu h1
			{
				margin-block-start:0;
			}
			
		section#contenu div:not(#blocContenu, .aDroite)
			{
				padding:0 2em 0.5em;
			}
			
	}