/* Body for the whole website */
body{
	font-family: 'Trebuchet MS';
	color: rgb(255,255,255); /*rgb(71,71,75); */
	background-color: lightskyblue;
}

/*____________HEADER____________ */

/* Header (logo, main menu) */
header{
	display: flex;
	justify-content: space-between;
	flex-direction: row; 
	border: dotted;
	border-color: black;
	margin-bottom: 5px;
	min-width: 570px;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	background-color: whitesmoke;
}

/* Logo */
#logo{
	display: flex;
	flex-direction: row;
	align-items: center;
}
/* Logo title */
#logo h1{
	font-family: 'Druk', 'Trebuchet MS';
	margin: 0px;
	margin-left: 20px;
}
/* Logo redirection links */
#logo a{
	text-decoration: none;
	color: rgb(71,71,75);
}

/* Main menu */
nav ul{
	display: flex;
	list-style-type: none;
	align-items: center;
  justify-content: center;
}

/* Item of the main menu */
nav li{
	font-size: medium;
}

/* Link of the main menu */
nav a{
	color: black; 
	text-decoration: none;
}

nav li form{
	margin:  0px;
}

nav li a{
	padding:  0px 5px 0px 5px;
}

/* Hovering a link of the menu */
nav a:hover{
	background-color: black;
	color: white;
	text-decoration: none;
}

/* Button used for the logout */
.urlButton{
	border:0 none;
	margin: 0px;
	padding:  0px 5px 0px 5px;
  cursor:pointer;
  color: black; 
	text-decoration: none;
	font-size: medium;
}

/* Hovering button used for the logout */
.urlButton:hover{
	background-color: black;
	color: white;
	text-decoration: none;
}


/*____________ARTICLE____________ */

/* Article section */
article{
	text-align: justify;
	text-align-last: left;
	margin-bottom: 10px;
	width: 80%;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

/* H1 title for the article */
article h1{
	color: black;
}

article a{
	color: black;
	text-decoration : none; 
}

article a:hover{
	background-color: black;
	color: white;
	text-decoration: none;
	text-decoration-color: white;
}

figcaption{
	text-align: center;
}

input[type=submit] {
    padding:5px 15px; 
    background:#ccc; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    text-align: center;
}


/*Nav tiles*/
#tiles{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

/* To remove the white spot below images used as link in the tiles as image is inline */ 
#tiles a{
	background-color: black; 
}


/* Title part of the cover (in the nav tiles), displayed at the bottom of the cover */
.coverTitle{
	color: white;
	background-color: black;
	margin: 0px; 
	margin-bottom: 15px; 
	padding: 0px; 
	padding-bottom: 5px;
	text-align: center;
	max-width: 372px; /* To avoid too long text overflow under smaller cover image 372=image width + 2* border width*/
}

/* Image part of the cover (in the nav tiles) */
.coverImage{
	border: solid;
	border-width: 4px; 
	border-color: black;
	margin: 0px;
	padding: 0px;
	line-height: 0px;
}

/* Head of the cover for the redirections at the bottom of the articles */
.coverHead{
	color: white;
	background-color: black;
	margin-bottom: 0px;
}

.cover a:hover{
	text-decoration: none;
}

/* Buttons used for swaps selection */
.coverButton{
	color: white;
	background-color: black;
	text-align: center;
	border:0 none;
  cursor:pointer;
  padding-top: 4px;
  padding-bottom: 4px;
  margin:  10px 10px 10px 10px;
  font-size: medium;
}

/* Buttons used for swaps selection */
.coverButton{
	color: white;
	background-color: black;
	text-align: center;
	border:0 none;
  cursor:pointer;
  padding-top: 4px;
  padding-bottom: 4px;
  margin:  10px 10px 10px 10px;
  font-size: medium;
}

.coverButton:hover{
	box-shadow: 10px 10px black;
	margin:  10px 10px;
}


.higlightSection:hover{
	border: 10px 10px black;
	margin:  10px 10px;
	box-shadow: 10px 10px 10px black;;
}


/* Required fields in forms */
input:required {
  border: 1px solid rrgb(255, 179, 56);
}

fieldset{
	text-shadow: 5px solid black;
	margin:  10px 10px 10px 10px;
}

fieldset:hover{
	box-shadow: 10px 10px black;
	margin:  10px 10px 10px 10px;
}

.error{
	color: rgb(255, 179, 56);
}

/*Tooltips*/
.tooltip ,abbr{
	text-decoration: underline;
	text-decoration-style: dotted;
}

table, tr, td{
	border: solid;
	border-width: 1px;
	border-collapse: collapse;
	text-align:center;
}


/*____________FOOTER____________ */


/* Footer of the website */	
footer{
	border:dotted;
	border-right: none;
	border-left: none;
	border-bottom: none;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* URL in the footer */
footer a{
	color: black;
	text-decoration : none;
}

/* Hoovering an URL in the footer */
footer a:hover{
	background-color: black;
	color:white;
	text-decoration: underline;
	text-decoration-color: white; 
}

/* To use the float and to avoid the title and the adjacent image entering in contact (image left side) */
.articleSectionImgL .float{
	float: left;
	margin-right: 10px;
}

/* To use the float and to avoid the text and the adjacent image entering in contact (image right side) */
.articleSectionImgR .float{
	float: right;
	margin-left: 10px;
}


.articleSectionImgL, .articleSectionImgR{
	overflow: auto;
	margin-bottom: 10px;
}

/*To avoid having a space above the paragraph (image would have a higher top than the text) */
.articleSectionImgL p, .articleSectionImgR p{
	margin-top: : 0px;
}


/* DEFILEMENT */

/* le block conteneur */
.marquee-rtl {
  margin: 5px 10px 5px;
  border: 5px;
  overflow: hidden;                     /* masque tout ce qui dépasse */
}

/* le bloc défilant */
.marquee-rtl > :first-child {
  display: inline-block;                /* modèle de boîte en ligne */
  padding-right: 2em;                   /* un peu d'espace pour la transition */
  padding-left: 100%;                   /* placement à droite du conteneur */
  white-space: nowrap;                  /* pas de passage à la ligne */
  animation: defilement-rtl 15s infinite linear;
  color: red;
}

@keyframes defilement-rtl {
  0% {
    transform: translate3d(0,0,0);      /* position initiale à droite */
  }
  100% {
    transform: translate3d(-100%,0,0);  /* position finale à gauche */
  }
}

/* TABULATION */

#tabulation {
margin-left: 5em;
}

/* Flexbox pour la gallerie */
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
}