/*
Theme Name: PROMEG - Thème Sur-Mesure B2B
Theme URI: https://www.promeg.fr/
Author: PROMEG & Antigravity
Author URI: https://www.promeg.fr/
Description: Thème WordPress sur-mesure, moderne, responsive et orienté conversion pour PROMEG (Audit, Conseil, Formations et Solutions Logicielles pour Carrosseries et Ateliers Automobiles).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: promeg-custom
License: Propriétaire PROMEG
*/

/* --- CSS Variables & Base Overrides --- */
:root {
  --color-primary: #0F172A;
  --color-primary-light: #1E293B;
  --color-accent: #2563EB;
  --color-accent-hover: #1D4ED8;
  --color-accent-emerald: #10B981;
  --color-accent-amber: #F59E0B;
  --color-bg-light: #F8FAFC;
  --color-border: #E2E8F0;
}

html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

body {
  background-color: var(--color-bg-light);
  color: #1E293B;
  overflow-x: hidden;
}

/* Custom Utilities for Polish & SaaS Look */
.glass-effect {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.glass-dark {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.gradient-hero {
  background: radial-gradient(120% 120% at 50% 10%, #1E293B 0%, #0F172A 70%, #020617 100%);
}

.gradient-mesh {
  background-image: radial-gradient(at 80% 0%, hsla(217,91%,60%,0.15) 0px, transparent 50%),
                    radial-gradient(at 0% 50%, hsla(222,84%,58%,0.1) 0px, transparent 50%),
                    radial-gradient(at 80% 100%, hsla(160,84%,39%,0.08) 0px, transparent 50%);
}

.card-hover {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
}

/* Typography styles for Gutenberg contents */
.prose:not(.not-prose) > h1,
.prose:not(.not-prose) > h2,
.prose:not(.not-prose) > h3,
.prose:not(.not-prose) > h4,
.prose:not(.not-prose) > div > h1,
.prose:not(.not-prose) > div > h2,
.prose:not(.not-prose) > div > h3,
.prose:not(.not-prose) > div > h4 {
  color: #0F172A;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.prose:not(.not-prose) > p,
.prose:not(.not-prose) > div > p {
  line-height: 1.75;
  color: #475569;
}

/* Explicit not-prose isolation */
.not-prose,
.not-prose * {
  box-sizing: border-box;
}
.not-prose h1, .not-prose h2, .not-prose h3, .not-prose h4, .not-prose h5, .not-prose h6 {
  color: inherit;
}
.not-prose p {
  color: inherit;
}
.not-prose a {
  text-decoration: none !important;
}

/* --- Elementor Full-Width & Section Normalization --- */
.elementor-section.elementor-section-boxed > .elementor-container,
.promeg-elementor-rentasoft .elementor-section.elementor-section-boxed > .elementor-container,
.promeg-elementor-page .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

.promeg-elementor-rentasoft .elementor-section,
.promeg-elementor-page .elementor-section {
  padding: 0 !important;
  margin: 0 !important;
}

.promeg-elementor-rentasoft .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
.promeg-elementor-page .elementor-column-gap-default > .elementor-column > .elementor-element-populated {
  padding: 0 !important;
}

.promeg-elementor-rentasoft .elementor-widget-wrap,
.promeg-elementor-page .elementor-widget-wrap,
.promeg-elementor-front-page .elementor-widget-wrap,
.promeg-elementor-formations .elementor-widget-wrap,
.promeg-elementor-contact .elementor-widget-wrap {
  padding: 0 !important;
  margin: 0 !important;
}

/* ==========================================================================
   PROMEG MOTION & ANIMATION SYSTEM
   ========================================================================== */

/* 1. Scroll Reveal Engine */
.reveal-on-scroll,
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.reveal-visible,
[data-reveal].reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Force instant 100% visibility in Elementor Editor, Preview, and Admin */
body.elementor-editor-active .reveal-on-scroll,
body.elementor-editor-active [data-reveal],
body.elementor-editor-preview .reveal-on-scroll,
body.elementor-editor-preview [data-reveal],
body.admin-bar.elementor-page .reveal-on-scroll,
body.admin-bar.elementor-page [data-reveal],
.elementor-editor-active .reveal-on-scroll,
.elementor-editor-active [data-reveal],
.elementor-editor-preview .reveal-on-scroll,
.elementor-editor-preview [data-reveal],
html.elementor-html .reveal-on-scroll,
html.elementor-html [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  transition: none !important;
}

.reveal-scale {
  transform: scale(0.95) translateY(20px);
}

.reveal-scale.reveal-visible,
body.elementor-editor-active .reveal-scale,
body.elementor-editor-preview .reveal-scale {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
}

/* 2. Floating & Ambient Animations */
@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(0.5deg);
  }
}

@keyframes floatReverse {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(8px) rotate(-0.5deg);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.35;
    transform: scale(1);
  }
  50% {
    opacity: 0.65;
    transform: scale(1.08);
  }
}

@keyframes shimmerEffect {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-float-slow {
  animation: floatSlow 6s ease-in-out infinite;
}

.animate-float-delayed {
  animation: floatReverse 7s ease-in-out infinite 1.5s;
}

.animate-pulse-glow {
  animation: pulseGlow 4s ease-in-out infinite;
}

/* 3. Card Elevation & Interaction */
.card-hover {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
  will-change: transform, box-shadow;
}

.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 30px -10px rgba(15, 23, 42, 0.12), 0 10px 15px -5px rgba(15, 23, 42, 0.06);
}

/* 4. 3D Tilt Container */
.cockpit-tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.2s ease-out;
}

/* 5. Button Press Feedback */
a, button {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

a:active, button:active {
  transform: scale(0.97);
}

/* 6. Subtle glowing borders for badges */
.badge-pulse {
  position: relative;
}

.badge-pulse::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: inherit;
  filter: blur(4px);
  opacity: 0.4;
  z-index: -1;
}

/* 7. Animated Gradient Text Shine (Hero Wow Effect) */
@keyframes gradientTextShine {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animate-gradient-text {
  background-size: 200% auto;
  animation: gradientTextShine 5s ease infinite;
}

/* 8. Hero Primary CTA Glowing Aura */
@keyframes heroButtonAura {
  0%, 100% {
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.4), 0 0 0 0 rgba(59, 130, 246, 0.4);
  }
  50% {
    box-shadow: 0 15px 35px -5px rgba(37, 99, 235, 0.6), 0 0 20px 4px rgba(59, 130, 246, 0.3);
  }
}

.hero-cta-glow {
  animation: heroButtonAura 3.5s ease-in-out infinite;
}

/* 9. Hero Orchestrated Typewriter & Staggered Elements */
.hero-badge-pill {
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.hero-badge-pill.is-visible,
body.elementor-editor-active .hero-badge-pill,
body.elementor-editor-preview .hero-badge-pill {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.hero-typewriter-line1:not(.is-typing),
.hero-typewriter-line2:not(.is-typing),
.hero-badge-typewriter:not(.is-typing) {
  opacity: 0;
}

.hero-typewriter-line1.is-typing,
.hero-typewriter-line2.is-typing,
.hero-badge-typewriter.is-typing,
body.elementor-editor-active .hero-typewriter-line1,
body.elementor-editor-active .hero-typewriter-line2,
body.elementor-editor-active .hero-badge-typewriter,
body.elementor-editor-preview .hero-typewriter-line1,
body.elementor-editor-preview .hero-typewriter-line2,
body.elementor-editor-preview .hero-badge-typewriter {
  opacity: 1 !important;
}

.hero-typewriter-cursor {
  display: inline-block;
  width: 3px;
  height: 0.85em;
  vertical-align: -0.05em;
  background-color: #38bdf8;
  box-shadow: 0 0 12px #38bdf8, 0 0 20px rgba(56, 189, 248, 0.6);
  margin-left: 3px;
  border-radius: 2px;
  animation: heroCursorBlink 0.75s ease-in-out infinite;
  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 0;
  visibility: hidden;
}

.hero-typewriter-cursor.cursor-active {
  opacity: 1 !important;
  visibility: visible !important;
}

.hero-typewriter-cursor.cursor-orange,
.hero-typewriter-line2.from-orange-400 ~ .hero-typewriter-cursor {
  background-color: #f97316;
  box-shadow: 0 0 12px #f97316, 0 0 20px rgba(249, 115, 22, 0.6);
}

.hero-typewriter-cursor.cursor-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}

@keyframes heroCursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.hero-stagger-item {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(12px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.hero-stagger-item.hero-stagger-visible,
body.elementor-editor-active .hero-stagger-item,
body.elementor-editor-preview .hero-stagger-item {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: blur(0px) !important;
}

.hero-kpi-card {
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  filter: blur(12px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  will-change: opacity, transform, filter;
}

.hero-kpi-card.hero-kpi-visible,
body.elementor-editor-active .hero-kpi-card,
body.elementor-editor-preview .hero-kpi-card {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  filter: blur(0px) !important;
}

/* 10. Hero Paragraph Word-by-Word Stagger Cascade */
.hero-word-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  filter: blur(8px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.hero-words-visible .hero-word-reveal,
body.elementor-editor-active .hero-word-reveal,
body.elementor-editor-preview .hero-word-reveal {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: blur(0px) !important;
}

/* 10b. Product Review Cards Progressive Unblur & Glide Reveal */
.product-review-card {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(10px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.65s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
  will-change: opacity, transform, filter;
}

.product-review-card.reveal-visible,
body.elementor-editor-active .product-review-card,
body.elementor-editor-preview .product-review-card {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: blur(0px) !important;
}

/* 11. Living Hero Ambient Halo & Breathing Glow System */
@keyframes heroHaloSweep {
  0% {
    transform: translate(-70%, -20%) scale(0.9);
    opacity: 0.35;
  }
  50% {
    transform: translate(25%, 15%) scale(1.35);
    opacity: 0.85;
  }
  100% {
    transform: translate(-70%, -20%) scale(0.9);
    opacity: 0.35;
  }
}

@keyframes heroHaloSweepSecondary {
  0% {
    transform: translate(45%, 25%) scale(1.25);
    opacity: 0.70;
  }
  50% {
    transform: translate(-55%, -20%) scale(0.85);
    opacity: 0.30;
  }
  100% {
    transform: translate(45%, 25%) scale(1.25);
    opacity: 0.70;
  }
}

@keyframes photoLightPulse {
  0%, 100% {
    filter: saturate(1.2) brightness(0.95);
  }
  50% {
    filter: saturate(1.45) brightness(1.25);
  }
}

/* ==========================================================================
   ORGANIC HERO SPOTLIGHT REVEAL SYSTEM
   ========================================================================== */
.hero-spotlight-container {
  --spot-x: 66.67%;
  --spot-y: 50%;
  --spot-r: 360px;
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-spotlight-base-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
  filter: brightness(0.9) contrast(1.05);
  transform: scale(1.02);
}

.hero-spotlight-reveal-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle var(--spot-r, 360px) at var(--spot-x, 66.67%) var(--spot-y, 50%), rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0) 85%);
  mask-image: radial-gradient(circle var(--spot-r, 360px) at var(--spot-x, 66.67%) var(--spot-y, 50%), rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0) 85%);
  will-change: mask-image, -webkit-mask-image;
}

.hero-spotlight-reveal-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.62;
  filter: brightness(1.08) contrast(1.06) saturate(1.18);
  transform: scale(1.02);
}

/* Atmospheric subtle luminosity (natural pure light aura, not blue blob) */
.hero-spotlight-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle var(--spot-r, 360px) at var(--spot-x, 66.67%) var(--spot-y, 50%), rgba(255, 255, 255, 0.05) 0%, rgba(220, 235, 255, 0.02) 50%, transparent 80%);
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ==========================================================================
   ZEN MECHANIC PURE HARDWARE-ACCELERATED ULTRA-SMOOTH FADE-IN
   ========================================================================== */
@keyframes zenFadeIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 5px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes zenHaloExpand {
  0% {
    opacity: 0;
    transform: scale(0.6) translateZ(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
}

@keyframes zenChipSlideInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-8px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes zenChipSlideInRight {
  0% {
    opacity: 0;
    transform: translate3d(8px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.zen-mechanic-img {
  animation: zenFadeIn 2.6s cubic-bezier(0.37, 0, 0.23, 1) 0.8s backwards;
  will-change: opacity, transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.zen-halo {
  animation: zenHaloExpand 2.8s cubic-bezier(0.37, 0, 0.23, 1) 0.7s backwards;
  will-change: opacity, transform;
  transform: translateZ(0);
}

.zen-chip-left {
  animation: zenChipSlideInLeft 1.4s cubic-bezier(0.37, 0, 0.23, 1) 2.0s backwards;
  will-change: opacity, transform;
  transform: translateZ(0);
}

.zen-chip-right {
  animation: zenChipSlideInRight 1.4s cubic-bezier(0.37, 0, 0.23, 1) 2.3s backwards;
  will-change: opacity, transform;
  transform: translateZ(0);
}

body.elementor-editor-active .zen-mechanic-img,
body.elementor-editor-preview .zen-mechanic-img,
body.elementor-editor-active .zen-halo,
body.elementor-editor-preview .zen-halo,
body.elementor-editor-active .zen-chip-left,
body.elementor-editor-preview .zen-chip-left,
body.elementor-editor-active .zen-chip-right,
body.elementor-editor-preview .zen-chip-right {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}