*{
box-sizing: border-box;
}

body{
background: url('../img/background.jpg');
background-attachment: fixed;
background-position: center;
background-size: cover;
}

/* bouton d'aide à droite en mode portable */

.aide1{
position: fixed;
bottom: 30vh;
right: 0px;
z-index: 99;
}

.aide1 .dropdown-menu {
text-align: center;
background-color: aliceblue;
}

.buttonwidth{
width: 10px;
height:150px;
}

/* bouton d'aide en bas à droite en mode desktop */
.aide2{
opacity: 0;
}


/*********** Page index ****************/


/* barre de menu */

.navbar{
background: url('../img/bgheader.jpg');
box-shadow : 0px 4px 10px rgb(41, 41, 41);
font-size: 1.8rem;
}

.nav-link:hover{
padding-bottom: 2px;
border-bottom : 2px #495057 solid;
}

.navbar img{
height: 100px;
}

/* corps du site */

main{
padding-top: 19.3vh;
background-color: rgba(255, 255, 255, 0.835);
overflow: hidden;
}

main .row{
display:flex;
justify-content: center;
align-items: center;  
}

/* carousel */

.carousel-item h1{
width: 100%;
margin-bottom: 50px;
background-color: #067790ca;
text-transform: uppercase;
border-radius: 0.3rem;   
}

/* box fuel et chaudiere */

#box .card{
margin-bottom: 30px; 
position: relative;
top: -50px;
z-index: 1;
}

#box .card-title {
text-align: center;
}

#box .card-title button {
width: 100%;
text-align: center;
}


/* lignes étape d'achat et réassurance */

.ligne1, .ligne2{
background-color: #F0F0F0;
text-align: center;
opacity: 0;
}

.ligne1{
border-bottom: 2px solid #067790;
}

.ligne2{
border-top: 2px solid #067790;
}

.ligne1 i, .ligne2 i{
font-size: 2rem;
}

hr{
background-color: white;
}

.fondu, .fondu1, .fondu2{
display: none;
color: black;
}

h2{
text-align: center;
}

h3{
color: #067790;
}

h4{
font-size: 0.8rem;
font-weight: bold;    
}

/* partie notre entreprise */ 

.jumbotron {
padding-top: 1.5rem;
padding-bottom: 1.2rem;
background-color: #067790;
color: white;
}

.ligne-jumbotron{
background-color: white;
color: black;
margin: 10px;
border-radius: 0.3rem;
height: 70vh;

}

.ligne-jumbotron img{
width:116px;
height:150px;
}

/* les onglets */

#myTabContent{
background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;    
}

#avis-tab, #produits-tab, #actualite-tab{
font-size: 2rem;
color: #067790;
text-align: center;
}

.avis {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 250px;
margin: 10px;
border: 1px solid #067790;
border-radius: 0.6rem;
font-size: 1.4rem;
text-align: center;
}

.avis i{
    color: orange;
    font-size : 1.2rem;
}

#produits img {
height: 250px;
margin-bottom: 10px;
}

#actualite img{
width:300px;
height: 200px;
}

/******************* Footer ******************/

footer{
background: #067790;
display:flex;
justify-content: center;
align-items: center;
color: white;
}

footer img{
    height: 100px;
}

footer i {
margin-right: 10px;
}

footer button i {
margin-right: 0px;
}

.footerdiv {
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
} 


footer .col-md-3 a{
margin: 5px;
color: white;  
}

footer .col a i{
margin-right: 10px;    
}

footer h5 {
color: black;
}

footer p{
margin-top: 3vh;
color: black;
}

footer label{
color: black;
}

.barrefooter{
background-color: white;
text-align: center;
border: 1px solid #067790;
}

.barrefooter a{
    color:black;height: 50px;
}



/*************** Page Fuel **************/

.sousmenu{
    position:fixed;
    z-index: 99;
    opacity: 0;
    }

.gauche{
margin-top: 50px;

background-color: #F0F0F0;
}

.droite{
margin-top: 50px;
}  

.gauche h2 {
width: 100%;
background-color: #067790;
text-align: left;
color: white;
padding: 5px;
}

.droite h2{
width: 100%;
background-color: #067790;
color: white;
padding: 5px;
text-align: center;
}

.recapitulatif{
border-top:2px solid #067790;
border-bottom:2px solid #067790;
text-align: center;
}

.droite .row{
margin-bottom: 20px;
}

.boxdroite{
height: 300px;
border: 1px solid #067790;
border-radius: 0.6rem;
display: flex;
flex-direction: column;
background-color: white;
}

.boxdroite .col{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}

    
.boxdroite .col i{
        color: orange;
        font-size : 1.2rem;
    }

.bouton2 {
    width: 100%;
margin-bottom: 20px;
    text-align: center;
}


/*************** Page Chaudiere **************/

#chaudiere .row{
    display:flex;
    justify-content: center;
align-items: flex-start;
}

#chaudiere #menugauche{
display: none;
}

#chaudiere .filtre .row{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}


#chaudiere .produit {
    display:flex;
    justify-content: center;
align-items: flex-start;
}

#chaudiere .produit .col-md-3 {
margin-top: 10vh;
}

#chaudiere button, .boutondevis{
    margin: 10px;
    }

#chaudiere h1{
margin: 10px;
color: #067790;
text-align:center;
font-size: 3rem;
}

#chaudiere h3 {
margin: 10px 0;
color: black;
}

.filtre{
border-right: 1px solid #067790;
}

.filtre h3{
text-align: center;
}

.filtre a {
color:black;
}

.modal-body img{
width: 100%;
}

.catalogue{
margin-top: 8vh;
}

.catalogue .row{
border-top: 1px solid #067790;

}

/*********** Page Société **************/

#societe{
    text-align: center;
}

#societe h1{
color:#067790;
text-align: center;
margin: 20px;
font-size: 3rem;
}

#societe h2{
text-align: center;
margin: 20px;
font-weight: bold;
}

#societe p {
font-size: 1.5rem;
}




/************ page contact ************/

.ligne-jumbotron1{
    background-color: white;
    color: black;
    margin: 10px;
    border-radius: 0.3rem;
    padding: 20px;
}

.ligne-jumbotron1 h2, .ligne-jumbotron2 h2{
margin-bottom: 5vh;

}

.ligne-jumbotron1 textarea{
margin-top: 20px;
}

.ligne-jumbotron2{
    background-color: white;
    color: black;
    margin: 10px;
    border-radius: 0.3rem;
    padding: 20px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
}

.ligne-jumbotron2 a {
color: black;
margin: 10px;
}


/************* page actualité **********/

#pageactualite h1{
text-align: center;
margin: 20px;
margin-bottom: 10vh;
}

#pageactualite .row{
margin-bottom: 5vh;
background-color: white;
padding:10px;
border-radius: 0.6rem
}







/* Medium devices (tablets, 768px and up) (responsive bootstrap)*/
@media (min-width: 768px) {

/* bouton d'aide à droite en mode portable*/

    .aide1 {
        opacity: 0;
        }

/* bouton d'aide en bas à droite en mode desktop */

    .aide2{
        position: fixed;
        bottom: 0px;
        right: 20px;
        z-index: 99;
        opacity: 0.6
        }
        
        .aide2:hover{
        opacity: 1;
        }

        .aide2 .dropdown-menu {
            text-align: center;
            background-color: aliceblue;
            }

/* box fuel et chaudiere */

#box .card{
            margin: 10px; 
}

/* ligne étapes d'achat et réassurance */

            .ligne1, .ligne2{
                height: 150px;
                }

            .fa-arrow-circle-down{
                transform: rotate(0.75turn);
                }

/* partie notre entreprise */ 

.ligne-jumbotron{
    height: 25vh;
}

/* les onglets */

#avis, #produits, #actualite {
    height: 300px;
    
}

/*************** Page Fuel **************/

/* Second menu */

.sousmenu{
    position:fixed;
    z-index: 99;
    opacity: 1;
    top:19.3vh; 
    }


    .gauche{
        margin-top: 50px;
        margin-right: 20px;
                }
        
        .droite{
        margin-top: 100px;
        margin-left: 20px;    
        }

/**************** page chaudiere et plomberie****************/

#chaudiere #menugauche{
    display: block;
      display: flex;
    flex-direction: column;
    }

#chaudiere .filtre .row{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
   
.choixproduits h1 {
font-size: 5rem
}

/*********** Page Société **************/     

#societe{
text-align: left;
}

#societe img{
    height: 400px;
    }


 }