/* ==========================================================================
   Epsylon Tools — REFONTE (accueil + hubs de catégorie)
   Toutes les classes sont préfixées « rf- » pour ne jamais entrer en collision
   avec les composants existants (core / layout / components / home).
   Aucun token existant n'est redéfini : on consomme --bg, --text, --accent…
   ========================================================================== */

.rf{
  --a: var(--accent);
  --a-soft: var(--glow);
  --tx3: color-mix(in srgb, var(--text2) 76%, var(--bg));
  --line2: color-mix(in srgb, var(--border) 55%, var(--text2));
}
.rf-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
/* .tool-card et .rf-cat portent un display explicite : sans !important,
   l'attribut hidden posé par le filtrage n'aurait aucun effet. */
.tool-card[hidden],.rf-cat[hidden],.rf-empty[hidden]{display:none!important}
.rf .rf-mono,.rf-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.rf-eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}

/* ---------- HERO ---------- */
.rf-hero{padding:70px 0 18px;display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:56px;align-items:start}
.rf-hero h1{font-family:'Outfit',sans-serif;font-size:clamp(2.15rem,4.5vw,3.4rem);font-weight:700;line-height:1.06;letter-spacing:-.032em;text-wrap:balance;margin:0}
.rf-hero h1 .rf-grad{background:linear-gradient(102deg,var(--accent),var(--accent2) 52%,var(--accent3));-webkit-background-clip:text;background-clip:text;color:transparent}
.rf-sub{color:var(--text2);font-size:1.05rem;margin:20px 0 0;max-width:34em;line-height:1.65}
.rf-sub strong{color:var(--text);font-weight:600}
.rf-search{margin-top:28px;position:relative;max-width:520px}
.rf-search input{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:13px;padding:15px 15px 15px 45px;color:var(--text);font-family:inherit;font-size:.96rem;transition:border-color .16s,box-shadow .16s}
.rf-search input::placeholder{color:var(--tx3)}
.rf-search input:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 4px var(--a-soft)}
.rf-search-ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--tx3);font-size:.95rem;pointer-events:none}
.rf-note{margin:11px 2px 0;font-size:.78rem;color:var(--tx3);font-family:var(--mono)}
.rf-note b{color:var(--text2);font-weight:500}

/* ---------- MONITEUR RÉSEAU ---------- */
.rf-mon{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:19px 21px 17px;box-shadow:var(--shadow)}
.rf-mon-hd{display:flex;align-items:baseline;gap:12px;padding-bottom:13px;border-bottom:1px solid var(--border)}
.rf-mon-hd .rf-eyebrow{color:var(--text2)}
.rf-mon-elapsed{margin-left:auto;font-family:var(--mono);font-size:.68rem;color:var(--tx3);letter-spacing:.1em;white-space:nowrap}
.rf-mon-elapsed b{color:var(--text2);font-weight:500;font-variant-numeric:tabular-nums}
.rf-mon-rows{display:grid;gap:1px;background:var(--border);border-radius:9px;overflow:hidden;margin:14px 0 0}
.rf-mon-row{display:flex;align-items:baseline;gap:12px;background:var(--bg2);padding:10px 13px}
.rf-mon-row span{font-family:var(--mono);font-size:.74rem;color:var(--tx3);flex:1;min-width:0}
.rf-mon-row b{font-family:var(--mono);font-size:1.02rem;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.rf-mon-row.rf-zero b{color:var(--accent)}
.rf-mon-chart{margin-top:14px;height:54px;position:relative;border-radius:8px;background:var(--bg3);overflow:hidden;border:1px solid var(--border)}
.rf-mon-chart svg{position:absolute;inset:0;width:100%;height:100%}
.rf-mon-base{stroke:var(--accent);stroke-width:2.2;fill:none}
.rf-mon-grid{stroke:var(--line2);stroke-width:1;stroke-dasharray:2 5;opacity:.75}
.rf-mon-axis{position:absolute;left:10px;top:8px;font-family:var(--mono);font-size:.6rem;color:var(--tx3);letter-spacing:.1em}
.rf-mon-axis.rf-low{top:auto;bottom:7px;color:var(--accent)}
.rf-mon-foot{margin:13px 0 0;font-size:.76rem;color:var(--tx3);line-height:1.5}
.rf-mon-foot kbd{font-family:var(--mono);font-size:.72rem;background:var(--bg3);border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:var(--text2)}

/* ---------- SECTION ---------- */
.rf-sec{padding:68px 0 0}
.rf-sec-hd{margin-bottom:26px}
.rf-sec-hd h2{font-family:'Outfit',sans-serif;font-size:1.5rem;font-weight:700;letter-spacing:-.022em;margin:0;text-wrap:balance}
.rf-sec-hd p{margin:7px 0 0;color:var(--text2);font-size:.94rem;max-width:44em}
.rf-sec-hd .rf-eyebrow{color:var(--tx3);display:block;margin-bottom:8px}

/* ---------- UNIVERS (accueil) ---------- */
.rf-univ{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.rf-u{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:26px 26px 22px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:border-color .18s,transform .18s}
.rf-u::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--a);opacity:.9}
.rf-u::after{content:"";position:absolute;top:-70px;right:-70px;width:190px;height:190px;border-radius:50%;background:var(--a-soft);pointer-events:none}
.rf-u:hover{border-color:var(--line2);transform:translateY(-3px)}
.rf-u-top{display:flex;align-items:flex-start;gap:13px;position:relative}
.rf-u-ico{width:38px;height:38px;border-radius:11px;background:var(--a-soft);border:1px solid var(--a);display:grid;place-items:center;font-size:1.1rem;flex-shrink:0}
.rf-u-ttl{flex:1;min-width:0}
.rf-u-ttl h3{font-family:'Outfit',sans-serif;font-size:1.16rem;font-weight:700;letter-spacing:-.018em;margin:0}
.rf-u-ttl .rf-eyebrow{color:var(--a);display:block;margin-bottom:3px}
.rf-u-count{font-family:var(--mono);font-size:1.5rem;font-weight:600;color:var(--a);font-variant-numeric:tabular-nums;line-height:1}
.rf-u-desc{color:var(--text2);font-size:.89rem;margin:14px 0 0;position:relative}
.rf-u-list{list-style:none;margin:17px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px;position:relative}
.rf-u-list li a{display:inline-block;font-size:.8rem;padding:5px 11px;border-radius:8px;background:var(--bg3);border:1px solid var(--border);color:var(--text2);text-decoration:none;transition:color .14s,border-color .14s}
.rf-u-list li a:hover{color:var(--text);border-color:var(--a)}
.rf-u-posts{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:1px;background:var(--border);border-radius:10px;overflow:hidden;position:relative}
.rf-u-posts a{display:block;background:var(--bg2);padding:11px 13px;text-decoration:none;transition:background .14s}
.rf-u-posts a:hover{background:var(--bg3)}
.rf-u-posts time{font-family:var(--mono);font-size:.68rem;color:var(--tx3);letter-spacing:.05em}
.rf-u-posts p{margin:2px 0 0;font-size:.84rem;color:var(--text);line-height:1.4;font-weight:500}
.rf-u-go{margin-top:auto;padding-top:19px;position:relative}
.rf-u-go a{font-family:var(--mono);font-size:.79rem;color:var(--a);text-decoration:none;letter-spacing:.03em;display:inline-flex;align-items:center;gap:7px}
.rf-u-go a:hover span{transform:translateX(3px)}
.rf-u-go a span{transition:transform .16s;display:inline-block}
.rf-u-empty{display:none;color:var(--tx3);font-size:.83rem;font-family:var(--mono);margin:16px 0 0}
.rf-u.rf-dim{opacity:.32}

/* ---------- BANDE ÉDITORIALE ---------- */
.rf-band{margin-top:72px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg2)}
.rf-band-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);gap:52px;padding:50px 0}
.rf-band h2{font-family:'Outfit',sans-serif;font-size:1.45rem;font-weight:700;letter-spacing:-.022em;margin:0;text-wrap:balance}
.rf-band .rf-eyebrow{color:var(--accent);display:block;margin-bottom:11px}
.rf-band-lead{color:var(--text2);font-size:.94rem;margin:14px 0 0}
.rf-band-list{display:grid;gap:2px;background:var(--border);border-radius:var(--radius-sm);overflow:hidden;align-self:start}
.rf-band-item{background:var(--bg2);padding:19px 22px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline}
.rf-band-num{font-family:var(--mono);font-size:.72rem;color:var(--tx3);letter-spacing:.08em}
.rf-band-item h3{font-family:'Outfit',sans-serif;font-size:.97rem;font-weight:600;letter-spacing:-.01em;margin:0}
.rf-band-item p{margin:5px 0 0;color:var(--text2);font-size:.87rem}
.rf-band-item a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
.rf-band-item a:hover{border-bottom-color:var(--accent)}

/* ---------- EN-TÊTE DE PAGE (hubs) ---------- */
.rf-ph{padding:46px 0 0}
.rf-ph-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:60px;align-items:end}
.rf-ph-top{display:flex;align-items:flex-start;gap:18px}
.rf-ph-ico{width:52px;height:52px;border-radius:14px;background:var(--a-soft);border:1px solid var(--a);display:grid;place-items:center;font-size:1.5rem;flex-shrink:0}
.rf-ph h1{font-family:'Outfit',sans-serif;font-size:clamp(1.85rem,3.3vw,2.45rem);font-weight:700;letter-spacing:-.028em;line-height:1.1;margin:0}
.rf-ph .rf-eyebrow{color:var(--a);display:block;margin-bottom:6px}
.rf-ph-lead{color:var(--text2);font-size:1rem;margin:16px 0 0;max-width:56ch;line-height:1.65}
.rf-ph-stats{display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:22px 40px;padding-bottom:4px}
.rf-ph-stat b{display:block;font-family:var(--mono);font-size:1.4rem;font-weight:600;color:var(--a);line-height:1.2;font-variant-numeric:tabular-nums}
.rf-ph-stat span{font-family:var(--mono);font-size:.67rem;color:var(--tx3);letter-spacing:.1em;text-transform:uppercase}

/* ---------- BARRE D'OUTILS ---------- */
.rf-toolbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);margin-top:32px;padding:14px 0}
.rf-toolbar-in{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.rf-tb-search{position:relative;flex:1;min-width:230px;max-width:400px}
.rf-tb-search input{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:10px 12px 10px 36px;color:var(--text);font-family:inherit;font-size:.88rem}
.rf-tb-search input:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 3px var(--a-soft)}
.rf-tb-search .rf-search-ico{left:13px;font-size:.88rem}
.rf-pills{display:flex;gap:6px;flex-wrap:wrap}
.rf-pill{background:var(--bg2);border:1px solid var(--border);color:var(--text2);border-radius:8px;padding:6px 12px;font-size:.8rem;font-family:inherit;cursor:pointer;transition:color .14s,border-color .14s,background .14s;white-space:nowrap}
.rf-pill:hover{color:var(--text);border-color:var(--line2)}
.rf-pill[aria-pressed="true"]{background:var(--a-soft);border-color:var(--a);color:var(--text)}
.rf-pill .rf-n{font-family:var(--mono);font-size:.72rem;color:var(--tx3);margin-left:5px}
.rf-tb-count{margin-left:auto;font-family:var(--mono);font-size:.75rem;color:var(--tx3);white-space:nowrap}

/* ---------- GRILLE DE CARTES ---------- */
.rf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:13px;padding:28px 0 0}
.rf-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:17px;text-decoration:none;display:flex;flex-direction:column;position:relative;transition:border-color .16s,transform .16s;color:var(--text)}
.rf-card:hover{border-color:var(--a);transform:translateY(-2px)}
.rf-card-ico{width:34px;height:34px;border-radius:9px;background:var(--a-soft);display:grid;place-items:center;font-size:1.02rem;margin-bottom:11px}
.rf-card h3{font-family:'Outfit',sans-serif;font-size:.93rem;font-weight:600;letter-spacing:-.012em;line-height:1.3;margin:0}
.rf-card p{margin:5px 0 0;color:var(--text2);font-size:.81rem;line-height:1.45}
.rf-tag{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:20px;background:var(--a-soft);color:var(--a);border:1px solid var(--a)}
.rf-cat-band{grid-column:1/-1;display:flex;align-items:baseline;gap:12px;padding:22px 0 2px;border-top:1px solid var(--border);margin-top:8px;flex-wrap:wrap}
.rf-cat-band:first-child{border-top:none;margin-top:0;padding-top:0}
.rf-cat-band h2{font-family:'Outfit',sans-serif;font-size:1.04rem;font-weight:600;letter-spacing:-.015em;margin:0}
.rf-cat-band p{margin:0;color:var(--tx3);font-size:.82rem;flex:1;min-width:180px}
.rf-empty{padding:52px 0;text-align:center;color:var(--tx3);font-family:var(--mono);font-size:.85rem}

/* ---------- BLOG ---------- */
.rf-feat{display:block;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:30px;text-decoration:none;margin-top:28px;transition:border-color .16s;color:var(--text)}
.rf-feat:hover{border-color:var(--a)}
.rf-feat .rf-eyebrow{color:var(--a);display:block;margin-bottom:12px}
.rf-feat h2{font-family:'Outfit',sans-serif;font-size:clamp(1.3rem,2.5vw,1.8rem);font-weight:700;letter-spacing:-.024em;line-height:1.18;margin:0;text-wrap:balance}
.rf-feat p{margin:13px 0 0;color:var(--text2);font-size:.93rem;max-width:62ch}
.rf-feat .rf-meta{margin-top:17px;font-family:var(--mono);font-size:.72rem;color:var(--tx3);letter-spacing:.05em}
.rf-posts{display:grid;gap:1px;background:var(--border);border-radius:var(--radius-sm);overflow:hidden;margin-top:24px}
.rf-post{display:grid;grid-template-columns:118px 1fr;gap:22px;background:var(--bg2);padding:19px 22px;text-decoration:none;transition:background .14s;color:var(--text)}
.rf-post:hover{background:var(--bg3)}
.rf-post .rf-meta{font-family:var(--mono);font-size:.7rem;color:var(--tx3);letter-spacing:.05em;padding-top:3px;line-height:1.7}
.rf-post h3{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:600;letter-spacing:-.014em;line-height:1.35;margin:0}
.rf-post p{margin:5px 0 0;color:var(--text2);font-size:.85rem;line-height:1.5}

/* ---------- ENTRÉE ---------- */
.rf-rise{opacity:0;transform:translateY(14px);animation:rfRise .6s cubic-bezier(.22,.68,.32,1) forwards}
@keyframes rfRise{to{opacity:1;transform:none}}
.rf-d1{animation-delay:.05s}.rf-d2{animation-delay:.13s}.rf-d3{animation-delay:.21s}.rf-d4{animation-delay:.29s}
@media (prefers-reduced-motion: reduce){
  .rf-rise{animation:none;opacity:1;transform:none}
  .rf-u:hover,.rf-card:hover{transform:none}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1010px){
  .rf-ph-grid{grid-template-columns:1fr;gap:26px;align-items:start}
  .rf-ph-stats{grid-template-columns:repeat(auto-fit,minmax(84px,auto));justify-content:start;gap:20px 34px}
}
@media (max-width:940px){
  .rf-hero{grid-template-columns:1fr;gap:34px;padding-top:44px}
  .rf-band-in{grid-template-columns:1fr;gap:30px;padding:42px 0}
}
@media (max-width:680px){
  .rf-univ{grid-template-columns:1fr}
  .rf-wrap{padding:0 18px}
  .rf-sec{padding-top:52px}
  .rf-post{grid-template-columns:1fr;gap:8px}
  .rf-post .rf-meta{padding-top:0}
  .rf-tb-count{display:none}
}