@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto Condensed', sans-serif;
}
body {
    transition: 0.5s;
}
a{
    text-decoration: 0;
}


/*Couleur du fond*/
.header-home {
   /* background-color: #d2d2d24e;*/
   background-color:#ffffff;
   /* #F4F0E3;$/
   /* #F3F2FF;*/
    /*#f5f1e9*/
   /* #752e7c1e;*/
   
   /* #bfa5c8;*/
   /* background-color: #e9e7e9;*/
   /* background-color: #FFF;*/

    /*background-color:rgb(238, 234, 234);*/
    position: relative;
}

/*Explication de la balise h1*/
h1 {
    font-size: 60px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 35px 0;
    text-transform: capitalize;
}

titre {
    font-size: 30px;
    font-weight: normal;
    letter-spacing: 1px;
    margin: 35px 0;
    text-transform: capitalize;
    color:#797878;
    align-items: center;
}

sous-titre{
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 2px;
    margin: 35px 0;
    /*text-transform: capitalize;*/
    color: #000;
    align-items: center;
}
/* ------------------------------------MENU Logo--------------------------------------------------*/


/* menu */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*espacement au dessus de l'image logo pour le pixel et avec les bords pour le % */
    padding: 0px 5%;
}

.logomagimmo{
    margin-left:5%;
}
/*Logo Magali*/
.logomag {
    font-family: Arial;
    text-transform: capitalize;
    color: #000;
    font-size: 15px;
    font-weight: normal;
    font-style:italic;
}
header .logo_link {
    display: flex;
    font-family: Arial;
    align-items: baseline;
}
/*Logo Blaret*/
.logoblaret {
    text-transform: capitalize;
    font-family: Arial;
    color: #000;
    font-size: 30px;
    font-weight: normal;
    font-style:normal;
}
header .logo_link {
    display: flex;
    font-family: Arial;
    align-items: baseline;
}
/*Immobilier*/
.logoimmo {
    text-transform: capitalize;
    font-family: Arial;
    color: #000;
    font-size: 20px;
    font-weight: bold;
    font-style:normal;
}
header .logo_link {
    display: flex;
    align-items: baseline;
    font-family: Arial;

}
    /* ------------------------------------MENU hors logo--------------------------------------------------*/
/*margin-top : marge du haut pour les mots du menu 
margin-left : marge à laisser à gauche */
.menu_link {
    margin-left: 20%;
    font-family: Arial;
    margin-top : 2px;
}
.menu li a{
    text-decoration: underline;
    color : #797878;
    padding : 10px 10px;
    font-family: Arial;

}

/*menu du haut*/
.menu_link a {
/*espacement entre les mots: 2eme chiffre*/
    margin: 0px 35px;
    /*taille police menu*/
    font-size: 17px;
    /*couleur mots du menu*/
    color: #211A44;
    /* #545454;*/
    text-decoration: underline;   
    /*police d'écriture du menu*/ 
    font-family: Arial;
}

/*Color du 1er mot du menu*/
.menu_link a:first-child {
    color:  rgb(128, 104, 248);
    font-family: Arial;

}

.link_buttons a{
    margin-left: 3px;
    font-family: Arial;

}
/*couleur Estimation*/
.link_buttons a:first-child {
    color: #211A44;
    font-family: Arial;

}
/*couleur des boutons*/
.orange_link {
    /*couleur du texte*/
    color: #fff;
    font-family: Arial;
    /*padding : hauteur du bouton et largeur*/
    padding: 8px 30px;
    /*couleur du bouton
    background-color: #6039d6;*/
    background-color:#211a44d9;
    /* #50419c;*/
    border-radius: 4px;
    text-transform: capitalize;
}





    /* ------------------------------------Premiere partie--------------------------------------------------*/

/*_________PASSIONNEE PAR L'IMMOBILIER */
.home {
    display: flex;
    justify-content: space-between;
    font-family: Arial;

    align-items: center;
    /*margin-top: 120px;*/
    padding: 20px 5%;
}

/*.home {
    background-color: #ffffff;
    margin-top: 50px;
    margin-left: 10%;
    margin-right: 10%;
    display: flex;
    padding:20px;
    justify-content: space-between;
    /*hauteur de la première partie*/
   /* height: 700px;
    position: relative;
}
/*Placement du texte et de l'image*/

.logohaut
{
margin-left :70%;
}
.home .left {
    width: 42%;
    margin-left: 5%;
    display: flex;
    flex-direction: column;
}
/*Ecriture grise du texte*/
.home .left p {
    margin: 25px 0;
    color: #848383;
    font-family: Arial;

    letter-spacing: 0.5px;
    line-height: 25px;
}
/*Bouton orange*/
.home .left .orange_link {
    width: fit-content;
    font-family: Arial;
    padding: 12px 50px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
/*Place que l'image occupe 45% de la largeur*/
.home .right {
    width: 45%;
    font-family: Arial;

}

.home .right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Statistiques*/
.cartes .statistiques {
    /*position: absolute;*/
    /* margin-top: 50px;*/
     /*placement vers le bas*/
     /*hauteur du bandeau*/
     height: 75px;
     /* permet de suivre le mouvement de la page*/
     display: flex;
    justify-content: space-between;
    align-items: center;
     width: 100%;
     background-color: #ffffff;
     /*Couleur en dessous du carré statistiques*/
     box-shadow: 0 0 5px  #211A44;
    padding: 20px 10%;    
    font-family: Arial;

 }
 .cartes .statistiques span {
     text-align: center;
     font-family: Arial;

 }
 /* Couleur texte Chiffre*/
 .cartes .statistiques span h2 {
     align-items: center;
     text-align: center;
     color:  #211A44;
     font-size: 25px;
     margin-bottom: 10px;
 }
 /*Couleur texte en dessous*/
 .cartes .statistiques span p {
     color:  #686868;
     font-family: Arial;

     /*text-transform: capitalize;*/
 }





/*Votre projet est unique*/
.about {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Arial;
    /*margin-top: 120px;*/
    padding: 20px 5%;
}
.about .image {
    width: 45%;
    height: 400px;
    margin-left:5%;
}
.about .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about .content {
    width: 42%;
    font-family: Arial;
    margin-right: 5%;
    align-content: left;
    }
    
.about .content h1 {
   margin: 16px 0;
   font-family: Arial;

}
.about .content h2 {
    margin: 15px 0;
    font-family: Arial;
    color: #333;
}
.about .content p {
    margin: 25px 0;
    font-family: Arial;
    color: #686767; 
    letter-spacing: 0.5px;
    line-height: 25px;
}


/*__________________________Pourquoi nous choisir : Boites*/
.why_us {
    padding: 20px 10%;
    display: flex;
    flex-direction: column;
}
.why_us img {
    width: 80px;
}


.list_box {
    width: 100%;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fill,265px);
    grid-gap: 10px;
}
/*IDEM POUR ESTIMATION*/
.list_estim {
    width: 100%;
    display: grid;
    justify-content: center;
    align-content: center;
    /* permet de faire en sorte que le contenu s'adapte à la taille de la fenetre avec minmax*/
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /*  grid-template-columns: 45% 45%;*/
/* 2 nombres de colonnes et le 2ème chiffre correspond à la largeur de la colonne*/
   /* grid-template-columns: repeat(2, 1fr);*/
    /*auto permet de mettre la hauteur de la boite à la bonne taille en fonction de l'écriture*/
    grid-auto-rows: minmax(400px, auto);
   /* grid-template-columns: repeat(auto-fill,400px);*/
    grid-gap: 10px;
}

.list_estim img{
    width: 150px;
}

/*couleur des boites*/
.list_box .box {
    text-align: center;
    /*couleur de fond*/
    background-color: rgb(255, 255, 255);
    /*#FAF8F4;*/
    border-radius: 4px;
    padding: 50px 25px;
    margin: 10px;
    /*couleur contour des cartes*/
    box-shadow: 0 0 10px #211A44;
     /*rgba(12, 12, 12, 0.559);*/
}

/*IDEM POUR ESTIMATION*/
/*couleur des boites*/
.list_estim .estim {
    text-align: center;
    /*couleur de fond*/
    background-color: rgb(255, 255, 255);
    /*#FAF8F4;*/
    border-radius: 4px;
    padding: 50px 25px;
    margin: 10px;
    /*couleur contour des cartes*/
    box-shadow: 0 0 10px #211A44;
     /*rgba(12, 12, 12, 0.559);*/
}

/*Couleur du gros texte  dans les boites*/
.list_box .box h2 {
    margin: 10px 0;
    color: #211A44;
    letter-spacing: 1px;
    text-transform: capitalize;
}

/*IDEM ESTIMATION
/*Couleur du gros texte  dans les boites*/
.list_estim .estim h2 {
    margin: 10px 0;
    color: #211A44;
    letter-spacing: 1px;
    text-transform: capitalize;
}


/*Couleur du petit texte dans les boites*/
.list_box .box p {
    color: #999;
}

/*IDEM ESTIMATION
/*Couleur du petit texte dans les boites*/
.list_estim .estim p {
    color: #999;
}




/*________________Services PAGES d'ACCUEIL_________________*/
.decoration {
    padding: 20px 10%;
    width: 100%;
}
.deco-list {
    width: 80%;
    display: grid;
    justify-content: center;
    /* Si 3 cases par ligne : 31.11%; 40% pour 2 cases par lignes*/
    grid-template-columns: repeat(auto-fill,40%);
    gap: 30px;
    margin-left:10%;    
}

.deco-list .deco img {
    width: 100%;
    object-fit: cover;
}
.deco-list .deco {
    /*text-align: center;*/
    cursor: pointer;
    padding: 10px;
    transition: 0.5s;
    /*couleur contour des boites*/
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.69);
    /*couleur fond des boites*/
    background-color: #ffffff;
}
.deco-list .deco:hover {
    transform: scale(1.1);
}
.deco-list .deco p {
    margin: 5px 0;
    font-weight: bold   ;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    /*text-align: center;*/
}
/*Titre du haut dans les services*/
.deco-list .deco h4 {
    /*Marge en haut 1er chiffre, Marge sur les côtés 2ème chiffre
    margin: 5px 5px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center;
    color:#211A44;
    font-size:20px;*/
        text-align:center;
        font-family : arial;
        text-decoration: none;
        /*Espacement entre les lettres*/
        letter-spacing:0vmax;
        /* couleur du texte lire plus*/
        color:#000000;
        /*taille du texte*/
        font-size: 18px;
        /*texte en gras*/
        font-weight: 50;
        /*mets les lettres en majuscule*/
        text-transform: uppercase;
        /*alignement du texte*/
        line-height: 25px ;
        margin-bottom: 10px;
        
        /*si on veut mettre en gras*/   
        
}

/*Sous- Titre du haut dans les services*/
.deco-list .deco h5 {
    margin: 5px 5px;
    letter-spacing: 0.5px;
    text-align: center;
    color:#4b4a4d;
    font-size:16px;
    text-decoration: none;
    text-align : center;
    text-rendering: geometricPrecision;
}


/*Sous- Titre du haut dans les services*/
.deco-list .deco h6 {
   margin: 0 10px;
    letter-spacing: 0.5px;
    color:#5d5c5c;
    font-size:16px;
    text-align:letf;
    font-weight: normal;    
    text-decoration: none;

}




.deco-list .deco span {
    font-size: 15px;
    color: #333;
    text-align: center;
}

.deco-list .deco .orange_link {
    margin-top: 5px;
    border: 1px solid #694c45c5;
    letter-spacing: 1px;
    width: 100%;
    transition: 0.5s;
    cursor: pointer;
}
.deco-list .deco .orange_link:hover {
    background-color: transparent;
    color: #694c45c5; 
}





/*_________Services Pages services*/
.services {
    padding: 20px 10%;
    width: 100%;
}
.services-list {
    width: 100%;
    display: grid;
    justify-content: center;
    /* Si 3 cases par ligne : 31.11%; 40% pour 2 cases par lignes*/
    grid-template-columns: repeat(auto-fill,40%);
    gap: 30px;
}

.services-list .services img {
    width: 100%;
    object-fit: cover;
}
.services-list .services {
    /*text-align: center;*/
    cursor: pointer;
    padding: 10px;
    transition: 0.5s;
    /*couleur contour des boites*/
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.69);
    /*couleur fond des boites*/
    background-color: #ffffff;
}
.services-list .services:hover {
    transform: scale(1.1);
}
.services-list .services p {
    margin: 5px 0;
    font-weight: bold   ;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center;

}


.services-list .services span {
    font-size: 15px;
    color: #333;
    text-align: center;
}

.services-list .services .orange_link {
    margin-top: 5px;
    border: 1px solid #694c45c5;
    letter-spacing: 1px;
    width: 100%;
    transition: 0.5s;
    cursor: pointer;
}
.services-list .services .orange_link:hover {
    background-color: transparent;
    color: #694c45c5;
    
}
/*___________FIN PAGES SERVICES________*/












    /* ------------------------------------ PIED DE PAGE--------------------------------------------------*/

footer {
    margin-top: 5px;
    /*couleur de fond du pied de page*/
    background-color:#FFFFFF;
    /* #cbcac8;*/
   /* #f5f1e9;*/
    /* rgb(238, 234, 234);*/
    height: auto;
}
.footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
.footer-content h1 {
    font-size: 15px;
    color: #211A44;
    margin: 10px 0;
}
.footer-content p {
    max-width: 500px;
    margin: 20px 0;
    letter-spacing: 1px;
    font-size: 10px;
    color: #211A44;
}





.logodebut {
    /*espace laissé entre le premier encart et la première carte*/
  margin-top: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right:80%;  
}



/* ----------------------------Carte placée qui se rectifie en fonction de la taille de la page -----------------*/

.cartes {
    /*espace laissé entre le premier encart et la première carte*/
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cartes .carteblanche {
    /*couleur bordure carte*/
  border: 1px solid rgb(151, 148, 148);
  /*largeur des cartes*/ 
  max-width: 64%;
  /*espacement entre les deux cartes*/
 margin-bottom: 20px;
  /* espacement du texte avec la bordure*/
  padding: 30px;
  /*place le texte h1 et le bouton au centre de la boite*/
  place-items: center;
/*marge à gauche qui est laissée blanche*/
 /* margin-left :18%;*/
  /*couleur du fond*/
  background-color: rgb(255, 255, 255);
  /*arrondi de la bordure*/
  border-radius: 15px;
}

.cartes .cartecontact {
    /*couleur bordure carte*/
  border: 1px solid rgb(151, 148, 148);
  /*largeur des cartes*/ 
  max-width: 40%;
  /*espacement entre les deux cartes*/
  margin-bottom: 20px;
  /* espacement du texte avec la bordure*/
  padding: 40px;
  /*place le texte h1 et le bouton au centre de la boite*/
  place-items: center;
/*marge à gauche qui est laissée blanche*/
  margin-left :30%;
  /*couleur du fond*/
  background-color: rgb(255, 255, 255);
  /*arrondi de la bordure*/
  border-radius: 15px;
}



 .cartelogo{
    /*couleur bordure carte*/
  border: 1px solid rgb(151, 148, 148);
  /*largeur des cartes*/ 
  max-width: 30%;
  /*espacement entre les deux cartes*/
  margin-bottom: 20px;
  /* espacement du texte avec la bordure*/
/*  padding: 40px;*/
  /*place le texte h1 et le bouton au centre de la boite*/
  place-items: center;
/*marge à gauche qui est laissée blanche*/
  margin-left :5%;
  /*couleur du fond*/
  background-color: rgb(255, 255, 255);
  /*arrondi de la bordure*/
  border-radius: 15px;
}

.cartes .cartesanscontour {
    /*couleur bordure carte*/
  /*largeur des cartes*/ 
  font-family: Arial;
  max-width: 80%;
  /*espacement entre les deux cartes*/
  margin-bottom: 10px;
  /* espacement du texte avec la bordure*/
  padding: 30px;
  /*place le texte h1 et le bouton au centre de la boite*/
 /* place-items: center;*/
/*marge à gauche qui est laissée blanche*/
  /*margin-left :15%;*/
  /*couleur du fond*/
  background-color: rgb(255, 255, 255);
  /*arrondi de la bordure*/
  border-radius: 15px;
  text-align: left;
}

.cartes .carte-estimation {
    /*couleur bordure carte*/
  /*largeur des cartes*/ 
  font-family: Arial;
    width: 60%;
    min-width: 60%;
  /*espacement entre les deux cartes*/
  margin-bottom: 10px;
  /* espacement du texte avec la bordure*/
  /*padding: 30px;*/
  /*place le texte h1 et le bouton au centre de la boite*/
 /* place-items: center;*/
/*marge à gauche qui est laissée blanche*/
  /*margin-left :15%;*/
  /*couleur du fond*/
  background-color: rgb(255, 255, 255);
  /*arrondi de la bordure*/
  border-radius: 15px;
  text-align: left;
}


.cartes .cartesanscontour p{
    font-family : arial;
    text-decoration: none;
    /*Espacement entre les lettres*/
    letter-spacing :0.2 px;
    /* couleur du texte lire plus*/
    color:#4e4d4d;
    /*taille du texte*/
    font-size: 16px;
    /*alignement du texte*/
    text-align :center;
    line-height: 25px;
    /*si on veut mettre en gras*/   
    /*font-weight: bold;*/
}

.cartes .cartesanscontour essai{
    color:#e90a0a;
}



.cartes .cartesanscontour texte{
    font-family : arial;
    text-decoration: none;
    letter-spacing: 3px;
    /*Espacement entre les lettres*/
    letter-spacing:0vmax;
    /* couleur du texte lire plus*/
    color:#4e4d4d;
    /*taille du texte*/
    font-size: 15px;
    /*alignement du texte*/
    text-align :left;
    line-height: 25px;
    /*si on veut mettre en gras*/   
    /*font-weight: bold;*/
}
.cartes .cartesanscontour h6{
    font-family : arial;
    text-decoration: none;
    /*Espacement entre les lettres*/
    letter-spacing:0vmax;
    /* couleur du texte lire plus*/
    color:#211A44;
    /*taille du texte*/
    font-size: 20px;
    /*texte en gras*/
    font-weight: 200;
    /*mets les lettres en majuscule*/
    text-transform: uppercase;
    /*alignement du texte*/
    text-align : left;
    line-height: 25px ;
    margin-bottom: 10px;
    
    /*si on veut mettre en gras*/   
    /*font-weight: bold;*/
}

.cartes .cartetransparente {
    /*couleur bordure carte*/
  border: 1px solid rgb(151, 148, 148);
  /*largeur des cartes*/ 
  max-width: 70%;
  /*espacement entre les deux cartes*/
  margin-bottom: 40px;
  /* espacement du texte avec la bordure*/
  padding: 30px;
  /*place le texte h1 et le bouton au centre de la boite*/
  place-items: center;
/*marge à gauche qui est laissée blanche*/
  margin-left :15%;
  /*couleur du fond*/
  background-color: #0808088b;
  /*arrondi de la bordure*/
  border-radius: 15px;

}

.cartes .cartebleu {
    /*couleur bordure carte*/
  border: 3px solid rgba(176, 62, 62, 0.336);
  /*largeur des cartes*/ 
  max-width: 70%;
  /*espacement entre les deux cartes*/
  margin-bottom: 40px;
  /* espacement du texte avec la bordure*/
  padding: 30px;
  /*place le texte h1 et le bouton au centre de la boite*/
  place-items: center;
/*marge à gauche qui est laissée blanche*/
  margin-left :15%;
  background-color: #b23b4951;
  /*arrondi de la bordure*/
  border-radius: 15px;
}


.cartes .carteblanche p{
    font-family : arial;
    text-decoration: none;
    /*Espacement entre les lettres*/
    letter-spacing:0vmax;
    /* couleur du texte lire plus*/
    color:#4e4d4d;
    /*taille du texte*/
    font-size: 15px;
    /*alignement du texte*/
    text-align :center;
    line-height: 25px;
    
    /*si on veut mettre en gras*/   
    /*font-weight: bold;*/
}

.cartes .carteblanche centre{
    font-family: Arial;
    text-decoration: none;
    /*Espacement entre les lettres*/
    letter-spacing:0vmax;
    /* couleur du texte lire plus*/
    color:#807e7e;
    /*taille du texte*/
    font-size: 20px;
    /*alignement du texte*/
    text-align : center;
    /*si on veut mettre en gras*/   
    /*font-weight: bold;*/
}

.cartes .carteblanche h2{
    font-family: Arial;
    text-decoration: none;
    /*Espacement entre les lettres*/
    letter-spacing:0vmax;
    /* couleur du texte lire plus*/
    color:#000000;
    /*taille du texte*/
    font-size: 22px;
    /*alignement du texte*/
    text-align :justify;
    /*si on veut mettre en gras*/   
    /*font-weight: bold;*/
    font-weight: bold;
        letter-spacing: 1px;
        /*hauteur au dessus pour le Premier chiffre*/
        margin: 5px 0;
        text-transform: capitalize;

}
.cartes .carteblanche h1{
    font-family: Arial;
    text-decoration: none;
    /*Espacement entre les lettres*/
    letter-spacing:0vmax;
    /* couleur du texte lire plus*/
    color:#000000;
    /*taille du texte*/
    font-size: 23px;
    /*alignement du texte*/
    text-align :justify;
    /*si on veut mettre en gras*/   
    /*font-weight: bold;*/
        font-weight: bold;
        letter-spacing: 1px;
        margin: 35px 0;
        text-transform: capitalize;
}

.cartes .carteleft{
    border : 3px solid #000;
    max-width: 35%;
    padding: 20 px;
    margin-left : 15%;
    background-color: #FFFFFF;

}
.cartes .carteright{
    border : 3px solid #000;
    max-width: 35%;
    padding: 20 px;
    margin-left : 50%;
    background-color: #FFFFFF;
}



.cartes .carte h1 {
  margin-top: 0px;
  text-transform: uppercase;
}
.cartes .carte a {
  text-decoration: none;
  /* couleur du texte lire plus*/
  color: rgb(252, 247, 247);
  font-weight: bold;
}

.cartes .cartebleu p {
    font-family: Arial;
    text-decoration: none;
    /*Espacement entre les lettres*/
    letter-spacing:0vmax;
    /* couleur du texte lire plus*/
    color:#545454;
    /*taille du texte*/
    font-size: 18px;
    /*alignement du texte*/
    text-align :justify;
    /*si on veut mettre en gras*/   
    /*font-weight: bold;*/
  }

.cartes .carte h2 {
    font-family: Arial;
    text-decoration: none;
    /* couleur du texte lire plus*/
    color:#000000;
    /*taille du texte*/
    font-size: 20px;
    text-align: left;
    /*si on veut mettre en gras*/
    font-weight: bold;
  }

 /**************Pour séparer en deux parts égales *******/
 .cartegauche{
    width : 39%;
    float :left;
    min-height: 410px ;

    background-color :#ffffff;
    margin :0;
    padding : 20px;
   border-left :thick double #898c8d;
   /* border-top:thick double #898c8d;
    border-bottom:thick double #898c8d; */
   /* border-right:1px solid #000;*/
    border-radius: 15px;

    border-top:1px solid #000;
    background-color: #b23b49;
    margin-left :10%;
    border :1px solid black;
}
.cartedroite{
    width : 39%;
    min-height: 410px ;
    float :right;
    background-color :#ffffff;
    margin :0;
    padding : 20px;
    border :1px solid black;
/*border :thick double #898c8d;*/
    margin-right :10%;
  /* border-right:thick double #898c8d;
   border-top:1px solid #000;*/
   background-color: #bf8d93;
   border-radius: 15px;

    /*border-top:thick double #898c8d;*/
   /* border-bottom:thick double #898c8d; */
}


/*_______________________________SERVICES _________________________________________________________*/
.services {
    /*espace laissé entre le premier encart et la première carte*/
  margin-top: 20px;
  display: flex;
 flex-direction: column;
  align-items: center;
  column-width: auto;
  font-family: Arial;


}

.services .carteleft{
    border : 1px solid #999;
    max-width: 70%;
    min-width: 50%;
    padding :15px;
    margin-left : 0%;
    /*background-color: #FFFFFF;*/
    background-color:rgb(255, 254, 254);
    /*bordure arrondie*/
    border-radius: 15px;

    /*hauteur minimun*/
   /* min-height: 200px;*/
    /*largeur minimum
    min-width: 500px;*/
    /*pourcentage de largeur utilisée pour la boite*/
    width : 75vw;  
}
.services .carteright{
    border : 1px solid #999;
    max-width: 70%;
    padding : 15px;
    width : 75vw;  
    /*laisse 50% de la page à gauche*/
    margin-left : 30%;
    background-color: #FFFFFF;
    border-radius: 15px;
    min-width: 50%;
    background: #ffffff;
    /*couleur foncée #6039d6*/

}

.services p {
   /* margin: 25px 0;*/
    color: #3f3f3f;
    letter-spacing: 0.5px;
    font-size: 20px;
   /* line-height: 25px;*/
     font-family: Arial;

}


.couleurfondservice{
    background-color: #6039d6;
}


.couleurfond{
    background-color:rgb(238, 234, 234);
}

.couleurfondacheteurblanc{
    background-color:rgb(255, 255, 255);
}

.couleurfondacheteurviolet{
    background-color:#6039d6a2;
}
.couleurfondacheteurviolet br{
margin-top: 2px;
}

.couleurecriturelogo{
    color:#211A44;
}

.couleurfondbeige{
    background-color:#f4f0e9;

   /* background-color:#e7e1d8;*+
    /*#d4ab7649;*/
     /**/
    /*:#e9e7e9;*/
}
.couleurfondbleufonce{
   background: #211A44;
   /* background-color:#342a64;*/

  /*  background-color:#342a64;*/
    /*#211A44;*/
    /* #752e7c;*/
    /*#7f5a83;*/
}


.couleurfondbleuclair{
    background-color:#B1BAC7;
    /* #752e7c;*/
    /*#7f5a83;*/
}

.couleurfondblanc{
    background-color:#ffffff;
}
.ecritureacheteurgauche{
    color : #6039d6a2;
}

.imagefond{
    background-image: url("images/img1.jpg");
}

.fondecranaccueil{
    background-image: url("images/fond-ecran-accueil.jpg");

}

.fondecrancontact{
    background-image: url("images/fondecrancontact.png");
    height: 1500 px;

}


.fondecranestimation{
    background-image: url("images/estimation.jpg");

}

.couleurfondgris{
    background-color:#cbcac8;
}




 

 



/*footer autre site*/
/*footer {
    /*couleur du pied de page*/
 /* background-color: black;
  padding: 20px;
  color: white;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
footer .droite {
  display: flex;
}
footer .droite p {
  margin-top: 0px;
  margin-right: 10px;
  cursor: pointer;
}

/*-------------FACEBOOK; LINKED IN, ...._______*/
.socials {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}
.socials li {
    margin: 0 20px;
}
.socials a {
    text-decoration: 0;
    color: #333;
    font-size: 20px;
    transition: 0.5s;
}
.socials a:hover {
    color: #000;
}


/*___________PIED DE PAGE________*/
.footer-bottom {
    background-color:#211A44;
    /* #333;$/
    color: #f5f1e9;
    /* #e9e7e9;*/
    padding: 10px 0;
    text-align: center;
}
.footer-bottom p{
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: capitalize;
}
.footer-bottom  span {
    text-transform: uppercase;
    opacity: .6;
    font-weight: 200;
}



.sidebar , #main {
    display: none;
}
/*responsive*/

.clear{
    clear:both;
}


    /* ------------------------------------MENU REDUIT--------------------------------------------------*/

/*largeur maximale pour l'affichage du menu complet avec de passer en menu réduit*/
@media (max-width:1300px) {
    header{
        padding: 20px;
        margin: 0;
        height: auto;
    }
    .link_buttons {
        display: none;
    }
    .menu_link {
        display: none;
    }
    /*Menu*/
    .sidebar , #main {
        display: block;
    }

    /* height : hauteur du menu réduit lorsqu'il est ouvert*/
    .sidebar{
        height: 61%;
        width:0;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;background-color: #211A44;
        overflow-x: hidden;
        /*hauteur du menu lorsqu'il est petit*/
        padding-top: 65px;
        transition: 0.5s;
        display: flex;
        flex-direction: column;

    }
    /*taille du bouton menu en fois réduit*/
    .sidebar img , #main img {
        width: 20px;

    }

    .sidebar a{
        padding: 15px;
        font-size: 15px;
        color: #fff;
        transform: 0.3s;
    }
    .sidebar a:hover {
        background-color: #211A44;
    }
    .sidebar .closebtn {
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
    }
    .openbtn img {
        width: 20px;
        margin-right: 10px;
    }
    .openbtn {
        background-color: #211A44;
        border: 0;
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 15px;
        padding: 10px 15px;
        border-radius: 5px;
        /*box-shadow: 0 0 5px rgba(0,0,0,0.1);*/
        box-shadow: 0 0 5px #f5f1e9;
        cursor: pointer;
        transition: 0.5s;
    }
    .openbtn:hover {
        background-color: #111;
    }


}

@media (max-width:588px) {
    h1{
        font-size: 30px;
    }
    .home {
        margin: 25px;
        flex-direction: column-reverse;
        height: auto;
        padding-bottom: 25px;
    }
    .home p , .home h1 {
        margin: 0;
    }
    .home .left , .home .right {
        width: 100%;
        height: fit-content;
    }
    .home .right {
        height: auto;
    }
    .statistiques{
        bottom:-100px;
    }
    .statistiques h2 {
        font-size: 15px;
    }
    .statistiques p {
        font-size: 12px;
    }
    .about {
        flex-direction: column;
    }
    .about .image , .about .content {
        width: 100%;
    }

    /*Why us*/
    .list_box , .deco-list , boite {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .box , .deco ,boite{
        width: 100%;
    }

    .services{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    services-list{
        display: flex;
        flex-direction: column;
        align-items: center;  
    }
}




/*------------ESSAI__________*/
/* COLUMNS partial solution */
.services .column {
    padding: 25px;
    columns: 3;
    column-rule: 15px solid #F2F2F2;
    background: #fff;
    background-clip: content-box;
  }



.cartedouble {
    display: flex;
    /*margin-left: 15%;*/
}
.cartedouble > div {
    width: calc(100%/2); /* Setting the width of columns at one third each */
    border : 1px solid #999;
    padding: 15px
}
/* The following CSS is for background colors only */
.cartedouble > div:nth-child(1) {
    background-color: #ffffff;
}
.cartedouble > div:nth-child(2) {
    background-color: #ffffff;
}

  
  

.cartecentrale {
    display: flex;
    margin-left: 20%;
}
.cartecentrale > div {
    width: 75% ;* Setting the width of columns at one third each */
    border : 1px solid #999;
    padding: 15px;

}
/* The following CSS is for background colors only */
.cartecentrale > div:nth-child(1) {
    background-color: #ffffff;
}

  




/*____________________LIGNES DECORATIVES_________*/
.decorative-line {
    margin: 30px 0;
    position: relative;
}
.custom-line {
    display: flex;
    align-items: center;
    justify-content: center;
}
.custom-line::before,
.custom-line::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #211A44, transparent);
}
.custom-line .diamond {
    margin: 0 15px;
    width: 10px;
    height: 10px;
    background-color: #211A44;
    transform: rotate(45deg);
}

.traitbleu{
    background-color: #211A44;
    height: 10px;

}













/*_______________________ESTIMATION____________*/

/* Estimation / list_box : boite*/

.estimation {
    /*1er chiffre espace au dessus*/
    padding: 20px 10%;
    display: flex;
    flex-direction: column;
}
.estimation img {
    width: 200px;
}
.estim_boite {
    width: 100%;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fill,600px);
    grid-gap: 10px;
}
/*couleur des boites*/
.estim_boite .box {
    text-align: center;
    /*couleur de fond*/
    background-color: rgb(255, 255, 255);
    /*#FAF8F4;*/
    border-radius: 4px;
    /*1er chiffre : espacement entre la bordure du haut et le texte*/
    padding: 15px 25px;
    margin: 15px;
    /*couleur contour des cartes*/
    box-shadow: 0 0 10px #8c8c8c;
     /*rgba(12, 12, 12, 0.559);*/
}
/*Couleur du gros texte  dans les boites*/
.estim_boite .box h2 {
    margin: 10px 0;
    color: #211A44;
    letter-spacing: 1px;
    text-transform: capitalize;
}
/*Couleur du petit texte dans les boites*/
.estim_boite .box p {
    color: #999;
    text-align: left;
}






.mag {
    /*espace laissé entre le premier encart et la première carte*/
  /*margin-top: 5px;*/
  display: flex;
  flex-direction: column;
  align-items: center;
}



.mag .magsanscontour {
    /*couleur bordure carte*/
  /*largeur des cartes*/ 
  font-family: Arial;
  max-width: 80%;
  /*espacement entre les deux cartes*/
  /*margin-bottom: 10px;*/
  /* espacement du texte avec la bordure*/
 /* padding: 30px;*/
  /*place le texte h1 et le bouton au centre de la boite*/
 /* place-items: center;*/
/*marge à gauche qui est laissée blanche*/
  /*margin-left :15%;*/
  /*couleur du fond*/
  background-color: rgb(255, 255, 255);
  /*arrondi de la bordure*/
  /*border-radius: 15px;*/
  text-align: left;
}

.logomaison{
    margin-top :5px;
}


.alignementgauche{
   float :left;
}
.alignementdroite{
    float: right;
}

.violet{
    font-color:#211a44;
}



/* LIGNE FIN*/


.separator {
    margin: 40px 0;
  }
.line-solid {
    border: none;
    height: 4px;
    background-color: #cbcac8;
  }




  /*--------------------------Mise en page des tableaux--------------------*/
table{
    border-collapse: collapse;
    PADDING:10PX;
  }
  
  TR{
    width:80%;
  }
  td{
    /*width: 40%;*/
    border: 0px;
    PADDING:10PX;
    margin:10px;
    }
   



/* why-us : service1 / list_box : boite*/

    .service1 {
        padding: 20px 10%;
        display: flex;
        flex-direction: column;
    }
    .service1 img {
        width: 200px;
    }
    .boite {
        width: 100%;
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(auto-fill,900px);
        grid-gap: 10px;
    }
    /*couleur des boites*/
    .boite .box {
        text-align: center;
        /*couleur de fond*/
        background-color: rgb(255, 255, 255);
        /*#FAF8F4;*/
        border-radius: 4px;
        padding: 50px 25px;
        margin: 10px;
        /*couleur contour des cartes*/
        box-shadow: 0 0 10px #211A44;
         /*rgba(12, 12, 12, 0.559);*/
    }
    /*Couleur du gros texte  dans les boites*/
    .boite .box h2 {
        margin: 10px 0;
        color: #211A44;
        letter-spacing: 1px;
        text-transform: capitalize;
    }
    /*Couleur du petit texte dans les boites*/
    .boite .box p {
        color: #717171;
        text-align: left;
        size : 30px;
    }

    /* POUR intégration widget jestimo*/
    .cartes .cartewidget {
        /*couleur bordure carte*/
        border-style: 2px;
      /*largeur des cartes*/ 
      font-family: Arial;
      min-width: 75%;
      max-width: 80%;
      /*espacement entre les deux cartes*/
      margin-bottom: 10px;
      /* espacement du texte avec la bordure*/
      padding: 30px;
      /*place le texte h1 et le bouton au centre de la boite*/
     /* place-items: center;*/
    /*marge à gauche qui est laissée blanche*/
      /*margin-left :15%;*/
      /*couleur du fond*/
      background-color: rgb(255, 255, 255);
      /*arrondi de la bordure*/
      border-radius: 15px;
      text-align: left;
    }