#allbuttonPortal {
    margin: auto;
    position: absolute;
    top: 0px;
    left: 0%;
    transform: translateX(0%);
   display: block;  
    font-size: 10px;
    width: 40px;
    background : white;
    padding : 5px;
    height : 100%;
}

a#portail  {
    margin : 0px;
}

#portail img {
    height: 40px;
    width: 40px;
}

#portail #contentIcone {
    height: 30px;
    width: 30px;
    border-radius: 10px;
    border : 1px solid black;
    background: black;/*linear-gradient(to bottom right, blue, pink);*/
    color : white;
    padding : 5px;
    font-size: 20px;
    text-align : center;
    margin-bottom: 5px;
}

#content
{
    width : 90%;
    height : 92%;
    position : absolute;
    top : 3%;
    left : 5%;
    border : 1px solid black;
    background : white;
    padding : 10px;
    overflow : scroll;
}

#content_eleve
{
    border : 2px solid black;
    background : white;
    position : absolute;
    left : 20%;
    top : 0%;
    width : 69%;
    height : 80%;
    padding : 5%;
    overflow-y: scroll;
}
.index
{
    border : 2px solid black;
    background : white;
    width : 19%;
    border-top : none;
    font-size : 2vw;
}
.index:hover
{
    background : black;
    color : white;
}

.calcul
{
    border : 2px solid black;
    color : black;
    margin : 20px;
    text-align : center;
    vertical-align: middle;
    border-radius : 10px;
    text-decoration : none;
    padding : 10px;
    font-size : 1.5vw;
}

.calcul:hover
{
    background : black;
    color : white;
}

a
{
    text-decoration : none;
    display: block;
    width: 100%;
}


/* Style Fantasy pour les index avec icônes */
.index {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  margin: 10px 0;
  background: radial-gradient(circle at top, #2b1a40, #0a0514);
  border: 3px solid #ffd36b;
  border-radius: 15px;
  font-family: "Uncial Antiqua", serif;
  font-size: 2vw;
  color: #ffd36b;
  text-shadow: 0 0 6px rgba(210,139,255,0.8);
  box-shadow: 0 0 12px rgba(125,227,255,0.3),
              inset 0 0 8px rgba(255,211,107,0.2);
  transition: all 0.3s ease;
  cursor: pointer;
  z-index : 300;
}

.index i {
  font-size: 1.4em;
  color: #ffd36b;
  text-shadow: 0 0 8px rgba(210,139,255,0.7);
  animation: shine 2s infinite alternate;
}

.index:hover {
  background: radial-gradient(circle at center, #3c235d, #12081e);
  color: #7de3ff;
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(210,139,255,0.6);
}

.index:hover i {
  color: #7de3ff;
}

/* Animation scintillante des icônes */
@keyframes shine {
  from {
    text-shadow: 0 0 6px rgba(210,139,255,0.8),
                 0 0 15px rgba(125,227,255,0.7);
  }
  to {
    text-shadow: 0 0 12px rgba(255,211,107,0.9),
                 0 0 25px rgba(210,139,255,1);
  }
}