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



@font-face {
  font-family: 'Original Surfer';
  src: url(/fonts/OriginalSurfer-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@layer components {
  /* Flip card helpers */
  .flip-card {
    perspective: 1000px;
  }
  .flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
  }
  .flip-card:hover .flip-inner {
    transform: rotateY(180deg);
  }
  .flip-front,
  .flip-back {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
  }
  .flip-back {
    transform: rotateY(180deg);
  }
}

@layer utilities {
  .bg-main-bg {
    background-color: #F1EAE3;
  }
  .text-main {
    color: #003049;
  }

  .text-main-bg {
    color: #F1EAE3;
  }

  .border-main-bg {
    border-color: #F1EAE3;
  }
  .text-gradient-biscou {
    @apply bg-gradient-to-r from-[#212121] via-[#FF8106] to-[#FDB52D] bg-clip-text text-transparent;
  }
}

/* Styles mobile pour la section testimonials */
@media (max-width: 1023px) {
  /* Centre la colonne du widget en mobile */
  .testimonials-widget-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Centre et retire le margin-bottom du texte en mobile */
  .testimonials-widget-text {
    margin-bottom: 0 !important;
    text-align: center !important;
  }

  /* Retire le padding et centre le widget en mobile */
  .testimonials-widget-container {
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Applique scale 0.8 au widget TripAdvisor en mobile */
  #TA_selfserveprop302 {
    transform: scale(0.8);
    transform-origin: center;
  }

  /* Cache l'image panoramique en mobile pour réduire l'espace */
  .testimonials-image-column {
    display: none !important;
  }
}
/*
 * 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.
 *


 */

.bg-main-bg {
  background-color: #F1EAE3;
}

@font-face {
  font-family: 'Original Surfer';
  src: url(/fonts/OriginalSurfer-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ArsenalSC';
  src: url(/fonts/ArsenalSC-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ArsenalBold';
  src: url(/fonts/ArsenalSC-Bold.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url(/fonts/Poppins-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Trade Gothic LT Std';
  src: url(/fonts/trade-gothic-lt-std-58a78e64434a9.otf) format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bebas Neue';
  src: url(/fonts/BebasNeue-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url(/fonts/Inter-VariableFont_opsz,wght.ttf) format('truetype');
  font-weight: 100 900; /* variable */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url(/fonts/Montserrat-VariableFont_wght.ttf) format('truetype');
  font-weight: 100 900; /* variable */
  font-style: normal;
  font-display: swap;
}
/* Police pour les titres - Bebas Neue en majuscules */
.font-bebas {
  font-family: 'Bebas Neue', sans-serif;
  text-transform: uppercase;
}

/* Police pour les sous-titres - Montserrat en majuscules avec espacement */
.font-montserrat {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Police pour le corps de texte - Inter */
.font-inter {
  font-family: 'Inter', sans-serif;
}

/* Classes héritées pour compatibilité - rediriger vers les nouvelles polices */
.font-arsenal,
.font-arsenalBold {
  font-family: 'Bebas Neue', sans-serif;
  text-transform: uppercase;
}

.font-poppins {
  font-family: 'Inter', sans-serif;
}

.font-tradegothic {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.font-surfer {
  font-family: 'Bebas Neue', sans-serif;
  text-transform: uppercase;
}
.bg-logo-gradient {
  background: linear-gradient(to right, #212121 0%, #FF8106 52%, #FDB52D 100%);
}

.text-logo-gradient {
  background: linear-gradient(to right, #212121 0%, #FF8106 52%, #FDB52D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.green-gradient {
  color: #1E4B5C;
}