/* ╔═══════════════════════════════════════════════════════════════╗
   ║  PTI TECH — pti-animations.css                              ║
   ║  Preloader · Scroll Progress · Scroll Reveal · Micro-anim  ║
   ╚═══════════════════════════════════════════════════════════════╝ */

/* ══════════════════════════════════════════════════
   PRELOADER
══════════════════════════════════════════════════ */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #021830;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    transition: opacity .13s ease, visibility .13s ease;}

.preloader.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Logo animé dans le preloader */
.preloader-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    animation: preloaderFadeIn .6s ease forwards;
}

.preloader-logo-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, #007870, #042d6b);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 0 rgba(0,170,160,.5);
    animation: logoPulse 2s ease-in-out infinite;
    overflow: hidden;
}

.preloader-logo-icon img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.preloader-logo-text {
    text-align: center;
}

.preloader-logo-top {
    font-family: 'Space Grotesk', 'Outfit', system-ui, sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    letter-spacing: .08em;
    line-height: 1;
    display: block;
}

.preloader-logo-bot {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: rgba(0,170,160,.85);
    letter-spacing: .28em;
    text-transform: uppercase;
    display: block;
    margin-top: 4px;
}

/* Barre de chargement */
.preloader-bar {
    width: 200px;
    height: 3px;
    background: rgba(255,255,255,.1);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.preloader-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #007870, #00aaa0, #042d6b);
    background-size: 200% 100%;
    border-radius: 999px;
    animation: preloaderBar 1.8s ease-in-out infinite;
}

/* Texte animé */
.preloader-text {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,.35);
    letter-spacing: .12em;
    text-transform: uppercase;
    animation: preloaderDots 1.5s ease-in-out infinite;
}

/* Points orbitaux décoratifs */
.preloader-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    animation: orbFloat 8s ease-in-out infinite;
}
.preloader-orb-1 {
    width: 320px; height: 320px;
    background: rgba(0,120,112,.18);
    top: -80px; right: -80px;
}
.preloader-orb-2 {
    width: 240px; height: 240px;
    background: rgba(4,45,107,.25);
    bottom: -60px; left: -60px;
    animation-delay: -4s;
}

@keyframes logoPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,170,160,.5); }
    50%       { box-shadow: 0 0 0 16px rgba(0,170,160,.0); }
}
@keyframes preloaderFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes preloaderBar {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes preloaderDots {
    0%, 100% { opacity: .3; }
    50%       { opacity: .7; }
}
@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%       { transform: translate(20px, -20px) scale(1.06); }
}

/* ══════════════════════════════════════════════════
   BARRE PROGRESSION SCROLL
══════════════════════════════════════════════════ */
#scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    z-index: 99998;
    background: linear-gradient(90deg, #007870 0%, #00aaa0 50%, #042d6b 100%);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px rgba(0,170,160,.5);
    transition: width .1s linear;
}

/* ══════════════════════════════════════════════════
   SCROLL REVEAL — Classes de base
══════════════════════════════════════════════════ */

/* État initial — invisible */
[data-reveal],
.reveal-up,
.reveal-down,
.reveal-left,
.reveal-right,
.reveal-fade,
.reveal-scale,
.reveal-zoom {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: .7s;
    transition-timing-function: cubic-bezier(.25, .46, .45, .94);
    will-change: opacity, transform;
}

/* Directions initiales */
.reveal-up,    [data-reveal="up"]    { transform: translateY(36px); }
.reveal-down,  [data-reveal="down"]  { transform: translateY(-28px); }
.reveal-left,  [data-reveal="left"]  { transform: translateX(-42px); }
.reveal-right, [data-reveal="right"] { transform: translateX(42px); }
.reveal-fade,  [data-reveal="fade"]  { transform: none; }
.reveal-scale, [data-reveal="scale"] { transform: scale(.92); }
.reveal-zoom,  [data-reveal="zoom"]  { transform: scale(.85); }

/* État visible */
[data-reveal].is-visible,
.reveal-up.is-visible,
.reveal-down.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-fade.is-visible,
.reveal-scale.is-visible,
.reveal-zoom.is-visible {
    opacity: 1;
    transform: none;
}

/* Délais de stagger */
[data-delay="100"], .delay-100 { transition-delay: .1s !important; }
[data-delay="200"], .delay-200 { transition-delay: .2s !important; }
[data-delay="300"], .delay-300 { transition-delay: .3s !important; }
[data-delay="400"], .delay-400 { transition-delay: .4s !important; }
[data-delay="500"], .delay-500 { transition-delay: .5s !important; }
[data-delay="600"], .delay-600 { transition-delay: .6s !important; }
[data-delay="700"], .delay-700 { transition-delay: .7s !important; }
[data-delay="800"], .delay-800 { transition-delay: .8s !important; }

/* Vitesses */
[data-speed="fast"]  { transition-duration: .45s !important; }
[data-speed="slow"]  { transition-duration: 1.1s !important; }
[data-speed="xslow"] { transition-duration: 1.5s !important; }

/* ══════════════════════════════════════════════════
   AUTO-REVEAL — Sections et éléments communs
   (appliqué automatiquement via JS)
══════════════════════════════════════════════════ */

/* Sections complètes */
.section,
.section-alt,
.svc-section,
.section-solaire,
.section-cta,
.sec-presentation,
.sec-temoignages,
.sec-tarifs,
.sec-tech {
    /* Pas de transform sur le wrapper — reveal sur les enfants */
}

/* Feature blocks stagger */
.features-grid .feature-block:nth-child(1) { transition-delay: 0s; }
.features-grid .feature-block:nth-child(2) { transition-delay: .12s; }
.features-grid .feature-block:nth-child(3) { transition-delay: .24s; }

/* Service cards stagger */
.svc-slide:nth-child(1) { transition-delay: 0s; }
.svc-slide:nth-child(2) { transition-delay: .08s; }
.svc-slide:nth-child(3) { transition-delay: .16s; }
.svc-slide:nth-child(4) { transition-delay: .24s; }

/* Stats stagger */
.stat-item-new { transition-delay: calc(var(--i, 0) * .12s); }

/* Proc cards */
.proc-card:nth-child(1) { transition-delay: 0s; }
.proc-card:nth-child(2) { transition-delay: .1s; }
.proc-card:nth-child(3) { transition-delay: .2s; }
.proc-card:nth-child(4) { transition-delay: .3s; }

/* ══════════════════════════════════════════════════
   ANIMATIONS SPÉCIALES
══════════════════════════════════════════════════ */

/* Counter animation */
.count-up { display: inline-block; }

/* Logo intro */
.logo-link {
    animation: logoEntrance .6s cubic-bezier(.34, 1.56, .64, 1) forwards;
    animation-delay: .2s;
    opacity: 0;
}
@keyframes logoEntrance {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Nav items stagger */
.nav-menu .nav-item {
    animation: navItemIn .5s ease forwards;
    opacity: 0;
}
.nav-menu .nav-item:nth-child(1) { animation-delay: .3s; }
.nav-menu .nav-item:nth-child(2) { animation-delay: .36s; }
.nav-menu .nav-item:nth-child(3) { animation-delay: .42s; }
.nav-menu .nav-item:nth-child(4) { animation-delay: .48s; }
.nav-menu .nav-item:nth-child(5) { animation-delay: .54s; }
.nav-menu .nav-item:nth-child(6) { animation-delay: .60s; }
.nav-menu .nav-item:nth-child(7) { animation-delay: .66s; }
.nav-menu .nav-item:nth-child(8) { animation-delay: .72s; }
@keyframes navItemIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Hero text entrance */
.slide-label   { animation: heroIn .7s ease .3s both; }
.slide-text h2 { animation: heroIn .7s ease .45s both; }
.slide-text p  { animation: heroIn .7s ease .6s both; }
.slide-actions { animation: heroIn .7s ease .75s both; }

@keyframes heroIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Slide transition override */
.slider-slide:not(.active) .slide-label,
.slider-slide:not(.active) .slide-text h2,
.slider-slide:not(.active) .slide-text p,
.slider-slide:not(.active) .slide-actions {
    animation: none;
    opacity: 0;
}
.slider-slide.active .slide-label { animation: heroIn .7s ease .2s both; }
.slider-slide.active .slide-text h2 { animation: heroIn .7s ease .35s both; }
.slider-slide.active .slide-text p  { animation: heroIn .7s ease .5s both; }
.slider-slide.active .slide-actions { animation: heroIn .7s ease .65s both; }

/* ══════════════════════════════════════════════════
   MICRO-INTERACTIONS — HOVER
══════════════════════════════════════════════════ */

/* Cards lift universelle */
.svc-card,
.atout-card,
.produit-card,
.temoignage-card,
.tarif-card,
.actu-card,
.marque-item,
.tech-card,
.proc-card-light {
    transition: transform .28s cubic-bezier(.4,0,.2,1),
                box-shadow .28s cubic-bezier(.4,0,.2,1),
                border-color .28s ease !important;
}

/* Boutons ripple effect */
.btn-primary-custom,
.btn-secondary-custom,
.btn-success-custom,
.btn-slide-primary,
.btn-cta,
.primary-btn {
    position: relative;
    overflow: hidden;
}
.btn-primary-custom::before,
.btn-secondary-custom::before,
.btn-success-custom::before,
.btn-slide-primary::before,
.btn-cta::before,
.primary-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.15);
    transform: translateX(-100%) skewX(-15deg);
    transition: transform .4s ease;
}
.btn-primary-custom:hover::before,
.btn-secondary-custom:hover::before,
.btn-success-custom:hover::before,
.btn-slide-primary:hover::before,
.btn-cta:hover::before,
.primary-btn:hover::before {
    transform: translateX(100%) skewX(-15deg);
}

/* Icon bounce on hover */
.feature-icon,
.proc-icon,
.atout-icon,
.solaire-list-icon {
    transition: transform .3s cubic-bezier(.34,1.56,.64,1) !important;
}

/* Nav link underline slide */
.nav-link {
    position: relative;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════
   SCROLL TOP BUTTON
══════════════════════════════════════════════════ */
.scroll-top,
#scroll-top,
#scrollTop {
    position: fixed;
    bottom: 88px;
    right: 24px;
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, #007870, #042d6b);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 6px 20px rgba(0,120,112,.35);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(.9);
    transition: all .3s cubic-bezier(.34,1.56,.64,1);
    z-index: 900;
    text-decoration: none;
}
.scroll-top.visible,
#scroll-top.visible,
#scrollTop.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.scroll-top:hover,
#scroll-top:hover,
#scrollTop:hover {
    transform: translateY(-4px) scale(1.06);
    box-shadow: 0 12px 32px rgba(0,120,112,.48);
    color: #fff;
}

/* ══════════════════════════════════════════════════
   LOADING SPINNER (fallback)
══════════════════════════════════════════════════ */
.loading-spinner {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(0,170,160,.2);
    border-top-color: #00aaa0;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════
   PAGE TRANSITION (entrée)
══════════════════════════════════════════════════ */
.page-enter {
    animation: pageIn .5s ease forwards;
}
@keyframes pageIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════
   SECTION REVEAL WRAPPERS
══════════════════════════════════════════════════ */
.section-title,
.svc-header,
.sec-header {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}
.section-title.is-visible,
.svc-header.is-visible,
.sec-header.is-visible {
    opacity: 1;
    transform: none;
}

/* Feature blocks */
.feature-block {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease, background .22s, box-shadow .22s !important;
}
.feature-block.is-visible { opacity: 1; transform: none; }

/* Stat items */
.stat-item-new {
    opacity: 0;
    transform: translateY(20px) scale(.96);
    transition: opacity .55s ease, transform .55s cubic-bezier(.34,1.56,.64,1);
}
.stat-item-new.is-visible { opacity: 1; transform: none; }

/* Proc cards */
.proc-card {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s ease, transform .6s ease !important;
}
.proc-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Solaire sides */
.solaire-texte {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity .8s ease, transform .8s ease;
}
.solaire-texte.visible { opacity: 1; transform: none; }

.solaire-image {
    opacity: 0;
    transform: translateX(32px) scale(.98);
    transition: opacity .8s ease .15s, transform .8s ease .15s;
}
.solaire-image.visible { opacity: 1; transform: none; }

/* SVC slides */
.svc-slide {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease, transform .5s ease !important;
}
.svc-slide.is-visible { opacity: 1; transform: none; }

/* Atout cards */
.atout-card {
    opacity: 0;
    transform: translateY(24px) scale(.97);
    transition: opacity .6s ease, transform .6s cubic-bezier(.34,1.2,.64,1) !important;
}
.atout-card.is-visible {
    opacity: 1;
    transform: none;
}

/* ══════════════════════════════════════════════════
   PERFORMANCE
══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .preloader-logo,
    .preloader-bar::after,
    .logo-link,
    .nav-menu .nav-item,
    .slide-label,
    .slide-text h2,
    .slide-text p,
    .slide-actions,
    [data-reveal],
    .reveal-up, .reveal-down, .reveal-left, .reveal-right,
    .reveal-fade, .reveal-scale, .reveal-zoom,
    .section-title, .svc-header, .sec-header,
    .feature-block, .stat-item-new, .proc-card,
    .solaire-texte, .solaire-image, .svc-slide, .atout-card {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .preloader { display: none !important; }
}