:root{
    --navbar-background-color: #f2f2f2;
    --navbar-item-hovered-color:white;
    --navbar-separator-color:#ececec;
    --navbar-icon-color:/*#127c09*/#285D33;
    --navbar-text-color:black;
    --navbar-transition-speed:0.2s;
    --primary-color:#2d8cfb;
    --navbar-logo-background-color:#f2f2f2;
    --body-background-color:white;
    --footer-background-color: #BE9A5B;
    --footer-text-color: white;
    --titre-accueil-color: /*#bca443*/#BE9A5B;
    --text-color: white;
    --yellow-color:#fce803;
    --purple-color:#8a57b3;
    --rose-color:#d12c60;
}

H1{
    color: var(--titre-accueil-color);
}

h2{
    color: var(--primary-color);
}
html, body{
    margin: 0;
    font-family: 'source sans pro';
    font-size: 16px;
    background-color: var(--body-background-color);
}

main{
    text-align: justify;
    background-color: var(--body-background-color);
}

footer{
    bottom: 0px;
    background-color: var(--footer-background-color);
    color: var(--footer-text-color);
}

@media only screen and (max-width: 600px){
    footer{
        font-size: 0.8rem;
    }
}


/************* haut de page ***************/

.hdp{
    top: 0px;
    padding-left: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 6rem;
    width: 100%;
    box-shadow: rgba(12, 43, 30, 0.2) 0 4px 14px;
    transition: width var(--navbar-transition-speed) ease;
    background-color: var(--body-background-color);
    position: fixed;
    z-index: 1;

}

.txtgras{
    font-weight: bolder;
}

.txtbleu{
    color: var(--primary-color);
}

.txtmarron{
    color: var(--titre-accueil-color);
}

.txtvert{
    color: var(--navbar-icon-color);
}

.txtjaune{
    color: var(--yellow-color);
}
.txtrose{
    color: var(--rose-color);
}

.logohdp{
    height: 6rem;
}

.navbar{
    margin-top: rem;
    height: 5rem;
    top: 0px;
    right: 0px;/*
    background: var(--navbar-background-color);
    box-shadow: rgba(12, 43, 30, 0.2) 0 4px 14px;
    transition: width var(--navbar-transition-speed) ease; */
    width: 100%;
}

.navbar-menu{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: top;
    width: 100%;
}

.navbar-item{
    width: 100%;/*
    border-bottom: solid 1px var(--navbar-separator-color);*/
    transition: background-color var(--navbar-transition-speed);
    padding-left: 1rem;
    list-style: none;

}

.navbar-item1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    list-style: none;
}

.navbar-item1:hover{
    background-color: var(--navbar-item-hovered-color);
}

.navbar-item1:not(:hover) .navbar-title1{
  display: none;

}




.navbar-link{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 5rem;
    text-decoration: none;
}

.navbar-icon{
    text-align: center;
    font-size: 1.5rem;
    min-width: 2rem;
   
    color:var(--navbar-icon-color);
    transition: var(--navbar-transition-speed);
}

.navbar-item:hover .navbar-icon{
    color:var(--primary-color);
}

.navbar-title{
    color: var(--navbar-text-color);
    white-space: nowrap;
}

@media only screen and (max-width:1024px){

    .hdp{
        padding-left: 0;
        width: 100%;
        flex-direction: column;
        height: 11rem;
    } 
    .navbar{
        width: 100%;
        margin-bottom: 1rem;
        margin-top: 0;
       
    }

    .navbar-menu{
        justify-content: flex-start;
    }
    .navbar-link{
        width: 100%;
    }
    .navbar-title{
        display: none;
    }
    .navbar-icon {
    min-width:auto;
    margin:0;
  }
}
/***************actus*************/

/* Texte défilant */
.messagedefilant {
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 40px;
  background-color: var(--primary-color); 
}
 
 /***message défilant hdp****/

.messagedefilant div {
  position: absolute;
  min-width: 100%; /* au minimum la largeur du conteneur */
   
}
 
.messagedefilant div span, 
.messagedefilant div:after {
  position: relative;
  display: inline-block;
  font-size: 2rem;
  white-space: nowrap;
  top:0;
}
 
.messagedefilant div span {
  animation: defilement 10s infinite linear;
  color: white;
}
 
.messagedefilant div:after {
  position: absolute;
  top:0; left:0;
  content:attr(data-text);
  animation: defilement2 10s infinite linear;
  color: white;
}
 
@keyframes defilement {
  0% { margin-left: 0; }
  100% { margin-left: -100%; }
}
 
@keyframes defilement2 {
  0% { margin-left: 100%; }
  100% { margin-left: 0%; }
}

/*****Message défilant nos partenaire***/
.conpart{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: linear-gradient(white, var(--titre-accueil-color), white);

}
.confiance{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

}
.compartext{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 40rem;

}
.partenaire{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

}
.imconf{
    height: 10rem;
    width: 40rem;
    border-radius: 30px;
    
    border-color: var(--navbar-icon-color);
    border-width: 0.25rem;
    display: flex;
    flex-direction: row;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.sectxtim-actu3-1{
    width: 35rem;
    height: 100%;
    padding: 2.5rem;
    color: var(--text-color);
    text-align: center;
    border-radius: 50% 20% / 10% 40%;
    font-family: system-ui;
    background-color: #ad1c1c;/****rouge foncé****/
    color: #252680; /****bleu****/

}
.sectxtim-actu2-2{
    width: 35rem;
    height: 100%;
    padding: 2.5rem;
    color: var(--text-color);
    text-align: center;
    border-radius: 50% 20% / 10% 40%;
    font-family: system-ui;
    background-color: var(--yellow-color);
    color: var(--purple-color);
}

@media only screen and (max-width: 600px){
    .sectxtim-actu2-2{
        width: 13rem;
    }
    .sectxtim-actu3-1{
        width: 13rem;
    }
    .imconf{
    height: 3.17rem;
    width: 13rem;
    }
    .compartext{
    width: 13rem;
    }
}

.retrouveznous{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.retrouveznouslogo{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.rslogo{
    width: 5rem;
    margin-left: 1rem;
    margin-right: 1rem;
}
/***********************section 1 accueil**************************/

.banniereactu{
    border-radius: 10px;
    height: 25rem;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(actuhdp.jpg);
    
}
.accsec1{
    margin-top: 5rem;
     display: flex;
     flex-direction: column;
}

.banniere{
    border-radius: 10px;
    height: 25rem;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(accim.jpg);
    
}

.titreacc{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 2rem;
    margin-left: 5rem;
    margin-right: 5rem;
    font-size: 3rem;
    font-weight: bold;
    

}

.titrepage{
    color: var(--titre-accueil-color);
    border-bottom: solid var(--navbar-icon-color) 0.6rem;
    padding-bottom: 1rem;
}

.interligne{

    height: 0.6rem;
    background-color: var(--navbar-icon-color);
    margin-top: 0.4rem;
    margin-left: 5rem;
    margin-right: 5rem;

}

.soustitreacc{
    display: flex;
    flex-direction: column;
    margin-left: 20rem;
    margin-right: 20rem;
    margin-bottom: 2rem;
    border: solid;
    padding-bottom: 0;
    padding-top: 0;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-top: 2rem;
    border-radius: 10px 100px / 120px;
    font-family: serif;
    /*font-style: italic;*/
    font-size: 1.5rem;
    text-align: center;
    background-color: var(--navbar-icon-color);
    color: white;
}


.defebg2{
    font-weight: bold;
    color: var(--titre-accueil-color);
}

.defebg1{
    text-decoration: none; 
    color: var(--titre-accueil-color);
    animation: blink 2s infinite;
    font-weight: bold;
}
@keyframes blink { 
  0% { opacity:0; }
  50% { opacity:1; } 
  100% { opacity:0; }
}

.defebg1:not(:hover) .defebg2{
  display: none;

}
.defebg1:hover{
    animation: none;
}

.bv{
    display: flex;
    justify-content: flex-end;
    font-size: 2.1rem;
    font-weight: bolder;
    color: var(--titre-accueil-color);
    margin: 0.3em;
}

.pacc{
    margin: 0.3em;
}

@media only screen and (max-width:1024px){
    .accsec1{
    margin-top: 11rem;
    }
    .titreacc{
        font-size: 2rem;
    }

    .soustitreacc{
        margin-left: 2rem;
        margin-right: 2rem;

    }
}

@media only screen and (max-width: 600px){

    .soustitreacc{
        font-size: 1rem;
        margin-top: 1rem;
    }

}

/*************** accueil section 2***********************/


.accsec2{
    padding-top: 2rem;
    padding-bottom: 5rem;

}

.accsec2-menu{
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: space-around;

}


.accsec2-title{
   /*color: #599aac;*/
    color:  var(--primary-color);
    margin-left:;
    font-size: 2.3rem;
    font-family: "impact";
}

.accsec2-title:hover{
    font-weight: bold;
    transition: 0.3s;
}

.imaccsec2{
    height: 15rem;
    width: 19rem;
    border-radius: 30px;
    border-style: solid;
    border-color: var(--navbar-icon-color);
    border-width: 0.25rem;
    box-shadow: 10px 5px 5px grey;
    background-color: var(--titre-accueil-color);

}

.imaccsec2:hover{
    transform:rotate(5deg) ;
    transition: var(--navbar-transition-speed);
}


.accsec2-link{
    align-items: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media only screen and (max-width:1024px){
    .accsec2-menu{
        flex-direction: column;
    }
    .banniereactu{
        height: 5rem;
    }
}



/******************nouvelle page*********************/

.sectiontitre{
    padding-top: 3rem;
    font-size: 4rem;
    color: #127c09;
    margin-left: 2rem;
    margin-right: 2rem;
    border-bottom: solid;
    border-bottom-width:.5rem ;
    border-bottom-color: black;
    padding-bottom: 2rem;
    background-color: #bca443;
    border-radius: 10px;


}



/**********curage/*******/
.sectxtim-item21{
    width: 35rem;
    height: 100%;
    padding: 2.5rem;
    color: var(--text-color);
    text-align: center;
    border-radius: 50% 20% / 10% 40%;
    background-color: var(--titre-accueil-color);
    font-family: system-ui;
}

.sectxtim-item22{
    display: flex;
    flex-direction: column;
    width: 35rem;
    height: 100%;
    padding: 1.3rem;
    color: var(--text-color);
    text-align: center;
    border-radius: 50% 20% / 10% 40%;
}

.imsectxtim2{
    margin: 1rem;
    height: 17rem;
    width: 17rem;
    border-radius: 30px;
    border-style: solid;
    border-color: var(--titre-accueil-color);
    border-width: 0.25rem;
    align-items: center;
}

.sectxtim2{
    padding-top: 5rem;
    top: auto;
    width: 100%;
    bottom: 0px;
    padding-bottom: 2rem; 
    background: linear-gradient(white, var(--navbar-icon-color), white);
}

.vw320h240{
    height: 240px;
    width: 320px;
}

@media only screen and (max-width: 600px){
    .sectxtim-item21{
        width: 13rem;
    }
    .sectxtim-item22{
        width: 17rem;
    }
    .vw320h240{
        width: 240px;
    }
    .imsectxtim2{
        margin: 0;
    }
}

/*****************curage***************/
/***************depollution************/
.sectxtim3{
    padding-top: 5rem;
    top: auto;
    width: 100%;
    bottom: 0px;
    padding-bottom: 2rem; 
    background: linear-gradient(white, var(--titre-accueil-color), white);
}

.sectxtim-item31{
    flex-direction: row;
    justify-content: center;
    width: 35rem;
    height: 100%;
    padding: 2.5rem;
    color: var(--text-color);
    text-align: center;
    border-radius: 50% 20% / 10% 40%;
    background-color: var(--primary-color);
    font-family: system-ui;
}

.sectxtim-item32{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 35rem;
    height: 100%;
    padding: 1.3rem;
    color: var(--text-color);
    text-align: center;
    border-radius: 50% 20% / 10% 40%;

}



.imsectxtim3{
    height: 30rem;
    width: 30rem;
    border-radius: 30px;
    border-style: solid;
    border-color: var(--navbar-icon-color);
    border-width: 0.25rem;
}

.vw500{
    width: 500px;
}

@media only screen and (max-width: 600px){
    .sectxtim-item31{
        width: 13rem;
    }
    .sectxtim-item32{
        width: 17rem;
    }
    .vw500{
        width: 240px;
    }
    .imsectxtim3{
        width: 17rem;
        height: 17rem;
    }
}
/***************depollution***********/
/***************demolition************/
.sectxtim4{
    padding-top: 5rem;
    top: auto;
    width: 100%;
    bottom: 0px;
    padding-bottom: 2rem; 
    background: linear-gradient(white, var(--navbar-icon-color), white);
}

.sectxtim-item41{
    margin-left: 10rem;
    margin-right: 10rem;
    height: 100%;
    padding: 2.5rem;
    color: var(--text-color);
    text-align: center;
    border-radius: 50% 20% / 10% 40%;
    background-color: var(--titre-accueil-color);
    font-family: system-ui;
}

.sectxtim-item42{
    width: 35rem;
    height: 100%;
    padding: 2.7rem;
    color: var(--text-color);
    text-align: center;
    border-radius: 50% 20% / 10% 40%;
    background-color: var(--titre-accueil-color);
    font-family: system-ui;
}

.sectxtim-item43{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 35rem;
    height: 100%;
    padding: 1.3rem;
    color: var(--text-color);
    text-align: center;
    border-radius: 50% 20% / 10% 40%;

}



.imsectxtim4{
    height: 30rem;
    width: 30rem;
    border-radius: 30px;
    border-style: solid;
    border-color: var(--titre-accueil-color);
    border-width: 0.25rem;
}

.imsectxtim41{
    height: 20rem;
    width: 20rem;
    border-radius: 30px;
    border-style: solid;
    border-color: var(--titre-accueil-color);
    border-width: 0.25rem;
}

@media only screen and (max-width:1024px){

    .sectxtim-item41{
        margin-left: 2rem;
        margin-right: 2rem;

    }
}

@media only screen and (max-width: 600px){

    .sectxtim-item41{
        margin-left: 1rem;
        margin-right: 1rem;
        width: 13rem;

    }
    
    .sectxtim-item42{
        width: 13rem;
    }
    .sectxtim-item43{
        width: 17rem;
    }
    
    .imsectxtim4{
        width: 17rem;
        height: 17rem;
    }
    .imsectxtim41{
        width: 17rem;
        height: 17rem;
    }
}

/***************demolition***********/
/***************desamianatage************/
.sectxtim5{
    padding-top: 5rem;
    top: auto;
    width: 100%;
    bottom: 0px;
    padding-bottom: 2rem; 
    background: linear-gradient(white, var(--primary-color), white);
}

.sectxtim-item51{
    width: 35rem;
    height: 100%;
    padding: 2.5rem;
    color: var(--text-color);
    text-align: center;
    border-radius: 50% 20% / 10% 40%;
    background-color: var(--navbar-icon-color);
    font-family: system-ui;
}

.sectxtim-item52{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 35rem;
    height: 100%;
    padding: 1.3rem;
    color: var(--text-color);
    text-align: center;
    border-radius: 50% 20% / 10% 40%;

}
.sectxtim-item53{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 35rem;
    height: 100%;
    padding: 1.3rem;
    color: var(--text-color);
    text-align: center;
    border-radius: 50% 20% / 10% 40%;
    background-color: var(--navbar-icon-color);

}



.imsectxtim5{
    height: 30rem;
    width: 30rem;
    border-radius: 30px;
    border-style: solid;
    border-color: var(--navbar-icon-color);
    border-width: 0.25rem;
}

@media only screen and (max-width: 600px){

    .sectxtim-item51{
        width: 13rem;

    }
    
    .sectxtim-item52{
        width: 17rem;
    }

    
    .imsectxtim5{
        width: 17rem;
        height: 17rem;
    }
   
}

/***************desamiantage***********/
/*************contct***************/
.contact{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 10rem;
    margin-top: 30rem;
    border: solid;
    padding: 2rem;
    margin-top: 2rem;
    border-radius: 10px;
    font-family: serif;
    font-size: 1.5rem;
}

.sectxtim6{
    padding-top: 5rem;
    top: auto;
    width: 100%;
    bottom: 0px;
    padding-bottom: 2rem; 
    background: linear-gradient(white, var(--titre-accueil-color), white);
}

.sectxtim-item61{
    width: 35rem;
    height: 100%;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    color: var(--text-color);
    text-align: center;
    border-radius: 50% 20% / 10% 40%;
    background-color: var(--navbar-icon-color);
    font-family: system-ui;
}
.sectxtim-item62{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 35rem;
    height: 100%;
    padding: 1.3rem;
    color: var(--text-color);
    text-align: center;
    border-radius: 50% 20% / 10% 40%;

}

.rensexitbat{
    text-decoration: none;
    color: var(--primary-color);
}

@media only screen and (max-width: 600px){
    .sectxtim-item61{
        width: 13rem;
    }
    .sectxtim-item62{
        width: 17rem;
    }

    .imsectxtim{
        height: 17rem;
        width: 17rem;
    }
}

/***************contact**************/

.sectxtim{
    padding-top: 5rem;
    top: auto;
    width: 100%;
    bottom: 0px;
    padding-bottom: 2rem; 
    background: linear-gradient(white, var(--titre-accueil-color), white);
}



.sectxtim-menu{
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    

}

.secimtxt-menu{
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: space-around;


}


.sectxtim-item{
    width: 35rem;
    height: 100%;
    padding: 2.5rem;
    color: var(--text-color);
    text-align: center;
    border-radius: 50% 20% / 10% 40%;
    background-color: var(--navbar-icon-color);
    font-family: system-ui;
}

.sectxtim-item2{
    width: 35rem;
    height: 100%;
    padding: 1.3rem;
    color: var(--text-color);
    text-align: center;
    border-radius: 50% 20% / 10% 40%;

}


.imsectxtim{
    height: 30rem;
    width: 30rem;
    border-radius: 30px;
    border-style: solid;
    border-color: var(--navbar-icon-color);
    border-width: 0.25rem;
}

.moyentitre{
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    color: var(--titre-accueil-color);
    text-align: center;
}

.petittitre{
    color: var(--navbar-icon-color);
    text-align: center;
}

.interligne2{
    border-bottom: solid;
    border-bottom-width: 3px;
    border-bottom-color: var(--navbar-icon-color);
}

.sectxt-item{
    padding-right: 5rem;
    color: var(--text-color);
    text-align: center;
}
.sectxt-menu{
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 3rem;

}




.enrouge{
    color: red;
}

.envert{
    color: green;
}


@media only screen and (max-width:1024px){
    .sectxtim-menu{
        flex-direction: column;
    }
    .contact{
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom: 10rem;
}

@media only screen and (max-width: 600px){
    h1{
        font-size: 1rem;
    }
    h2{
        font-size: 0.8rem;
    }
    h3{
        font-size: 0.7rem;
    }

    .sectxtim-menu{
        justify-content: center;
    }
    .sectxtim-item{
        width: 13rem;
    }
    .sectxtim-item2{
        width: 17rem;
    }
    .imsectxtim{
        height: 17rem;
        width: 17rem;
    }


}