* {
    margin: 0;
    padding: 0;
  }

  body {
    content: "";
    position: relative;
    inset: 0;
    background-color: #11519b;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23319637' fill-opacity='0.55' fill-rule='evenodd'/%3E%3C/svg%3E");
    
  }



  .grid::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: 100px 80px;
    background-size: cover;
    background-position: center;
    opacity: 0.5; /* Change l'opacité ici */
    z-index: 0;
  }
  
  
  #hexGrid {
    margin-top: 100px;
    display: flex;
    justify-self: center !important;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 50;
    overflow: hidden;
    font-family: sans-serif;
    list-style-type: none;
  }
  
  .hex {
    position: relative;
    visibility: hidden;
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
    transition: all 0.5s;
    backface-visibility: hidden;
    will-change: transform;
    transition: all 0.5s;
  }


  
  .hex::after{
    content:'';
    display:block;
    padding-bottom: 100%;  /* =  100 / tan(60) * 1.5 */

  }
  
  .hexIn {
    position: absolute;
    width:96%;
    padding-bottom: 110.851%; /* =  width / sin(60) */
    margin: 2%;
    overflow: hidden;
    visibility: hidden;
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
    -webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
        -ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
            transform: rotate3d(0,0,1,-60deg) skewY(30deg);
      transition: all 0.5s;
  }
  
  .hexIn * {
  position: absolute;
  visibility: visible;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
  }


  
  .hexLink {
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
        -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
            transform: skewY(-30deg) rotate3d(0,0,1,60deg);
  }
  
  
  /*** HEX CONTENT **********************************************************************/
  .hex img {
    left: -100%;
    right: -100%;
    width: auto;
    height: 100%;
    margin: 0 auto;
  }
  
  .hex h1, .hex p {
    width: 100%;
    padding: 5%;
    box-sizing:border-box;
    font-weight: 500;
    opacity: 0;
  }

  .hex h1 {
    font-size: 2em !important;
  }

  .hex p {
    font-size: 1em;
  }
  
  #demo1 {
    color: #fdc775;
    text-transform: capitalize;
    text-align: center;
    bottom: 50%;
    padding-top:50%;
    z-index: 1;
  }
  
  .hex h1:before, .hex h1:after {
    display: inline-block;
    margin: 0 0.5em;
    width: 0.25em;
    height: 0.03em;
    background: #ffffff;
    vertical-align:auto;
    transition: all 0.5s;
    text-align:center;
  }
  
  #demo2 {
    color: white;
    top: 50%;
    text-align: center;
    /* text-transform: capitalize; */
  }
  
  .img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
    /* -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }
  
  .img:before, .img:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    opacity: 0;
    transition: opacity 0.4s;
  }
  .img:before {
    background: rgba(22, 103, 137, 0.6);
    background: rgba(0, 108, 173, 0.6);
  
  }
  .img:after {
    background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.5), transparent);
  }
  
  /*** HOVER EFFECT  **********************************************************************/
  

  
  
  .hexLink:hover h1, .hexLink:focus h1,
  .hexLink:hover p, .hexLink:focus p{
    opacity:1;
    transition: 0.8s;
  }
  
  
  .hexIn:hover .img:before,
  .hexIn:hover .img:after,
  .hexIn:hover .hexLink {
    opacity: 1;
  }
  
  
  /*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
  @media (min-width:1001px) { /* <- 5-4  hexagons per row */
  #hexGrid{
    margin-left: 100px;
    padding-bottom: 4.4%
  }
  .hex {
    width: 20%; /* = 100 / 5 */
  }
  .hex:nth-child(7n+5){ /* first hexagon of even rows */
    margin-left:10%;  /* = width of .hex / 2  to indent even rows */
  }
  }
  
 
  
  @media (max-width: 1000px) and (min-width:601px) { /* <- 3-2  hexagons per row */
  #hexGrid{
    padding-right: 2rem;
    padding-bottom: 7.4%;
    font-size: 14px;
  }
  .hex {
    width: 33.333%; /* = 100 / 3 */
  }
  .hex:nth-child(5n+4){ /* first hexagon of even rows */
    margin-left: 16.666%;  /* = width of .hex / 2  to indent even rows */
  }
  }
  
  @media (max-width: 600px) { /* <- 2-1  hexagons per row */
  #hexGrid{
    padding-right: 2rem;
    padding-bottom: 11.2%;
    font-size: 12px;
  }
  .hex {
    width: 50%; /* = 100 / 3 */
  }
  .hex:nth-child(3n+3){ /* first hexagon of even rows */
    margin-left:25%;  /* = width of .hex / 2  to indent even rows */
  }
  }
  
  @media (max-width: 400px) {
    #hexGrid {
        font-size: 8px;
    }
  

  }