/** PAGE SERVICES */

h1
{
    margin:24px 0 72px;
}

main
{
    margin-top: 72px;
}

main h2
{
    margin-bottom: 24px;
}

main h4
{
    margin-bottom: 48px;
}



.page-services,
.page-services article
{
    display: flex;

}

.page-services article
{
    flex-direction: column;
    align-items: flex-start;
}

.page-services article *
{
    text-align: left;
    margin-right: auto;

}



.page-services article:nth-child(1),
.page-services article:nth-child(2)
{
    padding: 24px 32px;
    
}


.page-services article:nth-child(2)
{
    background-color: #f7f7f7;
}

/** PAGE PARTICULIERS  et PROS*/
.page-particuliers,
.page-pros
{
    display: flex;
    flex-wrap: wrap;
    gap:72px;
  
}

.page-pros
{
    margin-bottom: 96px;
}

.page-particuliers article:nth-child(1),
.page-pros article
{
    width:100%;
    display: flex;
    gap:24px;
   
    background-color: #c7d5a973;
}

.page-pros article
{
    flex-direction: column-reverse;
}

.page-pros article h4
{
    margin: 48px 0 24px;
}

.page-pros article ul
{
    margin:0 0 48px 32px;
}

.page-particuliers article .image-services-display
{
    width:calc(50% - 24px);
    height:100%;

}

.page-pros article .image-services-display
{
    width:100%;
    padding-top: 56.25%;
}

.page-particuliers article .image-services-display
{
   
    background:url(/gfx/beau-jardin.jpg) top center no-repeat;
    background-size: cover;
}

.page-pros article .image-services-display
{
   
    background:url(/gfx/bel-exterieur.jpg) center center no-repeat;
    background-size: cover;
}

.page-particuliers article .texte-services-display
{
    width:50%;
    padding: 48px;
}

.page-pros article .texte-services-display
{
   
    padding: 48px;
}

.page-particuliers .liste-services-particuliers ul,
.page-pros article .texte-services-display ul
{
    text-align: left;
}

.page-particuliers article.situations
{
    width:calc(100% / 3 - 48px);
    padding: 24px;
    max-width: 480px;
    text-align: center;
    border: 2px solid #c7d5a973;
}


.page-particuliers article .icon-particuliers
{
    width:96px;
    height:96px;   
    margin: 0 auto 24px;
}

.page-particuliers article .famille
{
    
    background:url(/gfx/wedding-rings.png) center center no-repeat;
    background-size: contain;
}

.page-particuliers article .degat
{
    
    background:url(/gfx/excavator.png) center center no-repeat;
    background-size: contain;
}

.page-particuliers article .sinistre
{
    
    background:url(/gfx/tree.png) center center no-repeat;
    background-size: contain;
}

.page-particuliers article .vente
{
    
    background:url(/gfx/sell.png) center center no-repeat;
    background-size: contain;
}

.page-particuliers article .achat
{
    
    background:url(/gfx/key.png) center center no-repeat;
    background-size: contain;
}

.logos-partenaires
{
    max-width: 400px;
    margin:auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.logos-partenaires img
{
    width: calc(50% - 48px);
    height:100%;
}

.avance
{
    max-width: 400px;
    text-align: center;
    margin-bottom: 48px;
}

.intervention,
.liste-services-particuliers
{
    margin-bottom: 96px;
}

.intervention
{text-align: center;}

.liste-services-particuliers
{
    margin: 24px 0 72px;
}

.liste-services-particuliers article > div
{
    display: flex;
    justify-content: space-between;
   
}

.liste-services-particuliers article > div ul
{
    width:calc(50% - 48px);
}

.page-pros ul li,
.liste-services-particuliers article > div ul li{
    padding:8px 0;
    list-style-type: none;

}

.page-pros ul li::before,
.liste-services-particuliers article > div ul li::before{
    font-family: FontAwesome;
    font-size: 1.4rem;
    padding-right: 16px;
    display: inline-block;
    color:#c7d5a973;
    content: "\f058";
}

/*.liste-services-particuliers article > div ul li i{
    margin-right: 16px;
    font-size: 2rem;
    color:#008000;
}*/


/** PAGE A PROPOS */

.portrait
{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 0;
    background-color: #323332;
    width:100%;
    margin: 72px auto ;
    padding: 48px 24px ;
}

.portrait h2
{
    margin-bottom: 48px;
    z-index: 10;
    color: #fff;
}

.gregory
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 800px;  
}

.gregory img{
    width:280px;
}

.gregory div{
    text-align: left;
    padding: 0 0 0 0;
    margin: 0 0 0 48px;
    
}

.gregory div p{
    color: #fff;
}

.gregory div .btn-basic{
   margin-top: 24px;
}

.page-apropos
{
    display: flex;
    margin-bottom: 72px;
}

.page-apropos>div
{
    width:50%;

}

.page-apropos>div article
{
    margin-right: 64px;
}

.page-apropos .illustration{
   
    height:auto;
    background: url(/gfx/desmaizieres-paysages2.jpg) right center no-repeat;
    background-size: cover;
}

.page-apropos h3{
    margin-top: 48px;
}
.convaincu
{
    text-align: center;
    margin-bottom: 72px;
}



/** PAGE CONTACT */

.page-contact{
    display: flex;
}

.page-contact article:nth-child(1),
.page-contact article:nth-child(2)
{
    padding: 24px 32px;
    
}

.page-contact article:nth-child(1)
{
    background-color: #323332;
    
}
.page-contact article:nth-child(1) p,
.page-contact article:nth-child(1) h3
{
    color: #fff ;
}
.page-contact article:nth-child(2)
{
    background-color: #c7d5a973;
}

.media
{
    width:100%;
    height:100%;

}

.btn-call-me
{
    display: none;
}

.number{
    font-size: 2rem;
    font-weight: 400;
}

/** MENTIONS LEGALES */
.page-mentions-legales article
{
    margin-bottom: 48px;
}

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

    .page-particuliers article:not(:nth-child(1))
    {
        width:100%;
        text-align: center;
        margin: auto;
        padding: 0;
        background-color: #fff;
    }

    .page-particuliers article .icon-particuliers
    {
        
        text-align: center;
        margin: 0 auto 16px;
    }

    .page-apropos>div article
    {        
        margin-right: 24px;
    }

    .liste-services-particuliers
    {
        margin-top: 48px;
        padding: 0 16px;
    }

}

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

    .page-particuliers,
    .page-pros
    {
        margin-bottom: 0;
    }

    .page-particuliers article:nth-child(1),
    .page-pros article
    {
        flex-direction: column;
        text-align: center;

    }

    .page-pros article
    {
        margin-bottom: 48px;
    }

    .page-particuliers article .image-services-display,
    .page-pros article .image-services-display
    {
        width:100%;
        height:400px;
    }

    .page-particuliers article .texte-services-display,
    .page-pros article .texte-services-display
    {
        width:100%;
        padding: 24px 24px 48px;
    }

    .page-particuliers article.situations
    {        
        border: none;
    }

    .liste-services-particuliers article > div
    {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .liste-services-particuliers article > div ul
    {
        width:100%;
        text-align: left;
        margin-left: 48px;
        padding-right: 24px;
    }

    .liste-services-particuliers h4
    {
        text-align: center;
        margin-top: 24px;
    }

    .page-contact
    {
        flex-direction:column;
        text-align: center;
    }

    .media
    {
 
        height:400px;

    }

    .rso
    {
        text-align: center;
        margin: 48px auto;
    }

    .intervention .zone
    {
    
        height:400px;

    }
    .page-pros article ul
    {
        margin:0 0 48px 0;
    }

.page-apropos
    {
        flex-direction: column-reverse;
        text-align: center;
    }
    .page-apropos>div
    {
        width:100%;
        padding: 0;
    }

    .page-apropos .illustration{
        height:400px;
    }



   
}


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

    header h1{
        text-align: center;
        margin:0 0 56px;
        padding-top:56px;
    }    

    .logos-partenaires
    {
    
        margin-bottom: 48px;
    }

    .liste-services-particuliers article > div ul
    {
        margin-left:0;
        padding-right: 0;
      
    }

    .intervention .zone
    {
    
        height:280px;

    }

    .gregory{
        flex-direction: column;
       
    }

    .gregory div{
        margin : 40px 0 0 0;
       text-align: center;
    }

   .gregory div .btn-basic{
        margin-top: 32px;
       

    }
    

    .portrait
{
    
    margin: 0 auto ;
    padding: 48px 24px ;
}

     .page-apropos>div article
    {        
        margin-right: 0px;
    }


    .btn-call-me
    {
        display: block;
     
    }

    .number
    {
        display: none;
    }
}