* {
  font-family: "Playfair Display", serif;
}

h1 {
  margin: auto;
  color: black;
  font-family: "Ubuntu", cursive;
  font-size: 2rem;
  font-weight: bold;
  opacity: 1;
  z-index: 20;
}

h3 {
  font-weight: bolder;
  font-size: 0.7rem;
}

button {
  width: 50% !important;
  margin: auto;
  border-radius: 35px !important;
}

span {
  font-weight: bolder;
  font-size: larger;
}

footer {
  margin-left: 0px !important;
}

/* Image de fond */

.symbimg {
  position: fixed;
  top: 35%;
  height: 100vh;
  width: 100%;
  opacity: 0.6;
}

/* Conteneur Header + Corps + Pied de page Début */

.contain {
  background: #b4b4b4; /* fallback for old browsers */
  height: fit-content;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0 !important;
}

/* Header */

.head-box {
  display: flex;
  height: 25vh;
  width: 100%;
  background-color: white;
  border-bottom: 5px solid black;
  border-image: linear-gradient(to right, #1e9600, #fff200, #ff0000);
  border-image-slice: 1;
  z-index: 100;
}

.headimg {
  height: 85%;
  width: 15%;
  z-index: 20;
}

.headan {
  position: absolute;
  opacity: 0.3;
  height: 24.6vh;
  width: 100%;
}

/* Texte défilant */

.txtdef {
  overflow: hidden;
  display: flex;
  /* Fonctionne avec toutes les tailles */
  width: 100%;
  height: 5vh;
  position: fixed;
  top: 25vh;
  align-items: center;
  /* pour rotate on enlève le translate et on rajoute le rotate */
  /* transform:  rotate(90deg); */
  background-color: #fdf958;
  border-bottom: 5px solid black;
  border-image: linear-gradient(to right, #1e9600, #fff200, #ff0000);
  border-image-slice: 1;
  z-index: 100;
}

.txtdefl {
  white-space: nowrap;
  font-size: 1.2em;
  animation: scrollTxt 10s linear infinite;
}

@keyframes scrollTxt {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}

/* Corps du site */

.boite {
  margin-top: 25vh;
  margin-bottom: 58px;
  height: fit-content;
  width: 100%;
  padding: 5px;
}

/* Conteneur des différentes applications */

.conteneur {
  width: 100%;
  margin-top: 7vh;
}

/* Application */

.boxlk {
  margin: 15px;
  /* border-radius: 37px;
    background: linear-gradient(145deg, #e8e8e8, #c3c3c3);
    box-shadow: 5px 5px 18px #757575, -5px -5px 18px #ffffff; */
  background: radial-gradient(
        circle at 100% 100%,
        #ffffff 0,
        #ffffff 25px,
        transparent 25px
      )
      0% 0%/30px 30px no-repeat,
    radial-gradient(circle at 0 100%, #ffffff 0, #ffffff 25px, transparent 25px)
      100% 0%/30px 30px no-repeat,
    radial-gradient(circle at 100% 0, #ffffff 0, #ffffff 25px, transparent 25px)
      0% 100%/30px 30px no-repeat,
    radial-gradient(circle at 0 0, #ffffff 0, #ffffff 25px, transparent 25px)
      100% 100%/30px 30px no-repeat,
    linear-gradient(#ffffff, #ffffff) 50% 50% / calc(100% - 10px)
      calc(100% - 60px) no-repeat,
    linear-gradient(#ffffff, #ffffff) 50% 50% / calc(100% - 60px)
      calc(100% - 10px) no-repeat,
    conic-gradient(
      from 177deg,
      #32f82b 0%,
      #32f82b 48%,
      #fff426 50%,
      rgba(255, 230, 38, 1) 74%,
      #fe2626 78%,
      #fe2626 100%
    );
  border-radius: 30px;
  padding: 4px;
  box-sizing: border-box;
  box-shadow: 5px 5px 18px #757575, -5px -5px 18px #ffffff;
}

.cont {
  border-radius: 30px;
  background: #ece9e6; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #ffffff,
    #ece9e6
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #ffffff,
    #ece9e6
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/* Titre et présentation */

.chap {
  background-color: #a6ffff;
  border-radius: 28px !important;
}

.chap:hover {
  background-color: #a6d0ff;
}

.ptext:hover {
  font-size: 1.5em;
}

.scrolling-text-container {
  /* width: 100%; /* Largeur de la div */
  overflow: hidden; /* Cache le texte qui dépasse */
  position: relative; /* Pour positionner le texte à l'intérieur */
  text-align: center; /* Centre le texte à l'intérieur */
}

.scrolling-text {
  white-space: nowrap; /* Empêche le texte de passer à la ligne */
  /* overflow: hidden; */
  text-overflow: ellipsis;
  animation: scroll-left 10s linear infinite; /* Animation de défilement initial */
}

@keyframes scroll-left {
  60% {
    transform: translateX(-70%); /* Défilement à gauche */
  }
  100% {
    transform: translateX(30%); /* Défilement à droite */
  }
}

/* Icon Application */

.icoimg {
  border: 5px solid rgb(68, 80, 245) !important;
  height: 90px !important;
  width: 90px !important;
}

.email-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: #b4b4b4;
}