:root{
    --bg-color: #ebebeb;
    --color: #6a2fa4;
    --card-color: #928a8a;
    --langbg: #e0e7ff;
    --bs-border-color: rgba(25, 135, 84, 0.2);
    --blog-txt-color: rgb(100, 100, 100);
}
.bg-primary{
    background-color: #316bf2 !important;
}
.btn:focus {
  outline: 0;
  box-shadow:none;
}
.ffp{
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
}
.txt2lgns {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.txt3lgns {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}
.text-sm {
  font-size: .875rem;
  line-height: 1.25rem;
}
#toast .box-shadow{
  box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
}
.tflex{
  display: flex;
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-justify{
  text-align: justify;
}
.card-header {
  padding: .5rem .5rem !important;
}

input:focus-visible, input:focus, textarea{
  outline: none !important;
  box-shadow: none !important;
}
.artcl-corps{
    padding-top: 30px;
    margin-right: 1em
}
.artcl-corps::first-letter {
  font-size: 4em;
  font-weight: bold;
  float: left;
  margin:0px 0px 5px 0.5em;
    color: #413d3d;
}
body{ position: relative; background-color: var(--bg-color);font-family: "eurostile", sans-serif; }
.row{
    max-width: 100%;
}
.nav{ margin-bottom:30px; position: absolute; top: 00; z-index: 99999; background-color: #473d7b;color: white; } 
nav{ margin-left: 2%; }
 nav .nav-item{ margin-left: 100px; }
.imgP{
    height: 140px;
    width: 140px;
    border-radius: 100%;
    margin: auto;
    overflow: hidden;
}
.imgP img{
    width: 100%;
}
.imgP:hover{
    height: 143px;
    width: 143px;
    border: 1px solid red;
}
.ind-sect2{
    margin-top: 30px;
    text-align: center;
}
.ind2 h2{ text-align: center; } 
#comp{ text-align: center; }
.card{ margin:auto; margin-bottom: 30px; }
.ind3 .card {
    width: 90%;
    font-family: "eurostile", sans-serif;
    text-align: center;
    box-shadow: 4px 4px 6px 0px #ccc;
}

.ind3 .col-md-4{
     padding: 1rem;    
     padding-bottom: 2rem;
}

@media screen and (max-width:767px){
    .ind3 .col-md-4:not(:last-child){
       border-bottom: 0.2rem var(--bg-color) solid; 
    }
    
}
.ind3 .comp-title:not(.comp-icon){
    font-weight: 700;
    margin-bottom: 1rem;
}

.ind3 .comp-desc .desc-text{
    margin-bottom: 1rem
}

/*.card-img-top{ height: 200px; transition: transform 2s; transform-origin: center; }
img:hover{ transform: scale(1.05); }
.card-body{height: 250px; }*/
.card-text{ margin-top: 30px; }
.cart-text a i{color:#664eda; }
.cart-text a i:hover{color:blue}
.cart{margin: auto; height: 230px; width:90%; background-color: #cae3a8; margin-bottom: 40px; text-align: center;padding-top: 15px; border-radius: 10px}
.cont-sect2 .cart{
    margin-bottom: 10px;
    max-height: 180px
}
.card-title{ text-align: center; color: #6a2fa4; } 
.cart .cart-text{ margin-top: 30px; word-wrap: break-word; } 
.cart .cart-text a{color: #6a2fa4; text-decoration: none; font-weight: bold; font-family: Times New Roman; } 
.cont-sect2 .bi{ font-size: 50px; } 
.cont-sect2{
    background-color: #fff;
    padding: 2%;
    padding-bottom: 50px;
    margin-top: 60px;
} 
.cont-sect1{     margin-top: 10px; height: 90px; text-align: center; }
.hr{display: flex; justify-content: center; align-items: center; margin-bottom:30px; } 
hr{ width: 130px; padding: 1px; color: red; opacity: 2; } 
.hrc{ width:90px; padding: 1px; color: red; opacity: 2; } 
.dem{ margin-left: 10px; } 
.logo{text-align: right; padding-right: 00px; } 
.log{ margin-top: 50px;padding-bottom: 45px; } 
.col-md-4 .teck{ font-weight: bold; padding-left: 1px;} 
.ind3{ margin-top: 40px; background-color: #fff;padding-bottom: 30px;padding-top: 30px;margin-bottom: 30px;box-shadow: 0px 0px 16px 8px #fff;} 
.txt{  } 
/*dyn wr*/
.ind1{ min-height: 50px;     text-align: center; color: var(--color); font-weight: bold; }
#dynamic-paragraph {position: relative; font-size: 17px; background-color:#ffff; padding:5px; border:1px solid #ded6d6; border-radius: 5px; border-right:2px solid black; border-bottom-right-radius: 0px; border-top-right-radius: 0px;} 
#dynamic-paragraph::after{ content: "|"; color: red; position: absolute; right:0; animation: cursor-blink 0.7s infinite; font-size: 17px; } 
@keyframes cursor-blink{ 0%{ opacity: 0; } 50%{ opacity: 1; } 100%{ opacity: 0; } }
.partie-slid{ 
    margin:auto;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s, transform 1s;
}
.partie-slid.show{
    opacity: 1;
    transform: translateY(0);
}
.partie-slidX{
    transform: translateX(50px);
}body{
    position: relative;
}
.row{
    margin: 0;
    padding:0;
}
.back{
  background-image: url(https://mjimsdenla.online/assets/img/background.jpg);
  min-height: 350px;
  color: white;
}
.back p{
  background-color: rgba(0, 0, 0, 0.5);
  margin-top: 0;
  padding: 5px;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: justify;
  min-height: 160px;
}
#ca{
    color: red;
    font-size: 40px;
}
.flotant{
    padding-top:0;
    float: left;
    font-size: 40px;
    font-family: serif;
    margin-left: 10px;    
}

.text {
  display: inline-block;
  animation: slide-in 5s linear;
  font-family: Roboto Condensed,sans-serif;
  letter-spacing: .02em;
  font-size: 30px;
  color: var(--color);
  text-transform: uppercase;
  font-weight: 700
}
.letter{
  font-size: 36px;
  color: red;
  font-weight: bold;
  letter-spacing: -0.4rem
}
.comp-sect3{
  text-align: center;
  flood-opacity: 0.2;
}
@keyframes slide-in {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.ind3  .bi{
    color: #000;
    font-size: 44px;
}
/* projet  */
.ind4 .card{
    background-color: #fff;
}
.ind4 .tete{
    margin-bottom: 10px;
}
.ind4 .desc{
    text-align: justify;
    color: #655a59;
    font-family: Verdana;
    font-size:12px;
    min-height:200px;
    padding:5px;
}
.ind4 a{
    text-decoration: none !important;
}
.ind4 h3{
    text-align: center
}
.ind4 .desc button{
    width: 100%;
    height: 38px;
    border-radius: 0px;
}
@media (min-width:768px){
    .lf{
        height: 318px;
        display: flex;
        justify-content:  center;
        text-align: center;
        align-items:  center;
    }
}
.lfb{
    text-align: center;
}
body{
    position: relative;
    padding-bottom: 0px !important;
}
.stricky{
    position: absolute;
    bottom: 45vh !important;
    z-index: 9;
    left: 5px;
    border: 1px solid #ccc;
    width:30px;
    text-align: center;

}
.card .tete img{
    max-height: 200px !important;
}

footer{
    text-align: center;
    padding-top: 15px;
    padding-bottom: 1px
}

.gSetc {
    display: flex;
    justify-content: space-around
}
.carte {
    font-family: 'Helvetica', sans-serif;
}
/* Gallery grid */
.gallery-sect{
    width: 90%;
    margin: auto !important;
}
.gallery-sect .carte{
    margin-right: 10px;
    border-radius: 5px;
    /*! box-shadow: 2px -2px 0px #ccc; */
    position: revert-layer;
}
.gallery-sect .gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  /*! max-width: 360px;
  border: 1px solid #ccc;
  /*! margin: 10px; */
  min-width: 30%;
  border-radius: 0px;
  overflow: hidden;
  box-shadow: 1px 3px 2px #ccc;
}
.gallery-sect .row > *{
    padding-left: 00;
    padding-right: 00;
}
.gallery-sect .row{
    transform: rotate(-3deg);
}

/* .gallery-sect .row > *:nth-child(3n),
.gallery-sect .row > *:nth-child(3n-2) {
    transform: rotate(-3deg);
}

Groupes impairs (1, 2, 3, 4, 9, 10, 11, 12, ...) : rotation -10° 
.gallery-sect .row > *:nth-child(6n-5),
.gallery-sect .row > *:nth-child(6n-4),
.gallery-sect .row > *:nth-child(6n-3) {
    transform: rotate(-3deg);
}

.gallery-sect .row > *:nth-child(6n-2),
.gallery-sect .row > *:nth-child(6n-1),
.gallery-sect .row > *:nth-child(6n) {
    transform: rotate(3deg);
}
*/


.gallery-sect .image-container {
  position: relative;
  overflow: hidden;
}

.gallery-sect .image-container.large {
  grid-column: 1 / span 2;
  height: 150px;
}

.gallery-sect .image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-sect .overlay .more-count {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Lightbox */
.gallery-sect .lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.gallery-sect .lightbox img {
  max-width: 90%;
  max-height: 80%;
}

.gallery-sect .nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  padding: 10px;
  font-size: 20px;
}

.gallery-sect .nav-btn.prev {
  left: 10px;
}

.gallery-sect .nav-btn.next {
  right: 10px;
}

.gallery-sect .close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 30px;
  color: white;
  cursor: pointer;
}


.image-container:not(.large) {
  height: 150px; /* Hauteur des images en bas */
}

.proj-body{
     background-color: #fff;
    padding: 15px;
    padding-bottom: 10px;
}
.proj-title {
    font-size: 20px;
}
.proj-desc{
    color: var(--card-color);
    height: 5em;
    overflow: hidden;
    align-content: center;
}
.proj-lang{
    display: flex;
    justify-content: flex-start;
    margin-top: 0.5em;
    margin-bottom: 0.8em;
}
.proj-lang .lang-item{
    font-size: 12px;
    margin-right: 10px;
    padding: 0px 10px;
    background-color: var(--langbg);
    border-radius: 10px;
    text-transform: capitalize;
}
.proj-link {
    display: flex;
    font-size: 14px;
}
.link-item{
    margin-right: 20px;
}
.link-item i{
    margin-right: 5px;
}
.proj-link div:has(.bi-box-arrow-up-right){
    color: #b32779;
}


/* demande section */
@media screen and (min-width: 768px){
    .demande-sect{
        display: flex;
        justify-content: end
    }
    .demande-sect{
        padding-right: 40px
    }
    .cont-sect2 .col-md-4{
        margin-top: 40px;
    }
}
@media screen and (max-width: 768px){
    .gallery-sect .row {
      transform: rotate(0deg);
    }
    /*.gallery-sect .row > *:nth-child(odd) {
     transform: rotate(-3.5deg);      
    }
    .gallery-sect .row > *:nth-child(even) {
        transform: rotate(3.5deg);
        margin-top: 20px;
        margin-bottom: 20px
    }*/
    .gallery-sect .row .col-md-4{
        margin-bottom: 20px;
        border-radius: 5px;
        overflow: hidden
    }
    .gallery-sect .row .col-md-4 .gallery{
        margin: auto;
    }
    .demande-form{
        width: 100% !important;
        margin: 00;
    }
    .demande-detail{
        font-size: .9rem
    }
    .demande-sect .row > *{
        padding-right: 0;
        padding-left:00
    }
}

.demande-form{
  margin-top: 10px;
  width: 90%;
  box-shadow: #b32779 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.demande-form .col-4,.demande-form .col-8{
  padding-top: 40px;
  padding-bottom: 40px;
  font-family: Mulish, Helvetica, Arial, Sans-Serif, serif;
  font-weight: 400;
  font-size: 1.125em;
  line-height: 1.4;
  text-transform: none;
}
.demande-form .col-8{
    padding-top: 20px;
    padding-bottom: 20px;
}
.demande-form .col-4{
  background-color: #b32779;
  color: #fff;    
  text-align: center;
}
.demande-form .col-4 {
    display: flex;
  flex-direction: column;
  justify-content: center;
}
.demande-form .col-4 .demande-icon-sect {
  margin: 20px;
  overflow: hidden;
}
.demande-form .col-4 .deamande-icon{
  width: 70px;
  height: 70px;
  margin: auto;
  padding:10px;
  border: 1px solid #fff;
  border-radius: 50%;
}
.demande-form .col-4 .deamande-icon svg{
  fill:#fff
}
.demande-form .col-8 .demande-form-sect{
  padding: 20px;
  color: #71787b;
  font-family: Mulish, Helvetica, Arial, Sans-Serif, serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.4;
    text-transform: none;
}
.demande-form .col-8 .demande-form-sect label,.demande-form-sect input,.demande-form textarea{
  width: 100%;
  background: transparent;
  border: none;
}
.demande-form-sect label{
  margin-bottom: 5px
}
.demande-form-sect input,.demande-form textarea{
  border-bottom: 1px solid #b32779;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 40px;
  resize: none;
}
.demande-form textarea:focus{
  outline: none;
}
.demande-form .valid-sauve{
  display: flex;
  justify-content: center;
}
.demande-form .valid-sauve button{
  background-color:#b32779;
  color: #fff
}


/*div:has(.display){
    background: #fff;
    padding: 4em;
}*/

div.display{
    display: flex;
    justify-content: space-between;
  /*! width: 90%; */
  margin: auto;
   text-align: center;
}

.contact-us{
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    
}
.cc .bi{
     color:  #b32779 !important;
    font-size: 50px
}
.cart-text{
    font-weight: 700;
    color: #b32779;
    margin-bottom: 30px
}
.cart-text a:visited{
    color: #000 !important;
    text-decoration: none
}

.email .bi{
    font-size: 50px;
}
.detail {
    font-size: 20px;
    font-family: sans-serif ;
    font-weight: bold;
    letter-spacing: -0.08em;
    margin-bottom: 10px;
}
@media screen and (max-width:540px){
   .back{
    background-image: url(https://mjimsdenla.online/assets/img/background.jpg);
    min-height: 370px;
  }
  .back p{
     min-height: 250px;
     line-height: 1.9em;
  }
  .cont-sect1 h3,
  .text{
        font-size: 18px !important;
    }
    .back p, .ind3 .col-md-4{
         font-size: 0.9em
    }
    
    #ca, .letter{
        font-size: 20px;
    }
    .contact-us{
        font-size: 20px;
    }
    .detail {
        font-size: 15px;
    }
    .cont-sect2:has(.contact-us){
        font-size: .9em;
    }
    .cont-sect2:has(.contact-us) .cart-text{
        margin-bottom: 20px;
    }
}
/* #comptences */
.layer-slide {
  overflow: hidden;
  white-space: nowrap;
}
@media screen and (min-width:840px){
    #dynamic-paragraph{
        font-size: 25px;
        margin-bottom: 20px;
    }
    .ind1{
        margin-bottom: 20px;
    }
    #dynamic-paragraph::after{
        font-size: 25px;
    }
}
@media (max-width: 480px){
    .demande-form .col-4, .demande-form .col-8{
        width: 100%;
    }
}


/* blog */

.blog-page{
  color: var(--blog-txt-color);
}

#blog .row *{
  margin:0;
}
.blog-page main{
  width: 90%;
  margin: auto;
}
.blog-page .publicite{
    margin-top: 10px;
    padding: 1.5em;
    border: 5px #ccc double;
    
}

.articles .img img{
  max-width: 100%;
}
#blog .row{
  max-width: 100%;
  margin: auto;
}
.articles{
  margin-bottom: 30px;
}
.blog-page .article-title{
    font-family: Roboto, Arial, sans-serif;
  padding: 10px 15px 0px 0px;
  font-size: 36px;
  line-height: 48px;
  font-weight: 900;
  color: rgb(155, 155, 155);
  width: 100%;
}
.blog-page .article-img img{
  width: 100%;
}
.articles .datepub{
  margin-bottom: 15px;
}
iframe{
  max-width: 100% !important;
}

.atr-artcl-ttl{
    background: var(--bg-color);
}
.blog-page .artcls .card-body{
    height: 105px;
}
.artcls-img{
    height: 134px;
}

.autre-articles .atr-list img{
    height: 75px;
    width: 100%;
}
.autre-articles a{
  color: var(--blog-txt-color);
  text-decoration: none;
}

@media screen and (min-width:768px){
    .ind3 .col-md-4:not(:first-child){
    border-left: 0.2rem var(--bg-color) solid
    }
    #artcl-mntr{
        height: 300px
    }
}