@font-face {
  font-family: 'MaPolice1';  /* Nom libre que vous choisissez */
  src: url('Fonts/doctor-punk.woff') format('woff');
  font-weight: normal;      /* 400 normal, 700 bold */
  font-style: normal;       /* italic si oblique */
  font-display: swap;       /* Évite FOIT : texte visible pendant chargement */
}
@font-face {
  font-family: 'MaPolice2';  /* Nom libre que vous choisissez */
  src: url('Fonts/earwig-factory-rg.woff') format('woff');
  font-weight: normal;      /* 400 normal, 700 bold */
  font-style: normal;       /* italic si oblique */
  font-display: swap;       /* Évite FOIT : texte visible pendant chargement */
}
@font-face {
  font-family: 'MaPolice3';  /* Nom libre que vous choisissez */
  src: url('Fonts/Leander.woff') format('woff');
  font-weight: normal;      /* 400 normal, 700 bold */
  font-style: normal;       /* italic si oblique */
  font-display: swap;       /* Évite FOIT : texte visible pendant chargement */
}
@font-face {
  font-family: 'MaPolice4';  /* Nom libre que vous choisissez */
  src: url('Fonts/ThinFourDownThreeCrazyPink-Regular.woff') format('woff');
  font-weight: normal;      /* 400 normal, 700 bold */
  font-style: normal;       /* italic si oblique */
  font-display: swap;       /* Évite FOIT : texte visible pendant chargement */
}
@font-face {
  font-family: 'MaPolice5';  /* Nom libre que vous choisissez */
  src: url('Fonts/ThinFourDownThreeCrazyPink-Zero.woff') format('woff');
  font-weight: normal;      /* 400 normal, 700 bold */
  font-style: normal;       /* italic si oblique */
  font-display: swap;       /* Évite FOIT : texte visible pendant chargement */
}
@font-face {
  font-family: 'MaPolice6';  /* Nom libre que vous choisissez */
  src: url('Fonts/times_new_yorker.woff') format('woff');
  font-weight: normal;      /* 400 normal, 700 bold */
  font-style: normal;       /* italic si oblique */
  font-display: swap;       /* Évite FOIT : texte visible pendant chargement */
}

 body {
 margin: 0;
 min-height: 100vh;
 background-image: url("Textures/halftone-Texturelabs_Metal_261M.png");
 }

 main {
   margin-top: 50px;
   margin-left: 200px;
   margin-right: 200px;
   padding : 0px;
   background-image: url("Textures/halftone-Texturelabs_Metal_147S.png");
   background-size: 100% 100%; /*c'est toujours haut/bas PUIS droite/gauche */
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: scroll; /* local la fait apparaitre que dans la zone sus-dite */
   border-radius: 10px; /*arrondi les agnles*/
   height : calc(100vh - 60px); /* definition de la limite AVANT débordement et Activation du scroll */
   overflow-y: scroll;
 }

 .serrure {
 margin-top: 40px;
 margin-left: 70px;
 margin-right: 70px;
 margin-bottom: 40px;
 }
 
 .serrure img {
    height : 100%;
    weight : 100%;
  }
  .serrure h1 {
      display:flex;
      justify-content: left;
      margin-top: 150px;
      margin-left: 150px;
      margin-right:150px;
      margin-bottom: 150px;
      padding : 10px;
      font-family : 'MaPolice2', Arial, sans-serif;
      font-size: 300;
  }

 .logPost {
   margin-top: 40px;
   margin-left: 70px;
   margin-right: 70px;
   margin-bottom: 40px;
   justify-content: center;
   border: 4px solid transparent;
   border-image: url('Textures/halftone-Texturelabs_Paper_371S.png')8% stretch;
   background-image: url('Textures/halftone-Texturelabs_Paper_313M.png');
   /* filter: hue-rotate(180deg) saturate(1.5); à modifier pour les bordures*/
   border-image-outset : 5px;
  }
  .logPost h1 {
    display:flex;
    justify-content: center;
    padding : 20px;
    font-family : 'MaPolice2', Arial, sans-serif;
    font-size: 300%;
  }
  .logPost h2 {
    display:flex;
    justify-content: center;
    font-family: 'MaPolice3', Arial, sans-serif;
  }

  .logPost h3 {
    display:flex;
    justify-content: center;
    margin-left: 20px;
    font-family: 'MaPolice3', Arial, sans-serif;
  }

 .gifContainer {
   display:flex;
   flex-wrap: wrap; /* mes les éléments en file horizontale puis quand plus de place, à la ligne */
   /* gap: 20px ajoute un espace autour des+ images */
   /* padding: ajoute une valeur de vide à l'image même */
   position:relative;
   justify-content: center;
    }
  .gifContainer a {
    display: block;
    transform: scale(0.5);
    transition : transform 0.3s ease;
    }
  .gifContainer a img {
    width: 70vh;
    height: 70vh;  /* ou une hauteur fixe */
    object-fit: contain;
    }
  .gifContainer a:hover {
    content: attr(data-anim);
    transform: scale(0.8);
    /*position: fixed; !important;
    z-index: 9999;
    width: 100%;
    height: 100%;*/
    }


 .Hmenu {
   position: fixed;
   top : 0;
   width: 100%;
   background: #A08FDF;
   /* border-radius: none; Juste ... là y'en à pas ...*/
   padding : 10px 20px;
   justify-content: center;
   gap: 20px;
   display : flex; /* permet de rendre flexible l'objet, dans sa disposition et sa forme => modifiable avec hover*/
   flex-direction: row;
    }

  .Hmenu a { /* défini les enfants de Hmenu (en l'occurence les hyperliens)*/
    text-decoration: none;
    }

  .Hmenu a:hover { /* hover= quand la souris passe dessus */
    background-color: #f0f0f0;
    text-decoration-color: #000000;
    text-decoration: underline;
    font-weight: bold;
    }


 .Gmenu {
   position:fixed;
   top : 60px;
   left : 10px;
   width: auto;
   height: auto;
   background: #7b966b;
   border-radius: 10px;
   padding : 10px 20px;
   gap: 10px;
   display : flex;
   flex-direction: column;
    }
    .Gmenu a {
      text-decoration: none;
      }

    .Gmenu a:hover {
      background-color: #f0f0f0;
      text-decoration-color: #000000;
      text-decoration: underline;
      font-weight: bold;
      }

 .Dmenu {
   position: fixed;
   top: 60px;
   right : 10px;
   width: auto;
   height: auto;
   background: #7b966b;
   border-radius: 10px;
   padding : 10px 20px;
   gap: 10px;
   display:flex;
   flex-direction: column;
    }
    .Dmenu a {
      text-decoration: none;
      }

    .Dmenu a:hover {
      background-color: #f0f0f0;
      text-decoration-color: #000000;
      text-decoration: underline;
      font-weight: bold;
      }