/* feuille de style pour la page ariah*/

/* on différencie le css selon les deux formats d'écran pc ou tel */

@media screen and (min-width : 550px)
{
	#html_web + #html_telephone {display: none;}

	/* cas des écrans de largeur supérieure à 500*/



/* elements principaux de la page */
body
{
	background : url("images/fond_mauve.png");
	font-family :'Trebuchet MS',Arial,sans-serif;
	font-size: 1.1em;
	/* color : #181818; valeur d'origine*/
	color : #D7BDE2;
}

#bloc_page
{
	width :900px;
	margin : auto;
}

section h1, footer h1, nav a
{
	font-family: Arial, serif;
	font-weight: normal;
	text-transform : uppercase;
	font-size: 1.4em;
}

/*------------------------ entete------------------------------------------------*/

header
{
	background:url("images/separateur.png") repeat-x bottom;
	display : flex;
	flex-direction: column;
	justify-content : space-between;
}


#logo
{
	display : flex;
	flex-direction : row;
	align-items : baseline;
	margin : 0 10 0 0 px;
}

#logo img
{width : 59px;
height:80px;
margin-right : 25px;
}

header h1
{ 	font-family : 'Verdana', sans-serif;
	font-size : 2em;
	font-weight : normal;
	margin : 0 0 0 0 10px;
	color : #FFFFFF;
}

header h2
{ 	font-family : 'Arial', sans-serif;
	font-size : 1.1em;
	font-weight : normal;
	margin-top : 0px;
	color : #FFFFFF;
}

#sous_titre_principal
{
	display : flex;
	flex-direction: row;
	align-items : baseline;
	justify-content: space-between;
}

nav
{display: flex;
text-align: right;}

nav ul 
{list-style-type : none;
display : flex;
}

nav li 
{margin-right: 15px;}

nav a 
{font-size : 1.3em;
color: #181818;
padding-bottom :3px;
text-decoration : none; /* intérêt ??*/
}

nav a:hover
{color : #181818; /* la couleur du texte ne change pas quand on survole*/
border-bottom : 3px solid #760001;
}

/*bannieres*/

.banniere
{
margin-top : 15px;
height : 200px;
border-radius : 5px;
position : relative; /* pour les blocs qui sont dedans*/
box-shadow : 0px 4px 4px #1c1a19;
margin-bottom : 25px;
}

#banniere_image
{background : url('images/tai_chi_decouverte.jpg') no-repeat;}

#banniere_jours
{background : url('images/banniere_jours.png') no-repeat;}

#banniere_tarifs
{background : url('images/banniere_tarifs.png') no-repeat;}

#banniere_actus
{background : url('images/banniere_actus.jpg') no-repeat;}

#banniere_activites
{background : url('images/banniere_activites.jpeg') no-repeat;}

#banniere_contacts
{background : url('images/banniere_contacts.jpg') no-repeat;}

#banniere_stages
{background : url('images/banniere_stages.jpg') no-repeat;}

#banniere_description
{
	position : absolute;
	bottom :0;
	border-radius : 0px 0px 5px 5px; /* on arrondit seulement le bas*/
	width : 99.5%; /* intérêt ???*/
	height : 33px;
	padding-top : 15px;
	padding-left: 4px;
	background-color :rgba(24,24,24,0.8); /* propriété RGBa avec transparence de la couleur et non du bloc*/
	color : white;
	font-size : 0.8em;
}



.bouton_rouge
{
	height : 25px;
	position : absolute;
	right : 5px;
	bottom : 5px;
	background : url('images/fond_degraderouge.png') repeat-x;
	border :1px solid #760001;
	border-radius :5px;
	font-size :1.2em;
	text-align :center;/* double emploi avec padding ??*/ 
	padding : 3px 8px 0px 8px;
	color : white;
	text-decoration : none;
}
	
.bouton_rouge img 
{border : 0;} /* quid ???*/


.bouton_rouge_stages
{
	height : 25px;
	
	right : 5px;
	bottom : 5px;
	background : url('images/fond_degraderouge.png') repeat-x;
	border :1px solid #760001;
	border-radius :5px;
	font-size :1.2em;
	text-align :center;/* double emploi avec padding ??*/ 
	padding : 3px 8px 0px 8px;
	color : white;
	text-decoration : none;
}




/*------------------ corps--------------------------------------------------*/

section
{display : flex;
margin-bottom : 20px;}

/* -----------article dans la section ---------*/


article
{text-align : justify;
margin-right : 20px;
flex: 3;} /* grossir un élément 3 fois l'aside à peu près*/

.ico_article
{vertical-align: middle;
margin-right :8px;}

article p
{font-size : 0.9em;}

article ul
{margin-top :0;
font-size : 0.9em;}

article a
{text-decoration : none;
color: #9EC5DB;}

article h1
{font-size: 1.2em;}

article h4 img
{margin-right: 10px;}

.texte_photo
{display : flex;
align-items: center;}

.texte_photo img
{border:1px solid #FFFFFF;}

.element
{padding: 8px;}


/* ---------------tableaux d'horaires ------------*/
#tableau
{border : 1px;
 width : 630 px;
 background-color : #706b64;
box-shadow: 0px 2px 5px #1c1a19;
border-radius : 5px;}

 #tableau th
 {vertical-align: middle;
width: 9%;
color: #FFFFFF;}

#tableau p
{text-align: center;}

#tableau td
{color: #92335c;
width: 9%;
vertical-align: middle;
}


/* -----------aside dans la section ---------*/

aside
{ flex : 1.2;
position:relative; /* pour placer la flèche bulle en absolu*/
background-color: #706b64;
box-shadow: 0px 2px 5px #1c1a19;
border-radius : 5px;
padding: 10px;
color:white;
font-size: 0.85em;
text-align: justify;
}

aside h1
{text-align:  center;
font-size: 1.2em;}

#fleche_bulle
{position:absolute;
top : 100px;
left: -12px;
}

#photo_aside
{text-align: center;}

#photo_aside img
{border:1px solid #181818;}


aside img 
{margin-right:5px;} /* réglage manuel du centrage ???*/



/* ------------------------------footer------------------------------------ */

footer
{display:flex;
background: url('images/ico_top.png') no-repeat top center, url('images/separateur.png')repeat-x top, url('images/ombre.png') repeat-x top;
padding-top :25px;} /* dans l'ordre la 1ere image s'affiche au dessus*/

footer p, footer ul
{font-size : 0.8em;}

footer h1
{font-size : 1.1em;}

#tweet
{width:28%;}

#mes_photos
{width:35%;}

#mes_amis
{width:37%;}

#mes_photos img /* concerne les 4 images*/
{border : 1px solid #181818;
margin-right:2px;} /* séparation entre chaque photo*/

#listes_amis
{display : flex; /* servait quand il y avait deux listes côte à côte */
justify-content :space-between;
margin-top:0;}

#mes_amis ul
{list-style-image:url('images/ico_liensexterne.png');
padding-left:2px;
margin-top: 0;}

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


} /* du media query*/



/*--------------------------------la partie suivante concerne la mise en forme des écrans de tel--------------------------*/

@media screen and (max-width : 550px){



	#html_web:first-child {display: none;}
	/* cette instruction permet de ne pas afficher la première partie du code des pages html*/
	/* cas des écrans de largeur inférieure à 550 ne pas descencdre cette valeur
	sinon le pc ne prend plus d'affichage car il ne descend pas en dessous de 550*/

/* elements principaux de la page */
body
{
	background : url("images/fond_mauve.png");
	font-family :'Trebuchet MS',Arial,sans-serif;
	font-size: 1.1em;
	/* color : #181818; valeur d'origine*/
	color : #D7BDE2;
}


#bloc_page
{
	width :340px; /* ne pas monter cette valeur*/
	margin : auto; 
}

section h1, footer h1, nav a
{
	font-family: Arial, serif;
	font-weight: normal;
	text-transform : uppercase;
}

/*------------------------ entete------------------------------------------------*/


header
{
	background:url("images/separateur.png") repeat-x bottom;
	display : flex;
	flex-direction: column;
	justify-content : space-between;
}


#logo
{
	display : flex;
	flex-direction : row;
	align-items : baseline;
	margin : 0 10 0 0 px;
}

#logo img
{width : 59px;
height:80px;
margin-right : 25px;
}

header h1
{ 	font-family : 'Verdana', sans-serif;
	font-size : 1.5em;
	font-weight : normal;
	margin : 0 0 0 0 10px;
	color : #FFFFFF;
}

header h2
{ 	font-family : 'Arial', sans-serif;
	font-size : 1.3em;
	font-weight : normal;
	margin-top : 0px;
	color : #FFFFFF;
}

#sous_titre_principal
{
	display : flex;
	flex-direction: row;
	align-items : baseline;
	justify-content: space-between;
}

nav
{display: flex;
text-align: right;}

nav ul 
{list-style-type : none;
display: contents;
}

nav li 
{margin-right: 10px;
}

nav a 
{font-size : 1.1em;
color: #181818;
/*padding-bottom :3px;*/
text-decoration : none; /*intérêt ?? rajoute une ligne sous le texte sinon*/
font-weight: bold; 
}

nav a:hover
{color : #181818; /* la couleur du texte ne change pas quand on survole*/
border-bottom : 3px solid #760001;
}

/*bannieres*/

.banniere
{
margin-top : 15px;
height : 150px;
border-radius : 5px;
position : relative; /* pour les blocs qui sont dedans*/
box-shadow : 0px 4px 4px #1c1a19;
margin-bottom : 25px;
}

#banniere_image
{background : url('images/tai_chi_decouverte_tel.jpg') no-repeat;}

#banniere_jours_tel
{background : url('images/banniere_jours_tel.png') no-repeat;}

#banniere_tarifs
{background : url('images/banniere_tarifs_tel.png') no-repeat;}

#banniere_actus_tel
{background : url('images/banniere_actus_tel.jpg') no-repeat;}

#banniere_activites
{background : url('images/banniere_activites.jpeg') no-repeat;}

#banniere_contacts_tel
{background : url('images/banniere_contacts_tel.jpg') no-repeat;}

#banniere_description
{background : url('images/tai_chi_decouverte_tel.jpg') no-repeat;}
	
/*
{position : absolute;
	bottom :0;
	border-radius : 0px 0px 5px 5px; on arrondit seulement le bas
	width : 99%;
	height : 33px;
	padding-top : 15px;
	padding-left: 4px;
	background-color :rgba(24,24,24,0.8);  propriété RGBa avec transparence de la couleur et non du bloc
	color : white;
	font-size : 0.8em;
}*/


/*------------------ corps--------------------------------------------------*/

section
{display : flex;
margin-bottom : 20px;}

/* -----------article dans la section ---------*/


article
{text-align : justify;
margin-right : 4px;}
 /* à l'origine 20*/
/* flex: 3;} /* grossir un élément 3 fois l'aside à peu près*/

.ico_article
{vertical-align: middle;
margin-right :8px;}

article p
{font-size : 1.2em;}

article ul
{margin-top :0;
font-size : 1.2em;}

article a
{text-decoration : none;
color: #9EC5DB;}

article h1
{font-size: 1.2em;}

article h4 img
{margin-right: 10px;
font-size : 1.2em;}

.texte_photo
{align-items: center;}

.texte_photo img
{border:1px solid #FFFFFF;}

.element
{padding-left: 8px;
padding-right: 8px;}

/*--------------ancien aside rebasculé en article ----------*/

#ancien_aside
{background-color: #706b64;
box-shadow: 0px 2px 5px #1c1a19;
border-radius : 5px;
padding: 10px;
color:white;
text-align: justify;}

/* ---------------tableaux d'horaires ------------*/
#tableau_tel
{border : 1px;
 width : 380 px;
 background-color : #706b64;
box-shadow: 0px 2px 5px #1c1a19;
border-radius : 5px;}

 #tableau_tel th
 {vertical-align: middle;
width: 9%;
color: #FFFFFF;}

#tableau_tel p
{text-align: center;
font-size : 0.8em;}

#tableau_tel td
{color: #92335c;
width: 9%;
vertical-align: middle;
}


/* -----------aside dans la section ---------*/

aside
{ flex : 1.2;
position:relative; /* pour placer la flèche bulle en absolu*/
background-color: #706b64;
box-shadow: 0px 2px 5px #1c1a19;
border-radius : 5px;
padding: 10px;
color:white;
font-size: 0.85em;
text-align: justify;
}

aside h1
{text-align:  center;
font-size: 1.2em;}

#fleche_bulle
{position:absolute;
top : 100px;
left: -12px;
}

#photo_aside
{text-align: center;}

#photo_aside img
{border:1px solid #181818;}


aside img 
{margin-right:5px;} /* réglage manuel du centrage ???*/



/* ------------------------------footer------------------------------------ */

footer
{display:flex;
background: url('images/ico_top.png') no-repeat top center, url('images/separateur.png')repeat-x top, url('images/ombre.png') repeat-x top;
padding-top :25px;} /* dans l'ordre la 1ere image s'affiche au dessus*/

footer p, footer ul
{font-size : 1.2em;}

footer h1
{font-size : 1.2em;}

#tweet
{width:28%;}

#mes_photos
{width:35%;}

#mes_amis
{width:37%;}

#mes_photos img /* concerne les 4 images*/
{border : 1px solid #181818;
margin-right:2px;} /* séparation entre chaque photo*/

#listes_amis
{display : flex; /* servait quand il y avait deux listes côte à côte */
justify-content :space-between;
margin-top:0;}

#mes_amis ul
{list-style-image:url('images/ico_liensexterne.png');
padding-left:2px;
margin-top: 0;}

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

} /* du media query*/