<style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      background: #100b07;
      color: white;
    }

    header {
      background: linear-gradient(#2b1a0b, #080503);
      padding: 30px 20px;
      text-align: center;
      border-bottom: 3px solid #c99a2e;
    }

    header h1 {
      color: #ffd36a;
      font-size: 38px;
      text-transform: uppercase;
      letter-spacing: 2px;
    }

    header p {
      margin-top: 10px;
      color: #e0d0ad;
      font-size: 18px;
    }

    .conteneur {
      display: flex;
      min-height: 750px;
    }

    .menu-gauche,
    .menu-droite {
      width: 230px;
      background: #160d07;
      padding: 20px 12px;
      border-color: #c99a2e;
    }

    .menu-gauche {
      border-right: 2px solid #c99a2e;
    }

    .menu-droite {
      border-left: 2px solid #c99a2e;
    }

    .menu-gauche h2,
    .menu-droite h2 {
      color: #ffd36a;
      text-align: center;
      margin-bottom: 15px;
      font-size: 20px;
    }

    .menu {
      list-style: none;
    }

    .menu li {
      position: relative;
      margin-bottom: 10px;
    }

    .menu li a {
      display: block;
      padding: 12px;
      color: white;
      text-decoration: none;
      background: #2a190c;
      border: 1px solid #8b6a20;
      border-radius: 6px;
    }

    .menu li a:hover {
      background: #c99a2e;
      color: #111;
      text-decoration: none;
    }

    .sous-menu {
      display: none;
      list-style: none;
      margin-top: 6px;
      margin-left: 12px;
    }

    .sous-menu li a {
      background: #0c0805;
      color: #f1dfb0;
      font-size: 14px;
      border-left: 4px solid #c99a2e;
      text-decoration: none;
    }

    a {
        color: #C99A2E;
        text-decoration: none;
    }
    .menu li:hover .sous-menu {
      display: block;
    }

    main {
      flex: 1;
      padding: 30px;
      background:
        linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.85)),
        url('images/fond-mythologie.jpg');
      background-size: cover;
      background-position: center;
    }

    .intro {
      max-width: 900px;
      margin: 0 auto 30px auto;
      padding: 25px;
      text-align: center;
      background: rgba(0, 0, 0, 0.65);
      border: 2px solid #c99a2e;
      border-radius: 12px;
    }

    .intro h2 {
      color: #ffd36a;
      font-size: 30px;
      margin-bottom: 12px;
    }

    .intro p {
      color: #eee;
      font-size: 17px;
      line-height: 1.6;
    }

    .galerie {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 25px;
    }

    .carte {
      width: 420px;
      background: rgba(0, 0, 0, 0.75);
      border: 2px solid #c99a2e;
      border-radius: 12px;
      padding: 10px;
      text-align: left;
      box-shadow: 0 0 18px rgba(0,0,0,0.8);
    }

    .carte img {
      object-fit: cover;
      display: block;
      margin: auto;
    }
    

    .carte h3 {
      color: #ffd36a;
      margin-top: 10px;
      font-size: 22px;
    }

    footer {
      text-align: center;
      padding: 18px;
      background: #080503;
      color: #d6c292;
      border-top: 2px solid #c99a2e;
    }

    @media screen and (max-width: 1000px) {
      .conteneur {
        flex-direction: column;
      }

      .menu-gauche,
      .menu-droite {
        width: 100%;
        border-left: none;
        border-right: none;
        border-bottom: 2px solid #c99a2e;
      }

      .carte {
        width: 100%;
        max-width: 420px;
      }
    }












.menu-compte {
    width: 100%;
}

.boutons-compte {
    display: flex;
    margin-bottom: 15px;
}

.boutons-compte button {
    width: 50%;
    padding: 12px;
    background: #2a190c;
    border: 1px solid #8b6a20;
    color: #ffd36a;
    cursor: pointer;
    font-size: 16px;
}

.boutons-compte button.actif {
    background: #c99a2e;
    color: #111;
    font-weight: bold;
}

.formulaire-compte {
    display: none;
}

.formulaire-compte.actif {
    display: block;
}

.formulaire-compte input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    background: #120b05;
    border: 1px solid #8b6a20;
    color: white;
    border-radius: 6px;
}

.formulaire-compte input[type=""] {
    background: #c99a2e;
    color: #111;
    font-weight: bold;
    cursor: pointer;
}

.formulaire-compte input[type="submit"] {
    background: #c99a2e;
    color: #111;
    font-weight: bold;
    cursor: pointer;
}

.input[type="submit"]{
    background: #c99a2e;
    color: #111;
    font-weight: bold;
}



.icone-pieces {
    width: 12px;
    height: 12px;
}


.hover-title {
  display: inline;
  pointer-events: auto;
  cursor: pointer;

}

.hover-image {
  display: none;
}

body:not(.mobile) .hover-title:hover + .hover-image {
  display: flex;
  pointer-events: none;
}

.hover-image {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Change width and height to scale images */
  width: 95vw;
  height: 95vh;
}

.hover-image img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  margin-bottom: 0;
}

.cartel img
{
  position: fixed;
  width: 85px;
  height: 85px;
}

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

a.alink:link{
text-decoration: none;
font-weight: bold;
color: #FFC000;
}
a:visited{color: #FFA000;}
a:hover{
text-decoration: none;
color: #FF0000;
}






.Gris{color: #BDBDBD;}

.Jaune{color: #FFFF00;}

.Orange{color: #FF8000;}
			
.Rouge{color: #FF0000;}

.Rouge:link{color: #FF0000;}
.Rouge:hover{color: #FFFFFF;}
.Rouge:visited{color: #FF0000;}


.Bleu:link{color: #0000FF;}
.Bleu:hover{color: #FF0000;}
.Bleu:visited{color: #0000FF;}

.Vert{color: #00FF00;}

.Blanc{color: #FFFFFF;}

.Violet{color: #9F33FF;}

.Or{color: #FFDC00;}

.Quartz{color: #33FCFF;}

.Bleu{color: #0000FF;}

.BleuCiel{color: #0000FF;}

.Argent{color: #DEDEDE;}

.Bronze{color: #CD7F32;}

.Noir{color: #000000;}
</style>