/* ============================================================
   RestauVert — magic.css
   Pass 3 : signature polish, micro-interactions, typography
   Loaded after premium.css + genius.css. Respects reduced-motion.
   ============================================================ */

/* ---------- Tokens (locaux, n'écrasent rien) ---------- */
:root {
  --magic-emerald: #1A4E30;
  --magic-emerald-2: #2a7a4a;
  --magic-gold: #D4A95C;
  --magic-gold-2: #b88a3e;
  --magic-ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   1. Cursor leaf trail
   ============================================================ */
.rv-leaf-trail {
  position: fixed;
  pointer-events: none;
  width: 16px;
  height: 16px;
  z-index: 9998;
  opacity: .85;
  transform: translate(-50%,-50%) rotate(0deg);
  animation: rv-leaf-fade 900ms var(--magic-ease) forwards;
  will-change: opacity, transform;
}
@keyframes rv-leaf-fade {
  0%   { opacity: .85; transform: translate(-50%,-50%) scale(.6) rotate(0deg); }
  30%  { opacity: .85; transform: translate(-50%,-50%) scale(1) rotate(15deg); }
  100% { opacity: 0;   transform: translate(-50%, calc(-50% + 22px)) scale(.7) rotate(40deg); }
}

/* ============================================================
   2. Scroll progress indicator
   ============================================================ */
.rv-magic-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--magic-gold), var(--magic-emerald));
  z-index: 10000;
  transition: width 80ms linear;
  pointer-events: none;
}

/* ============================================================
   3. Reveal animations (variants supplémentaires)
   ============================================================ */
.fade-left, .fade-right, .zoom-in, .blur-in {
  opacity: 0;
  transition: opacity .8s var(--magic-ease), transform .8s var(--magic-ease), filter .8s var(--magic-ease);
  will-change: opacity, transform, filter;
}
.fade-left  { transform: translateX(-32px); }
.fade-right { transform: translateX(32px); }
.zoom-in    { transform: scale(.92); }
.blur-in    { filter: blur(10px); }
.fade-left.in-view, .fade-right.in-view {
  opacity: 1; transform: translateX(0);
}
.zoom-in.in-view { opacity: 1; transform: scale(1); }
.blur-in.in-view { opacity: 1; filter: blur(0); }

/* Fallback: la classe .fade-up existe déjà, on s'assure juste du baseline */
.fade-up:not(.in-view) { will-change: opacity, transform; }

/* ============================================================
   5. Magnetic CTA principal de nav (bonus, déjà présent ailleurs)
   ============================================================ */
.nav-cta { transition: transform .2s var(--magic-ease); }

/* ============================================================
   6. Smart tooltip PDF
   ============================================================ */
a[href$=".pdf"]:not(.no-pdf-badge) {
  position: relative;
}
a[href$=".pdf"]:not(.no-pdf-badge)::after {
  content: " PDF";
  display: inline-block;
  margin-left: .35em;
  padding: 1px 6px;
  font-size: .68em;
  font-weight: 700;
  letter-spacing: .04em;
  background: var(--magic-gold);
  color: #1a1a1a;
  border-radius: 4px;
  vertical-align: middle;
  line-height: 1.4;
}
a[href$=".pdf"][data-tip]:hover::before,
a[href$=".pdf"]:hover::before {
  content: "Téléchargement PDF";
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: .72rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 50;
  font-weight: 500;
  letter-spacing: 0;
}

/* ============================================================
   7. Section wave separator
   ============================================================ */
.rv-wave-sep {
  position: relative;
  margin-top: -1px;
}
.rv-wave-sep::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 28px;
  background: inherit;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'><path d='M0,14 C200,0 400,28 600,14 C800,0 1000,28 1200,14 L1200,0 L0,0 Z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'><path d='M0,14 C200,0 400,28 600,14 C800,0 1000,28 1200,14 L1200,0 L0,0 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  opacity: .5;
  pointer-events: none;
}

/* ============================================================
   8. Hero gradient mesh
   ============================================================ */
.hero, .rv-hero, [data-hero-mesh] {
  position: relative;
  isolation: isolate;
}
.hero::after,
.rv-hero::after,
[data-hero-mesh]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(212,169,92,.18), transparent 42%),
    radial-gradient(circle at 82% 30%, rgba(26,78,48,.22),  transparent 48%),
    radial-gradient(circle at 30% 78%, rgba(42,122,74,.18), transparent 45%),
    radial-gradient(circle at 78% 80%, rgba(212,169,92,.12), transparent 50%);
  filter: blur(8px);
  opacity: .9;
  animation: rv-mesh 22s ease-in-out infinite alternate;
}
@keyframes rv-mesh {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2%, -1.5%, 0) scale(1.05); }
  100% { transform: translate3d(-2%, 1.5%, 0) scale(1.02); }
}
[data-theme="dark"] .hero::after,
[data-theme="dark"] .rv-hero::after,
[data-theme="dark"] [data-hero-mesh]::after { opacity: .6; }

/* ============================================================
   10. Typography polish
   ============================================================ */
body {
  letter-spacing: -0.005em;
}
h1, h2 {
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}
article p,
.rv-blog-content p,
.blog-content p,
main p {
  max-width: 65ch;
}
/* Drop cap: première lettre du premier <p> dans un article */
article > p:first-of-type::first-letter,
.rv-blog-content > p:first-of-type::first-letter {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 3.4em;
  line-height: .9;
  float: left;
  padding: 4px 10px 0 0;
  color: var(--magic-gold);
  font-weight: 600;
  font-variation-settings: "opsz" 144;
}

/* ============================================================
   11. Back-to-top floating button
   ============================================================ */
.rv-back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--magic-gold), var(--magic-gold-2));
  color: #1a1a1a;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .35s var(--magic-ease), transform .35s var(--magic-ease), box-shadow .2s;
  z-index: 9990;
  font-size: 1.1rem;
  font-weight: 700;
}
.rv-back-to-top.is-visible {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.rv-back-to-top:hover { box-shadow: 0 10px 28px rgba(212,169,92,.45); }
@media (max-width: 600px) {
  .rv-back-to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; }
}

/* ============================================================
   12. Image zoom on hover (subtle)
   ============================================================ */
.rv-card, .blog-card, .rv-resource-card, .pricing-card {
  overflow: hidden;
}
.rv-card img, .blog-card img, .rv-resource-card img, .pricing-card img {
  transition: transform 1.2s var(--magic-ease);
  will-change: transform;
}
.rv-card:hover img, .blog-card:hover img, .rv-resource-card:hover img, .pricing-card:hover img {
  transform: scale(1.04);
}

/* ============================================================
   13. Konami confetti + toast
   ============================================================ */
.rv-confetti {
  position: fixed; inset: 0; pointer-events: none; z-index: 10001;
}
.rv-confetti span {
  position: absolute;
  top: -20px;
  width: 10px; height: 14px;
  opacity: .9;
  animation: rv-confetti-fall linear forwards;
}
@keyframes rv-confetti-fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
.rv-toast {
  position: fixed;
  left: 50%; bottom: 30px;
  transform: translateX(-50%) translateY(20px);
  background: linear-gradient(135deg, var(--magic-emerald), #0f3a23);
  color: #fff;
  padding: 14px 22px;
  border-radius: 14px;
  font-size: .92rem;
  box-shadow: 0 14px 38px rgba(0,0,0,.28);
  border: 1px solid rgba(212,169,92,.4);
  z-index: 10002;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
  max-width: 92%;
  text-align: center;
}
.rv-toast.is-visible {
  opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto;
}
.rv-toast b { color: var(--magic-gold); }

/* ============================================================
   14. Page transition fade
   ============================================================ */
body.rv-page-leaving {
  opacity: 0;
  transition: opacity .2s ease-out;
}

/* ============================================================
   15. Improved focus
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--magic-gold);
  outline-offset: 4px;
  border-radius: 4px;
  transition: outline-offset .15s var(--magic-ease);
}
button:focus-visible, a:focus-visible {
  outline-offset: 4px;
}

/* ============================================================
   16. Card 3D tilt (la classe is-tilting est posée en JS)
   ============================================================ */
.pricing-card, .rv-tool-panel summary {
  transform-style: preserve-3d;
  transition: transform .25s var(--magic-ease);
  will-change: transform;
}

/* ============================================================
   17. Blockquote signature (blog only)
   ============================================================ */
article blockquote,
.rv-blog-content blockquote {
  position: relative;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--magic-emerald);
  border-left: 4px solid var(--magic-gold);
  padding: 1.25rem 1.25rem 1.25rem 3.4rem;
  margin: 2rem 0;
  background: linear-gradient(90deg, rgba(212,169,92,.08), transparent 70%);
  border-radius: 0 12px 12px 0;
}
article blockquote::before,
.rv-blog-content blockquote::before {
  content: "";
  position: absolute;
  left: 1rem; top: 1.1rem;
  width: 22px; height: 22px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231A4E30'><path d='M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3 5.02 0 8-3.5 8-7.5 0-1.78-.71-3.4-1.86-4.59L17 8M3 10c4.68 0 8 4.31 8 7.5 0 1.16-.5 2.5-1.5 3.5l-1.5-3c-.5.5-1.16 1-2 1-1.66 0-3-1.34-3-3 0-2.5 0-3.5 0-6'/></svg>") no-repeat center / contain;
  opacity: .85;
}
[data-theme="dark"] article blockquote,
[data-theme="dark"] .rv-blog-content blockquote {
  color: #cfe9d7;
  background: linear-gradient(90deg, rgba(212,169,92,.12), transparent 70%);
}

/* ============================================================
   18. Last-updated badge
   ============================================================ */
.rv-updated-badge {
  display: inline-block;
  background: linear-gradient(135deg, rgba(212,169,92,.18), rgba(212,169,92,.32));
  color: var(--magic-gold-2);
  border: 1px solid rgba(212,169,92,.4);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 1rem;
}
[data-theme="dark"] .rv-updated-badge {
  color: var(--magic-gold);
  background: rgba(212,169,92,.12);
}

/* ============================================================
   19. Theme mode hint
   ============================================================ */
.rv-theme-hint {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .65rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--magic-gold-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  white-space: nowrap;
}
#themeToggle { position: relative; }
#themeToggle:hover .rv-theme-hint,
#themeToggle:focus-visible .rv-theme-hint { opacity: 1; }

/* ============================================================
   20. Footer flourish
   ============================================================ */
.rv-magic-flourish {
  display: block;
  text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: .85rem;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  opacity: .85;
}
.rv-magic-flourish .heart {
  color: var(--magic-gold);
  display: inline-block;
  animation: rv-heart 2.4s ease-in-out infinite;
}
@keyframes rv-heart {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

/* ============================================================
   Reduced motion : on calme tout
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .rv-leaf-trail,
  .hero::after, .rv-hero::after, [data-hero-mesh]::after,
  .rv-magic-flourish .heart {
    animation: none !important;
  }
  .fade-left, .fade-right, .zoom-in, .blur-in {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .rv-card img, .blog-card img, .rv-resource-card img, .pricing-card img {
    transition: none !important;
  }
}

/* ============================================================
   Embed mode (?embed=1) : on désactive les overlays globaux
   ============================================================ */
body.rv-embed .rv-magic-progress,
body.rv-embed .rv-back-to-top,
body.rv-embed .rv-leaf-trail { display: none !important; }