@tailwind base;
@tailwind components;
@tailwind utilities;

@keyframes flipRight {
  0% {
    transform: perspective(1000px) rotateY(-90deg);
    opacity: 0;
  }
  100% {
    transform: perspective(1000px) rotateY(0);
    opacity: 1;
  }
}

@keyframes flipLeft {
  0% {
    transform: perspective(1000px) rotateY(90deg);
    opacity: 0;
  }
  100% {
    transform: perspective(1000px) rotateY(0);
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes slideUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideRight {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideLeft {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@layer components {
  /* Animations */
  .slide-left {
    transition: transform 0.6s, opacity 0.6s;
    opacity: 0;
    transform: translateX(100%);
  }
  .show-slide-left {
    animation: slideLeft 0.6s forwards;
  }
  .slide-right {
    transition: transform 0.6s, opacity 0.6s;
    opacity: 0;
    transform: translateX(-100%);
  }
  .show-slide-right {
    animation: slideRight 0.6s forwards;
  }
  .slide-up {
    transition: transform 0.6s, opacity 0.6s;
    opacity: 0;
    transform: translateY(100%);
  }
  .show-slide-up {
    animation: slideUp 0.6s forwards;
  }
  .zoom-in {
    transition: transform 0.6s, opacity 0.6s;
    opacity: 0;
    transform: scale(0.5);
  }
  .show-zoom-in {
    animation: zoomIn 0.6s forwards;
  }
  .flip-right {
    transform-style: preserve-3d;
    transition: transform 0.6s, opacity 0.6s;
    opacity: 0;
  }
  .show-flip-right {
    animation: flipRight 0.6s forwards;
  }
  .flip-left {
    transform-style: preserve-3d;
    transition: transform 0.6s, opacity 0.6s;
    opacity: 0;
  }
  .show-flip-left {
    animation: flipLeft 0.6s forwards;
  }
  /* Custom placeholder styles */
  ::placeholder {
    position: relative;
    top: 50%; /* Adjust as needed */
    transform: translateY(50%);
    color: #1D4143; /* Adjust the color to match your theme */
  }
  input::placeholder, textarea::placeholder {
    @apply text-green-custom outline-none ring-0 border-transparent;
  }

  /* Custom styles to remove border color on focus */
  input:focus, textarea:focus {
    @apply outline-none ring-0 border-transparent;
  }

  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
  .btn {
    @apply hover:bg-green-custom hover:border-green-custom transition duration-300 hover:scale-110 hover:text-terre;
  }
  .type-list {
    @apply border-2 border-solid border-white text-white text-lg md:text-2xl py-1 md:py-2 px-2 md:px-8 my-2 md:my-0;
  }
  .ref-img {
    @apply w-[95%] md:w-[80%];
  }
  .active-opacity {
    @apply opacity-60;
  }

  /* Header */
  .transparent-header {
    @apply bg-transparent transition-colors duration-300;
  }

  /* Icones */
  .icon {
    @apply h-[40px] md:h-[60px] lg:h-[100px];
  }
  /* Carousel */
  .carousel-container {
    @apply w-full overflow-hidden relative select-none;
  }
  
  .carousel-slide {
    @apply flex transition-transform duration-500 ease-in-out;
  }
  
  .carousel-image {
    @apply min-w-[360px] md:min-w-[920px] transition-transform duration-500 ease-in-out select-none mx-[2px] md:mx-[25px] active:cursor-grabbing hover:cursor-grab;
  }
  
  .axio-carousel-image {
    @apply min-w-[360px] md:min-w-[660px] pb-[18px] md:pb-[40px] transition-transform duration-500 ease-in-out select-none mx-[2px] md:mx-[25px] active:cursor-grabbing hover:cursor-grab;
  }
  
  .carousel-button {
    @apply absolute top-1/2 transform -translate-y-1/2 bg-transparent border-none cursor-pointer;
  }
  
  .carousel-button img {
    @apply w-[30px] h-auto;
  }
  
  .carousel-background {
    @apply absolute top-[35%] md:top-[55%] left-0 w-full h-[80%] md:h-[45%] bg-terre z-[-1];
  }
  
  .carousel-background-ref {
    @apply absolute top-[33%] left-0 w-full h-[80%] md:h-[71%] bg-terre z-[-1];
  }
  
  .type-carousel-background {
    @apply absolute top-[40%] left-0 w-full h-full bg-green-custom z-[-1];
  }
  
  

  /* Divider */
  .divider {
    @apply w-[60%] h-[1px] bg-divider-gradient my-5;
  }

  /* Parallax */

  .parallax {
    @apply min-h-[255px] md:min-h-[500px] bg-fixed bg-center bg-no-repeat bg-cover;
  }
  .parallax-2 {
    @apply min-h-[255px] md:min-h-[500px] bg-fixed bg-center bg-no-repeat bg-cover;
  }
  @media (max-width: 960px) {
    .parallax {
      @apply bg-scroll;
    }
    .parallax-2 {
      @apply bg-scroll;
    }
  }

  /* Form */
  .form-field {
    @apply border-b-2 border-t-0 border-x-0 bg-bg-color mb-4 text-2xl w-full text-green-custom focus:outline-none appearance-none focus:border-b-2 focus:border-t-0 focus:border-x-0 focus:border-b-green-custom focus:ring-transparent;
  }
}



h1 {
  @apply text-4xl md:text-5xl;
}
h2 {
  @apply text-4xl md:text-5xl text-center mb-10 md:mb-20;
}
h3 {
  @apply text-center mt-2 md:mt-10 text-sm md:text-xl;
}
h4 {
  @apply text-base md:text-xl;
}
p {
  @apply text-justify mx-8 md:mx-20 lg:mx-44 text-base md:text-xl;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

 @font-face {
  font-family: 'Butler_Regular';
  src: url(/assets/Butler_Regular-3f52d7a5832d3117ef5d910a3504963ad8c4dce54a2ce33981ca780f236ae5b7.otf) format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* CSS pour le header */
.fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgba(29, 65, 67, 0.8); /* Changez cette couleur selon vos besoins */
  transition: background-color 0.3s;
  z-index: 50;
}
.hero {
  background-image: url(/assets/hero-img-bis-2a62e5e1cc97d5dac3ee06c4c2c4e36c80dcc18ba47eef7e03b3a5a43857521b.jpg);
}

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.5s ease-out, transform 1.5s ease-out; /* Augmenter la durée ici */
}

.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}


/* Sweep animation */

.text-up span {
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}

.text-up span.visible {
  transform: translateY(0);
  opacity: 1 !important;
}