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

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

  --pos-text:24px;
  --pos-text-e1:24px;

  --pos-bottom:0px;

  --red-border-height:24px;
  --red-border-width:4px;
  --red-border-gap:8px;

  --text-max-width:190px;

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

.visible .text-block
{
  transform:translateY(-50%);
}



.banner-bottom {
 position:absolute;
top:0!important;
  left:45%!important;
 

  width:55%!important;
  height:100%!important;
 
 
}

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

.mention p {
  text-align:right!important;
  
  padding-right:40px!important;
 
}

.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-right {
  display:flex;
  flex-direction:column;
  gap:0;
  padding-right:0!important;
  
  align-items:flex-end!important;
 
  
  padding-right:66px!important;

}


.cta-container {
  width:100%;
  display:flex;
  justify-content:center;
  position:absolute;
  top:26px!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 .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-right img {
  
   
   max-height:32px!important;
}



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

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

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

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






.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, .ec.e3-c .img-container {
  background:#3b3941;
  opacity:1!important;
 
}


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

.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 {
 
  font-size:var(--font-size-s3);
   text-transform:uppercase;
}
.prefix-2
{
  transform:translateY(65%);
}

.conditions-2
{
  white-space: nowrap;
}
.e3-c p
{
  font-size:var(--font-size-s2);;
}

.visible.e3-c .text-block
{
  max-width:280px;
}

@keyframes fadeInRight {
    0% { opacity: 0; transform: translateX(40%) translateY(-6px); }
    10% { opacity: 1; transform: translateX(-16px)  translateY(-6px); }
    85% { opacity: 1; transform: translateX(-16px)  translateY(-6px); }
    95% { opacity: 0; transform: translateX(40%) translateY(-6px); }
    100% { opacity: 0; transform: translateX(40%) translateY(-6px); }
}