/*
 * FYLM — Design Professionnel
 * Films PDLC Intelligents | fylm-smartglass.be
 * Palette : Bleu verre (#00B4D8) + Blanc + Noir charbon
 * Chargé en dernière position pour surcharger Elementor
 */

/* =============================================
   1. VARIABLES DE COULEUR — OVERRIDE ELEMENTOR
   ============================================= */

:root,
.elementor-kit-50 {
  /* Couleur principale : bleu verre/ciel (évoque transparence et technologie) */
  --e-global-color-accent:         #00B4D8;
  --e-global-color-twbb_accent_hover: rgba(0, 180, 216, 0.80);
  --e-global-color-twbb_link:      #00B4D8;
  --e-global-color-twbb_bg_1:      rgba(0, 180, 216, 0.10);
  --e-global-color-twbb_button:    #0A1628;

  /* Palette FYLM custom */
  --fylm-accent:        #00B4D8;
  --fylm-accent-dark:   #0096B8;
  --fylm-accent-light:  #48CAE4;
  --fylm-navy:          #0A1628;
  --fylm-text:          #1A2332;
  --fylm-gray:          #64748B;
  --fylm-bg-soft:       #F0F9FF;
  --fylm-border:        rgba(0, 180, 216, 0.18);
  --fylm-shadow:        0 4px 24px rgba(0, 180, 216, 0.12);
  --fylm-shadow-hover:  0 12px 40px rgba(0, 180, 216, 0.22);
  --fylm-radius:        12px;
  --fylm-radius-btn:    6px;
  --fylm-transition:    0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================
   2. BASE GLOBALE
   ============================================= */

html {
  scroll-behavior: smooth;
}

body {
  color: var(--fylm-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Liens */
.elementor-kit-50 a {
  color: var(--fylm-accent);
  transition: color var(--fylm-transition);
}

.elementor-kit-50 a:hover {
  color: var(--fylm-accent-dark);
}

/* Titres : espacement légèrement resserré pour un rendu premium */
.elementor-kit-50 h1,
.elementor-kit-50 h2,
.elementor-kit-50 h3,
.elementor-kit-50 h4,
.elementor-kit-50 h5,
.elementor-kit-50 h6 {
  letter-spacing: -0.02em;
  color: var(--fylm-navy);
}

/* =============================================
   3. BOUTONS — Style épuré et professionnel
   ============================================= */

.elementor-kit-50 .elementor-button,
.elementor-kit-50 button,
.elementor-kit-50 input[type="button"],
.elementor-kit-50 input[type="submit"] {
  background-color: var(--fylm-accent);
  border-color: var(--fylm-accent);
  border-radius: var(--fylm-radius-btn) !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;
  box-shadow: 0 4px 14px rgba(0, 180, 216, 0.28);
  transition:
    background-color var(--fylm-transition),
    border-color var(--fylm-transition),
    box-shadow var(--fylm-transition),
    transform var(--fylm-transition);
  will-change: transform;
}

.elementor-kit-50 .elementor-button:hover,
.elementor-kit-50 .elementor-button:focus,
.elementor-kit-50 button:hover,
.elementor-kit-50 input[type="button"]:hover,
.elementor-kit-50 input[type="submit"]:hover {
  background-color: var(--fylm-accent-dark);
  border-color: var(--fylm-accent-dark);
  box-shadow: 0 8px 24px rgba(0, 150, 184, 0.35);
  transform: translateY(-2px);
}

/* Bouton variante contour (outline) */
.elementor-button.elementor-button-link,
.elementor-widget-button .elementor-button[style*="background-color: transparent"],
.elementor-widget-button .elementor-button[style*="background: transparent"] {
  border: 2px solid var(--fylm-accent) !important;
  color: var(--fylm-accent) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.elementor-button.elementor-button-link:hover {
  background: var(--fylm-accent) !important;
  color: #fff !important;
}

/* =============================================
   4. EN-TÊTE (HEADER) — Glassmorphism
   ============================================= */

[data-elementor-type="twbb_header"] {
  transition:
    background-color var(--fylm-transition),
    box-shadow var(--fylm-transition),
    backdrop-filter var(--fylm-transition);
}

/* Header sticky : effet verre dépoli */
.elementor-sticky--active [data-elementor-type="twbb_header"],
.elementor-sticky--effects [data-elementor-type="twbb_header"] {
  background-color: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(16px) saturate(1.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid var(--fylm-border);
}

/* =============================================
   5. NAVIGATION
   ============================================= */

/* Liens du menu */
.elementor-nav-menu a,
.elementor-nav-menu--main .elementor-item {
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color var(--fylm-transition) !important;
}

.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item:focus,
.elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--fylm-accent) !important;
}

/* Indicateur de page active */
.elementor-nav-menu--main .elementor-item.elementor-item-active::after,
.elementor-nav-menu--main .elementor-item:hover::after {
  background-color: var(--fylm-accent) !important;
}

/* Sous-menu */
.elementor-nav-menu--main .sub-menu .elementor-item:hover {
  color: var(--fylm-accent) !important;
  background-color: var(--fylm-bg-soft) !important;
}

/* =============================================
   6. IMAGES — Coins plus sobres
   ============================================= */

.elementor-kit-50 img {
  border-radius: var(--fylm-radius) !important;
}

/* Hover sur images cliquables */
.elementor-widget-image a img,
.elementor-image-box-img img {
  transition: transform var(--fylm-transition), box-shadow var(--fylm-transition);
}

.elementor-widget-image a:hover img,
.elementor-image-box-wrapper:hover .elementor-image-box-img img {
  transform: scale(1.03);
  box-shadow: var(--fylm-shadow-hover);
}

/* =============================================
   7. CARTES & BOÎTES ICÔNES — Hover élégant
   ============================================= */

.elementor-widget-image-box .elementor-image-box-wrapper,
.elementor-widget-icon-box .elementor-icon-box-wrapper {
  border-radius: var(--fylm-radius);
  transition:
    transform var(--fylm-transition),
    box-shadow var(--fylm-transition);
}

.elementor-widget-image-box .elementor-image-box-wrapper:hover,
.elementor-widget-icon-box .elementor-icon-box-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: var(--fylm-shadow-hover);
}

/* Icônes */
.elementor-icon i,
.elementor-icon svg,
.elementor-icon-box-icon i,
.elementor-icon-box-icon svg {
  color: var(--fylm-accent) !important;
  fill: var(--fylm-accent) !important;
  transition: transform var(--fylm-transition), color var(--fylm-transition);
}

.elementor-widget-icon-box:hover .elementor-icon-box-icon i,
.elementor-widget-icon-box:hover .elementor-icon-box-icon svg {
  transform: scale(1.12);
}

/* =============================================
   8. CHAMPS DE FORMULAIRE
   ============================================= */

.elementor-kit-50 input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.elementor-kit-50 textarea,
.elementor-kit-50 select,
.elementor-kit-50 .elementor-field-textual {
  border-color: rgba(0, 0, 0, 0.18) !important;
  border-radius: var(--fylm-radius-btn) !important;
  transition:
    border-color var(--fylm-transition),
    box-shadow var(--fylm-transition) !important;
}

.elementor-kit-50 input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus,
.elementor-kit-50 textarea:focus,
.elementor-kit-50 .elementor-field-textual:focus {
  border-color: var(--fylm-accent) !important;
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.15) !important;
  outline: none !important;
}

/* WPForms - bouton envoi */
.wpforms-submit,
.wpforms-container .wpforms-submit-container .wpforms-submit {
  background-color: var(--fylm-accent) !important;
  border-color: var(--fylm-accent) !important;
  border-radius: var(--fylm-radius-btn) !important;
  box-shadow: 0 4px 14px rgba(0, 180, 216, 0.28) !important;
  font-weight: 600 !important;
  transition: all var(--fylm-transition) !important;
}

.wpforms-submit:hover,
.wpforms-container .wpforms-submit-container .wpforms-submit:hover {
  background-color: var(--fylm-accent-dark) !important;
  border-color: var(--fylm-accent-dark) !important;
  box-shadow: 0 8px 24px rgba(0, 150, 184, 0.35) !important;
  transform: translateY(-2px) !important;
}

/* Champs WPForms */
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="tel"],
.wpforms-field textarea,
.wpforms-field select {
  border-radius: var(--fylm-radius-btn) !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
  transition: border-color var(--fylm-transition), box-shadow var(--fylm-transition) !important;
}

.wpforms-field input:focus,
.wpforms-field textarea:focus,
.wpforms-field select:focus {
  border-color: var(--fylm-accent) !important;
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.15) !important;
}

/* =============================================
   9. COMPTEURS & STATISTIQUES
   ============================================= */

.elementor-counter-number-wrapper,
.elementor-counter-number,
.elementor-counter-number-suffix,
.elementor-counter-number-prefix {
  color: var(--fylm-accent) !important;
}

/* =============================================
   10. SÉPARATEURS
   ============================================= */

.elementor-widget-divider .elementor-divider-separator {
  border-color: var(--fylm-border) !important;
}

/* =============================================
   11. ACCORDÉONS & ONGLETS
   ============================================= */

.elementor-accordion .elementor-tab-title.elementor-active {
  color: var(--fylm-accent) !important;
}

.elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon i {
  color: var(--fylm-accent) !important;
}

.elementor-tabs .elementor-tab-title.elementor-active {
  color: var(--fylm-accent) !important;
  border-color: var(--fylm-accent) !important;
}

/* =============================================
   12. TÉMOIGNAGES
   ============================================= */

.elementor-testimonial__text {
  font-style: italic;
  position: relative;
}

.elementor-testimonial__text::before {
  content: '\201C';
  font-size: 3em;
  color: var(--fylm-accent);
  opacity: 0.3;
  line-height: 0;
  vertical-align: -0.4em;
  margin-right: 4px;
}

/* =============================================
   13. SECTIONS — Effets glassmorphisme
   ============================================= */

/* Sélectionner les sections avec fond clair pour l'effet verre */
.elementor-section.is-type-effects,
.e-con.glass-effect {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
}

/* Lignes colorées subtiles sur les colonnes feature */
.elementor-column .elementor-element-populated {
  transition: box-shadow var(--fylm-transition);
}

/* =============================================
   14. BARRE DE PROGRESSION
   ============================================= */

.elementor-progress-bar {
  background-color: var(--fylm-accent) !important;
  border-radius: 100px !important;
}

.elementor-progress-wrapper {
  border-radius: 100px !important;
  background-color: rgba(0, 180, 216, 0.12) !important;
}

/* =============================================
   15. ÉTATS DE FOCUS (ACCESSIBILITÉ)
   ============================================= */

*:focus-visible {
  outline: 2px solid var(--fylm-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* =============================================
   16. ANIMATIONS LÉGÈRES AU SCROLL
   ============================================= */

/* Fade-in doux pour les éléments en entrée */
.elementor-invisible {
  opacity: 0;
  transform: translateY(16px);
}

.elementor-animation-fade-in-up {
  animation: fylm-fadein 0.6s var(--fylm-transition) both;
}

@keyframes fylm-fadein {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================================
   17. FOOTER
   ============================================= */

[data-elementor-type="twbb_footer"] a:hover {
  color: var(--fylm-accent) !important;
}

[data-elementor-type="twbb_footer"] .elementor-icon i,
[data-elementor-type="twbb_footer"] .elementor-icon svg {
  transition: color var(--fylm-transition), transform var(--fylm-transition);
}

[data-elementor-type="twbb_footer"] .elementor-icon:hover i,
[data-elementor-type="twbb_footer"] .elementor-icon:hover svg {
  color: var(--fylm-accent-light) !important;
  fill: var(--fylm-accent-light) !important;
  transform: scale(1.15);
}

/* =============================================
   18. MOBILE (≤ 767px)
   ============================================= */

@media (max-width: 767px) {
  .elementor-kit-50 .elementor-button {
    display: block;
    width: 100%;
    text-align: center;
  }

  /* Meilleure lisibilité sur mobile */
  .elementor-kit-50 h1 {
    letter-spacing: -0.01em;
  }
}

/* =============================================
   19. TABLETTE (≤ 1024px)
   ============================================= */

@media (max-width: 1024px) {
  .elementor-widget-image-box .elementor-image-box-wrapper:hover,
  .elementor-widget-icon-box .elementor-icon-box-wrapper:hover {
    /* Désactiver le hover sur tablette pour l'UX tactile */
    transform: none;
    box-shadow: none;
  }
}

/* =============================================
   20. UTILITAIRES FYLM
   ============================================= */

/* Classe utilitaire : accent text */
.text-fylm-accent {
  color: var(--fylm-accent) !important;
}

/* Classe utilitaire : bg accent soft */
.bg-fylm-soft {
  background-color: var(--fylm-bg-soft) !important;
}

/* Ligne décorative sous titres de section */
.elementor-widget-heading .elementor-heading-title {
  position: relative;
}