.mindmapimg {
    display: block;
    margin: 2rem auto;
    width: 90vw;
    background-color: var(--color-light);
    border-radius: 2rem;
    z-index: 1;
  }
.mindmap--container__desktop{
  display: none;
}
  .mindmap--container__mobile {
    display: block;
    width: 340px;
    height: 350px;
    margin: 2rem auto;
    border-radius: 2rem;
    background-color: var(--color-light);
  }
  .circle {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: transparent; /* Fond transparent pour que l'image soit visible */
    cursor: pointer; /* Curseur de type main pour indiquer l'interactivité */
    transition: box-shadow 0.3s ease; /* Animation pour l'effet d'ombre */
  }
  .circle:hover:after,
  .circle:focus:after{
    content: "Lire l'article";  
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%); /* on centre horizontalement  */
    z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
    white-space: nowrap;  /* on interdit le retour à la ligne*/
    padding: 5px 14px;
    background: #413219;
    color: #fff;
    border-radius: 4px;
    font-size: 1.2rem;
  }
/* Styles par défaut pour les petits écrans */
.curved-text {
  position: absolute;
  top: calc(var(--top) - 15px); 
  left: calc(var(--left) - 20px);
  width: 120px;
  height: 120px;
}

  /* Effet d'ombre au survol */
  .circle:hover {
    box-shadow: 0 0 50px rgba(0, 0, 0, 1); /* Ombre noire légère */
  }

  @media screen and (min-width: 1024px) {
    .mindmap--container__mobile {
      display: none;
    }
    .mindmap--container__desktop {
      display: block;
      width: 1000px;
      height: 1000px;
      margin: 2rem auto;
      border-radius: 2rem;
      background-color: var(--color-light);
    }

    .circle {
      width: 250px;
      height: 250px;
    }

    .curved-text {
      width: 345px;
      height: 345px;
      top: calc(var(--top) - 20px); 
      left: calc(var(--left) - 50px);
  }
  }