:root {
    --login-width: 350px; --login-height: 300px;
    --msg-width: 250px; --msg-height: 200px;
}
/**********   Modal & Cardes ( UsersIhms ) *******************/

.ModalContainer {
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: 15%;
  padding:0;
  max-width: none; /* Ou ajustez à une valeur appropriée */

}

.MsgHello,
.MsgByBy,
.Msgcard,
.Logincard {
  position: absolute;
  perspective: 1000px; /* Pour l'effet de flip */
  padding:0;
  margin-top: -10%;
}

.Logincard { width: var(--login-width, 270px); height: var(--login-height, 300px); }
.MsgHello { width: 200px; height: 200px; }
.MsgByBy { width: 200px; height: 200px; }

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

.card-front, .card-back {
   position: absolute;
   width: 100%;
   height: 100%;
   backface-visibility: hidden;
   border-radius: 5px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   padding:0;
}

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

        .modal {
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 99999 !important;
        }
        .modal.show { display: block; }

@keyframes flyAway {
  0% { transform: translateY(0) rotateY(0deg); opacity: 1; }
  100% { transform: translateY(-200px) rotateY(90deg); opacity: 0; }
}     
    
@keyframes flyIn {
  0% { transform: translateY(200px) rotateY(-90deg); opacity: 0; }
  100% { transform: translateY(0) rotateY(0deg); opacity: 1; }
}

.flyOut { animation: flyAway 2s forwards; }
.flyIn { animation: flyIn 2s forwards; }
 
@keyframes grow {
    0% { opacity: 0; transform: scale(0.3); rotate: 1 -0.5 2 380deg; }
    100% { opacity: 1; transform: scale(1); }
}
.grow { animation: grow .9s forwards; }

/******************   butons ************************/
.Butons
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.5em 0.9em;
    margin: 0;
    border: 0;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    position: relative;
    isolation: isolate;
    outline: none;
}
.Butons > * { position: relative; z-index: 1; }

.Btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: 0.5em 0.9em;
margin: 0;
border: 0;
cursor: pointer;
line-height: 1;
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
position: relative;
isolation: isolate;
outline: none;
color: #111;
}
.Btn:hover::before,
.Btn:focus-visible::before {
transform: scaleX(1);
}
.Btn::before {
content: "";
position: absolute;
inset: 0;
background: green;
z-index: 0;
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.50s ease-out;
}

.Btn_circle {
padding: 0;
border-radius: 50%;
background: #000;
color: #fff;
box-shadow: inset 2.5px 6.5px 32px -6.5px #dddddd;
font-family: inherit;
line-height: 1;
}
.Btn_circle:hover { background: yellow; }

.Btn_sm { width: 35px; height: 35px; font-size: 0.9rem; }
.Btn_xl { width: 70px; height: 35px; font-size: 1.3rem; }
.Btn_lg { width: 155px; height: 35px; font-size: 1.1rem; }

.BtnRond_ss { width: 25px; height: 25px; font-size: 0.9rem; }
.BtnRond_sm { width: 35px; height: 35px; font-size: 0.9rem; }
.BtnRond_lg { width: 55px; height: 55px; font-size: 1.1rem; }
.BtnRond_xl { width: 70px; height: 70px; font-size: 1.3rem; }

.clearLastButon
{
    position: fixed;
    top:12vh ! important;
    margin-left:88%;
}
.clearAllButon
{
    position: fixed;
    top:19vh ! important;
    margin-left:88%;
}

/******************   Ihms Section ************************/

.Sections {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  flex-wrap: nowrap;
  align-items: stretch;
  margin: 5px 0;  /* Réduire la marge verticale */
}

.LiSect05 { min-width: 5%; width: 5%; }
.LiSect1 { min-width: 10%; width: 10%; }
.LiSect2 { min-width: 20%; width: 20%; }
.LiSect3 { min-width: 30%; width: 30%; }
.LiSect4 { min-width: 40%; width: 40%; }
.LiSect5 { min-width: 50%; width: 50%; }
.LiSect6 { min-width: 60%; width: 60%; }
.LiSect7 { min-width: 70%; width: 70%; }
.LiSect8 { min-width: 80%; width: 80%; }
.LiSect15 { min-width: 15%; width: 15%; }

.LiSect05, .LiSect1, .LiSect2, .LiSect3, .LiSect4, .LiSect5
{ text-align: center; display: flex; align-items: center; justify-content: center; margin:0; padding:0}

._Top_18vh { margin-top:-18vh; }

/**************   Clavier  *************/
.pointer { cursor: pointer; }
.pointer:hover { color: yellow }

.Cout{
    max-width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.Clavier{
    max-width: 50% ! important;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 13px;
    margin-left: 20%; /* Espace entre les conteneurs */
}
.ClavierIn{  // Clavier in put
    position: relative; /* Position relative pour positionner le bouton */
    width: 20px; /* Réduire la taille du gros rond */
    height: 20px; /* Réduire la taille du gros rond */
    border-radius: 50%; /* Rendre le div rond */
    background-color: #FFFFFF; /* Couleur de fond blanc pour les gros ronds */
    color: #696969; /* Couleur de texte gris foncé */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px; /* Ajuster la taille de la police */
    cursor: pointer; /* Changer le curseur pour indiquer que c'est cliquable */
    margin-left:-1vw;
}
.ChoixIn{
    width: 20px; /* Taille réduite pour les petits ronds */
    height: 20px; /* Taille réduite pour les petits ronds */
    background-color: #FFFFFF; /* Couleur de fond blanc pour les petits ronds */
    margin: 5px; /* Espace entre les ronds */
    cursor: pointer; /* Changer le curseur pour indiquer que c'est cliquable */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Rendre le petit div rond */
    color: #696969; /* Couleur de texte gris foncé */
}

/**********   Colors *******************/

.Bj { background-color:#8FD0EC}
.Br { background-color:red}
.Bb{ background-color:#57C5D8;}
.Bv{ background-color:#17C1AF;}
.By{ background-color:yellow}
.Br{ background-color:red}
.Bg{ background-color:grey;}
.Bw{ background-color:black;}

.Msgcard,
.MsgHello,
.MsgByBy,
.Logincard {
    -webkit-box-shadow: inset 2.5px 6.5px 32px -6.5px #dddddd;
    -moz-box-shadow: inset 2.5px 6.5px 32px -6.5px #dddddd;
    box-shadow: inset 2.5px 6.5px 32px -6.5px #dddddd;
    background: #159982;
    background: #1c6e5f;
    background: #052721;
    color:white;
}

.Ko { color:red ! imporetant; text-align:center }
.Ok { color:grey; }
.Off { display:none }
.On { display:block; }

.Hide { display: none; opacity: 0; }
.Visible { opacity: 1; transition: opacity 0.3s ease; }

.imgRond
{
  -moz-border-radius:50px;
  -webkit-border-radius:50px;
  border-radius:50px;
  max-width:3rem;
}