@import 'menu.css';
@import 'header.css';
@import 'forum.css';
@import 'nouveautes.css';
@import 'images.css';
@import 'footer.css';
@import 'commentaire.css';
@import 'user.css';
@import 'form.css';
@import 'code.css';
@import 'statistiques.css';
@import 'partenaires.css';
@import 'profil.css';
@import 'classement.css';
@import 'defis.css';
@import 'niveau.css';
@import 'badges.css';
@import 'livre.css';
@import 'commandes.css';
@import 'paques2020.css';
@import 'messagerie.css';
@import 'chatbox.css';

:root
{
  --bleu: #1f3044;
  --bleu-clair : #e2e9f1;
  --vert: #2d7d7f;
  --violet: #461253;
  --rouge: maroon;

  --menu-width: 170px;
  --text-font: 'Source Sans Pro', sans-serif;
  --titre-font: 'Playfair Display SC', serif;
  --menu-font: 'Open Sans', sans-serif;
  --max-width: 750px;

  --img-height: 200px;
  --img-width: 200px;
}

body
{
  margin: 0 0;
  font-family: var(--text-font);
  background-color: var(--bleu-clair);
  color: var(--bleu);
}

h2
{
  text-align: center;
  color: var(--bleu);
  font-family: var(--titre-font);
  text-shadow: 1px 0px 0 var(--vert);
  font-weight: 400;
  margin: 5px auto;
  margin-top: 15px;
}

h2::after
{
  display: block;
  content: url('');
  width: 50px;
  height: 3px;
  overflow: hidden;
  margin: 0 auto;
  background-color: var(--violet);
  box-shadow: 0px -1px 0 var(--vert);
  opacity: 0.8;
  margin-top: 0.2em;
  transition: width 0.5s ease-in;
}

h2::before
{
  display: block;
  content: url('');
  width: 50px;
  height: 3px;
  overflow: hidden;
  margin: 0 auto;
  background-color: var(--violet);
  box-shadow: 0px 1px 0 var(--vert);
  opacity: 0.5;
}


h2:hover::after
{
  width:150px;
}

button, .inline-menu li
{
  border: 1px solid var(--vert);
  font-family: var(--text-font);
  color: var(--vert);
  background-color: transparent;
  font-weight: 600;
  font-size: 0.9em;
  border-radius: 20px;
  padding: 5px 15px;
  transition: color 0.3s ease-in, background-color 0.3s ease-in;
}

button:hover, .inline-menu li:hover
{
  color: white;
  background-color: var(--vert);
  cursor: pointer;
}

.red-button
{
  border: 1px solid var(--rouge);
  color: var(--rouge);
}

.red-button:hover
{
  background-color: var(--rouge);
}

a
{
  text-decoration: none;
  color: var(--vert);
  transition: color 0.3s ease-in;
  font-weight: 600;
}

a:hover
{
  color: maroon;
}

li.actif {
  background-color: var(--vert);
  color: white;
}

/* INLINE-MENU */
.inline-menu
{
  margin: 5px;
  padding: 5px;
  text-align: right;
}

.inline-menu ul
{
  padding: 0;
  margin: 0;
  list-style-type: none;
  border-radius: 5px;
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--vert);
  border-left-width: 2px;
}

.inline-menu li
{
  display: inline-block;
  border: 1px solid var(--vert);
  margin-left: -1px;
  color: var(--vert);
  border-radius: 0;
}

.inline-menu li.actif, .inline-menu li.actif a
{
  color: white;
  background-color: var(--vert);
}

.inline-menu li:hover a
{
  color: white;
}

@media screen and (max-width: 400px)
{
  .inline-menu
  {
    text-align: center;
  }

  .inline-menu ul
  {
    display: flex;
    flex-wrap: wrap;
  }

  .inline-menu li
  {
    flex-grow: 2;
  }
}

/* Flèches pour aller en haut ou en bas de page */
.navigation-bar
{
  position: fixed;
  right: 10px;
  bottom: 10px;
  flex-direction: column;
  z-index: 10;
  text-shadow: 1px 1px 0 white, -1px 1px 0 white, 1px -1px 0 white, -1px -1px 0 white;
}

.navigation-bar a
{
  text-decoration: none;
}

.navigation-bar a:hover
{
  text-decoration: none;
}

@media screen and (max-width:650px)
{
  .navigation-bar
  {
    display: none;
  }
}


/* CONTAINER */
.container-flex
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* messages */
.message
{
  background-color: rgba(38,48,68,0.2);
  margin: 15px 25px;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid rgba(38,48,68,0.5);
}

.message i
{
  color: var(--bleu);
  opacity: 0.5;
  margin-right: 5px;
}

.message-erreur
{
  background-color: rgba(128,0,0,0.2);
  color: maroon;
  border-color: rgba(128,0,0,0.5);
}

.message-erreur i
{
  color: maroon;
}

@media screen and (min-width: 400px)
{
  .content
  {
    padding: 0 1rem;
  }
}

.content
{
  flex-grow: 2;
}

/* Explications */
.explications
{
  max-width: 800px;
  padding: 5px 10px;
  border: 1px solid rgba(38,48,68,0.3);
  background-color: white;
  border-radius: 3px;
  text-align: justify;
  margin: 5px auto;
  opacity: 0.7;
  font-style: italic;
  font-size: 0.92rem;
}

/* BBCODE */
.underline
{
  text-decoration: underline;
}


/* ZONE d'ADMINISTRATION */
.tache {
  background-color: var(--bleu);
  max-width: 300px;
  margin: 7px;

  display: flex;
  align-items: stretch;

  border-radius: 2px;

  position: relative;
}

.tache::after {
  content: '';

  position: absolute;
  width: 5px;
  height: 25%;
  top: 10px;
  left: -2px;
}

.tache.tache-concours::after {
  background-color: maroon;
}

.tache.tache-tutoriel::after {
  background-color: yellowgreen;
}

.tache.tache-commande::after {
  background-color: cornflowerblue;
}

.tache-image {
  flex-shrink: 0;
  width: 70px;
  min-height: 70px;
  height: 100%;
  border-radius: 2px 0 0 2px;

  background-size: cover;
  background-position: center;
}

.tache .info {
  font-size: 0.9rem;
  padding: 8px 15px;
  text-align: justify;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tache .info a {
  font-weight: 100;
}

.tache .info a b {
  font-weight: 600;
}

.tache .info a:hover {
  color: var(--bleu-clair);
}

.tache .date {
  float: right;
  background-color: maroon;
  color: var(--bleu-clair);
  padding: 1px 7px;
  margin-top: 3px;
  border-radius: 5px;
}

.dashboard-moderation
{
  width: 70%;
}

.dashboard-moderation table {
  background-color: white;
  margin: 15px auto;
  text-align: center;
  min-width: 300px;
  width: 100%;
  max-width: 900px;
  border-collapse: collapse;
}

table tr td:first-child {
  text-align: left;
  opacity: 0.8;
  font-style: italic;
  font-size: 0.9rem;
}

table th {
  color: var(--bleu-clair);
  background-color: var(--bleu);
  width: 100%;
  border-collapse: collapse;
  padding: 10px 25px;
  min-width: 70px;
}

table td {
  padding: 10px 25px;
}

table td.positive {
  color: var(--vert);
}

table td i {
  opacity: 0.5;
  color: var(--vert);
  margin-right: 25px;
}

table td.negative {
  color: maroon;
}

table tr.separator td {
  border-bottom: 2px solid rgba(38, 48, 68, 0.3);
}

tr:nth-child(even) {
  background-color: rgba(0,0,0,0.05);
}