@font-face {
  font-family: "Bitcrusher";
  src:
    url("../Fonts/bitcrusher_condensed_bd.otf") format("opentype")}

@font-face {
  font-family: "Gill sans ms";
  src:
    url("../Fonts/gillsansmt.ttf") format("truetype")}

body{
  margin: 0px;
  background-image: url(../Images/Background_Space.jpg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

.Margin-Bottom-30{
  margin-bottom: 30px;
}

.Bitcrusher {
  font-family: "Bitcrusher";
  color: white;
}

.Gill {
  font-family: "Gill sans ms";
  color: white;
}

h1 { font-size: clamp(4rem, 6vw, 6rem); padding: 80px 0;}
h2 { font-size: clamp(3rem, 4vw, 5rem); padding: 60px 0;}
h3 { font-size: clamp(2rem, 3vw, 4rem); padding: 40px 0; }
p { font-size: clamp(1rem, 1.5vw, 1.3rem) !important; padding: 20px 0;}
input, button, a  { font-size: clamp(1rem, 1.5vw, 1.3rem) !important;}

.Page-Title{
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.Blue-Input{
  background-color: #006CFF;
  border: 7px solid #71A5FF;
  color: white !important;
  border-radius: 15px;
  padding: 5px;
}

.Blue-Input:hover{
  opacity: 80%;
  background-color: #006CFF;
  border: 7px solid #71A5FF;
  color: white !important;
}

.Blue-InputText{
  background-color: #006CFF;
  border: 7px solid #71A5FF;
  color: white !important;
  width: 100%;
  border-radius: 15px;
  padding: 5px;
}

.Blue-InputText:hover{
  opacity: 80%;
  background-color: #006CFF;
  border: 7px solid #71A5FF;
}

.Purple-Input{
  background-color: #7400FF;
  border: 7px solid #B271FF;
  color: white !important;
  border-radius: 15px;
  padding: 5px;
}

.Purple-Input:hover{
  opacity: 80%;
  background-color: #7400FF;
  border: 7px solid #B271FF;
  color: white !important;
}

.Purple-InputText{
  background-color: #7400FF;
  border: 7px solid #B271FF;
  width: 100%;
  border-radius: 15px;
  padding: 5px;
}

.Purple-InputText:hover{
  opacity: 80%;
  background-color: #7400FF;
  border: 7px solid #B271FF;
  color: white !important;
}

.Purple-Checkbox {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    min-height: 99px;

    background-color: #7400FF;
    border: 7px solid #B271FF;
    border-radius: 15px;

    padding: 20px;

    cursor: pointer;
    color: white;

    transition: .2s ease;
}

.Purple-Checkbox:hover {
    transform: translateY(-3px);
}

.Purple-Checkbox span {
    font-weight: 600;
}

.Purple-Checkbox input {
    width: 20px;
    height: 20px;
}


.Blue-Checkbox {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    min-height: 99px;

    background-color: #006CFF;
    border: 7px solid #71A5FF;
    border-radius: 15px;

    padding: 20px;

    cursor: pointer;
    color: white;

    transition: .2s ease;
}

.Blue-Checkbox:hover {
    transform: translateY(-3px);
}

.Blue-Checkbox span {
    font-weight: 600;
}

.Blue-Checkbox input {
    width: 20px;
    height: 20px;
}
.conteneur{
  max-width: 80%;
  margin: auto;
}

.text-danger{
  color: crimson;
  display: none;
}

.Blue-Box{
  background-color: #006CFF;
  border: 7px solid #71A5FF;
  border-radius: 15px;
  padding: 5px;
  margin-top: 50px;
}

.Purple-Box{
  background-color: #7400FF;
  border: 7px solid #B271FF;
  border-radius: 15px;
  padding: 5px;
  margin-top: 50px;
}

#disconnect{
  margin-top: 50px;
  margin-bottom: 20px;
}

.Main-Nav{
  display:flex;
  align-items:center;
  justify-content:center;
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(1535px, 100%);
  padding:10px 20px;
  z-index:1000;
  gap:50px;
  box-sizing:border-box;
}

.Nav-Blue{
  background-color:#006CFF;
  border:7px solid #71A5FF;
  border-radius:100px;
  display:flex;
  gap:30px;
  list-style:none;
  padding:10px 20px;
  margin:0;
}

.Nav-Blue li a{
  text-decoration: none;
  color: white;
  font-size: 1.5rem;
}

.Nav-Blue li a:hover{
  color: #7400FF;
}

.Nav-Purple{
  background-color:#7400FF;
  border:7px solid #B271FF;
  border-radius:100px;
  display:flex;
  gap:30px;
  list-style:none;
  padding:10px 20px;
  margin:0;
}

.Nav-Purple li a{
  text-decoration: none;
  color: white;
  font-size: 1.5rem;
}

.Nav-Purple li a:hover{
  color: #006CFF;
}

.logo{
  height:120px;
  width:auto;
  flex-shrink: 0;
  min-width: 80px;
}

.Comptes{
  height:70px;
  width:auto;
}

/* burger */
.burger{
  display:none;
  font-size:2rem;
  background:none;
  border:none;
  color:white;
}


.form-control::placeholder{
  color: white !important;
}



.FG-A-Top-Blue{
  background-image: url(http://ewanmaxant.fr/SAE_Portfolio/Images/Foreground-A-Top-Blue.svg);
  width: 100%;
  aspect-ratio: 300 / 41;
  background-size: cover;
  margin-top: -2px;
}

.FG-A-Top-Purple{
  background-image: url(http://ewanmaxant.fr/SAE_Portfolio/Images/Foreground-A-Top-Purple.svg);
  width: 100%;
  aspect-ratio: 300 / 41;
  background-size: cover;
  margin-top: -2px;
}

.FG-A-Middle-Blue{
  background-color: #006CFF33;
  width: 100%;
  min-height: 400px;
  margin-top: -1.5px;
}

.FG-A-Middle-Purple{
  background-color: #7400FF33;
  width: 100%;
  min-height: 400px;
  margin-top: -2px;
}

.FG-A-Middle-PurpleToBlue{
  background: linear-gradient(to top, #006CFF33, #7400FF33);
  width: 100%;
  min-height: 400px;
  margin-top: -1.5px;
}

.FG-A-Middle-BlueToPurple{
  background: linear-gradient(to top, #7400FF33, #006CFF33);
  width: 100%;
  min-height: 400px;
  margin-top: -1.5px;
}

.FG-A-Bottom-Blue{
  background-image: url(http://ewanmaxant.fr/SAE_Portfolio/Images/Foreground-A-Bottom-Blue.svg);
  width: 100%;
  aspect-ratio: 300 / 41;
  background-size: cover;
}

.FG-A-Bottom-Purple{
  background-image: url(http://ewanmaxant.fr/SAE_Portfolio/Images/Foreground-A-Bottom-Purple.svg);
  width: 100%;
  aspect-ratio: 300 / 41;
  background-size: cover;
}

.FG-B-Top-Blue{
  background-image: url(http://ewanmaxant.fr/SAE_Portfolio/Images/Foreground-B-Top-Blue.svg);
  aspect-ratio: 300 / 74;
  background-size: cover;
  margin-top: -2px;
}

.FG-B-Top-Purple{
  background-image: url(http://ewanmaxant.fr/SAE_Portfolio/Images/Foreground-B-Top-Purple.svg);
  aspect-ratio: 300 / 74;
  background-size: cover;
  margin-top: -2px;
}

.FG-B-Middle-Blue{
  background-color: #006CFF ;
  width: 100%;
  min-height: 400px;
}

.FG-B-Middle-Purple{
  background-color: #7400FF ;
  width: 100%;
  min-height: 400px;
}

.FG-B-Bottom-Blue{
  background-image: url(http://ewanmaxant.fr/SAE_Portfolio/Images/Foreground-B-Bottom-Blue.svg);
  aspect-ratio: 300 / 74;
  background-size: cover;
  margin-top: -2px;
}

.FG-B-Bottom-Purple{
  background-image: url(http://ewanmaxant.fr/SAE_Portfolio/Images/Foreground-B-Bottom-Purple.svg);
  aspect-ratio: 300 / 74;
  background-size: cover;
  margin-top: -2px;
}

#presentation img{
  width: 30%;
}

#identitee{
  text-align: left;
}

#identitee a{
  text-decoration: none;
  color: white;
  display: block;
}

#identitee img{
  width: 100%;
  border: 7px solid #71A5FF;
  border-radius: 15px;
}

.Blue-Obj {
    display: Block;
    text-align: center;

    background-color: #006CFF;
    border: 7px solid #71A5FF;
    border-radius: 15px;

    padding: 5px;

    color: white;

    transition: .2s ease;
}

.Blue-Obj:hover {
    transform: translateY(-3px);
}

.Purple-Obj {
    display: Block;
    text-align: center;

    background-color: #7400FF;
    border: 7px solid #B271FF;
    border-radius: 15px;

    padding: 5px;

    color: white;

    transition: .2s ease;

    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
    hyphens: auto;
}

.Purple-Obj:hover {
    transform: translateY(-3px);
}

.ACH{
  display: Block;
  text-align: center;

  background-color: #7400FF;
  border: 7px solid #B271FF;
  border-radius: 15px;

  padding: 5px;

  color: white;
}

.ACH:hover{
  opacity: 80%;
}

.ACS{
  display: None;
  text-align: center;

  background-color: #7400FF;
  border: 7px solid #B271FF;
  border-radius: 15px;

  padding: 5px;

  color: white;
}

#ContenuTrace p{
  text-align: left;
}

#ContenuTrace img{
  width: 100%;
  border: 7px solid #71A5FF;
  border-radius: 15px;
}

#ContenuTrace a{
  color: white;
  text-decoration: underline;
}

#LastTraces label{
  display: flex !important;
  flex-direction: column !important;
}

#LastTraces img{
  width: 100%;
  border: 7px solid #B271FF;
  border-radius: 15px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}


.projects-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.project-card{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.project-card img{
  width: 100%;
  border: 7px solid #71A5FF;
  border-radius: 15px;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.project-info{
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
  width: 100%;
}

#KeyA {
  width: 20% !important;
  margin: 0 20px !important;
}

#KeyA img{
  border: none !important;
  border-radius: 0 !important;
}

#KeyB {
  width: 30% !important;
  margin: 0 20px !important;
  border: none !important;
  border-radius: 0 !important;
}

#KeyC {
  width: 7% !important;
  margin: 0 20px !important;
  border: none !important;
  border-radius: 0 !important;
  display: block;
}

footer p{
  padding: 0;
  margin: 0;
}

footer a{
  color: white;
  text-decoration: none;
}

.Locked-Zero{
  background-image: url(../Images/Lock0.svg);
  background-position: center;
  position: fixed;
  z-index: 999;
  background-size: cover;
  inset: 0;
}

.Locked-One{
  background-image: url(../Images/Lock1.svg);
  background-position: center;
  position: fixed;
  z-index: 999;
  background-size: cover;
  inset: 0;
}

.Locked-Two{
  background-image: url(../Images/Lock2.svg);
  background-position: center;
  position: fixed;
  z-index: 999;
  background-size: cover;
  inset: 0;
}

.Locked-Three{
  background-image: url(../Images/Lock3.svg);
  background-position: center;
  position: fixed;
  z-index: 999;
  background-size: cover;
  inset: 0;
  cursor: pointer;
  transition: transform 0.8s ease-in-out;
}

.Locked-Three.Open{
  transform: translateY(-100%);
}


/* MOBILE */
@media (max-width:768px){

.projects-grid{
    grid-template-columns: 1fr;
  }

#presentation img {
    width: 70%;
    height: auto; /* laisse le SVG calculer sa hauteur librement */
  }
.Main-Nav {
    justify-content: space-between;
    gap: 10px;
  }

  .logo {
    height: 70px;
    min-width: unset; 
  }

  .burger{
    display:block;
  }

  .Nav-Blue{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    border-radius:0 0 20px 20px;
  }

  .Nav-Blue.active{
    display:flex;
  }

  .Nav-Purple{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    border-radius:0 0 20px 20px;
  }

  .Nav-Purple.active{
    display:flex;
  }

  .Comptes{
    height:50px;
  }
}