/**
 * Vista Pulse Creations — Design tokens.
 * Source : tailwind.config.js du projet Symfony de référence.
 */

:root {
    --vp-primary: #00A8E8;
    --vp-secondary: #E8A317;
    --vp-teal: #00C9A7;
    --vp-green: #4CB051;
    --vp-deep: #0077B6;
    --vp-dark: #0F172A;
    --vp-warm: #F1CD5B;
    --vp-bg: #F7F8F7;
    --vp-text: #0C0A0A;
    --vp-muted: #524A46;

    --vp-radius-sm: 0.5rem;
    --vp-radius-md: 1rem;
    --vp-radius-lg: 1.5rem;
    --vp-radius-pill: 9999px;

    --vp-font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --vp-shadow-pill: 0 10px 30px -10px rgba(0, 0, 0, 0.25);
    --vp-shadow-card: 0 8px 24px -12px rgba(15, 23, 42, 0.18);

    --vp-bp-sm: 640px;
    --vp-bp-md: 768px;
    --vp-bp-lg: 1024px;
    --vp-bp-xl: 1280px;
}

body {
    font-family: var(--vp-font-display);
    background-color: var(--vp-bg);
    color: var(--vp-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.vp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 1rem;
    border-radius: var(--vp-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.vp-grad-home {
    background: linear-gradient(90deg, #00A8E8 0%, #00C9A7 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}

.vp-grad-agence {
    background: linear-gradient(90deg, #A855F7 0%, #6366F1 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}

.vp-grad-portfolio {
    background: linear-gradient(90deg, #06B6D4 0%, #4CB051 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}

.vp-grad-services {
    background: linear-gradient(90deg, #EC4899 0%, #8B5CF6 50%, #3B82F6 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}

.vp-grad-contact {
    background: linear-gradient(90deg, #FECACA 0%, #F1CD5B 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}

.vp-section-dark {
    background-color: var(--vp-dark);
    color: #FFFFFF;
}

.vp-section-light {
    background-color: var(--vp-bg);
    color: var(--vp-text);
}

.vp-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    border-radius: var(--vp-radius-pill);
    background-color: var(--vp-secondary);
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vp-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(232, 163, 23, 0.55);
}

.vp-btn-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--vp-radius-pill);
    background-color: #000000;
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.vp-btn-dark:hover {
    transform: scale(1.05);
}

.vp-card {
    background-color: #FFFFFF;
    border-radius: var(--vp-radius-lg);
    box-shadow: var(--vp-shadow-card);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -16px rgba(15, 23, 42, 0.28);
}

/* =========================================================================
   Variantes "gradient background" pour boutons Elementor.
   Elementor Free ne permet pas un gradient natif sur Button widget. La classe
   pose UNIQUEMENT le gradient. Padding, border-radius, typo, shadow, taille,
   couleur texte → tout reste piloté par les onglets Style/Advanced d'Elementor.
   ========================================================================= */

.elementor-widget-button.vp-cta-orange .elementor-button {
    background: linear-gradient(90deg, #E8A317 0%, #F1CD5B 100%);
    background-size: 200% 100%;
    background-position: 0% 50%;
    transition: background-position 0.4s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.elementor-widget-button.vp-cta-orange .elementor-button:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
}

.elementor-widget-button.vp-cta-cyan .elementor-button {
    background: linear-gradient(90deg, #00A8E8 0%, #00C9A7 100%);
    background-size: 200% 100%;
    background-position: 0% 50%;
    transition: background-position 0.4s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.elementor-widget-button.vp-cta-cyan .elementor-button:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
}

.elementor-widget-button.vp-cta-violet .elementor-button {
    background: linear-gradient(90deg, #A855F7 0%, #6366F1 100%);
    background-size: 200% 100%;
    background-position: 0% 50%;
    transition: background-position 0.4s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.elementor-widget-button.vp-cta-violet .elementor-button:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
}

/* Variante "ghost" : pas de fond, juste un lien texte avec arrow.
   Idéal pour CTA secondaires (header de section, footer de card). */
.elementor-widget-button.vp-cta-ghost .elementor-button {
    background: transparent;
    color: var(--vp-text);
    border: 0;
    padding: 0.5rem 0;
    font-weight: 700;
    box-shadow: none;
    position: relative;
    transition: color 0.25s ease;
}
.elementor-widget-button.vp-cta-ghost .elementor-button::after {
    content: "→";
    display: inline-block;
    margin-left: 0.5rem;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.elementor-widget-button.vp-cta-ghost .elementor-button:hover {
    color: var(--vp-primary);
}
.elementor-widget-button.vp-cta-ghost .elementor-button:hover::after {
    transform: translateX(8px);
}

/* Variante "ghost circle" : flèche dans un cercle gris qui devient cyan au hover */
.elementor-widget-button.vp-cta-ghost-circle .elementor-button {
    background: transparent;
    color: var(--vp-text);
    border: 0;
    padding: 0;
    font-weight: 700;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}
.elementor-widget-button.vp-cta-ghost-circle .elementor-button::after {
    content: "→";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: rgba(0, 168, 232, 0.1);
    color: var(--vp-primary);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.elementor-widget-button.vp-cta-ghost-circle .elementor-button:hover {
    color: var(--vp-primary);
}
.elementor-widget-button.vp-cta-ghost-circle .elementor-button:hover::after {
    background-color: var(--vp-primary);
    color: #FFFFFF;
    transform: scale(1.05);
}

/* =========================================================================
   Eyebrow Pill — appliqué sur un Container Elementor.
   Tout le design (bg, border, radius, padding) vient des réglages Elementor.
   La classe sert seulement à faire un container inline-flex hug-content
   (Elementor n'a pas display: inline-flex natif).
   ========================================================================= */

.e-con.vp-eyebrow-pill,
.elementor-element.vp-eyebrow-pill {
    display: inline-flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    align-self: flex-start;
    flex-grow: 0 !important;
}

/* =========================================================================
   .vp-pulse — anime n'importe quel élément (Icon widget, span...) en pulse
   ========================================================================= */

.vp-pulse {
    animation: vp-pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes vp-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
    .vp-pulse {
        animation: none;
    }
}

/* =========================================================================
   Hero Waves — fond SVG animé (vagues mouse-parallax) injecté par JS
   sur les containers qui portent la classe .vp-hero-waves.
   Le SVG est inséré comme premier enfant absolu — aucun widget HTML à gérer.
   ========================================================================= */

.vp-hero-waves {
    position: relative;
    overflow: hidden;
}

/* Tous les enfants directs passent AU-DESSUS du layer de vagues. */
.vp-hero-waves > .e-con-inner,
.vp-hero-waves > .elementor-element,
.vp-hero-waves > * {
    position: relative;
    z-index: 1;
}

/* Le layer SVG des vagues : explicitement absolute, plein cadre, derrière le contenu.
   Spécificité (0,2,0) pour battre la règle '.vp-hero-waves > *' qui est (0,1,0).
   100% partout, opacité réduite pour préserver la lisibilité du texte par-dessus. */
.vp-hero-waves > .vp-hero-waves__layer,
.vp-hero-waves .vp-hero-waves__layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

@media (min-width: 768px) {
    .vp-hero-waves > .vp-hero-waves__layer,
    .vp-hero-waves .vp-hero-waves__layer {
        opacity: 0.4;
    }
}

.vp-hero-waves__layer svg {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 767px) {
    .vp-section-dark,
    .vp-section-light {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* =========================================================================
   Animations port du Symfony (fade-in-up, pulse-slow, delay-N00…)
   ========================================================================= */

@keyframes vp-fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes vp-pulse-slow {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

.animate-fade-in-up {
    animation: vp-fade-in-up 0.8s ease-out both;
}

.animate-pulse-slow {
    animation: vp-pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
    .animate-fade-in-up,
    .animate-pulse-slow {
        animation: none !important;
    }
}