:root {
  --couleur_fond_page: rgba(119,105,59,1);
}

html {font-size:100%;}  

body {
	background-color: var(--couleur_fond_page);

  /* Gradient de fond */
	background: rgb(144,134,120);
	background: -moz-linear-gradient(126deg, rgba(144,134,120,1) 0%, rgba(119,105,59,1) 50%, rgba(170,126,57,1) 100%);
	background: -webkit-linear-gradient(126deg, rgba(144,134,120,1) 0%, rgba(119,105,59,1) 50%, rgba(170,126,57,1) 100%);
	background: linear-gradient(126deg, rgba(144,134,120,1) 0%, rgba(119,105,59,1) 50%, rgba(170,126,57,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#908678",endColorstr="#aa7e39",GradientType=1);   hyphens: auto;            /* Coupe les mots en fonction des syllabes si possible */
  overflow-wrap: anywhere;  /* En cas de débordement au sein d'un mot, on coupe */
}

.contenu{
  margin: 4em 1em 1em 1em;  /* haut droite bas gauche */
  font-size:1rem;
}


h1.titre {
  padding-top : 2%;
  font-family: 'Comic Sans MS', 'Marker Felt', sans-serif;
  font-size: 2rem;
  text-align: center;
}
#Logo_titre {
  width: 85%;
  max-width: 1600px;
}

#soustitre {
  font-style: italic;
  text-align: center;
}

.ecritgros {
  font-size:1.5rem;
}

.ecrit_tres_gros {
  font-size:2.5rem;
}

h1 {
  text-align : left;
  font-family: sans-serif;
  font-size:2.5rem;
  border-bottom: solid 3px black;
}


h2 {
  text-align : left;
  font-family: sans-serif;
  font-size: 1.5rem;
  font-weight: normal;
  text-decoration: underline;
  white-space: normal;
  text-indent:-0.8rem;  /* Retrait de la première ligne*/
  margin-left:1rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  padding: 0px 0px 0px 0px;
}

h2::before{
  text-decoration: none;
  display:inline-block;   /* Pour éviter d'hériter du soulignement du paragraphe */
  white-space: pre;       /* Nécessaire pour que l'espace après le carré s'affiche */
  content:"◼ ";
  color: grey;
  font-size:1.6rem;
}
h2+div { /* Texte suivant le titre 2 (article) */
  margin-left: 1rem;
  margin-right: 0.5rem;
  text-align: justify;
  text-justify: auto;
}

h3 {
  font-size:1.3rem;
  font-weight: normal;
  padding-bottom: 0px;
  padding-top: 0.5rem;
  margin-bottom: 0.3rem;
  margin-top: 1rem;
}

h3 + div {
  margin-left: 1.7rem;
  margin-right: 0.5rem;
  text-align: justify;
  text-justify: auto;
}

h3+div ul {
  margin-bottom: 0rem;
  margin-top: 0.2rem;

}

div.illustration {
  display:block;
  float: right;
  margin: 1rem 0 0.8rem 1.5rem; /* haut droite bas gauche */
  width:20%;
  max-width: 180px;
}
div.illustration img {width:100%;} /* L'image occupe tout l'espace et se redimensionne */
div.illustration p {
  font-size:0.7em;
  margin:0;
  overflow:wrap;
}
@media (max-width:600px) { /* Cache les illustration si l'écran est trop étroit */
  div.illustration {
    display: none;
  }
}

.rainbow {   /* Classe qu'on fait changer de couleur (couleurs de l'arc-en-ciel) avec javascript */
	color: crimson;
}

.caracteristique {
  text-decoration: underline;
}

/* Affichage des liens de retour au début de la page */
.toTop {
  float:right;
}
.toTop a {
  display:inline-block;       /* Nécessaire pour que la rotation du texte soit effective */
  text-decoration-line:none;
  transform: rotate(90deg);   /* Permet de faire une rotation du symbole de flèche pour qu'il pointe en haut */
}

/* Style des info-bulles */
.infobulle {
  text-decoration: underline dotted;
  cursor:help;  /* Le curseur devient un point d'interrogation au survol */
}

    .miniature_image {
      display: block;
      margin-left: auto;
      margin-right: auto;
      max-width:100%;
      max-height:500px;
      text-align: center;
    }
	
    .titre_oeuvre {
      text-align: center;
      font-weight: bold;
      margin-top:0;
      margin-bottom:0;
      padding-top:0;
    }
	
    .date {
      text-align: center;
      font-style: italic;
      margin-top:0;
      padding-top:0;
    }

	.description_oeuvre {
	  font-size: 1.1rem;
	  text-align: justify;
	}
	
    .tableau_creations {
      table-layout: fixed;
       width: 100%;
      border-spacing: 1.5rem;
    }
	
    .tableau_creations td {
      width:25%;
      vertical-align: text-top;            
    }

    .lien_telechargement_oeuvre {
      font-size: 1.2rem;
      text-align: center;
      margin-top: -0.5rem;
    }
  
    .lien_telechargement_oeuvre a{
      color: darkblue;
    }


/* BAS DE PAGE */
footer {
  display: inline-block;
  border-top: 2px solid black;
  position: fixed;		/* Position fixée, même quand on fait défiler la page */
  bottom: 0;
  background-color: lightgrey;
  margin: 0px ;
  padding: 0px;
  left: 0px;
  width: 100%;
}

footer div{
  width:100%;
  margin:0.2rem 1rem ;
  display:block;
  padding: 0 20px 0 0;
}

footer p {
  display:table-cell;
  text-align : left;
  height:100%;
  vertical-align: middle;

}

#image_cc {
  display:table-cell;
  width: 88px;
  height:31px;
  padding: 0rem 1rem;
  background : transparent url("https://licensebuttons.net/l/by-sa/3.0/88x31.png") no-repeat center;
}