/* =========================================================
   DESIGN CHIC MINIMAL + ANIMATIONS AVANCÉES SUR LES CARTES
   (bloc additionnel — le code d'origine reste intact)
   Principe : peu d'effets, mais des effets précis et orchestrés.
   ========================================================= */

/* ---------- Raffinements minimalistes globaux ---------- */
#rf{ --ease:cubic-bezier(.22,1,.36,1); }
#rf .rf-k{ letter-spacing:.22em; font-weight:700; }
#rf .rf-panel, #rf .rf-scard, #rf .rf-metric, #rf .rf-img-card, #rf .rf-photo{
  border-color:rgba(0,0,0,.08); border-radius:22px;
}
[data-theme="dark"] #rf .rf-panel,[data-theme="dark"] #rf .rf-scard,
[data-theme="dark"] #rf .rf-metric,[data-theme="dark"] #rf .rf-img-card,
[data-theme="dark"] #rf .rf-photo{ border-color:rgba(255,255,255,.1); }
#rf .rf-scard:hover{ transform:translateY(-6px); rotate:0deg; box-shadow:0 30px 60px -50px rgba(0,0,0,.5); }
#rf .rf-wave{ display:none; } /* on retire le blob décoratif : plus sobre */

/* Images : noir & blanc par défaut, couleur au survol — signature chic */
#rf .rf-img-card img, #rf .rf-photo img{
  filter:grayscale(1) contrast(1.04);
  transition:filter 1s var(--ease), transform 1.2s var(--ease);
}
#rf .rf-img-card:hover img, #rf .rf-photo:hover img{ filter:grayscale(0) contrast(1); }
#rf .rf-hero-img img{ filter:grayscale(.35); }

/* ---------- Barre de progression (fine, discrète) ---------- */
#rfProgress{ position:fixed; top:0; left:0; height:2px; width:100%; z-index:9999;
  transform-origin:0 50%; transform:scaleX(0); pointer-events:none;
  background:linear-gradient(90deg,var(--acc,#FF8A3D),var(--acc2,#FF6B1A)); }

/* ---------- H1 lettre par lettre (inchangé, plus doux) ---------- */
#rf .rf-ch{ display:inline-block; opacity:0; transform:translateY(.6em); filter:blur(5px); }
#rf .rf-ch.on{ opacity:1; transform:none; filter:blur(0);
  transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s; }

/* =========================================================
   CARTES SERVICES (.rf-scard) — chorégraphie complète
   1. Entrée : révélation par clip-path + trait qui se dessine
   2. Survol : bordure lumineuse qui se trace, contenu qui se
      réorganise, pastille qui pivote, flèche qui apparaît
   ========================================================= */

/* 1 — Entrée orchestrée (remplace le simple fade du data-rv) */
.rf-js #rf .rf-cards .rf-scard[data-rv]{
  opacity:0; transform:translateY(34px); filter:none;
  clip-path:inset(14% 6% 14% 6% round 22px);
}
.rf-js #rf .rf-cards .rf-scard[data-rv].in{
  opacity:1; transform:none; clip-path:inset(0 0 0 0 round 22px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),clip-path 1.1s var(--ease);
  transition-delay:var(--d,0s);
}

/* Trait supérieur qui se dessine à l'entrée */
#rf .rf-scard{ isolation:isolate; }
#rf .rf-scard .rf-line{
  position:absolute; left:1rem; right:1rem; top:0; height:1px;
  background:linear-gradient(90deg,var(--acc,#FF8A3D),transparent);
  transform:scaleX(0); transform-origin:0 50%;
}
#rf .rf-scard.in .rf-line{ transform:scaleX(1); transition:transform 1.2s var(--ease) calc(var(--d,0s) + .45s); }

/* 2 — Bordure qui se trace au survol (conic + @property) */
@property --tr{ syntax:'<percentage>'; initial-value:0%; inherits:false; }
#rf .rf-scard:before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; z-index:1;
  background:conic-gradient(from -90deg, var(--acc,#FF8A3D) var(--tr), transparent 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; --tr:0%; transition:--tr 1s var(--ease), opacity .4s; opacity:0;
}
#rf .rf-scard:hover:before{ --tr:100%; opacity:1; }
#rf .rf-scard.accent:before{ background:conic-gradient(from -90deg, #fff var(--tr), transparent 0); }

/* Halo qui suit la souris (très léger) */
#rf .rf-scard:after, #rf .rf-metric:after, #rf .rf-panel:after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .5s;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(255,138,61,.1), transparent 60%);
}
#rf .rf-metric{ position:relative; overflow:hidden; }
#rf .rf-scard:hover:after, #rf .rf-metric:hover:after, #rf .rf-panel:hover:after{ opacity:1; }

/* Chorégraphie du contenu au survol */
#rf .rf-scard .circle{ transition:transform .7s var(--ease), background .5s, color .5s; }
#rf .rf-scard:hover .circle{ transform:rotate(360deg) scale(1.08); background:var(--acc); color:#160B03; }
#rf .rf-scard.accent:hover .circle{ background:#000; color:#fff; }
#rf .rf-scard.dark:hover .circle{ background:#fff; color:#000; }
#rf .rf-scard h3{ transition:transform .6s var(--ease); }
#rf .rf-scard:hover h3{ transform:translateY(-4px); }
#rf .rf-scard p{ transition:transform .6s var(--ease) .05s, color .5s; }
#rf .rf-scard:hover p{ transform:translateY(-4px); }
#rf .rf-scard:hover p{ color:var(--ink); }
#rf .rf-scard.dark:hover p{ color:rgba(255,255,255,.85); }
#rf .rf-scard.accent:hover p{ color:rgba(0,0,0,.85); }

/* Flèche cachée qui apparaît en bas de carte */
#rf .rf-scard .rf-go{
  position:absolute; right:1rem; bottom:1rem; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; font-size:.85rem;
  border:1px solid currentColor; opacity:0; transform:translateY(8px) rotate(-45deg);
  transition:opacity .5s var(--ease) .08s, transform .55s var(--ease) .08s;
}
#rf .rf-scard:hover .rf-go{ opacity:1; transform:translateY(0) rotate(0deg); }

/* Reflet lumineux qui balaie la carte une seule fois au survol */
#rf .rf-scard .rf-sheen{
  position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:inherit;
}
#rf .rf-scard .rf-sheen:before{
  content:""; position:absolute; top:-20%; bottom:-20%; width:38%; left:-60%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-18deg);
}
#rf .rf-scard:hover .rf-sheen:before{ animation:rfSheen 1s var(--ease) forwards; }
@keyframes rfSheen{ to{ left:130%; } }

/* =========================================================
   AUTRES CARTES — mêmes principes, dosés
   ========================================================= */

/* Métriques : trait accent qui se dessine à l'apparition */
#rf .rf-metric{ overflow:hidden; }
#rf .rf-metric:before{
  content:""; position:absolute; left:1rem; top:0; height:2px; width:34px;
  background:var(--acc,#FF8A3D); transform:scaleX(0); transform-origin:0 50%; border-radius:99px;
}
#rf [data-rv].in .rf-metric:before, #rf .rf-metric.in:before{
  transform:scaleX(1); transition:transform .9s var(--ease) .5s; }
#rf .rf-metric{ transition:transform .5s var(--ease), border-color .5s; }
#rf .rf-metric:hover{ transform:translateY(-4px); border-color:rgba(255,138,61,.5); }

/* Cartes flottantes du hero : verre plus fin */
#rf .rf-float-card{ border-radius:16px; background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.18); }

/* Lignes de la timeline : fond qui glisse + flèche remplie */
#rf .rf-row{ position:relative; }
#rf .rf-row:before{
  content:""; position:absolute; inset:0; background:var(--soft,#FFF6EF); z-index:-1;
  border-radius:14px; transform:scaleX(0); transform-origin:0 50%; transition:transform .55s var(--ease);
}
#rf .rf-row:hover:before{ transform:scaleX(1); }
#rf .rf-row:hover{ padding-left:1rem; padding-right:.6rem; color:var(--ink); border-color:transparent; }
#rf .rf-row:hover h3{ color:var(--acc); }
#rf .rf-row .go{ transition:.45s var(--ease); }
#rf .rf-row:hover .go{ background:var(--ink); color:var(--paper); transform:rotate(45deg); }

/* Carte finale : liseré tournant très fin et lent (présence discrète) */
@property --rot{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
#rf .rf-final-card:after{
  content:""; position:absolute; inset:-1px; z-index:0; border-radius:inherit; padding:1px;
  background:conic-gradient(from var(--rot,0deg), transparent 0 74%, rgba(255,138,61,.9) 86%, transparent 94%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:rfRot 9s linear infinite;
}
@keyframes rfRot{ to{ --rot:360deg; } }
@supports not (background:conic-gradient(from var(--rot,0deg),#000,#fff)){ #rf .rf-final-card:after{ display:none; } }

/* Boutons : sobres, un seul accent — reflet périodique sur le CTA principal */
#rf .rf-btn{ position:relative; overflow:hidden; }
#rf .rf-btn:active{ transform:translateY(-1px) scale(.98); }
#rf .rf-btn.primary:before{
  content:""; position:absolute; top:-30%; bottom:-30%; width:34%; left:-60%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg); animation:rfBtnSheen 4.5s ease-in-out 2s infinite;
}
@keyframes rfBtnSheen{ 0%,58%{ left:-60%; } 78%,100%{ left:130%; } }

/* Soulignement fin des titres à l'apparition */
#rf .rf-head h2, #rf .rf-result h2, #rf .rf-panel h2{ position:relative; display:inline-block; }
#rf .rf-head h2:after, #rf .rf-result h2:after, #rf .rf-panel h2:after{
  content:""; position:absolute; left:0; bottom:-.16em; height:1px; width:100%;
  background:currentColor; opacity:.25; transform:scaleX(0); transform-origin:0 50%;
}
#rf [data-rv].in h2:after, #rf .rf-head[data-rv].in h2:after{
  transform:scaleX(1); transition:transform 1.2s var(--ease) .4s; }


/* =========================================================
   SIGNATURE COMMUNITY — bulles de réactions qui remontent
   (❤ like · 💬 commentaire · ↗ partage) — évoque l'engagement
   ========================================================= */
#rf .rf-reacts{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
#rf .rf-react{
  position:absolute; bottom:-40px; left:var(--x,50%);
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  font-size:1rem; color:#fff;
  background:linear-gradient(135deg,var(--acc,#FF8A3D),var(--acc2,#FF6B1A));
  box-shadow:0 10px 26px -10px rgba(255,107,26,.7);
  opacity:0; animation:rfReact var(--t,8s) ease-in infinite; animation-delay:var(--dl,0s);
}
#rf .rf-react.alt{ background:rgba(255,255,255,.16); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.28); }
@keyframes rfReact{
  0%{ transform:translateY(0) scale(.5); opacity:0; }
  12%{ opacity:1; transform:translateY(-10px) scale(1); }
  70%{ opacity:.9; }
  100%{ transform:translateY(-62vh) scale(.7); opacity:0; }
}

/* pastilles réseaux : casse conservée (IG, in, TT) */
#rf .rf-scard .circle{ font-family:"Schibsted Grotesk",system-ui,sans-serif; font-weight:800; font-size:.9rem; }


/* =========================================================
   ANIMATIONS AVANCÉES — orientées community management
   A. Notifications sociales "en direct" (toasts qui glissent)
   B. Pastilles d'activité qui pulsent sur les cartes réseaux
   C. Courbe d'engagement qui se dessine
   D. Cœur qui jaillit au survol des cartes
   ========================================================= */

/* A — Toasts de notifications */
#rf .rf-notes{ position:absolute; top:clamp(1rem,4vw,2rem); right:clamp(1rem,4vw,2rem); z-index:4;
  width:min(270px,58vw); pointer-events:none; }
#rf .rf-note{ display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border-radius:14px;
  background:rgba(255,255,255,.14); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.24);
  color:#fff; box-shadow:0 20px 40px -26px rgba(0,0,0,.8);
  transform:translateX(130%) scale(.96); opacity:0;
  transition:transform .65s cubic-bezier(.16,1,.3,1), opacity .55s; }
#rf .rf-note.show{ transform:none; opacity:1; }
#rf .rf-note .av{ width:28px; height:28px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  font-size:.85rem; background:linear-gradient(135deg,var(--acc,#FF8A3D),var(--acc2,#FF6B1A)); color:#160B03; }
#rf .rf-note b{ display:block; font-size:.72rem; line-height:1.2; }
#rf .rf-note em{ display:block; font-style:normal; font-size:.62rem; color:rgba(255,255,255,.72); margin-top:.1rem; }
@media(max-width:900px){ #rf .rf-notes{ display:none; } } /* évite le chevauchement sur mobile */

/* B — Pastilles d'activité (ping) sur les cartes réseaux */
#rf .rf-cards .rf-scard .circle{ position:relative; overflow:visible; }
#rf .rf-cards .rf-scard .circle:before{ content:""; position:absolute; top:-2px; right:-2px;
  width:9px; height:9px; border-radius:50%; background:var(--acc,#FF8A3D);
  box-shadow:0 0 0 2px var(--card,#fff); z-index:2; }
#rf .rf-cards .rf-scard.accent .circle:before{ box-shadow:0 0 0 2px #FF8A3D; background:#160B03; }
#rf .rf-cards .rf-scard.dark .circle:before{ box-shadow:0 0 0 2px #050505; }
#rf .rf-cards .rf-scard .circle:after{ content:""; position:absolute; top:-2px; right:-2px;
  width:9px; height:9px; border-radius:50%; background:var(--acc,#FF8A3D); z-index:1;
  animation:rfPing 2s ease-out infinite; animation-delay:var(--pg,0s); }
@keyframes rfPing{ 0%{ transform:scale(1); opacity:.55; } 80%,100%{ transform:scale(3); opacity:0; } }

/* C — Courbe d'engagement */
#rf .rf-spark-wrap{ margin:.2rem 0 1rem; border:1px solid var(--line); border-radius:20px;
  padding:.85rem 1rem .5rem; background:var(--card); position:relative; overflow:hidden; }
#rf .rf-spark-cap{ display:flex; align-items:center; justify-content:space-between; }
#rf .rf-spark-cap span{ font-size:.62rem; text-transform:uppercase; letter-spacing:.14em; font-weight:800; color:var(--dim); }
#rf .rf-spark-up{ font-size:.75rem; font-weight:800; color:var(--acc,#FF8A3D); opacity:0; transform:translateY(4px);
  transition:opacity .5s var(--ease) 1.5s, transform .5s var(--ease) 1.5s; }
#rf .rf-spark-wrap.on .rf-spark-up{ opacity:1; transform:none; }
#rf .rf-spark-chart{ display:block; width:100%; height:66px; margin-top:.4rem; overflow:visible; }
#rf .rf-spark-line{ fill:none; stroke:var(--acc,#FF8A3D); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:620; stroke-dashoffset:620; }
#rf .rf-spark-wrap.on .rf-spark-line{ stroke-dashoffset:0; transition:stroke-dashoffset 1.9s var(--ease) .1s; }
#rf .rf-spark-area{ fill:url(#rfSparkFill); opacity:0; }
#rf .rf-spark-wrap.on .rf-spark-area{ opacity:1; transition:opacity .9s ease 1s; }
#rf .rf-spark-dot{ fill:var(--acc,#FF8A3D); opacity:0; }
#rf .rf-spark-wrap.on .rf-spark-dot{ opacity:1; transition:opacity .4s 1.7s; }
#rf .rf-spark-wrap.on .rf-spark-dot{ animation:rfDotPulse 2s ease-out 2s infinite; }
@keyframes rfDotPulse{ 0%{ filter:drop-shadow(0 0 0 rgba(255,138,61,.7)); } 60%,100%{ filter:drop-shadow(0 0 8px rgba(255,138,61,0)); } }

/* D — Cœur qui jaillit (élément injecté en JS) */
#rf .rf-heart{ position:absolute; z-index:5; pointer-events:none; font-size:1.1rem; will-change:transform,opacity;
  animation:rfHeart .9s ease-out forwards; }
@keyframes rfHeart{ 0%{ transform:translateY(0) scale(.4); opacity:0; }
  20%{ opacity:1; transform:translateY(-6px) scale(1.1); }
  100%{ transform:translateY(-46px) scale(.85); opacity:0; } }

/* Accessibilité : tout se coupe si l'utilisateur préfère moins de mouvement */
@media(prefers-reduced-motion:reduce){
  #rfProgress{ display:none !important; }
  #rf .rf-ch{ opacity:1 !important; transform:none !important; filter:none !important; }
  .rf-js #rf .rf-cards .rf-scard[data-rv]{ opacity:1; transform:none; clip-path:none; }
  #rf .rf-scard .rf-line{ transform:scaleX(1); }
  #rf .rf-final-card:after, #rf .rf-btn.primary:before{ animation:none !important; }
  #rf .rf-img-card img, #rf .rf-photo img{ filter:none; }
  #rf .rf-reacts, #rf .rf-notes{ display:none !important; }
  #rf .rf-cards .rf-scard .circle:after{ animation:none !important; }
  #rf .rf-spark-line{ stroke-dashoffset:0 !important; }
  #rf .rf-spark-area, #rf .rf-spark-dot, #rf .rf-spark-up{ opacity:1 !important; transform:none !important; }
  #rf .rf-spark-dot{ animation:none !important; }
}