/* @import url('https://fonts.googleapis.com/css2?family=Borel&family=Plus+Jakarta+Sans:wght@200&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,400;1,500&display=swap'); */

/* ROOT */
:root {
  
  /*    MODE CLAIR */
    --ecriture:#0f0f0f;
    --ecritureLight: hsl(0, 0%, 44%);
    --background: #ffffff;
    --container:#312929;
    --ChampEcriture:#f5f5f5;
    --borderColor:#dfdfdf ;
    --logo: #df6363;
    --shadow:#E9E9E9;
    --box-shadow: 2px 2px 30px rgb(35, 35, 35);
    --icon : #585858;
    }

     
    
    
* { 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
}

/* POLICE D'ECRITURE */

.iconPath{
  fill: var(--iconColor);
  stroke: var(--iconColor);
}

html{
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  background-color:var(--background);
  scroll-behavior:smooth;
  color: var(--ecriture);
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  line-height: 1.5;
}

body{

  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  line-height: 1.5;

  font-weight: 100;
  padding: 0px;
  margin: 0px;
  background-color: var(--background);
  /* font-weight: bolder; */

  display: flex;
  align-items: center;
  text-decoration:none;
  flex-direction: column;
  width: 100%;
  height: 100%;

}



a,p,div{
  text-decoration: none;
  color:var(--ecriture);
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}


::-moz-selection { /* Code for Firefox */
    color: rgb(70, 103, 222);
    color: var(--logo);
    background: rgb(230, 228, 228);
  }
  
  ::selection {
    color: rgb(70, 103, 222);
    color: var(--logo);
    background: rgb(230, 228, 228);
  }
      
  *::-webkit-scrollbar {
    width: 8px; 
}

/* Track */
*::-webkit-scrollbar-track {
    position: absolute;
    right: 20px;
    background: #f8f8f8; 
}

/* Handle */
*::-webkit-scrollbar-thumb {
    background: rgb(204, 204, 204); 
    border-radius: 8px;

}

/* Handle on hover */
*::-webkit-scrollbar-thumb:hover {
    background: #555; 
}


.logoColor{
  background-color:var(--logo);
  
}
.page{

    position: absolute;
    width: 100%;
    top: 0px;
    height:auto;
    /* max-height: 92; */
    display: flex;
    align-items: center;
    text-decoration:none;
    justify-content: center;
    flex-direction: column;
  }

  .blockAll{

    position: relative;
    width: 100%;
    height: 100%;
    /* padding: 14px; */
    display: flex;
    align-items: center;
    text-decoration:none;
    justify-content: center;
    flex-direction: column;
    background-color:var(--background);
  
  }
  
  main{
    position: absolute;
    height: auto;
    max-height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    text-decoration:none;
    /* justify-content: center; */
    flex-direction: column;
    /* padding-top: 50px; */
  }

.flex{

  display: flex;
  align-items: center;
  justify-content: center;
  /* flex-direction: column; */

}

.flexDirectionRow, .row{
  flex-direction: row;
}

.flexDirectionColumn, .column{
  flex-direction: column;
}



.centerContainer, .flexContainer{

  position: relative;
  width: 100%;
  height:auto;
  display: flex;
  align-items: center;
  text-decoration:none;
  justify-content: center;
  flex-direction: column;

}

.separator{
  position: relative;
  width: 86%;
  height: 1px;
  margin-top:14px ;
  margin-bottom:14px ;
  background-color: var(--borderColor);
  

 }
 
/* a, */
h1,h2,h3,label,li{

  color: var(--ecritureLight);
  font-weight: bolder;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

}

p{
  color: var(--ecritureLight);
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

.title{
  color: var(--ecritureLight);
  font-weight: bold;
  padding: 9px;
  padding-left: 22px;
  padding-top: 12px;

  /* border-bottom: 1px solid var(--borderColor);  */
  width: 94%;
  font-size: 24px;

}

.subtitle{
  color: var(--ecritureLight);
  font-weight: bold;
  padding: 9px;
  padding-left: 22px;
  padding-top: 12px;

  /* border-bottom: 1px solid var(--borderColor);  */
  width: 94%;
  font-size: 18px;

}

.grey{

  background-color:rgb(215, 215, 215) ;
}
.grey:hover{

  background-color:rgb(191, 191, 191) ;
}

.red{

  background-color:rgb(255, 107, 107) !important;
}
.red:hover{

  background-color: rgb(199, 49, 49) ;
}

.green{

  background-color:rgb(179, 255, 160) !important;
}
.green:hover{

  background-color: rgb(143, 213, 125) ;
}




.white{

  background-color:rgb(255, 255, 255) ;
  fill:white;

}

.black{

  background-color:#202124;
}

.profilPicture{
  background-color: var(--logo);
}

.icon{
  width: 40px;
  height: 40px;
  cursor: pointer;
}


.littleText{
  font-size:15px;
  font-style: italic;
  color:rgb(175, 175, 175);
}

.mediumText{
  font-size: 13px !important;
  font-style: italic;
  color:rgb(163, 163, 163);
}


.underline{
  text-decoration: underline;
  cursor: pointer;
}
 /* Hide scrollbar for Chrome, Safari and Opera */
.noScrollBar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.noScrollBar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}


.disabledScroll{

  overflow: hidden;
}

.error {
  border-color: red !important;
}
.swal-button{
  background-color: var(--logo);
  border-radius: 2em;
  color: var(--ecritureOnLogoColor);

}

.swal-button:hover{
  background-color: #1e3176;
}


.swal-button--cancel {
  background-color: #fc7f7f;
}


.buttonsContainer,.blockButton {
  position: relative;
  width: 100%;
  height:auto;
  display: flex;
  align-items: center;
  text-decoration:none;
  justify-content: center;

}

/*  ----OU---- */
.separatorWithText {
  width: 100%; 
  text-align: center; 
  border-bottom: 1px solid var(--borderColor); 
  line-height: 0.1em;
  margin: 20px 0 20px; 
    
} 

.separatorWithText span { 
   background:var(--background); 
   padding:10px 10px; 
   font-size: 18px;
}

.fixedBottom, .fixedBot{
  position: fixed !important;
  bottom: 80px;
}

.no-scroll {
  overflow: hidden;
}


.width-100{
  width: 100% !important;
}


/* .glassmorphism{
  background: red !important;
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  border: 1px solid red !important;
} */

/* flags emojie */
@font-face {
  font-family: 'Twemoji Country Flags';
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  src: url('https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2') format('woff2');
}

.flag{
  font-family: 'Twemoji Country Flags', system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

}



  /* Define animation */
  @keyframes contentLoading {
    0% {
      background-color: var(--background); 
      filter: brightness(100%);
      }
    50% {
      /* background-color:  brignhtness rgb(226, 226, 226); Utilisation de darker() pour assombrir légèrement la couleur de l'arrière-plan */
      filter: brightness(50%);
      /* transform: scale(1.1);  */
    }
    100% {
      /* background-color: rgb(247, 247, 247); */
      filter: brightness(100%);
  
  
    }
  
  } 
  
  
@keyframes activeItem {
  from {
    width: 0%;
    background-color: grey;
  }

  to {
    width: 100%;
    background-color: var(--logo);
  }
}

@keyframes shakeElement {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

@media (min-width: 1000px)  {
  /* body{width: 800px;
  margin: auto;
} */

  html, body{
    line-height: 1.3;

  }

  .blockAll{

    width:30% ;
  }

  main{
    margin: auto 0;
    width: 60%;
    display: flex;
    align-items: center;
    text-decoration:none;
    /* justify-content: center; */
    flex-direction: column;
  }

}