@charset "UTF-8";
/*On définit les variables à l'intérieur de la section root. Les variables commencent par "--" et on leur affecte
une valeur avec ":"*/
/*We’ll use the html element (better than body as it’s always at least the height of the
browser window). We set a fixed and centered background on it, then adjust it’s size
using background-size set to the cover keyword. To ensure cross browser compatibility some tutorials seem to add the following lines of code as well.
webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;*/
body.hidden-scroll {
  overflow: hidden;
}

.sl-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #fff;
  opacity: 0.7;
  display: none;
  z-index: 1035;
}

.sl-wrapper {
  z-index: 1040;
}
.sl-wrapper * {
  box-sizing: border-box;
}
.sl-wrapper button {
  border: 0 none;
  background: transparent;
  font-size: 28px;
  padding: 0;
  cursor: pointer;
}
.sl-wrapper button:hover {
  opacity: 0.7;
}
.sl-wrapper .sl-close {
  display: none;
  position: fixed;
  right: 30px;
  top: 30px;
  z-index: 10060;
  margin-top: -14px;
  margin-right: -14px;
  height: 44px;
  width: 44px;
  line-height: 44px;
  font-family: Arial, Baskerville, monospace;
  color: #000;
  font-size: 3rem;
}
.sl-wrapper .sl-close:focus {
  outline: none;
}
.sl-wrapper .sl-counter {
  display: none;
  position: fixed;
  top: 30px;
  left: 30px;
  z-index: 1060;
  color: #000;
  font-size: 1rem;
}
.sl-wrapper .sl-navigation {
  width: 100%;
  display: none;
}
.sl-wrapper .sl-navigation button {
  position: fixed;
  top: 50%;
  margin-top: -22px;
  height: 44px;
  width: 22px;
  line-height: 44px;
  text-align: center;
  display: block;
  z-index: 10060;
  font-family: Arial, Baskerville, monospace;
  color: #000;
}
.sl-wrapper .sl-navigation button.sl-next {
  right: 5px;
  font-size: 2rem;
}
.sl-wrapper .sl-navigation button.sl-prev {
  left: 5px;
  font-size: 2rem;
}
.sl-wrapper .sl-navigation button:focus {
  outline: none;
}
@media (min-width: 35.5em) {
  .sl-wrapper .sl-navigation button {
    width: 44px;
  }
  .sl-wrapper .sl-navigation button.sl-next {
    right: 10px;
    font-size: 3rem;
  }
  .sl-wrapper .sl-navigation button.sl-prev {
    left: 10px;
    font-size: 3rem;
  }
}
@media (min-width: 50em) {
  .sl-wrapper .sl-navigation button {
    width: 44px;
  }
  .sl-wrapper .sl-navigation button.sl-next {
    right: 20px;
    font-size: 3rem;
  }
  .sl-wrapper .sl-navigation button.sl-prev {
    left: 20px;
    font-size: 3rem;
  }
}
.sl-wrapper.sl-dir-rtl .sl-navigation {
  direction: ltr;
}
.sl-wrapper .sl-image {
  position: fixed;
  -ms-touch-action: none;
  touch-action: none;
  z-index: 10000;
}
.sl-wrapper .sl-image img {
  margin: 0;
  padding: 0;
  display: block;
  border: 0 none;
  width: 100%;
  height: auto;
}
@media (min-width: 35.5em) {
  .sl-wrapper .sl-image img {
    border: 0 none;
  }
}
@media (min-width: 50em) {
  .sl-wrapper .sl-image img {
    border: 0 none;
  }
}
.sl-wrapper .sl-image iframe {
  background: #000;
  border: 0 none;
}
@media (min-width: 35.5em) {
  .sl-wrapper .sl-image iframe {
    border: 0 none;
  }
}
@media (min-width: 50em) {
  .sl-wrapper .sl-image iframe {
    border: 0 none;
  }
}
.sl-wrapper .sl-image .sl-caption {
  display: none;
  padding: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  font-size: 1rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.sl-wrapper .sl-image .sl-caption.pos-top {
  bottom: auto;
  top: 0;
}
.sl-wrapper .sl-image .sl-caption.pos-outside {
  bottom: auto;
}
.sl-wrapper .sl-image .sl-download {
  display: none;
  position: absolute;
  bottom: 5px;
  right: 5px;
  color: #000;
  z-index: 1060;
}

.sl-spinner {
  display: none;
  border: 5px solid #333;
  border-radius: 40px;
  height: 40px;
  left: 50%;
  margin: -20px 0 0 -20px;
  opacity: 0;
  position: fixed;
  top: 50%;
  width: 40px;
  z-index: 1007;
  -webkit-animation: pulsate 1s ease-out infinite;
  -moz-animation: pulsate 1s ease-out infinite;
  -ms-animation: pulsate 1s ease-out infinite;
  -o-animation: pulsate 1s ease-out infinite;
  animation: pulsate 1s ease-out infinite;
}

.sl-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

.sl-transition {
  transition: -moz-transform ease 200ms;
  transition: -ms-transform ease 200ms;
  transition: -o-transform ease 200ms;
  transition: -webkit-transform ease 200ms;
  transition: transform ease 200ms;
}

@-webkit-keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@-moz-keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@-o-keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@-ms-keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
/*On définit les variables à l'intérieur de la section root. Les variables commencent par "--" et on leur affecte
une valeur avec ":"*/
/*We’ll use the html element (better than body as it’s always at least the height of the
browser window). We set a fixed and centered background on it, then adjust it’s size
using background-size set to the cover keyword. To ensure cross browser compatibility some tutorials seem to add the following lines of code as well.
webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;*/
/*On définit la police utilisée par défaut dans tout le body. Si une autre police est précisée
dans une section interne à body, c'est cette dernière qui sera utilisée pour la section
en question. Les propriétés les plus précises/ciblantes prévalent toujours.
On définit aussi la couleur de la police en hexadécimal.*/
html {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/background/stmalo1.jpg") no-repeat center center fixed;
  webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'montserrat', Arial, sans-serif;
  color: #181818;
  width: 100%;
  height: 100%;
  /*Permet de dire au navigateur de ne pas adapter la taille du
  texte lui même. On pourrait lui dire 175% au lieu de none, pour
  multiplier par 1.75 la taille de base du texte mais cela n'est
  pas encore bien pris en charge par les navigateurs. Du coup je
  gère la taille autrement.*/
  -webkit-text-size-adjust: none;
}
@media screen and (max-device-width: 1100px) {
  html {
    font-size: 1.75em;
  }
}

/*Les paragraphes sont naturellement définies avec des marges de block et inline
Il faut les définir à zéro si on ne les veut pas. Ici on ne précise que les block
qui impactaient les descriptions en noir transparents qui n'étaient plus collées aux
images*/
p {
  margin-block-start: 0em;
  margin-block-end: 0em;
}

/*Chaque section "@font-face" permet de définir une nouvelle police (pour celles inconnues par le navigateur et 
qu'il faut importer). On définit le nom de la police qui sera utilisé dans le code avec font-family. Ensuite on
met le lien interne vers le fichier de police. On met en fait plusieurs types d'extension pour une même police 
pour qu'elle puisse être utilisée par tous les navigateurs.*/
@font-face {
  font-family: "montserrat";
  src: url("../polices/montserrat-v14-latin/montserrat-v14-latin-regular.eot") format("eot"), url("../polices/montserrat-v14-latin/montserrat-v14-latin-regular.svg") format("svg"), url("../polices/montserrat-v14-latin/montserrat-v14-latin-regular.ttf") format("ttf"), url("../polices/montserrat-v14-latin/montserrat-v14-latin-regular.woff") format("woff");
}
@font-face {
  font-family: "source-sans-pro";
  src: url("../polices/source-sans-pro-v13-latin/source-sans-pro-v13-latin-regular.eot") format("eot"), url("../polices/source-sans-pro-v13-latin/source-sans-pro-v13-latin-regular.svg") format("svg"), url("../polices/source-sans-pro-v13-latin/source-sans-pro-v13-latin-regular.ttf") format("ttf"), url("../polices/source-sans-pro-v13-latin/source-sans-pro-v13-latin-regular.woff") format("woff");
}
@keyframes progress-bar {
  0% {
    transform: scaleX(0);
    opacity: .1;
  }
  17% {
    transform: scaleX(0.18);
  }
  24% {
    transform: scaleX(0.4);
    animation-timing-function: cubic-bezier(0.9, 0, 0.1, 1);
  }
  46% {
    transform: scaleX(0.81);
  }
  85%,100% {
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes score-value {
  0% {
    opacity: 0.0;
  }
  17% {
    opacity: 0.1;
  }
  24% {
    opacity: 0.2;
    animation-timing-function: cubic-bezier(0.9, 0, 0.1, 1);
  }
  50% {
    opacity: 0.5;
  }
  85% {
    opacity: 0.9;
  }
  100% {
    opacity: 1.0;
  }
}
/*On définit les variables à l'intérieur de la section root. Les variables commencent par "--" et on leur affecte
une valeur avec ":"*/
/*We’ll use the html element (better than body as it’s always at least the height of the
browser window). We set a fixed and centered background on it, then adjust it’s size
using background-size set to the cover keyword. To ensure cross browser compatibility some tutorials seem to add the following lines of code as well.
webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;*/
/*On définit la largeur du bloc page : la section qui contient tous les éléments à par
le background.*/
.bloc_page {
  width: 1100px;
  margin: auto;
}
@media screen and (max-device-width: 1100px) {
  .bloc_page {
    width: auto;
  }
}

/*Le main header est ici la photo tout en haut. On la colle au haut avec margin-top
On arrondit la photo avec border-radius et on définit une ombre avec box-shadow.
On définit le background du header i.e. la photo avec la bonne largeur et on met une marge
en dessous.*/
.main_header {
  height: 149px;
  border-radius: 5px;
  background: url("../images/header/header2_1100.jpg") no-repeat;
  background-size: 1100px auto;
  box-shadow: 0px 4px 4px #1c1a19;
  margin-bottom: 40px;
  display: flex;
  justify-content: flex-end;
  position: relative;
}
.main_header > p {
  position: absolute;
  padding: 0.5em 1em 0.5em 1em;
  width: min-content;
  white-space: nowrap;
  background-color: rgba(25, 125, 195, 0.9);
  color: white;
  height: 25px;
  align-items: center;
  left: 0px;
  font-size: 1.3em;
  border-radius: 5px 0px 0px 0px;
}
@media screen and (max-device-width: 1100px) {
  .main_header > p {
    font-size: 1em;
  }
}
.main_header a {
  padding: 0.5em 1em 0.5em 1em;
  width: min-content;
  white-space: nowrap;
  background-color: rgba(24, 24, 24, 0.5);
  color: white;
  height: 25px;
  display: flex;
  color: inherit;
  text-decoration: inherit;
  align-items: center;
}
.main_header a:nth-child(2) {
  border-radius: 0px 5px 0px 0px;
}
.main_header a p {
  color: white;
}
.main_header a img {
  margin-right: 0.5em;
  max-height: 100%;
}

/*On poursuit avec le reste des propriétés propre aud div_accueil_body.
display:flex permet d'organiser le contenu à l'interieur (cf Openclassrooms)
flex-direction:	column organise le contenu ligne par ligne plutôt que colonne par colonne
*/
.content_body {
  display: flex;
  width: 100%;
  flex-direction: column;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/background/fond_jaune_o95.png") no-repeat center center fixed;
  webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/*Le menu est la barre avec accueil, films, musique, etc...
justify-content : center permet de centrer selon l'axe principale ici horizontal
align-items : center permet de centrer selon l'axe secondaire ici vertical.
On définit aussi une police propre au menu.
On peut définir une couleur de fond grâce à rgba le dernier chiffre est l'opacité
1 = totalement opaque 0 = totalement transparent*/
.menu {
  display: flex;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.5);
  justify-content: center;
  align-items: center;
  font-family: source-sans-pro;
  /* #menu a vise toutes les balises a de la balise qui a l'id menu. flex : 1 permet de 
  donner un poids égal à 1 à cette section en termes d'occupation de l'espace. 
  text-align : center perment de centrer le texte dans cette section.
  color : inherit permet de préciser que la couleur ne doit pas être celle par défaut des
  sections a mais celle héritée des balises parentes dans le code css. Idem pour
  text-decoration*/
  /*Rien de nouveau*/
}
@media screen and (max-device-width: 1100px) {
  .menu {
    margin-bottom: -1px;
  }
}
.menu .onglet_menu {
  flex: 1;
  justify-content: center;
  text-align: center;
  font-size: 1.6em;
  color: inherit;
  text-decoration: inherit;
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  /*::after ajoute un élément dans le code html
  Donc ici lorsque l'on survole un onglet_menu l'opacité de l'élément ajouté passe à un et
  il devient valors visible.*/
}
@media screen and (max-device-width: 1100px) {
  .menu .onglet_menu {
    font-size: 1em;
  }
}
.menu .onglet_menu:hover::after {
  opacity: 1;
}
.menu .onglet_menu::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(242, 242, 242, 0.5);
  opacity: 0;
  z-index: -1;
  transition: opacity 200ms;
}
.menu .onglet_menu--courant {
  display: flex;
  height: 50px;
  justify-content: center;
  align-items: center;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/background/fond_jaune_o95.png") no-repeat center center fixed;
  webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

footer {
  width: 100%;
  height: min-content;
  display: flex;
  background: url("../images/background/bleu_plein.jpg");
  justify-content: space-around;
  color: white;
  margin-bottom: 50px;
}
@media screen and (max-device-width: 1100px) {
  footer {
    font-size: 0.6em;
  }
}
footer .footer__div {
  width: 100%;
  display: flex;
}
footer .footer__div h2 {
  font-size: 1.4em;
  font-weight: normal;
  flex: 3;
  text-align: center;
}
footer .footer__div--left {
  margin-left: 40px;
  justify-content: space-between;
}
footer .footer__div--left a {
  width: 100%;
  flex: 1;
  margin: 5px 0px 10px 20px;
}
footer .footer__div--left img {
  width: 100%;
  height: auto;
}
footer .footer__div--center {
  margin-left: 20px;
  display: flex;
  justify-content: center;
  text-align: center;
}
footer .footer__div--right {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*On définit les variables à l'intérieur de la section root. Les variables commencent par "--" et on leur affecte
une valeur avec ":"*/
/*We’ll use the html element (better than body as it’s always at least the height of the
browser window). We set a fixed and centered background on it, then adjust it’s size
using background-size set to the cover keyword. To ensure cross browser compatibility some tutorials seem to add the following lines of code as well.
webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;*/
.review {
  margin: 0px 30px 0px 30px;
  padding: 20px 0px 20px 0px;
  border-top: 2px rgba(0, 0, 0, 0.5) solid;
  display: flex;
}
@media screen and (max-device-width: 1100px) {
  .review {
    flex-direction: column;
  }
}
.review__poster {
  flex: 25;
  margin-right: 20px;
  height: min-content;
}
.review__poster img {
  max-width: 100%;
  transition: transform 200ms ease-in-out 0ms;
}
@media screen and (max-device-width: 1100px) {
  .review__poster img {
    max-width: 400px;
  }
}
.review__poster img:hover {
  transform: scale(1.05);
}
.review__text {
  flex: 100;
  display: flex;
  justify-content: space-between;
}
.review__text .game_infos {
  margin-right: 30px;
}
.review__text .game_infos h2 {
  margin: 0px;
  padding: 0;
  line-height: 1em;
}
.review__text .game_infos h2 a {
  color: inherit;
  text-decoration: inherit;
}
.review__text .game_infos h2 a:hover {
  text-decoration: underline;
}
.review__text .game_infos > p {
  text-align: justify;
}
.review__text .score__progress {
  position: relative;
  border: 2px black solid;
  width: 200px;
  height: 20px;
}
@media screen and (max-device-width: 1100px) {
  .review__text .score__progress {
    width: 200px;
    height: 30px;
    border: 3px black solid;
  }
}
.review__text .score__progress .score_value {
  position: relative;
  text-align: center;
  display: none;
}
.review__text .score__progress .score_value--animated {
  display: block;
  animation: score-value 1000ms 100ms;
  animation-fill-mode: both;
}
.review__text .score__progress__bar {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
}
.review__text .score__progress__bar--animated {
  transform-origin: left;
  transform: scaleX(0.5);
  animation: progress-bar 1000ms 100ms;
  animation-fill-mode: both;
  animation-fill-mode: both;
  background-color: darkgreen;
}
.review__text__avis {
  text-align: justify;
}

.jeux_video_introduction {
  margin: 60px 30px 20px 30px;
}
.jeux_video_introduction h1 {
  margin-block-start: 0em;
  margin-block-end: 0em;
  font-size: 2em;
  text-align: center;
}