/* ═══════════════════════════════════════════════════════
   FINDISY BASE — Foundation styles shared by all pages
   Variables, reset, typography, .logo-name, mobile pill nav
   ═══════════════════════════════════════════════════════ */

:root{
  --red:#C8102E; --red-dark:#9e0d24; --red-light:#fdf0f2; --red-soft:#f87191;
  --green:#009A44; --green-dark:#007a35; --green-light:#e6f5ee;
  --gold:#C9A961; --gold-deep:#a8823e; --gold-light:rgba(201,169,97,0.12);
  --dark:#1C1C1C; --dark2:#0f0f0f; --bordeaux:#2d0a12; --navy:#0d1a2e;
  --cream:#FAF8F5; --cream2:#F3F0EB; --white:#FFFFFF;
  --gray:#6B7280; --gray-light:#F0EDE8; --border:#E8E3DC;
  --blue:#1D6FA8; /* Kyrion ONLY */

  --shadow-xs:0 1px 2px rgba(28,28,28,0.04);
  --shadow-sm:0 2px 8px rgba(28,28,28,0.05), 0 1px 2px rgba(28,28,28,0.04);
  --shadow-md:0 8px 24px rgba(28,28,28,0.06), 0 2px 6px rgba(28,28,28,0.04);
  --shadow-lg:0 24px 56px rgba(28,28,28,0.10), 0 6px 16px rgba(28,28,28,0.06);
  --shadow-xl:0 32px 80px rgba(28,28,28,0.14), 0 10px 24px rgba(28,28,28,0.08);
  --shadow-red:0 16px 40px rgba(200,16,46,0.15), 0 4px 12px rgba(200,16,46,0.08);

  --ease:cubic-bezier(0.16,1,0.3,1);
  --ease-soft:cubic-bezier(0.4,0,0.2,1);

  --maxw:1200px;
}

/* ───── Reset ───── */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Figtree',system-ui,sans-serif;
  font-size:14px;
  line-height:1.55;
  color:var(--dark);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'ss01','cv11';
}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
img,svg{display:block;max-width:100%;}

/* ───── Typography utility ───── */
.serif{font-family:'Fraunces',Georgia,serif;font-optical-sizing:auto;font-variation-settings:'opsz' 144;}

/* ───── Logo wordmark (Nunito Black 900, 26px partout) ───── */
.logo-name{
  font-family:'Nunito',sans-serif;
  font-weight:900;
  font-size:26px;
  letter-spacing:-0.02em;
  line-height:1;
}
.logo-name .find{
  background:linear-gradient(180deg,#FF3D55 0%,#C8102E 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.logo-name .sy{
  background:linear-gradient(180deg,#22D572 0%,#009A44 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ───── Footer language selector (EN · AR) ───── */
.ft-lang{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:600;}
.ft-lang-item{
  color:rgba(255,255,255,0.55);
  transition:color 0.2s var(--ease);
  cursor:pointer;
}
.ft-lang-item.active,.ft-lang-item:hover{color:white;}
.ft-lang-sep{color:rgba(255,255,255,0.25);}

/* ═══════════════════════════════════════════════════════
   MOBILE FLOATING PILL NAV (visible < 768px)
   ═══════════════════════════════════════════════════════ */
nav.mobile-pill-nav{
  display:none;
  position:fixed;
  top:auto;
  bottom:16px;
  left:50%;
  right:auto;
  transform:translateX(-50%);
  width:auto;
  height:auto;
  background:rgba(255,255,255,0.95);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  border:1px solid rgba(0,0,0,0.06);
  border-radius:32px;
  box-shadow:0 12px 32px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
  padding:8px 10px;
  gap:4px;
  z-index:1000;
  align-items:center;
  justify-content:flex-start;
}
nav.mobile-pill-nav .mp-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:8px 12px;
  border-radius:24px;
  color:var(--dark);
  font-size:9px;
  font-weight:700;
  letter-spacing:0.2px;
  transition:all 0.2s var(--ease);
  min-width:52px;
  text-align:center;
}
nav.mobile-pill-nav .mp-item svg{
  width:20px;
  height:20px;
}
nav.mobile-pill-nav .mp-item:hover{background:var(--cream2);}
nav.mobile-pill-nav .mp-item.active{background:var(--dark);color:white;}
nav.mobile-pill-nav .mp-item-cta{background:var(--red);color:white;}
nav.mobile-pill-nav .mp-item-cta:hover{background:var(--red-dark);transform:translateY(-1px);}

@media(max-width:768px){
  nav.mobile-pill-nav{display:flex;}
  body{padding-bottom:90px;}
}

/* ═══════════════════════════════════════════════════════
   MOBILE DRAWER (Bottom sheet) — ouvert par bouton Menu de la pill
   ═══════════════════════════════════════════════════════ */
.mobile-drawer{
  display:none;
  position:fixed;
  inset:0;
  z-index:1100;
}
.mobile-drawer.open{display:block;}
.mobile-drawer-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  animation:fadeIn 0.25s var(--ease);
}
.mobile-drawer-panel{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:white;
  border-radius:24px 24px 0 0;
  padding:20px 24px 28px;
  max-height:75vh;
  overflow-y:auto;
  box-shadow:0 -8px 32px rgba(0,0,0,0.15);
  animation:slideUp 0.3s var(--ease);
}
@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes slideUp{
  from{transform:translateY(100%);}
  to{transform:translateY(0);}
}
.mobile-drawer-handle{
  width:40px;height:4px;
  background:var(--border);
  border-radius:2px;
  margin:0 auto 16px;
}
.mobile-drawer-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
  margin-bottom:8px;
}
.mobile-drawer-title{
  font-family:'Fraunces',serif;
  font-variation-settings:'opsz' 144;
  font-size:22px;
  font-weight:600;
  letter-spacing:-0.01em;
}
.mobile-drawer-close{
  width:36px;height:36px;
  border-radius:50%;
  background:var(--cream2);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.2s var(--ease);
}
.mobile-drawer-close:hover{background:var(--border);}
.mobile-drawer-close svg{width:18px;height:18px;color:var(--dark);}
.mobile-drawer-content{
  display:flex;
  flex-direction:column;
}
.mobile-drawer-content .md-link{
  padding:16px 0;
  font-size:16px;
  font-weight:500;
  color:var(--dark);
  border-bottom:1px solid var(--cream2);
  display:flex;
  align-items:center;
  gap:12px;
  transition:color 0.2s var(--ease);
}
.mobile-drawer-content .md-link:last-child{border-bottom:none;}
.mobile-drawer-content .md-link:hover{color:var(--red);}
.mobile-drawer-content .md-link svg{
  width:20px;height:20px;
  color:var(--gray);
  flex-shrink:0;
}
.mobile-drawer-content .md-link:hover svg{color:var(--red);}