/* CSS */

/* Debut Page */

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;
}

/* Fin Page */

/* Debut Retour Haut Page */

.retour {
width : 60px;
height : 100px;
background-color : transparent;
display : flex;
flex-direction : column;
margin : 0 0 0 0.5em;
position : fixed;
bottom : 15%;
left : 10%;
}

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

.retour:hover > .flechehaut {
    background-color : transparent;
    border-color : transparent transparent  black transparent;
}

.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;
}

/* Fin Retour Haut Page */

/* Debut Bouton Acceuil */

.maison {
position : fixed;
display : flex;
flex-direction : column;
width : 50px;
height : 70px;
bottom : 80%;
left : 10%;
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 : -20px 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 1px;
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;
    }

/* Fin Bouton Acceuil */

/* Debut Contenu Page */

.corps {
width : 99%;
background-color : transparent;
margin : -4% 0 0% 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 5% 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 : 5em;
font-size : 1.2em;
padding-right : 2em;
}
blockquote {
    padding-left : 5em;
    font-size : 1.2em;
    font-weight: bold;
    padding-right : 2em;
    }
hr {
color : grey;
height : 3px;
width : 55%;
margin : 0 auto;
box-shadow : 8px 6px 9px #7F7F7F;
}
img {
width : 50%;
height : auto;
display : block;
margin-left : auto;
margin-right : auto;
}

.simple  { border: solid 15px white;
    box-shadow: 6px 6px 8px rgba(0,0,0,0.5); }
/* Fin Contenu Page */

img:hover {
    transform : scale(1); /* zoom sur image transform : scale(1.5); */
    }

.video { 
    background-color: transparent; /* */
    display: flex;
    flex-direction: column; /* axe vertical  enfants seront l'un en dessous des autres */
    justify-content: space-evenly; /* Centre mon paragraphe3*/
    align-items: center;  /* Centre mon paragraphe3*/
    margin-top: 3em; /* Marge superieur Video */
    margin-bottom: 3em;  /* Marge inferieur Video */
    margin-left:auto;
    margin-right:auto;
    width: 50%;
    height: auto;
}
         
.video iframe  { 
    position: absolute;
    top: 0;
    left: 0;
}
/* Fin CSS */