.header-image{
    width: 100%;
    margin-top: 180px;
}

body{
    background-color: #F9F7F4  !important;
}

.prog{
    width: 100%;
    height: max-content;
    max-height: max-content;
    margin-top: 50px;
}

.com1{
    width: 100%;
    height: max-content;
    background-color: rgba(124, 75, 62, 0.8);
    padding-top: 150px;
    padding-bottom: 150px;
    color: white !important;
    font-size: 20px;
    text-align: center;
    
}

.com1 h1{
    line-height: 100px;
    font-size: 100px;
    color: white !important;
}


.cafe-ul li::marker {
    color: #563C3A !important;
}

.bou-sombre-ul li::marker {
    color: #C89B76 !important;
}

.bou-claire-ul li::marker {
    color: #E7AA7A !important;
}

.orange-ul li::marker {
    color: #EA6D49 !important;
}

h2{
    margin: 0px !important;
}

.plus2{
    font-size: 18px;
    position: relative;
    font-weight: 600;
    padding-bottom: 10px;
    overflow: hidden;
    display: inline-block;
    width: max-content;
}

.plus2::after{
  content: '';
  width: 100%;
  height: 100%;
  /* border-bottom: 2px solid #C89B76; */
  display: block;
  padding-bottom: 10px;
  transition:all 0.6s ease-out;
  right: 0;
  position:relative;
}
.plus2::before{
    content: '';
    width: 100%;
    height: 100%;
    /* border-bottom: 2px solid #C89B76; */
    display: block;
    padding-bottom: 10px;
    transition:all 0.6s ease-in;
    position:relative;
    top: 52px;
    left: 200%;
  }
.plus2:hover::after{
    right: 200%;

  }
  .plus2:hover::before{
    left: 0;
  }

.plus-cl::after{
    border-bottom: 2px solid #E7AA7A ;
}
.plus-cl::before{
    border-bottom: 2px solid #E7AA7A ;
}

.plus-so::after{
    border-bottom: 2px solid #C89B76 ;
}
.plus-so::before{
    border-bottom: 2px solid #C89B76 ;
}

.plus-c::after{
    border-bottom: 2px solid #563C3A ;
}
.plus-c::before{
    border-bottom: 2px solid #563C3A ;
}

.plus-o::after{
    border-bottom: 2px solid #EA6D49 ;
}
.plus-o::before{
    border-bottom: 2px solid #EA6D49 ;
}

.plus-r::after{
    border-bottom: 2px solid #E47662  ;
}
.plus-r::before{
    border-bottom: 2px solid #E47662  ;
}



@media screen and (max-width: 1064px){
    .header-image{
        width: 100%;
        margin-top: 160px;
    }
    .com1{
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

@media screen and (max-width: 661px){
    .header-image{
        width: 100%;
        margin-top: 140px;
    }
    .com1{
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .com1 h1{
        line-height: 70px;
        font-size: 70px;
        color: white !important;
    }
}

@media screen and (max-width: 600px){
    .header-image{
        width: 100%;
        margin-top: 100px;
    }
    .com1{
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .com1 h1{
        line-height: 70px;
        font-size: 70px;
        color: white !important;
    }

    .title{
        font-size: 40px;
    }
    p,ul{
        font-size: 15px !important;
    }

    .plus2{
        font-size: 1em !important;
    }
}