/* ----------------------------------------------- DEFINNITION DES STYLES -------------------------------------------------------*/

h1{
	font-family : "Bradley Hand ITC" ;
	font-size: 25px;

}
h2{
	font-family : potland ;
	font-size: 45px;
}
h3{
font-size: 30px;
}
body
{
/* background-color:#ffefb8; */
background: url("About/back.jpg") fixed;
}

/* ----------------------------------------------- Titre Principale ----------------------------------------------------------------*/

#bloc_page
{
width: 1000px;
margin: auto;
  /* Avec #bloc_page, le bloc qui englobe toute la page, j'ai fixé les limites à 900 pixels de large. Avec les marges automatiques, le
design sera centré.*/

}

footer h1 {
font-weight: normal;
font-family: Algerian , Dayrom, serif;
font-size: 30px ;
} 


aside h1 {
	font-family: Kristen ITC ;
}


header {
	color: white ;
	border: 5px teal outset;
    padding-left: 10px;
    /* background: url("About/back.jpg") fixed; */
    z-index: 1 ;
    
}

section, footer {
background-color:#ffefb8;
margin-top:  0px; /*taille de la section vers le haut*/
padding: 10px 0px 50px 50px;

}



#titre_principal
{
display: inline-block;

}

#logo, header h2
{
display: inline-block;
margin-bottom: 0px;
}

header h3
{
font-family: Jokerman , Dayrom, serif;
font-size: 1.1em;
margin-top: 0px;
font-weight: normal;
font-size: 25px

}




/* ----------------------------------------------- Navigation ----------------------------------------------------------------*/
nav
{
display: inline-block;
width: 750px;
text-align: right;

} 


 nav ul {
 	margin-right: -200px; /*reculer vers la droite tout le bloc */	

 }

nav li
{
display: inline-block; 
margin-right: 20px; /*distance entre les nav */
margin-top:-40px;   /*distance d'en bas */ 
border: 2.5px teal inset; /* cadre */
border-left: 0px ;
}

 nav a
{
font-size: 2em; /* taille de a */
color: white; 

padding-bottom: 5px; /*distance du trait du border d'en bas avec le texte*/
text-decoration: none; /* desactiver l'effet sourliger de ces liens */
transition : 0.6s;
} 

nav a:hover /* lors du survol */
{
color: #760001;
border-bottom: 3px solid #760001; /* text decoration underline : suourligner; */
transition : 0.6s;
}



/* ----------------------------------------------- Banniere ----------------------------------------------------------------*/

#banniere_image
{
width: 1000px;
height:200px; /* Longeur de la banniere */
border-radius: 10px; /* arrondissment des bordures */
background: url('About/programme.jpg') no-repeat;
position: relative;
box-shadow:15px 5px 5px #1c1a19; /* ajouter l' ombre a la banniere */
margin-top: 80px;
}

#banniere_description
{
position: absolute;
bottom: 0;
border-radius: 0px 0px 5px 5px;
width: 99.5%;
height: 33px;
padding-top: 15px;
padding-left: 4px;
/* Pour les anciens navigateurs
*/
background-color: rgba(24,24,24,0.8); /* 0.8 represente la capacite de transparence*/
color: white;
font-size: 0.8em;
} 

.bouton_rouge
{
display: inline-block;
height: 25px;
position: absolute;
right: 5px;
bottom: 5px;
background-color: teal ;
border: 1px solid black;
border-radius: 5px;
font-size: 1.2em;
text-align: center;
padding: 3px 8px 0px 8px;
color: white;
text-decoration:  underline ;
} 


/* ----------------------------------------------- CORPS ----------------------------------------------------------------*/

article, aside
{
display: inline-block; /* creer un bloc sur ligne*/
vertical-align: justify; /*mode d'alignement verticale*/
}
article h1{

padding-top: 5px ; /* decallage interieur avec le trait*/
border-top: dashed black 2px; /*cration du trait d'en haut*/
}


article{
width: 600px; /*largeur de tout le bloc*/ 

} 

.ico_categorie
{
vertical-align: center; /*type d'alignement verticale*/

margin-right: 10px;
margin-top: 5px;
} 
h1 img {
	margin-bottom:-20px; /*decallage des ecritures vers le haut et a cote des images*/
}

article p
{
font-size: 0.85em; 
} 

aside
{
position: relative;
width: 300px;
left: 150px;
background-color: #706b64;
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 10px;
border: black 4px solid ;
padding: 10px;
color: white;
font-size: 0.9em;

} 
#photo_cabrel
{
text-align: center;
} 
#photo_cabrel img
{
border: 1px solid #181818;
} 

#fleche_bulle
{
position: absolute;
top: 150px;
right: 319px;
opacity: 0.5;
}
aside img
{
margin-right: 5px;
}


/* ----------------------------------------------- PIEDS DE PAGE ----------------------------------------------------------------*/
footer {
	border-top: solid black 3px;
}

footer p, footer ul
{
font-size: 0.8em; /*taille des ecritures */
} 

footer h1
{
font-size: 1.1em; /*taille des titres */


}

#ecole, #mes_photos, #mes_amis
{
display: inline-block; /* tous ces blocs sur une seule ligne */
vertical-align: top;
}

#ecole
{
width: 28%;

}
 #mes_photos
{
width: 35%;
text-align: center; 
}
 #mes_amis
{
width: 27%;

}
#mes_photos img
{
border: 1px solid #181818;
margin-right: 2px;
}

#mes_amis ul
{
display: inline-block;
vertical-align: top;
margin-top: 0;
width: 48%;
padding-left: 2px;
color: black ;
}

#mes_amis a {
color : #760001;
text-decoration: none ;
}


/*******************************************************************************************************************************************************************
****************************************************** MEDIA QUERY (REQUETE DE MEDIA) ****************************************************************************
***************************************************************************************************************************************************************/

@media all and (max-width: 1024px ) { /* si poir tout type , la largeur est inferieure a 1024px */
   
      #bloc_page{ /* largeur par defaut */
      width: auto;
      padding: none;
      }
      
   
      #banniere_image{ /* alors on supprime la bannierre*/ 
      display: none;
      }

 

 nav { /*modification du menu */
width: auto;
text-align: left; /* place du cote gauche */

} 
     nav li{
     	margin-right: 0px;
     display: block; /*passe en block et non plus en inlinebloc */
     margin: -1px;
     border : none; /* plus de bordure */
     } 
        nav a{
          font-size: 1.1em; /* modification de la taille */
            border-left : groove teal 3px; /*seulement un trait un bord */     
        } 
             nav a:hover{
               border-bottom: none; /*plus de texte souligne */
               
            }



article,aside 
{
width: auto;
display: block;
margin-bottom: 15px;

} 
aside h1 { 
	text-align: center;
}

aside /*la position du bloc*/
{
position: relative;
height: 250px;
left: 0px;
text-align: center;

}
   #fleche_bulle { /*desactivons l'infof=bulle*/
        display: none;
   } 

   #photo_cabrel img /*mettons la photo en flottant */
   {
   width: 110px;
   float: left;
 
   } 
   aside p:last-child{ /*last - child = selectionne le dernier paragraphe du bloc aside*/
     text-align: center;
   }

}