/*
 Theme Name:   Fautras
 Theme URI:
 Description:  child theme
 Author:       Understüd
 Author URI:
 Template:     bricks
 Version:
 Text Domain:
*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Raleway:wght@400;700&display=swap");

/* =============================
   VARIABLES CSS
   ============================= */
:root {
  /* Couleurs */
  --color-primary: #b29450;
  --color-primary-hover: #a08440;
  --color-white: #fff;
  --color-black: #000;
  --color-gray-dark: #363636;
  --color-gray: #444;
  --color-gray-light: #ccc;
  --color-gray-light-2: #fafafa;
  --color-gray-dark-2: #1f1f1f;

  /* Couleurs semi-transparentes */
  --color-overlay-60: rgba(0, 0, 0, 0.6);
  --color-overlay-70: rgba(0, 0, 0, 0.7);
  --color-overlay-80: rgba(0, 0, 0, 0.8);

  /* Espacements */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  --spacing-xxl: 40px;

  /* Tailles */
  --size-xs: 14px;
  --size-sm: 16px;
  --size-md: 20px;
  --size-lg: 36px;
  --size-xl: 42px;
  --size-xxl: 120px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.4s ease;
  --transition-bounce: cubic-bezier(0.4, 0, 0.2, 1);

  /* Ombres */
  --shadow-soft: rgba(0, 0, 0, 0.1);
}

/* =============================
   TABLE DES MATIÈRES
   =============================
   1. VARIABLES CSS
   2. GÉNÉRALITÉS & BASE
   3. TYPOGRAPHIE
   4. LAYOUT & STRUCTURE
   5. COMPOSANTS UI
   6. FORMULAIRES
   7. MESSAGES & RETOURS
   8. PLUGINS & INTÉGRATIONS
   9. RESPONSIVE DESIGN
   10. OVERLAYS & EFFETS VISUELS
   11. CURSEURS & INTERACTIONS
   12. ANIMATIONS & TRANSITIONS
   ============================= */

/* =============================
   1. GÉNÉRALITÉS & BASE
   ============================= */
#brx-content {
  overflow: hidden;
}

a:focus {
  outline: 0;
}

/* =============================
   2. TYPOGRAPHIE
   ============================= */
/* Typographie de base définie via les variables CSS dans la section 1 */

/* =============================
   3. LAYOUT & STRUCTURE
   ============================= */
.top-section {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  word-break: normal;
  word-wrap: normal;
  overflow-wrap: normal;
  -webkit-hyphens: normal;
  -moz-hyphens: normal;
  hyphens: normal;
}

.menu-item {
  /* line-height: 1.2 !important;
  padding-top: 3px !important; */
}

.top-section:hover + .bottom-menu,
.bottom-menu:hover {
  display: inline-block;
}

.bottom-menu {
  position: absolute;
  display: none;
  z-index: 998;
}

.vans-link {
  border-top: 1px solid #363636;
}

.sub-menu {
  width: 220px;
  line-height: 42px !important;
}

#brxe-knlovz,
.brxe-shortcode {
  overflow: visible !important;
  /* position: relative; */
}

#brxe-jpmjru {
  z-index: 998 !important;
}

.van-view-content {
  color: #fff;
  line-height: 1em;
}

.vans-bottom {
  font-size: 120px !important;
}

.cloudimage-360-inner-box {
  background-color: var(--color-gray-light-2);
}

/* =============================
   4. COMPOSANTS UI
   ============================= */
.option-button {
  display: block;
  margin-top: var(--spacing-sm);
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  padding: var(--spacing-sm);
  cursor: pointer;
}

.option-button.selected {
  background-color: var(--color-gray);
}

.submit-button {
  margin-top: var(--spacing-lg);
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  padding: var(--spacing-md);
  cursor: pointer;
  width: 100%;
  font-size: var(--size-sm);
}

/* Liens, boutons, éléments cliquables */
a,
button,
.paid-options-header,
.standard-option-title,
.color-item,
.remove-option,
.info-button,
.quote-button,
[role="button"],
.clickable {
    cursor: pointer !important;
}

button:disabled,
select:disabled,
.disabled {
    cursor: not-allowed !important;
}

.infos-close {
  position: absolute;
  color: var(--color-white);
  margin-top: var(--spacing-xxl);
  right: 45px;
  cursor: pointer;
  width: var(--spacing-xxl);
  height: var(--spacing-xxl);
  font-size: var(--size-xs);
  background: var(--color-overlay-60);
  border-radius: 50%;
  transition: background-color var(--transition-normal), transform var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
}

.infos-close:hover {
  background: var(--color-overlay-80);
  transform: scale(1.1);
}

/* Accordéons et menus dans la section Composants UI */
#brxe-fuxmll .accordion-content-wrapper {
  padding-top: 0px !important;
}

/* Options et sélections dans la section Composants UI */
.option-info {
  display: flex;
  flex-direction: column;
}

#selected-options {
  margin-top: 20px;
}

.option {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-top: 1px solid #ccc;
}

.color-option.selected {
  border: 2px solid #333;
}

#color-palette {
  top: 158px !important;
  right: -200px;
  /* min-height: 224px !important; */
  transition: right 0.4s ease-out;
  /* Accélération matérielle pour des animations plus fluides */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

#color-palette.open {
  right: -5px !important;
}

.custom-div {
  display: none;
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #fff;
  padding: 10px 20px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
}

.custom-div.visible {
  display: block;
}

/* =============================
   5. OVERLAYS, MODALES & INFOS
   ============================= */
#info {
  display: none;
  position: absolute;
  color: #fff;
  bottom: 40px;
  right: 40px;
  z-index: 99999;
}

#infos {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-overlay-80);
  transform: translateY(100%);
  transition: transform var(--transition-slow) ease-in-out, opacity var(--transition-normal) ease-in-out, visibility 0s linear var(--transition-slow);
  opacity: 0;
  visibility: hidden;
  z-index: 999;
}

#infos.show {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform var(--transition-slow) ease-in-out, opacity var(--transition-normal) ease-in-out;
}

#infos.hiding {
  transform: translateY(-100%);
  opacity: 0;
}

#infos h2 {
  color: #b29450;
  text-align: center;
  margin-bottom: 12px !important;
}

.infos-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-xxl);
  width: 100%;
  box-sizing: border-box;
}

.van-description {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0;
  color: var(--color-white);
  line-height: 1.6;
}

.van-description .description-content {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.van-description p {
  margin-bottom: 1rem;
}

.van-description h2,
.van-description .van-title {
  color: #b29450;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .infos-container {
    padding: var(--spacing-lg);
    max-width: 100%;
  }

  .van-description {
    padding: 0;
    width: 100%;
  }

  .van-description .description-content {
    width: 100%;
    padding: 0;
  }
}

@media (max-width: 480px) {
  .infos-container {
    padding: var(--spacing-md);
  }

  .van-description {
    font-size: 0.95em;
  }
}

#van-info-container {
  position: absolute;
  width: 100%;
  bottom: 40px;
  padding-left: 40px;
  padding-right: 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
  transform: translateY(10px);
  z-index: 99999;
}

#van-info-container.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#van-info-container h3 {
  color: #fff;
  font-size: 36px;
}

@media (max-width: 768px) {
  #van-info-container {
    bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* =============================
   6. FORMULAIRES
   ============================= */
form {
  margin-top: 20px;
}

form div {
  margin-bottom: 5px;
}

form label {
  display: block;
  margin-bottom: 5px;
}

form input[type="text"],
form input[type="email"],
form input[type="tel"] {
  width: 100%;
  padding: 4px;
  border: 1px solid black;
  font-family: "Raleway", sans-serif;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="tel"]:focus {
  border-color: #b29450;
  outline: none;
}

form button[type="submit"] {
  padding: 10px 20px;
  background-color: black;
  color: white;
  border: none;
  cursor: pointer;
  font-family: "Raleway", sans-serif;
  transition: background-color 0.3s;
}

form button[type="submit"]:hover {
  background-color: var(--color-primary);
}

.input-xlarge {
  background-color: #b29450 !important;
  border-radius: 0px !important;
  height: 36px !important;
}

/* =============================
   7. MESSAGES & RETOURS
   ============================= */
.success-message {
  color: green;
  font-size: 1.5em;
  font-weight: bold;
  text-align: left;
}

.additional-message {
  color: #1f1f1f;
  font-family: "Raleway", sans-serif;
  font-size: 1.2em;
  text-align: left;
  margin-top: 10px;
}

/* =============================
   8. PLUGINS & INTÉGRATIONS
   ============================= */
#options-financement .brxe-heading {
  font-weight: 700 !important;
  font-size: 32px !important;
  padding-bottom: 10px !important;
  word-break: normal;
  word-wrap: normal;
  overflow-wrap: normal;
  -webkit-hyphens: normal;
  -moz-hyphens: normal;
  -ms-hyphens: normal;
  hyphens: normal;
}

#options-financement .brxe-block {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

#options-financement {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  background-color: #cccccc !important;
}

.brxe-heading {
  font-weight: 700 !important;
  font-size: 36px !important;
  padding-bottom: 0px !important;
  word-break: normal;
  word-wrap: normal;
  overflow-wrap: normal;
  -webkit-hyphens: normal;
  -moz-hyphens: normal;
}

.block_text {
  color: #fafafa;
  font-size: 14px;
  line-height: 1.5;
  font-family: "Raleway", sans-serif;
  font-weight: 400;
}

.wpbc_container_booking_form .wpbc_booking_form_simple .wpbc__field label {
  font-family: "Raleway", sans-serif !important;
  font-weight: 700 !important;
  color: #fafafa !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.wpsl-gmap-canvas {
  margin-bottom: 0px !important;
}

#brxe-aqnger > .tab-content {
  padding-top: 0px !important;
  padding-right: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 0px !important;
  border: 0px !important;
}

/* WPForms */
.wpforms-field-label {
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  color: var(--color-gray-light-2);
  font-size: var(--size-xs);
  line-height: 1;
}

.wpforms-field-sublabel {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  color: var(--color-gray-light-2);
  font-size: var(--size-xs);
  line-height: 1;
}

.wpforms-field-label-inline {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  color: var(--color-gray-light-2);
  font-size: var(--size-xs);
  line-height: 1.4;
}

/* Fix: champs WPForms invisibles (texte blanc sur fond blanc) */
div.wpforms-container-full .wpforms-form input,
div.wpforms-container-full .wpforms-form textarea,
div.wpforms-container-full .wpforms-form select,
div.wpforms-container .wpforms-form input,
div.wpforms-container .wpforms-form textarea,
div.wpforms-container .wpforms-form select {
  color: #111 !important;
}

div.wpforms-container-full .wpforms-form input::placeholder,
div.wpforms-container-full .wpforms-form textarea::placeholder,
div.wpforms-container .wpforms-form input::placeholder,
div.wpforms-container .wpforms-form textarea::placeholder {
  color: #666 !important;
}

.wpforms-submit {
  background-color: var(--color-primary);
  color: var(--color-gray-light-2);
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: var(--size-xs);
  line-height: 1;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: 0;
  border: 0;
  cursor: pointer;
  transition: background-color var(--transition-normal);
}

.wpforms-submit:hover {
  background-color: #b29450 !important;
}

/* =============================
   9. RESPONSIVE DESIGN
   ============================= */
@media (max-width: 768px) {
  #van-info-container {
    bottom: var(--spacing-xl);
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
  }

  #top-retour-infos .brxe-text-basic {
    display: none;
  }
}

/* =============================
   10. OVERLAYS & EFFETS VISUELS
   ============================= */

/* Overlay sombre en haut pour améliorer la lisibilité du texte blanc */
#affichage-diaporama::before {
  content: '';
  position: absolute;
  top: 46px;
  left: 0;
  width: 100%;
  height: var(--size-xxl);
  background: linear-gradient(to bottom, var(--color-overlay-60), transparent);
  pointer-events: none;
  z-index: 9;
}

/* Overlay sombre en bas (optionnel) */
/* #affichage-diaporama::after {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 0;
  width: 100%;
  height: 80px; 
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
  pointer-events: none;
  z-index: 1;
} */

/* Overlay pour les autres conteneurs d'images/sliders Bricks */
.image-overlay-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--size-xxl);
  background: linear-gradient(to bottom, var(--color-overlay-60), transparent);
  pointer-events: none;
  z-index: 1;
}

/* Classes utilitaires pour appliquer manuellement l'overlay */
.van-slider-overlay::before,
.trailer-slider-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--size-xxl);
  background: linear-gradient(to bottom, var(--color-overlay-60), transparent);
  pointer-events: none;
  z-index: 2;
}

#details1 {
  height: 80px !important;
}

/* =============================
   11. CURSEURS & INTERACTIONS
   ============================= */
/* Règles consolidées pour les curseurs - approche simplifiée */
.interactive-element,
a,
button,
[role="button"],
[onclick],
[data-interactions],
[data-interaction-id],
.brxe-button,
.brxe-social-icons li a,
.top-section,
.brxe-div a.brxe-block,
.brxe-block[href],
.tab-title,
.tabs .tab,
[role="tab"] {
    cursor: pointer;
    transition: var(--transition-normal);
}

/* Transitions optimisées pour les éléments interactifs */
.interactive-element,
.brxe-button,
.brxe-social-icons li a,
.top-section,
.brxe-div a.brxe-block,
.tab-title,
.tabs .tab,
[role="tab"] {
    transition: transform var(--transition-normal), opacity var(--transition-normal);
}

.interactive-element:hover,
a:hover,
button:hover,
[role="button"]:hover,
.brxe-button:hover,
.brxe-social-icons li a:hover,
.top-section:hover,
.brxe-div a.brxe-block:hover,
.tab-title:hover,
.tabs .tab:hover,
[role="tab"]:hover {
    transform: translateY(-1px);
}

/* Éléments enfants des éléments interactifs */
.interactive-element *,
a *,
button *,
[role="button"] *,
[onclick] *,
[data-interactions] *,
[data-interaction-id] *,
.brxe-button *,
.brxe-social-icons li a *,
.top-section *,
.brxe-div a.brxe-block *,
.tab-title *,
.tabs .tab *,
[role="tab"] * {
    cursor: pointer;
    pointer-events: auto;
}

/* Icônes spécifiquement */
.ti-calendar,
.ti-*,
.brxe-social-icons .fab,
.brxe-social-icons .fas,
.brxe-social-icons .far,
.brxe-social-icons .fal,
.brxe-social-icons svg {
    cursor: pointer;
    pointer-events: auto;
    transition: var(--transition-normal);
}

.ti-calendar:hover,
.ti-*:hover {
    transform: translateY(-1px);
}

/* =============================
   12. ANIMATIONS & TRANSITIONS
   ============================= */
/* Classe utilitaire pour désactiver les effets hover si nécessaire */
.no-hover-effect:hover {
    transform: none !important;
}

/* Classe pour forcer l'effet hover sur des éléments spécifiques */
.force-hover-effect {
    transition: var(--transition-normal) !important;
}

.force-hover-effect:hover {
    transform: translateY(-1px) !important;
}

/* =============================
   13. GTRANSLATE
   ============================= */

.gtranslate_wrapper {
  text-align: right;
  padding-right: 40px;
}

a.glink {
  color:#fff;
}

.gt_white_content {
  background-color: #000 !important;
}

.gt_white_content a {
  color:#fff;
}

.gt_white_content a:hover {
  color:#b29450;
}