/* css texte type */

 /* Main*/

body {
font-size: 14px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h1 {
text-align: center
}

button {
  background-color: #4b8df8;
  color: white;
  font-size: 14px;
  font-weight: 400;
  padding: 0.6em 1.2em;
  border: none;
  border-radius: 0.5em;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background-color 0.2s ease,
              transform 0.1s ease,
              box-shadow 0.2s ease;
  margin: 0 10px 0 10px;
}
button:hover {
  background-color: #3b7ae0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transform: translateY(-2px);
}
button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
button:focus{
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.bold {
  font-weight: bold;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header{
  background-color: #cce8f2;
  padding: 10px;
  margin: 10px;
  border: 1px solid #0000AA;
}

.item {
  background-color: #cce8f2;
  padding: 10px;
  margin: 10px;
  border: 1px solid #0000AA;
  max-width: 800px;
}

details {
      margin-bottom: 8px;
      border: 1px solid #ccc;
      border-radius: 6px;
      padding: 8px;
    }

details > summary {
padding: 1px;
cursor: pointer;
}

details > a {
padding: 3px;
margin: 5px;
}

details > div {
  background: aqua ;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
  color: gray;
}

 .imagePop{
    color: #0078d7;
    text-decoration: underline;
    cursor: pointer; 
  } 
  
    /* Boîte d’images (popup) */
  .popup {
    display: none; /* cachée par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    z-index: 20;
  }

  .popupContent {
    background: white;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  }

  .popupContent img {
    max-width: 30vw;
    }

  /* Réponse */

  #enterOrdo{
  background-color: #EBC881 ;
  padding: 10px;
  margin: 5px;
  border-radius: 25px;
    }

  #enterOrdo>li {
    padding-top: 15px;
    margin-left: 15px;
    font-size: 120%;
    color: black;
  }

  .hidden{
    display: none;
  }

  .flou{
    opacity: 20%;
  }

  #divFibOuPas{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-basis: 40%;
  }

  /*boite hover text*/
  .kekece{
    cursor: help;
    text-decoration: underline dotted red;
    font-weight: bold;
  }

  .ahceca{
  visibility: hidden;
  background-color: aqua;
  color: gray;
  padding: 5px 8px;
  border-radius: 4px;
  position: absolute;
  transform: translate(-25%, 50%);
  }

  .kekece:hover .ahceca {
    visibility: visible;
  }