/************************ Spécifique   ********************************/
:root {
  --banner-width: 320px;
  --banner-height: 100px;

  --font-size-s1: 8px; /* Voir conditions */
  --font-size-s2: 8px; /* Pour les trajets courts.... */
  --font-size-s3: 10px; /* A partir / LOA 37 mois.... */
  --font-size-s4:16px; /* /mois */
  --font-size-s5: 15px; /* Textes   */
  --font-size-s6: 14px; /* Toyota / Portes ouvertes */
  --font-size-s7: 18px; /* €  */
  --font-size-s8: 24px; /* Prix  */

  --pos-text:14px;
  --pos-text-e1:14px;

  --pos-bottom:0px;

  --red-border-height:54px;
  --red-border-width:4px;
  --red-border-gap:4px;

  --text-max-width:190px;

  /* vitesse globale des anims (1 = normal (4 écrans de 5s), >1 = plus lent, <1 = plus rapide) */
  --speed: 0.5;
}




.ec .mention {
  position:absolute;
  bottom:var(--pos-bottom);
  width:100%;
  line-height:1.1;
}



.logo {
  
  top:-4px!important;

 
}

.logo img {
  
  max-height:84px;
 
}

.text-block .text-content {
 word-spacing:0.1rem;
 letter-spacing:0.05rem!important;
 line-height:0.9;

}





.banner-bottom .col-left {
 padding-left:24px!important;
 
 justify-content:flex-end!important;
 padding-bottom:4px!important;

}
.banner-bottom .cf
{
  position:absolute;
  
  text-align:left!important;
  bottom:26px;
  right:22px;
  

}
.sufix
{
  margin-left:18px;
}

.block-price, .prefix {
  padding-left:64px!important;
}


.cta-container {
 
  
}
.cta-container {
  width:100%;
  display:flex;
  justify-content:center;
  position:absolute;
  top:69%!important;
  right:-17%!important;
  transform:translateY(-50%);
}
.cta-container a {
   border:1px solid white;
    padding:0.25rem 0.5rem!important;
   color:white;
   text-decoration:none;
   opacity:0;
   font-family: toyota-book;
    font-size:10px!important;
    vertical-align: middle;
}

.ec.e2 .img-container-next, .ec.e3 .img-container-next {
   background:#3b3941!important;
   z-index: 1;
  opacity: 0;
   transition-property: opacity;
   transition-timing-function: linear;
   transition-duration: calc(0.25s * var(--speed));
   transition-delay: calc(4.75s * var(--speed));
  
}

.visible.ec.e2 .img-container-next, .visible.ec.e3 .img-container-next
{
   opacity: 0.5;
}


.ec.e2-b {
  animation-delay: calc(5s * var(--speed));
  z-index: 1;
   opacity: 0.5;
  transition: opacity 0s linear;
}
.ec.e2-b .img-container {
   background:#3b3941;;
   background-repeat: no-repeat;
}
.ec.e2-b .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-b .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));
}

.ec.e2-b .img-container-prev {
   background:url(img/e1.jpg);
   background-repeat: no-repeat;
   transition-property: opacity;
   transition-timing-function: linear;
   transition-duration: calc(0.25s * var(--speed));
}
.ec.e2-b .img-container-next {
    background:url(img/e3.jpg);
   opacity:0;
   transition-property: opacity;
   transition-timing-function: linear;
   transition-duration: calc(0.25s * var(--speed));
   transition-delay: calc(4.75s * var(--speed));
}




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

.ec.e3-b .img-container {
   background: #3b3941;
   background-repeat: no-repeat; 
}
.ec.e3-b .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-b .img-container-next {
   background:#3b3941;
   opacity:0;
   transition-property: opacity;
   transition-timing-function: linear;
   transition-duration: 0!important;
   transition-delay: calc(4.75s * var(--speed));
}

.ec.e4 .img-container {
  background:#3b3941;
  opacity:1!important;
 
}


.ec.e2-b .text-content, .ec.e3-b .text-content
{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.block-price-2 {
  font-family: toyota-regular;
  line-height: 1;
}
.price-2 {
  font-size:var(--font-size-s8);
  line-height: 1;
}
.price-2 sup {
  font-size:var(--font-size-s7);
  font-family: toyota-book;
}
.sufix-2 {
   font-size:var(--font-size-s4);
   display:inline-block;
   transform:translateX(-4px)
}
.prefix-2, .conditions-2 {
  padding-left:0.34em;
  font-size:var(--font-size-s3);
   text-transform:uppercase;
}
.prefix-2
{
  transform:translateY(65%);
}
 
@keyframes fadeInRight {
    0% { opacity: 0; transform: translateX(40%) translateY(-24px); }
    10% { opacity: 1; transform: translateX(-48px) translateY(-24px); }
    85% { opacity: 1; transform: translateX(-48px) translateY(-24px); }
    95% { opacity: 0; transform: translateX(40%) translateY(-24px); }
    100% { opacity: 0; transform: translateX(40%) translateY(-24px); }
}