/* =========================================================
   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 APPS — mini téléphone vivant + badges plateformes
   ========================================================= */
#rf .rf-appcard{ display:flex; align-items:center; gap:.85rem; }
#rf .rf-phone{ flex:0 0 auto; width:44px; height:78px; border-radius:10px; border:2px solid rgba(255,255,255,.65);
  padding:5px 4px; position:relative; background:rgba(0,0,0,.35); }
#rf .rf-phone:before{ content:""; position:absolute; top:3px; left:50%; transform:translateX(-50%);
  width:12px; height:3px; border-radius:99px; background:rgba(255,255,255,.5); }
#rf .rf-phone .scr{ position:absolute; inset:8px 4px 5px; border-radius:5px; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); }
#rf .rf-phone .bar{ position:absolute; left:5px; right:5px; height:5px; border-radius:3px; background:rgba(255,255,255,.35);
  transform:scaleX(0); transform-origin:0 50%; animation:rfBar 4.5s ease-in-out infinite; }
#rf .rf-phone .b1{ top:7px; animation-delay:.2s; }
#rf .rf-phone .b2{ top:17px; right:12px; animation-delay:.55s; }
#rf .rf-phone .b3{ top:27px; right:8px; animation-delay:.9s; }
@keyframes rfBar{ 0%,8%{ transform:scaleX(0); } 22%,78%{ transform:scaleX(1); } 92%,100%{ transform:scaleX(0); } }
#rf .rf-phone .fab{ position:absolute; right:5px; bottom:5px; width:11px; height:11px; border-radius:50%;
  background:linear-gradient(135deg,var(--acc,#FF8A3D),var(--acc2,#FF6B1A)); animation:rfFab 2.4s ease-in-out infinite; }
@keyframes rfFab{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.22); } }
#rf .rf-phone .notif{ position:absolute; top:4px; right:4px; width:7px; height:7px; border-radius:50%; background:#FF3B30;
  box-shadow:0 0 0 0 rgba(255,59,48,.55); animation:rfNotif 2s ease-out infinite; }
@keyframes rfNotif{ 70%,100%{ box-shadow:0 0 0 7px rgba(255,59,48,0); } }

#rf .rf-platforms b{ display:block; }
#rf .rf-chips-mini{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.5rem; }
#rf .rf-chips-mini span{ font-size:.6rem; font-weight:800; letter-spacing:.04em; padding:.3rem .55rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.35); color:#fff; transition:.35s; }
#rf .rf-chips-mini span:hover{ background:var(--acc,#FF8A3D); border-color:var(--acc,#FF8A3D); color:#160B03; }

@media(prefers-reduced-motion:reduce){
  #rf .rf-phone .bar, #rf .rf-phone .fab, #rf .rf-phone .notif{ animation:none !important; }
  #rf .rf-phone .bar{ transform:scaleX(1); }
}

/* 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; }
}