/* POLICES D'ECRITURE */

/* @font-face {
  font-family: insolente; /* set name */
  src: url("../style/Insolente-Regular.woff"); }/* url of the font */ */

@font-face {
  font-family: anka-coder; /* set name */
  src: url("../style/AnkaCoder-C75-r.ttf"); /* url of the font */
}

@font-face {
  font-family: anka-coder;
  font-weight: bold; /* set name */
  src: url("../style/AnkaCoder-C75-b.ttf"); /* url of the font */
}

@font-face {
  font-family: anka-coder;
  font-style: italic; /* set name */
  src: url("../style/AnkaCoder-C75-i.ttf"); /* url of the font */
}

@font-face {
  font-family: anka-coder;
  font-style: italic; /* set name */
  font-weight: bold; /* set name */
  src: url("../style/AnkaCoder-C75-bi.ttf"); /* url of the font */
}

@font-face {
  font-family: iosevka; /* set name */
  src: url("../style/iosevka-regular.ttf"); /* url of the font */
}

@font-face {
  font-family: iosevka;
  font-weight: bold; /* set name */
  src: url("../style/iosevka-bold.ttf"); /* url of the font */
}

@font-face {
  font-family: iosevka;
  font-style: italic; /* set name */
  src: url("../style/iosevka-italic.ttf"); /* url of the font */
}

@font-face {
  font-family: iosevka;
  font-style: italic; /* set name */
  font-weight: bold; /* set name */
  src: url("../style/iosevka-bolditalic.ttf"); /* url of the font */
}


.ensemble{
    min-width: 25rem;
    max-width: 48rem;
    box-sizing: border-box;
    position: relative;
    z-index: 0;
    margin: 0 auto;
    margin-top: 5rem;
    margin-right: auto;
    margin-bottom: 5rem;
    margin-left: auto;
    padding: 1rem;
  background-image: linear-gradient( 180deg, rgb(143, 255, 169) 1rem , rgba(255, 0, 0, 0.434) 10rem, rgb(208, 172, 249)25rem);
    outline: #000000 2px solid;
  background-repeat: no-repeat;
  

}


body {
  font-family: 'anka-coder';
  margin: 0%;
width: 100%;
  font-size: 1.1rem;
  
  background-attachment: fixed;

}

header{

}

header img {
    max-width: 100%;

  }


.corps{
  display: flex;
  overflow-wrap: break-word;
  word-spacing: 2px;
  gap: 0.75rem;

}

.apropos{
  justify-content: center;
}




#navbar {
  position: sticky;
  width: 100%;
  top: 0;
  display: flex;
  background-color: none;
  margin-bottom: 2rem;
  margin-top: 0.4rem;
  z-index: 2;
  color: #000000;
  font-size: clamp(1rem, 3.902vw + 0.073rem, 2rem);
    font-family: anka-coder;
  justify-content: space-between;
  white-space: nowrap;
letter-spacing: -2px;

}

/* Navbar links */
.pageaouvrir {
  position:relative;
  float: left;
  text-align: center;
 padding: 0.3rem;
    border-radius: 0.5rem;

  text-decoration: none;
  
}

.pageaouvrir:hover{
  text-decoration: underline solid blue;

    border-radius: 0.5rem;


}

.liensite {
  text-decoration: underline solid black;
}

.liensite:hover {
  text-decoration: underline solid blue;
  color: blue;
}

.pageouverte {
  position:relative;
  float: left;
  text-align: center;
    border-radius: 0.5rem;

 z-index: 3;
 padding: 0.3rem;
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
  outline: black solid 0.2rem;
  
}

.pageouverte:hover{

  text-decoration: underline solid blue;
    border-radius: 0.5rem;


}



/* NAVIGATION GAUCHE */
.barrelaterale {
  min-width: 18%;
  padding: 0.75rem;
  overflow-wrap: break-word;
  background-color: rgb(255, 255, 255);
        border-radius: 0.5rem;



}

.infoarticle {
  max-width: 18%;
  padding: 1rem;
  overflow-wrap: break-word;
    height:max-content;
    border-radius: 0.5rem;
    background-color: #ffffff5d;


  
}

.textearticle{
  max-width: 50%;
  padding: 1rem;
  overflow-wrap: break-word;
  border-radius: 0.5rem;
      background-color: rgb(255, 255, 255);


  
}
.barrelateralearticle {
  min-width: 18%;
  padding: 0.75rem;
  overflow-wrap: break-word;
  background-color: white;
      outline: 2px solid #000000;  
}


.barrelaterale img{
  min-width: 90%;
  max-width:90%;
  max-height: 90%;
  image-rendering: pixelated;       /* standard moderne */
padding: 5%;
  align-content:center;
  transition:linear 0.5s;


}

.barrelaterale img:hover{
transform: rotate(10deg);
}

.titretexte {
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 5px;

}



.titretexterainbow {
   font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 5px;
  background: linear-gradient(90deg,
    rgba(255,0,0,1) 0%,
    rgb(255, 157, 0) 18%,
    rgb(102, 107, 0) 36%,
    rgb(40, 119, 0) 50%,
    rgb(0, 71, 129) 71%,
    rgb(98, 0, 100) 91%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
}

.titretexteitalique {
  font-weight: bold;
  font-size: 1.5rem;
  font-style: italic;
  margin-bottom: 10px;
}

.emoji {
  font-size: 75%;
  vertical-align: 0.25rem;

}

@media (max-width: 768px) {
  article {
    flex-direction: column;
  }
  .infoarticle {
    max-width: 100%;
  }

    .textearticle {
    max-width: 100%;
  }
}



article{
  display: flex;

  overflow-wrap: break-word;
  word-spacing: 2px;
  gap: 0.75rem;
 

}

article p{
  margin-bottom: 1rem;
}

.premasonry{
  min-width: 72%;
  display:flex ;
  flex-direction: column;
}



@media (max-width: 608px) {
  .corps {
    flex-direction: column;
  }

  .barrelaterale {
    margin-right: 0%;
    margin-bottom: 1rem;
  }

  .premasonry{
    margin: 0%;
  }
}

article img{
  margin-top: 1%;
  margin-bottom: 1%;
  outline: solid #000000 2px;
  image-rendering: pixelated;  
 max-width: 100%;
 min-width: 100%;
   display: block;
  margin-left: auto;
  margin-right: auto;
}

h1{
  font-weight: bold;
  font-size: 2.5rem;
  margin-top: 0px;
  margin-bottom: 0.825rem;
  max-width: fit-content;


}

h1:hover{
  text-decoration: underline solid blue;

}

h2{
  font-weight: bold;
  font-size: 1.35rem;
  margin-bottom: 1rem;
  max-width: fit-content;
  margin-top: 0%;
}

.grostitretexte{
  font-weight: bold;
  font-size: 2.5rem;
  margin-top: 0px;
  margin-bottom: 0.625rem;
  max-width: fit-content;
}


.grostitretexteitalique{
  font-weight: bold;
  font-size: 2.5rem;
  margin-top: 0px;
  font-style: italic;
  margin-bottom: 0.625rem;
}
.texte{
  margin-bottom: 1.25rem;

}


p{
  margin: 0;
  text-align: justify;
}

.tag {
  background-color: #e94b3c;
    width:max-content;
}

.tag:hover {
  color: #e94b3c;
    background-color: black;


}

a {
  text-decoration: none;
  color: #000000;
}

.titre {
  font-weight: bold;
  font-size: 25px;
  margin-left: 21%;
}

footer {
}



.premasonry{
  min-width: 72%;
  display:flex ;
  flex-direction: column;
}

.titremasonry{
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  text-align: left;
}

.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  grid-auto-rows: 0rem;
  gap: 1rem;
  max-width: 100%;
}

.item {
  background-color: #ffffff;
  padding: 0.5rem;
      border-radius: 0.5rem;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  color: #fff;
  height:max-content;
  

}
.item:hover {
  transition: ease 0.1s;
  box-shadow: #ff00ff37 0px 0px 28px 22px;
  

}

.item img{
  align-items: center;
  justify-content: center;
  max-width:100%;
  max-height: 100%;
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}



.item1 { background-color: #77ff00; color: #000000;}
.item2 {   background-color: #6b5b95; }
.item3 { background-color: #0048ff; }
.item4 {   background-color: #ff00e1; }
.item5 {   background: linear-gradient(90deg,
    rgba(255,0,0,1) 0%,
    rgb(255, 157, 0) 18%,
    rgb(102, 107, 0) 36%,
    rgb(40, 119, 0) 50%,
    rgb(0, 71, 129) 71%,
    rgb(98, 0, 100) 91%);
      }
.item6 {   background-color: #45b8ac; }
.item7 {   background-color: #e94b3c; }
.item8 {   background-color: #6c5b7b; }
.item9 {   background-color: #00a86b; }
.item10 {   background-color: #b565a7;}

.apropos