@charset "UTF-8";
/* CSS Document */

html {
  min-height:100vh;
    min-width: 100vw;
}

body {
    
  margin: 0;0;0;0;
    min-height:100vh;
    min-width: 100vw;
  
background-repeat : no-repeat;
    background-image:url("fascia.jpg"); margin-left:0; margin-right: 0; background-attachment:fixed; background-size: cover; }

    
@font-face {
   font-family: "Ma police";
   src: url("Lucida Handwriting Italic.ttf");
}

/*RESPONSIVE DESIGN*/

@media (max-width:329px) {
    div#titre{
        font-size: 150%;
        /*color:hotpink;*/
    }
    
    p.citation1{
       font-size: 80%;
        /*color:hotpink;*/
    }
    
   p.citation2{
       font-size: 80%;
       /* color:hotpink;*/
    }
    
   ul#menu{
        font-size:60%;
        /*color:hotpink;*/
       display:grid;
    }
    
   
}

@media (min-width:330px) and (max-width:610px)
    {
    div#titre{
        font-size: 170%;
        /*color:darkmagenta;*/
    }
    
    p.citation1{
       font-size: 110%;
        /*color:darkmagenta;*/
    }
    
   p.citation2{
       font-size: 110%;
       /* color:darkmagenta;*/
    }
    
   ul#menu{
        font-size:70%;
       /* color:darkmagenta;*/
       display:grid;
    }
    
   
}

@media (min-width:611px) and (max-width:799px) {
    div#titre{
        font-size: 200%;
       /* color:orange;*/
    }
    
    p.citation1{
       font-size: 140%;
        /*color:orange;*/
    }
    
   p.citation2{
       font-size: 140%;
        /*color:orange;*/
    }
    
   ul#menu{
        font-size:80%;
           /* color:orange;*/
    }
}




@media (min-width:800px) and (max-width:999px) {
    div#titre{
        font-size: 250%;
       /* color:white;*/
    }
    
    p.citation1{
       font-size: 180%;
        /*color:white;*/
    }
    
   p.citation2{
       font-size: 180%;
       /* color:white;*/
    }
    
   ul#menu{
        font-size:90%;
           /* color:white;*/
    }
}

@media (min-width:1000px) and (max-width:1299px) {
    div#titre{
        font-size: 280%;
       /* color:blue;*/
    }
    
    p.citation1{
       font-size: 210%;
       /* color:blue;*/
    }
    
   p.citation2{
       font-size: 210%;
        /*color:blue;*/
    }
    
   ul#menu{
        font-size:95%;
        /* color:blue;*/
    }
}


@media (min-width:1300px){
       div#titre{
        font-size: 300%;
        /*color:yellowgreen;*/
    }
    
    p.citation1{
       font-size: 220%;
        /*color:yellowgreen;*/
    }
    
   p.citation2{
       font-size: 220%;
        /*color:yellowgreen;*/
    }
    
   ul#menu{
        font-size:95%;
        /* color:yellowgreen;*/
    }
}


/*MENU DU HAUT*/

ul#menu{
     min-width:auto;
    width:auto; height:auto;
    margin: auto;
    padding:0;
    text-align: center;
     margin-top: 2%;
    margin-bottom: 2%;
   /* background-color:red;*/
    padding-top:2%;padding-bottom:2%;
    
}


li.menu{
/* on place les liens du menu horizontalement */
    display: inline-block;
    padding:0;
}



li a {
    text-decoration: none;
   
	color:#000;
    font-family: "Ma police", "lucida handwriting", cursive, serif;
    font-size:120%;
	line-height:200%;
    width:auto;
     padding: 20px; /*espacement entre chaque titre du menu*/
    /*touche aux menus du haut (texte, couleur, espacement etc.)*/
}
    
    span.titre_pourqui 
{ 
color:#5b6a82;   
	}

#menu a:hover{ opacity: 0.5; 
filter: alpha(opacity=30); 
	}

/*TITRE DE LA PAGE*/

#titre { 
    font-family: "Ma police", "lucida handwriting", cursive, serif;
font-size:310%;
text-align:center; 

left: 0; right: 0; top:20%;
    width:auto;
    
    margin-top: 2%;
    margin-bottom: 2%;
   /* background-color:yellow;*/
	}



/*TEXTE DE LA PAGE*/


div#texte_pourqui
{
   font-size:110%;
text-align:justify; 
    
    line-height:140%;
    font-family: "Georgia";
width: auto;
    margin-top: 2%;
    margin-bottom: 5%;
    padding-left:20%;
    padding-right:20%;
    padding-bottom:2%;
    padding-top:5%;
   /* background-color: aqua; */ 
}

#puces {
   text-align: justify;
    list-style: circle;
}


#citation{
    text-align: center;
}

.PM{
    font-variant-caps: small-caps;
}



/*IMAGES*/

#img1
{
 max-width: 100%;
	height: auto;
       width:100%;
}

#img2
{
 max-width: 100%;
	height: auto;
       width:100%;
}

#img3
{
 max-width: 100%;
	height: auto;
       width:100%;
}


/*IMAGE DE FOND */

#fascia {
 opacity:0.75;
       
}


/*PIED DE PAGE*/

footer{
   /* background-color: pink;*/
    bottom:0%;
 
}

img#logo {
 
     width: 30%;
    height: 30%;
    padding-left:35%; padding-right:35%;padding-bottom:0%;
    
}