/* orange : #e27802;*/
/* bleu : #729AD1*/

/**************************/
/****** CSS COMMUNE ******/
/*************************/
body{
    font-family: sans-serif; font-size: 1em;
    background: rgb(255,255,255);
    margin: 0; /* On supprime les marges par défault de body */
}

/******* lexique *****************/
a.appel_lexique, a.appel_lexique_anecdote, a.appel_plante, a.appel_cf {font-weight: 600; color: #0A3867; text-decoration: none;}
a.appel_lexique:hover, a.appel_lexique_anecdote:hover, a.appel_plante:hover , a.appel_cf:hover {color: #e27802;}
a.appel_lexique_anecdote {color:#729AD1;}
a.appel_plante, a.appel_cf {font-weight: normal; text-decoration: underline; }
a.appel_cf {color: #729AD1;}
.lexique {font-weight: 600; color:#e27802;}
.cf {font-size: 0.8em; color:#729AD1; }

/******* lexique *****************/

.anecdote {font-style: italic;
	color:#729AD1;
	font-size: 0.9em;}
.roman {font-style: normal;}

.imgLexique {width: auto;}

.sommaire  { display: block;
 column-gap: 1em;
column-rule: 1px solid #729AD1; }

a.liste {color:#729AD1; padding: 4px 5%;text-decoration: none; Line-Height: 1.5em; /* interlignage*/}
a.liste:hover {background: #729AD1;
    color: rgb(240,240,240);}
a.liste:visited {font-style: italic;}

.nav2 {width: 50%;	float: left;}



/***** plantes ****/
#number {font-size: 1.2em; color:#e27802; padding-right: 5px; }
#plante { text-align: left;}
#ou { font-weight: normal;}
#nomS, #ns {font-weight: normal; font-style: italic; font-size: 0.8em; padding-left: 8%;}
#ns {font-size: 0.6em;  padding-left: 5px;}

/****** end titre 2 / plantes ****************/

/******** header *******************/
header {
    background: url(img/Nimes_auberge_de_jeunesse.jpg) no-repeat center;
    background-size: cover;
    padding: 3%;
        height: 100%;
}
        #logoFUAJ { float: left; height: 85px;}
        #imgFUAJ {width: 80%;}
        #fb { float: right; height: 85px;}
        #imgFB {width: 35px;}

#titre, #ss-titre { color: white; padding-top: 10px; font-size: 2.4em; font-style: italic; clear: left; clear: right;
    margin: 0; /* On supprime les marges par défault du titre */
    text-align: center;
        text-shadow: 0 0 30px #e27802;
}

#ss-titre {
    padding-top: 5px; font-size: 1.2em;
}

/********** end header***************************/

/*************** menus de navigation *************/

nav div { /* syntaxe css permetant d'accéder aux balises DIV se trouvant dans la balise NAV -> sorte de "chemin" */
    width: 20%; /* On réduit la taille des boutons pour laisser de la place à côté */
    float: left;
        /* les boutons se mettent côte à cotes */
    /* pour le reponcise design, on désactive le flotement sur les ecran petit pour avoir le menu verticale */
}

nav div a, a.menu2 { /* syntaxe css permetant d'accéder à la balise A se trouvant dans les balises DIV qui se trouvent dans la balise NAV -> sorte de "chemin" */

    display: block; /* le lien s'étire sur toute la div */
    height: 35px;
    background: rgb(240,240,240);
    text-align: center; /* on centre ce qui se trouve à l'interrieur de la DIV (a placer dans la div et non sur le texte "a") */
    padding: 5px 0;
    color: #729AD1;
    text-decoration: none;
    }

nav div a:hover, a.menu2:hover {
    background: #729AD1;
    color: rgb(240,240,240);
}

a.menu2{height: auto;}

/*************** end - menus de navigation *************/

/******* footer *****************/
footer {background: url(img/Nimes_auberge_de_jeunesse.jpg) no-repeat center  ;
    background-size: cover;
    padding: 3%;
    text-align: center;
}
#copyright { color: #ffffff; font-size: 1em; text-shadow: 0 0 5px #000; }
/*******  end footer *****************/
	img {
		height: auto;
	}

/**************************/
/**** END CSS COMMUNE ****/
/*************************/





/****************************************************************************************************************************************************************/
/************** tablette ****************************************************************************************************************************************/
/****************************************************************************************************************************************************************/


@media only screen and (max-width:1000px), screen only and (max-device-width:1000px) {

#globale {
    width: 92%; /* centrage de la page */
    margin: 0 auto; /* centrage de la page */
    background: rgb(255,255,255);
	box-shadow: 0px 0px 50px #333333;
    /* min-width: 350px;  taille minimum  */
    }
	
/******** header *******************/
header { 
    background: url(img/Nimes_auberge_de_jeunesse.jpg) no-repeat center; 
    background-size: cover;
    padding: 3%;
	height: 100%;
}
	#logoFUAJ { float: left; height: 85px;}
	#imgFUAJ {width: 80%;}
	#fb { float: right; height: 85px;}
	#imgFB {width: 35px;}

#titre, #ss-titre { color: white; padding-top: 10px; font-size: 2.4em; font-style: italic; clear: left; clear: right;
    margin: 0; /* On supprime les marges par défault du titre */ 
    text-align: center;
	text-shadow: 0 0 30px #e27802;
}

#ss-titre {
    padding-top: 5px; font-size: 1.2em;
}

/********** end header***************************/

footer {
    display: none;
}

/*************** menus de navigation *************/

nav div { /* syntaxe css permetant d'accéder aux balises DIV se trouvant dans la balise NAV -> sorte de "chemin" */
    width: 20%; /* On réduit la taille des boutons pour laisser de la place à côté */
    float: left; 
	/* les boutons se mettent côte à cotes */
    /* pour le reponcise design, on désactive le flotement sur les ecran petit pour avoir le menu verticale */
}

nav div a, a.menu2 { /* syntaxe css permetant d'accéder à la balise A se trouvant dans les balises DIV qui se trouvent dans la balise NAV -> sorte de "chemin" */
    
    display: block; /* le lien s'étire sur toute la div */
    height: 35px;
    background: rgb(240,240,240);
    text-align: center; /* on centre ce qui se trouve à l'interrieur de la DIV (a placer dans la div et non sur le texte "a") */
    padding: 5px 0;
    color: #729AD1;
    text-decoration: none;
    }

nav div a:hover, a.menu2:hover {
    background: #729AD1;
    color: rgb(240,240,240);
}

a.menu2{height: auto;}

/*************** end - menus de navigation *************/
	
#contenu {
    padding: 10px 4% 15px 4%;
    min-height: 630px;
}
	.sommaire  {columns: 2; }
/****** titre 2 / plantes ****************/
h2 {text-align: center;
    padding: 30px 0 20px 0;
	color: #729AD1;
    
}
	#NomS {padding-left: 10%;}
.anecdote {padding-left: 0; text-align: left;}

/******* images ********/
img { width: 100%; padding: 20px 0;}
.ombre {box-shadow: 0 0 10px #333; padding: 0 0;}

div #img_accueil { padding: 20px 0 40px 0; 
    -ms-transform: rotate(-4deg); /* IE 9 */
    -webkit-transform: rotate(-4deg); /* Chrome, Safari, Opera */
    transform: rotate(-4deg);
}
/*********** end images*****************/
#copyright { font-size: 0.9em; }
	
}

/****************************************************************************************************************************************************************/
/************** END tablette ************************************************************************************************************************************/
/****************************************************************************************************************************************************************/



/****************************************************************************************************************************************************************/
/********************* Ordinateur *******************************************************************************************************************************/
/****************************************************************************************************************************************************************/


@media screen only and (min-width:1000px) {

#globale {
    width: 84%; /* centrage de la page */
    margin: 0 auto; /* centrage de la page */
    background: rgb(255,255,255);
	box-shadow: 0px 0px 50px #333333;
    /* min-width: 350px;  taille minimum  */
    }



/******** header *******************/
header { 
    background: url(img/Nimes_auberge_de_jeunesse.jpg) no-repeat center; 
    background-size: cover;
    padding: 3%;
	height: 100px;
}
	#logoFUAJ { float: left; height: 100px;}
	#imgFUAJ {width: 100%;}
	#fb { float: right; height: 100px;}
	#imgFB {width: 35px;}

#titre, #ss-titre { color: white; padding-top: 10px; font-size: 3em; font-style: italic;
    margin: 0; /* On supprime les marges par défault du titre */ 
    text-align: center;
	text-shadow: 0 0 30px #e27802;
}

#ss-titre {
    padding-top: 5px; font-size: 1.2em;
}



/********** end header***************************/

/*************** menus de navigation *************/

nav div { /* syntaxe css permetant d'accéder aux balises DIV se trouvant dans la balise NAV -> sorte de "chemin" */
    width: 20%; /* On réduit la taille des boutons pour laisser de la place à côté */
    float: left; /* les boutons se mettent côte à cotes */
    /* pour le reponcise design, on désactive le flotement sur les ecran petit pour avoir le menu verticale */
}

nav div a, a.menu2 { /* syntaxe css permetant d'accéder à la balise A se trouvant dans les balises DIV qui se trouvent dans la balise NAV -> sorte de "chemin" */
    
    display: block; /* le lien s'étire sur toute la div */
    
    background: rgb(240,240,240);
    text-align: center; /* on centre ce qui se trouve à l'interrieur de la DIV (a placer dans la div et non sur le texte "a") */
    padding: 5px 0;
    color: #729AD1;
    text-decoration: none;
    }

nav div a:hover, a.menu2:hover {
    background: #729AD1;
    color: rgb(240,240,240);
}



/*************** end - menus de navigation *************/


#contenu {
    padding: 10px 10% 20px 10%;
    min-height: 500px;
}
.sommaire  {columns: 3; }
#NomS {padding-left: 60px;}	
.anecdote {padding-left: 60px; text-align: left;}	

	
/****** titre 2 / plantes ****************/
h2 {text-align: center;
    padding: 30px 0 20px 0;
	color: #729AD1;
    
}

	/******* images ********/
img { width: 80%; padding: 20px 0;}
.ombre {box-shadow: 0 0 10px #333; padding: 0 0;}

div #img_accueil { padding: 30px 0 60px 0; 
    -ms-transform: rotate(-4deg); /* IE 9 */
    -webkit-transform: rotate(-4deg); /* Chrome, Safari, Opera */
    transform: rotate(-4deg);
}

/*********** end images*****************/



}
/****************************************************************************************************************************************************************/
/***************** END ordinateur *******************************************************************************************************************************/
/****************************************************************************************************************************************************************/