/* CSS */


body {
    max-width : 1024px;
    min-width : 320px;
    margin : 10px auto;
    padding : 5%;
    width : 90%;
    background-color : #F7E1AF;
    background-image : url("../../frame/bkg.jpg");
    font-size : 100%;
    }
    
    body {
    font-size : 120%;
    }
    
    * {
    box-sizing : border-box;
    }

    .retour {
        width : 60px;
        height : 100px;
        background-color : transparent;
        display : flex;
        flex-direction : column;
        margin : 0 0 0 0.5em;
        position : fixed;
        bottom : 20%;
        left : 15%;
        }
        .corpfleche {
        width : 30px;
        height : 40px;
        background-color : #9c7c58;
        margin : 0 0 0 0.8em;
        }
        .flechehaut {
        width : 0;
        height : 0;
        background-color : transparent;
        border-color : transparent transparent #9c7c58 transparent;
        border-style : solid;
        border-width : 30px;
        }

        .retour:hover > .corpfleche {
            background-color : black;
            box-shadow : 8px 6px 9px #CDFEAA;
            }
        
        .retour:hover > .flechehaut {
            background-color : transparent;
            border-color : transparent transparent  black transparent;
        }
        

        .acceuil {
        background-color : transparent;
        width : 50px;
        height : 50px;
        margin : 0 0 0 0;
        position : fixed;
        left : 15%;
        top: -5%;
        }
        .maison {
        position : fixed;
        display : flex;
        flex-direction : column;
        width : 250px;
        height : 10px;
        border-color : #808080;
        border-style : solid;
        border-width : 0;
        background-color : transparent;
        margin : 10em 0 0 1em;
        z-index : 4;
        }
        .triangle {
        position : relative;
        width : 0;
        height : 0;
        border-color : transparent transparent #9c7c58 transparent;
        border-style : solid;
        border-width : 23px;
        background-color : transparent;
        margin : -45px 0 0 0;
        z-index : 4;
        }
        .rectangle {
        position : relative;
        width : 44px;
        height : 35px;
        border-color : black;
        border-style : solid;
        border-width : 1px;
        background-color : #cbbca8;
        margin : 0 0 0 0;
        z-index : 3;
        }
        .porte {
        position : relative;
        width : 10px;
        height : 20px;
        border-color : black;
        border-style : solid;
        border-width : 1px;
        background-color : #3c3c3c;
        margin : -22px 0 0 25px;
        z-index : 4;
        }
        .fenetre {
        position : relative;
        width : 10px;
        height : 10px;
        border-color : black;
        border-style : solid;
        border-width : 1px;
        background-color : #3c3c3c;
        margin : -30px 0 0 5px;
        z-index : 4;
        }
        .cheminee {
        position : relative;
        width : 10px;
        height : 20px;
        border-color : blue grey yellow red;
        border-style : solid;
        border-width : 0;
        background-color : #808080;
        margin : -35px 0 0 33px;
        z-index : 2;
        }

        .maison:hover > .triangle {
            border-color : transparent transparent black transparent;
            }
        
            .maison:hover > .rectangle{
                background-color : black;
                box-shadow : 3px 3px 6px gray;
            }
        
            .maison:hover > .porte {
                    background-color : #CDFEAA;
            }
        
            .maison:hover > .fenetre {
                    background-color : #CDFEAA;
            }
            
        .corps {
        width : 99%;
        background-color : transparent;
        margin : -4% 0 5% 0;
        display : flex;
        justify-content : flex-end;
        }
        .contenu {
        width : 100%;
        background-color : transparent;
        border : #E6CD95 solid 3px;
        border-radius : 2em;
        background-image : url("../../frame/FeuillePC.png");
        background-size : 100% auto;
        padding : 0 0 10% 0;
        }

        .titre {
            margin-top : 1em;
            margin-left : -10%;
            text-align : center;
            color : #1A1A1A;
            text-shadow : 8px 6px 9px #7F7F7F;
            }
            .soustitre
            {
            text-shadow : 8px 6px 9px #7F7F7F;
            }
            h1 {
            padding-left : 2.5em;
            color : #1A1A1A;
            }
            h2 {
            padding-left : 4em;
            color : #1A1A1A;
            }
            h3 {
            color : #1A1A1A;
            margin-top : 1em;
            text-align : center;
            text-shadow : 8px 6px 9px #7F7F7F;
            }
            a {
            text-decoration : none;
            color : blue;
            background : #CDFEAA;
            }
            a:hover {
            color : red;
            background : yellow;
            }
            .lien {
            font-size : 2em;
            text-align : center;
            margin-left : -3em;
            }
            p {
                padding-left : 7em;
                font-size : 1.2em;
                padding-right : 2em;
                text-align: center;
            }
            hr {
            color : grey;
            height : 3px;
            width : 55%;
            margin : 0 auto;
            box-shadow : 8px 6px 9px #7F7F7F;
            }

/* Debut Slider */

.slider1
{
    width: 50%;
    margin: 10% 0 0 30%;
    overflow: hidden;
    border: 15px solid white;
    box-shadow: black 4px 4px 12px;  /* ombre boite */
    
}

.slider1 .slider
{
display: flex;

animation: slider1 15s infinite ease-in-out;
}

.slider1 img

{
background-color: yellow;
flex-shrink: 0;
padding: 0px 0;
width: 100%;

}
/*
5% par transition
soit 5x4=20% transition

reste divise par 
100-20=80%
80%/nbr photo soit 4= 203%
*/

@keyframes slider1 {
0%,
20%{
    transform: translateX(0);
}
25%,
45%{
    transform: translateX(-100%);
}
50%,
70%{
    transform: translateX(-200%);
}
75%,
95%{
    transform: translateX(-300%);
}
100%{
    transform: translateX(-400%);
}
   
}

/* Fin Slider */