/***** palette de couleurs *****/
 :root {
    --beige: #e5d7c1;
    --green2: #0d3e11;
    --purple: #48294c;
    --green: #748045;
    --red: #ae3434;
    --red2: #4a1e18; 
}

/***** polices de caractères *****/
@font-face{

        font-family: diploma;
        src: url(Diploma.otf) format('opentype');
    }
@font-face{
    font-family: anatomia;
    src: url(Anatomia.ttf) format('truetype');
}

/***** titres *****/
h1{
    font-family: anatomia, sans-serif;
    font-size: 60px;
    text-align: center;
    color: brown;
    }
h2{
    font-family:anatomia;
    }

/***** design du corps de la page *****/
body {
    margin: 0;
    background-color: var(--beige);
}
#contain2 {
  position: relative;
  width: fit-content; /* ou une largeur explicite si besoin */
  height: auto;
}
#header {
    position: relative;
    height: auto;
    width: 100%;
    text-align: center;
    padding-top: 20px;
}

#haut {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#haut-miroir {
    position: absolute;
    top: 0;
    right: 0;
    transform: scaleX(-1);
    z-index: 1;
}

#aliouane {
    position: relative;
    z-index:-1;
    margin-top: 100px;
}


#item { 
    cursor: pointer;
    position: absolute; 
    top: 0px; 
    left: 0px; 
    transition: all 1s;
  }

#jtem { 
    cursor: pointer;
    position: absolute; 
    top: 100px; 
    left: 50px; 
    transition: all 1s;
  }

#ktem {
  position: absolute; /* ✅ permet de le déplacer à l’intérieur de #contain2 */
  width: 40px;
  height: 40px;
  pointer-events: none;
  z-index: 2;
}

  #ltem { 
    cursor: pointer;
    position: absolute; 
    top: 100px; 
    left: 50px; 
    transition: all 1s;
  }   
  #mtem { 
    cursor: pointer;
    position: absolute; 
    top: 100px; 
    left: 50px; 
    transition: all 1s;
  }   



 footer {
      background-color: #222;
      color: white;
      text-align: center;
      padding: 40px 0;
      position: absolute;
    }

    .flip-card {
      background-color: transparent;
      width: 600px;
      height: 420px;
      perspective: 1000px;
      margin: auto;
    }

    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.6s;
      transform-style: preserve-3d;
      cursor: pointer;
    }

    .flip-card.flipped .flip-card-inner {
      transform: rotateY(180deg);
    }

    .flip-card-front, .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 15px;
      overflow: hidden;
    }

    .flip-card-front img,
    .flip-card-back img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .flip-card-back {
      transform: rotateY(180deg);
    }