/*---------------------------------------------------------------------------------------------*/
/*  pointi2025.2.0.css                                                                         */
/*  rev. 22.8.25                                                                               */
/*  Break points  1440px - 992px - 768px - 576px                                               */
/*---------------------------------------------------------------------------------------------*/


main {
    position: relative;
    top: 0px;
    margin-top: 10rem;
}


@media (max-width: 768px) {
    main {
        margin-top: 5rem;
    }
}



header {
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 1000;
    overflow: hidden;
}


    header .titreSmart {
        margin-left: 0rem;
        margin-top: 0rem;
        background-color: white;
        height: 4rem;
        padding-left: 4rem;
        padding-top: .5rem;
    }

@media (min-width: 768px) {
    header .titreSmart {
        display: none;
    }
}



    /* modif du bootstrap que pour les grands écrans */
    @media (min-width: 1440px) {
        .container {
        width: 1220px;
    }
}


footer {
    /*position: absolute;*/
    position: relative ;
    z-index: 2000;
    width: 100%;
    bottom: 0px;
    min-height: 6rem;
    background-color: royalblue;
}

    footer p,
    footer a {
        color: white;
    }


footer .logo img {
    width: 8em;
}

    footer .copy {
        color: blue;
        position: absolute;
        bottom: 0rem;
        font-size: small;
    }



.divFndVideo {
    position: fixed;
    z-index: -1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    top: 0px;
    left: 0px;
    background-color: grey;
}


    .divFndVideo video {
        min-height: 100vh;
    }


@media (min-width: 1440px) {
    .divFndVideo video {
        width: 100%;
        min-height: auto;
    }
}



.home .divFndVideo video {
   height: 100vh;
   width: auto!important;
}



.home {
    position: relative;
    min-height: 200vh;
}



        .home #divCourtage {
            position: absolute;
            top: 25vh;
            /*top: 560px;*/
        }


    @media (max-width: 1440px) {
        .home #divCourtage {
            top: 20vh;
        }
    }

    @media (max-width: 768px) {
        .home #divCourtage {
            top: 60vh;
        }
    }


    .home #divPlanning {
        top: 60vh;
        /*top: 800px;*/
    }


    @media (max-width: 768px) {
        .home #divPlanning {
            top: 95vh;
        }
    }


    .home #divVacances {
        top: 100vh;
    }

    @media (max-width: 768px) {
        .home #divVacances {
            top: 115vh;
        }
    }


    .home .divPanneau {
        position: absolute;
        z-index: 2000;
        min-height: 10em;
        left: 62%;
        width: 38%;
        padding: 1em;
        color: #333;
        background-color: white;
        opacity: .85;
    }


    @media (max-width: 768px) {
        .home .divPanneau {
            left: 0%;
            width: 100%;
            min-height: 8em;
        }
    }

    .home .divPanneau a {
        color: #333;
    }


    .home .divIntro {
        position: fixed;
    }



    @media (max-width: 768px) {
        .home .divIntro {
            position: relative;
        }
    }





    /* Courtage */
    .divIntro {
        position: relative;
        width: 100%;
        margin-bottom: 5rem;
        min-height: 36rem;
    }

/*    .divFndVideo {
        position: fixed;
        overflow: hidden;
        width: 100%;
        z-index: -1;
        top: 0px;
        left: 0px;
        background-color: grey;
    }*/

    .home .divFndVideo {
        position: fixed;
    }


/*    .courtage #video1 {
        height: 100%;
    }*/




    .divTitrePg {
        width: 100%;
        margin-top: 5rem;
        margin-bottom: 3rem;
    }


    @media (max-width: 768px) {
        .divTitrePg {
            margin-top: 3rem;
            margin-bottom: 3rem;
        }
    }




    .divSlideshow .photo {
        display: none;
    }


    .divContenu,
    .divGrillePrix {
        position: relative;
        overflow: hidden;
        width: 100%;
        /*margin-bottom: 5rem;*/
    }

.divGrillePrix {
    margin-bottom: 5rem;
    background-color: white;
}




    /* Démo web Pi */

    #divDemoWebPi {
        background-color: gainsboro;
    }



        /*#divDemoWebPi .divWebOrdi {
    position: absolute;
    overflow: hidden;
    width: 60%;
    height: 100%;
    top: 1rem;
    left: 10%;
}*/

        /*#divDemoWebPi .frameOrdi {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    letter-spacing: 0px;
    border-style: solid;
    border-width: 1px;
    border-block-color: dimgray;
}*/



        #divDemoWebPi .frameSmart {
            position: absolute;
            width: 20%;
            height: 75%;
            bottom: 3em;
            left: 77%;
            border-style: solid;
            border-width: 1px;
            border-block-color: dimgray;
        }


    .fondOrdi {
        background-image: url('../images/fondOrdi.png');
        background-repeat: no-repeat;
        background-size: cover;
    }

    .fondMobile {
        background-image: url('../images/fondMobile.png');
        background-repeat: no-repeat;
        background-size: cover;
    }

    .fondIpad {
        background-image: url('../images/fondIpad.png');
        background-repeat: no-repeat;
        background-size: cover;
    }



    #divDemoWebPi .divRuban-fond {
        display: none;
    }


    /* Web design */


    .display {
        position: relative;
        left: 0px;
        height: 600px;
    }

    @media (max-width: 480px) {
        .display {
            height: 380px;
        }
    }


    .display div {
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
    }


    .desktop {
        position: absolute;
        width: 840px;
        height: 720px;
        top: 0px;
        /*left: 20%;*/
        left: 28%;
        z-index: 100;
    }


    @media (max-width: 1440px) {
        .desktop {
            left: 21%;
        }
    }

    @media (max-width: 1200px) {
        .desktop {
            width: 820px;
            left: 17%;
        }
    }



    /* iPad largeur à partir de 992px */
    @media (max-width: 992px) {
        .desktop {
            left: 2%;
            width: 729px;
            height: 632px;
        }
    }




    @media (max-width: 768px) {
        .desktop {
            left: 2%;
            width: 624px;
            height: 565px;
        }
    }



    @media (max-width: 640px) {
        .desktop {
            left: 1%;
            width: 533px;
            height: 462px;
        }
    }

    @media (max-width: 480px) {
        .desktop {
            left: -1%;
            width: 372px;
            height: 326px;
        }
    }


    iframe {
        transform-origin: top left;
        margin: 0;
        padding: 0;
        position: relative;
        background-color: #fff;
        border-color: #000;
    }

    .desktop iframe {
        left: 60px;
        top: 48px;
        width: 1600px;
        height: 992px;
        transform: scale(0.45);
    }


    @media (max-width: 992px) {
        .desktop iframe {
            transform: scale(0.39);
        }
    }

    @media (max-width: 768px) {
        .desktop iframe {
            transform: scale(0.34);
        }
    }


    @media (max-width: 640px) {
        .desktop iframe {
            transform: scale(0.26);
        }
    }


    @media (max-width: 480px) {
        .desktop iframe {
            left: 36px;
            top: 29px;
            width: 1600px;
            height: 992px;
            transform: scale(0.20);
        }
    }




    .mobile {
        position: absolute;
        width: 270px;
        height: 520px;
        top: 70px;
        /*left: 70%;*/
        /*left: 80%;*/
        right: 4%;
        z-index: 500;
    }

    @media (max-width: 1440px) {
        .mobile {
            width: 250px;
            height: 478px;
            top: 60px;
            /*left: 79%;*/
        }
    }




    @media (max-width: 1200px) {
        .mobile {
            right: .5%;
        }
    }



    .mobile iframe {
        left: 38px;
        top: 76px;
        width: 320px;
        height: 600px;
        transform: scale(0.6);
    }


    @media (max-width: 1440px) {
        .mobile iframe {
            left: 36.5px;
            top: 76px;
            width: 320px;
            height: 593px;
            transform: scale(0.56);
        }
    }


    @media (max-width: 768px) {
        .mobile {
            display: none;
        }
    }




    .iPad {
        position: absolute;
        width: 564px;
        height: 409px;
        top: 163px;
        left: 4%;
        z-index: 1;
    }


    @media (max-width: 1200px) {
        .iPad {
            left: .5%;
        }
    }



    .iPad iframe {
        left: 61px;
        top: 36px;
        width: 1112px;
        height: 837px;
        transform: scale(0.392);
    }

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