@font-face {
  font-family: toyota-regular;
  src: url(fonts/ToyotaType-Regular.otf);
}
@font-face {
  font-family: toyota-book;
  src: url(fonts/ToyotaType-Book.otf);
}
@font-face {
  font-family: toyota-semi-bold;
  src: url(fonts/ToyotaType-Semibold.otf);
}
body {
  max-width:var(--banner-width);
  max-height:var(--banner-height);
  padding:0;
  margin:auto;
 
  font-family: toyota-regular;

}
#banner {
  width: var(--banner-width);
  height: var(--banner-height);
  max-width:100%;
  max-heiht:100%;
  overflow:hidden;
}
.wrapper {
  display: grid;
  position: relative;
  width:100%;
  height:100%;
}
.wrapper .ec {
  grid-area: 1 / 1 / 2 / 2; 
  position: relative; 
   opacity: 0;
  color:white;
  font-family: toyota-book;
  transition: opacity 0s linear;
}


/**** Ecrans  ****/

.ec .img-container, .ec .img-container-prev, .ec .img-container-next {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.visible.ec .img-container-next {
  opacity:0.5;
}
.visible.ec .img-container-prev {
  opacity:0;
}
.wrapper .ec.visible {
  opacity: 1;
  z-index: 3;
}
.logo {
  position:absolute;
  top:0;
  right:0;
  z-index:4;
}


/**** Ecran 1  ****/

.ec.e1 {
  animation-delay: calc(0s * var(--speed));
  z-index: 1;
}
.ec.e1 .img-container, .ec.e2 .img-container {
   background:url(img/e1.jpg);
   background-repeat: no-repeat;
}
.visible.e1 .text-block {
  top:var(--pos-text-e1);
}
.e1 .text-block .brand {
  font-family:toyota-semi-bold;
  font-size: var(--font-size-s6);
}


/**** Ecran 2  ****/
.ec.e2 {
  animation-delay: calc(5s * var(--speed));
  z-index: 1;
}
.ec.e2 .img-container-next {
   background:url(img/e3.jpg);
   background-repeat: no-repeat;
   opacity:0;
   transition-property: opacity;
   transition-timing-function: linear;
   transition-duration: calc(0.15s * var(--speed));
   transition-delay: calc(4.85s * var(--speed));
}
.visible.e2 .banner-bottom .cf {
   animation-name: fadeInZoom;
   animation-duration: calc(0.3s * var(--speed));
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
   opacity:0;
   animation-delay: calc(0.5s * var(--speed));
}


/**** Ecran 3  ****/

.ec.e3 {
  animation-delay: calc(10s * var(--speed));
  z-index: 1;
  opacity: 0.5;
  transition: opacity 0s linear;
}

.ec.e3 .img-container {
   background:url(img/e3.jpg);
   background-repeat: no-repeat;
}
.ec.e3 .img-container-prev {
   background:url(img/e3.jpg);
   background-repeat: no-repeat;
   transition-property: opacity;
   transition-timing-function: linear;
   transition-duration: calc(0.25s * var(--speed));
}
.ec.e3 .img-container-next {
   background:#3b3941;
   opacity:0;
   transition-property: opacity;
   transition-timing-function: linear;
   transition-duration: calc(0.25s * var(--speed));
   transition-delay: calc(4.75s * var(--speed));
}
.e3 .ajust {
  
  display:inline-block;
  letter-spacing: -0.1rem;
}


/**** Ecran 4  ****/

.ec.e4 .img-container-prev {
   background:url(img/e3.jpg);
   background-repeat: no-repeat;
   opacity:0.5;
   transition-property: opacity;
   transition-timing-function: linear;
   transition-duration: calc(4s * var(--speed));
}
.ec.e4 .img-container {
  background:#3b3941;
  opacity:0.5;
  transition-property: opacity;
  transition-timing-function: linear;
  transition-duration: calc(0.25s * var(--speed));
}
.ec.e4.visible .img-container {
  opacity:1;
}
.visible.e4 .text-block {
  top:38%;
  transform:translateY(-50%);
}


/**** TEXTES ****/

.visible .text-block {
  position:absolute;
  left:0px!important;
  top:var(--pos-text);
  display:flex;
  align-items:center;
  gap:var(--red-border-gap);
  font-size:var(--font-size-s5);
  max-width:var(--text-max-width);
  text-transform:uppercase;
  line-height:1;

}
.text-block .text-content {
  opacity:0;
  text-shadow: 0 0 57px rgba(0, 0, 0, 0.25);
}
.visible .text-block .text-content {
  animation-name: fadeInLeft;
  animation-duration: calc(4.75s * var(--speed));
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: calc(0.25s * var(--speed));
}
.text-block .brand {
  font-size:var(--font-size-s6);
  font-family:toyota-regular;
}
.red-border {
  width:var(--red-border-width)!important;
  max-width:var(--red-border-width)!important;
  min-width:var(--red-border-width)!important;
  height:var(--red-border-height);
  background:#ff0021;
  opacity:1;
  z-index:1;
}
.visible .red-border {
   animation-name: fadeInOutZoom;
   animation-duration: calc(5s * var(--speed));
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}

.ec .mention {
  position:absolute;
  bottom:var(--pos-bottom);
  width:100%;
  line-height:1.1;
}
.visible.ec .mention {
   animation-name: fadeOutBottom;
   animation-duration: calc(0.25s * var(--speed));
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
   animation-delay: calc(4.5s * var(--speed));
}
.mention p {
  text-align:center;
  font-family: toyota-book;
  font-size:var(--font-size-s2);
  padding-left:0;
}

/***** PRIX ******/

.block-price {
  font-family: toyota-regular;
  line-height: 1;
}
.price {
  font-size:var(--font-size-s8);
  line-height: 1;
}
.price sup {
  font-size:var(--font-size-s7);
  font-family: toyota-book;
}
.sufix {
   font-size:var(--font-size-s4);
   display:inline-block;
   transform:translateX(-2.5em)
}
.prefix, .conditions {
  padding-left:0.34em;
  font-size:var(--font-size-s3);
   text-transform:uppercase;
}
.prefix
{
  transform:translateY(65%);
}


/***** BOTTOM ******/

.banner-bottom {
  position:absolute;
  bottom:0;
  left:0;
  font-family: toyota-book;
  display:flex;
  width:100%;
  justify-content:space-between;
  padding-bottom:var(--font-size-s4);
}


.banner-bottom .col-left {
  display:flex;
  flex-direction:column;
  gap:0;
  padding-left:var(--font-size-s4);
  opacity: 0;
}

.visible .banner-bottom .col-left {
  animation-name: fadeInLeft;
  animation-duration: calc(4.75s * var(--speed));
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: calc(0.5s * var(--speed));
}



.banner-bottom .col-right {
  display:flex;
  flex-direction:column;
  gap:0;
  padding-right:var(--font-size-s5);
  padding-top:var(--font-size-s6);
  align-items:flex-end;
}
.visible .banner-bottom .col-right img {
  opacity: 0;
}
.visible .banner-bottom .cf {
  font-size:var(--font-size-s1);
}

.visible .banner-bottom .col-right img {
  animation-name: fadeInRight;
  animation-duration: calc(4.75s * var(--speed));
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: calc(0.5s * var(--speed));
}





/***** CTA ******/

.cta-container {
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  position:absolute;
  top:65%;
}
.cta-container a {
  border:1px solid white;
  padding:0.5rem 1rem 0.6rem 1rem;
  color:white;
  text-decoration:none;
  opacity:0;
  font-family: toyota-book;
  font-size:var(--font-size-s4);

  display:flex;               /* transforme le <a> en flex */
  justify-content:center;     /* centre horizontalement le texte */
  align-items:center;         /* centre verticalement le texte */

  line-height:1;              /* évite que la hauteur de ligne fausse le centrage */
}
.visible .cta-container a {
  animation-name: fadeInOutZoom;
  animation-duration: calc(4.25s * var(--speed));
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: calc(0.5s * var(--speed));
}
.a-container
{
  
  display:inline-block;
}

/***** Annimations ******/

@keyframes fadeInLeft {
    0% { opacity: 0; transform: translateX(-40%); }
    10% { opacity: 1; transform: translateX(0); }
    85% { opacity: 1; transform: translateX(0); }
    95% { opacity: 0; transform: translateX(-40%); }
    100% { opacity: 0; transform: translateX(-40%); }
}

@keyframes fadeInZoom {
    0% { opacity: 0; transform: scale(0); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes fadeInOutZoom {
    0% { opacity: 0; transform: scale(0); }
    10% { opacity: 1; transform: scale(1); }
    90% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0); }
}
@keyframes fadeOutBottom {
    0% { opacity: 1; transform: translateY(0%); }
    100% { opacity: 0; transform: translateY(40%); }
}