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

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

/* ── Hero ── */
.cu-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}
.cu-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}
.cu-hero .eyebrow{margin-bottom:18px}
.cu-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}
.cu-hero p{font-size:var(--t-body);color:var(--text-2);line-height:1.7;max-width:54ch;margin:0 auto}

/* ── Barre de filtres ── */
.cu-filter-wrap{background:var(--surf);border-bottom:1px solid var(--divider);position:relative}
.cu-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}
.cu-filter-inner::-webkit-scrollbar{display:none}
.cu-filter-sep{width:1px;height:20px;background:var(--divider);margin:0 4px;flex-shrink:0}
.cu-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}
.cu-filter-btn i{width:14px;height:14px}
.cu-filter-btn:hover{color:var(--text)}
.cu-filter-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.cu-filter-btn[data-filter="finance"].active{color:var(--green);border-bottom-color:var(--green)}
.cu-filter-btn[data-filter="marketing"].active{color:#a855f7;border-bottom-color:#a855f7}
.cu-filter-btn[data-filter="ventes"].active{color:#ef4444;border-bottom-color:#ef4444}
.cu-filter-btn[data-filter="dev"].active{color:#06b6d4;border-bottom-color:#06b6d4}
.cu-filter-btn[data-filter="technique"].active{color:var(--amber);border-bottom-color:var(--amber)}
.cu-filter-btn[data-filter="all"].active{color:var(--text-2);border-bottom-color:var(--text-3)}
.cu-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}
.cu-filter-btn[data-filter="rh"].active .cu-filter-count{background:rgba(59,130,196,.12);color:var(--accent)}
.cu-filter-btn[data-filter="finance"].active .cu-filter-count{background:rgba(52,201,123,.12);color:var(--green)}
.cu-filter-btn[data-filter="marketing"].active .cu-filter-count{background:rgba(168,85,247,.12);color:#a855f7}
.cu-filter-btn[data-filter="ventes"].active .cu-filter-count{background:rgba(239,68,68,.12);color:#ef4444}
.cu-filter-btn[data-filter="dev"].active .cu-filter-count{background:rgba(6,182,212,.12);color:#06b6d4}
.cu-filter-btn[data-filter="technique"].active .cu-filter-count{background:rgba(245,166,35,.12);color:var(--amber)}

/* ── Contenu ── */
.cu-content{max-width:1200px;margin:0 auto;padding:52px clamp(16px,4vw,56px) 80px}
.cu-section-intro{margin-bottom:36px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cu-section-intro h2{font:400 clamp(1.5rem,1.2rem + 1vw,2rem)/1.1 var(--f-disp);letter-spacing:-.025em;margin-bottom:8px}
.cu-section-intro p{font-size:var(--t-sm);color:var(--text-2);max-width:52ch;line-height:1.6}
.cu-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 ── */
.cu-cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
@media(max-width:900px){.cu-cases-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cu-cases-grid{grid-template-columns:1fr}}

.cu-case{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}
.cu-case:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.18);border-color:rgba(255,255,255,.1)}
.cu-case.hidden{display:none}
.cu-case-top{padding:22px 22px 18px;flex:1;display:flex;flex-direction:column}
.cu-case-top p{flex:1}

.cu-case-dept{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}
.cu-case-dept i{width:10px;height:10px}
.cu-case-dept.rh{background:rgba(59,130,196,.12);color:var(--accent)}
.cu-case-dept.finance{background:rgba(52,201,123,.12);color:var(--green)}
.cu-case-dept.technique{background:rgba(245,166,35,.12);color:var(--amber)}
.cu-case-dept.marketing{background:rgba(168,85,247,.12);color:#a855f7}
.cu-case-dept.ventes{background:rgba(239,68,68,.12);color:#ef4444}
.cu-case-dept.dev{background:rgba(6,182,212,.12);color:#06b6d4}
.cu-case h4{font-size:var(--t-h4);font-weight:700;line-height:1.3;margin-bottom:10px;letter-spacing:-.015em}
.cu-case p{font-size:var(--t-sm);color:var(--text-2);line-height:1.6;margin:0}

.cu-case-sectors{padding:10px 22px;display:flex;flex-wrap:wrap;gap:5px;border-top:1px solid var(--divider);background:var(--bg)}
.cu-sector-tag{font-size:10px;font-weight:600;color:var(--text-3);background:var(--surf-2);border:1px solid var(--border);border-radius:4px;padding:2px 7px;letter-spacing:.03em}

.cu-case-bottom{padding:12px 22px;border-top:1px solid var(--divider);background:var(--surf-2);display:flex;align-items:center;gap:8px;min-height:44px}
.cu-case-result{font-size:var(--t-xs);font-weight:700;color:var(--green);display:flex;align-items:center;gap:6px;line-height:1.4}
.cu-case-result i{width:12px;height:12px;flex-shrink:0}

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

/* ── CTA ── */
.cu-cta{background:var(--surf);border-top:1px solid var(--divider)}
.cu-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}
.cu-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}
.cu-cta-copy p{font-size:var(--t-body);color:var(--text-2);max-width:52ch;line-height:1.65}
.cu-cta-actions{display:flex;flex-direction:column;gap:10px;flex-shrink:0}
@media(max-width:900px){.cu-cta-inner{grid-template-columns:1fr}.cu-cta-actions{flex-direction:row}}
@media(max-width:600px){.cu-cta-actions{flex-direction:column}.cu-filter-wrap::after{content:"";position:absolute;right:0;top:0;bottom:0;width:32px;background:linear-gradient(to right,transparent,var(--surf));pointer-events:none}.cu-filter-btn{padding:12px 10px;font-size:12px}}