/**
 * ==========================================================================
 * SIP MOTION PRO — v2
 * Chargée en DERNIER par script.js (injection <link>) pour garantir la priorité.
 * Références : Codrops (velocity skew, split text), Awwwards SOTD (UI sound,
 * magnetic buttons, logo split reveal), Apple HIG (feedback tactile).
 * Uniquement des propriétés composées GPU : transform / translate / scale /
 * opacity / clip-path / filter (léger).
 * ==========================================================================
 */

:root {
    --mx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --mx-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --mx-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --mx-reform: cubic-bezier(0.22, 1.25, 0.36, 1); /* léger dépassement = "reformation" élastique */
    --mx-dist: 70px;
    --mx-red: #C8232C;
    --mx-gold: #F7A11F;
    --mx-navy: #0B1A2B;
}

/* --------------------------------------------------------------------------
   0. Direction du scroll & Variables de physique naturelle Fraxbit
   -------------------------------------------------------------------------- */
html.mx-dir-down {
    --mx-from-y: 35px;
    --mx-origin: 50% 50%;
}

html.mx-dir-up {
    --mx-from-y: -35px;
    --mx-origin: 50% 50%;
}

/* --------------------------------------------------------------------------
   1. Barre de progression : supprimée à la demande de l'utilisateur
   -------------------------------------------------------------------------- */
.mx-progress {
    display: none !important;
}

/* --------------------------------------------------------------------------
   2. Révélation dynamique haute fidélité (Fraxbit Stagger & Silk Physics)
   Remplacement de toute distorsion géométrique par un fondu + translation fluide
   -------------------------------------------------------------------------- */
.mx-reveal-title,
.mx-reveal-img,
.service-card,
.news-card,
.stat-card {
    will-change: transform, opacity, filter;
    transition:
        transform 0.72s var(--mx-ease-out),
        opacity 0.55s ease,
        filter 0.55s ease !important;
}

/* --- ÉTAT INITIAL HORS ÉCRAN (SOYEUX & NATUREL) --- */
html.mx-ready .mx-reveal-title:not(.mx-in),
html.mx-ready .mx-reveal-img:not(.mx-in),
html.mx-ready .mx-from-left:not(.mx-in),
html.mx-ready .mx-from-right:not(.mx-in) {
    opacity: 0 !important;
    filter: blur(4px) !important;
    transform: translate3d(0, var(--mx-from-y, 35px), 0) scale(0.985) !important;
    transition-delay: 0ms !important;
}

/* --- ÉTAT ENTRÉ (TOTALEMENT FLUIDE & EN PLACE) --- */
html.mx-ready .mx-reveal-title.mx-in,
html.mx-ready .mx-reveal-img.mx-in,
html.mx-ready .mx-from-left.mx-in,
html.mx-ready .mx-from-right.mx-in {
    opacity: 1 !important;
    filter: blur(0px) !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    transition-delay: calc(var(--mx-d, 0) * 85ms) !important;
}

/* Ken Burns Subtil sur le Hero Slider */
.slide.active img {
    animation: kenBurnsHero 12s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes kenBurnsHero {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.07);
    }
}

/* --------------------------------------------------------------------------
   4. Images : Affichage 100% garanti et fluide (aucun clip-path masquant)
   -------------------------------------------------------------------------- */
.about-image,
.service-image,
.card-image,
.actualite-image,
.station-image {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden;
}

.about-image img,
.service-image img,
.card-image img,
.card img,
.service-card img,
.actualite-image img,
.station-image img,
.news-image img {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    max-width: 100% !important;
    object-fit: cover !important;
    transition: transform 0.65s var(--mx-ease-out) !important;
}

.service-card:hover .service-image img,
.card:hover .card-image img,
.about-image:hover img,
.actualite-card:hover .actualite-image img {
    transform: scale(1.045) !important;
}

/* --------------------------------------------------------------------------
   5. Conteneurs soumis à la déformation de vitesse (skew piloté en JS)
   -------------------------------------------------------------------------- */
.mx-skew {
    transform-origin: 50% 50%;
    backface-visibility: hidden;
}

/* --------------------------------------------------------------------------
   6. Boutons : magnétisme, pression, reflet, onde
   `translate` et `scale` sont des propriétés indépendantes de `transform` :
   elles se cumulent aux :hover existants au lieu d'être écrasées.
   -------------------------------------------------------------------------- */
html .mx-btn.mx-btn,
html .mx-tap.mx-tap {
    translate: var(--mx-tx, 0px) var(--mx-ty, 0px);
    scale: var(--mx-scale, 1);
    transition:
        transform 0.22s var(--mx-ease-out),
        box-shadow 0.22s var(--mx-ease-out),
        background-color 0.22s var(--mx-ease-out),
        background 0.22s var(--mx-ease-out),
        border-color 0.22s var(--mx-ease-out),
        color 0.22s var(--mx-ease-out),
        translate 0.45s var(--mx-spring),
        scale 0.28s var(--mx-spring) !important;
}

html .mx-btn.mx-btn.mx-magnet-active {
    transition:
        transform 0.22s var(--mx-ease-out),
        box-shadow 0.22s var(--mx-ease-out),
        background-color 0.22s var(--mx-ease-out),
        background 0.22s var(--mx-ease-out),
        color 0.22s var(--mx-ease-out),
        translate 0.12s linear,
        scale 0.28s var(--mx-spring) !important;
}

.mx-pressed {
    --mx-scale: 0.94;
}

.mx-btn-rel {
    position: relative;
}

.mx-btn {
    overflow: hidden;
    isolation: isolate;
}

/* Reflet lumineux qui balaie le bouton au survol */
.mx-btn-shine {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
    transform: translate3d(-130%, 0, 0);
}

.mx-btn:hover .mx-btn-shine {
    transform: translate3d(130%, 0, 0);
    transition: transform 0.85s var(--mx-ease-out);
}

/* Icônes vivantes */
.mx-btn i,
.mx-btn svg {
    display: inline-block;
    transition: transform 0.35s var(--mx-spring);
}

.mx-btn:hover i,
.mx-btn:hover svg {
    transform: rotate(-8deg) scale(1.15);
}

.mx-btn:hover .fa-arrow-right,
.mx-btn:hover .fa-chevron-right {
    transform: translate3d(4px, 0, 0);
}

/* Onde de choc au clic */
.mx-ripple {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    background: currentColor;
    opacity: 0.32;
    transform: scale(0);
    animation: mxRipple 0.65s var(--mx-ease-out) forwards;
}

@keyframes mxRipple {
    to {
        transform: scale(2.6);
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   7. Logo : décomposition / recomposition des lettres (S · flamme · i · p)
   -------------------------------------------------------------------------- */
.mx-logo {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.mx-logo-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.mx-logo-piece {
    position: absolute;
    inset: 0;
    display: block;
    will-change: transform, opacity, filter;
}

.logo a .mx-logo-piece img,
.logo a:hover .mx-logo-piece img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    transition: none !important;
}

.mx-logo.mx-animating > img {
    opacity: 0;
}

.mx-logo:not(.mx-animating) .mx-logo-layer {
    visibility: hidden;
}

.mx-logo-shine {
    position: absolute;
    inset: -4px;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: overlay;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.95) 50%, transparent 65%);
    transform: translate3d(-130%, 0, 0);
    opacity: 0;
}

/* --------------------------------------------------------------------------
   8. Bouton flottant Son : masqué conformément au souhait utilisateur
   -------------------------------------------------------------------------- */
.mx-sound-toggle,
.sip-audio-indicator {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* --------------------------------------------------------------------------
   9. Transition de sortie de page (liens internes)
   -------------------------------------------------------------------------- */
html.mx-leaving main,
html.mx-leaving footer {
    opacity: 0;
    transform: translate3d(0, -18px, 0);
    filter: blur(4px);
    transition: opacity 0.3s ease, transform 0.3s var(--mx-ease-in), filter 0.3s ease;
}

/* --------------------------------------------------------------------------
   10. Effet Ondulation Liquide au Clic (Goutte d'eau)
   -------------------------------------------------------------------------- */
.sip-water-clicked {
    animation: liquidDropletPulse 0.52s cubic-bezier(0.22, 1.25, 0.36, 1) !important;
}

@keyframes liquidDropletPulse {
    0% {
        transform: scale(1);
    }
    35% {
        transform: scale(0.968);
        filter: brightness(1.06);
    }
    65% {
        transform: scale(1.018);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

/* --------------------------------------------------------------------------
   11. Accessibilité : mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .mx-reveal,
    .mx-words .mx-w > span,
    .mx-img,
    .mx-img img,
    .mx-skew,
    .sip-water-clicked {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        transition: none !important;
        animation: none !important;
    }

    .mx-btn-shine,
    .mx-ripple,
    .mx-sound-toggle .mx-bar,
    #sip-water-canvas {
        animation: none !important;
        display: none !important;
    }

    html.mx-leaving main,
    html.mx-leaving footer {
        transition: none;
    }
}