/* ============================================================================ Module COMMUNITY — CSS core neutre (thémable via --wl-accent). ========================================================================== */ :root{ --wl-accent:#e40046; --wl-bg:#0b0f1a; --wl-bg-soft:#131a2b; --wl-line:rgba(255,255,255,.09); --wl-text:#eef1f7; --wl-muted:#9aa4bb; } /* Ne PAS imposer color/font sur .wlc : le hérite du thème du site (mwf.css). Sinon la topbar/nav partagées changent de police sur ces pages. */ .wlc-hero{max-width:1240px;margin:0 auto;padding:34px 24px 10px} .wlc-hero-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--wl-accent);font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.04em} .wlc-hero h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:900;margin:8px 0 4px} .wlc-hero p{color:var(--wl-muted);margin:0;font-size:1.02rem} .wlc-wrap{max-width:1240px;margin:0 auto;padding:0 24px 44px} /* Barre de filtre par ville (chips + menu déroulant « Autre ville »). */ .wlc-cityfilter{max-width:1240px;margin:14px auto 0;padding:0 24px;display:flex;flex-wrap:wrap;align-items:center;gap:8px} .wlc-citychip{display:inline-flex;align-items:center;gap:6px;background:var(--wl-bg-soft);border:1px solid var(--wl-line);color:var(--wl-text);border-radius:999px;padding:7px 14px;font-size:.86rem;font-weight:600;text-decoration:none;line-height:1;transition:border-color .16s,background .16s,color .16s} .wlc-citychip:hover{border-color:var(--wl-accent);color:var(--wl-accent)} .wlc-citychip.is-active{background:var(--wl-accent);border-color:var(--wl-accent);color:#fff} .wlc-citychip-n{font-size:.72rem;font-weight:700;opacity:.7} .wlc-citychip.is-active .wlc-citychip-n{opacity:.85} .wlc-cityselect{background:var(--wl-bg-soft);border:1px solid var(--wl-line);color:var(--wl-text);border-radius:999px;padding:7px 14px;font-size:.86rem;font-weight:600;cursor:pointer;font-family:inherit} .wlc-cityselect:hover{border-color:var(--wl-accent)} .wlc-cityselect:focus{outline:none;border-color:var(--wl-accent)} @media (max-width:640px){.wlc-cityselect{font-size:16px}} /* évite le zoom iOS */ .wlc-toggle{display:inline-flex;align-items:center;gap:10px;background:var(--wl-bg-soft);border:1px solid var(--wl-line);border-radius:10px;padding:11px 16px;font-size:.9rem;cursor:pointer;margin-top:18px} .wlc-toggle input{accent-color:var(--wl-accent);width:17px;height:17px} .wlc-section{margin-top:26px} .wlc-section-title{display:flex;align-items:center;gap:9px;font-size:1.1rem;font-weight:800;margin-bottom:4px} .wlc-section-title i{color:var(--wl-accent)} .wlc-section-title .n{color:var(--wl-muted);font-weight:500;font-size:.95rem} .wlc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-top:16px} /* Carte membre façon réseau social : bannière + avatar chevauchant + nom/ville */ .wlc-card{position:relative;display:flex;flex-direction:column;align-items:center;background:var(--wl-bg-soft);border:1px solid var(--wl-line);border-radius:16px;overflow:hidden;text-align:center;text-decoration:none;color:var(--wl-text);transition:border-color .18s,transform .18s,box-shadow .18s;padding-bottom:16px} .wlc-card:hover{border-color:var(--wl-accent);transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.28)} /* Bannière (image de fond du membre) ou dégradé d'accent */ .wlc-banner{width:100%;height:64px;background:linear-gradient(135deg,color-mix(in srgb,var(--wl-accent) 55%,transparent),color-mix(in srgb,var(--wl-accent) 12%,transparent));background-size:cover;background-position:center;flex-shrink:0} .wlc-card:hover .wlc-banner{filter:brightness(1.06)} .wlc-av{width:76px;height:76px;border-radius:50%;object-fit:cover;border:3px solid var(--wl-bg-soft);background:var(--wl-bg);margin-top:-40px;position:relative;z-index:2;box-shadow:0 4px 14px rgba(0,0,0,.3)} .wlc-av-ph{display:flex;align-items:center;justify-content:center;background:var(--wl-accent);color:#fff;font-weight:800;font-size:1.5rem;letter-spacing:.02em} .wlc-name{font-size:.94rem;font-weight:700;line-height:1.25;margin-top:10px;padding:0 10px} .wlc-cat{font-size:.76rem;color:var(--wl-muted);margin-top:2px} .wlc-city{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;color:var(--wl-muted);margin-top:5px} .wlc-city i{font-size:.72rem;color:var(--wl-accent)} /* Bouton « Voir le profil » révélé au survol */ .wlc-see{margin-top:11px;font-size:.74rem;font-weight:700;color:var(--wl-accent);border:1px solid color-mix(in srgb,var(--wl-accent) 40%,transparent);border-radius:999px;padding:4px 13px;opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s,background .18s,color .18s} .wlc-card:hover .wlc-see{opacity:1;transform:none} .wlc-card:hover .wlc-see{background:var(--wl-accent);color:#fff;border-color:var(--wl-accent)} .wlc-more{text-align:center;margin-top:26px} .wlc-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid var(--wl-line);color:var(--wl-text);border-radius:10px;padding:11px 20px;font-size:.9rem;font-weight:700;cursor:pointer} .wlc-btn:hover{border-color:var(--wl-accent);color:var(--wl-accent)} /* Bouton CTA « Voir toute la communauté » (visiteur) */ .wlc-btn-cta{background:var(--wl-accent)!important;border-color:var(--wl-accent)!important;color:#fff!important} .wlc-btn-cta:hover{filter:brightness(1.08);color:#fff!important} /* Modale « connectez-vous / créez un compte » */ .wlc-modal{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:20px} .wlc-modal.open{display:flex} .wlc-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px)} .wlc-modal-box{position:relative;z-index:2;width:100%;max-width:420px;background:var(--wl-bg-soft);border:1px solid var(--wl-line);border-radius:18px;padding:32px 26px 26px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.55);animation:wlcModalIn .22s cubic-bezier(.2,.7,.3,1)} @keyframes wlcModalIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}} .wlc-modal-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border:none;background:rgba(255,255,255,.06);color:var(--wl-text);border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center} .wlc-modal-x:hover{background:rgba(255,255,255,.12)} .wlc-modal-ic{width:60px;height:60px;margin:0 auto 16px;border-radius:50%;background:color-mix(in srgb,var(--wl-accent) 18%,transparent);color:var(--wl-accent);display:flex;align-items:center;justify-content:center;font-size:1.6rem} .wlc-modal-box h3{font-size:1.3rem;font-weight:800;margin:0 0 8px;color:var(--wl-text)} .wlc-modal-box p{color:var(--wl-muted);font-size:.94rem;line-height:1.55;margin:0 0 22px} .wlc-modal-actions{display:flex;flex-direction:column;gap:10px} .wlc-modal-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 18px;border-radius:12px;font-weight:700;font-size:.95rem;text-decoration:none;border:1px solid var(--wl-line);color:var(--wl-text);background:rgba(255,255,255,.04)} .wlc-modal-btn:hover{border-color:var(--wl-accent);color:var(--wl-accent)} .wlc-modal-btn.primary{background:var(--wl-accent);border-color:var(--wl-accent);color:#fff} .wlc-modal-btn.primary:hover{filter:brightness(1.08);color:#fff} .wlc-empty{text-align:center;padding:60px 20px;color:var(--wl-muted)} .wlc-empty i{font-size:2.4rem;opacity:.5;display:block;margin-bottom:14px} .wlc-cta{display:inline-flex;align-items:center;gap:8px;background:var(--wl-accent);color:#fff;text-decoration:none;border-radius:10px;padding:11px 20px;font-weight:700;margin-top:12px}