@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,300);
*{
  box-sizing: content-box;
  scroll-behavior: smooth; /*Petite animation pour les ancres*/
  font-family: 'Ubuntu' ,"Comic Sans Arial MS", "cursive", "sans-serif";
}

body{
  margin: 0;
  font-family: Helvetica, sans-serif;
  background: black;
  background-repeat: repeat;
}

.border {
  width: 135px;
  height: 5px;
  background-color: #e53935;
  margin: 10px auto;
}

img {
    border-style: none;
}
/*Définir des couleurs*/
:root {
  --noir_clair: #1C1C1C;
  --noir_transparence: rgba(0,0,0,0.60);
}

.onepage{
  padding: 30px;
  padding-top: 5px;
  width: 100%;
  min-height: 85vh;
  box-sizing: border-box; 
  align-items: center;
}

.onepage h1{
  text-align: center;
  color: white;
}
#page4title h1 {
  color: white;
  text-align: center;
}
h2{
  color: black;
  text-align: center;
  margin: 5px;
}

a{
  color: white;
  padding: 10px;
  text-decoration:none;
}
p{
  margin: 0;
}

/***************/
/*Page 4 Projet*/
/***************/
#page4{
  margin: 0;
  background: #f0f0f0;
}

@keyframes filtredebut{
  from {opacity: 0;}
  to {opacity: 1;}
}

/*Filtre*/
.filterDiv {
  display: none;
  animation: filtredebut 1s 0s;
}

.show {
  display: block;
}

/* Style the buttons */
#myBtnContainer{
  text-align: center;
}

.btnfiltre {
/*  border: #ff6562;
  padding-left:10px;
  padding-right:10px;
  cursor: pointer;
  text-align: center;
  background: none;*/

/*      padding: 4px;*/
    background: #90c127;
    border-color: hsl(0 0% 0% / 0.2);
    border-style: solid;
    border-radius: 0.25rem;
}

.btnfiltre.active{
    color: white;
    border-color: black;
/*    text-shadow: 3px 3px 0px rgba(0,0,0,0.2);*/
}

.btnfiltre h3 {
    border-bottom: 2px solid #f0f0f000;
    
}

.btnfiltre h3:hover {
    border-bottom: 2px solid #ff6562;
}

/*Fin filtre*/

/***********************************************************/
/*Cette fois c'est la bonne : https://pierre.grangereau.fr/*/
/***********************************************************/
section {
    display: block;
}

.galerie {
    display: flex;
    flex-flow: row wrap;
    margin: 1rem auto;
    justify-content: center;
    max-width: 1800px;
}

.box {
    position: relative;
    overflow: hidden;
}

.galerie__items {
/*    margin: 10px;*/
    margin: 5px;
    text-align: center;
}

img.galerie__img {
    object-fit: cover;
    width: 90px;
    height: 90px;
}

/*.box__tile {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--noir_transparence);
    transition: all .6s ease;
    transform: translateY(-100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--noir_clair);
}
.box__tile {
  color: white;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    max-width: 100rem;
    flex: 1 1 25%;
    margin: 0 auto;
}

.box__tile__title {
    font-size: 16pt;
    text-align: center;
    font-weight: bold;
}

.box__tile__description {
    text-align: center;
    padding: 10%;
}

.box__tile__link {
    font-size: 13pt;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    color: white;
    background: rgba(229, 57, 53, 0.70);
    border-radius: 30px;
}*/
a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

.box:hover .box__tile {
    transform: translateX(0%);
    top: 0;
}

/********/
/*FOOTER*/
/********/
footer{
  text-align: center;
  background-color: black; 
  z-index: 5;
  margin:10px;
}

footer a{
 padding: 0;
}

.rsfooter{
  width: 4vh;
  height: 4vh;
  margin: 8px;
  padding: 0;
  transition-duration: 500ms;
}
.rsfooter:hover{
  transform: rotate(360deg);
}