@font-face {
  font-family: 'Oxygen Mono';
  font-style: normal;
  font-weight: 400;
  src: url("../font/OxygenMono-Regular.woff") format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  background-image: -webkit-linear-gradient(to left,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.5) 100%),
    url("../img/arr.jpg");
  background-image: linear-gradient(to left,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.5) 100%),
    url("../img/arr.jpg");

  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right top;
  background-size: cover;
}

.bg-frontbuilding {
  background-image: -webkit-linear-gradient(to left,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 100%),
    url("../img/frontbuildingnpsp.jpg");
  background-image: linear-gradient(to left,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 100%),
    url("../img/frontbuildingnpsp.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}


.titreheader {
  font-family: 'Oxygen Mono';
  letter-spacing: 6px;
  color: #FFF;
  text-align: center;
  text-shadow: 5px 5px 5px rgba(126, 126, 126, 0.30);
}

.text-justify {
  text-align: justify;
}

.bg-opacity-90 {
  --bs-bg-opacity: 0.9;
}

.btn {
  transition: all 0.3s ease-in-out;
}

.htmx-indicator{
  opacity:0;
  transition: opacity 500ms ease-in;
}
.htmx-request .htmx-indicator{
  opacity:1
}
.htmx-request.htmx-indicator{
  opacity:1
}

.bleu85 {
  background: rgb(85, 85, 250);
  background: linear-gradient(180deg,
      rgba(85, 85, 250, 1) 0%,
      rgba(20, 75, 145, 1) 100%);
}

.jaune233 {
  background: rgb(233, 241, 35);
  background: linear-gradient(180deg,
      rgba(233, 241, 35, 1) 0%,
      rgba(189, 194, 0, 1) 100%);
}

.gris20 {
  background: #bebebe;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left,
      #cacaca,
      #d6d8d6);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left,
      #ebebeb,
      #d6d8d6);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.noir20 {
  background: #3f3f3f;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left,
      rgba(26, 26, 26, 1) 0%,
      #3f3f3f 100%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left,
      rgba(26, 26, 26, 1) 0%,
      #3f3f3f 100%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.orange {
  background: #ff9900;
  background: -webkit-linear-gradient(180deg,
      #e28801,
      #ff9900);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg,
      #e28801,
      #ff9900);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.jaunefbf {
  background: #fbff00;
  background: -webkit-linear-gradient(180deg,
      #e2d84c,
      #fbff00);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg,
      #e2d84c,
      #fbff00);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.vert66 {
  background: #66ff00;
  background: -webkit-linear-gradient(180deg,
      #05e618,
      #66ff00);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg,
      #05e618,
      #66ff00);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.gris242 {
  background: rgb(242, 246, 248);
  background: -webkit-linear-gradient(to bottom, rgba(242, 246, 248, 1) 0%, rgba(216, 225, 231, 1) 50%, rgba(181, 198, 208, 1) 51%, rgba(224, 239, 249, 1) 100%);
  background: linear-gradient(to bottom, rgba(242, 246, 248, 1) 0%, rgba(216, 225, 231, 1) 50%, rgba(181, 198, 208, 1) 51%, rgba(224, 239, 249, 1) 100%);
}

.orange252 {
  background: -webkit-linear-gradient(top, rgba(252, 234, 187, 1) 0%, rgba(252, 205, 77, 1) 50%, rgba(248, 181, 0, 1) 51%, #e28801 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(252, 234, 187, 1) 0%, rgba(252, 205, 77, 1) 50%, rgba(248, 181, 0, 1) 51%, #e28801 100%);
}

.bg-opacity-50 {
  background-color: rgba(255, 255, 255, 0.5);
}

.bg-opacity-25 {
  background-color: rgba(255, 255, 255, 0.25);
} 

.bg-opacity-10 {
  background-color: rgba(255, 255, 255, 0.1);
} 

.bg-opacity-5 {
  background-color: rgba(255, 255, 255, 0.05);
}

.bg-opacity-0 {
  background-color: rgba(255, 255, 255, 0);
} 

.circle-blue {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(45deg, #1e90ff, #00bfff);
  box-shadow: 0 0 15px rgba(30, 144, 255, 0.5);
}

.circle-purple {
  width: 100px; 
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(45deg, #9932cc, #ba55d3);
  box-shadow: 0 0 15px rgba(153, 50, 204, 0.5);
}

.circle-pink {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(45deg, #ff69b4, #ff1493);
  box-shadow: 0 0 15px rgba(255, 105, 180, 0.5);
}

.circle-green {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(45deg, #32cd32, #98fb98);
  box-shadow: 0 0 15px rgba(50, 205, 50, 0.5);
}

.circle-orange {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(45deg, #ffa500, #ff8c00);
  box-shadow: 0 0 15px rgba(255, 165, 0, 0.5);
}

.carousel {
  border-radius: 10px;
}

.carousel-item {
  transition: transform 0.6s ease-in-out;
}


.carousel-item-next,
.carousel-item-prev {
  transform: translateX(0);
}

.carousel-item-next {
  transform: translateX(100%);
}

.carousel-item-prev {
  transform: translateX(-100%);
}