/*
Theme Name: Meteor
Theme URI: 
Author: 
Author URI: 
Description: 
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: meteor
Tags: 
*/

/* ---------------------------------------- CSS MOBILE ---------------------------------------- */
header {
  width: 100%;
}

.header-color {
  background-color: rgba(46, 46, 45, 1);
  border-color: rgba(46, 46, 45, 1) !important;
  transition: all 0.3s ease-in-out;
}

/* Popup menu */
#gspb_row-id-gsbp-a0a6ec3>.gspb_row__content {
  overflow: hidden;
}


/* -------------------- SECTION HERO -------------------- */

.hero {
  overflow: hidden;
}

.hero-video {
  width: 350vw;
}

/* -------------------- SECTION EVENTS -------------------- */

/* Changer l'image lorsque l'accordéon 1 est ouvert */
/* #gspb_accordionitem-gsbp-ec811ef.gsopen ~ #gspb_image-id-gspb-B0Bliad {
  background-image: url('https://lemeteor-marseille.fr/wp-content/uploads/2025/10/SliderMETEORMarseille10.webp');
} */

/* Colonne d’images en pile */
.image-stack {
  position: relative;
  /* conteneur */
  overflow: hidden;
}

/* Chaque image superposée */
.image-stack .stacked-image {
  position: absolute;
  inset: 0;
  /* top/right/bottom/left: 0 */
  opacity: 0;
  z-index: 0;
  transition: opacity .35s ease;
  /* fondu doux */
  pointer-events: none;
  /* évite les clics sur les images masquées */
}

/* Image visible */
.image-stack .stacked-image.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

/* -------------------- SECTION PRIVATISATION -------------------- */

.form-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 20px;
  color: var(--wp--preset--color--custom-blue);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-container p {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0px;
}


.form-container h3 {
  margin: 0px;
  margin-top: 10px;
}

.form-container input,
.form-container select,
.form-container textarea {
  border: 1px solid var(--wp--preset--color--custom-gold);
  line-height: 25px;
}


.bookingshake-form textarea {
  resize: vertical; /* uniquement en hauteur */
}

.form-btn {
  background-color: var(--wp--preset--color--custom-blue);
  border-radius: 5px;
  border: 1px solid var(--wp--preset--color--custom-blue);
  color: var(--wp--preset--color--custom-white);
  text-transform: uppercase;
  padding: 10px;
  width: fit-content;
  transition: all 0.2s ease-in-out;
}


.form-btn:hover {
  background-color: var(--wp--preset--color--custom-white);
  border: 1px solid var(--wp--preset--color--custom-blue);
  color: var(--wp--preset--color--custom-blue);
  cursor: pointer;
}

.field-error {
  color: #c0392b;
  font-size: 0.85rem;
  margin-top: 4px;
  display: block;
}


input.error,
select.error,
textarea.error {
  border-color: #c0392b !important;
  background: #fff5f5;
}




/* -------------------- SECTION GIF CATCHPHRASES -------------------- */


/* 1/3 du cycle visible, puis invisible le reste */
@keyframes gifSwap3 {

  0%,
  30% {
    opacity: 1;
  }

  /* visible ~3s si durée totale = 9s */
  33.333%,
  100% {
    opacity: 0;
  }
}

/* Applique l'animation aux 3 blocs, avec décalage */
.gif-content-1 {
  opacity: 0;
  animation: gifSwap3 6s infinite ease-in-out;
}

.gif-content-2 {
  opacity: 0;
  animation: gifSwap3 6s infinite ease-in-out;
  animation-delay: 2s;
  /* commence après 1er tiers */
}

.gif-content-3 {
  opacity: 0;
  animation: gifSwap3 6s infinite ease-in-out;
  animation-delay: 4s;
  /* commence après 2e tiers */
}

/* Optionnel : un petit fondu plus doux */
.gif-content-1,
.gif-content-2,
.gif-content-3 {
  transition: opacity .25s linear;
}


/* Révélation une fois, puis reste visible tant que le bloc l’est */
@keyframes clipRightHold {
  0% {
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
  }

  10% {
    clip-path: inset(0 0 0 0);
    /* complètement révélé */
    -webkit-clip-path: inset(0 0 0 0);
  }

  100% {
    clip-path: inset(0 0 0 0);
    /* reste visible, aucun fade-out */
    -webkit-clip-path: inset(0 0 0 0);
  }
}

/* Base texte + état initial pour éviter le “flash” */
.gif-text {
  display: inline-block;
  will-change: clip-path;
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  animation-fill-mode: both;
  /* garde l’état de fin (visible) */
}

/* Synchronisation avec les blocs (même cycle / mêmes décalages) */
.gif-content-1 .gif-text {
  animation: clipRightHold 6s infinite linear;
}

.gif-content-2 .gif-text {
  animation: clipRightHold 6s infinite linear;
  animation-delay: 2s;
}

.gif-content-3 .gif-text {
  animation: clipRightHold 6s infinite linear;
  animation-delay: 4s;
}


/* Le mot ciblé */
.clip-word {
  position: relative;
  display: inline-block;
  z-index: -1;
  /* le pseudo-élément passera derrière le texte */
  padding: 0px 5px 0px 3px;
  margin-left: 5px;

}

/* Le fond coloré en forme SVG qui se “déroule” de gauche à droite */
.clip-word::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* sous le texte */
  inset: -0.1em -0.35em -0.1em -0.25em;
  /* gauche/droite ajustés */
  background: var(--wp--preset--color--custom-gold);
  /* ta couleur de surlignage */
  clip-path: url(#clip-word-shape);
  -webkit-clip-path: url(#clip-word-shape);
  transform: scaleX(0);
  transform-origin: left center;
  animation: sweepReveal 0.6s ease-out forwards;
  /* durée du “clip right” */
}


/* Animation : déroule de gauche → droite */
@keyframes sweepReveal {
  to {
    transform: scaleX(1);
  }
}


/* -------------------- SECTION INSTAGRAM -------------------- */

/* Conteneur du feed General */
#sb_instagram {
  overflow: hidden;
}


/* Animation de défilement */
@keyframes scrollLeft {
  0% {
    transform: translateX(0);
    /* Début de la position */
  }

  100% {
    transform: translateX(-50%);
    /* Défilement complet */
  }
}

/* Conteneur des images */
#sb_instagram #sbi_images {
  display: flex;
  overflow: hidden;
  width: 500%;
  animation: scrollLeft 30s linear infinite;
}

#sb_instagram #sbi_images .sbi_item {
  display: contents !important;
}

/* Images radius */
#sb_instagram #sbi_load .sbi_load_btn,
#sb_instagram .sbi_photo_wrap {
  border-radius: 5px;
  overflow: hidden;
}

/* Images height */
.sbi_photo {
  height: unset !important;
}

#sb_instagram {
  padding: 0px !important;
}


/* -------------------- FOOTER -------------------- */

/* Formulaire Newsletter */
form#sib_signup_form_1 {
  padding: 0px !important;
  margin-top: -50%;
}

/* ---------------------------------------- CSS DESKTOP ---------------------------------------- */

@media screen and (min-width:1024px) {
  header {
    width: 87vw;
  }


  /* -------------------- SECTION HERO -------------------- */

  .hero-video {
    width: 135vw;

  }

  /* -------------------- SECTION PRIVATISATION -------------------- */

  .form-row {
    flex-direction: row;

  }


  /* -------------------- SECTION INSTAGRAM -------------------- */


  /* Conteneur des images */
  #sb_instagram #sbi_images {
    width: 350%;
  }

}

/* ---------------------------------------- CSS LARGE DESKTOP ---------------------------------------- */

@media screen and (min-width:1441px) {

  /* ------------------- GENERAL ------------------- */

  /* largeur colonne centrale */

  .gspb_row__content {
    max-width: 1300px !important;
  }

  .hero .gspb_row__content {
    max-width: unset !important;

  }

  /* -------------------- SECTION INSTAGRAM -------------------- */

}