/* ═══════════════════════════════════════════
   YBN FRANCE — polish.css
   Animations & optimisations performance
   À inclure APRÈS style.css sur toutes les pages
═══════════════════════════════════════════ */

/* ──────────────────────────────────────────
   1. RESET PERFORMANCE — utiliser transform/opacity
   au lieu de top/left/width pour les animations
─────────────────────────────────────────── */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  /* Empêche le shift quand la scrollbar apparaît/disparaît */
  scrollbar-gutter: stable;
}

/* Désactiver les animations pour ceux qui préfèrent moins de mouvement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ──────────────────────────────────────────
   2. ANIMATIONS GLOBALES
─────────────────────────────────────────── */
@keyframes ybn-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ybn-fade-up {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes ybn-fade-down {
  from { opacity: 0; transform: translate3d(0, -16px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes ybn-fade-left {
  from { opacity: 0; transform: translate3d(-24px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes ybn-fade-right {
  from { opacity: 0; transform: translate3d(24px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes ybn-scale-in {
  from { opacity: 0; transform: scale3d(.92, .92, 1); }
  to   { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes ybn-glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(200,162,74,.2); }
  50%      { box-shadow: 0 0 35px rgba(200,162,74,.5); }
}

@keyframes ybn-shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

@keyframes ybn-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -8px, 0); }
}

/* ──────────────────────────────────────────
   3. CLASSES UTILITAIRES (à ajouter dans le HTML)
   Ex: <div class="reveal">…</div>
─────────────────────────────────────────── */
.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  will-change: opacity, transform;
}

/* Quand .visible est ajouté par polish.js via IntersectionObserver */
.reveal.visible          { animation: ybn-fade-in    .7s cubic-bezier(.4,0,.2,1) forwards; }
.reveal-up.visible       { animation: ybn-fade-up    .7s cubic-bezier(.4,0,.2,1) forwards; }
.reveal-left.visible     { animation: ybn-fade-left  .7s cubic-bezier(.4,0,.2,1) forwards; }
.reveal-right.visible    { animation: ybn-fade-right .7s cubic-bezier(.4,0,.2,1) forwards; }
.reveal-scale.visible    { animation: ybn-scale-in   .6s cubic-bezier(.34,1.56,.64,1) forwards; }

/* Delays pour staggering — ajouter data-delay="100" sur l'élément */
[data-delay="50"]  { animation-delay: 50ms !important; }
[data-delay="100"] { animation-delay: 100ms !important; }
[data-delay="150"] { animation-delay: 150ms !important; }
[data-delay="200"] { animation-delay: 200ms !important; }
[data-delay="300"] { animation-delay: 300ms !important; }
[data-delay="400"] { animation-delay: 400ms !important; }
[data-delay="500"] { animation-delay: 500ms !important; }
[data-delay="600"] { animation-delay: 600ms !important; }
[data-delay="800"] { animation-delay: 800ms !important; }

/* ──────────────────────────────────────────
   4. BOUTONS — micro-interactions
─────────────────────────────────────────── */
.btn,
button.btn,
.v4-btn-connect,
.v4-cta,
button[class*="btn-"] {
  transition:
    transform .2s cubic-bezier(.4,0,.2,1),
    box-shadow .25s ease,
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease;
  will-change: transform;
}

.btn:hover:not(:disabled),
button.btn:hover:not(:disabled),
.v4-btn-connect:hover:not(:disabled),
.v4-cta:hover:not(:disabled),
button[class*="btn-"]:hover:not(:disabled) {
  transform: translate3d(0, -2px, 0);
}

.btn:active:not(:disabled),
button.btn:active:not(:disabled),
button[class*="btn-"]:active:not(:disabled) {
  transform: translate3d(0, 0, 0) scale(.98);
  transition-duration: .08s;
}

/* Effet de brillance sur les CTA primaires */
.v4-cta-primary,
.btn-acc,
.btn-success {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.v4-cta-primary::before,
.btn-acc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 25%,
    rgba(255,255,255,.18) 50%,
    transparent 75%);
  background-size: 200% 100%;
  background-position: -100% 0;
  transition: background-position .8s ease;
  pointer-events: none;
  z-index: -1;
}

.v4-cta-primary:hover::before,
.btn-acc:hover::before {
  background-position: 200% 0;
}

/* ──────────────────────────────────────────
   5. CARTES — élévation au hover
─────────────────────────────────────────── */
[class*="card"],
[class*="-card"],
.cand-card,
.v4-shop-card,
.v4-feature {
  transition:
    transform .3s cubic-bezier(.4,0,.2,1),
    border-color .25s ease,
    box-shadow .3s ease;
  will-change: transform;
}

.v4-shop-card:hover,
.v4-feature:hover {
  transform: translate3d(0, -4px, 0);
}

/* ──────────────────────────────────────────
   6. LIENS NAV — underline animé
─────────────────────────────────────────── */
.v4-nav-links a {
  position: relative;
  transition: color .25s ease;
}

.v4-nav-links a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--acc, #c8a24a);
  transition: width .3s cubic-bezier(.4,0,.2,1), left .3s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

.v4-nav-links a:hover::after,
.v4-nav-links a.active::after {
  width: 80%;
  left: 10%;
}

/* ──────────────────────────────────────────
   7. INPUTS / TEXTAREAS — focus smooth
─────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 3px rgba(200,162,74,.15);
}

/* ──────────────────────────────────────────
   8. IMAGES — lazy fade-in
─────────────────────────────────────────── */
img {
  /* Optimisation rendering */
  image-rendering: -webkit-optimize-contrast;
}

img.lazy-load {
  opacity: 0;
  transition: opacity .6s ease;
}

img.lazy-load.loaded {
  opacity: 1;
}

/* ──────────────────────────────────────────
   9. SCROLLBAR custom (Webkit + Firefox)
─────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(200,162,74,.5) rgba(0,0,0,.2);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0,0,0,.25);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(200,162,74,.6), rgba(200,162,74,.3));
  border-radius: 100px;
  transition: background .2s;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(200,162,74,.85);
}

/* ──────────────────────────────────────────
   10. SÉLECTION TEXTE
─────────────────────────────────────────── */
::selection {
  background: rgba(200,162,74,.55);
  color: #fff;
}

/* ──────────────────────────────────────────
   11. PAGE TRANSITION (fade between pages)
─────────────────────────────────────────── */
body {
  animation: ybn-fade-in .35s ease-out;
}

body.page-leaving {
  animation: ybn-fade-in .25s ease-out reverse;
}

/* ──────────────────────────────────────────
   12. LOADING DOTS (pour formulaires/api)
─────────────────────────────────────────── */
.loading-dots {
  display: inline-flex;
  gap: 4px;
}

.loading-dots span {
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  animation: ybn-bounce 1.2s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes ybn-bounce {
  0%, 80%, 100% { transform: scale(.4); opacity: .5; }
  40%           { transform: scale(1);  opacity: 1; }
}

/* ──────────────────────────────────────────
   13. BACK-TO-TOP button
─────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(200,162,74,.9);
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  cursor: pointer;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 16px, 0);
  transition: opacity .3s, visibility .3s, transform .3s, background .2s, box-shadow .25s;
  box-shadow: 0 8px 25px rgba(200,162,74,.35);
  backdrop-filter: blur(10px);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
}

.back-to-top:hover {
  background: rgba(184,17,13,1);
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 12px 35px rgba(200,162,74,.55);
}

@media (max-width: 640px) {
  .back-to-top { bottom: 18px; right: 18px; width: 42px; height: 42px; }
}

/* ──────────────────────────────────────────
   14. CURSEUR — pointer sur tous les boutons
─────────────────────────────────────────── */
button,
[role="button"],
[onclick],
a {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

/* ──────────────────────────────────────────
   15. FONT RENDERING
─────────────────────────────────────────── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ──────────────────────────────────────────
   16. PERFORMANCE — content-visibility
   pour les longues sections (skip render hors-écran)
─────────────────────────────────────────── */
.v4-section,
section[class*="-section"] {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

/* ──────────────────────────────────────────
   17. NAVIGATION — backdrop blur amélioré au scroll
─────────────────────────────────────────── */
.v4-nav {
  transition: background-color .3s ease, backdrop-filter .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.v4-nav.scrolled {
  background: rgba(0,0,0,.85) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 4px 30px rgba(0,0,0,.3);
}

/* ──────────────────────────────────────────
   18. DROPDOWN keyframes (utilisé par shared.js)
─────────────────────────────────────────── */
@keyframes dropIn {
  from { opacity: 0; transform: translate3d(0, -8px, 0) scale(.96); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* ──────────────────────────────────────────
   19. NOTIFS — amélioration
─────────────────────────────────────────── */
#notif-wrap {
  position: fixed;
  top: 90px;
  right: 24px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 360px;
}

@keyframes notifIn {
  from { opacity: 0; transform: translate3d(40px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 640px) {
  #notif-wrap { top: 78px; right: 12px; left: 12px; max-width: none; }
}