/* ============================================================
   BEYENI.MA — GLOBAL.CSS
   Variables, reset, layout, header, footer, responsive
   ============================================================ */

/* ─── Variables ─── */
: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);
  --byn-gold:          #f59e0b;
  --byn-gold-2:        #fbbf24;
}

/* ─── Reset ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--byn-font);
  color:var(--byn-dark);
  background:#fff;
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
button{font-family:var(--byn-font)}
img{max-width:100%;height:auto;display:block}

/* ─── Scrollbar ─── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--byn-primary);border-radius:4px}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.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);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:10px 24px;
  transition:.3s;
}
.byn-header.scrolled .byn-header__inner{
  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);
  flex-shrink:0;
}
.byn-logo__name{
  font-size:19px;
  font-weight:900;
  color:#fff;
  letter-spacing:-.5px;
}
.byn-nav{
  display:flex;
  gap:2px;
}
.byn-nav a{
  color:rgba(255,255,255,.6);
  font-size:13.5px;
  font-weight:500;
  padding:7px 13px;
  border-radius:8px;
  transition:.2s;
  white-space:nowrap;
}
.byn-nav a:hover,
.byn-nav a.on{
  color:#fff;
  background:rgba(255,255,255,.08);
}
.byn-header__actions{
  display:flex;
  gap:8px;
  align-items:center;
}
.byn-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 18px;
  border-radius:9px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  border:none;
  font-family:var(--byn-font);
  transition:.2s;
  white-space:nowrap;
}
.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--primary{
  background:var(--byn-primary);
  color:#fff;
  box-shadow:0 4px 14px rgba(93,65,255,.4);
}
.byn-btn--primary:hover{background:var(--byn-primary-dark);transform:translateY(-1px)}
.byn-btn--sm{padding:6px 12px;font-size:12px}
.byn-btn--lg{padding:14px 28px;font-size:15px;font-weight:700}
.byn-btn--full{display:block;width:100%;text-align:center}
.byn-btn--outline{
  background:transparent;
  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--white{
  background:#fff;
  color:var(--byn-primary);
}
.byn-btn--white:hover{background:var(--byn-primary-light)}
.byn-btn--gold{
  background:linear-gradient(135deg,var(--byn-gold),var(--byn-gold-2));
  color:var(--byn-dark);
  box-shadow:0 8px 28px rgba(245,158,11,.4);
}
.byn-btn--gold:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(245,158,11,.5)}

/* Burger */
.byn-burger{
  display:none;
  flex-direction:column;
  gap:4px;
  background:none;
  border:none;
  cursor:pointer;
  padding:4px;
}
.byn-burger span{
  display:block;
  width:22px;
  height:2px;
  background:#fff;
  border-radius:1px;
  transition:.2s;
}

/* ============================================================
   HERO SECTION (page d'accueil)
   ============================================================ */
.byn-hero{
  min-height:100vh;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:140px 5% 100px;
  overflow:hidden;
  background:#060a14;
}
.byn-hero__bg{position:absolute;inset:0}
.byn-hero__mesh{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%,rgba(93,65,255,.35) 0%,transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%,rgba(45,31,110,.5) 0%,transparent 60%),
    radial-gradient(ellipse 40% 40% at 60% 10%,rgba(139,114,255,.2) 0%,transparent 50%);
}
.byn-hero__noise{
  position:absolute;inset:0;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.byn-hero__grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(93,65,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(93,65,255,.07) 1px,transparent 1px);
  background-size:64px 64px;
}
.byn-hero__content{
  position:relative;z-index:2;
  text-align:center;max-width:860px;
}
.byn-hero__chip{
  display:inline-flex;
  align-items:center;gap:8px;
  background:rgba(93,65,255,.18);
  border:1px solid rgba(93,65,255,.4);
  color:var(--byn-primary-3);
  padding:7px 18px;
  border-radius:50px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.8px;
  margin-bottom:30px;
  text-transform:uppercase;
}
.byn-hero__chip-dot{
  width:7px;height:7px;
  background:var(--byn-primary-2);
  border-radius:50%;
  animation:byn-pulse 2s infinite;
}
@keyframes byn-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(139,114,255,.6)}
  50%{box-shadow:0 0 0 6px rgba(139,114,255,0)}
}
.byn-hero h1{
  font-size:clamp(44px,6.5vw,82px);
  font-weight:900;
  color:#fff;
  line-height:1.03;
  letter-spacing:-3px;
  margin-bottom:24px;
}
.byn-hero h1 .byn-hero__gradient{
  display:block;
  background:linear-gradient(135deg,#a78bff 0%,#5D41FF 40%,#60a5fa 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.byn-hero__sub{
  color:#8892a4;
  font-size:17.5px;
  line-height:1.72;
  max-width:580px;
  margin:0 auto 42px;
  font-weight:400;
}
.byn-hero__ctas{
  display:flex;
  gap:14px;
  justify-content:center;
  margin-bottom:70px;
}
.byn-hero__stats{
  display:flex;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  overflow:hidden;
  backdrop-filter:blur(16px);
}
.byn-hstat{
  flex:1;padding:26px;
  text-align:center;
  border-right:1px solid rgba(255,255,255,.06);
  position:relative;
}
.byn-hstat:last-child{border-right:none}
.byn-hstat__num{
  font-size:32px;font-weight:900;
  color:#fff;letter-spacing:-1px;line-height:1;
}
.byn-hstat__num em{color:var(--byn-primary-2);font-style:normal}
.byn-hstat__label{font-size:12px;color:#4B5563;margin-top:6px;font-weight:500}
.byn-hstat__dot{
  width:6px;height:6px;
  background:#10b981;border-radius:50%;
  position:absolute;top:16px;right:16px;
  box-shadow:0 0 8px rgba(16,185,129,.5);
}

/* Floating cards */
.byn-floating-card{
  position:absolute;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:14px 18px;
  backdrop-filter:blur(16px);
  animation:byn-float 6s ease-in-out infinite;
}
.byn-floating-card--1{top:18%;right:6%;animation-delay:0s}
.byn-floating-card--2{top:55%;right:3%;animation-delay:2s}
.byn-floating-card--3{bottom:15%;left:3%;animation-delay:4s}
@keyframes byn-float{
  0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}
}
.byn-fc__label{font-size:10px;color:rgba(255,255,255,.5);font-weight:600;letter-spacing:.5px;margin-bottom:4px}
.byn-fc__val{font-size:16px;font-weight:800;color:#fff}
.byn-fc__sub{font-size:11px;color:var(--byn-primary-3);margin-top:2px}

/* ============================================================
   SEARCH BOX
   ============================================================ */
.byn-search-wrap{
  margin-top:-36px;
  position:relative;z-index:10;
  padding:0 5%;
}
.byn-search-box{
  background:#fff;
  border-radius:20px;
  box-shadow:0 24px 80px rgba(13,19,33,.2),0 0 0 1px rgba(93,65,255,.08);
  padding:10px;
  max-width:980px;margin:0 auto;
}
.byn-search-tabs{
  display:flex;gap:4px;
  padding:6px;
  background:#F7F7FF;
  border-radius:13px;
  margin-bottom:10px;
}
.byn-search-tab{
  flex:1;padding:9px;
  text-align:center;
  border-radius:9px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  color:var(--byn-gray);
  transition:.2s;
  border:none;
  background:transparent;
  font-family:var(--byn-font);
}
.byn-search-tab.on{
  background:#fff;
  color:var(--byn-primary);
  box-shadow:0 2px 10px rgba(93,65,255,.12);
}
.byn-search-row{
  display:flex;align-items:center;gap:0;
  background:#F7F7FF;
  border-radius:13px;
  padding:4px;
  overflow:hidden;
}
.byn-search-divider{width:1px;height:38px;background:var(--byn-border);flex-shrink:0}
.byn-search-field{flex:1;padding:10px 18px;min-width:0}
.byn-search-field label{
  font-size:10px;font-weight:800;color:var(--byn-gray);
  text-transform:uppercase;letter-spacing:.6px;
  display:block;margin-bottom:3px;
}
.byn-search-field select,
.byn-search-field input{
  width:100%;border:none;outline:none;
  font-size:14px;font-weight:600;
  color:var(--byn-dark);
  font-family:var(--byn-font);
  background:transparent;
  cursor:pointer;
}
.byn-search-btn{
  background:var(--byn-primary);color:#fff;border:none;
  border-radius:11px;padding:14px 26px;
  font-size:14px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;gap:9px;
  white-space:nowrap;transition:.2s;
  font-family:var(--byn-font);
  box-shadow:0 4px 16px rgba(93,65,255,.35);
  flex-shrink:0;margin:4px;
}
.byn-search-btn:hover{background:var(--byn-primary-dark);box-shadow:0 8px 24px rgba(93,65,255,.45)}

/* ============================================================
   TRUST BAR
   ============================================================ */
.byn-trust{
  padding:28px 5%;
  border-bottom:1.5px 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)}

/* ============================================================
   PAGE HERO (pages intérieures sombres)
   ============================================================ */
.byn-page-hero{
  background:linear-gradient(160deg,#0f0729,#060a14);
  padding:36px 5% 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.byn-page-hero__top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:24px;
}
.byn-page-hero__title{
  font-size:26px;
  font-weight:900;
  color:#fff;
  letter-spacing:-.5px;
}
.byn-page-hero__count{
  font-size:14px;
  color:#4B5563;
  margin-top:4px;
}
.byn-page-hero__count em{
  color:var(--byn-primary-2);
  font-style:normal;
  font-weight:700;
}
.byn-page-hero__views{
  display:flex;
  gap:6px;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.byn-section{padding:96px 5%}
.byn-section--soft{background:var(--byn-bg-soft)}
.byn-section--dark{background:var(--byn-dark)}
.byn-section-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;
  margin-bottom:16px;
  text-transform:uppercase;
}
.byn-section-tag--dark{
  background:rgba(93,65,255,.15);
  color:var(--byn-primary-3);
}
.byn-section h2{
  font-size:clamp(28px,3.8vw,44px);
  font-weight:900;
  letter-spacing:-1.5px;
  color:var(--byn-dark);
  line-height:1.1;
}
.byn-section h2 span{color:var(--byn-primary)}
.byn-section h2.byn-section__title--white{color:#fff}
.byn-section h2.byn-section__title--white 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-section__desc{
  color:var(--byn-gray);
  font-size:16px;
  line-height:1.7;
  margin-top:12px;
}
.byn-section__desc--white{color:#4B5563}
.byn-section__header{margin-bottom:56px}

/* ============================================================
   FORMS
   ============================================================ */
.byn-form-group{margin-bottom:18px}
.byn-form-group label{
  display:block;
  font-size:11px;font-weight:700;
  color:var(--byn-gray);
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.byn-form-group input,
.byn-form-group select,
.byn-form-group textarea{
  width:100%;
  padding:11px 14px;
  border:1.5px solid var(--byn-border);
  border-radius:9px;
  font-size:14px;
  font-family:var(--byn-font);
  color:var(--byn-dark);
  outline:none;
  background:#fff;
  transition:.2s;
}
.byn-form-group input:focus,
.byn-form-group select:focus,
.byn-form-group textarea:focus{
  border-color:var(--byn-primary);
  box-shadow:0 0 0 3px rgba(93,65,255,.1);
}
.byn-form-group input::placeholder{color:#9CA3AF}
.byn-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ============================================================
   ALERTS / MESSAGES
   ============================================================ */
.byn-alert{
  padding:12px 16px;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  margin-bottom:16px;
}
.byn-alert--success{background:rgba(16,185,129,.1);color:#059669;border:1px solid rgba(16,185,129,.2)}
.byn-alert--error{background:rgba(239,68,68,.1);color:#dc2626;border:1px solid rgba(239,68,68,.2)}
.byn-alert--warning{background:rgba(245,158,11,.1);color:#d97706;border:1px solid rgba(245,158,11,.2)}
.byn-alert--info{background:rgba(59,130,246,.1);color:#2563eb;border:1px solid rgba(59,130,246,.2)}

/* ============================================================
   SPINNER / LOADING
   ============================================================ */
.byn-spinner{
  width:20px;height:20px;
  border:2px solid var(--byn-border);
  border-top-color:var(--byn-primary);
  border-radius:50%;
  animation:byn-spin .8s linear infinite;
}
@keyframes byn-spin{to{transform:rotate(360deg)}}

/* ============================================================
   UTILITY
   ============================================================ */
.byn-container{max-width:1200px;margin:0 auto;padding:0 5%}
.byn-text-center{text-align:center}
.byn-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ============================================================
   RESPONSIVE — MOBILE FIRST
   ============================================================ */
@media(max-width:767px){
  .byn-header{padding:8px 4%}
  .byn-header__inner{padding:8px 16px;border-radius:12px}
  .byn-nav{display:none}
  .byn-burger{display:flex}
  .byn-hero{padding:120px 4% 80px}
  .byn-hero h1{font-size:clamp(32px,10vw,48px);letter-spacing:-1.5px}
  .byn-hero__ctas{flex-direction:column;align-items:center}
  .byn-hero__stats{flex-direction:column}
  .byn-hstat{border-right:none;border-bottom:1px solid rgba(255,255,255,.06)}
  .byn-search-row{flex-direction:column;gap:8px}
  .byn-search-divider{display:none}
  .byn-search-field{width:100%}
  .byn-search-btn{width:100%;justify-content:center}
  .byn-section{padding:64px 4%}
  .byn-form-row{grid-template-columns:1fr}
  .byn-trust{gap:16px;padding:20px 4%}
  .byn-trust__sep{display:none}
}

@media(min-width:768px) and (max-width:1199px){
  .byn-hero h1{font-size:clamp(40px,7vw,60px)}
  .byn-section{padding:80px 5%}
}

@media(min-width:1200px){
  /* Desktop — defaults already set */
}