/* Mise en page ------------------------------------------------------------- */

#conteneur {
  display: grid;
  grid-template-columns: 50% 50%;
  margin: 0 auto; 
  grid-template-areas:
    "header    header"
    "nav       nav"
    "main      main"
    "soustitre soustitre"
    "footer    footer";
}
  
  @media screen and (min-width: 760px) {
    #conteneur {
      display: grid;
      grid-template-columns: 50% 50%;
      margin: 0 auto; 
      grid-template-areas:
        "header    header"
        "soustitre soustitre"
        "nav       nav"
        "main      main"
        "footer    footer";
  }
}
    
/* Éléments structurels ----------------------------------------------------- */

body {
  margin: 0px;
  background-color: #dfeee3;
  font-size: 120%;
  font-family: 'Open Sans', sans-serif;
  }

footer {
  grid-area: footer;
  padding: 5px 10vw 5px 10vw;
  text-align: center;
  color: #000000;
}

h1 {
  font-size: 180%;
  font-weight: bold;
  color: #3b9859
}

h2 {
  font-size: 158%;
  font-weight: bold;
  color: #3b9859
}

h3 {
  font-size: 136%;
  font-weight: bold;
  color: #3b9859
}

h4 {
  font-size: 120%;
  font-weight: bold;
  color: #3b9859
}

header {
  grid-area: header;
  padding: 5px 10vw 5px 10vw;
  background-color: #3b9859;
  color: #ffffff;
  font-size: 250%;
  letter-spacing: 3px;
}

main {
  grid-area: main;
  padding: 0 10vw 10px 10vw;
  background-color: #ffffff;
  color: #333333;
}
  
nav {
  position: sticky;
  top: 0px;
  grid-area: nav;
  padding: 5px 10vw 5px 10vw;
  color: #ffffff;
  font-weight: bold;
  background-color: #8bc39d;
}

/* Autres ------------------------------------------------------------------- */

#soustitre {
  grid-area: soustitre;
  padding: 0 10vw 5px 10vw;
  background-color: #3b9859;
  color: #ffffff;
}

/* Hyperiens ---------------------------------------------------------------- */

a {
  color: #3b9859;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

nav a {
  color: #ffffff;
  text-decoration: none;
}

nav a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* -----------------------------------------------------------------------------
  Tableaux
----------------------------------------------------------------------------- */
table, th, td {
  border: 1px solid #3b9859;
  border-collapse: collapse;
  margin: 20px;
}
th, td {
  padding: 5px 10px;
}
th {
  background-color: #3b9859;
  color: #ffffff;
  text-align: left;
}


/* -----------------------------------------------------------------------------
  Figures
----------------------------------------------------------------------------- */
figure {
  /* border: dashed #666 1px; */
  padding: 20px;
  margin: 0px;
}

figCaption {
  font-size: 0.9em;
  font-style: italic;
  color: #666666;
}

/* -----------------------------------------------------------------------------
  Portions de texte
----------------------------------------------------------------------------- */

/* texte important */
strong {
  font-style: bold;
  color: #000000;
}

/* mots clés */
code {
  font-size: 1.3em;
  font-weight: bold;
  background-color: #eeeeee;
}

/* classes, méthodes et fonctions */
em {
  font-style: italic;
  color: #3b9859;
  font-weight: bold;
}

/* touches du clavier */
kbd {
  font-size: 1.3em;
  font-weight: bold;
  background-color: #eee;
  border: solid #333 1px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 5px;
}

/* texte en évidence */
mark {
  background-color: #ffffdd;
}

/* chemins, URL et adresses IP */
b {
  font-family: monospace;
  font-size: 1.3em;
  background-color: #ffeeee;
}

/* non utilisés */
i {}
u {}
del {}
ins {}
  
.source {
  font-size: 1.3em;
  /*background-color: #f3f9ff;*/
  background-color: #f7f7f7;
  padding: 10px;
  border: solid #000 1px;
  border-radius: 10px;
  color: #333333;
  }

.web {
  border: solid #999999 1px;
  /* border: dashed #666 1px; */
  /*margin-left: 10px;
  margin-right: 10px;*/
  padding-left: 10px;
  padding-right: 10px;
  background-color: #ffffff;
  }

.console {
  font-size: 1.3em;
  background-color: #f3fff9; /* changer cette couleur #f3f9ff (bleu) */
  /*background-color: #f7f7f7;*/
  padding: 10px;
  border: solid #3b9859 1px;
  border-radius: 10px;
  color: #3b9859;
  }

blockquote {
  border-left: solid #dfeee3 10px;
  padding: 15px 20px;
  background-color: #f7f7f7;
  }