*, *:before, *:after  {
  box-sizing: border-box;
}

body {
  margin: 0;
}

#header {
  width: 100%;
}

#header img {
  width: 90%;
  margin: 2rem 1rem;
 }

#header img:hover {
  filter: brightness(15) invert(0.75);
}

#conteneur {
  width: 100%;
  margin: 0 auto;
}

#couves {
  width: 20%;
  float: left;
  position: fixed;
  overflow-y: scroll;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
}

#couves::-webkit-scrollbar {
  width: 5px;
}
#couves::-webkit-scrollbar-track {
}
#couves::-webkit-scrollbar-thumb {
  background: #ccc; 
}
#couves::-webkit-scrollbar-thumb:hover {
  background: #ccc; 
}
#couves::-webkit-scrollbar-button {
  display: none;
}

#couves a {
    width: 49%;
    height: auto;
 }

a.couves {
  display: inline-block;
  color: #333;
  font-family: monospace;
  counter-increment: couves;
  padding: 0.5rem 1rem 0 0;
}

a.couves:focus {
	outline: none;
}

a.couves img {
  display: inline-block;
  opacity: 0.75;
  width: 100%;
  margin: 0 1rem;
}

a.couves::before {
  position: absolute;
  content: "#" counter(couves);
  width: 9rem;
  line-height: 9rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 3rem;
  text-align: center;
  z-index: 0;
}

a.couves:hover img,
a.couves:hover {
  opacity: 1;
}

a.couves.current::before {
  position: absolute;
  content: "#" counter(couves);
  width: 9rem;
  line-height: 9rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 3rem;
  text-align: center;
  z-index: 0;
}

a.couves.current img {
   opacity: 1;
}

.couves ul {
  -webkit-margin-before: 0;
  margin-block-start: 0;
  padding-left: 0;
}

.couves li {
  list-style-type: none;
  line-height: 120%;
}

span.description {
    font-size: 1rem;
    font-family: monospace;
    line-height: 140%;
    color: white;
    background: rgb(216, 0, 0);
}

#texte {
  width: 80%;
  max-width: 70%;
  float: right;
}

/* clearfix */
#texte:after {
  content: "";
  display: block;
  clear: both;
}

.texteblocs {
  width: 250px;
  height: 10rem;
  font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
  line-height: 100%;
  float: left;
  padding: 0.5rem;
  margin: 0.5rem;
  font-size: 70px;
  counter-increment: blocs;
  text-align: justify;
  hyphens: manual;
  cursor:  default;
  color: black;
}

.texteblocs.canardlapin {
    filter: grayscale(1) contrast(0);
}

form {
    margin-top: 1.25rem;
    margin-left: 0;
}

.legovil-masonry {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  margin: 0 2rem 0 0;
  padding: 30px;
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
  column-gap: 0;
  font-size: 0.85em;
  line-height: 1.5rem;
}

.legovilitem {
  display: inline-block;
  padding: 0.2rem;
  margin: 0;
  width: 100%;
  font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
  font-size: 1rem;
  line-height: 1.3rem;
  padding: 1.5rem;
  text-align: justify;
  hyphens: manual;
  cursor:  default;
}

.legovilitem:first-of-type {
  text-align: left;
}

/* .legovilitem:nth-of-type(3n) {
    color: green;
}

.legovilitem:nth-of-type(2n) {
    color: #FF7600;
}

.legovilitem:nth-of-type(4n) {
    color: blue;
}

.legovilitem:nth-of-type(5n) {
    color: purple;
}

.legovilitem:nth-of-type(19n)) {
    color: red;
}
*/


.texteblocs span a {
    color: inherit;
    text-decoration: underline;
    filter: invert(0.75);
}

input#acheter {
    display: block;
    float: left;
    width: 6rem;
    filter: grayscale(1);
}

input#acheter:hover {
    filter: none;
}

span#commanderparmail {
    display: block;
    float: right;
}

/* FEUILLE DE STYLE ARTICLES */

article {
  width: 75%;
  margin: 1rem;
  display: block;
  float: right;
  font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
  font-size: 1.2rem;
  line-height: 1.75rem;
  padding: 1.5rem 35% 1.5rem 1.5rem;
  text-align: justify;
  hyphens: manual;
  cursor:  default;
}

p.locution::before {
  content: attr(data-locuteur)" —";
  display: block;
  font-size: .8rem;
  left: 23.25%;
  position: absolute;
  text-transform: capitalize;
  opacity: .5;
}

h1 {
  font-size : 160%;
  font-weight: 600;
  text-transform: uppercase;
}

h2 {
  font-style: italic;
  font-size: 1.4rem;
  color: #979797;
  padding: 2rem 0rem 0.5rem .75rem;
  font-weight: 400;
  font-variant: all-petite-caps;
}

.help {
  cursor: help;
  font-variant-position: super;
  font-size: 1rem;
  font-weight: normal;
  color: #333;
}

.help:hover .tip {
    display: block;
}

.tip {
  display: none;
  background: #f0f0f0;
  padding: 10px;
  position: absolute;
  z-index: 1000;
  width: 30%;
  height: fit-content;
  font-style: italic;
  text-transform: none;
}

div.image {
  display: block;
  padding: 5rem;
  text-align: justify;
}

blockquote {
  display: block;
  width: 100%;
  padding: 5rem;
  font-size: 1rem;
  line-height: 1.3rem;
}


blockquote .ref {
  display: block;
  color: #979797;
  padding-left: 40%;
  margin-top: 1rem;
}

div.image::after {
  content: attr(title);
  color: #979797;
  font-size: 1rem;
  line-height: 1.3rem;
}

img.article {
  width: 100%;
  margin-bottom: 1rem;
}





@media screen and (max-width: 800px) {
#header {
    width: 80%;
}

#logomobile {
   display: block !important;}
   
#logosite {
   display: none !important;
   }
.texteblocs {
    width: 90%;
    font-size: 50px;
 }
#couves a {
    width: 100%;
    height: auto;
}
#texte {
    width: 80%;
    max-width: 80%;
    float: right;
}
.legovil-masonry {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
    margin: 0;
    padding: 0;
}
}

/** LIGHTBOX MARKUP **/

.lightbox {
  /** Default lightbox to hidden */
  display: none;

  /** Position and style */
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: #fffffff2;
}

.lightbox img {
  /** Pad the lightbox image */
  max-width: 90%;
  max-height: 90%;
  margin-top: 2%;
}

.lightbox:target {
  /** Remove default browser outline */
  outline: none;

  /** Unhide lightbox **/
  display: block;
}