.compagnie-top-container {
  width: 100%;
  height: calc(100vh - 150px);

  display: flex;
  flex-direction: column;
  align-items: center;
}

.compagnie-container {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* color: #e9e7e7; */
  animation: lampeChargement 1s ease-in-out;
}

.compagnie-container-title {
  font-size: 75px;
  animation: lampeChargement 1s ease-in-out;
  text-align: center;
  /* font-family: "Imperial Script", system-ui; */
}

/* .compagnie-top-head {
  height: 100%;
  width: 100%;
  background-image: url(../img/UAC-1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 30%;
} */

/* compagnie infos */

.compagnie-infos-container {
  width: 80%;
  margin: 2rem 0;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 1rem;
}

.compagnie-infos {
  --s: 50px; /* the size on the corner */
  --t: 4px; /* the thickness of the border */


  padding: 2rem;
  width: 500px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  outline: var(--t) solid #88a3b2a2; /* the color here */
  outline-offset: calc(-1 * var(--t));
  mask: conic-gradient(at var(--s) var(--s), #0000 75%, #000 0) 0 0 /
      calc(100% - var(--s)) calc(100% - var(--s)),
    linear-gradient(#000 0 0) content-box;
  border-radius: 25px;



}



.compagnie-infos-portrait {
  width: 50%;
  margin-bottom: 2rem;
}

.compagnie-infos-titre {
  font-size: 25px;
text-align: center;
  font-weight: bold;
  text-transform: uppercase;
}

.compagnie-infos-texte {
  margin-top: 1rem;
}

/*    responsive */

@media (max-width: 862px) {
  .compagnie-top-container {
    width: 100%;
    height: fit-content;

    display: flex;
    flex-direction: column;
    align-items: center;

  }
  .compagnie-top-head {
    height: 20vh;
    width: 100%;
  }

  .compagnie-infos-container {
    width: 90%;
  }

  .compagnie-container-title {
    font-size: 35px;
    animation: lampeChargement 1s ease-in-out;
    margin-top: 1rem;
    /* bottom: -80%; */
    /* font-family: "Imperial Script", system-ui; */
  }

  .compagnie-infos-titre {
    font-size: 20px;
    text-align: center;
  }
}