/*
  Theme Name: glosscar
  Theme URI: https://glosscar.be/
  Version: 1.0.0
  Template: Divi
  Author: designer@arpeggio.be
  Author URI: https://www.arpeggio.be/fr
  Description: designed with flow by Arpeggio
  Text Domain: glosscar
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/




/* ---------------------
   DIVERS 
---------------------- */

/* Header-slider */
.et-pb-controllers {
    position: absolute;
    right: 20px;
    bottom: 5%;
    transform: translateY(-50%);
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end;
    gap: 8px;
    z-index: 10;
    background: none !important;
    padding: 0;
}

.et-pb-controllers a {
  display: block !important;
  float: none !important;
  margin: 0 !important;
}

/* Glass effect */
.glass-blurb {
  background: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 16px !important;
}

.glass-blurb-dark {
  background: rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: blur(36px) !important;
  -webkit-backdrop-filter: blur(36px) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 8px !important;
}

.glass-blurb-yellow {
  background: rgba(237, 176, 43, 0.22) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(237, 176, 43, 0.45) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20),
              0 4px 32px rgba(237, 176, 43, 0.12) !important;
}

.glass-blurb-yellow-grain {
  position: relative !important;
  background: rgba(237, 176, 43, 0.15) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(237, 176, 43, 0.30) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20),
              0 4px 32px rgba(237, 176, 43, 0.12) !important;
  overflow: hidden !important;
}

.glass-blurb-yellow-grain::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 16px !important;
  opacity: 0.06 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  background-size: 160px 160px !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.glass-blurb-yellow-grain .et_pb_blurb_content {
  position: relative !important;
  z-index: 1 !important;
}



/* =========================================
   ARP — Hotspot ↔ Blurb : highlight bidirectionnel
   ========================================= */

/* Désactive les tooltips */
.dipi-tooltip-wrap {
  display: none !important;
}

/* Transitions fluides sur blurbs et hotspots */
.et_pb_blurb,
.dipi_image_hotspot_child {
  transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Blurb estompé + flouté */
.blurb-dimmed {
  opacity: 0.25;
  filter: blur(3px);
}

.et_pb_blurb,
.dipi_image_hotspot_child {
  transition: opacity 0.3s ease, filter 0.3s ease, box-shadow 0.5s ease;
}
/* Blurb actif */
.blurb-active {
  opacity: 1 !important;
  filter: blur(0) !important;
  box-shadow: 0 0 30px 8px rgba(255, 200, 0, 0.25) !important;
}

/* Hotspot estompé */
.hotspot-dimmed {
  opacity: 0.25;
  filter: blur(2px);
}

/* Hotspot actif */
.hotspot-active {
  opacity: 1 !important;
  filter: blur(0) !important;
}


/* =========================================
   ARP — Scroll Reveal Text
   Usage : ajouter .arp-scroll-reveal sur le module
   Variantes : .arp-scroll-reveal--blur | --color | (défaut = fade)
   ========================================= */

.arp-word {
  display: inline-block;
  transition: opacity 0.5s ease, filter 0.5s ease, color 0.5s ease;
  will-change: opacity, filter, color;
}

/* --- FADE (défaut) --- */
.arp-word--fade {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.arp-word--fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- BLUR --- */
.arp-word--blur {
  opacity: 0.2;
  filter: blur(6px);
}
.arp-word--blur.is-visible {
  opacity: 1;
  filter: blur(0);
}

/* --- COLOR FILL (gris → couleur) --- */
.arp-word--color {
  color: #aaaaaa;
}
.arp-word--color.is-visible {
  color: inherit; /* récupère la couleur du parent = celle définie dans Divi */
}


/* Dégradé de fond : noir vers gris anthracite animé */
body {
  min-height: 100vh;
  background: linear-gradient(
    135deg,
    #0a0a0a,
    #111111,
    #1c1c1c,
    #2a2a2a,
    #1a1a1a,
    #0d0d0d
  );
  background-size: 400% 400%;
  animation: gradientShift 16s ease infinite;
  position: relative;
}

/* Spot lumineux or/jaune qui suit la souris */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    /* rgba(212, 175, 55, 0.20) 0%,
    rgba(180, 140, 20, 0.12) 35%,
    rgba(255, 200, 50, 0.05) 60%,*/
	rgba(212, 175, 55, 0.30) 0%,
    rgba(180, 140, 20, 0.22) 35%,
    rgba(255, 200, 50, 0.05) 60%,
    transparent 75%
  );
  transition: background 0.08s ease;
}

/* Contenu Divi au-dessus du dégradé */
body > *,
#page-container,
.et_pb_section,
#et-main-area,
header#main-header {
  position: relative;
  z-index: 2;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

#page-container,
.et_pb_section,
.et-db,
#et-main-area,
header#main-header {
  position: relative;
  z-index: 2;
}

/* Rendre toutes les sections/lignes/colonnes Divi transparentes */
.et_pb_section,
.et-l,
#page-container,
#main-content,
.et_pb_section.et_pb_fullwidth_section {
  background-color: transparent !important;
  background-image: none !important;
}

/* Le header aussi si nécessaire */
header#main-header,
#et-main-area {
  background-color: transparent !important;
}


/* Champs texte, email, textarea */
#gform_1 input[type="text"],
#gform_1 input[type="email"],
#gform_1 textarea {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #000 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #000 !important;
  padding-left: 0 !important;
  outline: none !important;
}

/* Focus */
#gform_1 input[type="text"]:focus,
#gform_1 input[type="email"]:focus,
#gform_1 textarea:focus {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 1px solid #000 !important;
}