/*
Theme Name: RESIN'SOLutions Theme
Theme URI: https://resinsolutions.com
Author: Mechac Sohe
Author URI: https://kloo.me/mo0zurnssz
Description: Thème WordPress sur mesure pour RESIN'SOLutions — spécialiste moquette de pierre & résine décorative en Guyane Française. Compatible Elementor, full-width, responsive, animations Vanilla JS intégrées.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: Proprietary
License URI: https://kloo.me/mo0zurnssz
Text Domain: mon-site-theme
Tags: elementor, full-width-template, custom-colors, custom-menu, featured-images, translation-ready, responsive-layout
*/

/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-primary:       hsl(200 100% 50%);
  --color-primary-fg:    hsl(0 0% 100%);
  --color-accent:        hsl(145 100% 45%);
  --color-background:    hsl(210 20% 98%);
  --color-foreground:    hsl(220 20% 15%);
  --color-muted:         hsl(210 15% 93%);
  --color-muted-fg:      hsl(220 10% 45%);
  --color-border:        hsl(210 15% 90%);
  --color-card:          hsl(0 0% 100%);
  --color-silver-light:  hsl(220 15% 95%);
  --color-silver-medium: hsl(220 10% 70%);
  --color-silver-dark:   hsl(220 15% 35%);
  --shadow-premium:      0 20px 60px -15px hsl(200 100% 50% / 0.15);
  --shadow-card:         0 4px 20px -4px hsl(220 20% 15% / 0.08);
  --shadow-card-hover:   0 12px 40px -8px hsl(200 100% 50% / 0.2);
  --radius-lg:           0.75rem;
  --radius-md:           calc(0.75rem - 2px);
  --radius-sm:           calc(0.75rem - 4px);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--color-background);
  color: var(--color-foreground);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  line-height: 1.15;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* =========================================================
   UTILITIES ANIMATIONS
   ========================================================= */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }

/* Hero slider */
.hero-bg-img {
  transition: opacity 1.5s ease-in-out, transform 5s ease-out;
  opacity: 0;
}
.hero-bg-img.active {
  opacity: 1;
  transform: scale(1.05);
}

/* =========================================================
   GRADIENT TEXT
   ========================================================= */
.text-gradient-cyan {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(135deg, hsl(200 100% 50%), hsl(195 100% 55%));
}

/* =========================================================
   GLASS CARD
   ========================================================= */
.glass-card {
  background-color: rgb(255 255 255 / 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgb(220 220 220 / 0.5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.glass-card-hover {
  transition: all 0.5s ease;
}
.glass-card-hover:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

/* =========================================================
   SECTION PADDING
   ========================================================= */
.section-padding {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media (min-width: 768px) {
  .section-padding { padding-top: 7rem; padding-bottom: 7rem; }
}

/* =========================================================
   LINE ACCENT
   ========================================================= */
.line-accent {
  height: 2px;
  width: 4rem;
  background: linear-gradient(135deg, hsl(200 100% 50%), hsl(195 100% 55%));
}

/* =========================================================
   SHADOW UTILITIES
   ========================================================= */
.shadow-premium { box-shadow: var(--shadow-premium); }
.shadow-card    { box-shadow: var(--shadow-card); }

/* =========================================================
   ELEMENTOR FULL-WIDTH OVERRIDES
   ========================================================= */
.elementor-section.elementor-section-full_width .elementor-container {
  max-width: 100%;
}
.e-con.e-con-full { max-width: 100%; }

/* =========================================================
   NAVBAR (repris du thème original)
   ========================================================= */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  transition: all 0.5s ease;
}

/* =========================================================
   WP DEFAULTS
   ========================================================= */
.wp-block-image img { border-radius: var(--radius-lg); }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }