/* reset CSS */
*{
    margin: 0px;
    padding: 0px;
}

body {
    background-color: white;
    font-family: Helvetica, Arial, sans-serif;
}

/* bouton menu et titre de la page */
.bouton_titre {
    display: flex;
}

.langue {
  margin-right: 20px;
}


#bouton_menu_open, #bouton_menu_close, .lien_titre {
    padding: 7px;
    text-align: center;
    font-size: x-large;
}

#bouton_menu_open, #bouton_menu_close {
    background-color: green;
    color: white;
    width:10%;
}

#bouton_menu_close {
    display: none;
}

.lien_titre {
    width: 100%;
    text-decoration:none;
    color: green;
    font-weight: bold;
}

/* Petite citation sous le titre */
blockquote {
    display: none;
    margin: 10px;
}

.citation {
	display: block; /* on ne l'affiche pas en version mobile */
	font-style: italic;
	font-size: small;
	margin-left: 10px;
}

/* Affichage du menu en version mobile, c'est à dire verticalement */
#menu {
    display: none; /* le menu est caché au démarrage */
    position: absolute;
}

nav, ul, li {
    width: 100%;
    list-style-type: none;
}

li{
    background-color: green;
    text-align: center;
    padding: 10px 0px;
}

 a.item {
   color:white;
   text-decoration: none;
}

.sous li{
    text-align: left;
    padding: 0;
}

.sous a{
	display: block;
    padding: 5px 10px;
    background-color: lightgrey;
    color: black;
}


.chemin {
    padding-top: 5px;
    font-size: small;
    background-color: green;
}

.chemin a {
    text-decoration: none;
    color: white;
}

strong {
  font-weight: bold;
}

.photo {
  width: 300px;
  height: 200px;
}

/* Partie pour l'affichage sur les ordinateurs */
@media screen and (min-width: 980px){

    .lien_titre {
        font-size: xx-large;
    }
    
    blockquote {  display: block;  } /* affiche la citation */
    
    .bouton_menu {
      display: none; 
    wewe}
    
    #menu {
      position: static;
      display: block;
    }
    
    nav ul {
      display: flex;
      flex-flow: row;
    }
    
    a.item {
      color:white;
    }
    
    nav a:hover {
        color:orange;
        border-bottom: 2px solid gold;
    }
 
    li {
      background-color: green;
    }
    
    p {
        margin: 20px; /* sur ordinateur, on écarte un peu plus les paragraphes */
    }
    
    
    .chemin {
      background-color: white;
    }

    .chemin a {
      color: black;
    }

}

main {
    padding-left: 10px;
    padding-right: 10px;
}

p {
    margin-top: 10px;
}

.titre_page {
    text-align: center;
    font-weight: bold;
}

.objectif {
    font-weight: bold;
}

.sous_titre {
    margin-top: 20px;
    font-weight: bold;
    font-size: 130%;
}

.sous-sous-titre {
    text-decoration: underline;
}

.adressemail {
    font-style: italic;
}

/* Pour le footer */
footer {
    color: white;
    background-color: green;
    margin-top: 10px;
    padding: 10px;
    font-size: small;
    text-align: center;
}