/* ================================================================
   fonctionnalites.css — styles spécifiques à fonctionnalites.html
   Dépend de landing.css (variables, classes réutilisables)
   ================================================================ */

:root { --header-h: 64px; }
html  { scroll-padding-top: calc(var(--header-h) + 52px); }

/* ── Hero ── */
.fn-hero{padding:clamp(64px,8vw,100px) clamp(16px,4vw,56px) clamp(48px,6vw,72px);background:var(--bg);border-bottom:1px solid var(--divider);text-align:center;position:relative;overflow:hidden}
.fn-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(59,130,196,.12) 0%,transparent 70%);pointer-events:none}
.fn-hero .eyebrow{margin-bottom:18px}
.fn-hero h1{font:400 clamp(2.2rem,2rem + 2vw,3.5rem)/1.05 var(--f-disp);letter-spacing:-.035em;max-width:22ch;margin:0 auto 20px}
.fn-hero p{font-size:var(--t-body);color:var(--text-2);line-height:1.7;max-width:54ch;margin:0 auto}

/* ── Barre de filtres ── */
.fn-filter-wrap{background:var(--surf);border-bottom:1px solid var(--divider);position:relative;top:auto;z-index:1}
.fn-filter-inner{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,56px);display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fn-filter-inner::-webkit-scrollbar{display:none}
.fn-filter-sep{width:1px;height:20px;background:var(--divider);margin:0 4px;flex-shrink:0}
.fn-filter-btn{padding:14px 14px;border:none;background:none;font:600 var(--t-sm)/1 var(--f-body);color:var(--text-2);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:all .18s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;gap:6px;position:relative;top:1px;flex-shrink:0}
.fn-filter-btn i{width:14px;height:14px}
.fn-filter-btn:hover{color:var(--text)}
.fn-filter-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.fn-filter-btn[data-filter="agentic"].active{color:#a855f7;border-bottom-color:#a855f7}
.fn-filter-btn[data-filter="memoire"].active{color:var(--green);border-bottom-color:var(--green)}
.fn-filter-btn[data-filter="infra"].active{color:#06b6d4;border-bottom-color:#06b6d4}
.fn-filter-btn[data-filter="integrations"].active{color:var(--amber);border-bottom-color:var(--amber)}
.fn-filter-btn[data-filter="all"].active{color:var(--text-2);border-bottom-color:var(--text-3)}
.fn-filter-count{font-size:10px;font-weight:800;padding:2px 6px;border-radius:10px;background:var(--surf-2);color:var(--text-3);min-width:18px;text-align:center;transition:background .18s,color .18s}
.fn-filter-btn[data-filter="core"].active .fn-filter-count{background:rgba(59,130,196,.12);color:var(--accent)}
.fn-filter-btn[data-filter="agentic"].active .fn-filter-count{background:rgba(168,85,247,.12);color:#a855f7}
.fn-filter-btn[data-filter="memoire"].active .fn-filter-count{background:rgba(52,201,123,.12);color:var(--green)}
.fn-filter-btn[data-filter="infra"].active .fn-filter-count{background:rgba(6,182,212,.12);color:#06b6d4}
.fn-filter-btn[data-filter="integrations"].active .fn-filter-count{background:rgba(245,166,35,.12);color:var(--amber)}

/* ── Contenu principal ── */
.fn-content{max-width:1200px;margin:0 auto;padding:52px clamp(16px,4vw,56px) 80px}
.fn-section-intro{margin-bottom:36px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.fn-section-intro h2{font:400 clamp(1.5rem,1.2rem + 1vw,2rem)/1.1 var(--f-disp);letter-spacing:-.025em;margin-bottom:8px}
.fn-section-intro p{font-size:var(--t-sm);color:var(--text-2);max-width:52ch;line-height:1.6}
.fn-results-count{font-size:var(--t-xs);color:var(--text-3);font-weight:600;white-space:nowrap;padding:6px 14px;background:var(--surf);border:1px solid var(--border);border-radius:var(--r-full)}

/* ── Grille ── */
.fn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
@media(max-width:900px){.fn-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fn-grid{grid-template-columns:1fr}}

.fn-card{display:flex;flex-direction:column;height:100%;background:var(--surf);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s}
.fn-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.18);border-color:rgba(255,255,255,.1)}
.fn-card.hidden{display:none}
.fn-card-top{padding:22px 22px 18px;flex:1;display:flex;flex-direction:column}
.fn-card-top p{flex:1}

.fn-card-cat{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;align-self:flex-start}
.fn-card-cat i{width:10px;height:10px}
.fn-card-cat.core{background:rgba(59,130,196,.12);color:var(--accent)}
.fn-card-cat.agentic{background:rgba(168,85,247,.12);color:#a855f7}
.fn-card-cat.memoire{background:rgba(52,201,123,.12);color:var(--green)}
.fn-card-cat.infra{background:rgba(6,182,212,.12);color:#06b6d4}
.fn-card-cat.integrations{background:rgba(245,166,35,.12);color:var(--amber)}

.fn-card h4{font-size:var(--t-h4);font-weight:700;line-height:1.3;margin-bottom:10px;letter-spacing:-.015em}
.fn-card p{font-size:var(--t-sm);color:var(--text-2);line-height:1.6;margin:0}

.fn-badge{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:4px;margin-left:8px;vertical-align:middle}
.fn-badge.blue{background:rgba(59,130,196,.12);color:var(--accent)}
.fn-badge.purple{background:rgba(168,85,247,.12);color:#a855f7}
.fn-badge.green{background:rgba(52,201,123,.12);color:var(--green)}
.fn-badge.amber{background:rgba(245,158,11,.12);color:var(--amber)}
.fn-badge.cyan{background:rgba(6,182,212,.12);color:#06b6d4}

.fn-card-bottom{padding:12px 22px;border-top:1px solid var(--divider);background:var(--surf-2);display:flex;align-items:center;gap:8px;min-height:44px}
.fn-card-stat{font-size:var(--t-xs);font-weight:700;color:var(--accent);display:flex;align-items:center;gap:6px;line-height:1.4}
.fn-card-stat i{width:12px;height:12px;flex-shrink:0}
.fn-card-stat.purple{color:#a855f7}
.fn-card-stat.green{color:var(--green)}
.fn-card-stat.cyan{color:#06b6d4}
.fn-card-stat.amber{color:var(--amber)}

.fn-empty{display:none;text-align:center;padding:80px 32px;color:var(--text-2)}
.fn-empty i{width:40px;height:40px;margin:0 auto 16px;color:var(--text-3);display:block}
.fn-empty h3{font-size:var(--t-lg);font-weight:600;margin-bottom:8px;color:var(--text)}
.fn-empty p{font-size:var(--t-sm);max-width:36ch;margin:0 auto}

/* ── CTA ── */
.fn-cta{background:var(--surf);border-top:1px solid var(--divider)}
.fn-cta-inner{max-width:1200px;margin:0 auto;padding:72px clamp(16px,4vw,56px);display:grid;grid-template-columns:1fr auto;align-items:center;gap:48px}
.fn-cta-copy h2{font:400 clamp(1.5rem,1.2rem + 1.5vw,2.2rem)/1.1 var(--f-disp);letter-spacing:-.025em;margin-bottom:12px}
.fn-cta-copy p{font-size:var(--t-body);color:var(--text-2);max-width:52ch;line-height:1.65}
.fn-cta-actions{display:flex;flex-direction:column;gap:10px;flex-shrink:0}
@media(max-width:900px){.fn-cta-inner{grid-template-columns:1fr}.fn-cta-actions{flex-direction:row}}
@media(max-width:600px){.fn-cta-actions{flex-direction:column}.fn-filter-btn{padding:12px 10px;font-size:12px}}