/* ── OKALAM Studio — Shared Design System ── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&family=Space+Mono:wght@400;700&display=swap');
:root{
  --bg:#080c12;--bg2:#0d1220;--card:#111827;--card2:#141c2d;
  --accent:#8deaff;--accent2:#5bc8e8;
  --accent-dim:rgba(141,234,255,.12);--accent-glow:rgba(141,234,255,.25);
  --text:#e8edf5;--muted:#6b7280;--border:rgba(141,234,255,.1);--border2:rgba(255,255,255,.06);
  --green:#4ade80;--yellow:#fbbf24;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-weight:400;line-height:1.6;overflow-x:hidden;}
::selection{background:var(--accent-glow);color:var(--accent);}

/* ── NAV ── */
.ok-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 48px;
  background:rgba(8,12,18,.95);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border2);
  transition:padding .3s;
}
.ok-nav.scrolled{padding:12px 48px;}
.ok-nav-logo{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:.9rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--text);text-decoration:none;
  position:relative;z-index:102;
}

/* Right side wrapper */
.ok-nav-right{display:flex;align-items:center;gap:12px;}

/* Flag picker stays inline */
.ok-nav-right .flag-picker{display:flex;}

/* ── DROPDOWN MENU BUTTON ── */
.ok-nav-menu-btn{
  display:flex;align-items:center;gap:8px;
  background:transparent;border:1px solid var(--border2);
  border-radius:6px;padding:7px 14px;cursor:pointer;
  color:var(--muted);font-family:'Space Mono',monospace;
  font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;
  transition:all .2s;position:relative;z-index:102;
}
.ok-nav-menu-btn:hover{border-color:var(--accent);color:var(--accent);}
.ok-nav-menu-btn.open{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);}
.ok-nav-menu-icon{display:flex;flex-direction:column;gap:4px;width:16px;}
.ok-nav-menu-icon span{height:1.5px;background:currentColor;border-radius:2px;transition:.25s;}
.ok-nav-menu-btn.open .ok-nav-menu-icon span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.ok-nav-menu-btn.open .ok-nav-menu-icon span:nth-child(2){opacity:0;transform:scaleX(0);}
.ok-nav-menu-btn.open .ok-nav-menu-icon span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

/* ── DROPDOWN PANEL ── */
.ok-nav-dropdown{
  position:fixed;top:0;right:0;
  width:280px;height:100vh;
  background:rgba(8,12,18,.98);
  backdrop-filter:blur(30px);
  border-left:1px solid var(--border2);
  display:flex;flex-direction:column;
  padding:90px 0 48px;
  z-index:101;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.ok-nav-dropdown.open{
  transform:translateX(0);
  pointer-events:all;
}

/* Nav items list */
.ok-nav-items{
  display:flex;flex-direction:column;
  padding:0;flex:1;
}
.ok-nav-link{
  display:block;
  color:var(--muted);
  font-family:'Syne',sans-serif;font-weight:700;
  font-size:1.15rem;letter-spacing:.02em;
  text-decoration:none;
  padding:18px 40px;
  border-bottom:1px solid var(--border2);
  transition:all .18s;
  position:relative;
}
.ok-nav-link::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:2px;background:var(--accent);
  transform:scaleY(0);transition:transform .18s;
}
.ok-nav-link:hover{color:var(--text);padding-left:52px;}
.ok-nav-link:hover::before{transform:scaleY(1);}
.ok-nav-link.active{color:var(--accent);}
.ok-nav-link.active::before{transform:scaleY(1);}
.ok-nav-link--private{color:#f59e0b;font-size:.85rem;letter-spacing:.06em;border-bottom:none;border-top:1px solid var(--border2);margin-top:4px;}
.ok-nav-link--private::before{background:#f59e0b;}
.ok-nav-link--private:hover{color:#fbbf24;}
.ok-nav-link--brand{color:#f87171 !important;font-size:.85rem;letter-spacing:.06em;border-bottom:none;border-top:1px solid var(--border2);white-space:nowrap;}
.ok-nav-link--brand::before{background:#f87171;}
.ok-nav-link--brand:hover{color:#fca5a5 !important;}

/* CTA in dropdown */
.ok-nav-cta-wrap{padding:32px 40px 0;}
.ok-nav-cta{
  display:block;text-align:center;
  background:var(--accent);color:#05080e;
  font-family:'Syne',sans-serif;font-weight:700;
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  padding:12px 20px;border-radius:4px;text-decoration:none;
  transition:all .2s;
}
.ok-nav-cta:hover{background:#fff;}

/* Overlay behind dropdown */
.ok-nav-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  z-index:100;
  backdrop-filter:blur(2px);
}
.ok-nav-overlay.open{display:block;}

/* Hide old hamburger */
.ok-nav-hamburger{display:none;}
.ok-nav-links{display:none;}

/* Flags inside dropdown bottom */
.ok-nav-dropdown .flag-picker{
  padding:24px 40px 0;
  flex-wrap:wrap;gap:6px;
  display:flex;
}

@media(max-width:900px){
  .ok-nav{padding:16px 24px;}
  .ok-nav.scrolled{padding:12px 24px;}
  .ok-section,.ok-footer,.page-hero{padding-left:24px;padding-right:24px;}
  .ok-footer-cols{gap:32px;}
  .ok-nav-right .flag-picker{display:none;}
}

/* ── PAGE HEADER ── */
.page-hero{
  min-height:40vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:130px 40px 72px;
  position:relative;overflow:hidden;
}
.page-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 30%,rgba(141,234,255,.07) 0%,transparent 65%);
}
/* Trait décoratif centré sous le titre */
.page-hero::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:1px;height:64px;
  background:linear-gradient(to bottom,rgba(141,234,255,.4),transparent);
}
.page-hero-label{
  font-family:'Space Mono',monospace;font-size:.58rem;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);margin-bottom:20px;
  position:relative;z-index:1;
  display:flex;align-items:center;gap:12px;opacity:.8;
}
.page-hero-label::before,.page-hero-label::after{
  content:'';flex:0 0 24px;height:1px;background:var(--accent);opacity:.6;
}
.page-hero-title{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(2rem,5vw,3.6rem);
  line-height:1;letter-spacing:-.02em;
  color:#fff;margin-bottom:0;
  position:relative;z-index:1;
}
/* Mot accentué en gradient cyan */
.page-hero-title .accent-word{
  background:linear-gradient(120deg,#8deaff 0%,#a5f3fc 40%,#7dd3fc 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  font-style:italic;
}
/* Mot en outline (contour seulement) */
.page-hero-title .outline-word{
  -webkit-text-stroke:1.5px rgba(141,234,255,.5);
  -webkit-text-fill-color:transparent;
  font-style:normal;
}
/* Séparateur décoratif entre label et titre */
.page-hero-divider{
  width:40px;height:1px;
  background:linear-gradient(to right,transparent,rgba(141,234,255,.35),transparent);
  margin:18px auto 22px;position:relative;z-index:1;
}
.page-hero-sub{
  font-size:.95rem;font-weight:300;
  color:var(--muted);max-width:480px;line-height:1.75;
  position:relative;z-index:1;
  margin-top:20px;
  border-top:1px solid rgba(141,234,255,.08);
  padding-top:20px;
}

/* ── SECTIONS ── */
.ok-section{padding:80px 48px;border-bottom:1px solid var(--border2);}
.ok-section:last-of-type{border-bottom:none;}
.ok-section-inner{max-width:1100px;margin:0 auto;}
.ok-label{
  font-family:'Space Mono',monospace;font-size:.6rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:24px;
  display:flex;align-items:center;gap:10px;
}
.ok-label::before{content:'';width:20px;height:1px;background:var(--accent);}
.ok-title{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(1.8rem,4vw,2.8rem);
  line-height:1.05;letter-spacing:-.02em;margin-bottom:16px;
}
.ok-desc{font-size:.95rem;color:var(--muted);line-height:1.75;max-width:600px;}

/* ── CARDS ── */
.ok-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:32px;
  transition:all .3s;
}
.ok-card:hover{border-color:var(--accent);transform:translateY(-4px);background:var(--card2);}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:none;}
.r1{transition-delay:.1s;}.r2{transition-delay:.2s;}.r3{transition-delay:.3s;}.r4{transition-delay:.4s;}

/* ── FOOTER ── */
.ok-footer{
  border-top:1px solid var(--border);padding:56px 48px;
  position:relative;z-index:1;
}
.ok-footer-inner{
  max-width:1100px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;gap:40px;
}
.ok-footer-brand{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:.85rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--text);margin-bottom:10px;
}
.ok-footer-tagline{font-size:.8rem;color:var(--muted);max-width:220px;line-height:1.6;}
.ok-footer-cols{display:flex;gap:56px;flex-wrap:wrap;}
.ok-footer-col h4{
  font-family:'Space Mono',monospace;font-size:.6rem;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px;
}
.ok-footer-col a{
  display:block;color:var(--muted);font-size:.85rem;
  text-decoration:none;margin-bottom:10px;transition:color .2s;
}
.ok-footer-col a:hover{color:var(--text);}
.ok-footer-bottom{
  max-width:1100px;margin:36px auto 0;
  border-top:1px solid var(--border);padding-top:28px;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;
}
.ok-footer-copy{font-size:.75rem;color:var(--muted);}
.ok-social-links{display:flex;gap:10px;}
.ok-social{
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:.8rem;text-decoration:none;
  transition:all .2s;
}
.ok-social:hover{border-color:var(--accent);color:var(--accent);}

/* ── BUTTONS ── */
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--accent);color:#05080e;
  font-family:'Syne',sans-serif;font-weight:700;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 28px;border-radius:4px;text-decoration:none;
  transition:all .25s;border:none;cursor:pointer;
}
.btn-primary:hover{background:#fff;transform:translateY(-2px);}
.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;
  background:transparent;color:var(--accent);
  font-family:'Syne',sans-serif;font-weight:700;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  padding:13px 28px;border-radius:4px;text-decoration:none;
  border:1px solid var(--border);transition:all .25s;cursor:pointer;
}
.btn-ghost:hover{background:var(--accent-dim);border-color:var(--accent);}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .ok-nav{padding:16px 24px;}
  .ok-nav.scrolled{padding:12px 24px;}
  .ok-section,.ok-footer,.page-hero{padding-left:24px;padding-right:24px;}
  .ok-footer-cols{gap:32px;}
  .ok-nav-right .flag-picker{display:none;}
}

/* ── Flag picker (shared across pages) ── */
.flag-picker{display:flex;gap:4px;align-items:center;}
.flag-btn{background:transparent;border:1px solid var(--border2);border-radius:6px;padding:3px 7px;cursor:pointer;font-size:.78rem;transition:all .18s;color:var(--muted);line-height:1;}
.flag-btn:hover{border-color:var(--accent);}
.flag-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);}
.flag-sep{width:1px;height:18px;background:var(--border2);margin:0 4px;}
@media(max-width:768px){.flag-picker{display:none;}}

/* ── Flag picker vertical sidebar (shared) ── */
.flag-picker-sidebar {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 500;
  background: rgba(8,10,15,0.82);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 10px 7px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 28px rgba(0,0,0,.45);
}
.flag-btn-s {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .18s;
  line-height: 1;
  padding: 0;
}
.flag-btn-s:hover { border-color: var(--accent); background: rgba(141,234,255,.08); }
.flag-btn-s.active { border-color: var(--accent); background: var(--accent-dim); }
/* Hide old nav flag-picker everywhere */
.flag-picker, .flag-sep { display: none !important; }
@media(max-width:768px){
  .flag-picker-sidebar { right: 6px; padding: 7px 5px; }
  .flag-btn-s { width: 27px; height: 27px; font-size: 1rem; }
}