/* style personnalisé appliqué pour desctop grands ecrans */
@media only screen and (min-width: 1025px) {

  .img-container{
    width: 20rem;
    height: 100%;
    border-radius: 5%;

  }
  .img-blog{
    width: 100%;
    height: 100%;
    border-radius: 5%;
    /* object-fit: cover; */
    
  }
  
    /* Position the "next button" to the right */
    .prev-slide, .next-slide {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      margin-top: -22px;
      padding: 16px;
      color: var(--menu-color);
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
      background-color: var(--gris-color);
    }
    .next-slide {
      right: 0;
      border-radius: 3px 0 0 3px;
    }
    /* On hover, add a black background color with a little bit see-through */
    .prev-slide:hover, .next-slide:hover {
      background-color: rgba(0,0,0,0.8);
    }
      .container-slider{
        /* width: 100%; */
        height: auto;
       padding: 1rem;
     
    }
    .mySlides {
      display: none;
    }
    .slideshow-container{
      max-width: 85%;
       position: relative;
       margin: auto;
       /* min-height: 300px; */
      }
      .img-affiliate{
        width:428px;height:100%;border-radius:.4rem;margin-left:0;margin-right:0;
      }
      
        .card-grid-affiliation {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(14.275rem, 1fr))  ;
        grid-row-gap: 1rem;
         grid-column-gap: 1rem;
      }
       .card-products-affiliation {
        animation: fadein 900ms;
        height: auto;
        max-width: 15rem;
        position: relative;
        border-radius: 0.8rem;
      }
       .card-products-affiliation:hover{
         box-shadow: 0 1px 6px rgb(204, 203, 203); 
         border: 1px solid #e2f7fa;
         /* top: 4px; */
       } 
       .btn-affiliate{
        border: 1px solid var(--light-gris-color);
        border-radius: .2rem;
        font-weight: 550;
        padding: .4rem;
        font-size: 1.3rem;
        background-color: var(--gris-color);
        color: var(--border-color);
      }
      .btn-affiliate:hover{
        color: var(--darck-color);
      }
      .img-product{
        border-top-left-radius:.5rem;border-top-right-radius:.5rem;width:100%;height:20rem;object-fit:cover;
      }
      .slogan-creativity{
        width: 1rem;
        
      }
      .creativity{
         z-index:1;position:absolute;top:35%;left:6%;
      }
    .engrenage-orange{
        z-index:2;position:absolute;top:21%;left: 14%;width:3rem;
      }
      .engrenage-bleu{
       z-index:2;position:absolute;top:30.5%;left:17%; width:3rem;
      }
      .engrenage-warning-mobile{
       z-index:2 ;position:absolute;top:29%;left:11.3%; width:3rem;
      }
       #engrenage-warning {
        animation: App-engrenage-warning infinite 35s linear;
      }
       #engrenage-bleu {
        animation: App-engrenage infinite 35s linear;
      }
       #engrenage-orange {
        animation: App-engrenage-warning infinite 35s linear;
      }
     
       @keyframes App-engrenage-warning {
        from {
          transform: rotate(360deg);
        }
        to {
          transform: rotate(0deg);
        }
      }
       .container-video-home{
        width: 80%;
       padding: 2rem;
       border: 1px solid var(--light-gris-color);
      display: flex;
      justify-content: center;
     }
      .video-home{
        background-color: black;
        max-width: 800px;
      }
      .home-img-desctop{
       width:11rem;height:11rem;border-radius:50%;object-fit:cover;
     }
     .soulignement{
      width:3rem;height:2rem;background-color:var(--warning-color);bottom:-2rem;
      margin-left: auto;margin-right: auto;border-bottom-left-radius:5rem;border-bottom-right-radius:5rem;
     }
     .soulignement-bleu{
      width:3rem;height:2rem;background-color:var(--primary-change);bottom:-2rem;
      margin-left: auto;margin-right: auto;border-bottom-left-radius:5rem;border-bottom-right-radius:5rem;
     }
       .shadow {
          width: 10rem;
          height: .4rem;
          opacity: 0.5;
          background: #777;
          border-radius: 50%;
          z-index: 1;
        }
         .scale {
          animation: scale 1s ease-in infinite;
        }
       .face {
          border-radius: 50%;
          z-index: 2;
          animation: bounce 1s ease-in infinite;
        }
       @keyframes bounce {
          50% {
            transform: translatey(-10px);
          }
        }
    
        @keyframes scale {
          50% {
            transform: scale(0.9);
          }
        }
       .avatar-author-corse{
        width: 10rem;
      }
      .rotate-select-desctop{
        transform: rotateZ(180deg);
      }
     
      .align-icon{
        display:grid;grid-template-columns:20% 80%;align-items:center;
      }
      .align{
        display:flex;align-items:center;
      }
      .icon-menu-width-desctop{ 
        width: 5.465rem;
    }
    .style-like{
      width:20px;height:20PX;cursor:pointer;
    }
      .reset-icon{
        border:none;
        position:absolute;
        top:30%;
        right:2%;
        cursor:pointer;
      }
      .stars-vide{
        background-image: url('../../images/stars-vide.png');
        background-size: cover;
    
      }
  .suggestion-width{
    width:100%;
    border-radius:.5rem;
  }
.suggestion{
  font-size: 1.5rem;
  color: var(--text-color);
  padding: .5rem;
  cursor:pointer;
  min-height: 0;
}
.suggestion:hover{
  background-color: var(--bck-color);
}
.suggestion-darija{
  font-size: 1.5rem;
  color: var(--text-color);
  padding: .5rem;
  cursor:pointer;
  min-height: 0;
  text-align: right;
}
.suggestion-darija:hover{
  background-color: var(--bck-color);
}
.test-if-exist-suggestion{
  font-size: 1.5rem;
  color: var(--text-color);
  padding: .5rem;
  cursor:pointer;
  min-height: 0;
  text-align: right;
}
.test-if-exist-suggestion:hover{
  background-color: var(--bck-color);
}
      .align-stars{
        display: grid;
        grid-template-columns:  1fr 1fr 1fr 1fr 1fr ;
        max-width: 19rem;
        cursor:pointer;
      }
      .stars-note-plein{
     background-image: url('../../images/stars.png');
        background-size: cover;
      
      }
      .row-icon{
        display: grid;
        grid-template-columns: 10% 90%;
        align-items: center;
      }
       .row-icon-litl{
        display: grid;
        grid-template-columns: 2% 98%;
        align-items: center;
      }
      .border-left{
        border-left:1px solid var(--gris-color);
      }
      #main-col{
        max-width: 80rem;
        
      }
      .medium-img{
        width: 3rem;
      }
     .nav{
       padding-right:2rem;
       padding-left:2rem;
       padding-top:2rem;
       padding-bottom: 3rem;
     }
      .sombre{
        background: rgba(252, 249, 249, 0.2);
      }
      /* checkbox de activation dea annonces des user pro */
      .container-statut-ad input[type="checkbox"]{
         position: relative;
         width: 35px;
         height: 10px;
         -webkit-appearance: none;
         background:linear-gradient(0deg,var(--menu-color),var(--menu-color));
         outline: none;
         border-radius:20px ;
        
       }
       .container-statut-ad input:checked[type="checkbox"]
        {
           background:linear-gradient(0deg, rgb(177, 214, 241) ,rgb(87, 167, 228));
        }
      .container-statut-ad input[type="checkbox"]::before{
         content: '';
         position: absolute;
         top: -3px;
         left: 0;
         width: 15px;
         height: 15px;
         background:linear-gradient(0deg,white,white);
          border-radius: 15px;
           box-shadow: 0 0 0 .1rem var(--menu-color);
           transform: scale(.98,.96);
           transition: .5s;
            }
            .container-statut-ad input:checked[type="checkbox"]::before
             {
               background:linear-gradient(0deg, var(--primary-color), var(--primary-color));
    left: 20px;
             }
          
    /*  ceci est loader de ajax */
    
      .ring {
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50px, -50%);
          width: 50px;
          height: 50px;
          background: transparent;
          border: 5px solid transparent;
          border-radius: 50%;
          z-index: 1000;
        }
        .ring::before{
          content: '';
          position: absolute;
          top: 0px;
          left: -1px;
          width: 100%;
          height: 100%;
          border: 3px solid #dedfe079;
          border-top: 3px solid rgba(0,120,212,255);
          border-right: 3px solid rgba(0,120,212,255);
          border-radius: 50%;
          animation: animateCircle 1100ms linear infinite;
        }
        @keyframes animateCircle{
          0%
          {
            transform: rotate(45deg);
          }
          100%
          {
            transform: rotate(360deg);
          }
          }
          /* ceci loader video */
            .ring-video {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50px, -50%);
          width: 150px;
          height: 150px;
          background: transparent;
          border: 5px solid transparent;
          border-radius: 50%;
          z-index: 1500;
        }
        .ring-video::before{
          content: '';
          position: absolute;
          top: 0px;
          left: -1px;
          width: 100%;
          height: 100%;
          border: 3px solid #dedfe079;
          border-top: 3px solid var(--youtube-red);
          border-right: 3px solid var(--youtube-red);
          border-radius: 50%;
          animation: animateCircle 2100ms linear infinite;
        }
        @keyframes animateCircle{
          0%
          {
            transform: rotate(45deg);
          }
          100%
          {
            transform: rotate(360deg);
          }
          }
      .danger-color{
        color:var(--youtube-red);
      }
      .align-right{
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
      }
      .background-body{
         background: linear-gradient(var(--text-color),var(--color-titles-black)); 
      }
       .background-body-pf{
         background-image: url('../../images/background-body-pf.png');
         background-size: cover;
         background-repeat: no-repeat;
      }
        .background-mawsouaa{
        background-color: #202040;
        color:var(--title-color);  }
      .ptit-background-body{
      
        background-image: url('../../images/ptit-background-body.png');
         background-size: cover;
         background-repeat: no-repeat;
      }
      .font-logo{
        font-family:'Cairo',
        /* 'Quicksand', sans-serif,'Josefin Sans',
       'Calibri',
        'Lucida Sans', 
        'Lucida Sans Regular', 
        'Lucida Grande', 
        'Lucida Sans Unicode',
         Geneva, 
         Verdana, */
          sans-serif;
      }
      .big-title{
        font-size: 8rem;
      }
      .gras{
        font-weight: bold;
      }
      .text-color{
        color:var(--text-color);
      }
      .menu-color{
         color:var(--menu-color);
      }
      .element-corse li{
        list-style: none;
        padding: .3rem;
      }
      .title-ads{
        background-color: var(--gris-color);
        padding: .5rem;
        color: var(--menu-color);
        border-radius: .3rem;
      }
      .title-ads-border{
        background-color: var(--gris-color);
        padding: .5rem;
        color: var(--primary-change);
        border-radius: .3rem;
      }
      .title-blue{
        background-color: var(--primary-change);
        padding: .5rem;
        color: var(--title-color);
        border-radius: .3rem;
      }
      .title-secondary{
        background-color: var(--secondary-color);
        padding: .5rem;
        color: var(--title-color);
        border-radius: .3rem;
      }
      .absolute-date-cv{
        position:absolute;top:0;right:0;
      }
      .marge1cv-pro ul {
        padding: .6rem;
      }
      .marge2cv-pro p{
         padding: .6rem;
      }
      .marge1cv-pro section{
        margin-top:.5rem;
    /* border: 1px solid var(--light-gris-color); */
      }
      .marge2cv-pro section{
         margin-top:.5rem;
    /* border: 1px solid var(--light-gris-color); */
      }
       .marge1cv-pro section h5{
        padding: .3rem;
         background-color: var(--gris-color);
         color: var(--secondary-color);
         text-decoration: underline;
       }
       .marge2cv-pro section h5{
          padding: .3rem;
         background-color: var(--gris-color);
          color: var(--secondary-color);
         text-decoration: underline;
       }
      .soulignement{
        text-decoration: underline;
        
      }
     .myProgressCorse{
       width: 100%;
       background-color: #cecbcb ;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
       border: 1px solid var(--light-gris-color);
       border-radius: 2rem;
       height:15px;
     }
    
     .minimyBarPassword{
      width: 10%;
      height:.555rem;
      border-radius: 3rem;
      font-size:.995rem;
      color: var(--title-color);
     }
      .minimyProgressPassword{
        width: 100%;
       background-color: #cecbcb ;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
       border: 1px solid var(--light-gris-color);
        border-radius: 5rem;
     }
     .myBarCorse{
      width: 10%;
      height: 15px;
      background-color: var(--access-color);
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 30px;
      font-size:1.765rem;
      color: white;
      font-weight: 500;
     }
     .minimyProgressCorse{
       width: 100%;
       background-color: #cecbcb ;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.002);
       border: 1px solid var(--light-gris-color);
        border-radius: 5rem;
     }
    
     .minimyBarCorse{
      width: 10%;
      height:.355rem;
      border-radius: 3rem;
      background-color: #00bd56;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size:.995rem;
      color: var(--title-color);
      font-weight: 600;
     }
      .titles-for-card{
        font-size: 1.7965rem;
        color: var(--text-color);
        letter-spacing: .0255rem;
        font-weight: 400;
      }
      .custome-search-form{
        position: fixed;
        right: 0;
        top: 1%;
        border-radius:.7rem; position:relative;height: 5.565rem; border:1px solid var(--gris-color);width:60rem;
        background-color: white;
        transition: right 1500ms;
      }
    
      .custome-search-form button{
        background: none;border: none;
       background-image:url(../../images/search-icon-gris-inverse.png);background-size:contain;background-repeat: no-repeat; position:absolute;top:20%;left:2%; width:4rem;height:4rem;outline:none;
      }
      .custome-search-form input{
       
        background:none; outline:none; border:none; width:50rem;height:100%;padding-left:8rem; font-size:2rem;
      }
      .cadre-ul{
        border:1px solid var(--gris-color);
        border-radius: .7rem;
        margin-top:1rem;
        background-color: white;
      }
    
      .cadre-ul-orange
      {
       background-color: white;
        border-right:1px solid var(--light-gris-color);
        border-bottom: 1px solid var(--light-gris-color);
        border-top: 1px solid var(--light-gris-color);
        border-left:1px solid var(--light-gris-color);
        border-radius: .3rem;
        margin-top:1rem;
      }
       .cadre-ul-orange ul {
     font-size:1.676rem;color:var(--text-color);
       }
      .cadre-ul-orange h4{
        padding: 1rem;
      }
       .cadre-ul-primary-change
      {
        background-color: white;
        border-right:1px solid var(--light-gris-color);
        border-bottom: 1px solid var(--light-gris-color);
        border-top: 1px solid var(--light-gris-color);
        border-left:1px solid var(--light-gris-color);
      border-radius: .3rem;
        margin-top:1rem;
      }
      .price{ 
        color:var(--darck-color);
        background-color: var(--border-color);
        border-radius:10px 100px / 120px;
         text-align: right;
         padding-bottom: 0.3rem;
          padding-left: 0.8rem;
          padding-right: 0.8rem;
          padding-top: .3rem;
          font-size:1.8rem;font-weight:bold;
        }
      .big-price{
        font-size:4rem;color:var(--text-color);
      }
       .cadre-ul-primary-change ul {
          font-size:1.676rem;color:var(--text-color);
       }
      .cadre-ul-primary-change h4{
        padding: 1rem;
      }
       .cadre-ul-warning-color
      {
        background-color: white;
        border-right:1px solid var(--light-gris-color);
        border-bottom: 1px solid var(--light-gris-color);
        border-top: 1px solid var(--light-gris-color);
        border-left:1px solid var(--light-gris-color);
      border-radius: .3rem;
        margin-top:1rem;
      }
      .cadre-ul-warning-color h4{
        padding: 1rem;
      }
      .cadre-ul-primary-color{
        background-color: white;
        border-right:1px solid var(--light-gris-color);
        border-bottom: 1px solid var(--light-gris-color);
        border-top: 1px solid var(--light-gris-color);
        border-left:1px solid var(--light-gris-color);
        border-radius: .3rem;
        margin-top:1rem;
      }
      .cadre-ul-primary-color h4{
        padding: 1rem;
      }
      .title-color{
        color:var(--title-color);
      }
      .title-ads-home{
        font-size: 5rem;
         font-weight: 550;
      }
      .back-arr{
        background-image: url('../../images/baniere-ozod.jpg');
        background-size: cover;
      }
      .home-video{
      background-color: var(--darck-color);
      width: auto;
      border-radius: 4px;
      margin: 0 auto;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      }
      .home-video video{
        width: 100%;
      min-height: 332px;
      height: 100%;
      border-radius: 4px;
      }
      .bleu-back
      {
        width: auto;
        background-color: rgba(0, 0, 0, 0.2);
        color: var(--text-color);
       height: auto;
        padding-left: 1rem;
        padding-right: 1rem;
        border-radius: .5rem;
      }
      .bleu-back-ads
      {
        width: auto;
        color: var(--primary-change);
        font-size: 5rem;
        font-weight: 600;
        height: auto;
        padding-left: 1rem;
        padding-right: 1rem;
        border-radius: .5rem;
        position:absolute;left:9%;top:35%;
      }
      .pt-2{
        padding-top: 2rem;
          }
      .back-mosaiq{
        background-image: url('../../images/architetctur-maroc.jpg');
        background-size: cover;
      }
    .back-admin
    {
      background-color: var(--gris-color);
    }
      .video-custom{
        width: 100%;
      }
      .c-video{
        width: 100%;
        max-width: 800px;
        position: relative;
        overflow: hidden;
      }
        .controls{
        display: flex;
        position: absolute;
        bottom: 0;
        width: 100%;
        flex-wrap: wrap;
        background: rgba(0,0,0,0.7);
        transform: translateY(100%) translateY(-5px);
        transition: all .3s;
      }
       .video-responsive:hover .video-controls{
         transform: translateY(0);
       }
        .video-responsive-home-mawsouaa .video-controls{
          transform: translateY(0);
        }
      .buttons-for-video{
        padding-top: 1rem;
        padding-bottom: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
      }
     
      .buttons-for-video button{
        padding-left: 1rem;
        background: none;
        border: 0;
        outline: none;
        cursor: pointer;
      
      }
      .buttons-for-video button::before{
        content: url('../../images/player-white.png');
        width: 30px;
        height: 30px;
        display: inline-block;
        font-size: 28px;
        -webkit-font-smothing:antialiased;
      }
      .buttons-for-video button.play::before{
     content: url('../../images/player-white.png');
      }
       .buttons-for-video button.pause::before{
         content: url('../../images/pause-icon.png');
      }
    
        .buttons-for-video button#mute-inactive::before{
         content: url('../../images/muet-inactive-icon.png');
      }
        .buttons-for-video button#mute::before{
         content: url('../../images/muet-icon.png');
      }
        .buttons-for-video button#volinc::before{
         content: url('../../images/volinc-icon.png');
      }
      
       .buttons-for-video button#voldec::before{
         content: url('../../images/voldesc-icon.png');
      }
       .buttons-for-video button#stop::before{
         content: url('../../images/stop-video-icon.png');
      }
       .buttons-for-video button#fs::before{
         content: url('../../images/plein-ecran-icon.png');
      }
       .buttons-for-video button#fs:hover{
         opacity: 0.2;
       }
        .buttons-for-video button#stop:hover{
         opacity: 0.2;
       }
        .buttons-for-video button#play-pause:hover{
         opacity: 0.2;
       }
       
        .buttons-for-video button#mute-inactive:hover{
         opacity: 0.2;
       }
        .buttons-for-video button#volinc:hover{
         opacity: 0.2;
       }
        .buttons-for-video button#voldec:hover{
         opacity: 0.2;
       }
      .orange-bar{
        height: 5px;
        top: 0;
        left: 0;
        width: 100%;
        cursor: pointer;
        background: var(--light-gris-color);
        position: relative;
      }
      .orange-juice{
        width: 0;
        height: 5px;
        background: var(--border-color);
      }
    
      .avatar-corse{
         padding:.5rem;
          width:5rem;
           position:absolute;
           bottom:0;
           right:0;
      }
      
      .btn-access{
          border-radius: 6.5px;
        background-color: var(--access-color);
        color: #589138;
        cursor: pointer;
        font-size: 16px;
        line-height: 20px;
        padding: 1rem ;
        font-weight: 500;
        outline: none;
        border: none;
        position: relative;
       box-shadow: 0 2px #142c1d;
      }
       .btn-access:hover{
        box-shadow: 0 3px #142c1d;
        top: 1px;
         
      }
       .btn-access:active{
          box-shadow: 0 0 s #83a95c;
        top: 4px;
       }
      .btn-buy{
          border-radius: 6.5px;
        background-color: var(--border-color);
        border: 1px solid var(--border-color);
        box-shadow: 0 16px 22px -17px var(--border-color);
        color: var(--title-color);
        cursor: pointer;
        font-size: 16px;
        line-height: 20px;
        padding: 1rem ;
        font-weight: 500;
        outline: none;
        position: relative;
       box-shadow: 0 2px #833602;
      }
       .btn-buy:hover{
        box-shadow: 0 3px #833602;
        top: 1px;
         
      }
       .btn-buy:active{
          box-shadow: 0 0 #833602;
        top: 4px;
       }
         .btn-danger{
          border-radius: 6.5px;
        background-color: var(--youtube-red);
        border: 1px solid var(--youtube-red);
        box-shadow: 0 16px 22px -17px var(--youtube-red);
        color: var(--title-color);
        cursor: pointer;
        font-size: 16px;
        line-height: 20px;
        padding: 1rem ;
        font-weight: 500;
        outline: none;
        position: relative;
       box-shadow: 0 2px #833602;
      }
       .btn-danger:hover{
        box-shadow: 0 3px #833602;
        top: 1px;
         
      }
       .btn-danger:active{
          box-shadow: 0 0 #833602;
        top: 4px;
       }
      .btn-discover-ads{
        border-radius: 6.5px;
        background-color: var(--warning-color);
        color: var(--primary-change);
        cursor: pointer;
        font-size: 16px;
        line-height: 20px;
        padding: 1rem 1rem 1rem;
        font-weight: 400;
        outline: none;
        border: 1px solid var(--warning-color);
        position: relative;
       box-shadow: 0 2px #63430d;
      }
      .btn-discover-ads:hover{
        box-shadow: 0 3px #1d1d22;
        top: 1px;
         background-color:  var(--primary-change);
          color: var(--title-color);
          border:  1px solid var(--primary-change);
      }
       
       .btn-discover-ads:active{
          box-shadow: 0 0 #1d1d22;
        top: 4px;
       }
      .btn-discover-corse{
        min-width: 10rem;
        background-color: var(--secondary-color);
        color: white;
        font-size: 1.975rem;
        padding: .9rem;
        border-radius: 5rem;
      }
      .btn-discover-corse:hover{
        color: var(--title-color);
      }
      
    .mosaiq-maron{
      background-image: url('../../images/architetctur-maroc.jpg');
      background-size: center;
    }
    .background-web-dev{
    background-image: url('../../images/web-dev-ptit-format.jpg'); 
    background-size: cover;
    }
    .back-creation{
    opacity: .3;
      width:100%;height:100%;
      color: var(--title-color);
    
    }
    .title-baniere-web{
      padding:5rem;
       /* position:absolute;left:0;top:0; */
    }
    .slogan-web{
      max-width:60rem;
        background-color:var(--primary-change);
    }
      .baniere-dev{
        /* height: 91rem; */
        /* padding-bottom: 1rem; */
        padding-top: 1rem;
        width: 100%;
        /* background: linear-gradient( #001334ff ,#041b81ff); */
        /* display: flex; */
        /* align-items: center; */
        /* position: relative; */
      }
       .back-card-cv{
      position: relative;
      background-color: var(--gris-leger);
      display: flex;
    justify-content: center;
    align-items: center;
      padding: .6rem;
      font-size: 1.375rem;
      color: var(--text-color);
      border-radius: .4rem;
      }
      .avatar-cv{
        width: 8rem;
      }
      .grid-cv{
        border-radius: .5rem;
        display: grid;
        grid-template-columns: 45% 60%;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
        justify-content: center;
        align-items: center;
      }
      .grid-cv-avatar{
        border-radius: .3rem;
        display: grid;
        grid-template-columns: 45% 60%;
        align-items: center;
        padding: 1rem;
      }
      .marge1cv{
        padding: 1rem;
        background-color:var(--primary-change);
         min-height: 90rem;
         color: var(--title-color);
      }
      .marge1cv p{
        color: var(--title-color);
        line-height: 2.9rem;
    
      }
      .marge2cv{
        padding-left: 5rem;
    max-width: 25rem;
     min-height: 90rem;
       
      }
       .title1-cv {
        font-size: 2.657rem;
        font-family:'Cairo',
       /* 'Quicksand', sans-serif,'Josefin Sans',
      'Calibri',
       'Lucida Sans', 
       'Lucida Sans Regular', 
       'Lucida Grande', 
       'Lucida Sans Unicode',
        Geneva, 
        Verdana, */
         sans-serif;
      }
    /* mini cv  */
    .grid-mini-cv-for-pro{
         display: grid;
        grid-template-columns: repeat(auto-fit,minmax(25rem, 1fr))  ;
        grid-gap: 2rem;
      }
    
      /* grid cv pour compte pro qui affiche les cv  */
      .grid-cv-for-pro{
         display: grid;
        grid-template-columns: repeat(auto-fit,minmax(45rem, 1fr))  ;
        grid-gap: 2rem;
      }
      .container-cv{
      height: auto;
      max-width: 60rem;
      position: relative;
      border: 1px solid var(--light-gris-color);
      border: 1px solid var(--gris-color);
      background-color: white;
      border-radius: 0.8rem;
      }
    .avatar-cv-pro{
      width: 5rem;
      }
      .grid-cv-avatar-pro{
        border-radius: .5rem;
        display: grid;
        grid-template-columns: 1fr 4fr ;
        align-items: center;
        padding: .5rem;
        position: relative;
      }
      .marge1cv-pro{
        padding-left: 2rem;
        padding-right: 2rem;
      }
      .marge1cv-pro p{
        color: var(--title-color);
        line-height: 2.5rem;
        font-size: 1.875rem;
      }
        .marge2cv-pro p{
        color: var(--darck-color);
        line-height: 2.5rem;
        font-size: 1.875rem;
      }
      .marge2cv-pro{
        padding: 2rem;
      }
       .title1-cv-pro {
        text-decoration: underline;
        font-weight: bold;
        color: #263238ff;
        font-size: 1.657rem;
        font-family:'Cairo', 
        /* "Inter", "system-ui", "wf_segoe-ui_semibold",
          "Segoe UI Semibold", "Segoe UI", "Segoe WP", "Segoe UI", "Segoe WP",
          "Quicksand", sans-serif, "calibri", Tahoma, Arial,  */
          sans-serif;
      }
      .marge1cv-pro span{
       color: var(--darck-color);
        font-size: 1.875rem;
     }
    
      /* fin grid cv for pro */
      .dashboard{
        padding: 4rem;
        background-color: var(--bck-color);
        border: 1px solid var(--light-gris-color);
        margin-top: 1rem;
      }
      .dashboard li{
        font-size: 2rem;
        /* font-weight: bold; */
        font-family:'Cairo', 
        /* Verdana, Geneva, Tahoma,  */
        sans-serif;
        color: var(--primary-change);
        padding: 1rem;
      }
       .img-sous-baniere{
        width: 100%;
        height: 20rem;
        border-radius: 2rem;
        object-fit: cover;
        box-shadow:1px 1px 5px 1px  rgba(252, 252, 252, 0.2);
      }
       .img-home-page{
        width: 20rem;
        height: 20rem;
        border-radius: 50%;
        object-fit: cover;
        
      }
      .img-home-page-prof{
        width: 20rem;
        height: 20rem;
        border-top-left-radius: 10%;
        border-bottom-left-radius: 50%;
        border-top-right-radius: 25%;
        border-bottom-right-radius: 25%;
        object-fit: cover;
        
      }
    
      .trans {
      width: 200px;
      height: 100px;
    }
    .agrandir-image{
      margin:0 auto;
      overflow: hidden;
      width: 200px;
    }
    .trans:hover {
      transform: scale(1.5);
     
    }
    .trans {
      transition: transform 1000ms ease;
    }
     
      .img-back{
        padding: 2rem;
        position: relative;
       background-image: url('../../images/search-job-ptit-frmt.jpg');
        background-size: cover;
        height: 80rem;
      }
      .img-back-home{
        /* padding: 2rem; */
        /* position: relative; */
       background-image: url('../../images/search-job-ptit-frmt.jpg');
      background-size: cover;
        /* opacity: 0.5; */
        /* height: auto; */
      }
      .bar-auto{
        min-width: 30rem;
        background-color: var(--primary-change);
      }
        .img-corse{
        width: 100%;
        height: 100%;
        border-top-left-radius: 0.6rem;
        border-top-right-radius: 0.6rem;
        object-fit: cover;
      }
      .back-blue{
    width: 100%;
    color: var(--title-color);
    
      }
       
        .back-darck-dev{
    position: absolute;
    background: linear-gradient( #001334ff ,#041b81ff);
    width: 100%;
    padding-top: 5rem;
    padding-left: 2rem;
    top: 0;
    bottom: 0;
    color: var(--title-color);
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
      }
    
      .baniere-mawsouaa{
        display: grid;
        grid-template-columns: 30% 70%;
        color:var(--title-color);
        background: linear-gradient( #001334ff ,#041b81ff);
        height: auto;
        padding: 5rem;
        
      }
      .title-category{
        color: var(--darck-color);
        font-size: 1.875rem;
      }
        .drop-menu-point{
    position: relative;
      }
      .dropbtn-menu-point{
        padding: 1rem;
        cursor: pointer;
        /* max-width: 4rem; */
      }
     
      .dropbtn-menu-point:hover{
      opacity: .5rem;
      }
      .menu-point{ 
        /* padding: 1rem; */
        position: absolute;
        background-color:white;
        font-size: 1.625rem;
        width: 25rem;
        /* height: 10rem; */
        left: 0;
        border-radius: .4rem;
        z-index: 1;
        /* box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); */
      }
      .menu-point-corse{ 
        /* padding: 1rem; */
        position: absolute;
        background-color:white;
        font-size: 1.625rem;
        width: 25rem;
        /* height: 10rem; */
        right: 0;
        border-radius: .4rem;
        z-index: 1;
        /* box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); */
      }
      .show-menu-point{
        display: block;
      }
        .view-text-scroll-ads{
        width:20rem;
        height:20rem;
        position:absolute;
        left:6.5%;top:14%;
        background-color: rgb(0, 0, 0,0.3);
      }
      #textadshome{
        font-size: 1.875rem;
     color: var(--title-color);
      font-weight: bold;
      letter-spacing: .1225rem;
      }
    
      .img-ads{
        width: 100%;
        height: 15rem;
        border-top-left-radius: 0.6rem;
         border-top-right-radius: 0.6rem;
        object-fit: cover;
      }
    .note{
      font-size: 1.475rem;
    }
    .back-ads{
      background-color: #1b0e02;
    }
      .img-ads-cadre{
        width: 40rem;
        height: 50rem;
        background-image: url("../../images/prof-baniere.jpg");
        background-size: cover;
        background-repeat: no-repeat;
         margin-right: 2rem;
      }
    .icon-compte-connexion{
      position: fixed;
      bottom:10%;
      left: 1%;
     
    }
      /* copié depuis site books */
    
      .grid{
    display: grid;
    width: 45rem;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 5px;
    }
    .grid .item{
      border:1px solid var(--light-gris-color);
      background-color:var(--gris-color);
      padding-left:2rem;
      padding-right:2rem;
      padding-top:1rem;
      padding-bottom:1rem ;
      border-radius:.5rem;
      font-size:18px;
    }
    .grid .item:hover{
       background-color:var(--second-gris-color);
    }
    .clavier-code-secure{
    cursor: pointer;
    border:none;
    color:var(--text-color);
    padding-left:2rem;padding-right:2rem;
    padding-top:1rem;
    padding-bottom:1rem ;
    background:none;
    font-size:1.975rem;
    }
    
    
    /* fin copie */
      .btn-close-js{
        opacity: .7;
      padding: 1rem;
       cursor: pointer;
      }
      
      .btn-close-success-js{
       opacity: .7;
       cursor: pointer;
      }
      .btn-close-info-js{
        opacity: .7;
       cursor: pointer;
      }
      .btn-close-success-js:hover{
        opacity: 1;
      }
      .btn-close-js:hover
      {
        opacity: 1;
      }
      #for-errors-js{
        padding: 1rem;
        border-radius: .4rem;
        border: 1px solid var(--light--gris-color);
        position: fixed;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        background-color: white;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
        z-index: 1000;
      }
      #for-success-js{
        padding: 1rem;
        position: fixed;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        color: white;
        background-color: #cceabb;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
        height: auto;
        z-index: 1000;
      }
      #for-info-js{
        padding: 1rem;
        position: absolute;
        top: 50%;
        left: 40%;
        background-color: white;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
        width: 35rem;
        height: auto;
        z-index: 1000;
      }
      .rotate-icon-search{
        animation: icon-search-rotate infinite 8s linear;
      }
      #box-drapeau{
         width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        
      }
      #box-drapeau img{
    height: 100%;
     animation:spin 10s linear infinite;
      }
      #shadow-drapeau{
        width: 51px;
        height: 51.5px;
        position: absolute;
        border-radius: 50%;
        margin-top: -53.5px;
          box-shadow: inset -1rem 0rem 1rem .3rem rgb(31, 31, 31);
    
      }
    
    
    @keyframes spin {
      0%{
        margin-left: -50px;
      }
      100%{margin-left: 0px;}
    }
    
    @keyframes icon-search-rotate {
      0% {
       transform: rotate3d(1, 1, 0, 0deg);
       
      }
      25% {
       transform: rotate3d(1, 1, 0, 90deg);
       
     
      }
      50% {
      transform: rotate3d(1, 1, 0, 180deg);
      }
      75% {
       transform: rotate3d(1, 1, 0, 270deg);
      }
      100% {
       transform: rotate3d(1, 1, 0, 360deg);
      }
    }
    
    
            
       
     .grid-logo{
      position: relative;
      display:grid;
      grid-template-rows: 1fr 1fr;
      grid-row-gap: .365rem;
      width: 3.675rem; 
      height: 3.675rem; 
      animation: scroll-text 3s infinite linear;
      }
    
    
    @keyframes scroll-text {
      0% {
        opacity: 1;
      }
      50% {
        opacity: .8;
      }
      100% {
        opacity: 1;
      }
    }
                    
    .plan{
      position: absolute;
      z-index: 900;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
    }
      .set-raiting{
         position: fixed;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        z-index:1000;
         border-radius:.5rem;
         padding:2rem;
         background-color: white;
          
      }
      .grid-general-logo{
      max-width: 25rem;
      display: grid;
      grid-template-columns: 15%  85%;
      justify-content: center;
      align-items: center;
      padding-right: 1rem;
      padding-top: 1rem;
      padding-left: 1rem;
      }
      .icon-search-logo
      {
        width:2.075rem;
        position:absolute;
        top:3%;
        left:3%;
      }
    
     
      .grid-row{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: .095rem;
      }
      .carreau-warning{
        
        width:1.275rem;
        height:1.275rem;
        background-color: var(--warning-color);
      }
      .carreau-blue{
        width: 1.275rem;
        height: 1.275rem;
        background-color: var(--primary-change);
      }
      .carreau-noir{
        width: 1.275rem;
        height: 1.275rem;
      }
      .carreau-orange{
        width: 1.275rem;
        height: 1.275rem;
       
        background-color: var(--border-color);
      }
        .carreau-blanc{
        width: 1.275rem;
        height: 1.275rem;
       
        background-color: var(--title-color);
      }
      .img-show-corse{
      border-top: 5px solid #e6e6e6ff;
      border-right: 5px solid #e6e6e6ff;
      border-left: 5px solid #e6e6e6ff;
      border-radius: .3rem;
      max-width: 100%;
      height: auto;
    }
      .icon-logo{
        width: 3rem;
        
      }
      #form-cat select{
       width: 100%;
        box-sizing: border-box;
        border: 1px solid #b4aee8;
        border-radius: 4px;
        font-size: 1.875rem;
        background-color: white;
        padding: 0.375rem 0.75rem;
        height: calc(1.25em + 1rem + 1px);
        line-height: 1.5;
        box-sizing: border-box;
        border-radius: 0 0.25rem 0.25rem 0; 
    
      }
       #form-cat select:focus {
        width: 100%;
      }
     
      
     
      #list-category{
        font-size: 1.875rem;
      }
     
      .back-light{
        border: 1px solid var(--gris-color);
        font-size: 1.675rem;
        line-height: .675rem;
        text-align: center;
        padding: .5rem;
        border-radius: .3rem;
        color: var(--primary-change);
      }
       .back-light-corses{
        background-color: var(--color-titles-black);
        font-size: 1.675rem;
        line-height: .675rem;
        text-align: center;
        padding: .995rem;
        border-radius: .3rem;
        color: var(--title-color);
      }
       .back-light-timer{
        min-width: 2rem;
        font-size: 1.775rem;
        line-height: .675rem;
        padding: 1rem;
        border-radius: .3rem;
        color: var(--title-color);
      }
      .separ-warning{
        border-bottom:2px solid var(--warning-color);
      }
    
      .container-statut-ad{
    position: relative;
      }
    
      .active-ad{
        width: 1.567rem;
        height: 1.567rem;
        background-color:var(--access-color);
       border-radius: 1rem;
        position: absolute;
        right: 4%;
        top: 4%;
      }
        .inactive-ad{
          width: 1.567rem;
        height: 1.567rem;
        background-color: var(--youtube-red);
       border-radius: 1rem;
        position: absolute;
        right: 4%;
        top: 4%;
      }
      .mosaiq-background{
       background-image:url('../../images/mosaiq-arr-plan.png');
       background-size:center;
      }
      #showimg-ad{
        position: absolute;
        left: 10%;
        top: 30%;
        z-index: 1500;
        max-width:  100rem;
       
        
      }
      .cadre-img{
        position: absolute;
        right: 2%;
        top: 2%;
        border-radius: 50%;
        width: 10rem;
        height: 10rem;
        z-index: 1000;
      
      }
      
      .img-anim{
          border-radius: 50%;
        padding: 7px;
        width: 10rem;
        height: 10rem;
    animation: App-logo-school infinite 20s linear;
      }
      
    @keyframes App-logo-school {
    
      0% {
        transform: scale(0.5);
      }
      50% {
        transform: scale(2.1);
       
      }
       100% {
        transform: scale(0.5);
      }
    
    }
      .error-js
      {
      padding: 2rem;
      font-size: 2rem;
      color: var(--border-color);
      }
        .no-drop
      {
        cursor: no-drop;
      }
      .bandeau-cookies
      {
        width: 100%;
        position: fixed;
        padding: 2rem;
        bottom: 0;
        margin: auto;
        border-radius: .5rem;
        background-color:  var(--bck-color);
        border: 1px solid var(--gris-color);
        z-index: 1000;
        text-align: center;
        color: var(--title-color);
      }
     /* Style The Dropdown Button */
    .dropbtn-admin {
      color: var(--darck-color);
      font-size: 1.875rem;
      cursor: pointer;
      min-width: 10rem;
      font-weight: bold;
    }
    
    /* The container <div> - needed to position the dropdown content */
    .dropdown-admin {
      position: relative;
      display: inline-block;
    }
    .dropbtn-admin::after {
      content: url('../../images/flech-drop-gris.png');
      padding-left: .5rem;
    }
    /* Dropdown Content (Hidden by Default) */
    .dropdown-content-admin {
      display: none;
      border: 2px solid var(--light-gris-color);
      border-radius: .6rem;
      position: absolute;
      color: var(--text-color);
      top: 2.1rem;
      background-color: var(--title-color);
      min-width: 20rem;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    
    /* Links inside the dropdown */
    .dropdown-content-admin a {
      color: var(--text-color);
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      font-size: 1.875rem;
    }
    
    /* Change color of dropdown links on hover */
    .dropdown-content-admin a:hover {background-color: #f1f1f1}
    
    /* Show the dropdown menu on hover */
    .dropdown-admin:hover .dropdown-content-admin {
      display: block;
    }
    
    /* Change the background color of the dropdown button when the dropdown content is shown */
    .dropdown-admin:hover .dropbtn-admin {
      color: var(--warning-color);
    }
      .logo-form {
        width: 15rem;
      }
      .header-form {
        color: var(--text-color);
        border-bottom: 1px solid var(--light-gris-color);
        padding: 1rem;
      }
      .paneau {
        background-color: var(--darck-color);
        color: var(--title-color);
        text-align: center;
        width: 100%;
        padding: 3rem;
        border-radius: 0.5rem;
        font-size: 3.857rem;
        font-family:'Cairo',
       /* 'Quicksand', sans-serif,'Josefin Sans',
      'Calibri',
       'Lucida Sans', 
       'Lucida Sans Regular', 
       'Lucida Grande', 
       'Lucida Sans Unicode',
        Geneva, 
        Verdana, */
         sans-serif;
      }
      /* fin form new ad */
      
      .entete-admin {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: auto;
        padding: 1.5rem;
        background-color: white;
      }
      .form-search {
        padding: 0.5rem;
        display: grid;
        grid-template-columns: 5fr 1fr;
        justify-content: center;
        align-items: center;
        
      }
      .icon-connexion {
        cursor: pointer;
        padding: 0.5rem;
      }
      .home-card {
        pointer-events: none;
        padding: 3rem;
        height: 200px;
        width: 500px;
        background-color: var(--secondary-color);
        position: absolute;
        left: 10%;
        top: 30%;
        border-radius: 0.5rem;
      }
      /* ceci une dropdown acev css pour compte user */
      .menu-main {
        position: fixed;
        right: 0;
        top: 80px;
        transform: translateX(100%);
        transition: transform 0.4s ease-in-out;
      }
      .menu-sub {
        position: fixed;
        right: 0;
        top: 80px;
        transform: translateX(100%);
        transition: transform 0.7s ease-in-out;
        background-color: #fff;
        border-radius: 16px;
        box-shadow: 0 16px 31px -17px rgba(0, 31, 97, 0.6);
        border: 5px solid var(--warning-color);
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 999;
        height: 169px;
        width: 370px;
        max-width: calc(100% - 10px);
      }
      .menu-sub.visible {
        /* ce pixel de deplacement vers droite  */
        transform: translateX(-10%);
      }
      .menu-sub li {
        list-style: none;
        padding: 1rem;
      }
      .menu-sub a {
        color: var(--light-color);
      }
      .menu-sub #connexion::before {
        content: url("../images/identification.png");
        vertical-align: middle;
        margin: 1rem;
      }
      .menu-sub #mon-compte::before {
        content: url("../images/compte.png");
        vertical-align: middle;
        margin: 1rem;
      }
      .menu-sub #inscription::before {
        content: url("../images/inscription.png");
        vertical-align: middle;
        margin: 1rem;
      }
      .menu-sub #inscription-pro::before {
        content: url("../images/school-compte.png");
        vertical-align: middle;
        margin: 1rem;
      }
      .menu-sub #deconnected::before {
        content: url("../images/compte_nok.png");
        vertical-align: middle;
        margin: 1rem;
      }
      .menu-sub a:hover {
        text-decoration: underline;
        color: var(--warning-color);
      }
      /* Dropdown Button */
      .dropbtn {
        color: var(--primary-color);
        font-weight: inherit;
        padding: 12px;
        font-size: 1.625rem;
        font-family:'Cairo', 
        /* "Quicksand", */
         sans-serif;
        background: none;
        border: none;
        vertical-align: basline;
        cursor: pointer;
      }
      .dropbtn-white {
        color: var(--primary-color);
        font-weight: inherit;
        padding: 12px;
        font-size: 1.625rem;
        background: none;
        border: none;
        vertical-align: basline;
        cursor: pointer;
      }
      .dropdown-button{
        color: var(--darck-color);
        font-weight: 600;
        padding: 12px;
        font-size: 1.825rem;
        font-family:'Cairo',
         /* "Quicksand", */
          sans-serif;
        background: none;
        border: 1px solid black;
        vertical-align: basline;
        cursor: pointer;
        border-radius: .4rem;
      }
      .dropbtn:focus {
        outline: none;
      }
      .dropbtn-white {
        outline: none;
      }
     
      .dropbtn::after {
        content: url("../images/categories-icon.png");
      }
      .dropbtn-white::after {
        content: url("../images/categories-white.png");
      }
      
      .dropdown-button::after {
          content:url("../images/flech-drop.png");
          color: #26191b;
          margin-left: 1rem;
      }
      .flech{
        border: none;
        background: none;
        padding-top: 1rem;
         padding-bottom: 1rem;
          outline: none;
          font-size: 1.125rem;
          font-weight: bold;
          color: var(--text-color);
        cursor: pointer;
      }
     
      .dropdown {
        position: relative;
        padding: 1rem;
      }
      .dropdown-white {
        position: relative;
        text-align: center;
        padding: 1rem;
      }
     
      .column {
        position: relative;
        text-align: start;
        min-width: 10rem;
        max-width: 200rem;
      }
      .compte-user {
        text-align: start;
        min-width: 3rem;
        padding: 2rem;
      }
      .compte-user ul li {
        list-style: none;
      }
      .compte-user-ancor {
        font-size: 1.5rem;
        color: var(--menu-color);
      }
    
      /* Dropdown Content (Hidden by Default) */
      .dropdown-content {
        display: none;
        position: absolute;
        background-color: var(--border-light-color);
        font-size: 1.625rem;
        width: 200px;
        right: 30%;
        box-shadow: 0 1px 6px rgb(204, 203, 203);
        border: 1px solid var(--gris-color);
        z-index: 1;
      }
      .dropdown-content-white {
        display: none;
        position: absolute;
        background-color: white;
        font-size: 1.625rem;
        min-width: 50rem;
        right: 50%;
        box-shadow: 0 1px 6px rgb(204, 203, 203);
        border: 5px solid var(--primary-change);
        border-radius: 2rem;
        z-index: 1;
      }
    
      .dropdown-menu{
        padding: 2.5rem;
        position: absolute;
        background-color:white;
        font-size: 1.725rem;
        min-width: 40rem;
        left: 50%;
        border-radius: 2rem;
        box-shadow: 0 1px 6px rgb(119, 118, 118);
        border: 4px solid var(--primary-change);
        z-index: 1;
      }
      .dropdown-menu li a{
        color: var(--darck-color);
      }
      /* Links inside the dropdown */
      .dropdown-content a {
        color: var(--light-color);
        padding: 12px 16px;
        text-decoration: none;
        display: block;
      }
      .dropdown-content-white a {
        color: var(--light-color);
        padding: 12px 16px;
        text-decoration: none;
        display: block;
      }
      /* Change color of dropdown links on hover */
      .dropdown-content a:hover {
       color: var(--warning-color);
      }
      .dropdown-content-white a:hover {
       color: var(--warning-color);
      }
      .show {
        display: block;
      }
    
      .description-grid-form {
        display: grid;
        grid-template-rows: repeat(6, 1fr);
        /* grid-row-gap: .3rem; */
        align-items: center;
      }
      .first-row-form {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 2rem;
        padding-left: 5rem;
        padding-right: 5rem;
      }
      .second-row-form {
        display: grid;
        grid-template-columns: 1fr;
        padding-left: 5rem;
        padding-right: 5rem;
      }
      .thert-row-form {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 2rem;
        padding-left: 5rem;
        padding-right: 5rem;
      }
      .for-row-form {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 2rem;
        padding-left: 5rem;
        padding-right: 5rem;
      }
    
      .for-avant-row-form {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 2rem;
        padding-left: 5rem;
        padding-right: 5rem;
      }
    
      .five-row-form {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-gap: 1rem;
        justify-content: end;
        padding-left: 5rem;
        padding-right: 5rem;
      }
    
    
      /* grande carte de description du cours */
    
      .description-corse {
        position: relative;
        width: auto;
        border-radius: 0.3rem;
        padding: 4rem;
        display: grid;
        grid-template-columns: 75% 25%;
        border-bottom: 1px solid black;
        font-size: 1.925rem;
      }
      
      .first-column {
        display: flex;
        flex-direction: column;
      }
      .second-column {
        display: grid;
        grid-template-rows: 30% 70%;
        align-items: center;
        justify-content: center;
      }
     .first-row-description-corse{
        padding: 0;
     }
      .second-row-description-corse {
        display: grid;
         padding: 0;
      }
      .thert-row-description-corse {
        align-items: flex-start;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }
      /* fin decription cours */
    
      /* aside et container  */
      .col-aside {
        display: grid;
        grid-template-columns: 1fr 4fr;
        grid-column-gap: 2rem;
      background-color: white;
      }
     #aside-id {
        grid-column: 1/2;
        padding-left: 2rem;
        /* background-color: var(--primary-change); */
      }
      #container-id {
        grid-column: 2/3;
        height: auto;
        /* padding-left: .9rem; */
        padding-right:2.5rem;
      }
      .title-chapter-content {
        padding: 1rem;
        display: grid;
        grid-template-columns: 90% 10%;
        align-items: center;
        justify-content: center;
        grid-gap: 0.1rem;
      }
      .title-chapter-content:hover{
          /* cursor: pointer; */
        background-color: rgb(229, 236, 253);
      }
      .title-chapter {
        padding: 1rem;
        display: grid;
        grid-template-columns: 10% 90%;
        align-items: baseline;
        grid-gap: 0.1rem;
      }
      .title-chapter-profile {
        padding: 1rem;
        height: 1.5rem;
        display: grid;
        grid-template-columns: 1fr;
        align-items: baseline;
       
      }
      .sommaire-item-profile {
        font-size: 1.725rem;
        color: var(--text-color);
      }
        .sommaire-item {
        font-size: 1.725rem;
        color: var(--text-color);
        align-items: center;
         
      }
      .sommaire-item-category {
        font-size: 1.825rem;
        color: var(--text-color);
      }
        .sommaire-item-category-mawsouaa {
        font-size: 1.825rem;
        color: var(--title-color);
      }
    
    .title-chapter-category{
       /* transition: left 700ms, transform 700ms;
        left: 0;
        white-space: nowrap; */
    }
       .title-chapter-category:hover {
         background-color: var(--bck-color);
         font-weight: bold;
        /* transform: translateY(5px); */
      }
       .panel {
        margin-bottom: auto;
        border: 1px solid var(--gris-color);
        height: 0;
        overflow: hidden;
        font-family:'Cairo',
        /* 'Quicksand', sans-serif,'Josefin Sans',
       'Calibri',
        'Lucida Sans', 
        'Lucida Sans Regular', 
        'Lucida Grande', 
        'Lucida Sans Unicode',
         Geneva, 
         Verdana, */
          sans-serif;
        transition: height 1000ms;
        background-color: white;
      }
      .panel .title-chapter:hover {
        cursor: pointer;
        background-color: rgb(229, 236, 253);
      }
      .title-chapter-completed{
        background-color: rgb(229, 236, 253);
      }
       .panel .title-chapter-profile:hover {
        cursor: pointer;
        background-color: rgb(229, 236, 253);
      }
    
      .menu-sommaire {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: space-evenly;
        align-items: center;
        font-size: 1.625rem;
        color: var(--secondary-color);
      }
       .menu-sommaire-show {
         padding: 3rem;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        justify-content: center;
        align-items: center;
        font-size: 2.625rem;
        font-weight: 600;
        color: var(--secondary-color);
      }
      .icone-chapitre::before {
        content: url("../images/chapitre.png");
        padding-right: 1rem;
      }
     
      
      
      /* fin aside et container */
    
      /* responsive de video */
      #id-par-defaut {
        display: none;
      }
      #title-par-defaut {
        display: none;
      }
    
      .center-text {
        text-align: center;
      }
      .bck-title {
        /* background-color:  var(--darck-color); */
        padding: 5rem;
        color: var(--darck-color);
      }
      /* responsive video */
    
     
      .col-video-aside{
        display: grid;
        grid-template-columns: 75% 25%;
    }
      .container-video {
      grid-column: 1/2;
      padding-top: 3rem;
      }
      .aside-video{
     grid-column: 2/3 ;
        background-color: var(--border-light-color);
        padding:1.5rem ;
        border-left: 1px solid var( --gris-color);
        border-top: 1px solid var(--gris-color);
        overflow-y: auto;
        max-height: 90vh;
    }
      /* .video-responsive {
        background-color: var(--darck-color);
       width: 900px;
      border-radius: 4px;
      margin: 0 auto;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
     overflow: hidden;
      } */
      .video-responsive {
        background-color: var(--darck-color);
        min-width: auto;
        height: auto;
        /* border-radius: 4px; */
        margin: 0 auto;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
      }
       .video-responsive video {
        width: 100%;
        height: 100%;
      }
        .video-responsive-home-mawsouaa {
        background-color: var(--darck-color);
       max-width: 500px;
      border-radius: 4px;
      margin: 0 auto;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
     overflow: hidden;
      }
       .video-responsive-home-mawsouaa video{
     width: 100%;
      min-height: 332px;
      height: 100%;
      border-radius: 4px;
       }
      /* .video-responsive video {
      width: 100%;
      min-height: 532px;
      height: 100%;
      border-radius: 4px;
       
    } */
      .video-responsive-home-mawsouaa iframe{
     left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
      }
      .video-responsive iframe {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
      }
      .current-video {
        background-color: rgb(217, 227, 250);
      }
      .current-video a {
        color: var(--darck-color);
      }
    
      #player::before {
        content: url("../images/player.png");
       
      }
      .legende-video {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        font-size: 1.625rem;
        padding: 2rem;
        border-bottom: 1px solid var(--gris-color);
      }
      .menu-video {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
      /* fin responsive video */
      /* form filter pour les formulaire de filtrage des annonces */
      .filter-form {
        width: 100%;
        min-width: 20rem;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: white;
        padding: 0.375rem 0.75rem;
        height: calc(1.75em + 1.025rem + 3px);
      }
    
      #search_property_city:focus {
        background-color: var(--border-light-color);
      }
      #search_property_post:focus {
        background-color: var(--border-light-color);
      }
      /* button de classement de recherche par ordre alphabetique */
      #form-sorting select:focus {
        background-color: var(--border-light-color);
      }
      /* fin button clssmt ordr alphbtq */
    
      /* ceci la page about */
      .about {
        display: flex;
        flex-direction: column;
        /* height: 80vh; */
        align-items: center;
      }
      .about h1 {
        padding: 1rem;
      }
    
      .avatar {
        padding: 1rem;
        width: 17rem;
      }
    
      #boxe {
        width: 100%;
        float: right;
        margin-top: 10px;
        margin-right: 20px;
        margin-left: 5px;
        height: 356px;
        -webkit-perspective: 600;
      }
      .carte {
        /* position: absolute; */
        height: 300px;
        width: 98%;
        left: 2px;
        top: 0px;
        -webkit-transform-style: preserve-3d;
        -webkit-transition-property: -webkit-transform;
        -webkit-transition-duration: 1.5s;
      }
      .carte.flipped {
        -webkit-transform: rotateY(180deg);
      }
      .verso {
        position: absolute;
        height: 300px;
        width: 98%;
        -webkit-border-radius: 10px;
        -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
        -webkit-backface-visibility: hidden;
        box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
          inset 0 -15px 15px rgba(255, 255, 255, 0.05),
          0 -15px 15px rgba(0, 0, 0, 0.03), inset 0 -15px 15px rgba(0, 0, 0, 0.03);
      }
      .verso p {
        margin-top: 36px;
        margin-bottom: 0;
        text-align: center;
        font-size: 1.5rem;
      }
      .recto {
        padding: 2rem;
        color: white;
        /* border: 5px solid var(--darck-color); */
        background-color: var(--secondary-color);
        text-align: justify;
      }
      .back {
        padding: 2rem;
        color: white;
        background-color: var(--secondary-color);
        -webkit-transform: rotateY(180deg);
        text-align: justify;
      }
    
      /* fin carte 3d */
      /* fin page about */
    
      /* ceci form connexion */
      .logotitrconnexion {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
      /* fin form connexion */
    
      /* ceci est le form d'inscription */
      .user {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .user form {
        margin-top: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 3rem;
        width: 50%;
      }
      .logo-site-user {
        width: 15rem;
        margin-bottom: 3rem;
      }
    
      .row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
      .row-cote {
        display: flex;
        flex-direction: row;
        align-items: start;
      }
       .row-no-center {
        display: grid;
       grid-template-columns: 1fr 2fr;
      }
     
    
      /* ceci dropdown souscategories */
      .btn-group-dropdown {
        padding: 10rem;
      }
    
      .subcat-content {
        background-color: var(--border-light-color);
        display: none;
        left: 42.5%;
        box-shadow: 0 1px 6px rgb(204, 203, 203);
        border: 1px solid var(--menu-color);
        position: absolute;
        font-size: 1.625rem;
        z-index: 1;
      }
      .subcat-content ul {
        margin-top: 1rem;
      }
      .subcat-content ul li a {
        color: var(--light-color);
      }
      .subcat-content ul li a:hover {
        color:var(--warning-color);
      }
      #btn-drop::after {
        content: url("../images/flech-icon-droit-noir.png");
      }
    
      /* fin dropdown sous categories */
    
      /* ceci animation engrenage home page  */
      #engrenage {
        animation: App-engrenage infinite 10s linear;
        width: 4rem;
      }
       #engrenage-maintenance {
        animation: App-engrenage infinite 10s linear;
        width: 10rem;
      }
      #engrenage2 {
        animation: App-engrenage2 infinite 20s linear;
      }
      @keyframes App-engrenage {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
    
      @keyframes App-engrenage2 {
        from {
          transform: rotate(360deg);
        }
        to {
          transform: rotate(0deg);
        }
      }
      /* fin animation engrenage home page*/
    
      /* loader de chargement de page  */
      #loader {
        top: 0em;
        position: fixed;
        padding: 0;
        height: 0.5rem;
        background-color: #46b606;
        animation: loader 15s infinite linear;
      }
    
      @keyframes loader {
        0% {
          width: 0;
        }
    
        100% {
          opacity: 0.8;
          width: 100%;
        }
      }
    
       #loader-ad {
        border-radius: 3px;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 5px;
        padding: 0;
        height: 0.5rem;
        background-color: var(--warning-color);
        animation: loader_ad 6s infinite linear;
      }
    
      @keyframes loader_ad {
        0% {
          width: 0;
        }
    
        100% {
          opacity: 0.8;
          width: 100%;
        }
      }
      /* fin animation loader de page  */
    
      /* ceci est accordion */
      .accordion {
        border-top-left-radius: .5rem;
        border-top-right-radius: .5rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        cursor: pointer;
        background-color: white;
        color: var(--text-color);
        padding: .9rem;
        text-align: right;
        border: .1rem solid var(--gris-color);
        width: auto;
        outline: none;
        transition: 0.7s;
        margin-top: auto;
        margin-bottom: .4rem;
      }
      .accordion-city {
        border-top-left-radius: .5rem;
        border-top-right-radius: .5rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        cursor: pointer;
        background-color: white;
        color: var(--text-color);
        padding: .9rem;
        text-align: right;
        border: .1rem solid var(--gris-color);
        width: auto;
        outline: none;
        transition: 0.7s;
        margin-top: auto;
        margin-bottom: .4rem;
      }
     
    
      .accordion::after {
        content: "\276F"; /* Unicode character for "plus" sign (+) */
        font-size: 1.5rem;
        color: #777;
        margin-left: 5px;
      }

      .accordion-city::after {
        content: "\276F"; /* Unicode character for "plus" sign (+) */
        font-size: 1.5rem;
        color: #777;
        margin-left: 5px;
      }
     .add::after {
        content: "\002B"; /* Unicode character for "plus" sign (+) */
        font-size: 1.5rem;
        color: #777;
        margin-left: 5px;
      }
      .add-color-white::after {
        content: "\002B"; /* Unicode character for "plus" sign (+) */
        font-size: 1.765rem;
        color: var(--title-color);
        margin-left: 5px;
      }
      .add-white::after{
        content: "\00274C"; /* Unicode character for "plus" sign (+) */
        font-size: 1.5rem;
        color: white;
        margin-left: 5px;
      }
      .active:after {
        transform: rotate(90deg);
          transition: transform 0.2s ease-in-out,
          top 0.2s 0.2s ease-in-out;
      }
      /* prfole-user */
      .profile {
        height: auto;
        background-color: var(--primary-change);
        justify-content: space-between;
        align-items: center;
        display: flex;
        padding-left: 1rem;
        padding-right: 1rem;
        flex-direction: row;
      }
    
      /* pro_card */
    
      .buttons {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
      .card-container {
        padding: 2rem;
        position: relative;
        width: auto;
        text-align: center;
        display: flex;
        flex-direction: column;
        height: auto;
      }
    
      .card-container .pro {
        color: #231e39;
        background-color: #febb0b;
        border-radius: 3px;
        font-size: 14px;
        font-weight: bold;
        padding: 3px 7px;
        position: absolute;
        top: 50px;
        left: 10px;
      }
      .card-container .func {
        color: var(--title-color);
        background-color: var(--border-color);
        border-radius: 3px;
        font-size: 14px;
        font-weight: bold;
        padding: 3px 7px;
        position: absolute;
        top: 50px;
        left: 10px;
      }
        .round-image-gf {
        border-radius:1rem;
        padding: 7px;
        width: 60%;
      }
      .round-image {
        padding: 7px;
        width: 20rem;
      }
      .card-container .round {
        border: 1px solid #03bfcb;
        border-radius: 50%;
        padding: 7px;
        width: 80px;
        height: 80px;
      }
    
      .primary {
        background-color: var(--primary-change);
        font-size: 1.675rem;
        border: 1px solid var(--primary-change);
        border-radius: 3px;
        color: var(--title-color);
        font-weight: 400;
        padding: 1rem;
        width: auto;
      }
      .primary.ghost {
        background-color: transparent;
        color: var(--primary-change);
      }
      .skills ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      .skills ul li {
        border: 1px solid #2d2747;
        border-radius: 2px;
        display: inline-block;
        font-size: 12px;
        margin: 0 7px 7px 0;
        padding: 7px;
      }
      /* back img employeur */
      .bck-card-employeur {
         height: 50px;
        width: 50px;
        border-radius: 50%;
        background-image: url("../../images/enseignante-pf.jpg");
        background-size: cover;
        background-repeat: no-repeat;
         margin-right: 2rem;
      }
      
      .baniere-aside {
        height: 50px;
        width: 50px;
        border-radius: 50%;
        background-image: url("../../images/prof-baniere.jpg");
        background-size: cover;
        margin-right: 2rem;
      }
      #body-cv {
        position: relative;
      }
      .absolute {
        position: absolute;
        top: 2%;
        left: 2%;
        z-index: 1;
      }
      .cv {
        min-width: 80rem;
        max-width: 90rem;
        border-radius: 2rem;
        min-height: 100rem;
        background-color: white;
        border: 1px solid var(--light-gris-color);
      }
      .list {
        font-size: 1.975rem;
        color: var(--text-color);
        font-family:'Cairo', 
        /* Verdana, Geneva, Tahoma, */
         sans-serif;
        line-height: 2rem;
      }
      .logo-form {
        width: 20rem;
      }
      .hidden {
        display: none;
      }
      .close {
        width: auto;
        padding: 1rem;
        background-color: var(--gris-color);
        border: 1px solid var(--light-gris-color);
        color: var(--text-color);
        font-size: 2rem;
        text-align: center;
        border-radius: 0.5rem;
        cursor: pointer;
      }
      .close:hover {
        background-color: var(--second-gris-color);
      }
      .backplan {
        width: 100%;
        height: 100%;
        position: absolute; 
        background-color: rgba(19, 19, 24, 0.685);
      }
      .content {
        position: relative;
        padding: 2rem;
        display: flex;
        flex-direction: column;
         border: 1px solid var(--gris-color);
        border-radius: 0.4rem;
      }
       .content-darck {
         color: var(--title-color);
        position: relative;
        display: flex;
        flex-direction: column;
        background-color: var(--darck-color);
        border-top-right-radius: 0.9rem;
        border-bottom-right-radius: 0.9rem;
      }
      .input-group {
        width: auto;
      }
      .input-group-prepend {
        display: -ms-flexbox;
        display: flex;
      }
      .input-group-prepend {
        margin-right: -1px;
      }
      .input-group-append {
        margin-left: -1px;
      }
      .custom-file {
        position: relative;
        display: inline-block;
        width: 100%;
        height: calc(1.5em + 0.75rem + 2px);
        margin-bottom: 0;
      }
      .custom-file-input {
        position: relative;
        z-index: 2;
        width: 100%;
        height: calc(1.5em + 0.75rem + 2px);
        margin: 0;
        opacity: 0;
      }
      .custom-file-input:focus ~ .custom-file-label {
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
      }
      /* .custom-file-input:disabled~.custom-file-label{background-color:#e9ecef}.custom-file-input:lang(en)~.custom-file-label::after{content:"Browse"} */
      .custom-file-input ~ .custom-file-label[data-browse]::after {
        content: attr(data-browse);
      }
      .custom-file-label {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1;
        height: calc(1.425em + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        font-weight: 400;
        line-height: 1.5;
        color: var(--menu-color);
        background-color: #fff;
        font-size: 1.875rem;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
      }
      .custom-file-label::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        display: block;
        height: calc(1.425em + 0.425rem + 2px);
        padding: 0.525rem 0.75rem;
        line-height: 1.5;
        color: var(--menu-color);
        content: "Parcourir";
        background-color: #e9ecef;
        border-left: inherit;
        border-bottom: inherit;
        border-radius: 0 0.25rem 0.25rem 0;
      }
      /* .custom-file-label,.custom-select{transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.custom-control-label::before,.custom-file-label,.custom-select{transition:none}} */
      input[type="password"]::placeholder {
        color: var(--menu-color);
        font-size: 1.875rem;
        transition: ease-in-out, font-size 0.35s ease-in-out;
      }
    
      input[type="text"]::placeholder {
        color: var(--menu-color);
        font-size: 1.875rem;
        transition: ease-in-out, font-size 0.35s ease-in-out;
      }
      .form textarea::placeholder {
        color: var(--menu-color);
        font-size: 1.875rem;
        transition: ease-in-out, font-size 0.35s ease-in-out;
      }
      input[type="email"]::placeholder {
        color: var(--menu-color);
        font-size: 1.875rem;
        transition: ease-in-out, font-size 0.35s ease-in-out;
      }
      input[type="email"]:focus::placeholder {
        font-size: 1.2rem;
      }
    
      input[type="password"]:focus::placeholder {
        font-size: 1.2rem;
      }
      input[type="text"]:focus::placeholder {
        font-size: 1.2rem;
      }
      .form textarea:focus::placeholder {
        font-size: 1.2rem;
      }
      .baniere-ad {
        width: 100%;
        height: 100%;
        border-radius: 0.5rem;
      }
    .logo-width{
      width:25rem;
    }
      #fornewcv {
        position: relative;
      }
      /* .new-message {
        position: absolute;
        right: 3%;
        top: -1.5rem;
        font-size: 1.665rem;
        padding: 0.5rem;
        font-weight: 500;
        border-radius: 50%;
        height: 1.675rem;
        width: 1.675rem;
        background-color: var(--border-color);
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .new-message:hover{
        color: var(--aside-color);
        background-color: white;
        font-weight: 500;
        border: 1px solid var(--aside-color);
      } */
      .clock {
        font-size: 2rem;
        font-weight: 500;
        color: var(--primary-change);
      }
      .img-sow-circl{
         position: absolute;
        top: 0;
        right: 0;
        z-index: 100;
        width: 15rem;
        height: 15rem;
        border-radius: 50%;
      }
      .img-show {
        width: 10rem;
        padding: 0;
        border-radius: 2rem;
        position: absolute;
        bottom: -20px;
        left: 2rem;
        min-height: 5rem;
        z-index: 100;
        max-height: 12rem;
      }
    }