body{
    overflow-x: visible;
}


.blogAccess{
    display: flex;
    justify-content: end;
    text-decoration: none;
}

.blogAccess:hover{
    text-decoration: underline #002060;
}


a.blogAccess:visited {
    color: #002060;
    text-decoration: none;
  }

nav {
    width: auto;
}

 @media (min-width: 768px) {
    .modal-dialog {
        max-width: fit-content !important;
    }
} 


 @media (max-width: 768px) {
    .modal-dialog {
        max-width: 100% !important;
    }
} 

/* 3d on book */

.text-3d {
    display: inline-block;
    position: relative;
    transition: all 0.5s ease-out;
}

.text-3d:hover {
    transform: rotateY(20deg);
}

.text-3d:before,
.text-3d:after {
    position: absolute;
    content: attr(data-text);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform-origin: 0 0;
    transition: all 0.5s ease-out;
}




/* buttons  */
.button {
    padding: 3px 6px;
    border-radius: 4px;
    transition: transform 0.2s ease-out;
  }
  
  .button:hover {
    transform: translateY(-3px);
  }
  
  .button3 {
    position: relative;
    background-color: #DA291C;
    color: #fff;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    transition: transform 0.2s ease-out;
    overflow: hidden;
  }
  
  .button3:before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-color: rgba(255, 255, 255, 0.2);
    transform: rotate(45deg);
    z-index: -1;
    transition: transform 0.5s ease-out;
  }
  
  .button3:hover {
    transform: translateY(-5px);
  }
  
  .button3:hover:before {
    transform: translate(50%, 50%) rotate(45deg);
  }
  
  

.redBg {
    background-color: #DA291C;
}

.whiteBg {
    background-color: white;
}

.blackBg{
    background-color: #212529;
}

.blackPol {
    background-color: #002060;
    color: black;
    padding-bottom: 4rem !important;
}


.copyright{
    font-size: small;
}



.author {
    color: black;
    font-size: small;

}

img {
    border-radius: 10px;
}

h5 {
    width: 100%;
    text-align: center;
}




/* card responsiv */
.prettyCard{
display: flex;
flex-direction: column;
justify-content: space-around;
}


/* book hover */
.imgWrapper {
    position: relative;
    width: 50%;
}

.image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
    /* border:1px solid #41484a; */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.imgWrapper:hover .image {
    opacity: 0.3;
}

.imgWrapper:hover .middle {
    opacity: 1;
}

.text1 {
    background-color: #DA291C;
    color: white;
    font-size: 14px;
    padding: 16px 32px;
    border-radius: 10px;
    border: none;
}

.text1:hover {
    color: white
}

.text {
    background-color: #002060;
    color: white;
    font-size: 14px;
    padding: 16px 32px;
    border-radius: 10px;
    border: none;
}

.text:hover {
    color: white
}


  .carousel-control-next,
.carousel-control-prev,  .carousel-indicators {
    filter: invert(100%);
}

/* canva et carousel */
.carousel-caption {
    width: 100%;
    position: absolute;
    right: 0 ;
    bottom: 1.25rem;
    left: 0;
    padding-top: 1.5rem;
    padding-bottom: 0 ;
    color: #fff;
    text-align: center;
}

.offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
     padding: 0.5rem 1rem;
}

.offcanvas-body {
    flex-grow: 1;
    padding: 0.5rem 1rem;
    overflow-y: auto;
}


.arrowIcon{
    padding-left: 0.5rem;
}

 /* Menu défilant */
.marquee-container {
    width: 100%;
    overflow: hidden;
    background-color: #DC3545; /* Couleur de fond */
    white-space: nowrap;
  }

  /* Texte de la bande défilante */
  .marquee-text {
    display: inline-block;
    font-size: 4vw; /* Taille de texte responsive */
    padding: 10px 0;
    color: #fff; /* Couleur du texte */
    animation: scroll-left 20s linear infinite;
    padding-right: 100%; 
  }

  /* Animation de défilement */
  @keyframes scroll-left {
    from {
      transform: translateX(70%);
    }
    to {
      transform: translateX(-50%);
    }
  }

  @media (max-width: 425px) {
    @keyframes scroll-left {
        from {
            transform: translateX(10%);
        }
        to {
            transform: translateX(0%);
        }
    }

    .marquee-text {
        animation: scroll-left 25s linear infinite; /* Ajuste la durée si nécessaire */
    }
  }

  @media (max-width: 768px) {
    @keyframes scroll-left {
        from {
            transform: translateX(60%);
        }
        to {
            transform: translateX(-40%);
        }
    }

    .marquee-text {
        animation: scroll-left 10s linear infinite; /* Ajuste la durée si nécessaire */
    }
  }

  /* Apparence du lien */
  .marquee-link {
    text-decoration: none;
    color: inherit;
  }

  /* Style pour l'effet au survol */
  .marquee-link:hover .marquee-text {
    color: #002060; /* Couleur au survol */
  }

  /* Taille de texte ajustée pour tablettes */
  @media (min-width: 768px) {
    .marquee-text {
      font-size: 2.5vw;
    }
  }

  /* Taille de texte ajustée pour ordinateurs */
  @media (min-width: 1024px) {
    .marquee-text {
      font-size: 1.2vw;
    }
  }


  @media (max-width: 319.98px) {
    .marquee-text {
        margin-top: 10px; /* Valeur pour < 320px */
    }
}

/* 320px à 375px */
@media (min-width: 320px) and (max-width: 374.98px) {
    .marquee-text {
        margin-top: 125px;
        padding-top:15px
    }
}

/* 375px à 425px */
@media (min-width: 375px) and (max-width: 425.98px) {
    .marquee-text {
        margin-top: 80px; 
        padding-top:20px
    }
}

/* 425px à 768px */
@media (min-width: 426px) and (max-width: 767.98px) {
    .marquee-text {
        margin-top: 25px; 
    }
}

/* 768px à 1024px */
@media (min-width: 768px) and (max-width: 1024.98px) {
    .marquee-text {
        margin-top: 100px; 
    }
}

/* 1024px à 1440px */
@media (min-width: 1025px) and (max-width: 1439.98px) {
    .marquee-text {
        margin-top: 35px; /* Valeur pour 1024px à 1440px */
    }
}

/* > 1440px */
@media (min-width: 1440px) {
    .marquee-text {
        margin-top: 100px; /* Valeur pour > 1440px */
        padding-top:20px
    }
}