body {
    margin-bottom: 4em;
}


.divAppli {
    max-width: 100%;
}


@media (max-width: 767px) {
    .divEntete {
        display: none;
    }
}





/* Entete et menu pour smartphone - stype modifié sur la view Liste.cshtml */
#divEnteteSmart {
    display: none;
    position: fixed;
    z-index: 2000;
    width: 100%;
    height: 6em;
    top: 0px;
    left: 0px;
    background-color: white;
}

@media (max-width: 767px) {
    #divEnteteSmart {
        display: block;
    }
}


#divEnteteSmart .divLogo {
    padding-top: 1rem;
    text-align: right;
}


#divEnteteSmart img {
    width: 100%;
    max-width: 15em;
}


/* menu Smart */
.menu-smart {
    position: absolute;
    z-index: 1000;
    width: 100%;
    top: 3.75rem;
    right: 0rem;
    padding-top: 0rem;
    padding-bottom: 6rem;
    background-color: white;
}



.menu-smart {
    display: none;
}

    .menu-smart a {
        padding-top: .5rem;
        padding-bottom: .5rem;
        font-size: 1.2em;
        text-align: center;
    }

        .menu-smart a:hover {
            color: #002450;
            text-decoration: none;
        }

a.menu-smart-fermer {
    font-weight: 600;
    padding-bottom: 3rem;
    font-size: 1.25em;
}

    a.menu-smart-fermer:hover {
        text-decoration: none;
    }



.menu-smart .border-top {
    border-top-style: solid;
    border-width: 1px;
    border-color: #aaa !important;
}

.menu-smart .border-bottom {
    border-bottom-style: solid;
    border-width: 1px;
    border-color: #aaa !important;
}



#divEnteteSmart #imgMenuSmart {
    width: 5rem;
    cursor: pointer;
}




.divEntete {
    position: fixed;
    z-index: 1000;
    width: 100%;
    top: 0px;
    left: 0px;
}


    .divEntete .logo {
        padding-left: 4.8%;
        padding-right: 5%;
        padding-top: 4em;
        background-color: white;
    }

    .divEntete img {
        width: 100%;
    }


.mb-KSA {
    margin-bottom: 5rem;
}




.divEntete .menu {
    text-align: center;
    position: relative;
    z-index: 100;
}



.MenuLoca {
    display: none;
    position: absolute;
    top: 0em;
    left: -.5em;
    width: 6.5em;
    text-align: left;
    padding-top: 2.25em;
    padding-bottom: 2.25em;
    /*line-height: 1.1em;
    border-style: solid;
    border-color: wheat;*/
}

.menu a.linkType {
    font-size: .8em !important;
    color: #111 !important;
    text-decoration: none !important;
    width: 100%;
    padding-left: .5em;
    padding-right: .5em;
    padding-top: .2em;
    padding-bottom: .2em;
    display: block;
}



    .menu a.linkType:hover {
        color: white !important;
        text-decoration: none;
        background-color: #16ABE3;
        width: 100%;
    }


.menu a.type-select {
    color: white !important;
    text-decoration: none;
    background-color: #16ABE3;
    width: 100%;
}




/* https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout */
/* space-between pour espacer les éléments de façon égale */
.divEntete .box {
    height: 3em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 1em;
    padding-right: 1em;
}



.divEntete .bandeau {
    position: relative;
    height: 12em;
}


.divPrincipal {
    position: relative;
    top: 0px;
    left: 0px;
    margin-top: 17em;
}

@media (max-width: 1440px) {
    .divPrincipal {
        margin-top: 16em;
    }
}

@media (max-width: 992px) {
    .divPrincipal {
        margin-top: 15em;
    }
}


@media (max-width: 767px) {
    .divPrincipal {
        margin-top: 5em;
    }

    #divListe {
        margin-top: 10em;
    }
}





.divTitreListe {
    height: 3em;
    display: flex;
    align-items: center;
}

@media (max-width: 992px) {
    .divTitreListe a {
        margin: auto !important;
    }
}


@media (max-width: 992px) {
    #divListe .divTitreListe h1 {
        padding-left: 22.0%;
    }
}


@media (max-width: 992px) {
    #divListe .divTitreListe {
        display: none;
    }
}


/*@media (max-width:576px) {
    .divTitreListe a {
        padding-left: 7.0%;
    }
}*/



.divTitreListeSmart {
    display: none;
}

@media (max-width: 767px) {
    .divTitreListeSmart {
        position: fixed;
        display: block;
        height: 2.25em;
        top: 6em;
        z-index: 2000
    }
}


.divTitreListeSmart .divChoixPiece {
    position: relative;
    z-index: 2500;
    overflow: hidden;
    width: 14em;
    height: 0px; /*replié au départ*/
    display: none;
    left: 14%;
    top: 0px;
    border-style: solid;
    border-width: 1px;
    border-color: dimgray;
    background-color: white;
    opacity: .7;
}

    .divTitreListeSmart .divChoixPiece a {
        width: 100%;
        display: block;
        margin-top: 1em;
        margin-bottom: 1em;
        padding-left: 1em;
        font-size: 1.2em;
    }


#divListe .divTitreListeSmart h1 {
    margin-left: 7.0%;
}





#divListe .divChoixCarte {
    display: none;
}

/*@media (max-width: 992px) {*/
@media (max-width: 767px) {
    #divListe .divChoixCarte {
        display: block;
        position: absolute;
        z-index: 2500;
        top: 0em;
        left: 71%;
        width: 25%;
        text-align: right;
    }
}



/*#divListe .divChoixCarte a {
        background-color: white;
    }

        #divListe .divChoixCarte a:hover {
            color: #17ace4;
        }*/








a#linkFiltrePiece {
    text-decoration: underline;
}




@media (min-width: 767px) {
    #divListe .signet {
        display: none;
    }
}



.divTitreLocSmart {
    display: none;
}

@media (max-width: 992px) {
    .divTitreLocSmart {
        display: flex;
    }

    .divTitreLocOrdi {
        display: none;
    }
}


.divAnnonce {
    position: relative;
    overflow: hidden;
    min-height: 15em;
}


    .divAnnonce .photo {
        position: absolute;
        top: 0px;
        left: -2%;
        width: 104%;
    }


    .divAnnonce .ruban {
        position: absolute;
        z-index: 100;
        left: 0px;
        min-height: 6em; /* garder des em ! */
        width: 100%;
        bottom: 0px;
        background-color: white;
        opacity: .85;
    }

    .divAnnonce .ruban-haut {
        min-height: 10em; /* garder des em ! */
    }


@media (max-width: 992px) {

    .divAnnonce .ruban {
        min-height: 5em; /* garder des em ! */
    }

    .divAnnonce .ruban-haut {
        min-height: 9em; /* garder des em ! */
    }
}


.divAnnonce .texte {
    position: absolute;
    z-index: 500;
    width: 100%;
    left: 0px;
    bottom: 0px;
    padding-left: 14.5%;
}


/* news */
#NewsHome .texte:first-child,
#NewsHome .ruban:first-child,
#NewsHome .ruban-haut:first-child {
    /*display: none;*/
}


@media (max-width: 576px) {
    .divAnnonce .texte {
        padding-left: 7%;
    }
}

.divAnnonce .texte p {
    margin: 0px;
    padding: 0px;
}

    .divAnnonce .texte p:first-child {
        color: #16ABE3;
        font-family: librefranklin-medium;
    }


/* caché au démarrage */
.divAnnonce .texte .divLegende {
    display: none;
    height: 3.9em;
    overflow: hidden;
    margin-top: .5em;
    margin-bottom: 0.5em;
}

.divAnnonce .texte .divLegende-news {
    height: 7em;
    display: block;
    overflow: hidden;
    margin-top: .5em;
    margin-bottom: 0.5em;
}


.divAnnonce img {
    width: 100%;
}



.divAnnonce .palette {
    position: absolute;
    z-index: 500;
    width: 100%;
    bottom: 0px;
    background-color: yellow;
    opacity: 0.01
}


/* Palette Krisalis */

.divKrialis-home {
    background-color: white;
    padding: 1em;
}

    .divKrialis-home .divAffichPlus {
        position: relative;
        z-index: 1000;
    }

    .divKrialis-home .paletteK {
        position: fixed;
        background-color: white;
        z-index: 500;
        top: 0px;
        left: 0px;
        left: 0px;
        width: 33%;
        height: 24em;
        top: 35em;
        padding: 1em;
    }


@media (max-width: 992px) {
    .divKrialis-home .paletteK {
        width: 100%;
        min-height: 10em;
    }
}

.divKrialis-home .afficheSuite {
    opacity: .9;
    transition: 2s;
    display: block;
}

.divKrialis-home .cacheSuite {
    opacity: 0.2;
    display: none;
}

ajouter un style pour une transition
/* Liste */
#divListe {
    margin-bottom: 5em;
}


#divListe .divGoogleMap {
    width: 100%; /*modif*/
    height: 40rem; /*modif*/
    background-color: transparent;
}

    #divListe .divGoogleMap #map {
        width: 100%;
        height: 40rem;
    }


@media (max-width: 767px) {
    #divListe .divGoogleMap {
        display: none;
        display: flex;
        /*height: 0px;*/
    }
}



.CarteCache {
    /*display: none;*/
    height: 0px;
}

.CarteVisible {
    display: flex;
    position: relative;
    z-index: 100;
    color: white;
}



@media (max-width: 767px) {
    #divListeObjet .divChoixPiece {
        display: block;
    }
}


#divListeObjet .divChoixPiece a {
    width: 100%;
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 1em;
    font-size: 1.2em;
}

#divListeObjet .divChoixPiece .btnChoix {
    position: absolute;
    top: 4em;
    right: 2.1em;
}

    #divListeObjet .divChoixPiece .btnChoix img {
        width: 100%;
    }

#divListeObjet .divChoixPiece .btnFermer {
    position: absolute;
    top: .25em;
    right: 2.25em;
}

    #divListeObjet .divChoixPiece .btnFermer a {
        display: none;
        margin-top: 0px;
        color: red;
        font-size: 2em;
        font-weight: bold;
    }



#divListeObjet .signet,
#divSociete .signet,
.signet {
    position: relative;
    top: -8em;
}


@media (max-width: 992px) {
    #divListeObjet .signet,
    #divSociete .signet,
    .signet {
        top: -12em;
    }
}




/* Description */
.divCoteGauche,
.divCoteDroite {
    padding-left: 14.5%;
    padding-right: 14%;
}


@media (max-width: 576px) {
    .divCoteGauche,
    .divCoteDroite {
        padding-left: 7%;
        padding-right: 7%;
    }
}



@media (max-width: 576px) {
    #divDescription .linkPdf {
        display: none;
    }
}





#divDescription .divTech {
    padding-left: 14.5%;
    padding-top: 2em;
    padding-bottom: 2em;
}

@media (max-width: 576px) {
    #divDescription .divTech {
        padding-left: 7%;
    }
}





#divDescription .divTech label {
    width: 40%;
}

#divDescription .divTech p {
    display: inline-block;
    width: 40%;
}



@media (max-width: 576px) {
    #divDescription .divTech label {
        width: 54%;
    }

    #divDescription .divTech p {
        display: inline-block;
        width: 45%;
    }
}





#divDescription .divTech p.ville {
    width: 80%;
}



#divDescription .divGoogle {
    padding-left: 14.5%;
    padding-right: 14.5%;
}


@media (max-width: 576px) {
    #divDescription .divGoogle {
        padding-left: 7%;
        padding-right: 7%;
    }
}





#divDescription .divGoogle #map,
#map_canvas_agence {
    width: 100%;
    height: 25em;
    background-color: #F0F0F0;
}

@media (max-width: 576px) {
    #divDescription .divGoogle #map {
        width: 112%;
        margin-left: -6%;
    }
}







#divDescription .divSuivant {
    height: 5.25em;
}

@media (max-width: 1400px) {
    #divDescription .divSuivant {
        height: 4.5em;
    }
}


/*    #divDescription a.linkPrecedent,
    #divDescription a.linkSuivant {
        padding-left: 29%;
    }*/


/* liens objet suivant précédent*/
.divObjSuivant {
    width: 100%;
}

@media (max-width: 992px) {
    .divObjSuivant {
        width: 71%;
    }
}

@media (max-width: 576px) {
    .divObjSuivant {
        width: 84%;
    }
}



#divDescription a.linkSuivant {
    padding-right: 1.5em;
    background-image: url('../Images/flecheSuivant.png');
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: .15em;
}

#divDescription a.linkPrecedent,
a.linkRetourListe {
    background-image: url('../Images/flechePreced.png');
    background-repeat: no-repeat;
    background-position-x: 0%;
    background-position-y: .15em;
    padding-left: 1em;
}





#divDescription a.linkPdf,
#divDescription p.visiter,
#divDescription a.linkDemandeLoc {
    display: block;
    margin-bottom: 3em;
    margin-top: 1em;
}

#divDescription a.linkRetourListe,
#divDescription p.juridique,
#divDescription p.dateMaj {
    display: block;
    margin-bottom: 1em;
}




/* Société */
#divSociete img {
    width: 100%;
}


#divSociete .divServices {
    position: relative;
    min-height: 53em;
}


#divHomePage .divPhilo {
    position: relative;
    margin-top: 3em;
    min-height: 55em;
}


#divContact {
    margin-bottom: 5em;
}


.divPiedPage {
    position: relative;
    width: 100%;
    height: 9em;
}

    .divPiedPage .RetourHaut {
        position: relative;
        top: -2em;
        width: 10em;
        margin-left: auto;
        margin-right: auto;
    }


        .divPiedPage .RetourHaut img {
            width: 100%;
        }



#divSociete .divPanneau,
#divHomePage .divPanneau {
    position: relative;
    top: 10em;
    padding-left: 5%;
    padding-right: 2%;
    padding-top: 2em;
    padding-bottom: 1em;
}


@media (max-width: 992px) {
    #divSociete .divPanneau,
    #divHomePage .divPanneau {
        top: 0px
    }
}


#divSociete .divPhoto,
#divHomePage .divPhoto {
    position: absolute;
    height: 45em;
    top: 5em;
    left: 0px;
}


@media (max-width: 992px) {
    #divSociete .divPhoto,
    #divHomePage .divPhoto {
        position: relative;
        height: 26em;
    }
}



#divSociete .fndCollaborateur {
    background-image: url('../Images/FK2__20.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#divSociete .fndFidu {
    background-image: url('../Images/FK__134.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


#divSociete .fndGerance {
    background-image: url('../Images/FK2__28.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


#divHomePage .fndPhilo {
    background-image: url('../Images/FK2__02.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}




#divSociete .divServices .divPortrait {
    position: relative;
    width: 34.15%;
    min-height: 14em;
}


@media (max-width: 1440px) {
    #divSociete .divServices .divPortrait {
        min-height: 18em;
    }
}


@media (max-width: 992px) {
    #divSociete .divServices .divPortrait {
        min-height: 12em;
    }
}



#divSociete .divServices .divDepartement {
    position: relative;
    width: 7.70%;
    position: relative;
    /*background-color: aqua*/
}

    #divSociete .divServices .divDepartement p {
        position: relative;
        top: 95%;
        left: 2em;
        font-size: 1.75em;
        margin: 0px;
        padding: 0px;
    }


#divSociete .divServices .rotation {
    transform: rotate(-90deg);
    transform-origin: bottom;
}



#divSociete .divServices .box {
    display: flex;
    justify-content: center;
    margin-bottom: 2em;
}


#divSociete .divServices p.NomPropre {
    color: #17ace4;
    font-size: 1.75em;
    margin-top: 1em;
}



@media (max-width: 767px) {
    #divSociete .divServices p.NomPropre {
        font-size: 1.5em;
    }
}



#divSociete .divServices p.Titre {
    color: white;
    font-size: 1.1em;
    width: 111%;
    padding-right: 2em;
}


@media (max-width: 1440px) {
    #divSociete .divServices p.Titre {
        font-size: 1em;
    }
}




/*Services 2*/

#divSociete .divServices2 {
    position: relative;
    min-height: 53em;
}


@media (max-width: 992px) {
    #divSociete .divServices2 {
        min-height: 70em;
    }
}



#divSociete .divServices2 img {
    width: 100%;
}


#divSociete .divServices2 .colGauche {
    width: 57.5%;
}

@media (max-width: 992px) {
    #divSociete .divServices2 .colGauche {
        width: 100%;
    }
}


#divSociete .divServices2 .colDroite {
    width: 42.5%;
}

@media (max-width: 992px) {
    #divSociete .divServices2 .colDroite {
        width: 100%;
    }
}

#divSociete .divServices2 .colGauche .Portrait {
    flex: 0 0 auto;
    width: 16.25vw;
    /*min-height: 16.5em;*/
    margin-left: 0px;
    margin-right: 1vw;
}

@media (max-width: 992px) {
    #divSociete .divServices2 .colGauche .Portrait {
        flex: 1 0 auto; /* flex grow autorisé seulement pour les portraits de la colonne gauche! */
        width: 29.25vw;
        margin-left: 1vw;
        margin-right: 0px;
    }
}


#divSociete .divServices2 .Portrait-texte {
    min-height: 16.5em;
}



#divSociete .divServices2 p.NomPropre {
    color: #17ace4;
    font-size: 1.75em;
    margin-top: .5em;
    margin-bottom: .5em;
    padding-right: .25em;
    min-height: 2.5em;
}

@media (max-width: 1440px) {
    #divSociete .divServices2 p.NomPropre {
        font-size: 1.5em;
    }
}

@media (max-width: 768px) {
    #divSociete .divServices2 p.NomPropre {
        font-size: 1.25em;
    }
}


#divSociete .divServices2 p.Titre {
    color: white;
    /*    font-size: 1.1em;*/
    padding-right: .25em;
}


@media (max-width: 1440px) {
    #divSociete .divServices2 p.Titre {
        font-size: 1em;
    }
}


@media (max-width: 768px) {
    #divSociete .divServices2 p.Titre {
        font-size: .85em;
    }
}




#divSociete .divServices2 .colGauche .divDepmnt {
    width: 4.8vw;
    padding-right: 1em;
}

@media (max-width: 992px) {
    #divSociete .divServices2 .colGauche .divDepmnt {
        width: 5.5vw;
    }
}



#divSociete .divServices2 .colDroite .Portrait {
    width: 16.25vw;
    /*min-height: 16.5em;*/
    margin-left: 0px;
    margin-right: 1vw;
}

@media (max-width: 992px) {
    #divSociete .divServices2 .colDroite .Portrait {
        width: 29.25vw;
        margin-right: 7vw;
        margin-left: 7vw;
    }
}



#divSociete .divServices2 .colDroite .divDepmnt {
    width: 4.8vw;
    padding-right: 1em;
}

@media (max-width: 992px) {
    #divSociete .divServices2 .colDroite .divDepmnt {
        width: 5.5vw;
    }
}



#divSociete .divServices2 .divDepmnt p {
    position: relative;
    transform: rotate(-90deg);
    transform-origin: top;
    margin-top: 15vw;
    font-size: 2em;
}

@media (max-width: 1440px) {
    #divSociete .divServices2 .divDepmnt p {
        font-size: 1.75em;
    }
}


@media (max-width: 992px) {
    #divSociete .divServices2 .divDepmnt p {
        margin-top: 29vw;
        left: -0.25em;
        font-size: 1.5em;
    }
}


#divSociete .divServices2 .fndGris {
    background-image: url('../Images/fndGris.png');
    background-repeat: repeat-x;
    /*    background-position-y: bottom;*/
    background-position: bottom -9px left 0px;
}




/* Liens */
@media (max-width: 992px) {
    #divPageLiens .divTitreListe h1 {
        margin-left: 7%;
    }
}


#divPageLiens {
    margin-bottom: 5em;
}

    #divPageLiens .divLien {
        position: relative;
        height: 16em;
    }

    #divPageLiens img {
        width: 100%;
    }



    #divPageLiens .divLien .photo {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }

    #divPageLiens .divLien .texte {
        position: absolute;
        z-index: 500;
        width: 100%;
        height: 5em;
        left: 0px;
        bottom: 0px;
        padding-left: 14.5%;
        padding-right: 1em;
        padding-top: .5em;
        background-color: gainsboro;
        opacity: .85
    }





/* Gestion mailing location */
.divMailingLoc {
    margin-top: 17rem;
    margin-left: 3rem;
    margin-right: 3rem;
}


    .divMailingLoc .divListeDoc {
        width: 100%;
    }


        .divMailingLoc .divListeDoc label,
        .divMailingLoc .divListeDoc a {
            color: dimgray;
            font-size: 1rem;
            width: auto;
        }

        .divMailingLoc .divListeDoc .pointeur {
            cursor: pointer;
        }


    .divMailingLoc .btnRSA {
        background-color: #c55265;
        border-color: red
    }



/* Filtrage */
#divFiltre {
    position: absolute;
    display: block;
    top: 1em;
    left: 33%;
    width: 62%;
    /*border-style: solid;
    border-width: 1px;
    border-color: #aaa !important;*/
}


/* Filtrage */
#divFiltre {
    display: none;
}

.cache {
    display: none;
}