@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Fira+Sans:wght@900&display=swap');

* { box-sizing:border-box; font-size:inherit; scrollbar-width:thin; scroll-behavior:smooth; }
::-webkit-scrollbar { width:0.5rem; height:0.5rem; }
::-webkit-scrollbar-track { background:#0a202f; }
::-webkit-scrollbar-thumb { background: #6a7780; }


html { -webkit-text-size-adjust:100%; }
html, body { width:100%; height:100%; margin:0; padding:0; font-size:16px; }
body { min-width:240px; background:#052538; font-family:'Fira Sans Condensed', sans-serif; font-weight:400; font-style:normal; color:#222; }
body { touch-action:pan-y; }

a { color:#fff; opacity:0.84; transition:color 0.4s; -webkit-transition:color 0.4s; }
a svg .icone path { transition:fill 0.4s; -webkit-transition:fill 0.4s; }
a:active { outline:0; }
a:hover, a:focus { opacity:1; color:#052538; outline:0; }
a:hover svg .icone path,
a:focus svg .icone path { fill:#052538; border-color:#052538; }
svg { display:inline-block; vertical-align:middle; height:1em; width:1em; }


/* ICÔNES SIMPLES */

svg path { fill:#fff; opacity:0.84; }
svg .texte path,
svg .icone path { fill:#fff; }
a:focus svg .texte path,
a:focus svg .icone path,
a:hover svg .texte path,
a:hover svg .icone path { opacity:1; }


/* ICÔNES COMPLEXES */

svg .tour path,
svg .blanc path { fill:#fff; }
svg .noir path { fill:#052538; }
svg .centre path { fill:#fff; opacity:0.08; }


a:focus svg .centre path,
a:hover svg .centre path { opacity:0.16; }


a:focus svg .tour path,
a:hover svg .tour path,
a:focus svg .texte path,
a:hover svg .texte path { fill:#052538; }



a:focus .puce svg .blanc path,
a:hover .puce svg .blanc path { fill:#444; }

/* MENU */

#intro #page {
	display:flex;
	height:100%;
}
#intro a {
	text-decoration:none;
}
#intro .menu {
	min-width:16rem;
	border-right:1px solid #c0c0c0;
}
.menu ul {
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
}
.menu li {
	margin:0;
	padding:0;
}
.menu li a {
	box-sizing:border-box;
	display:inline-block;
	width:100%;
	padding:1.2em 1.6em;
	font-weight:500;
	font-family:"Fira Sans Condensed";
	text-decoration:none;
	text-transform:uppercase;
	border-bottom:1px solid #c0c0c0;
}


.partenaires ul {
	margin:0;
	padding:0;
	list-style:none;
}
.partenaires li {
	display:inline-block;
}


.partenaires li.ville-de-quebec svg {
	width:12vw;
	height:auto;
}
.partenaires li.musees-numeriques svg {
	width:18vw;
	height:auto;
}

.partenaires li .nom {
	display:none;
}


#intro h1 {
	display:inline-block;
	width:100%;
	padding:0 0.6em;
	font-size:3.2rem;
	font-weight:900;
	text-align:center;
	font-family:"Fira Sans";
	text-transform:uppercase;
}



#intro .aquarelle { position:fixed; z-index:-1; top:0; right:0; bottom:0; left:0; background:#000; background: linear-gradient(180deg, rgba(135,168,167,1) 0%, rgba(37,81,108,1) 64%, rgba(0,41,71,1) 92%); }
#intro .aquarelle .texture { opacity:0.84; width:100%; height:100%; background-image:url("images/aquarelle-couverture.jpg"); background-repeat:no-repeat; background-size:cover; background-position:50% 0%; }
#intro .navire {
	position:absolute;
	top:auto;
	left:auto;
	right:100vw;
	bottom:-6vh;
	width:108vw;
	height:72vw;
	background-size:cover;
	background-image:url('images/navire-blanc-1800x1200.png');
	opacity:0.3;
}
@media only screen and (max-width:960px) {
	#intro .aquarelle .texture {
		 background-image:url("images/aquarelle-couverture-1200x2750.jpg");
	}
}







/* ACCUEIL */

#accueil .aquarelle { position:fixed; z-index:-1; top:0; right:0; bottom:0; left:0; background:#000; background: linear-gradient(180deg, rgba(135,168,167,1) 0%, rgba(37,81,108,1) 64%, rgba(0,41,71,1) 92%); }
#accueil .aquarelle .texture { opacity:0.84; width:100%; height:100%; background-image:url("images/aquarelle-couverture.jpg"); background-repeat:no-repeat; background-size:cover; background-position:50% 0%; }
#accueil .navire {
	position:absolute;
	top:auto;
	left:auto;
	right:100vw;
	bottom:-6vh;
	width:108vw;
	height:72vw;

	background-size:cover;
	background-image:url('images/navire-blanc-1800x1200.png');
	opacity:0.3;
}
@media only screen and (max-width:960px) {
	#accueil .aquarelle .texture {
		 background-image:url("images/aquarelle-couverture-1200x2750.jpg");
	}
}



#accueil { color:#fff; }

.section { padding:2rem 0; }
#accueil .section { width:100%; text-align:center; }

#accueil .ruban { background:none; }
#accueil .section .ruban { border-top:0.12em solid rgba(255,255,255,0.42); }
#accueil #section-5 { border-bottom:0.12em solid rgba(255,255,255,0.56); }

#accueil #section-5 { z-index:9; background-image:url("images/aquarelle-couverture.jpg"); background-repeat:no-repeat; background-size:cover; background-position:50% 32%; }
#chronologie { z-index:9; background-image:url("images/aquarelle-couverture.jpg"); background-repeat:no-repeat; background-size:cover; background-position:50% 12%; }

#accueil h2 { opacity:0.92; display:block; width:84%; max-width:840px; margin:0 auto 1.6rem; font-size:1.32rem; font-weight:700; font-family:"Fira Sans Condensed"; text-align:center; text-transform:uppercase; }
#accueil p { opacity:0.84;color:#fff; width:84%; max-width:840px; margin:0 auto 1.6rem; font-size:0.96rem; line-height:1.5; }
#accueil p:last-child { margin-bottom:0; }
#accueil p.introduction { font-weight:600; font-size:1.08rem; line-height:1.4; }
#accueil p.instructions { font-weight:500; font-size:0.84rem; font-style:italic; }


#accueil a { color:#fff; opacity:0.84; }
#accueil a:hover { color:#fff; opacity:1; }
#accueil a.indication { text-decoration:none; font-size:0.96rem; }

#accueil svg path { fill:#fff; }
#accueil svg .texte path,
#accueil svg .icone path { fill:#fff; }
#accueil a:focus svg .texte path,
#accueil a:hover svg .texte path,
#accueil a:focus svg .icone path,
#accueil a:hover svg .icone path { fill:#fff; }

#accueil .section.titre { margin-top:12vh; }
#accueil .section.titre h1 { display:inline-block; width:96%; margin:0 0 0.4rem; font-size:4rem; font-weight:900; font-family:"Fira Sans"; text-transform:uppercase; line-height:1; }
#accueil .section.titre p { display:inline-block; margin:0; font-size:1.32rem; font-weight:400; font-family:"Fira Sans Condensed"; text-transform:uppercase; }
#accueil .section.introduction a { font-weight:500; font-size:0.84rem; }
#accueil .section.explications { padding-top:16vh; padding-bottom:16vh; }
#accueil .section.explications:last-child { padding-bottom:96vh; }
#accueil .section.interface { padding:0; }

#accueil #periodes ul { height: 3rem; overflow: visible; }

#accueil .bulle { position:absolute; top:0; width:0; height:0; }
#accueil .bulle .appendice { position:absolute; top:-1.4rem; left:-0.5rem; }
#accueil .bulle .phylactere { position:absolute; top:-4.2rem; width:6rem; text-transform:uppercase; }
#accueil .bulle .phylactere span { width:auto; font-size:0.76rem; text-align:center; }
#accueil .bulle .phylactere .evenement { position:relative; bottom:0.2em; font-weight:700;  }

#accueil .bulle.fondation { left:13.8%; right:auto; transform:rotate(12deg); }
#accueil .bulle.aujourdhui { right:3.8%; left:auto; transform:rotate(-12deg); }
#accueil .bulle.fondation .phylactere { left:-2.4rem; right:3rem; transform: rotate(-12deg); }
#accueil .bulle.aujourdhui .phylactere { left:-4.2rem; right:3rem; transform: rotate(12deg); }

#accueil .periode .milieu { display:none !important; }

#accueil .carte { height:12rem; width:100%; border-top:1px solid #c0c0c0; border-bottom:1px solid #c0c0c0; background-image:url("carte.jpg"); background-size:cover; background-position:center; background-repeat:no-repeat; }
#accueil .fixe .carte { height:6rem; transition: height 1s; }


#accueil #photos { position:relative; bottom:0; overflow:hidden; overflow-x:scroll; z-index:-1; }
#accueil #photos, #accueil #photos li { height:9rem; }
#accueil #photos .photo { min-width:12rem; pointer-events:none; }
#accueil.etape-1 { padding-top:134px /* 8.4rem; */ }
#accueil.etape-2 { padding-top:282px; /* 7.6rem; */ }
#accueil.etape-3 { padding-top:570px; }

#section-5.fixe { position:fixed; top:-1px; left:0; right:0; margin:0; }
#section-7.fixe { position:fixed; top:calc(4.6rem - 2px); left:0; right:0; margin:0; }
#section-9.fixe { position:fixed; top:calc(10.6rem - 3px); left:0; right:0; margin:0; }

#accueil .apercu {	position:relative; border-top:0.12em solid rgba(255,255,255,0.72); border-bottom:0.12em solid rgba(255,255,255,0.72); padding:1.6rem 0; z-index:-1; }
#accueil .apercu p { font-size:0.92rem; opacity:0.6; font-weight:700; text-transform:uppercase; }

#accueil .ruban li {
	background:rgba(0,0,0,0.16);
}
#accueil #periodes li:hover {
	background:rgba(0,0,0,0.02);
}


/* DISPOSITION */

#cadre { position:fixed; top:0; bottom:0; left:0; right:0; z-index:0; background:#ebeaea; }
#haut { position:fixed; top:0; left:0; right:0; z-index:2; }
#bas { position:fixed; bottom:0; left:0; right:0; z-index:1; }
#bas .ruban { border-top:1px solid #c0c0c0; }
#haut .ruban { border-bottom:1px solid #c0c0c0;  }

.ruban { position:relative; overflow:visible; width:100%; }
.ruban .gauche { float:left; text-align:left; }
.ruban .droite { float:right; text-align:right; }
.ruban ul { list-style:none; margin:0; padding:0; white-space:nowrap; }
.ruban li { display:inline-block; margin:0; padding:0; }
.ruban div { display:inline-block; margin:0; padding:0; }
.ruban span { display:inline-block; white-space:nowrap; }
.ruban.off { display:none; }


/* BARRE DE NAVIGATION */
/*
#navigation { overflow:hidden; }
#navigation, #navigation li { height:5.2rem; line-height:5.2rem;}

#navigation { background:#f7f6f6; font-size:0.96rem; font-weight:500; }
#navigation a { display:inline-block; overflow:hidden; height:100%; text-decoration:none; }

#navigation .langues { margin-left:0.2rem; }
#navigation .langues li { min-width:1.6rem; }
#navigation .langues li a { padding:0 0.8rem; text-transform:uppercase; }
#navigation .langues li a .facultatif { display:none; }
body.fr #navigation .langues li.fr,
body.en #navigation .langues li.en { display:none; }

#navigation .menu { display:none; margin-left:0.2rem; }
#navigation .menu a { display:inline-block; }
#navigation .menu .icone { position:relative; bottom:0.08rem; }
#navigation .menu svg { height:1.2rem; width:auto;}
#navigation .menu .texte { display:none; text-transform:uppercase; padding:0 0.6rem 0 0.2rem; }

#navigation .centre { position:absolute; top:0; left:0; right:0; height:0; overflow:visible; text-align:center; }
#navigation .titre a { display:inline-block; position:relative; right:11.2vw; padding:0 1.2rem; }
#navigation .titre a h1 { margin:0; font-size:1.4rem; font-weight:700; text-transform:uppercase; }

#navigation .partenaires { margin-right:0.2rem; }
#navigation .partenaires .nom { display:none; }
#navigation .partenaires a .logo { padding:0 0.8rem; }
#navigation .partenaires svg { height:3.2rem; width:auto; }

@media only screen and (max-width:960px) {
	#navigation .partenaires { margin-right:0.8rem; }
	#navigation .partenaires a,
	#navigation .partenaires a span { width:4.2rem; }
	#navigation .partenaires a .logo { padding:0; }
	#navigation .partenaires svg .texte { display:none; }
	#navigation .ville-de-quebec .logo svg { position:relative; top:0.6rem; right:3rem; height:4.2rem; }
	#navigation .musees-numeriques .logo svg { position:relative; top:0.2rem; left:0.4rem; height:3rem; }
}
*/

/* RUBANS SIÈCLES ET PÉRIODES */

#temps, #temps li { height:1.6rem; line-height:1.2rem; color:#fff; }
#temps li { display:block; overflow:hidden; float:left; width:20%; text-align:center; border-right:1px solid #c0c0c0; }
#temps li:first-child { width:12%; text-indent:-100rem; }
#temps li:last-child { width:8%; text-indent:-100rem; border-right:0; }
#temps span { width:100%; text-align:center; font-size:0.92rem; letter-spacing:0.04rem; cursor:default; }
#temps span sup { position:relative; top:0.1em; font-size:0.72rem; }

#temps,
#temps li,
#accueil #temps,
#accueil #temps li {
	height:1.32rem;
}
#temps li span,
#accueil #temps li span {
	opacity:0.84;
	font-weight:400;
	font-size:1.8rem;
	line-height:0.68;
}
#temps span sup,
#accueil #temps span sup {
	position:relative;
	top:auto;
	left:0.16em;
	bottom:0.16em;
	font-weight:700;
	font-size:0.72rem;
}
#temps .ruban:first-child,
#accueil #temps .ruban:first-child {
	border-bottom-width:2px;
}

@media only screen and (max-width:640px){
	#temps span sup,
	#accueil #temps span sup { display:none; }
}


/* SIGANTURE MEP */



#signature {
	position:fixed;
	top:3.6rem;
	right:1.6rem;
	z-index:1;
	transition:top 0.3s ease-out;
	-webkit-transition:top 0.3s ease-out; 
}
#signature:hover {
	top:4rem;
}
#signature a {
	display:inline-block;
	width:4.56rem;
	height:4.24rem;
	padding:0.32rem 0.42rem;
	background:#052538;
}

#signature a svg {
	width:100%;
	height:100%;
}
#page-periode #signature {
	top:3.6rem;
}
#page-periode #signature:hover {
	top:4rem;
}




#periodes li a { background:rgba(0,0,0,0.16); }
#periodes li a:hover,
#accueil #periodes li a:hover,
#periodes li a:focus { background:none; }


#periodes, #periodes li { height:3rem; line-height:3rem; color:#fff; }
#periodes ul { font-size:0; max-height:3rem; }
#periodes li { display:inline-block; position:relative; overflow:hidden; text-align:center; border-right:1px solid #c0c0c0; }
#periodes li:nth-child(1) { width:14%; }
#periodes li:nth-child(2) { width:30%; }
#periodes li:nth-child(3) { width:6%; }
#periodes li:nth-child(4) { width:10%; }
#periodes li:nth-child(5) { width:11%; }
#periodes li:nth-child(6) { width:10%; }
#periodes li:nth-child(7) { width:7%; }
#periodes li:nth-child(8) { width:12%; }
#periodes li:last-child { border-right:0; }

#periodes li a { display:block; position:absolute; top:0; left:0; right:0; bottom:1px; text-align:center; font-weight:400; font-size:0.76rem; opacity:1; }
#periodes li a:hover,
#periodes li a:focus { background:none; }
#periodes li a .milieu { display:none; position:fixed; width:100%; top:6rem; left:0; right:0; }
#periodes li a:hover .milieu { display:inline-block; }

#periodes li a .etiquette { display:inline-block; padding:1.4rem 1.4rem 1.6rem; color:#fff; background-image:url("images/aquarelle-couverture.jpg"); background-size:600%; background-position:50% 00%; background-repeat:no-repeat; border:1px solid #c0c0c0; }
#periodes li a .etiquette span { display:block; clear:both; line-height:1.2; }
#periodes li a .etiquette .annees { font-size:0.84rem; font-weight:300; }
#periodes li a .etiquette .nom { font-size:1.42rem; font-weight:700; }


#periodes li.on a,
#periodes li.on a:focus,
#periodes li.on a:hover { opacity:1; background:none; }
#periodes li.on a .etiquette {  }






#periodes li a span { font-family:"Fira Sans Condensed", sans-serif; font-weight:500; text-transform:uppercase; }
#periodes li a span.limites { display:none; width:100%; text-align:center; }



@media only screen and (min-width:1560px){
	#periodes li.on a span.limites { display:inline-block !important; }
	#periodes li a span.limites { display:inline-block; }
}




/* PANNEAU DE MISE EN CONTEXTE D'UNE IMAGE */

#contexte { background:#052538; }
#contexte, #contexte .fleche, #contexte .contexte { height:2rem; }
#contexte { position:absolute; bottom:2rem; left:0; right:0; z-index:0; width:100%; overflow:hidden; }
#contexte .contexte { position:absolute; bottom:0; display:flex; width:100%; }
#contexte .contexte div { flex-grow:3; overflow:hidden; }
#contexte .contexte div:first-child { flex-grow:1;  margin:0; }
#contexte .contexte div span { white-space:normal; }

#contexte .theme { display:none; position:relative; border-right:1px solid #c0c0c0; }
#contexte .theme .texture { background:#052538; }
#contexte .theme .texture,
#contexte .theme .aquarelle { z-index:-1; position:absolute; top:0; left:0; right:0; bottom:0; }
#contexte .theme .aquarelle { opacity:0.64; background-image:url("images/aquarelle-six.jpg"); background-size:cover; background-position:50% 20%; background-repeat:no-repeat; }
#contexte .theme a { opacity:0.84; display:block; min-height:100%; padding:2.4em 4vw; text-decoration:none; }
#contexte .theme a:focus, #contexte .theme a:hover { opacity:1; }

#contexte.on { height:auto; max-height:56vh; overflow-y:auto; margin-bottom:-2rem; }
#contexte.on .contexte { position:relative; height:auto; }
#contexte.on .theme { display:block;  }

#contexte .theme span { display:inline-block; width:100%; }
#contexte.on .theme .annees { color:#fff; font-size:0.92rem; padding-bottom:0.12rem; }
#contexte.on .theme .titre { margin:0; padding-bottom:0.8rem; font-size:1.6rem; font-weight:700;  }
#contexte.on .theme .intro { color:#fff; padding-bottom:0.2rem; font-size:0.92rem; line-height:1.48; }

#contexte .infos { display:block; position:relative; margin:0; color:#fff; }
#contexte .infos .texture { background:#594615; }
#contexte .infos .texture,
#contexte .infos .aquarelle { z-index:-1; position:absolute; top:0; left:0; right:0; bottom:0; }
#contexte .infos .aquarelle { opacity:0.56; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); background-image:url("images/aquarelle-trois.jpg"); background-size:cover; background-position:50% %; background-repeat:no-repeat; }

#contexte .infos span { display:none; }
#contexte .infos .titre { position:absolute; display:inline-block; overflow:hidden; width:100%; padding:0 2.4em; margin:0; text-align:center; font-size:0.92rem; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; line-height:2rem; }
#contexte.on .infos .titre { position:relative; }

#contexte.on .infos { padding:2.4em 4vw; }
#contexte.on .infos span { display:inline-block; width:100%; }
#contexte.on .infos .titre { white-space:normal; line-height:inherit; margin:0; padding:0; text-align:left; font-size:1.12rem; font-weight:400; }
#contexte.on .infos .auteur { padding-bottom:0.8rem; font-size:0.92rem; font-weight:700; }
#contexte.on .infos .intro { padding-bottom:1rem; font-size:0.92rem; line-height:1.48; }

#contexte.on .contribution { padding-bottom:0.8rem;}
#contexte.on .contribution a { display:inline-block; padding:0 0 0.8rem 0.32rem; text-decoration:none;}
#contexte.on .contribution span { display:inline-block; width:auto; padding:0; }
#contexte.on .contribution a .site { display:none; font-family:"Fira sans"; font-size:0.76rem; font-weight:900; text-transform:uppercase; }
#contexte.on .contribution a .question { display:inline; text-indent:1rem; font-size:0.92rem; font-style:italic; text-decoration:underline; }
#contexte.on .contribution svg { width:1.32rem; height:1.32rem; }

@media only screen and (min-width:1280px) {
	#contexte.on .theme { min-width:32vw; max-width: 42vw; }
}


#popup {
	display:none;
	position:fixed;
	z-index:3;
	width:100%;
	height:100%;
	top:0; left:0;
	right:0; bottom:0;
	text-align:center;
	
	
}
#popup .ombre {
	position:absolute;
	z-index:0;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:rgba(0,0,0,0.72);
}
#popup .encadre {
	display:inline-flex;
	flex-direction:column;
	position:relative;
	z-index:1;
	margin:2rem;
	background:#fff;
	padding:2.4rem;
	border:1px solid #000;
}
#popup .encadre h4 {
	display:inline-block;
	margin:0;
	font-size:2.4rem;
	font-weight:900;
	text-transform:uppercase;
}

#popup .encadre p {
	display:inline-block;
	max-width:32em;
}


#contexte.on .geolocalisation { padding-bottom:0.2rem; }
#contexte.on .geolocalisation a { position:relative; padding:0.8rem; right:0.8rem; text-decoration:none; }
#contexte.on .geolocalisation { list-style:none; margin:0; font-size:0.92rem;  }
#contexte.on .geolocalisation span { display:inline-block; width:auto; padding:0; white-space:nowrap; }
#contexte.on .geolocalisation .icone { margin-right:0.2rem; }
#contexte.on .geolocalisation .icone svg { width:2rem; height:2rem; }
#contexte.on .geolocalisation .lon { margin-left:0.6rem; }
#contexte.on .geolocalisation .lat { margin-right:0.4rem; }
#contexte.on .geolocalisation .lat:after { position:relative; left:0.6rem; content:"/"; font-size:0.76rem; }

#contexte .fleche,
#contexte .fleche a { display:block; position:-webkit-sticky; position:sticky; width:100%; height:2rem; bottom:0; left:0; text-align:right; overflow:hidden; }
#contexte .fleche span { display:inline-block; height:2rem; padding-right:0.4rem; line-height:2rem; font-weight:500; font-size:0.73rem; text-transform:uppercase; }
#contexte .fleche a .texte { display:none; position:absolute; bottom:0; right:1.6rem; padding:0 0.3rem 0 0.6rem; transition:color 0.4s; -webkit-transition:color 0.4s; }}
#contexte .fleche a .icone { position:absolute; bottom:0.1rem; right:0; padding:0 0.6rem 0 0.3rem; }
#contexte .fleche a .fermer, #contexte.on .fleche a .ouvrir { display:none; }
#contexte .fleche a .ouvrir, #contexte.on .fleche a .fermer {  display:inline-block; }
#contexte .fleche a .icone svg { fill:#fff; }

#contexte .fleche a:hover .texte,
#contexte .fleche a:focus .texte { display:inline-block; }
#contexte.on .fleche { bottom:2rem; }
#contexte .fleche a:focus svg .icone path,sdf
#contexte .fleche a:hover svg .icone path { fill:#052538; }

#contexte .credits { position:relative; top:0.6rem; padding:0.6rem 0; opacity:0.92; }
#contexte.on .infos .credits span { display:inline; width:auto; }
#contexte.on .infos .credits a { text-decoration:none; }
#contexte.on .infos .credits a:hover { text-decoration:underline; }
#contexte .credits small { font-size:0.84rem; }
#contexte .credits small.organisation { font-weight:600; margin-right:0.2rem; }

@media only screen and (max-width:720px){
	#contexte.on { max-height:72vh; }
	#contexte .contexte { flex-direction:column-reverse; }
	#contexte .contexte div, #contexte .contexte div:first-child { width:100%; max-width:100%; }
	#contexte .contexte .theme { border-right:0;  border-top:1px solid #c0c0c0;  }
	#contexte.on .fleche { position:relative; }
}
@media only screen and (max-width:640px) {
	#contexte .fleche a:hover .texte,
	#contexte .fleche a:focus .texte { display:none; }
}


/* THÈME */

#theme { z-index:0; position:absolute; left:0; right:0; bottom:calc(2rem + 24vh); height:2rem; width:100%; line-height:2rem; color:#fff; background:#052538; }
#theme .enveloppe { display:block; position:relative; height:auto; width:100%;  }

#theme .texture,
#theme .aquarelle { z-index:-1; position:absolute; top:0; left:0; right:0; bottom:0; }
#theme .aquarelle { opacity:0.64; background-image:url("images/aquarelle-six.jpg"); background-size:cover; background-position:50% 20%; background-repeat:no-repeat; }

@media only screen and (min-width:960px){
	#theme .aquarelle { background-size:cover; background-position:50% 50%; background-repeat:no-repeat; }
}
/*
#theme a { opacity:0.84; display:block; min-height:100%; padding:2.4em 4vw; text-decoration:none; }
#theme a:focus, #contexte .theme a:hover { opacity:1; }
*/


#theme .theme { position:relative; pointer-events:none; display:block; width:92%; max-width:920px; margin:0 auto; }
#theme .theme a { display:block; pointer-events:auto; }
#theme .theme span { vertical-align:top; max-width:92%; padding:0; }
#theme .theme .annees { font-size:0.92rem; padding-right:0.6em; }
#theme .titre { font-size:0.92rem; font-weight:700; padding:0 2.4em; overflow:hidden;  text-overflow:ellipsis; }
#theme .intro { display:none; }

#theme.on { height:auto; max-height:42vh; overflow-y:auto; line-height:normal; text-align:left; }
#theme.on .contexte { position:relative; height:auto; }
#theme.on .theme { padding:0 1.2em 3.2rem; text-align:left; }
#theme.on .theme span { display:inline-block; width:100%; max-width:100%; white-space:normal; }
#theme.on .annees { padding-top:1.6em;padding-bottom:0.2rem; }
#theme.on .titre { margin-left:0; padding-bottom:0.8rem; font-size:1.6rem; font-weight:700; }
#theme.on .intro { display:inline-block; white-space:normal; font-size:0.92rem; line-height:1.48; }

#theme .fleche,
#theme .fleche a { display:block; position:absolute; width:100%; height:calc(2rem - 1px); bottom:0; left:0; text-align:right; overflow:hidden; }
#theme.on .fleche, #theme.on .fleche a { position:sticky; -webkit-position:sticky; }
#theme .fleche span { display:inline-block; height:2rem; padding-right:0.4rem; line-height:2rem; font-weight:500; font-size:0.73rem; text-transform:uppercase; }
#theme .fleche a .texte { display:none; position:absolute; bottom:0; right:1.6rem; padding:0 0.3rem 0 0.6rem; }
#theme .fleche a .icone { position:absolute; bottom:0.1rem; right:0; padding:0 0.6rem 0 0.3rem; }
#theme .fleche a .fermer, #theme.on .fleche a .ouvrir { display:none; }
#theme .fleche a .ouvrir, #theme.on .fleche a .fermer {  display:inline-block; }
#theme .fleche a:hover .texte,
#theme .fleche a:focus .texte { display:inline-block; }

@media only screen and (min-width:1042px) {
	#theme .theme { margin:0 8vw; }
}
@media only screen and (max-width:640px) {
	#theme .annees { display:none; }
	#theme.on .annees { display:inline-block; }
	#theme .fleche a:hover .texte,
	#theme .fleche a:focus .texte { display:none; }
}
@media only screen and (max-width:480px) {
	#theme .titre { padding:0 1.2em; overflow:hidden; text-overflow:ellipsis; }
}



#page-theme #theme {
	
}

/* RUBAN PHOTOS */

#photos { background:#052538; overflow-y:hidden; }
#photos, #photos li { height:7.6rem; height:24vh; }
#photos .fleche span { line-height:7.2rem; }

#photos { position:absolute; bottom:2rem; left:0; right:0; z-index:1; width:100%; overflow-x:auto; }
#photos ul { display:flex; width:100%; align-items:center; }
#photos li { flex-grow:0; overflow:hidden; border-right:1px solid #929292; }
#photos li:last-child { flex-grow:1; border-right:0; }
#photos .photo { position:relative; min-width:9.6rem; min-width:32vh; }
#photos .photo a { display:inline-block; position:absolute; top:0; left:0; right:0; bottom:0; }
#photos a img { opacity:0.76; width:100%; height:auto; }
#photos a:focus img { opacity:0.92; }

#photos .photo a span { padding:0.1rem 0.4rem; font-size:2rem; font-family:"Fira Sans"; text-decoration:none; }
#photos .photo a:target,
#photos .photo a:focus {  }
#photos .photo a:target span,
#photos .photo a:focus span { }
#photos .photo a .image-info { position:absolute; display:none; top:0.6em; right:0.6em; padding:0.2em 0.8em; border:1px solid #c3c3c3; font-weight:700; font-size:0.84rem; letter-spacing:0.02em; text-transform:uppercase; background-image:url("images/aquarelle-couverture.jpg"); background-size:600%; background-position:50% 0%; box-shadow:-2px 6px 16px 6px rgba(0,0,0,0.16); -webkit-box-shadow:-2px 6px 16px 6px rgba(0,0,0,0.16); }
#photos .photo a:hover .image-info {  }
#photos .photo a.on { opacity:0.92; }
#photos .photo a.on:hover { opacity:1; }
#photos .photo a.on .image-info,
#photos .photo a:focus .image-info { display:inline-block; }
#photos .photo a.on:hover .image-info { box-shadow:-2px 6px 16px 6px rgba(0,0,0,0.08); -webkit-box-shadow:-2px 6px 16px 6px rgba(0,0,0,0.08); }
#photos .photo a.on .image-info:hover { box-shadow:none; }

#photos .periode { position:relative; overflow:visible; white-space:nowrap; font-size:0; }
#photos .periode a { display:inline-block; height:24vh; border-right:1px solid #ebebeb; background-image:url("images/aquarelle-couverture.jpg"); background-repeat:no-repeat; background-size:300%; }
#photos .periode a:hover { opacity:1; }
#photos .periode a span { }

#photos .suivante a { width:100%; text-align:right; background-position:80% 0%; }
#photos .precedente a { text-align:left; background-position:60% 0%; background-size:1200%; }
#photos .precedente .detail { display:none; }


#photos .precedente a:hover,
#photos .precedente a:focus,
#photos .precedente a:target {
	background-size:300%;
}


#photos .precedente a:hover .detail,
#photos .precedente a:focus .detail,
#photos .precedente a:target .detail { display:inline-block; }


#photos .fleche { vertical-align:top; width:3.2rem; height:100%; }
#photos .fleche span { width:100%; height:100%; line-height:7.2rem; line-height:24vh; text-align:center; }
#photos .fleche svg { width:1.6rem; height:auto; }

#photos .detail { display:inline-block; vertical-align:top; white-space:normal; width:24rem; min-width:72%; text-align:center; padding-top:calc(12vh - 3rem); }
#photos .detail span { display:inline-block; position:relative; width:100%; }
#photos .detail .annees { color:#fff; height:1.2rem; font-size:0.92rem; }
#photos .detail .nom { height:3.2rem; padding-top:0; font-weight:900; font-size:2.4rem; font-family:"Fira Sans", sans-serif; }
#photos .detail .titre { color:#fff; height:1.2rem; font-size:0.96rem; text-transform:uppercase; }
#photos .precedente .detail { }
#photos .precedente .detail span { right:1rem; }
#photos .suivante .detail span { left:1rem; }

#cadre img { width:100%; height:100%; object-fit:cover; object-position:center; }

#cadre.image3344 img { object-position:46% 100%; }
#cadre.image3345 img { object-position:32% 100%; }
#cadre.image3346 img { object-position:50% 100%; }
#cadre.image3347 img { object-position:32% 100%; }
#cadre.image3348 img { object-position:56% 100%; }
#cadre.image3349 img { object-position:76% 100%; }
#cadre.image3350 img { object-position:48% 100%; }
#cadre.image3351 img { object-position:76% 100%; }
#cadre.image3352 img { object-position:56% 100%; }
#cadre.image3353 img { object-position:84% 100%; }
#cadre.image3354 img { object-position:42% 100%; }
#cadre.image3355 img { object-position:4% 100%; }
#cadre.image3356 img { object-position:64% 100%; }
#cadre.image3357 img { object-position:84% 100%; }
#cadre.image3358 img { object-position:32% 100%; }
#cadre.image3359 img { object-position:72% 100%; }
#cadre.image3360 img { object-position:64% 100%; }
#cadre.image3361 img { object-position:6% 100%; }
#cadre.image3362 img { object-position:46% 100%; }
#cadre.image3363 img { object-position:56% 100%; }
#cadre.image3364 img { object-position:52% 56%; }
#cadre.image3365 img { object-position:50% 22%; }
#cadre.image3366 img { object-position:58% 40%; }
#cadre.image3367 img { object-position:80% 64%; }
#cadre.image3368 img { object-position:52% 32%; }
#cadre.image3369 img { object-position:50% 36%; }
#cadre.image3370 img { object-position:46% 42%; }
#cadre.image3371 img { object-position:38% 42%; }
#cadre.image3372 img { object-position:42% 46%; }
#cadre.image3373 img { object-position:54% 80%; }
#cadre.image3374 img { object-position:0% 52%; }
#cadre.image3375 img { object-position:48% 40%; }
#cadre.image3376 img { object-position:58% 56%; }
#cadre.image3377 img { object-position:36% 40%; }
#cadre.image3378 img { object-position:40% 52%; }
#cadre.image3379 img { object-position:50% 52%; }
#cadre.image3380 img { object-position:22% 68%; }
#cadre.image3381 img { object-position:32% 40%; }
#cadre.image3382 img { object-position:52% 72%; }
#cadre.image3383 img { object-position:38% 38%; }
#cadre.image3384 img { object-position:42% 64%; }
#cadre.image3385 img { object-position:38% 52%; }
#cadre.image3386 img { object-position:22% 42%; }
#cadre.image3387 img { object-position:62% 92%; }
#cadre.image3388 img { object-position:74% 52%; }
#cadre.image3389 img { object-position:44% 32%; }
#cadre.image3390 img { object-position:70% 42%; }
#cadre.image3391 img { object-position:48% 100%; }
#cadre.image3392 img { object-position:54% 2%; }
#cadre.image3393 img { object-position:14% 32%; }
#cadre.image3394 img { object-position:46% 0%; }
#cadre.image3395 img { object-position:52% 22%; }
#cadre.image3396 img { object-position:4% 42%; }
#cadre.image3397 img { object-position:32% 28%; }
#cadre.image3398 img { object-position:56% 48%; }
#cadre.image3399 img { object-position:76% 12%; }
#cadre.image3400 img { object-position:38% 36%; }
#cadre.image3401 img { object-position:12% 32%; }
#cadre.image3402 img { object-position:54% 66%; }
#cadre.image3403 img { object-position:76% 32%; }
#cadre.image3404 img { object-position:16% 100%; }
#cadre.image3405 img { object-position:36% 18%; }
#cadre.image3406 img { object-position:18% 32%; }
#cadre.image3407 img { object-position:58% 100%; }
#cadre.image3408 img { object-position:50% 72%; }
#cadre.image3409 img { object-position:51% 56%; }
#cadre.image3410 img { object-position:52% 58%; }
#cadre.image3411 img { object-position:48% 52%; }
#cadre.image3412 img { object-position:50% 52%; }
#cadre.image3413 img { object-position:50% 50%; }
#cadre.image3414 img { object-position:32% 72%; }
#cadre.image3415 img { object-position:30% 100%; }
#cadre.image3416 img { object-position:78% 92%; }
#cadre.image3417 img { object-position:56% 92%; }
#cadre.image3418 img { object-position:72% 62%; }
#cadre.image3419 img { object-position:40% 100%; }
#cadre.image3420 img { object-position:44% 100%; }
#cadre.image3421 img { object-position:90% 48%; }
#cadre.image3422 img { object-position:52% 100%; }
#cadre.image3423 img { object-position:100% 92%; }

#cadre.image2500 img { object-position:88% 100%; }
#cadre.image2501 img { object-position:50% 42%; }
#cadre.image2502 img { object-position:42% 72%; }
#cadre.image2503 img { object-position:50% 100%; }
#cadre.image2504 img { object-position:42% 96%; }
#cadre.image2505 img { object-position:16% 100%; }
#cadre.image2506 img { object-position:68% 56%; }
#cadre.image2507 img { object-position:50% 42%; }
#cadre.image2508 img { object-position:56% 100%; }
#cadre.image2509 img { object-position:78% 92%; }
#cadre.image2510 img { object-position:66% 100%; }
#cadre.image2511 img { object-position:52% 72%; }
#cadre.image2512 img { object-position:72% 92%; }
#cadre.image2513 img { object-position:56% 100%; }
#cadre.image2934 img { object-position:42% 100%; }
#cadre.image2935 img { object-position:42% 86%; }
#cadre.image2936 img { object-position:68% 76%; }
#cadre.image2937 img { object-position:26% 90%; }
#cadre.image2998 img { object-position:74% 72%; }
#cadre.image2999 img { object-position:42% 78%; }
#cadre.image3000 img { object-position:46% 68%; }
#cadre.image3001 img { object-position:42% 100%; }
#cadre.image3002 img { object-position:84% 90%; }
#cadre.image3003 img { object-position:42% 100%; }

#cadre .afficher { position:absolute; top:2rem; background:#594615; }
#cadre .afficher a { display:inline-block; cursor:pointer; text-decoration:none; padding:0.8em 1em; box-shadow:-2px 6px 16px 6px rgba(0,0,0,0.16); -webkit-box-shadow:-2px 6px 16px 6px rgba(0,0,0,0.16); background-image:url("images/aquarelle-couverture.jpg"); background-size:600%; background-position:50% 0%; background-repeat:no-repeat; border:1px solid #c0c0c0; }
#cadre .afficher .info { font-weight:500; font-size:0.92rem; text-transform:uppercase; }
#cadre .afficher a:hover,
#cadre .afficher a:active { opacity:1; box-shadow:-2px 6px 16px 6px rgba(0,0,0,0.08); -webkit-box-shadow:-2px 6px 16px 6px rgba(0,0,0,0.08); }
#cadre .afficher a:hover .info { display:inline-block; }
#cadre .afficher svg { width:2.4rem; height:2.4rem; }
#cadre .retour { left:1.6rem; text-align:left;  }
#cadre .pleinecran { right:1.6rem; text-align:right; }


/* RUBAN PÉRIODE COURANTE */

#periode, #periode li, #periode .fleche { color:#fff; height:2rem; line-height:2rem; }
#periode a:hover, #periode a:focus { opacity:1; }
#periode { background:#000; background: linear-gradient(180deg, rgba(135,168,167,1) 0%, rgba(37,81,108,1) 64%, rgba(0,41,71,1) 92%); }
#periode .aquarelle { width:100%; min-width:100%; opacity:0.84; background-image:url("images/aquarelle-couverture.jpg"); background-repeat:no-repeat; background-size:cover; background-position:50% 0%; }

#periode .periode { z-index:1; }
#periode { width:100%; max-height:72vh; overflow:hidden; text-align:center; z-index:2; }
#periode .periode-infos { display:inline-block; }
#periode .periode span { padding:0 0.4em; font-size:0.92rem; }
#periode .annees { display:none; }
#periode .nom { display:inline-block; margin:0; padding-top:0; font-weight:700; font-size:0.92rem; font-family:"Fira Sans", sans-serif; text-transform:uppercase; }
#periode .titre { text-transform:uppercase; }
#periode .infos { display:inline-block; text-align:center; padding: 0 2.4em; overflow:hidden; text-overflow:ellipsis; }
#periode .infos a { text-decoration:none; }
#periode .intro, #periode .themes { display:none; }

#periode.on { overflow-y:auto; }
#periode.on,
#periode.on li { height:auto; line-height:normal; }
#periode.on .contexte { position:relative; height:auto; }
#periode.on .annees { display:inline-block; width:100%; }
#periode.on .nom { margin:0; font-size:4.2rem; font-weight:900; font-family:"Fira Sans", sans-serif; text-transform:uppercase; }
#periode.on .titre { font-size:1.12rem; text-transform:uppercase; }
#periode.on .infos { padding:0 0 1.2rem; }
#periode.on .infos span { width:100%; }
#periode.on .infos .annees { color:#fff; padding-top:calc(2rem + 8vh); }
#periode.on .infos .titre { color:#fff; }
#periode.on .intro { display:block; width:100%; max-width:42rem; margin:0 auto; padding-bottom:3.2rem; }
#periode.on .intro p { padding:0 1.6em 1.2em; font-size: 1.02rem; font-style:italic; line-height:1.42; }

#periode:hover .infos .nom,
#periode:hover .infos .titre { color:#052538; transition:color 0.4s; -webkit-transition:color 0.4s; } }
#periode.on:hover .infos .nom,
#periode.on:hover .infos .titre { color:inherit; }

#periode.on .themes { display:block; position:relative; width:100%; max-width:960px; margin:0 auto 3.2rem; }
#periode.on .themes a { display:inline-block; text-decoration:none; }
#periode.on .themes ul { position:relative; white-space:normal; padding:5.6rem 0 3.2rem; z-index:2; }
#periode.on .themes ul li { display:inline-block; vertical-align:top; width:100%; max-width:24rem; margin:2rem 2rem; }

#periode.on .themes span { white-space:normal; }
#periode.on .themes .annees { color:#fff; font-size:0.84rem; padding-top:0.6rem; padding-bottom:0.4rem;  }
#periode.on .themes .titre { display:inline-block; margin:0; font-family:"Fira Sans"; font-weight:900; font-size:1.6rem; text-transform:none; padding-bottom:0.6rem; }
#periode.on .themes .intro { color:#fff; line-height:1.42; padding-bottom:0.8em; }

@media only screen and (max-width:640px){
	#periode.on .periode_1 .infos .nom { font-size:13vw; }
	#periode.on .periode_2 .infos .nom { font-size:13vw; }
	#periode.on .periode_3 .infos .nom { font-size:11vw; }
	#periode.on .periode_4 .infos .nom { font-size:11vw; }
	#periode.on .periode_5 .infos .nom { font-size:17vw; }
	#periode.on .periode_6 .infos .nom { font-size:12vw; }
	#periode.on .periode_7 .infos .nom { font-size:11vw; }
	#periode.on .periode_8 .infos .nom { font-size:15vw; }
}


#periode .parcours { position:absolute; left:50%; height:0; overflow:visible;  }
#periode .parcours span { padding:0; background:none; font-weight:500; font-size:0.72rem; text-transform:uppercase; text-decoration:none; }
#periode.on #depart { top:0; width:0; height:0; margin:0; padding:0; overflow:visible; }
#periode.on #depart a { position:relative; height:4rem; width:4rem; right:2rem; }
#periode .parcours .haut { position:absolute; top:0; left:calc(50% - 0.6rem); }
#periode .parcours .haut svg { width:1.2rem; height:1.2rem; }
#periode .parcours .texte { width:100%; padding: 1.6rem 0; text-align:center; }
#periode.on #arrivee { bottom:0; width:0; height:0; margin:0; padding:0; overflow:visible; }
#periode.on #arrivee a { position:relative; width:6rem; right:3rem; }
#periode .parcours .puce { position:absolute; top:-0.2rem; left:calc(50% - 1rem); }
#periode .parcours .puce svg { position:relative; bottom:1rem;width:2rem; height:2rem; }
#periode .themes:after { content:""; position:absolute; top:0; bottom:0; left:50%; right:50%; border-right:1px dashed #fff; opacity:0.42; }
			
#periode .fleche,
#periode .fleche a { border:0; outline:0; position:-webkit-sticky; position:sticky; display:block; width:100%; height:2rem; bottom:0; left:0; text-align:right; overflow:hidden; z-index:2; }

#periode .fleche span { display:inline-block; height:2rem; padding-right:0.4rem; line-height:2rem; font-weight:500; font-size:0.73rem; text-transform:uppercase; }
#periode .fleche a .texte { display:none; position:absolute; bottom:0; right:1.6rem; padding:0 0.3rem 0 0.6rem; }
#periode .fleche a .icone { position:absolute; bottom:0.1rem; right:0; padding:0 0.6rem 0 0.3rem; }
#periode .fleche a .fermer, #periode.on .fleche a .ouvrir { display:none; }
#periode .fleche a .ouvrir, #periode.on .fleche a .fermer {  display:inline-block; }
#periode .fleche a:hover .texte,
#periode .fleche a:focus .texte { display:inline-block; }
				
@media only screen and (min-width:946px) {
	#periode.on .themes ul li { margin:0 2rem; }
	#periode.on .themes ul li:nth-child(odd) { padding-top:6rem; }
	#periode.on .themes ul li:nth-child(even):nth-last-child(2)  { position:relative; right:14rem; }
}
@media only screen and (max-width:720px) {
	#periode.on .themes ul li { margin:2rem 0; }
}
@media only screen and (max-width:640px) {
	#periode .fleche a:hover .texte,
	#periode .fleche a:focus .texte { display:none; }
}

#carte { display:block; width:100%; height:100%; }
#texture { display:block; position:absolute; top:0; right:0; bottom:0; left:0; background:url("texture-carte.png") repeat; opacity:0.5; pointer-events:none !important; }
#cadre .affichage { position:absolute; top:0; right:0; bottom:0; left:0; }
#page-periode #cadre.on .affichage,
#page-theme #cadre.on .affichage { width:0; height:0; bottom:auto; right:auto; }
#cadre .retour_image { position:absolute; top:0; right:0; bottom:0; left:0;  }