/* CSS version PC de Bureau */

/* Reset */
*{
	margin: 0;
	padding: 0;
    }

/* ##################### caractéristiques pour tout type de format d'affichage ##################### */

/*#################################################
  # couleurs, polices, centrage, bordures, marges #
  ################################################# */



body {
	background:url("images/texture_fond.png");
	color: #47201b;
	font-family: Georgia, "Times New Roman", serif;
    }
a, a:visited {
    color: #75bc27;
    }
p {
    margin: 8px 4px;
    }
h1 {
    border: solid #594846;
    border-width: 2px 0;
    padding: 6px;
    text-align: center;
    font-variant: small-caps;
    font-size: 22px;
    line-height: 30px; /* interlignage */
    }
h2 {
    font-size: 20px;
    font-variant: small-caps;
    text-align: center;
    padding-top: 16px;
    padding-bottom: 10px;
    }
dl {
    margin: 0 8px;
    }
dt {
    font-weight: bold;
    margin: 8px 16px 8px 0;
    border-bottom: 1px dashed #7b96bc;
    }
.navigation {
    font-size: 17px;
    background-color:#ae5411;
    border-bottom: 2px solid #816A67;
    }
.navigation li a {
    color: #f9f3e9;
    font-variant: small-caps;
    text-decoration: none;
    }
.header p {
    margin-left: -1000px;
    }
.intro { /* englobe tous les sous-titres de la même classe */
    font-size: 15px;
    line-height: 21px;
    text-align: center;
    margin: 8px;
    font-weight: bold;
    padding-top: 10px;
    }
#visit  dl { /*cible la balise <dl> dans la div "visit" */
    padding-bottom: 8px;
    }
#points ul {
    list-style-image: url('images/point.png');
    margin: 8px 0 16px 8px;
    padding-left: 16px;
    }
#points ul li {
    margin: 8px 16px;
    padding-top: 8px; /* espacement au-dessus */
    font-size: 14px; /* taille du texte */
    line-height: 20px; /* interlignage */
    text-align: left; /* alignement de la liste à gauche */
    }  
#main .intro {
    text-align: center;
    }
#main p {
    text-align: justify; /* paragraphes justifiés */
    font-size: 14px;  /* taille du texte */
    line-height: 24px; /* interlignage */
    }
.footer {
    background-color: #ae5411;
    color: #fff2d4;
    margin:10px; 
    padding:10px; 
    font-style: italic;
    font-size: 12px; /* taille du texte */
    }

/* ###################################################
   #		         STRUCTURE                       #
   ################################################### */
   
body, .header, .navigation, .footer {
    width: auto;
    }
img {
    width: 100%; /* occupe 100% de la largeur */
    height: auto; /* largeur adaptable selon sa largeur */
    }
.ratio_video { /* permet de définir les propriétés d'affichage de la vidéo */ 
    position: relative; 
    padding-bottom: 56.25%; /* pour le ratio à échelle 1 en format 16/9e */ 
    }
iframe { /* positionnement et dimensions de la vidéo par rapport à son élément parent  */
    position: absolute;  
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
.header, .navigation, .footer {
    clear: both;
    }
.header {
    background:url(images/kfe_logo.png) no-repeat center;
    height: 200px;
    }
.navigation ul li {
    text-align: center;
    }


/* ###################################################
   #		         MEDIA QUERIES                   #
   ################################################### */

/* ##################### média queries pour les écrans d'une largeur supérieur à 480 pixels ##################### */

@media all and (min-width:480px)
{

.navigation {
    min-height: 32px; /* hauteur minimum du bandeau de navigation */
    padding-top: 4px; /* marge intérieure permettant de décaler la première ligne du texte */
    }
.navigation ul li {
    width: 33.3333333%; /* 960/3 ; la conversion en pourcentage permet l'adaptation de la largeur */
    display: block; 
    float: left;
    padding: 3px 0;
    }
#visit  dl { /*cible la balise <p> dans la div "visit" */
    line-height: 20px; /* interlignage */
    }
#visit {
    width: 25%;  /* indique le % d'occupation par rapport à la largeur totale ; le pourcentage assure l'adaptation à la taille de la zone de visualisation  */
    float: left; /* positionnement à gauche */
    }
#points {
    width: 24%; /* indique le % d'occupation par rapport à la largeur totale ; le pourcentage assure l'adaptation à la taille de la zone de visualisation  */
    float: right; /* positionnement à droite */
    }
#main {
    width: 50%; /* indique le % d'occupation par rapport à la largeur totale ; le pourcentage assure l'adaptation à la taille de la zone de visualisation  */
    margin: 0 26% 0 26%; /* permet de ménager des marges à droite et à gauche de la partie centrale */
    }
}

/* ##################### média queries pour les écrans d'une largeur inférieure à 480 pixels ##################### */

@media all and (max-width:480px)
{

.navigation {
    width: 100%; /* occupe 100% de la largeur */
    position: fixed; z-index: 1; /* permet de fixer le bandeau de navigation et de le mettre en premier plan */
    top: 0px;  /* permet de positionner verticalement le bandeau de navigation en haut */
    min-height: 80px; /* hauteur minimum du bandeau de navigation */
    padding-top: 6px; /* marge intérieure permettant de décaler la première ligne du texte */
    }
.navigation ul li {
	display: block; /* permet de considérer comme les éléments de la liste comme un block à part entière pour définir son mode d'affichage */
    font-size: 14px; /* taille du texte plus petit que pour le format supérieur 480 pxls */
    line-height: 24px; /* interlignage */
	}
.header {
    margin-top: 90px; /* marge permettant de décaler le logo par rapport à hauteur du menu de navigation */
    padding: 18px; /* marge intérieure pour d'intégrer des espace autour du logo */
    }
#visit {
    text-align: center; /* centrage du texte */
    }
#visit h2 {
    padding-top: 100px; /* marge supérieure permettant d'intégrer un espace au-dessus */
    }
#visit  p { /*cible la balise <p> dans la div "visit" */
    padding-top: 10px;
    padding-bottom: 10px;
    }
#main {
    margin: 6px 10px 10px 4px; /* marge intérieure permettant d'intégrer des espaces autour, notamment côté scrollbar */
    }
#main h2 {
    padding-top: 100px; /* marge supérieure permettant d'intégrer un espace avec la partie précédente */
    }
}