:root{--noir: black; --blanc: white; --alphaZero: rgba(0,0,0,0); --alphaMoiter: rgba(0,0,0,0.8);}*{box-sizing: content-box; margin: 0;}body{overflow-x: hidden; width: 100vw; background-color: var(--noir);}@font-face{font-family: 'Grunge'; src: url(../media/fonts/grunge_marker/Grunge\ Marker.ttf) format('truetype');}@font-face{font-family: 'Handwriting-black-draft'; src: url(../media/fonts/handwriting_black_draft/handwriting-black-draft_DEMO.otf) format('opentype');}h1, .h1{font-family: 'Grunge'; font-size: 60px; font-weight: bold; color: var(--noir);}h2, .h2{font-family: 'Grunge'; font-size: 50px; font-weight: bold; color: var(--noir);}h3, .h3{font-family: 'Grunge'; font-size: 40px; font-weight: bold; color: var(--noir);}h4, .h4{font-family: 'Grunge'; font-size: 30px; font-weight: bold; color: var(--noir);}p{font-family: 'Handwriting-black-draft'; font-size: 24px; color: var(--noir);}/*Header*/.header{overflow-x: hidden; background-image: url(../media/img/img_arriere_plan/scene-3-chapitre3.webp); background-size: cover; background-position: center; background-repeat: repeat-y; width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: space-between;}.header h1{font-size: 8vmin; align-self: center; color: var(--blanc); padding-left: 4vmin; text-shadow: 5px 5px var(--noir);}.header p{width: 80%; text-align: center; color: var(--blanc); font-family: 'Grunge'; font-size: 1.8vmin; line-height: 6vmin;}.header p em{font-family: 'Grunge'; color: var(--noir); text-shadow: 0 0 10px var(--blanc);}.header p.description{font-size: 2vmin; background-color: var(--alphaMoiter); padding: 1.5vmin; border-radius: 25px; backdrop-filter: blur(2px); width: 50vw; height: auto; text-align: center; line-height: 2em;}.header p.description.bas{padding: 1vw 10vw; width: 80vw; height: auto; border-radius: 10px;}.header .down{display: flex; flex-direction: column; align-items: center; margin-top: 25vh;}.header .fleche-down{width: 10vw; filter: drop-shadow(0 0 10px var(--blanc));}@media screen and (max-width: 650px){.header h1{align-self: flex-start;}.header{height: 120vh;}.header .fleche-down{width: 25vw;}}@media screen and (max-width: 1200px){.header p, .header p.description{font-size: 5vmin; line-height: 5vmin;}}/*Sections*/section div{/*border: 1px solid blue;*/}section{overflow: hidden; /*border: 1px solid red;*/ width: 100vw; height: 100vh; background-size: cover; position: relative;}.textBox{top: 5vh; width: 60vw; height: auto; position: absolute; left: 50%; transform: translateX(-50%); line-height: 5vmin; z-index: 5;}.textBox .text{font-size: 3vmin; text-align: left; text-shadow: 0 0 10px var(--blanc); letter-spacing: 0.05em;}.black .textBox .text{color: var(--blanc); text-align: left; text-shadow: 0 0 10px var(--noir); letter-spacing: 0.1em;}@media screen and (max-width: 1200px){.textBox .text{font-size: 6vmin; line-height: 6vmin;}#chapitre6 .textBox .text{font-size: 10vw; line-height: 8vmin;}}/*Chapitre 1*/#chapitre1{background-image: url(../media/img/img_arriere_plan/bg_chap1-2.webp); background-repeat: repeat-x; overflow: hidden;}#chapitre1 .textBox{text-shadow: 0 0 10px var(--blanc);}/*#chapitre1.bgMove{animation-play-state: running; animation: chap1BGMove; animation-duration: 6s;}#chapitre1.bgMoveStop{animation-play-state: paused;}@keyframes chap1BGMove{0%{background-position: 0 0;}100%{background-position: -300px 0;}}*/#chapitre1 .sprite{bottom: 6vh; right: 15vw; position: absolute; width: 25vw; height: 25vw; z-index: 2;}#chapitre1 .sol-1{position: absolute; background-image: url(../media/img/img_elements_visuels/chap1-2/chap1-2_sol-devant.webp); background-size: 25%; background-position: 0 100%; background-repeat: repeat-x; min-height: 10vh; width: 500vw; bottom: 0; z-index: 3;}#chapitre1 .sol-2{position: absolute; background-image: url(../media/img/img_elements_visuels/chap1-2/chap1-2_sol-middle.webp); background-size: 100%; background-position: 0 100%; background-repeat: no-repeat; height: 20vh; width: 100vw; bottom: 0; z-index: 0;}#chapitre1 .roche{position: absolute; background-size: contain; background-repeat: no-repeat; filter: drop-shadow(0 10px 5px var(--noir)); z-index: 1;}#chapitre1 .roche.one{background-image: url(../media/img/img_elements_visuels/chap1-2/chap1-2_roche-big.webp); background-position: 0 100%; height: 80vh; width: 80vw; bottom: 0; right: -50vw; z-index: 3;}#chapitre1 .roche.tow{background-image: url(../media/img/img_elements_visuels/chap1-2/chap1-2_roche-small-large-v2.webp); background-position: 0 100%; height: 90vh; width: 90vw; bottom: -20vh; right: -30vw;}#chapitre1 .roche.tree{background-image: url(../media/img/img_elements_visuels/chap1-2/chap1-2_roche-small-large.webp); background-position: 0 100%; transform: scaleX(-1); filter: brightness(150%); height: 90vh; width: 90vw; bottom: 0; right: -40vw; z-index: 1;}@media screen and (min-width: 1000px){#chapitre1 .roche.tree{right: -10vw;}#chapitre1 .sol-1{height: 20vh;}}@media screen and (max-width: 700px){#chapitre1 .sprite{bottom: 15px; width: 40vw; height: 40vw;}}/*Chapitre 2*/#chapitre2{background-color: var(--alphaMoiter); background-image: url(../media/img/img_arriere_plan/bg_chap1-2.webp); background-blend-mode: multiply; overflow: hidden;}/*#chapitre2.bgMove{animation-play-state: running; animation: chap2BGMove; animation-duration: 6s;}#chapitre2.bgMoveStop{animation-play-state: paused;}@keyframes chap2BGMove{0%{background-position: 0 0;}100%{background-position: -300px 0;}}*/#chapitre2 .sprite.man{bottom: 6vh; position: absolute; width: 25vw; height: 25vw; z-index: 2;}#chapitre2 .sprite.frog{animation-duration: 4s; bottom: 3vh; right: -6vw; position: absolute; width: 40vw; height: 40vw; z-index: 2;}#chapitre2 .cercleBlanc, #chapitre7 .cercleBlanc{position: absolute; background-image: url(../media/img/img_elements_visuels/chap1-2/chap2_cercle_frog.webp); background-size: 100%; background-position: 0 100%; background-repeat: no-repeat; width: 50vw; height: 50vw; bottom: 0; right: -10vw; z-index: 2;}#chapitre2 .sol-1{position: absolute; background-image: url(../media/img/img_elements_visuels/chap1-2/chap1-2_sol-devant.webp); background-size: 25%; background-position: 0 100%; background-repeat: repeat-x; min-height: 10vh; width: 500vw; bottom: 0; z-index: 3;}#chapitre2 .sol-2{position: absolute; background-color: var(--alphaMoiter); background-image: url(../media/img/img_elements_visuels/chap1-2/chap1-2_sol-middle.webp); background-blend-mode: darken; background-size: 100%; background-position: 0 100%; background-repeat: no-repeat; height: 10vh; width: 100vw; bottom: 0; z-index: 0;}#chapitre2 .roche{position: absolute; background-size: contain; background-repeat: no-repeat; filter: drop-shadow(0 10px 5px var(--noir)); z-index: 1;}#chapitre2 .roche.one{background-image: url(../media/img/img_elements_visuels/chap1-2/chap1-2_roche-big.webp); background-position: 0 100%; height: 80vh; width: 80vw; bottom: 0; right: 60vw; z-index: 3;}#chapitre2 .roche.tow{background-image: url(../media/img/img_elements_visuels/chap1-2/chap1-2_roche-small-large-v2.webp); background-position: 0 100%; height: 90vh; width: 90vw; bottom: 10vh; right: 30vw; z-index: 0;}#chapitre2 .roche.tree{background-image: url(../media/img/img_elements_visuels/chap1-2/chap1-2_roche-small-large.webp); background-position: 0 100%; filter: brightness(150%); height: 90vh; width: 90vw; bottom: 0vh; right: 40vw; z-index: 1;}@media screen and (min-width: 1000px){#chapitre2 .cercleBlanc{width: 40vw; height: 40vw;}#chapitre2 .sol-1{height: 20vh;}#chapitre2 .sprite.man{bottom: 15px; width: 20vw; height: 20vw;}#chapitre2 .sprite.frog{bottom: 15px; width: 40vw; height: 40vw;}}@media screen and (max-width: 700px){#chapitre2 .roche.one{right: 60vw;}#chapitre2 .sprite.man{bottom: 15px; width: 40vw; height: 40vw;}#chapitre2 .sprite.frog{bottom: 15px; width: 50vw; height: 50vw;}}/*Chapitre 3*/#chapitre3{background-image: url(../media/img/img_arriere_plan/bg-chap3.webp); height: 500vh;}#chapitre3 .chapitre3Bg{width: 100%; height: auto;}#chapitre3 .textBox{text-align: center;}#chapitre3 .textBox.fixed{position: fixed; top: 10%;}#chapitre3 .svgPath{opacity: 0; position: absolute; width: 100vw; height: 400vh; object-fit: cover; object-position: 0 0; left: 0; right: 0; top: 10vh;}#chapitre3 .sprite.man{top: 0; left: 0; right: 0; margin: auto; position: absolute; width: 30vw; height: 30vw; z-index: 2;}#chapitre3 .fromeBriser{width: 25vw; aspect-ratio: 1/1; position: absolute; background-position: 0; background-size: 100%; background-repeat: no-repeat; left: 0; right: 0; top: 50vh; margin: auto;}#chapitre3 .fromeBriser.un{background-image: url(../media/img/img_elements_visuels/chap3/chap3-forme_briser_1.webp);}#chapitre3 .fromeBriser.deux{background-image: url(../media/img/img_elements_visuels/chap3/chap3-forme_briser_2.webp);}#chapitre3 .fromeBriser.troix{background-image: url(../media/img/img_elements_visuels/chap3/chap3-forme_briser_3.webp);}#chapitre3 .fromeBriser.quatre{background-image: url(../media/img/img_elements_visuels/chap3/chap3-forme_briser_4.webp);}#chapitre3 .papier{position: absolute; background-image: url(../media/img/img_elements_visuels/chap3/chap3-papier.webp); background-size: contain; background-position: center; background-repeat: no-repeat; height: 10vh; width: 20vw; z-index: 1;}#chapitre3 .papier.un{top: 50vh; left: 15vh;}#chapitre3 .papier.deux{top: 35vh; left: 55vh;}#chapitre3 .papier.troix{top: 75vh; right: 15vh;}#chapitre3 .papier.quatre{top: 15vh; left: 15vh;}#chapitre3 .papier.cinq{top: 50vh; right: 5vh;}#chapitre3 .papier.six{top: 25vh; left: 0;}#chapitre3 .line{position: absolute; width: 30vw; height: auto; object-fit: contain; object-position: 0 0; filter: drop-shadow(0 0 1.5vmin var(--blanc));}#chapitre3 .line .linePath{fill: none; stroke-width: 0.4em; stroke: var(--blanc);}/*#chapitre3 .line{position: absolute; background-image: url(../media/svg/ligne_blanche.svg); background-size: contain; background-position: top; background-repeat: repeat-y; height: 400vh; width: 5vw; z-index: 1;}*/#chapitre3 .line.left{top: 10vh; left: 5vw;}#chapitre3 .line.rightMiddle{top: 25vh; right: 15vw; transform: scaleX(-1);}@media screen and (max-width: 1000px){#chapitre3 .svgPath{width: 20%;}}/*Chapitre 4*/#chapitre4{background-image: url(../media/img/img_arriere_plan/bg-chap4-5.webp); overflow: hidden;}/*#chapitre4.bgMove{animation-play-state: running; animation: chap4BGMove; animation-duration: 6s;}#chapitre4.bgMoveStop{animation-play-state: paused;}@keyframes chap4BGMove{0%{background-position: 0 0;}100%{background-position: -300px 0;}}*/#chapitre4 .sprite{bottom: 6vh; position: absolute; width: 25vw; height: 25vw; z-index: 2;}#chapitre4 .roche{position: absolute; background-size: contain; background-repeat: no-repeat; filter: drop-shadow(0 10px 5px var(--noir)); z-index: 1;}#chapitre4 .sol-1{position: absolute; background-image: url(../media/img/img_elements_visuels/chap4-5/chap4-5_fond-devant.webp); background-size: 75%; background-position: 0 100%; background-repeat: repeat-x; min-height: 20vh; width: 250vw; bottom: 0; z-index: 4;}#chapitre4 .sol-2{position: absolute; background-image: url(../media/img/img_elements_visuels/chap4-5/chap4-5_fond-moyen.webp); background-size: 75%; background-position: 0 100%; background-repeat: no-repeat; height: 20vh; width: 500vw; bottom: 0; z-index: 0;}#chapitre4 .roche.tow{background-image: url(../media/img/img_elements_visuels/chap4-5/chap4-5_front-rock-cave.webp); background-position: 0 100%; height: 70vh; width: 70vw; bottom: 0; right: -40vw; z-index: 3;}#chapitre4 .roche.one{background-image: url(../media/img/img_elements_visuels/chap4-5/chap4-5_middle-rock-cave.webp); background-size: 100%; background-position: 0 0; height: 70vh; width: 90vw; bottom: 10vh; right: -60vw; z-index: 1;}#chapitre4 .roche.tree{background-image: url(../media/img/img_elements_visuels/chap4-5/chap4-5_back-rock-cave.webp); background-position: 0 100%; transform: scaleX(-1); height: 90vh; width: 90vw; bottom: 0vh; right: -40vw; z-index: 0;}@media screen and (max-width: 1000px){#chapitre4 .roche.one{bottom: -10vh; background-position: 0 0;}}@media screen and (max-width: 700px){#chapitre4 .roche.one{bottom: -25vh; background-position: 0 0;}#chapitre4 .sprite.man{bottom: 15px; width: 40vw; height: 40vw;}}@media screen and (min-width: 1200px){#chapitre4 .roche.tow{height: 80vh; width: 80vw; right: -40vw;}}/*Chapitre 5*/#chapitre5{width: 100vw; background-image: url(../media/img/img_arriere_plan/bg-chap6.webp); overflow: hidden;}#chapitre5 .textBox .text{text-align: center; text-shadow: 0 0 5vw var(--blanc);}/*#chapitre5.bgMove{animation-play-state: running; animation: chap5BGMove; animation-duration: 6s;}#chapitre5.bgMoveStop{animation-play-state: paused;}@keyframes chap5BGMove{0%{background-position: 0 0;}100%{background-position: -200px 0;}}*/#chapitre5 .sprite{bottom: 6vh; position: absolute; width: 25vw; height: 25vw; z-index: 2;}#chapitre5 .roche{position: absolute; background-size: contain; background-repeat: no-repeat; filter: drop-shadow(0 10px 5px var(--noir)); z-index: 1;}#chapitre5 .sol-1{position: absolute; background-image: url(../media/img/img_elements_visuels/chap4-5/chap4-5_fond-devant.webp); background-size: 75%; background-position: 0 100%; background-repeat: repeat-x; min-height: 20vh; width: 250vw; bottom: 0; z-index: 4;}#chapitre5 .sol-2{position: absolute; background-image: url(../media/img/img_elements_visuels/chap4-5/chap4-5_fond-moyen.webp); background-size: 75%; background-position: 0 100%; background-repeat: no-repeat; height: 20vh; width: 500vw; bottom: 0; z-index: 0;}#chapitre5 .roche.tow{background-image: url(../media/img/img_elements_visuels/chap4-5/chap4-5_front-rock-cave.webp); background-position: 0 100%; height: 70vh; width: 70vw; bottom: 0; left: -40vw; z-index: 3;}#chapitre5 .roche.one{background-image: url(../media/img/img_elements_visuels/chap4-5/chap4-5_middle-rock-cave.webp); background-size: 100%; background-position: 0 100%; height: 70vh; width: 70vw; bottom: 30vh; left: -35vw; z-index: 1;}#chapitre5 .roche.tree{background-image: url(../media/img/img_elements_visuels/chap4-5/chap4-5_back-rock-cave.webp); background-position: 0 100%; transform: scaleX(-1); height: 90vh; width: 90vw; bottom: 0vh; left: -50vw; z-index: 0;}/*Chapitre 6*/#chapitre6{background-color: var(--alphaMoiter); background-image: url(../media/img/img_arriere_plan/bg-chap6.webp); background-blend-mode: darken; overflow: hidden;}#chapitre6 .textBox{top: 10vh;}#chapitre6 .textBox .text{font-size: 5vw; text-align: center; text-shadow: 0 0 5vw var(--blanc);}#chapitre6 .perso{position: absolute; background-image: url(../media/img/img_elements_visuels/perso_big.webp); background-size: 100%; background-position: bottom; background-repeat: no-repeat; height: 100%; width: 40vmin; filter: drop-shadow(0 0 3em var(--blanc)) blur(1.5px); bottom: -20vh; z-index: 1;}#chapitre6 .ball, #chapitre5 .ball{position: absolute; background-image: url(../media/img/img_elements_visuels/chap5-6/chap5-6_ball-v1.webp); background-size: 100%; background-position: bottom; background-repeat: no-repeat; width: 8vw; height: 8vw; left: 10vw;}#chapitre6 .ball.one, #chapitre5 .ball.one{left: 30vw; top: 40vh;}#chapitre6 .ball.two, #chapitre5 .ball.two{left: 80vw; top: 10vh;}#chapitre6 .ball.tree, #chapitre5 .ball.tree{left: 50vw; top: 60vh;}#chapitre6 .ball.four, #chapitre5 .ball.four{left: 5vw; top: 15vh;}#chapitre6 .star, #chapitre5 .star{position: absolute; background-image: url(../media/img/img_elements_visuels/chap5-6/chap5-6_star-v1.webp); background-size: 100%; background-position: bottom; background-repeat: no-repeat; opacity: 1; width: 8vw; height: 16vw; left: 25vw; filter: drop-shadow(0 0 2vw var(--blanc));}#chapitre6 .star.one, #chapitre5 .star.one{left: 25vw; top: 60vh;}#chapitre6 .star.two, #chapitre5 .star.two{left: 60vw; top: 45vh;}#chapitre6 .star.tree, #chapitre5 .star.tree{left: 90vw; top: 55vh;}#chapitre6 .star.four, #chapitre5 .star.four{left: 15vw; top: 25vh;}#chapitre6 .effect, #chapitre5 .effect{position: absolute; background-image: url(../media/img/img_elements_visuels/chap5-6/chap5-6_effet-back-chap6.webp); background-size: 100%; background-position: bottom; background-repeat: no-repeat; opacity: 0.8; width: 20vw; height: 20vw; left: 40vw; filter: drop-shadow(0 0 5vw var(--blanc));}#chapitre6 .effect.one, #chapitre5 .effect.one{left: 35vw; top: 25vh;}#chapitre6 .effect.two, #chapitre5 .effect.two{left: 60vw; top: 55vh;}#chapitre6 .effect.tree, #chapitre5 .effect.tree{left: 70vw; top: 20vh;}#chapitre6 .morphSvg{position: absolute; fill: var(--blanc); width: 20vw; height: auto; object-fit: cover; object-position: 0 0; filter: drop-shadow(0 0 1.5vmin var(--blanc));}#chapitre6 .morphSvg .lune{opacity: 1;}#chapitre6 .morphSvg .trefle{opacity: 0;}#chapitre6 .morphSvg.un{top: 15vh; left: 50vw; z-index: 1;}#chapitre6 .morphSvg.deux{top: 60vh; left: 35vw; z-index: 1;}#chapitre6 .morphSvg.troix{top: 45vh; right: 10vw;}@media screen and (max-width: 700px){#chapitre6 .perso{height: 100%; width: 50vmin;}#chapitre6 .morphSvg.deux{top: 60vh; left: 55vw; z-index: 1;}}/*Chapitre 7*/#chapitre7{overflow: hidden;}#chapitre7 .cercleBlanc{left: 0; right: 0; margin: auto; transform: scale(0.5); top: 10vh; bottom: auto;}#chapitre7 .chap7{top: 40vh;}#chapitre7 .chap7 .text{text-align: center; font-size: 5vw; line-height: 5vw; font-family: 'Handwriting-black-draft'; color: var(--noir);}#chapitre7 .chap7 .fontNormal{font-family: 'Grunge'; font-size: 10vw; line-height: 10vw;}@media screen and (max-width: 1000px){#chapitre7 .cercleBlanc{top: 25vh;}}/*Note pour prof*/ul.technique-gsap{background: rgba(0,0,0,0.3); color: white; font-size: 10px; font-family: monospace; font-weight: 400; width: auto; display: inline-block; padding: 10px 20px 12px 20px; margin: 0; max-width: 300px; position: absolute; z-index: 1000; top: 0; left: 0; opacity: 0;}ul.technique-gsap li{margin: 5px 0;}/*Footer*/footer em{font-family: 'Grunge'; color: var(--blanc); text-shadow: 0 0 10px var(--blanc);}footer{line-height: 2em; width: 100%; min-height: 10vh; background-color: var(--blanc); background-image: url(../media/img/img_arriere_plan/bg-chap6.webp), linear-gradient(to right, var(--noir), var(--blanc), var(--noir)); background-blend-mode: multiply; color: var(--blanc); display: flex; flex-direction: column; align-items: center; justify-content: center;}footer p{color: var(--blanc); text-align: center;}/*SpriteSheet*/.all{height: 300vh; background-image: url(../media/img/img_arriere_plan/bg-chap6.webp); opacity: 0.3; filter: blur(5px);}.content{background-color: var(--alphaMoiter); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 40vw; display: flex; align-items: center; justify-content: space-around;}.is-scrolling .sprite.man, .is-scrolling .sprite.frog{animation-play-state: running;}.sprite.man{animation-play-state: paused; width: 30vw; height: 30vw; background-size: 400% 100%; /* width: 250px; height: 250px; background-size: cover; animation-name: spriteMoveJ; */ animation-name: spriteMoveJResponsive; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: steps(4); filter: drop-shadow(0 0 15px var(--blanc));}.man.standJ{background-image: url(../media/img/img_personnages/J-stand-back-v1-papier.webp);}.man.walkJ{background-image: url(../media/img/img_personnages/J-walk-v2-papier.webp);}.sprite.frog{animation-play-state: paused; background-image: url(../media/img/img_personnages/toad-anim-pixel-papier.webp); background-size: 100% 600%; width: 40vw; height: 40vw; /*height: 300px; background-size: cover;*/ animation-name: spriteMoveFrogResponsive; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: steps(6);}@keyframes spriteMoveJResponsive{0%{background-position: 0 0;}100%{background-position: -400% 0;}}@keyframes spriteMoveFrogResponsive{0%{background-position: 0 0;}100%{background-position: 0 -600%;}}@media screen and (max-width: 750px){.content{flex-direction: column; height: 100vh;}.sprite.frog{width: 50vw; width: 50vw;}}