/* ==========================================================================
   JEAN-MARC YAPO — DESIGN SYSTEM
   Base: near-black / paper white — Accent: mint signal green
   Type: Big Shoulders Display (headlines) / Inter (body) / JetBrains Mono (data, labels)
   ========================================================================== */

:root{
  /* Color */
  --ink:        #0B0C0E;   /* base background, near-black w/ a faint cool cast */
  --ink-raise:  #16181B;   /* one step up — cards, panels */
  --paper:      #FDFDFC;   /* off-white, not pure #fff */
  --accent:     #00E6A0;   /* mint signal green */
  --accent-ink: #04140F;   /* text-on-accent, dark enough to pass contrast */
  --muted:      #8A8A8A;
  --muted-on-ink: #74777C;
  --line:       rgba(255,255,255,.14);
  --line-soft:  rgba(255,255,255,.08);

  /* Type */
  --font-display: 'Big Shoulders Display', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Motion */
  --ease-premium: cubic-bezier(.16,1,.3,1);
  --dur-micro:  200ms;
  --dur-reveal: 700ms;
  --dur-page:   1000ms;
  --dur-theme:  400ms;

  /* Layout */
  --max: 1800px;
  --gutter: clamp(24px, 5vw, 96px);
}

/* ---------- Thème clair (jour) ---------- */
[data-theme="light"]{
  --ink:        #FDFDFC;
  --ink-raise:  #F1F1EE;
  --paper:      #0B0C0E;
  --accent:     #00A876;
  --accent-ink: #FDFDFC;
  --muted:      #6B6B6B;
  --muted-on-ink: #55585C;
  --line:       rgba(0,0,0,.14);
  --line-soft:  rgba(0,0,0,.08);
}

/* Transition douce lors du changement de thème, sans gêner les autres animations */
body, .site-header, .fs-menu, .work-card, .blog-card, .service-row,
.event-row, .cs-number, .resource-card, .shop-card{
  transition: background var(--dur-theme) ease, color var(--dur-theme) ease,
              border-color var(--dur-theme) ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html, body{ margin:0; padding:0; }
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; padding:0; }
ul{ list-style:none; margin:0; padding:0; }

/* Visible keyboard focus everywhere — never remove this */
:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection{ background:var(--accent); color:var(--accent-ink); }

/* ---------- Type scale ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-0.01em;
  line-height:0.92;
  margin:0;
}
.h1{ font-size:clamp(3.25rem, 10.5vw, 10.5rem); }
.h2{ font-size:clamp(2.25rem, 7vw, 6rem); }
.h3{ font-size:clamp(1.4rem, 3vw, 2.1rem); }

p{ margin:0; }
.body-lg{ font-size:clamp(1.05rem, 1.6vw, 1.25rem); line-height:1.5; max-width:38ch; }
.body{ font-size:1rem; line-height:1.6; max-width:34ch; color:var(--muted); }

.mono-label{
  font-family:var(--font-mono);
  font-size:.8125rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted-on-ink);
}
.mono-num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ---------- Layout ---------- */
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.grid-12{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:24px;
}
section{ padding:clamp(64px,10vw,160px) 0; position:relative; }

/* Section numbering — used because the sections are a real sequence
   the visitor scrolls through, not decoration */
.section-label{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:clamp(32px,5vw,64px);
}
.section-label .mono-num{ font-size:.8125rem; color:var(--accent); }
.section-label .mono-label{ color:var(--muted-on-ink); }

/* ---------- Buttons / links ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:.8125rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:16px 28px;
  border:1px solid var(--line);
  transition:background var(--dur-micro) var(--ease-premium),
             color var(--dur-micro) var(--ease-premium),
             border-color var(--dur-micro) var(--ease-premium);
}
.btn-solid{
  background:var(--accent);
  color:var(--accent-ink);
  border-color:var(--accent);
}
.btn-solid:hover{ background:transparent; color:var(--accent); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn:disabled{ opacity:.4; cursor:not-allowed; pointer-events:none; }

.whatsapp-float{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:700;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  transition:transform var(--dur-micro) var(--ease-premium);
}
.whatsapp-float:hover{ transform:scale(1.08); }
.whatsapp-float svg{ width:28px; height:28px; }
@media (max-width:640px){
  .whatsapp-float{ bottom:16px; right:16px; width:50px; height:50px; }
  .whatsapp-float svg{ width:25px; height:25px; }
}

.link-underline{
  position:relative;
  font-family:var(--font-mono);
  font-size:.8125rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.link-underline::after{
  content:'';
  position:absolute; left:0; bottom:-4px;
  width:100%; height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform var(--dur-micro) var(--ease-premium);
}
.link-underline:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---------- Header ---------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px var(--gutter);
  background:var(--ink);
  border-bottom:1px solid var(--line);
  transition:background var(--dur-theme) ease, border-color var(--dur-theme) ease;
}
.site-header .brand{
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.05rem;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.site-header .header-right{
  display:flex;
  align-items:center;
  gap:32px;
  flex-wrap:nowrap;
}
@media (max-width:640px){
  .site-header{ padding:16px 20px; }
  .site-header .header-right{ gap:12px; }
  .theme-toggle{ padding:6px 8px; }
  .menu-trigger span:not(.bars){ display:none; }
}
.local-time{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.05em;
  color:var(--muted-on-ink);
  display:none;
}
@media (min-width:900px){ .local-time{ display:inline; } }

.theme-toggle{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted-on-ink);
  border:1px solid var(--line);
  padding:6px 12px;
  display:flex;
  align-items:center;
  gap:6px;
  transition:color var(--dur-micro) var(--ease-premium), border-color var(--dur-micro) var(--ease-premium);
}
.theme-toggle:hover{ color:var(--paper); border-color:var(--accent); }
.theme-toggle .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
}

.menu-trigger{
  font-family:var(--font-mono);
  font-size:.8125rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:10px;
}
.menu-trigger .bars{
  display:flex;
  flex-direction:column;
  gap:4px;
  width:22px;
}
.menu-trigger .bars span{
  display:block;
  height:1.5px;
  background:currentColor;
  transition:transform var(--dur-micro) var(--ease-premium);
}
.menu-open .menu-trigger .bars span:first-child{ transform:translateY(2.75px) rotate(45deg); }
.menu-open .menu-trigger .bars span:last-child{ transform:translateY(-2.75px) rotate(-45deg); }

/* ---------- Fullscreen menu ---------- */
.fs-menu{
  position:fixed;
  inset:0;
  height:100vh;
  height:100dvh;
  z-index:800;
  background:var(--ink);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(24px, 4vh, 48px);
  padding:24px var(--gutter);
  padding-top:calc(24px + env(safe-area-inset-top));
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
  visibility:hidden;
  pointer-events:none;
  overflow:hidden;
}
.menu-open .fs-menu{ visibility:visible; pointer-events:auto; }
.fs-menu-body{ width:100%; }
.fs-menu-list{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  border-top:1px solid var(--line-soft);
  border-left:1px solid var(--line-soft);
}
.fs-menu-list li{
  border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.fs-menu-list a{
  display:block;
  padding:clamp(10px, 2.2vh, 20px) 18px;
  font-family:var(--font-display);
  font-size:clamp(1.1rem, 4vw, 2.1rem);
  text-transform:uppercase;
  transition:background var(--dur-micro) var(--ease-premium), color var(--dur-micro);
}
.fs-menu-list a:hover, .fs-menu-list a:focus-visible{ background:var(--ink-raise); color:var(--accent); }
.fs-menu-preview{ display:none; }
@media (max-width:420px){
  .fs-menu-list a{ font-size:clamp(1rem, 5vw, 1.5rem); padding:clamp(8px,2vh,14px) 14px; }
}
.fs-menu-foot{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.fs-menu-social{ display:flex; gap:24px; }

/* ---------- Custom cursor (desktop only) ---------- */
@media (hover:hover) and (pointer:fine){
  body.cursor-ready, body.cursor-ready a, body.cursor-ready button{ cursor:none; }
  .cursor{
    position:fixed; top:0; left:0;
    z-index:2000;
    width:10px; height:10px;
    border-radius:50%;
    background:var(--accent);
    pointer-events:none;
    transform:translate(-50%,-50%);
    transition:width var(--dur-micro) var(--ease-premium),
               height var(--dur-micro) var(--ease-premium),
               background var(--dur-micro) var(--ease-premium);
  }
  .cursor-label{
    position:fixed; top:0; left:0;
    z-index:2001;
    font-family:var(--font-mono);
    font-size:.6875rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--accent-ink);
    pointer-events:none;
    transform:translate(-50%,-50%);
    opacity:0;
    transition:opacity var(--dur-micro) var(--ease-premium);
  }
  .cursor.is-view{ width:64px; height:64px; background:var(--accent); }
  .cursor.is-open{ width:48px; height:48px; background:var(--paper); }
  .cursor.is-drag{ width:56px; height:56px; background:var(--accent); }
  .cursor.has-label + .cursor-label{ opacity:1; }
}
@media (hover:none), (pointer:coarse){
  .cursor, .cursor-label{ display:none; }
}

/* ---------- Reading progress ---------- */
.progress-bar{
  position:fixed; top:0; left:0;
  height:2px; width:0%;
  background:var(--accent);
  z-index:900;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------- Utility ---------- */
.visually-hidden{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}