/* ===== HESBAYE ENTREPRENDRE — Digital Directory v2 ===== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap');

:root {
  --navy:       #1a3a5c;
  --blue:       #1e7ab0;
  --blue-mid:   #3271b9;
  --blue-pale:  #e4eaf0;
  --blue-card:  #f4f8fc;
  --text-dark:  #3d4f5f;
  --text-muted: #9ab0c4;
  --white:      #ffffff;
  --border:     #dce8f0;
  --r-card:     14px;
  --r-pill:     30px;
  --shadow:     0 3px 18px rgba(26,58,92,0.09);
  --shadow-h:   0 8px 28px rgba(30,122,176,0.17);
  --t:          0.26s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--blue-pale);
  color: var(--text-dark);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }

/* ── HEADER ── */
.site-header { background: var(--navy); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 14px rgba(26,58,92,0.28); }
.site-header__bar { height: 3px; background: var(--blue); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 14px; max-width: 500px; margin: 0 auto; }
.logo-name { font-weight: 600; font-size: 15px; color: #fff; letter-spacing: 0.01em; }
.logo-sub  { font-size: 9px; color: rgba(255,255,255,0.42); text-transform: uppercase; letter-spacing: 2.5px; margin-top: 2px; }
.header-badge { background: rgba(30,122,176,0.22); border: 1px solid rgba(30,122,176,0.45); color: rgba(255,255,255,0.78); font-size: 11px; font-weight: 500; padding: 5px 13px; border-radius: var(--r-pill); }

/* ── HERO ── */
.hero {
  background: linear-gradient(155deg, var(--navy) 0%, #1c4570 55%, var(--blue) 100%);
  padding: 34px 20px 38px; text-align: center; position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 90% 55% at 50% 115%, rgba(30,122,176,0.38) 0%, transparent 70%);
}
.hero__title { font-family: 'Playfair Display', serif; font-size: 27px; font-weight: 700; color: #fff; line-height: 1.25; position: relative; }
.hero__title span { color: #7ec8ef; display: block; }
.hero__desc { margin: 11px auto 0; color: rgba(255,255,255,0.58); font-size: 13px; line-height: 1.65; font-weight: 300; max-width: 290px; position: relative; }
.hero__stat { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.13); border-radius: var(--r-pill); padding: 8px 20px; position: relative; }
.hero__stat-num { font-size: 21px; font-weight: 700; color: #fff; /*font-family: 'Playfair Display', serif;*/ }
.hero__stat-lbl { font-size: 12px; color: rgba(255,255,255,0.52); font-weight: 300; }

/* ── SEARCH ── */
.search-wrap { padding: 18px 16px 6px; max-width: 500px; margin: 0 auto; }
.search-bar { display: flex; align-items: center; background: #fff; border: 2px solid var(--border); border-radius: var(--r-pill); padding: 0 16px; gap: 10px; box-shadow: var(--shadow); transition: border-color var(--t), box-shadow var(--t); }
.search-bar:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,122,176,0.11); }
.search-bar svg { flex-shrink: 0; color: var(--text-muted); }
.search-bar input { flex: 1; border: none; outline: none; padding: 13px 0; font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text-dark); background: transparent; }
.search-bar input::placeholder { color: var(--text-muted); }

/* ── FILTER CHIPS ── */
.filter-wrap { padding: 8px 16px 12px; max-width: 500px; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.filter-wrap::-webkit-scrollbar { display: none; }
.filter-chips { display: flex; gap: 7px; width: max-content; flex-wrap: wrap; max-width: 100%; justify-content: center; }
.chip { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; padding: 6px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--border); background: #fff; color: var(--text-muted); cursor: pointer; transition: all var(--t); white-space: nowrap; }
.chip:hover, .chip.active { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 2px 9px rgba(30,122,176,0.22); }

/* ── MEMBERS SECTION ── */
.members-section { padding: 2px 16px 32px; max-width: 500px; margin: 0 auto; }
.members-count { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; font-weight: 500; margin-bottom: 13px; padding-left: 3px; }
.members-grid { display: flex; flex-direction: column; gap: 11px; }

/* ── MEMBER CARD ── */
.member-card {
  background: #fff; border-radius: var(--r-card); border: 1.5px solid var(--border);
  box-shadow: var(--shadow); overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  animation: slideUp 0.45s ease both;
}
.member-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); border-color: rgba(30,122,176,0.28); }
.member-card.hidden { display: none; }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Card top strip */
.card-strip { height: 3px; }
#rs {background: #49ACD5;}
.rs {color: #49ACD5; background: #49ACD515;}

#im {background: #F80302;}
.im {color: #F80302; background: #F8030215;}

#al {background: #c52749;}
.al {color: #c52749; background: #c5274915;}

#sq {background: #9f733d;}
.sq {color: #9f733d; background: #9f733d15;}

#pl {background: #59172f;}
.pl {color: #59172f; background: #59172f15;}

#le {background: #EB4547;}
.le {color: #EB4547; background: #EB454715;}

#de {background: #a7cc36;}
.de {color: #a7cc36; background: #a7cc3615;}

#ma {background: #26592C;}
.ma {color: #26592C; background: #26592C15;}

#del{background: #EF3D2A;}
.del {color: #EF3D2A; background: #EF3D2A15;}

#wa {background: #166495;}
.wa {color: #166495; background: #16649515;}

#fi {background: #114E8D;}
.fi {color: #114E8D; background: #114E8D15;}

#lu {background: #427BBF;}
.lu {color: #427BBF; background: #427BBF15;}

#lg {background: #afa59b;}
.lg {color: #afa59b; background: #afa59b15;}

/* Card main row */
.card-main { display: flex; align-items: center; padding: 15px 16px; gap: 13px; }

/* Logo placeholder / initials */
.card-logo {
  width: 54px; height: 54px; border-radius: 10px; flex-shrink: 0;
  /*background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%);*/
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700;
  color: var(--navy); letter-spacing: 0.03em; overflow: hidden;
}
.card-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; background: #fff; display: block; }

/* Card text */
.card-text { flex: 1; min-width: 0; }
.card-company { font-weight: 700; font-size: 15px; color: var(--navy); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-sector-tag {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 5px; font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.4px;
  padding: 3px 9px; border-radius: 20px;
}
.card-referent { margin-top: 7px; font-size: 12px; color: var(--text-muted); font-weight: 400; }
.card-referent strong { color: var(--text-dark); font-weight: 500; }

/* Expand toggle */
.card-toggle {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-card); border: 1.5px solid var(--border);
  cursor: pointer; transition: all var(--t); color: var(--blue);
}
.card-toggle:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.card-toggle svg { transition: transform var(--t); }
.card-toggle.open svg { transform: rotate(180deg); }

/* Expand contact panel */
.card-expand { border-top: 1px solid var(--border); max-height: 0; overflow: hidden; transition: max-height 0.33s cubic-bezier(.4,0,.2,1); }
.card-expand.open { max-height: 160px; }
.card-expand-inner { padding: 13px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.contact-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--blue-card); border: 1px solid var(--border);
  color: var(--navy); font-size: 12px; font-weight: 500;
  transition: all var(--t); overflow: hidden; cursor: pointer;
}
.contact-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.contact-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
.contact-btn.full { grid-column: 1 / -1; }
.contact-btn svg { flex-shrink: 0; }

/* ── NO RESULTS ── */
.no-results { text-align: center; padding: 44px 20px; color: var(--text-muted); display: none; }
.no-results.visible { display: block; }
.no-results svg { opacity: 0.28; margin-bottom: 11px; display: block; margin-left: auto; margin-right: auto; }
.no-results p { font-size: 14px; }

/* ── FOOTER ── */
.site-footer { background: var(--navy); margin-top: 20px; }
.site-footer__bar { height: 3px; background: var(--blue); }
.site-footer__inner { padding: 22px 20px; text-align: center; }
.site-footer p  { font-size: 12px; color: rgba(255,255,255,0.38); font-style: italic; }
.site-footer strong { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.82); }

@media (min-width: 420px) { .hero__title { font-size: 31px; } }