body
{
  margin: 0% auto 0% auto;
  padding: 0px;
  background-color: white;
  color: black;
  font-size: 100%;
  font-family: "Book Antiqua", Arial, "Times New Roman", Garamond, sans-serif;
}


a:link
{
  color: blue;
  text-decoration: none;
}
a:visited
{
  color: #be38f3;
  text-decoration: none;
}
a:hover
{
  color: #000000;
  text-decoration: none;
}


#bloc_page
{
  width: auto;
}


header
{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

  @media all and (max-width: 992px)
  {
    header
    {
      align-items: flex-start;
    }
  }


#logo
{
  margin: 0px;
  padding: 0px;
}


nav ul
{
  padding: 0;
  list-style-type: none;
  display: flex;
}

nav li
{
  font-size: 1em;
  padding: 15px 7px;
  border-right: 1px solid #000000;
}

nav li:last-child
{
  border-right: none;
}

  @media all and (max-width: 1100px)
  {
      nav li
      {
        font-size: 0.9em;
      }

      nav li:last-child
      {
        font-size: 0.9em;
      }
  }
  
  @media all and (max-width: 1000px)
  {

      nav li
      {
        font-size: 0.8em;
      }

      nav li:last-child
      {
        font-size: 0.8em;
      }
  }
  
  @media all and (max-width: 920px)
  {
    nav ul
    {
      flex-direction: column;
    }

    nav li
    {
      font-size: 0.8em;
	  padding: 5px 7px;
      border-left: 1px solid #000000;
      border-right: none;
    }
  
    nav li:first-child
    {
	  padding: 0px 7px 5px 7px;
    }
  
    nav li:last-child
    {
	  padding: 5px 7px 0px 7px;
	  border-left: 1px solid #000000;
    }
  }

  @media all and (max-width: 750px)
  {
    nav ul
    {
      flex-direction: column;
    }

    nav li
    {
      font-size: 0.6em;
	  padding: 5px 7px;
	  border-left: 1px solid #000000;
	  border-right: none;
    }
  
    nav li:first-child
    {
	  padding: 0px 7px 5px 7px;
    }
  
    nav li:last-child
    {
	  padding: 5px 7px 0px 7px;
	  border-left: 1px solid #000000;
    }
  }

  
.hp_main
{
  text-align: center;
  box-sizing: border-box;
}

.sections_hp_main
{
  width: 96%;
  margin: 0% auto 0% auto;
  padding: 4px;
  border-style: ridge;
  border-width: 2px;
  border-color: #FAFAFA;
  background-color: #E5E5E5;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 0px;
}

  @media all and (max-width: 1050px)
  {
    .sections_hp_main
    {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 1fr);
	}
  }

  @media all and (max-width: 750px)
  {
    .sections_hp_main
    {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(4, 1fr);
	}
  }

  @media all and (max-width: 450px)
  {
    .sections_hp_main
    {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(6, 1fr);
	}
  }

  @media all and (max-width: 370px)
  {
    .sections_hp_main
    {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(11, 1fr);
	}
  }

.section_main
{
  margin: 0%;
  border-style: ridge;
  border-width: 2px;
  border-color: #FAFAFA;
  padding: 3% 1% 2% 1%;
}

.section11
{
  grid-column: 5 / span 2;
  grid-row: 2;
}

  @media all and (max-width: 1050px)
  {
    .section11
    {
      grid-column: 3 / span 2;
      grid-row: 3;
    }
  }
  
  @media all and (max-width: 750px)
  {
    .section11
    {
      grid-column: 2 / span 2;
      grid-row: 4;
    }
  }

  @media all and (max-width: 450px)
  {
    .section11
    {
      grid-column: 1 / span 2;
      grid-row: 6;
    }
  }

  @media all and (max-width: 370px)
  {
    .section11
    {
      grid-column: 1;
      grid-row: 11;
    }
  }
  
.section_main h2
{
  font-size: 105%;
}

  @media all and (max-width: 1100px)
  {
    .section_main h2
    {
      font-size: 100%;
    }
  }

  @media all and (max-width: 1000px)
  {
    .section_main h2
    {
      font-size: 95%;
    }
  }

  @media all and (max-width: 920px)
  {
    .section_main h2
    {
      font-size: 90%;
    }
  }

  @media all and (max-width: 750px)
  {
    .section_main h2
    {
      font-size: 85%;
    }
  }  

.section_main h3
{
  font-size: 90%;
}

  @media all and (max-width: 1100px)
  {
    .section_main h3
    {
      font-size: 85%;
    }
  }

  @media all and (max-width: 1000px)
  {
    .section_main h3
    {
      font-size: 80%;
    }
  }

  @media all and (max-width: 920px)
  {
    .section_main h3
    {
      font-size: 75%;
    }
  }

  @media all and (max-width: 750px)
  {
    .section_main h3
    {
      font-size: 70%;
    }
  }  


.updates_links_sitemap
{
  width: 96%;
  margin: 2% auto 0% auto;
  background-color: #E5E5E5;
  border-style: ridge;
  border-width: 2px;
  border-color: #FAFAFA;
  font-size: 100%;
  padding: 2px 5px;
}

.updates_links_sitemap h2
{
  font-size: 100%;
  margin: 2% auto 1% auto;
}

  @media all and (max-width: 1100px)
  {
    .updates_links_sitemap h2
    {
      font-size: 95%;
    }
  }

  @media all and (max-width: 1000px)
  {
    .updates_links_sitemap h2
    {
      font-size: 90%;
    }
  }

  @media all and (max-width: 920px)
  {
    .updates_links_sitemap h2
    {
      font-size: 85%;
    }
  }

  @media all and (max-width: 750px)
  {
    .updates_links_sitemap h2
    {
      font-size: 80%;
    }
  }  

.updates_links_sitemap p
{
  font-size: 96%;
  padding: 2px 5px 3px 5px;
  text-align: left;
}

  @media all and (max-width: 1100px)
  {
    .updates_links_sitemap p
    {
      font-size: 85%;
    }
  }

  @media all and (max-width: 1000px)
  {
    .updates_links_sitemap p
    {
      font-size: 80%;
    }
  }

  @media all and (max-width: 920px)
  {
    .updates_links_sitemap p
    {
      font-size: 75%;
    }
  }

  @media all and (max-width: 750px)
  {
    .updates_links_sitemap p
    {
      font-size: 70%;
    }
  }  

.updates_links_sitemap ul
{
  padding: 0.5% 2.5%;
  list-style-type: disc;
  list-style-position: outside;
  font-size: 98%;
  text-align: left;
}

  @media all and (max-width: 1100px)
  {
      .updates_links_sitemap ul
      {
        padding: 0.5% 3%;
        font-size: 95%;
      }
  }
  
  @media all and (max-width: 1000px)
  {

      .updates_links_sitemap ul
      {
        padding: 0.5% 3%;
        font-size: 90%;
      }
  }

.updates_links_sitemap li
{
  padding: 1px 0px;
}


.note
{
  width: 96%;
  margin: 2% auto 0% auto;
  background-color: #E5E5E5;
  border-style: ridge;
  border-width: 2px;
  border-color: #FAFAFA;
  font-size: 100%;
  padding: 2px 5px;
}

.note h2
{
  font-size: 100%;
  margin: 2% auto 1% auto;
}

  @media all and (max-width: 1100px)
  {
    .note h2
    {
      font-size: 95%;
    }
  }

  @media all and (max-width: 1000px)
  {
    .note h2
    {
      font-size: 90%;
    }
  }

  @media all and (max-width: 920px)
  {
    .note h2
    {
      font-size: 85%;
    }
  }

  @media all and (max-width: 750px)
  {
    .note h2
    {
      font-size: 80%;
    }
  }  

.note p
{
  font-size: 96%;
  padding: 2px 5px 3px 5px;
  text-align: justify;
}

  @media all and (max-width: 1100px)
  {
    .note p
    {
      font-size: 85%;
    }
  }

  @media all and (max-width: 1000px)
  {
    .note p
    {
      font-size: 80%;
    }
  }

  @media all and (max-width: 920px)
  {
    .note p
    {
      font-size: 75%;
    }
  }

  @media all and (max-width: 750px)
  {
    .note p
    {
      font-size: 70%;
    }
  }


.list_themes
{
  width: 96%;
  margin: 2% auto 2% auto;
  text-align: center;
  background-color: #E5E5E5;
  border-style: ridge;
  border-width: 2px;
  border-color: #FAFAFA;
  font-size: 100%;
  padding: 2px 5px;
}

.list_themes h2
{
  margin: 2% auto 2% auto;
  text-align: center;
  vertical-align: middle;
  font-size: 100%;
}

  @media all and (max-width: 992px)
  {
    .list_themes h2
    {
      font-size: 95%;
    }
  }

  @media all and (max-width: 600px)
  {
    .list_themes h2
    {
      font-size: 90%;
    }
  }
  
  @media all and (max-width: 992px)
  {
    .list_themes p
    {
      font-size: 85%;
    }
  }

  @media all and (max-width: 600px)
  {
    .list_themes p
    {
      font-size: 75%;
    }
  }

	  
.photo_album_list
{
  width: 96%;
  margin: 0% auto 2% auto;
  background-color: #E5E5E5;
  border-style: ridge;
  border-width: 2px;
  border-color: #FAFAFA;
  font-size: 100%;
  padding: 0px 5px;
}

 .ul_col3
{
  column-count: 3;
  column-rule: ridge 2px #FAFAFA;
  list-style-type: none;
  padding: 0;
  margin: 0% 0% 1.5% 0%; 
}

  @media all and (max-width: 1100px)
  {
      .ul_col3
      {
        font-size: 90%;
      }
  }
  
  @media all and (max-width: 600px)
  {

      .ul_col3
      {
        font-size: 80%;
      }
  }

.photo_album_list li
{
  padding: 12px 5px;
}


.multicol2
{
  margin: 1% auto 2% auto;
  column-rule: ridge 2px #FAFAFA;
  column-count: 2;
  column-gap: 28px;                     /* (padding 5 + 8) * 2 + taille séparateur colonne 2  */
  font-size: 100%;
  text-align: justify;
  padding: 0px 5px;
}

  @media all and (max-width: 992px)
  {
    .multicol2
    {
      font-size: 90%;
    }
  }
  
  @media all and (max-width: 600px)
  {
    .multicol2
    {
      font-size: 80%;
	}
  }
  
  @media all and (max-width: 450px)
  {
    .multicol2
    {
      font-size: 80%;
      column-count: 1;
	  column-gap: 0; 
	}
  }

.multicol2 p:first-child
{
  margin-top: 0;
}


.multicol2just
{
  margin: 2%;
  column-rule: ridge 2px #FAFAFA;
  column-count: 2;
  column-gap: 3%;
  text-align: justify;
  text-justify: inter-word;
}

  @media all and (max-width: 992px)
  {
    .multicol2just
    {
      font-size: 80%;
    }
  }

  @media all and (max-width: 600px)
  {
    .multicol2just
    {
      font-size: 70%;
    }
  }


.links_and_sitemap
{
  font-size: 100%;
  font-weight: bolder;
}

.pimppartred
{
  font-weight: bold;
  font-style: italic;
  color: red;
}

.spansmaller
{
  font-size: smaller;
}

.figure_me
{
  display: inline-block;
  padding: 0px;
}

  @media all and (max-width: 900px)
  {
    .figure_me
    {
      margin: 2.5%;
    }
  }

  @media all and (max-width: 750px)
  {
    .figure_me
    {
      margin: 1.5%;
    }
  }

.figcaption_me
{
  font-style: italic;
  padding: 7px;
  text-align: center;
}

  @media all and (max-width: 900px)
  {
    .figcaption_me
    {
      padding: 5px;
      font-size: 85%;
    }
  }

  @media all and (max-width: 750px)
  {
    .figcaption_me
    {
      padding: 3px;
      font-size: 70%;
    }
  }


.smaller_italic
{
  font-size: 0.9em;
  font-style: italic;
}

  @media all and (max-width: 992px)
  {
    .smaller_italic
    {
      font-size: 70%;
    }
  }

  @media all and (max-width: 600px)
  {
    .smaller_italic
    {
      font-size: 65%;
    }
  }


h1
{
  width: 96%;
  background-color: #99CCFF;
  border-style: solid;
  border-width: 2px;
  border-color: black;
  margin: 0% auto 0% auto;
  text-align: center;
  vertical-align: middle;
  font-size: 175%;
  font-weight: lighter;
  padding: 2px 5px;
}

  @media all and (max-width: 992px)
  {
    h1
    { 
      font-size: 140%;
    }
  }

  @media all and (max-width: 600px)
  {
    h1
    { 
      border-width: 1px;
      font-size: 115%;
    }
  }

h2
{
  margin: 3% auto 3% auto;
  text-align: center;
  vertical-align: middle;
  font-size: 105%;
}

  @media all and (max-width: 992px)
  {
    h2
    {
      font-size: 100%;
    }
  }

  @media all and (max-width: 600px)
  {
    h2
    {
      font-size: 95%;
    }
  }


.imgnor
{
  border: 0px;
  margin: 0% auto 0% auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}


#footer_links
{
  text-align: center;
  font-size: 1em;
}

  @media all and (max-width: 992px)
  {
    #footer_links
    {
      font-size: 0.8em;
    }
  }

  @media all and (max-width: 600px)
  {
    #footer_links
    {
      font-size: 0.6em;
    }
  }

#copyright_date
{
  text-align: center;
  font-size: 0.75em;
}

  @media all and (max-width: 992px)
  {
    #copyright_date
    {
      font-size: 0.65em;
    }
  }

  @media all and (max-width: 600px)
  {
    #copyright_date
    {
      font-size: 0.5em;
    }
  }

#social_buttons
{
  display: flex;
  justify-content: center;
  align-items: flex-start;
}


.p_justify
{ 
  text-align: justify;
}


.searchbox1
{ 
  position: relative;
  left: 70%; 
  width: 30%;
  height: 0%;
  vertical-align: top;
  font-size: xx-small;
}





.imgthumbnor
{
  border: 0px;
  margin: 0% auto 0% auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: none;
}

.smalllighter
{
  font-weight: lighter;
  font-size: small;
}