/* =============================================
   BEYENI.ma — global.css
   Variables, reset, typographie, layout global
   ============================================= */

/* --- @font-face Satoshi (fallback si CDN) --- */
@font-face {
  font-family: 'Satoshi';
  src: url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,600,700,800,900&display=swap');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* --- Reset minimal --- */
*,*::before,*::after { margin:0;padding:0;box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
body {
  font-family: var(--byn-font);
  color: var(--byn-dark);
  background: #fff;
  overflow-x: hidden;
  line-height: 1.6;
}
a { text-decoration:none; color:inherit; transition:.2s }
button { font-family: var(--byn-font); cursor:pointer; border:none; outline:none }
img { max-width:100%; display:block }
select,input,textarea { font-family: var(--byn-font) }
::-webkit-scrollbar { width:4px }
::-webkit-scrollbar-thumb { background:var(--byn-primary); border-radius:4px }

/* --- Variables CSS --- */
:root {
  --byn-primary:       #5D41FF;
  --byn-primary-dark:  #4730d4;
  --byn-primary-light: #F2F2FF;
  --byn-primary-2:     #8B72FF;
  --byn-primary-3:     #b8aaff;
  --byn-dark:          #0D1321;
  --byn-dark-2:        #111827;
  --byn-gray:          #6B7280;
  --byn-border:        #E5E7EB;
  --byn-white:         #ffffff;
  --byn-bg-soft:       #F8F8FF;
  --byn-success:       #10b981;
  --byn-warning:       #f59e0b;
  --byn-danger:        #ef4444;
  --byn-info:          #3b82f6;
  --byn-font:          'Satoshi', sans-serif;
  --byn-radius:        12px;
  --byn-radius-lg:     18px;
  --byn-radius-xl:     24px;
  --byn-shadow:        0 4px 16px rgba(93,65,255,.12);
  --byn-shadow-lg:     0 20px 50px rgba(93,65,255,.15);
}

/* --- Layout global --- */
.byn-container { max-width:1200px; margin:0 auto; padding:0 5% }
.byn-main { min-height:60vh }

/* --- Header/Nav global --- */
.byn-header {
  position:fixed; top:0; left:0; right:0; z-index:999;
  padding:12px 5%;
}
.byn-header__inner {
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(13,19,33,.7); backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.08); border-radius:16px;
  padding:10px 24px; transition:.3s;
}
.byn-header__inner.scrolled {
  background:rgba(13,19,33,.92);
  box-shadow:0 8px 32px rgba(0,0,0,.3);
}
.byn-logo { display:flex; align-items:center; gap:10px }
.byn-logo__mark {
  width:34px; height:34px;
  background:linear-gradient(135deg,var(--byn-primary),var(--byn-primary-2));
  border-radius:9px; display:grid; place-items:center;
  box-shadow:0 4px 14px rgba(93,65,255,.4);
}
.byn-logo__name { font-size:19px; font-weight:900; color:#fff; letter-spacing:-.5px }
.byn-nav { display:flex; gap:2px }
.byn-nav a {
  text-decoration:none; color:rgba(255,255,255,.6);
  font-size:13.5px; font-weight:500; padding:7px 13px;
  border-radius:8px; transition:.2s;
}
.byn-nav a:hover { color:#fff; background:rgba(255,255,255,.08) }
.byn-nav__actions { display:flex; gap:8px; align-items:center }

/* --- Boutons --- */
.byn-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 20px; border-radius:10px; font-size:14px;
  font-weight:700; cursor:pointer; border:none; transition:.25s;
  font-family: var(--byn-font); white-space:nowrap;
}
.byn-btn--primary {
  background:var(--byn-primary); color:#fff;
  box-shadow:0 4px 16px rgba(93,65,255,.4);
}
.byn-btn--primary:hover { background:var(--byn-primary-dark); transform:translateY(-2px) }
.byn-btn--ghost {
  background:rgba(255,255,255,.1); color:#fff;
  border:1px solid rgba(255,255,255,.15);
}
.byn-btn--ghost:hover { background:rgba(255,255,255,.18) }
.byn-btn--outline {
  background:#fff; color:var(--byn-dark);
  border:1.5px solid var(--byn-border);
}
.byn-btn--outline:hover { border-color:var(--byn-primary); color:var(--byn-primary) }
.byn-btn--sm { padding:7px 14px; font-size:12px; border-radius:8px }
.byn-btn--lg {
  padding:15px 30px; border-radius:11px; font-size:15px;
  box-shadow:0 8px 32px rgba(93,65,255,.5);
}
.byn-btn--full { display:block; width:100%; text-align:center }
.byn-btn--success { background:var(--byn-success); color:#fff }
.byn-btn--danger  { background:var(--byn-danger); color:#fff }
.byn-btn--wa { background:#25D366; color:#fff }

/* --- Badges --- */
.byn-badge {
  font-size:11px; font-weight:800; padding:4px 11px;
  border-radius:7px; display:inline-block;
}
.byn-badge--sell      { background:rgba(93,65,255,.9); color:#fff }
.byn-badge--rent      { background:rgba(16,185,129,.9); color:#fff }
.byn-badge--new       { background:rgba(245,158,11,.9); color:#fff }
.byn-badge--featured  { background:rgba(93,65,255,.9); color:#fff }
.byn-badge--exclusive { background:#EEF2FF; color:var(--byn-primary) }
.byn-badge--independent{ background:#F0FDF4; color:#16a34a }
.byn-badge--agency    { background:#FFF7ED; color:#ea580c }
.byn-badge--promoter  { background:#EFF6FF; color:#0ea5e9 }
.byn-badge--franchisor{ background:#FDF4FF; color:#9333ea }
.byn-badge--default   { background:var(--byn-primary-light); color:var(--byn-primary) }

/* --- Footer --- */
.byn-footer {
  background:#060a14; color:#fff;
  padding:72px 5% 32px;
}
.byn-footer__grid {
  display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr 1fr;
  gap:40px; margin-bottom:56px; padding-bottom:56px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.byn-footer__brand p { color:#374151; font-size:13px; line-height:1.75; margin-top:14px; max-width:220px }
.byn-footer__slogan { margin-top:18px; display:flex; gap:6px; flex-wrap:wrap }
.byn-footer__slogan span {
  font-size:10px; font-weight:800; letter-spacing:.8px;
  color:var(--byn-primary-2); border:1px solid rgba(93,65,255,.25);
  padding:4px 11px; border-radius:50px;
}
.byn-footer__col h4 { font-size:11px; font-weight:800; color:rgba(255,255,255,.9); margin-bottom:18px; letter-spacing:.6px; text-transform:uppercase }
.byn-footer__col a { display:flex; align-items:center; gap:6px; color:#374151; font-size:13px; margin-bottom:11px; transition:.2s; font-weight:500 }
.byn-footer__col a:hover { color:var(--byn-primary-3) }
.byn-footer__bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap }
.byn-footer__bottom-l { color:#1F2937; font-size:13px }
.byn-footer__bottom-r { display:flex; gap:20px; flex-wrap:wrap }
.byn-footer__bottom-r a { color:#1F2937; font-size:13px; transition:.2s }
.byn-footer__bottom-r a:hover { color:var(--byn-primary-3) }

/* --- Trust Bar --- */
.byn-trust { padding:28px 5%; border-bottom:1px solid var(--byn-border); display:flex; align-items:center; justify-content:center; gap:48px; flex-wrap:wrap }
.byn-trust__item { display:flex; align-items:center; gap:9px; color:var(--byn-gray); font-size:13px; font-weight:500 }
.byn-trust__sep { width:1px; height:24px; background:var(--byn-border) }

/* --- Utility --- */
.byn-section { padding:96px 5% }
.byn-section--soft { background:var(--byn-bg-soft) }
.byn-section--dark { background:var(--byn-dark) }
.byn-tag {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--byn-primary-light); color:var(--byn-primary);
  font-size:11px; font-weight:800; letter-spacing:.8px;
  padding:5px 14px; border-radius:50px; text-transform:uppercase;
}
.byn-tag--dark { background:rgba(93,65,255,.15); color:var(--byn-primary-3) }
.byn-heading { font-size:clamp(28px,3.8vw,44px); font-weight:900; letter-spacing:-1.5px; color:var(--byn-dark); line-height:1.1 }
.byn-heading span { color:var(--byn-primary) }
.byn-heading--w { color:#fff }
.byn-heading--w span { background:linear-gradient(135deg,var(--byn-primary-3),var(--byn-primary-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.byn-subtitle { color:var(--byn-gray); font-size:16px; line-height:1.7; margin-top:12px }
.byn-subtitle--w { color:#4B5563 }

/* --- Loading / Messages --- */
.byn-loading { display:flex; align-items:center; justify-content:center; gap:10px; color:var(--byn-gray); font-size:14px; padding:40px }
.byn-empty { text-align:center; padding:60px 20px; color:var(--byn-gray) }
.byn-empty__icon { font-size:48px; margin-bottom:16px }
.byn-empty__title { font-size:18px; font-weight:700; color:var(--byn-dark); margin-bottom:8px }

/* --- Pagination --- */
.byn-pagination { display:flex; align-items:center; justify-content:center; gap:6px; padding:40px 0 20px }
.byn-pagination__btn {
  width:38px; height:38px; border-radius:9px; display:grid; place-items:center;
  font-size:13.5px; font-weight:700; cursor:pointer;
  border:1.5px solid var(--byn-border); background:#fff; color:var(--byn-gray);
  transition:.2s; font-family:var(--byn-font);
}
.byn-pagination__btn:hover { border-color:var(--byn-primary); color:var(--byn-primary) }
.byn-pagination__btn--on { background:var(--byn-primary); border-color:var(--byn-primary); color:#fff }
.byn-pagination__btn--dots { border:none; background:none; cursor:default }

/* --- Responsive --- */
@media (max-width:768px) {
  .byn-header__inner { padding:8px 14px }
  .byn-nav { display:none }
  .byn-section { padding:56px 5% }
  .byn-footer__grid { grid-template-columns:1fr 1fr; gap:24px }
  .byn-heading { font-size:28px }
}
@media (max-width:480px) {
  .byn-footer__grid { grid-template-columns:1fr }
  .byn-footer__bottom { flex-direction:column; text-align:center }
}