//LAYOUT //
$ftt: 97%; // allows to reajust gloabally the entire blocks :it will fit for each media-query feature, it's a compromise to find out;)
$ft_container: 16px; // font to display on main blocks ;)
$bgreal: black !important; // suppress "!important" to reveal specific media queries background-colors;)

$sans: 'Open Sans', sans-serif;
$color_exp: white;
$schoolbell: 'schoolbell', cursive;

$zhtml: -1;
$zbody: 1;
$zoverlay: -1;
$zwrapper: 2;
$zfooter: 10;

$ft: 20px;
$mobile-w: 600px;
$mobile-ft: 18px;
$tablet-w: 1020px;
$tablet-ft: 11px;
$large-w: 1200px;
$large-ft: 22px;



@mixin breakpoint($point) {
  //navy
  @if $point == XXS {
    @media (max-height: 320px) and (max-width: 480px) and (orientation: portrait) {
      @content;
    }
  }
  //gray
  @if $point == XX-S {
    @media  (max-width: 360px) and (orientation: landscape) {
      @content;
    }
  }
  //blue
  @if $point == XS {
    @media (min-width: 320px) and (max-width: 568px) and (max-height: 859px) {
      @content;
    }
  }
 //deeppink
  @if $point == X-S {
 @media (min-height: 321px) and (max-height: 568px) and (min-width: 321px) and (max-width: 859px) and (orientation:landscape){
      @content;
    }
  }
  //darkcyan
  @if $point == S {
    @media (min-width: 530px) and (max-width: 1023px) and (min-height: 321px) and (max-height: 860px) {
      @content;
    }
  }
  //yellowgreen
  @if $point == M {
    @media (min-width: 600px) and (max-width: 1023px) and (min-height: 601px) and (max-height: 1200px) {
      @content;
    }
  }
  //gold
  @if $point == XM {
    @media (min-width: 600px) and (max-width: 1023px) and (min-height: 1201px) {
      @content;
    }
  }
  //indigo
  @if $point == XXM {
    @media (min-width: 1024px) and (max-width: 1249px) and (min-height: 600px) and (max-height: 900px) {
      @content;
    }
  }
  //tomato
  @if $point == L {
    @media (min-width: 1250px) and (max-width: 1949px) and (min-height: 700px) and (max-height: 900px) {
      @content;
    }
  }
  //red
  @if $point == XL {
    @media (min-width: 1250Px) and (min-height: 901px) {
      @content;
    }
  }
}
@mixin background($bg) {
  @if $bg == bgXXS {
    background: navy;  
  }
  @if $bg == bgXX-S {
    background: gray;
  }
  @if $bg == bgXS {
    background: blue;
  }
 @if $bg == bgX-S {
    background: deeppink;
  }
  @if $bg == bgS {
    background: darkcyan;
  }
  @if $bg == bgM {
    background: yellowgreen;
  }
  @if $bg == bgXM {
    background: darken(gold, 10);
  }
  @if $bg == bgXXM {
    background: indigo;
  }
  @if $bg == bgL {
    background: tomato;
  }
  @if $bg == bgXL {
    background: red;
  }
}


// Réglage responsive c'est ici qu'on cale la taille et l'emplacement du module de téléchargment //
@mixin wrapper($wr) {
 @if $wr== bgXXS {
  height: 100vh;
  width: 98vw;
  top: 50%;
  left: 50%;
  section.footer-mobile {
   width: 98vw;
   font-size: .8em;
  }
  iframe {
   height:100vh;
  }
 }
 @if $wr == bgXX-S {
  height: 100vh;
  width: 98vw;
  top: 25%;
  left: 50%;
  section.footer-mobile {
   width: 98vw;
   font-size: .8em;
  }
  iframe {
   height: 100vh;
  }
 }
 @if $wr == bgXS {
  height: 100vh;
  width: 100vw;
  top: 50%;
  left: 50%;
  section.footer-mobile {
   width: 100vw;
   line-height: 1em !important ;
   p {
    margin: 0 1.5em 0 1.2em !important;
    padding: 1em ;
   }
  }
  iframe {
   height: 100vh;
  }
 }
 @if $wr == bgS {
  height: 65vh;
  width: 98vw;
  max-height: 500px;
  top: 25%;
  left: 50%;
  section.footer-mobile {
   width: 98vw;
   font-size: .8em;
  }
  iframe {
   height: 65vh;
   max-height: 500px;
  }
 }
 @if $wr == bgM {
  height: 65vh;
  width: 90vw;
  max-height: 500px;
  top: 52%;
  left: 50%;
  section.footer-mobile {
   width: 90vw;
   max-height: 500px;
  }
  iframe {
   height: 65vh;
   max-height: 500px;
  }
 }
 @if $wr == bgXM {
  height: 65vh;
  width: 90vw;
  max-height: 500px;
  top: 50%;
  left: 50%;
  section.footer-mobile {
   width: 90vw;
   max-height: 500px;
  }
  iframe {
   height: 65vh;
   max-height: 500px;
  }
 }
 @if $wr == bgXXM {
  height: 60vh;
  width: 62vw;
  top: 35%;
  left: 65%;
  section.footer-mobile {
   width: 62vw;
  }
  iframe {
   height: 60vh;
  }
 }
 @if $wr == bgL {
  height: 70vh;
  width: 47vw;
  top: 42%;
  left: 72%;
  section.footer-mobile {
   width: 47vw;
  }
  iframe {
   height: 70vh;
  }
 }
 @if $wr == bgXL {
  height: 65vh;
  width: 40vw;
  max-height: 500px;
  top: 40%;
  left: 72%;
  section.footer-mobile {
   width: 40vw;
  }
  iframe {
   height: 65vh;
   max-height: 500px;
  }
 }
}

////GENERAL STYLE ////

*, *::before, *::after {
 padding: 0;
 margin: 0;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

html {
 overflow: hidden;
 position: absolute;
 left: 0;
 top: 0;
 color: darken(ivory, 7);
 z-index: $zhtml;
 height: 100%;
 width: 100%;
 transform-style: preserve-3d;
}
body {
 color: #fff;
 font-family: $sans;
 font-size: $ft_container;
 flex-direction: column;
 flex-wrap: nowrap;
 justify-content: flex-start;
 align-content: stretch;
 align-items: stretch;
 overflow-x: hidden;
 position: absolute;
 left: 0;
 top: 0;
 z-index: $zbody;
 height: 100%;
 width: 100%;
 margin-left: 0;
}

a {
 text-decoration: none;
 color: hsl(41, 93%, 67%);
 &:first-child {
  color: hsla(227, 100%, 80%, .9);
 }
 &:last-child {
  color: hsl(357, 100%, 60%);
 }
}
::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.51);
 background-color: rgba(19, 46, 5, 0.51);
 border-radius: 10px;
}
::-webkit-scrollbar {
 width: 5px;
 background-color: rgba(255, 255, 255, 0.2);
}
::-webkit-scrollbar-thumb {
 border-radius: 10px;
 background-color: #111;
 background-image: -webkit-gradient(
  linear,
  40% 0%,
  75% 84%,
  from(#e9a616),
  to(#c05d07),
  color-stop(0.6, #eb1e55)
 );
}

// attention : l'image est aussi indiquée sur le <body dans le <html> et sur le <html dans le <head>: pas réussi à trouver pourquoi sinon ça ne marche pas dans firefox
.mb_overlay {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0px;
 left: 0px;
 background-image: url(https://www.lacor.info/film/bitter_money/img/large/bitter_money_13.jpg);
 background-position: left center;
 background-repeat: no-repeat;
 background-size: cover;
 z-index: $zoverlay;
}

.mb_trame {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0px;
 left: 0px;
 background: transparent
  url(https://www.lacor.info/gnrl/images/pattern/black_thin_dotted.png);
 background-position: left center;
 background-repeat: repeat;
 z-index: $zbody;
}
.iframe-phone{
 display: block;
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 z-index: $zwrapper;
 @include breakpoint(XX-S) {
  @include wrapper(bgXX-S);
 }
 @include breakpoint(XXS) {
  @include wrapper(bgXXS);
 }
 @include breakpoint(XS) {
  @include wrapper(bgXS);
 }
 @include breakpoint(S) {
  @include wrapper(bgS);
  display:none;
 }
 @include breakpoint(M) {
  @include wrapper(bgM);
  display:none;
 }
 @include breakpoint(XM) {
  @include wrapper(bgXM);
 display:none;
 }
 @include breakpoint(XXM) {
  @include wrapper(bgXXM);
 display:none;
 }
 @include breakpoint(L) {
  @include wrapper(bgL);
  display:none;
 }
 @include breakpoint(XL) {
  @include wrapper(bgXL);
   display:none;
 }
}

.iframe-desktop {
 display: block;
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 z-index: $zwrapper;
 @include breakpoint(XX-S) {
  @include wrapper(bgXX-S);
  display:none;
 }
 @include breakpoint(XXS) {
  @include wrapper(bgXXS);
  display:none;
 }
 @include breakpoint(XS) {
  @include wrapper(bgXS);
  display:none;
 }
 @include breakpoint(S) {
  @include wrapper(bgS);
 }
 @include breakpoint(M) {
  @include wrapper(bgM);
 }
 @include breakpoint(XM) {
  @include wrapper(bgXM);
 }
 @include breakpoint(XXM) {
  @include wrapper(bgXXM);
 }
 @include breakpoint(L) {
  @include wrapper(bgL);
 }
 @include breakpoint(XL) {
  @include wrapper(bgXL);
 }
 section.footer-mobile {
  display: block;
  background: $bgreal;
  bottom: 0x;
  left: 0;
  z-index: $zfooter;
  text-align: justify;
  color: $color_exp;
  font-size: .8em;
  font-family: $schoolbell;
  line-height: 1.8em;
  position: fixed;
  p {
   margin: 0 2.5em 0 3.2em;
   padding: 2.3em;
   font-family: $sans;
  }
  // Ne sert qu'à régler le responsive : ON PEUT NE PAS LE METTRE DANS LA VERSION FINALE !!!//
  @include breakpoint(XX-S) {
   @include background(bgXX-S);
  }
  @include breakpoint(XXS) {
   @include background(bgXXS);
  }
  @include breakpoint(XS) {
   @include background(bgXS);
  }
  @include breakpoint(S) {
   @include background(bgS);
  }
  @include breakpoint(M) {
   @include background(bgM);
  }
  @include breakpoint(XM) {
   @include background(bgXM);
  }
  @include breakpoint(XXM) {
   @include background(bgXXM);
  }
  @include breakpoint(L) {
   @include background(bgL);
  }
  @include breakpoint(XL) {
   @include background(bgXL);
  }
 }
}
.retour {
 position: absolute;
 top: 1vh;
 left: 3vw;
 width: 20vw;
 height: 10vh;
 z-index: $zfooter;
}
.exp {
 font-size: .9em;
 line-height: 1.7em;
 font-family: $sans;
 color: $color_exp;
 i {
  color: lighten($color_exp, 30);
 }
}
iframe {
 width: 100%;
 border: 0;
 background-color: transparent;
 overflow-y: auto;
}

.message {
 margin: 3% 8% auto auto;
 text-align: right;
 font-size: 1.2em;
 color: white;
 text-shadow: 1px 1px 1px #000;
}

.credit {
 position: absolute;
 bottom: 24px;
 right: 24px;
 margin: 0;
 z-index: 100;
 font-size: 0.8em;
 color: #999;
 float: right;
 @include breakpoint(XXS) {
  display: none;
 }
 @include breakpoint(XX-S) {
  display: none;
 }
 @include breakpoint(XS) {
  display: none;
 }
 @include breakpoint(S) {
  bottom: 14px;
 }
}

.credit a {
 color: #fff;
 text-decoration: none;
}

/*.disclaimer {
 color: white ;
}*/