/*
 * Guide illustre (template page-slider.php).
 * Genere depuis /slider/style.css: memes declarations, selecteurs portes
 * sous .guide-illustre pour ne pas fuir sur le header, le menu et le footer.
 */

/* Issu de html/body du statique: height/overflow retires, la page est
   ici integree dans le theme et ne doit pas gerer le defilement. */
/* La page est autonome (pas de header/footer du site): on reprend le reset
   html/body de la page statique, sinon les marges par defaut du navigateur
   laissent un lisere blanc autour des ecrans. */
body.page-slider {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    color: rgb(39, 36, 35);
    box-sizing: border-box;
    position: relative;
}

body.page-slider #primary,
body.page-slider #main {
    margin: 0;
    padding: 0;
}

.guide-illustre { font-family: "Source Sans Pro"; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; position: relative; }
.guide-illustre { width: 100%; overflow-x: hidden; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; color: rgb(39, 36, 35); margin: 0; box-sizing: border-box; position: relative; }
.guide-illustre h1,
.guide-illustre h2,
.guide-illustre h3,
.guide-illustre h4 { display: inline-block; position: relative; font-family: "metropolis"; font-weight:bold; break-inside: avoid; page-break-inside: avoid; clear: both;margin-bottom: 0; }
.guide-illustre__section,
.guide-illustre__ecran { display: block; position: relative; clear: both; overflow: hidden; }
/* Dans le statique, article>div visait TOUS les div enfants: le bloc de
   contenu comme le pied (div.bottom), qui surchargeait ensuite. On garde
   les deux ici, sinon le pied perd son positionnement absolu. */
.guide-illustre__contenu,
.guide-illustre__pied { position: absolute; z-index: 3; left: 10%; top: 50%; transform: translateY(-50%); width: 40%; }
.guide-illustre__contenu>h2>span { display: block; position: absolute; font-size: 150px;font-family:'Source Sans Pro', sans-serif; top: 50%; transform: translateY(-50%); }
.guide-illustre__ecran>.guide-illustre__img { display: block; max-height: 100%; width: 100%; position: absolute; bottom: 0; transition: all 1s ease-in-out; }
.guide-illustre__ecran>.guide-illustre__img--first { position: relative; clear: both; overflow: hidden; left: auto; right: auto; top: auto; bottom: auto; }
.guide-illustre__ecran>.guide-illustre__img--left { left: -10%; opacity: 0; }
.guide-illustre__ecran>.guide-illustre__img--right { right: -10%; opacity: 0; }
.guide-illustre__ecran>.guide-illustre__img--first.guide-illustre__img--left { left: -5%; opacity: 0; }
.guide-illustre__ecran>.guide-illustre__img--first.guide-illustre__img--right { right: -5%; opacity: 0; }
.guide-illustre__ecran.is-active>.guide-illustre__img--left { left: 0%; opacity: 1; }
.guide-illustre__ecran.is-active>.guide-illustre__img--right { right: 0%; opacity: 1; }
.guide-illustre ul,
.guide-illustre p { margin: 0; }

/* Le statique conserve le retrait des sous-listes herite du theme
   (li > ul { margin-left: 1.5em }): le margin:0 ci-dessus l'ecrasait. */
.guide-illustre li > ul,
.guide-illustre li > ol { margin-bottom: 0; margin-left: 1.5em; }
.guide-illustre a { color: rgb(39, 36, 35); }
.guide-illustre a.btn { display: inline-block; background-color: rgb(39, 36, 35); padding: 10px 20px; color: #FFF; text-decoration: none; text-transform: uppercase; font-family: "metropolis"; font-weight:bold; font-size: 14px; }
.guide-illustre h1,
.guide-illustre h2 {
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
	font-size: 38px;
}
.guide-illustre h3 {
	display: block;
    text-transform: uppercase;
    font-weight: bold;
    font-family: sans-serif;
	font-size: 18px;
}
.guide-illustre__ecran--1 {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#40c0f0+0,2e65ae+100 */
	background: #40c0f0; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #40c0f0 0%, #2e65ae 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #40c0f0 0%,#2e65ae 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #40c0f0 0%,#2e65ae 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40c0f0', endColorstr='#2e65ae',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.guide-illustre__ecran--2 {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#eb8f58+0,f6c49b+100 */
	background: #eb8f58; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #eb8f58 0%, #f6c49b 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #eb8f58 0%,#f6c49b 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #eb8f58 0%,#f6c49b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb8f58', endColorstr='#f6c49b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.guide-illustre__ecran--3 {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e3bddb+1,ce9bc6+100 */
	background: #e3bddb; /* Old browsers */
	background: -moz-linear-gradient(45deg,  #e3bddb 1%, #ce9bc6 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg,  #e3bddb 1%,#ce9bc6 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg,  #e3bddb 1%,#ce9bc6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3bddb', endColorstr='#ce9bc6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.guide-illustre__ecran--4 {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#50b9a4+44,20ad7c+100 */
	background: #50b9a4; /* Old browsers */
	background: -moz-linear-gradient(top,  #50b9a4 44%, #20ad7c 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #50b9a4 44%,#20ad7c 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #50b9a4 44%,#20ad7c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#50b9a4', endColorstr='#20ad7c',GradientType=0 ); /* IE6-9 */
}
.guide-illustre__ecran--5 {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#71bbe9+0,4c8dcb+100 */
	background: #71bbe9; /* Old browsers */
	background: -moz-linear-gradient(left,  #71bbe9 0%, #4c8dcb 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #71bbe9 0%,#4c8dcb 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #71bbe9 0%,#4c8dcb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#71bbe9', endColorstr='#4c8dcb',GradientType=1 ); /* IE6-9 */
}
.guide-illustre__ecran--6 {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#424c9b+0,293383+100 */
	background: #424c9b; /* Old browsers */
	background: -moz-linear-gradient(45deg,  #424c9b 0%, #293383 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg,  #424c9b 0%,#293383 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg,  #424c9b 0%,#293383 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#424c9b', endColorstr='#293383',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.guide-illustre__ecran--1>.guide-illustre__contenu { width:30%; right:5%; left:auto; }
.guide-illustre__ecran--3>.guide-illustre__contenu { right:10%; left:auto; }
.guide-illustre__ecran--4>.guide-illustre__contenu { width:30%; }
.guide-illustre__ecran--5>.guide-illustre__contenu { right:10%; left:auto; }
.guide-illustre__ecran--6>.guide-illustre__contenu { width:40%; }
.guide-illustre__ecran--2>.guide-illustre__contenu>h2>span { right:-100px; }
.guide-illustre__ecran--3>.guide-illustre__contenu>h2>span { left:-100px; }
.guide-illustre__ecran--4>.guide-illustre__contenu>h2>span { right:-100px; }
.guide-illustre__ecran--5>.guide-illustre__contenu>h2>span { left:-100px; }
.guide-illustre__ecran--6>.guide-illustre__contenu>h2 { font-size: 22px; }

/* Dernier ecran: l'espacement d'origine reposait sur des <br/> saisis dans le
   champ WYSIWYG, que l'editeur supprime a chaque enregistrement. On le porte
   ici en marges pour que la mise en page ne depende plus du contenu.
   Les <br/> eventuellement presents sont neutralises (hauteur nulle). */
.guide-illustre__ecran--6 .guide-illustre__contenu h2 { display: block; margin-top: 33px; }
.guide-illustre__ecran--6 .guide-illustre__contenu h2:first-child { margin-top: 0; }
.guide-illustre__ecran--6 .guide-illustre__contenu a.btn { margin-top: 36px; }
.guide-illustre__ecran--6 .guide-illustre__contenu p { margin: 0; }
.guide-illustre__ecran--6 .guide-illustre__contenu br { display: none; }
.guide-illustre__ecran--6>.guide-illustre__pied { left:10%; bottom: 20px; transform:none; top:auto; width:100%; color: rgb(133,133,133); }
@media screen and (max-width: 1600px) {
	body.page-slider, body.page-slider .guide-illustre { font-size: 14px; }
.guide-illustre h1,
.guide-illustre h2 { font-size: 28px; }
.guide-illustre h3 { font-size: 16px; }
.guide-illustre__ecran--6>.guide-illustre__contenu>h2 { font-size: 18px; }
.guide-illustre__contenu>h2>span { font-size: 100px; }
.guide-illustre__ecran--2>.guide-illustre__contenu>h2>span { right:-70px; }
.guide-illustre__ecran--3>.guide-illustre__contenu>h2>span { left:-70px; }
.guide-illustre__ecran--4>.guide-illustre__contenu>h2>span { right:-70px; }
.guide-illustre__ecran--5>.guide-illustre__contenu>h2>span { left:-70px; }
}
@media screen and (max-width: 1150px) {
	body.page-slider, body.page-slider .guide-illustre { font-size: 12px; }
.guide-illustre h1,
.guide-illustre h2 { font-size: 22px; }
.guide-illustre h3 { font-size: 14px; }
.guide-illustre__ecran--6>.guide-illustre__contenu>h2 { font-size: 14px; }
.guide-illustre__contenu>h2>span { font-size: 70px; }
.guide-illustre__ecran--2>.guide-illustre__contenu>h2>span { right:-50px; }
.guide-illustre__ecran--3>.guide-illustre__contenu>h2>span { left:-50px; }
.guide-illustre__ecran--4>.guide-illustre__contenu>h2>span { right:-50px; }
.guide-illustre__ecran--5>.guide-illustre__contenu>h2>span { left:-50px; }
}
@media screen and (max-width: 1000px) {
.guide-illustre__contenu,
.guide-illustre__pied { position: relative; left: auto !important; right: auto !important; top: auto !important; transform: none; width:100% !important; padding: 30px 20px 20px 20px; clear: both; overflow: hidden; }
.guide-illustre__contenu>h2 { max-width: calc(100% - 30px); }
.guide-illustre__ecran--2>.guide-illustre__contenu>h2>span,
.guide-illustre__ecran--3>.guide-illustre__contenu>h2>span,
.guide-illustre__ecran--4>.guide-illustre__contenu>h2>span,
.guide-illustre__ecran--5>.guide-illustre__contenu>h2>span { right:-40px; left: auto; }

}