body{
    background-color: #E8F0FE; color: #2C3E50;
}
body.foner{
          background-color: #E8F0FE;
}

/* Appliquer à tout ce qui est image dans plateforme.html*/
img{
          width: 250px; /*Largeur des images*/
          height: auto;/*longeur des images*/
}

/*UNIVERSITES Privées*/

/*La taille des images individuelle de chaque logo*/
.iscom {
          position: relative;
          left: 15%;/*Amener l'image iscom au centre*/
          width: 230px; /*Largeur des images*/
          height: auto;/*longeur des images*/
}


.utm {
          position: relative;
          left: 13%;/*Amener l'image iscom au centre*/
          width: 280px; /*Largeur des images*/
          height: 90px;/*longeur des images*/
}

.iam {
          position: relative;
          left: 15%;/*Amener l'image iscom au centre*/
          width: 200px; /*Largeur des images*/
          height: 120px;/*longeur des images*/
}


.texte{
          display:content; /*Permet de mettre le texte descriptuf a droite de l'image */
          align-items:start;/* Position relatif a l'image en question*/
}

.fiel_iscom{
          border: 2px solid;
          border-style: ridge;
          width: 250px;/*Largeur du fieldset image*/
          height: auto;
}

.fiel_utm{
          border: 2px solid;
          border-style: ridge;
}

.fiel_iam{
          border: 2px solid;
          border-style: ridge;

}

/*La taille des images individuelle de chaque universités*/
.imge{
          width: 150px;
          height: auto;
}

/* reglage de la position des fieldsets de chaque université*/
.fieldset_iscom{
          display: flex;
          gap: 2px;
          height: 490px;
}

.fieldset_utm{
          
          display: flex;
          gap: 2px;
          height: 490px;
}

.fieldset_iam{
          display: flex;
          gap: 2px;
          height: 490px;
}

/*Interieur*/
.fieldset_gen{
          display: flex;
          gap: 1px; 
}

/*bors général*/
.field_gen{
          background-color: white;
          position: relative;
          width: 20vh;
          height: auto;
          border: 5px solid ;
          border-style: outset;
}

.field_pt{
          border: 2px solid ;
          border-style: dashed;
}


.fieldset_gene{
          display: flex;
          gap: 50px; 
}
legend{
          text-align: center;
}

/*UNIVERSITES PUBLIQUES*/
.fiel_publ{
          display: flex;
          gap: 150vh;
}

.ujkz {
          position: relative;
          left: 15%;/*Amener l'image iscom au centre*/
          width: 210px; /*Largeur des images*/
          height: auto;/*longeur des images*/
}

.fiel_ujkz{
          border: 2px solid;
          border-style: ridge;
          width: 250px;/*Largeur du fieldset image*/
          height: auto;
}

.fieldset_ujkz{
          display: flex;
          gap: 2px;
          height: 490px;
}

.fieldset_uts{
          gap: 2px;
          height: 555px;
}

.fiel_uts{
          border: 2px solid;
          border-style: ridge;
          width: 250px;/*Largeur du fieldset image*/
          height: auto;
}

.uts {
          position: relative;
          width: 230px; /*Largeur des images*/
          height: auto;/*longeur des images*/
}



.auteur{

          opacity:0.5;/*rendre le nom de l'auteur moin vife */
}

.nazi {
          position: relative;
          left: 15%;/*Amener l'image iscom au centre*/
          width: 220px; /*Largeur des images*/
          height: 120px;/*longeur des images*/
}

.fiel_nazi{
          border: 2px solid;
          border-style: ridge;
          width: 250px;/*Largeur du fieldset image*/
          height: auto;
}

.fieldset_nazi{
          display: flex;
          gap: 2px;
          height: 490px;
}

.Univer{
          font-size: larger;
          color: #D32F2F;
          border: 2px solid;
          border-color: rgb(39, 15, 40);
          text-align: center;
}

/*Motde bienvenue de universite*/
.bienv{
          text-align: center;
}

h1.fonn{
         color: white ; 
         background-color: #1A3C6E;
         border: 1px solid  #EF7D00;
}

.mot{
          font-size: 24px;
          text-align: center;
          color:#1A237E;
}

.bienv_bor{
          border: 2px solid red;
}

.liste{
          border: 2px  solid rgb(169, 169, 8);
          text-align: center;
          position: relative;
          left: 28%;
          width: 40%;
          height: auto;
}
.plus_univ{
          font-size: small;
          animation: blink 1s linear infinite;
          color: black;
          border: 2px solid;
          border-style:groove;
          border-radius: 10px;
          
}


 h1,h2{
    text-align: center;
    color:white;
    border: 2px;
    border-style:double;
    border-radius: 20px;
    border-color: #EF7D00;
    background-color: #1A3C6E;
    border-width: 2px;
 }


/*Précise l'element voulu*/
#isco:target{
          animation: blink 0.8s linear 2;
}
@keyframes blink{
          0%, 100% {
                    background: rgb(171, 223, 59);
          }
          50%{
                    background: transparent;
          }
}

/*Précise l'element voulu*/
#ujk:target{
          animation: blink 0.8s linear 2;
}
@keyframes blink{
          0%, 100% {
                    background: rgb(171, 223, 59);
          }
          50%{
                    background: transparent;
          }
}

/*Précise l'element voulu*/
#utm:target{
          animation: blink 0.8s linear 2;
}
@keyframes blink{
          0%, 100% {
                    background: rgb(171, 223, 59);
          }
          50%{
                    background: transparent;
          }
}

/*Précise l'element voulu*/
#uts:target{
          animation: blink 0.8s linear 2;
}
@keyframes blink{
          0%, 100% {
                    background: rgb(171, 223, 59);
          }
          50%{
                    background: transparent;
          }
}

#h1:target{
    animation: blink 0.8s linear 2;
}
@keyframes blink{
    0%, 100% {
              background: rgb(171, 223, 59);
    }
    50%{
              background: transparent;
    }
}

#h2:target{
    animation: blink 0.8s linear 2;
}
@keyframes blink{
    0%, 100% {
              background: rgb(171, 223, 59);
    }
    50%{
              background: transparent;
    }
}

fieldset {
          border: 2px #08678d; 
          border-radius: 30px;
        border-style:double;  
          background-color: #FFFFFF;
}

.mss{
          position: relative;
          left: 25%;
          border: 2px #E69A2A;
          border-style: inherit;
          width: 590px;
          height: 252px;
}

p.mot{
          font-size: larger;
          text-align: center;
          color:#0B2C4D;
          border: 2px#B71C1C;
          border-radius: 20px;
}

.mot_bienv{
    position: relative;
    top: -20%;
    background-color: #F5F5F5;
    border-style:double;
    height: 72%;

}

.Univer{
    color:white;
    border: 2px;
    border-radius: 20px;
    border-style:double;
    border-color: #EF7D00;
    background-color: #1A3C6E;
}

.listes{
    color: white;
    text-decoration: none;
    border: 2px solid  rgb(187, 92, 92);
    border-style:double;
    background-color: #1A3C6E;
}

.fon{
    background-color:#1A3C6E;
    position: relative;
    border: 2px solid;
    border-style:double;
    left: 4%;
    width: 90%;
    height: 500px;
}
.fonne{
    display: flex;
    gap: 100px;
}

.cont{
    text-decoration: none;
    position: relative;
    top: 70px;
    text-align:center;
    border-style:groove;
    border: 10px solid;
    border-radius: 10px;
    width: 55%;
    height: 230px;
    transition:border 0.1s ease-in-out ;

}

.cont:hover{
    border: 5px solid red;
}

.image{
    width:  100%;
    height: 100px;
}

ol{
    list-style-type: none;
}

ol.foner{
    position: relative;
    top:5px;
    left:63%;
    display: flex;
    gap: 100px;
}

.f{
    border: 2px solid;
    color: white;
}

.bf{
    position: fixed;
    width: 5%;
    height: auto;
    left: 50%;
}

.bienve{
    background-color: #1A3C6E;
    position: relative;
    top: -25%;
    left: 25%;
    width:50%;
    height: auto;
}

.bienven{
        background-color: #1A3C6E;
        position: relative;
        top: -10%;
        left: 25%;
        width:50%;
        height: auto;
}

.compt {
    border-radius: 50%;
    position:fixed;
    width: 2%;
    height: auto;
    object-fit: contain;
    left: 96%;
    top: 4px;
    padding: 6px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  .compt:hover {
    transform: scale(1.12) rotate(-6deg);
    box-shadow: 0 4px 16px rgba(239, 125, 0, 0.5);
  }
  
  @keyframes bouger {
    0%   { transform: scale(1);    }
    50%  { transform: scale(1.25); }
    100% { transform: scale(1);    }
  }
  
  .compt {
    animation: bouger 1.5s ease-in-out infinite;
  }