/* Generated by less 3.11.1 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  display: block;
}
a {
  text-decoration: none;
}
body {
  background-color: white;
  font-family: "Roboto", sans-serif;
}
/*-----VARIABLES-----*/
/*-----RECURRENTS-----*/
.center {
  width: 820px;
  margin: 0 auto;
}
P {
  font-size: 18px;
  line-height: 1.3;
  color: #031539;
}
span.ss-titre {
  font-size: 20px;
}
span.bold {
  font-weight: bold;
}
/*-----BURGER-----*/
div.burger {
  display: none;
  position: fixed;
  right: 15px;
  top: 15px;
  width: 50px;
  height: 50px;
  background-color: #b67e06;
  border-radius: 25px;
  z-index: 9999;
  cursor: pointer;
}
div.burger span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 2px;
  background-color: white;
  display: block;
  transition: all 0.3s ease-in-out;
}
div.burger span:before,
div.burger span:after {
  content: '';
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: white;
  display: block;
  transition: all 0.3s ease-in-out;
}
div.burger span:before {
  top: -10px;
}
div.burger span:after {
  top: 10px;
}
/*-----HEADER-----*/
header {
  background-image: url(../img/header-background.jpg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
header div.head-container {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
header div.head-container img {
  width: 100%;
  height: auto;
}
header div.head-container img.bg {
  position: absolute;
  bottom: 0;
  z-index: 1;
}
header div.head-container img.middle {
  position: absolute;
  bottom: 0;
  z-index: 2;
}
header div.head-container img.first {
  position: relative;
  top: 0;
  z-index: 3;
}
header div.bandeau {
  display: none;
}
header div.bandeau div.bande {
  box-shadow: 0 0 25px rgba(3, 21, 57, 0.75);
  position: relative;
  z-index: 9;
  height: 35px;
  width: 100%;
  background: white;
  border-bottom: 1.5px solid #b67e06;
  border-top: 1.5px solid #b67e06;
}
header div.bandeau a#shell-head {
  filter: drop-shadow(5px 0px 25px rgba(3, 21, 57, 0.325));
  display: block;
  transform: translateY(-65%);
  max-width: 165px;
  height: auto;
  position: relative;
  /*after - before*/
  z-index: 9;
  margin: 0 auto;
}
header div.bandeau a#shell-head img {
  width: 100%;
  height: 150.42px;
  filter: drop-shadow(0px 0px 5px hsl(41, 94%, 30%));
}
header div.bandeau a#shell-head:before {
  content: url(../img/nav-shell-before.svg);
  position: absolute;
  width: 100%;
  height: auto;
  z-index: 9;
}
header div.bandeau a#shell-head:after {
  content: '';
  background-color: #ffca45;
  border-radius: 35px;
  position: absolute;
  top: 24%;
  left: 43.5%;
  transform: scale(1);
  transform-origin: center center;
  width: 34.146%;
  height: 34.146%;
  /*--animation coquillage--*/
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-name: coquillage;
}
/*-----NAVBAR-----*/
div.navbar div.navbar-container nav {
  z-index: 999;
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-top: 1.5px solid #b67e06;
  border-bottom: 1.5px solid #b67e06;
  height: 70px;
  background-color: white;
}
div.navbar div.navbar-container nav ul {
  font-size: 0;
  width: calc(50% - 102.5px);
  /* 102.5px = 205px (taille de l'img) : 2 */
}
div.navbar div.navbar-container nav ul li {
  display: inline-block;
  font-size: 16px;
  width: 50%;
  /* 205px taille de l'img : 2 = 102.5px*/
}
div.navbar div.navbar-container nav ul li a {
  text-align: center;
  display: block;
  font-family: "masqualero-groove", sans-serif;
  color: #b67e06;
  font-size: 30px;
  line-height: 70px;
  position: relative;
  /*pour le after*/
}
div.navbar div.navbar-container nav ul li a:before {
  content: "";
  position: absolute;
  width: 60px;
  height: 50px;
  display: inline-block;
  transform: translateY(55%) translateX(-150%);
  background-image: url(../img/nav-fish.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  transition: opacity 0.5s ease-in-out, transform 0.8s ease-in-out;
  opacity: 0;
}
div.navbar div.navbar-container nav ul li a:hover:before {
  transform: translateY(55%) translateX(-80%);
  opacity: 1;
}
div.navbar div.navbar-container nav ul li a.active:before {
  transform: translateY(55%) translateX(-80%);
  opacity: 1;
}
div.navbar div.navbar-container nav ul li#film {
  width: 35%;
}
div.navbar div.navbar-container nav ul li#personnages {
  width: 65%;
}
div.navbar div.navbar-container nav a#img-nav {
  display: block;
  transform: translateY(-50%);
  max-width: 205px;
  height: auto;
  position: relative;
  /*after - before*/
  z-index: 1000;
}
div.navbar div.navbar-container nav a#img-nav img {
  width: 100%;
  height: 153.98px;
  filter: drop-shadow(0px 0px 5px hsl(41, 94%, 30%));
}
div.navbar div.navbar-container nav a#img-nav:before {
  content: url(../img/nav-shell-before.svg);
  position: absolute;
  width: 100%;
  height: auto;
  z-index: 3;
}
div.navbar div.navbar-container nav a#img-nav:after {
  content: '';
  background-color: #ffca45;
  border-radius: 35px;
  position: absolute;
  top: 70%;
  left: 44.5%;
  transform: scale(1);
  transform-origin: center center;
  width: 34.146%;
  height: 34.146%;
  /*--animation coquillage--*/
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-name: coquillage;
}
div.navbar.is-open {
  transform: translateX(0);
}
/*--ANIMATION COQUILLAGE--*/
@-webkit-keyframes coquillage {
  0% {
    opacity: 0.5;
    filter: blur(7px);
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
    background-color: #ffca45;
    filter: blur(10px);
  }
  100% {
    opacity: 0.5;
    filter: blur(7px);
    transform: scale(0.5);
  }
}
/*---------------------PAGE FILM----------------------*/
main.film {
  /*img algue en absolute*/
  background: linear-gradient(white, #84d1f8);
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}
main.film article.center {
  padding: 135px 80px 200px;
  /*pgb +75px car footer remonté de 75px*/
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 1;
  position: relative;
  /*pour zindex*/
}
main.film article.center img.titre {
  margin: 0 auto;
  max-width: 500px;
  margin-bottom: 20px;
}
main.film article.center img.algue {
  position: absolute;
  z-index: -1;
  bottom: 0;
  right: -250px;
  max-width: 360px;
  height: auto;
}
main.film article.center p {
  margin-bottom: 20px;
}
main.film article.center p:nth-of-type(1) {
  text-align: center;
  margin-bottom: 40px;
}
main.film article.center p:nth-last-of-type(1) {
  margin-bottom: 60px;
}
main.film article.center div#video {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}
main.film article.center div#video iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}
/*---------------------PAGE PERSONNAGES---------------*/
section.personnages {
  padding: 135px 80px 100px;
  background: linear-gradient(white, #84d1f8);
  position: relative;
  /*absolute div overlay*/
}
section.personnages div.gallery {
  /*overlay en absolute*/
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
section.personnages div.gallery.flou {
  filter: blur(5px);
}
section.personnages div.gallery div.perso {
  height: auto;
  margin: 0 10px 20px;
}
section.personnages div.gallery div.perso a {
  display: block;
  position: relative;
  max-width: 350px;
  z-index: 1;
}
section.personnages div.gallery div.perso a span.legend {
  position: absolute;
  content: "";
  font-family: "masqualero-groove", sans-serif;
  text-transform: uppercase;
  font-size: 28px;
  color: #b67e06;
  text-align: center;
  top: 47.5%;
  /*47.5% = moitié de 95%, hauteur du after*/
  right: 0;
  width: 79%;
  /*même largeur que le after*/
  z-index: 2;
  opacity: 0;
  transition: all 0.5s;
}
section.personnages div.gallery div.perso a#lien-eric span.legend,
section.personnages div.gallery div.perso a#lien-triton span.legend,
section.personnages div.gallery div.perso a#lien-flotsam span.legend {
  transform: translateY(-23.75%);
  /*23.75% = moitié de 47.5%
                        pour recentrer élements à 2 lignes*/
}
section.personnages div.gallery div.perso a:hover span.legend {
  opacity: 1;
}
section.personnages div.gallery div.perso a:hover:after {
  opacity: 1;
}
section.personnages div.gallery div.perso a:after {
  position: absolute;
  content: "";
  bottom: 0;
  right: 0;
  background-color: rgba(3, 21, 57, 0.8);
  width: 79%;
  height: 95%;
  border-radius: 100%;
  opacity: 0;
  transition: all 0.5s;
}
section.personnages div.gallery div.perso a img {
  max-width: 100%;
  height: auto;
}
section.personnages div.fiches div.overlay {
  overflow: hidden;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: ease-in-out;
  background: rgba(132, 209, 248, 0.6);
}
section.personnages div.fiches div.overlay div.popup {
  position: relative;
  /*div img-btn en absolute*/
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(3, 21, 57, 0.75);
  border-radius: 20px;
  max-width: 1280px;
  max-height: 600px;
}
section.personnages div.fiches div.overlay div.popup div.img-btn {
  z-index: 1;
  width: 100%;
  display: flex;
}
section.personnages div.fiches div.overlay div.popup div.img-btn img {
  position: absolute;
  bottom: 0;
  left: -95px;
  z-index: 1;
}
section.personnages div.fiches div.overlay div.popup div.img-btn img#img-ariel {
  width: 32.812%;
  /*420*/
}
section.personnages div.fiches div.overlay div.popup div.img-btn img#img-ursula {
  left: -84px;
  z-index: -1;
  width: 44.843%;
  /*573*/
}
section.personnages div.fiches div.overlay div.popup div.img-btn img#img-eric {
  width: 31.875%;
  /*408*/
}
section.personnages div.fiches div.overlay div.popup div.img-btn img#img-triton {
  width: 37.5%;
  /*480*/
}
section.personnages div.fiches div.overlay div.popup div.img-btn img#img-sebastien {
  left: -85px;
  width: 32.031%;
  /*410*/
}
section.personnages div.fiches div.overlay div.popup div.img-btn img#img-polochon {
  left: -85px;
  width: 29.218%;
  /*374*/
}
section.personnages div.fiches div.overlay div.popup div.img-btn img#img-flotsam {
  width: 30.625%;
  /*392*/
}
section.personnages div.fiches div.overlay div.popup div.img-btn img#img-eureka {
  left: -71px;
  bottom: -1px;
  width: 28%;
  /*358.4*/
}
section.personnages div.fiches div.overlay div.popup div.img-btn a.close {
  position: absolute;
  right: 20px;
  top: 10px;
  display: block;
  font-size: 30px;
  color: white;
  transition: color 0.5s;
}
section.personnages div.fiches div.overlay div.popup div.img-btn a.close:hover {
  color: #b67e06;
}
section.personnages div.fiches div.overlay div.popup div.contenu {
  background: #031539;
  margin: 0 auto;
  max-width: 768px;
  max-height: 600px;
  overflow-y: auto;
}
section.personnages div.fiches div.overlay div.popup div.contenu::-webkit-scrollbar {
  width: 8px;
  border-left: 1px solid #b67e06;
}
section.personnages div.fiches div.overlay div.popup div.contenu::-webkit-scrollbar-thumb {
  background-color: #b67e06;
  box-shadow: inset 0 0 4px hsla(220, 90%, 5%, 0.6);
}
section.personnages div.fiches div.overlay div.popup div.contenu::-webkit-scrollbar-track {
  background-color: transparent;
  height: 100px;
}
section.personnages div.fiches div.overlay div.popup div.contenu div.degrade {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  height: 100px;
  width: 60%;
  /*de 768/1280px*/
  background: linear-gradient(transparent, #031539);
}
section.personnages div.fiches div.overlay div.popup div.contenu div.text {
  padding: 50px 50px 150px;
}
section.personnages div.fiches div.overlay div.popup div.contenu div.text img {
  display: none;
  max-width: 254px;
  margin: 0 auto;
  margin-bottom: 25px;
}
section.personnages div.fiches div.overlay div.popup div.contenu div.text h2 {
  color: #b67e06;
  font-family: "tangier", sans-serif;
  text-align: center;
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 10px;
}
section.personnages div.fiches div.overlay div.popup div.contenu div.text p {
  color: white;
  margin-bottom: 20px;
}
section.personnages div.fiches div.overlay div.popup div.contenu div.text p:nth-of-type(1) {
  text-align: center;
  margin-bottom: 40px;
}
section.personnages div.fiches div.overlay div.popup div.contenu div.text p:nth-last-of-type(1) {
  margin-bottom: 0;
}
/*---------------------PAGE SECRETS-------------------*/
main.secrets {
  background-image: url(../img/secrets-background.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  position: relative;
}
main.secrets div.contenu {
  text-align: center;
  background-color: white;
  padding: 135px 80px;
  /*mgb +75px car footer remonté de 75px*/
}
main.secrets div.contenu h1 {
  color: #b67e06;
  font-family: "masqualero-groove", sans-serif;
  font-size: 30px;
  font-weight: normal;
  margin-bottom: 60px;
  position: relative;
  display: inline-block;
}
main.secrets div.contenu h1:after {
  position: absolute;
  content: "";
  width: 100%;
  bottom: -5px;
  left: 0;
  height: 1.5px;
  background-color: #b67e06;
}
main.secrets div.contenu article.secrets {
  margin-bottom: 60px;
}
main.secrets div.contenu article.secrets h3 {
  text-transform: uppercase;
  color: #031539;
  font-weight: 500;
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}
main.secrets div.contenu article.secrets p {
  text-align: left;
  margin-bottom: 20px;
}
main.secrets div.contenu article.secrets p:nth-last-of-type(1) {
  margin-bottom: 60px;
}
main.secrets div.contenu article.secrets div.shell {
  position: relative;
}
main.secrets div.contenu article.secrets div.shell img {
  width: 56px;
  height: auto;
  margin: 0 auto;
  display: inline-block;
}
main.secrets div.contenu article.secrets div.shell:before,
main.secrets div.contenu article.secrets div.shell:after {
  content: "";
  position: absolute;
  height: 1px;
  width: calc(25% - 56px);
  background-color: #b67e06;
  top: 26.5px;
  transform: translateY(-50%);
}
main.secrets div.contenu article.secrets div.shell:after {
  right: 25%;
}
main.secrets div.contenu article.secrets div.shell:before {
  left: 25%;
}
main.secrets div.contenu article.secrets img#compositeurs {
  max-width: 100%;
  height: auto;
  margin-bottom: 40px;
}
main.secrets div.contenu article.secrets:nth-last-of-type(1) {
  margin-bottom: 0;
}
/*-----BOUTON SCROLLTOP-----*/
a#scrolltop {
  position: fixed;
  z-index: 9;
  right: 10%;
  bottom: 100px;
  transition: transform 0.5s;
  display: none;
  animation-name: top-page;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
}
a#scrolltop img {
  width: 60px;
  height: auto;
  transition: filter 0.5s;
}
a#scrolltop img:hover {
  filter: drop-shadow(0 0 5px #b67e06);
}
a#scrolltop:hover {
  transform: scale(1.05);
}
/*--ANIMATION bouton--*/
@-webkit-keyframes top-page {
  0% {
    bottom: 100px;
  }
  50% {
    bottom: 105px;
  }
  100% {
    bottom: 100px;
  }
}
/*---------------------PAGE MUSIQUES------------------*/
main.musiques {
  background-image: url(../img/music-backgroundb.jpg);
  background-position: bottom center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
main.musiques:before {
  background: linear-gradient(rgba(19, 38, 59, 0.5), rgba(1, 5, 8, 0.75) 75%);
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
main.musiques article.center {
  padding: 135px 80px 100px ;
  position: relative;
}
main.musiques article.center div.lecteur iframe {
  border-radius: 10px;
  box-shadow: 0 0 60px #031d37;
}
/*-----FOOTER-----*/
footer {
  background-image: url(../img/footer.png);
  background-size: cover;
  background-repeat: repeat-x;
  background-position: top center;
  width: 100%;
  height: 100px;
}
footer div.center {
  padding: 45px 0 10px;
}
footer div.center p {
  color: white;
  text-align: center;
}
footer div.center p span {
  text-transform: uppercase;
}
footer div.center p a {
  color: white;
  transition: color 0.5s;
}
footer div.center p a:hover {
  color: #b67e06;
}
footer#page-film,
footer#page-secrets,
footer#page-secrets {
  position: absolute;
  bottom: 0;
  z-index: 9;
}
footer#page-personnages {
  background-color: #84d1f8;
}
footer#page-secrets {
  background-image: url(../img/footer-secrets.png);
}
footer#page-musiques {
  background-image: url(../img/footer-musicb.png);
  position: relative;
}
/*--------------------RESPONSIVE--------------------*/
/*---------- media query 1280px ----------*/
@media screen and (max-width: 1280px) {
  /*-----HEADER-----*/
  header {
    height: 255px;
  }
  header div.head-container img {
    height: 255px;
    width: auto;
  }
  /*-----NAVBAR-----*/
  div.navbar div.navbar-container nav ul li a {
    font-size: 26px;
  }
  /*-----PAGE personnages-----*/
  section.personnages div.fiches div.overlay div.popup {
    max-width: 1024px;
    /*1024-100*/
  }
  section.personnages div.fiches div.overlay div.popup div.img-btn img {
    left: -65px;
  }
  section.personnages div.fiches div.overlay div.popup div.img-btn img#img-ariel {
    width: 28%;
    /*420*/
  }
  section.personnages div.fiches div.overlay div.popup div.img-btn img#img-ursula {
    left: -59px;
    width: 40%;
    /*573*/
  }
  section.personnages div.fiches div.overlay div.popup div.img-btn img#img-eric {
    width: 26%;
    /*408*/
  }
  section.personnages div.fiches div.overlay div.popup div.img-btn img#img-triton {
    width: 32.5%;
    /*480*/
  }
  section.personnages div.fiches div.overlay div.popup div.img-btn img#img-sebastien {
    left: -53px;
    width: 25%;
    /*410*/
  }
  section.personnages div.fiches div.overlay div.popup div.img-btn img#img-polochon {
    left: -85px;
    width: 26%;
    /*374*/
  }
  section.personnages div.fiches div.overlay div.popup div.img-btn img#img-flotsam {
    width: 23.5%;
    /*392*/
  }
  section.personnages div.fiches div.overlay div.popup div.img-btn img#img-eureka {
    left: -42px;
    width: 20.5%;
    /*358.4*/
  }
  section.personnages div.fiches div.overlay div.popup div.contenu div.degrade {
    width: 75%;
    /*de 768/1024px*/
  }
  /*-----PAGE secrets-----*/
  main.secrets div.contenu h1 {
    font-size: 26px;
  }
  /*-----bouton SCROLLTOP-----*/
  a#scrolltop {
    right: 2.5%;
  }
  /*-----PAGE MUSIQUE-----*/
  main.musiques {
    min-height: calc(100vh - 325px);
  }
  footer#page-musiques {
    background-image: url(../img/footer-musicb.png);
    position: absolute;
    bottom: 0;
  }
}
/*---------- media query 1024px ----------*/
@media screen and (max-width: 1024px) {
  .center {
    width: 768px;
  }
  /*-----NAVBAR-----*/
  div.navbar div.navbar-container nav ul li a:before {
    width: 50px;
    height: 40px;
    transform: translateY(90%) translateX(-150%);
  }
  div.navbar div.navbar-container nav ul li a:hover:before {
    opacity: 0;
    transform: translateY(90%) translateX(-80%);
  }
  div.navbar div.navbar-container nav ul li a.active:before {
    transform: translateY(90%) translateX(-80%);
  }
  div.navbar div.navbar-container nav ul li#film {
    width: 40%;
  }
  div.navbar div.navbar-container nav ul li#personnages {
    width: 60%;
  }
  /*-----PAGE personnages-----*/
  section.personnages {
    padding: 135px 80px 50px;
  }
  section.personnages div.gallery div.perso {
    margin: 20px 20px;
  }
  section.personnages div.gallery div.perso a span.legend {
    opacity: 1;
    background-color: #031539;
    bottom: 0;
    top: inherit;
    padding: 5px;
    border-radius: 5px;
    transform: translateY(50%);
    width: 100%;
  }
  section.personnages div.gallery div.perso a#lien-eric span.legend,
  section.personnages div.gallery div.perso a#lien-triton span.legend,
  section.personnages div.gallery div.perso a#lien-flotsam span.legend {
    transform: translateY(50%);
  }
  section.personnages div.gallery div.perso a:hover span.legend {
    opacity: 1;
  }
  section.personnages div.gallery div.perso a:hover:after {
    opacity: 0;
  }
  section.personnages div.fiches div.overlay div.popup {
    max-width: 860px;
  }
  section.personnages div.fiches div.overlay div.popup div.img-btn img {
    display: none;
  }
  section.personnages div.fiches div.overlay div.popup div.contenu {
    max-width: 600px;
  }
  section.personnages div.fiches div.overlay div.popup div.contenu div.degrade {
    width: 69.767%;
    /*de 600/860px*/
  }
  section.personnages div.fiches div.overlay div.popup div.contenu div.text {
    padding: 50px 50px 100px;
  }
  section.personnages div.fiches div.overlay div.popup div.contenu div.text img {
    display: block;
    margin-bottom: 40px;
  }
  section.personnages div.fiches div.overlay div.popup div.contenu div.text p:nth-of-type(1) {
    text-align: center;
    margin-bottom: 40px;
  }
}
/*---------- media query 960px ----------*/
@media screen and (max-width: 960px) {
  .center {
    width: 600px;
  }
  P {
    font-size: 16px;
  }
  span.ss-titre {
    font-size: 16px;
  }
  /*-----NAVBAR-----*/
  div.navbar div.navbar-container nav {
    height: 60px;
  }
  div.navbar div.navbar-container nav ul {
    width: calc(50% - 75px);
  }
  div.navbar div.navbar-container nav ul li a {
    font-size: 20px;
    line-height: 60px;
  }
  div.navbar div.navbar-container nav ul li a:before {
    width: 50px;
    height: 40px;
    transform: translateY(65%) translateX(-150%);
  }
  div.navbar div.navbar-container nav ul li a:hover:before {
    transform: translateY(65%) translateX(-80%);
  }
  div.navbar div.navbar-container nav ul li a.active:before {
    transform: translateY(65%) translateX(-80%);
  }
  div.navbar div.navbar-container nav a#img-nav img {
    width: 80%;
    height: 121.45px;
    margin: 0 auto;
  }
  div.navbar div.navbar-container nav a#img-nav:before {
    width: 80%;
    left: 50%;
    transform: translate(-50%);
  }
  div.navbar div.navbar-container nav a#img-nav:after {
    top: 68%;
    left: 41.5%;
  }
  /*-----PAGE film -----*/
  main.film article.center {
    padding: 135px 40px 200px;
  }
  main.film article.center p:nth-last-of-type(1) {
    margin-bottom: 40px;
  }
  /*-----PAGE personnages-----*/
  section.personnages {
    padding: 135px 40px 50px;
  }
  section.personnages div.gallery div.perso a span.legend {
    font-size: 26px;
  }
  section.personnages div.fiches div.overlay div.popup {
    max-width: 650px;
    max-height: 500px;
  }
  section.personnages div.fiches div.overlay div.popup div.img-btn a.close {
    right: 50px;
    top: 10px;
  }
  section.personnages div.fiches div.overlay div.popup div.contenu {
    max-width: 600px;
    max-height: 500px;
  }
  section.personnages div.fiches div.overlay div.popup div.contenu div.degrade {
    width: 550px;
  }
  /*-----PAGE secrets-----*/
  main.secrets div.contenu {
    padding: 135px 40px;
  }
  main.secrets div.contenu h1 {
    font-size: 26px;
  }
  /*-----bouton SCROLLTOP-----*/
  a#scrolltop img {
    width: 50px;
  }
  main.musiques {
    min-height: calc(100vh - 315px);
  }
  main.musiques article.center {
    padding: 135px 40px 100px;
  }
  /*-----FOOTER-----*/
}
/*---------- media query 768px ---------- BURGER*/
@media screen and (max-width: 768px) {
  /*----- MENU burger -----*/
  div.burger {
    display: block;
  }
  div.burger.burger-open {
    background-color: transparent;
    border: 2px solid #b67e06;
  }
  div.burger.burger-open span {
    background-color: transparent;
  }
  div.burger.burger-open span:before {
    background-color: #b67e06;
    transform: rotate(135deg);
    top: 0;
  }
  div.burger.burger-open span:after {
    background-color: #b67e06;
    transform: rotate(-135deg);
    top: 0;
  }
  /*----- NAVBAR -----*/
  div.navbar {
    position: fixed;
    z-index: 999;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(3, 21, 57, 0.75);
    transform: translateX(-100%);
    transition: transform 0.5s;
  }
  div.navbar div.navbar-container nav {
    width: 400px;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    border-top: none;
    border-bottom: none;
    background-color: rgba(3, 21, 57, 0.9);
  }
  div.navbar div.navbar-container nav ul {
    width: 100%;
  }
  div.navbar div.navbar-container nav ul li {
    display: block;
    width: 100%;
  }
  div.navbar div.navbar-container nav ul li a {
    font-size: 30px;
  }
  div.navbar div.navbar-container nav ul li a:before {
    display: block;
    transform: translateY(20%) translateX(-35%);
  }
  div.navbar div.navbar-container nav ul li a:hover:before {
    transform: translateY(20%) translateX(20%);
    opacity: 1;
  }
  div.navbar div.navbar-container nav ul li a.active:before {
    transform: translateY(20%) translateX(20%);
  }
  div.navbar div.navbar-container nav ul li#film,
  div.navbar div.navbar-container nav ul li#personnages {
    width: 100%;
  }
  div.navbar div.navbar-container nav a#img-nav {
    order: -1;
    transform: translateY(0);
    margin: 0 auto;
    margin-bottom: 50px;
  }
  div.navbar div.navbar-container nav a#img-nav img {
    width: 100%;
    height: 153.98px;
  }
  div.navbar div.navbar-container nav a#img-nav:before {
    width: 100%;
  }
  div.navbar div.navbar-container nav a#img-nav:after {
    top: 25%;
    left: 43.5%;
  }
  /*-----HEADER-----*/
  header div.bandeau {
    display: block;
  }
  /*-----PAGE personnages-----*/
  section.personnages div.fiches div.overlay div.popup {
    max-width: 450px;
    max-height: 500px;
  }
  section.personnages div.fiches div.overlay div.popup div.img-btn img {
    display: none;
  }
  section.personnages div.fiches div.overlay div.popup div.img-btn a.close {
    right: 46px;
  }
  section.personnages div.fiches div.overlay div.popup div.contenu {
    max-width: 400px;
    max-height: 500px;
  }
  section.personnages div.fiches div.overlay div.popup div.contenu div.degrade {
    width: 350px;
  }
  section.personnages div.fiches div.overlay div.popup div.contenu div.text p:nth-of-type(1) {
    margin-bottom: 20px;
  }
  /*-----PAGE secrets-----*/
  main.secrets div.contenu h1 {
    font-size: 30px;
  }
  main.secrets div.contenu article.secrets h3 {
    font-size: 20px;
  }
  /*-----bouton SCROLLTOP-----*/
  a#scrolltop {
    right: 16.5px;
    bottom: 115px;
  }
  a#scrolltop img {
    filter: drop-shadow(0 0 5px rgba(3, 21, 57, 0.75));
  }
  /*--ANIMATION bouton--*/
  @-webkit-keyframes top-page {
    0% {
      bottom: 115px;
    }
    50% {
      bottom: 120px;
    }
    100% {
      bottom: 115px;
    }
  }
  /*-----PAGE musiques-----*/
  main.musiques {
    background-position: center bottom;
    min-height: calc(100vh - 255px);
  }
}
/*-----media-query-paysage-----*/
@media (orientation: landscape) and (max-device-width: 768px) {
  /*----- NAVBAR -----*/
  div.navbar {
    position: fixed;
    z-index: 999;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(3, 21, 57, 0.75);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.5s;
  }
  div.navbar div.navbar-container nav {
    width: 400px;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    border-top: none;
    border-bottom: none;
    background-color: rgba(3, 21, 57, 0.9);
  }
  div.navbar div.navbar-container nav ul {
    width: 100%;
  }
  div.navbar div.navbar-container nav ul li {
    display: block;
    width: 100%;
  }
  div.navbar div.navbar-container nav ul li a {
    font-size: 24px;
    line-height: 48px;
  }
  div.navbar div.navbar-container nav ul li a:before {
    display: block;
    transform: translateY(15%) translateX(60%);
  }
  div.navbar div.navbar-container nav ul li a:hover:before {
    transform: translateY(15%) translateX(60%);
    opacity: 1;
  }
  div.navbar div.navbar-container nav ul li a.active:before {
    transform: translateY(15%) translateX(60%);
  }
  div.navbar div.navbar-container nav ul li#film,
  div.navbar div.navbar-container nav ul li#personnages {
    width: 100%;
  }
  div.navbar div.navbar-container nav a#img-nav {
    order: -1;
    transform: translateY(0);
    margin: 0 auto;
    margin-bottom: 25px;
    max-width: 105px;
  }
  div.navbar div.navbar-container nav a#img-nav img {
    width: 100%;
  }
  div.navbar div.navbar-container nav a#img-nav:before {
    width: 100%;
    top: 30px;
  }
  div.navbar div.navbar-container nav a#img-nav:after {
    top: 25%;
    left: 43.5%;
  }
  /*-----PAGE personnages-----*/
  section.personnages div.fiches div.overlay div.popup {
    max-width: 500px;
    max-height: 300px;
  }
  section.personnages div.fiches div.overlay div.popup div.img-btn img {
    display: none;
  }
  section.personnages div.fiches div.overlay div.popup div.contenu {
    max-width: 450px;
    max-height: 300px;
  }
  section.personnages div.fiches div.overlay div.popup div.contenu div.degrade {
    width: 410px;
  }
  section.personnages div.fiches div.overlay div.popup div.contenu div.text {
    padding: 50px 50px 100px;
  }
  section.personnages div.fiches div.overlay div.popup div.contenu div.text img {
    display: block;
  }
  section.personnages div.fiches div.overlay div.popup div.contenu div.text p:nth-of-type(1) {
    text-align: center;
    margin-bottom: 20px;
  }
}
/*---------- media query 600px ----------*/
@media screen and (max-width: 600px) {
  .center {
    width: 100%;
  }
  /*-----HEADER-----*/
  header div.bandeau a#shell-head {
    max-width: 150px;
  }
  header div.bandeau a#shell-head img {
    width: 100%;
    height: 137.11px;
  }
  /*-----PAGE film -----*/
  main.film article.center img.titre {
    max-width: 380px;
  }
  main.film article.center img.algue {
    right: -195px;
    max-width: 300px;
  }
  /*-----PAGE perso -----*/
  section.personnages div.gallery div.perso {
    margin: 0 0 60px;
  }
  /*-----PAGE secrets-----*/
  main.secrets div.contenu h1 {
    font-size: 28px;
  }
  main.secrets div.contenu article.secrets div.shell:before,
  main.secrets div.contenu article.secrets div.shell:after {
    width: calc(32% - 56px);
  }
  main.secrets div.contenu article.secrets div.shell:after {
    right: 20%;
  }
  main.secrets div.contenu article.secrets div.shell:before {
    left: 20%;
  }
}
@media screen and (max-width: 480px) {
  .center {
    width: 100%;
  }
  /*-----HEADER-----*/
  header div.bandeau a#shell-head {
    max-width: 125px;
  }
  header div.bandeau a#shell-head img {
    height: 114.92px;
    width: 100%;
  }
  /*----- NAVBAR -----*/
  div.navbar div.navbar-container nav {
    width: 100%;
  }
  div.navbar div.navbar-container nav ul li a {
    font-size: 22px;
    line-height: 45px;
  }
  div.navbar div.navbar-container nav ul li a:before {
    width: 40px;
    height: 30px;
    transform: translateY(20%) translateX(35%);
  }
  div.navbar div.navbar-container nav ul li a:hover:before {
    transform: translateY(20%) translateX(35%);
  }
  div.navbar div.navbar-container nav ul li a.active:before {
    transform: translateY(20%) translateX(35%);
  }
  div.navbar div.navbar-container nav a#img-nav {
    max-width: 150px;
    margin-bottom: 25px;
  }
  div.navbar div.navbar-container nav a#img-nav img {
    width: 100%;
    height: 137.11px;
  }
  /*-----PAGE film-----*/
  main.film article.center {
    padding: 135px 20px 200px;
  }
  /*-----PAGE personnages-----*/
  section.personnages {
    padding: 135px 20px 50px;
  }
  section.personnages div.gallery div.perso a span.legend {
    font-size: 22px;
  }
  section.personnages div.fiches div.overlay div.popup {
    max-width: 300px;
    max-height: 500px;
    border-radius: 15px;
  }
  section.personnages div.fiches div.overlay div.popup div.img-btn a.close {
    right: 30px;
  }
  section.personnages div.fiches div.overlay div.popup div.contenu {
    max-width: 275px;
    max-height: 500px;
  }
  section.personnages div.fiches div.overlay div.popup div.contenu::-webkit-scrollbar {
    width: 4px;
  }
  section.personnages div.fiches div.overlay div.popup div.contenu div.degrade {
    width: 260px;
  }
  section.personnages div.fiches div.overlay div.popup div.contenu div.text {
    padding: 50px 12.5px 100px;
  }
  section.personnages div.fiches div.overlay div.popup div.contenu div.text img {
    display: block;
    max-width: 200px;
  }
  section.personnages div.fiches div.overlay div.popup div.contenu div.text h2 {
    font-size: 36px;
  }
  /*-----PAGE secrets-----*/
  main.secrets div.contenu {
    padding: 135px 20px;
  }
  main.secrets div.contenu h1 {
    font-size: 30px;
  }
  main.secrets div.contenu article.secrets div.shell:before,
  main.secrets div.contenu article.secrets div.shell:after {
    width: calc(50% - 56px);
  }
  main.secrets div.contenu article.secrets div.shell:after {
    right: 0;
  }
  main.secrets div.contenu article.secrets div.shell:before {
    left: 0;
  }
  /*-----PAGE musique-----*/
  main.musiques article.center {
    padding: 135px 20px 100px;
  }
}