/* ░▒▓ AESTHETICS.CSS - Détermine l'esthétique des éléments ▓▒░ */
/*
/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/* ▓▓ RÈGLES DE BASE (mobile first) ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/*
/* ▒▒▒▒▒▒▒▒▒▒▒ */
/* Généralités */
/* ▒▒▒▒▒▒▒▒▒▒▒ */
p a {
  text-decoration: underline;
}

.button,
.button-inverted {
  cursor: pointer;
}

.button,
.button-inverted:hover,
.button-inverted:focus {
  color: var(--colorDark);
  background: transparent;
  outline: 0.5rem solid var(--colorDark);
  outline-offset: -0.5rem;
}

.button-inverted,
.button:hover,
.button:focus {
  color: var(--colorLight);
  background: var(--colorDark);
}

.gray {
  filter: grayscale() contrast(300%) invert();
}

/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
/* Structure des pages */
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
body {
  background-image: url('../ressources/images/noise.png');
}

main::after {
  background: rgb(238, 238, 238);
  background: linear-gradient(0deg, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 85%, rgba(238, 238, 238, 0) 100%);
}

/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
/* Menu de navigation */
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
#mainMenu {
  background: var(--colorDark);
}

#mainMenu li a {
  color: var(--colorLight);
}

#mainMenu li a:before {
  opacity: 0;
}

#mainMenu li a:hover:before,
#mainMenu li a:focus:before {
  opacity: 1;
}

#mainMenu li polyline {
  stroke: var(--colorLight);
}

/* ▒▒▒▒▒▒▒▒▒▒▒▒ */
/* Arrière-plan */
/* ▒▒▒▒▒▒▒▒▒▒▒▒ */
html {
  color: var(--colorDark);
  background: var(--colorLight);
}

body:not(#indexContent) #lines {
  opacity: 0.2;
}

#lines .l9,
#lines .l10,
#lines .l11 {
  display: none;
}

/* ▒▒▒▒▒▒▒▒▒▒▒ */
/* Formulaires */
/* ▒▒▒▒▒▒▒▒▒▒▒ */
input:focus,
textarea:focus {
  color: var(--colorLight);
  background: var(--colorDark);
}

/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/* ▓▓ RESPONSIVE ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/*
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
/* Mobile horizontal */
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
@media screen and (orientation: landscape) {

  /* ▒▒▒▒▒▒▒▒▒▒▒ */
  /* Généralités */
  /* ▒▒▒▒▒▒▒▒▒▒▒ */
  main::after {
    display: none;
  }
}

/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
/* Tablette verticale */
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
@media screen and (min-width: 480px) and (min-height: 640px) and (orientation: portrait) {}

/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
/* Tablette horizontale */
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
@media screen and (min-width: 640px) and (min-height: 480px) and (orientation: landscape) {
  main::after {
    display: none;
  }
}