/* ═══ FX Pack — Barber c l'hair : micro-animations premium ═══ */

/* Barre de progression de lecture */
.fx-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 100%;
    transform-origin: 0 50%; transform: scaleX(0);
    background: linear-gradient(90deg, var(--accent-gold-dark, #b8860b), var(--accent-gold, #d4af37), var(--accent-gold-light, #f3d27a));
    box-shadow: 0 0 12px var(--accent-gold-glow, rgba(212,175,55,.5));
    z-index: 10000; pointer-events: none;
}

/* Titre hero : reflet doré qui balaie le texte */
.hero-title span {
    background: linear-gradient(110deg, currentColor 35%, var(--accent-gold-light, #f3d27a) 50%, currentColor 65%);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fxShine 5s ease-in-out infinite;
}
@keyframes fxShine { 0%, 20% { background-position: 100% 0; } 60%, 100% { background-position: 0 0; } }

/* Bouton principal : halo pulsé + reflet au survol */
.btn-accent { position: relative; overflow: hidden; isolation: isolate; }
.btn-accent::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .7s ease;
}
.btn-accent:hover::after { transform: translateX(120%); }
.hero-btns .btn-accent { animation: fxPulse 2.8s ease-out infinite; }
@keyframes fxPulse {
    0% { box-shadow: 0 0 0 0 var(--accent-gold-glow, rgba(212,175,55,.5)); }
    70%, 100% { box-shadow: 0 0 0 16px transparent; }
}
.btn { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .3s, color .3s; }

/* Cartes services : inclinaison 3D + spot lumineux qui suit la souris */
@media (hover: hover) and (pointer: fine) {
    .service-card { transform-style: preserve-3d; will-change: transform; position: relative; }
    .service-card.fx-tilting { transition: transform .08s linear !important; }
    .service-card::before {
        content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
        background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.09), transparent 45%);
        opacity: 0; transition: opacity .3s; z-index: 1;
    }
    .service-card:hover::before { opacity: 1; }

    .gallery-item img { transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .5s; }
    .gallery-item:hover img { transform: scale(1.07); filter: saturate(1.15) contrast(1.05); }
}

/* Compteurs */
.stat-num { font-variant-numeric: tabular-nums; }

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
    .hero-title span, .hero-btns .btn-accent { animation: none; }
    .fx-progress { display: none; }
    .fx-intro, .fx-dust, .fx-cursor { display: none !important; }
    .gallery-item.reveal, .section-title::after { clip-path: none !important; transform: none !important; }
}

/* ═══ V2 — encore plus d'effets ═══ */

/* Intro : rideau noir + logo doré au chargement */
.fx-intro {
    position: fixed; inset: 0; z-index: 10001; display: grid; place-items: center;
    background: #000; transition: clip-path 1s cubic-bezier(.77,0,.18,1);
    clip-path: inset(0 0 0 0);
}
.fx-intro.fx-out { clip-path: inset(0 0 100% 0); }
.fx-intro-logo {
    font-family: 'Playfair Display', serif; font-size: clamp(2rem, 7vw, 4rem); font-style: italic;
    letter-spacing: .04em; color: transparent;
    background: linear-gradient(110deg, #6b5420 30%, var(--accent-gold-light, #f3d27a) 50%, #6b5420 70%);
    background-size: 250% 100%; -webkit-background-clip: text; background-clip: text;
    animation: fxShine 1.4s ease-in-out forwards, fxIntroIn .8s ease-out both;
}
.fx-intro-line {
    position: absolute; top: calc(50% + 2.6rem); left: 50%; height: 1px; width: 160px; margin-left: -80px;
    background: var(--accent-gold, #d4af37); transform: scaleX(0); animation: fxLine 1s .3s ease-out forwards;
}
@keyframes fxIntroIn { from { opacity: 0; transform: translateY(20px) scale(.96); filter: blur(8px); } }
@keyframes fxLine { to { transform: scaleX(1); } }

/* Poussière dorée dans le hero */
.hero { position: relative; }
.fx-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

/* Halo lumineux qui suit la souris */
.fx-cursor {
    position: fixed; top: 0; left: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px;
    border-radius: 50%; pointer-events: none; z-index: 0; mix-blend-mode: screen;
    background: radial-gradient(circle, var(--accent-gold-glow, rgba(212,175,55,.18)) 0%, transparent 60%);
    opacity: .55; transition: opacity .4s;
}

/* Titres de section : trait doré qui se dessine */
.section-title { position: relative; }
.section-title::after {
    content: ""; display: block; width: 70px; height: 2px; margin: .8rem auto 0;
    background: linear-gradient(90deg, transparent, var(--accent-gold, #d4af37), transparent);
    transform: scaleX(0); transition: transform 1s .3s cubic-bezier(.2,.8,.2,1);
}
.about-content .section-title::after { margin-left: 0; }
.section-title.active::after { transform: scaleX(1); }

/* Galerie : apparition en rideau */
.gallery-item.reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.77,0,.18,1), opacity .6s; }
.gallery-item.reveal.active { clip-path: inset(0 0 0 0); }

/* Onde au clic sur les boutons (mobile + ordi) */
.btn { position: relative; overflow: hidden; }
.fx-ripple {
    position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0);
    background: rgba(255,255,255,.4); animation: fxRipple .65s ease-out forwards;
}
@keyframes fxRipple { to { transform: scale(2.6); opacity: 0; } }

/* Cartes services : bordure dorée animée sur la carte vedette */
.service-card.featured { isolation: isolate; }
.service-card.featured::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; z-index: -1;
    background: conic-gradient(from var(--fx-a, 0deg), transparent 0 70%, var(--accent-gold, #d4af37) 85%, transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: fxSpin 4s linear infinite;
}
@property --fx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes fxSpin { to { --fx-a: 360deg; } }

/* ═══ Visionneuse photo ═══ */
.lightbox { opacity: 0; transition: opacity .25s ease; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(0,0,0,.92) !important; cursor: zoom-out; touch-action: none; }
.lightbox.lb-open { opacity: 1; }
.lightbox-content { transition: transform .25s ease; user-select: none; -webkit-user-drag: none; box-shadow: 0 30px 80px rgba(0,0,0,.6); border-radius: 12px; }
.lightbox-content.lb-in { animation: lbIn .35s cubic-bezier(.2,.8,.2,1); }
@keyframes lbIn { from { opacity: 0; transform: scale(.94); } }
.lightbox-close {
    position: fixed !important; top: calc(env(safe-area-inset-top, 0px) + 16px) !important; right: 16px !important;
    width: 48px; height: 48px; display: grid !important; place-items: center; line-height: 1 !important;
    font-size: 30px !important; color: #fff !important; border-radius: 50%; z-index: 3;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); cursor: pointer;
    transition: background .2s, transform .2s;
}
.lightbox-close:hover { background: var(--accent-gold, #d4af37); color: #000 !important; transform: rotate(90deg); }
.lightbox-nav {
    position: fixed; top: 50%; transform: translateY(-50%); z-index: 3; width: 52px; height: 52px; border-radius: 50%;
    font-size: 34px; line-height: 1; color: #fff; cursor: pointer;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); transition: background .2s;
}
.lightbox-nav:hover { background: var(--accent-gold, #d4af37); color: #000; }
.lightbox-prev { left: 16px; } .lightbox-next { right: 16px; }
.lightbox-counter, .lightbox-hint {
    position: fixed; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.75); font-size: .85rem; pointer-events: none; z-index: 3;
}
.lightbox-counter { top: calc(env(safe-area-inset-top, 0px) + 28px); letter-spacing: .1em; }
.lightbox-hint { bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); animation: lbHint 3s ease forwards; }
@keyframes lbHint { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 600px) { .lightbox-nav { width: 42px; height: 42px; font-size: 28px; } .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } }