/* =========================================================
   TAHSYNE SOLUTIONS — Design system
   Palette: deep navy / engineering blue / process teal
   Type: Sora (display) · Public Sans (body) · IBM Plex Mono (data/labels)
   Motif: connected process nodes — echoes "process optimization
   & automation", the firm's core practice.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

:root{
  color-scheme: light;

  /* ---- palette (light) ---- */
  --bg: #f5f8fb;
  --surface: #ffffff;
  --surface-2: #eef3f8;
  --surface-3: #e4ecf3;
  --border: #dbe4ed;
  --border-strong: #c3d1e0;

  --ink: #0b1f30;
  --ink-soft: #33495c;
  --muted: #61748a;
  --muted-2: #7d8fa3;

  --navy: #0f2d4a;
  --navy-deep: #081a2c;
  --blue: #1c5fd8;
  --blue-strong: #124aab;
  --teal: #0f9c8d;
  --teal-strong: #0b7c70;
  --teal-soft: #c9efe9;
  --amber: #c97a1f;

  --grad-brand: linear-gradient(128deg, var(--navy) 0%, var(--blue) 52%, var(--teal) 100%);
  --grad-soft: linear-gradient(128deg, rgba(28,95,216,0.10), rgba(15,156,141,0.10));

  --shadow-sm: 0 1px 2px rgba(11,31,48,0.06), 0 1px 1px rgba(11,31,48,0.04);
  --shadow-md: 0 8px 24px rgba(11,31,48,0.08), 0 2px 6px rgba(11,31,48,0.05);
  --shadow-lg: 0 20px 48px rgba(11,31,48,0.14), 0 6px 16px rgba(11,31,48,0.08);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --container: 1180px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg: #0a1420;
    --surface: #0e1c2c;
    --surface-2: #132437;
    --surface-3: #17293d;
    --border: #22384f;
    --border-strong: #2c4763;

    --ink: #e9eff5;
    --ink-soft: #c2d1e0;
    --muted: #8ea0b5;
    --muted-2: #7891a8;

    --navy: #123457;
    --navy-deep: #0a1c30;
    --blue: #5b96ec;
    --blue-strong: #3c78d8;
    --teal: #38d0bd;
    --teal-strong: #22b39f;
    --teal-soft: #133d3a;
    --amber: #e0a24c;

    --grad-brand: linear-gradient(128deg, #0d2036 0%, #1c4f8f 52%, #14887a 100%);
    --grad-soft: linear-gradient(128deg, rgba(91,150,236,0.14), rgba(56,208,189,0.12));

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
    --shadow-md: 0 10px 26px rgba(0,0,0,0.38);
    --shadow-lg: 0 24px 52px rgba(0,0,0,0.5);
  }
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --bg: #0a1420;
  --surface: #0e1c2c;
  --surface-2: #132437;
  --surface-3: #17293d;
  --border: #22384f;
  --border-strong: #2c4763;

  --ink: #e9eff5;
  --ink-soft: #c2d1e0;
  --muted: #8ea0b5;
  --muted-2: #7891a8;

  --navy: #123457;
  --navy-deep: #0a1c30;
  --blue: #5b96ec;
  --blue-strong: #3c78d8;
  --teal: #38d0bd;
  --teal-strong: #22b39f;
  --teal-soft: #133d3a;
  --amber: #e0a24c;

  --grad-brand: linear-gradient(128deg, #0d2036 0%, #1c4f8f 52%, #14887a 100%);
  --grad-soft: linear-gradient(128deg, rgba(91,150,236,0.14), rgba(56,208,189,0.12));

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 10px 26px rgba(0,0,0,0.38);
  --shadow-lg: 0 24px 52px rgba(0,0,0,0.5);
}

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-inline: clamp(16px, 4vw, 0px);
}

.wrap{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

h1{ font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 700; }
h2{ font-size: clamp(1.6rem, 3vw, 2.35rem); font-weight: 700; }
h3{ font-size: 1.25rem; font-weight: 600; }
h4{ font-size: 1.05rem; font-weight: 600; }

p{ margin: 0; color: var(--ink-soft); }
.lede{ font-size: 1.15rem; line-height: 1.65; color: var(--ink-soft); max-width: 62ch; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-strong);
  font-weight: 500;
}
.eyebrow::before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-soft);
}

.muted{ color: var(--muted); }

:root{ padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ---------- header / nav ---------- */
.site-header{
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.site-header.is-scrolled{ box-shadow: var(--shadow-sm); }

.nav-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 14px;
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  white-space: nowrap;
}
.brand-mark{ width: 34px; height: 34px; flex: none; }
.brand-name b{ color: var(--teal-strong); }

.nav-links{
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 0.94rem;
  font-weight: 600;
}
.nav-links a{
  color: var(--ink-soft);
  padding-block: 4px;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav-links a:hover, .nav-links a.active{ color: var(--ink); border-color: var(--teal); }

.nav-actions{ display: flex; align-items: center; gap: 12px; }

.lang-toggle{
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}
.lang-toggle:hover{ border-color: var(--border-strong); color: var(--ink); }

.burger{
  display: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  align-items: center; justify-content: center;
  cursor: pointer;
}
.burger span, .burger span::before, .burger span::after{
  content: ""; display: block; width: 18px; height: 2px;
  background: var(--ink); position: relative; transition: transform .2s ease, opacity .2s ease;
}
.burger span::before{ position: absolute; top: -6px; }
.burger span::after{ position: absolute; top: 6px; }

.mobile-panel{
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0 18px;
  border-top: 1px solid var(--border);
}
.mobile-panel a{
  padding: 10px 4px;
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--border);
}
.mobile-panel a:last-child{ border-bottom: none; }

body.nav-open .mobile-panel{ display: flex; }
body.nav-open .burger span{ background: transparent; }
body.nav-open .burger span::before{ transform: rotate(45deg); top: 0; }
body.nav-open .burger span::after{ transform: rotate(-45deg); top: 0; }

@media (max-width: 860px){
  .nav-links{ display: none; }
  .burger{ display: inline-flex; }
}

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.94rem;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: var(--grad-brand);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover{ box-shadow: var(--shadow-md); }
.btn-ghost{
  background: transparent;
  border-color: var(--border-strong);
  color: var(--ink);
}
.btn-ghost:hover{ border-color: var(--teal); color: var(--teal-strong); }
.btn-sm{ padding: 9px 16px; font-size: 0.85rem; }

/* ---------- hero ---------- */
.hero{
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 8vw, 88px) clamp(40px, 6vw, 64px);
  border-bottom: 1px solid var(--border);
}
.hero-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } }

.hero h1{ margin-block: 16px 18px; }
.hero-actions{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.hero-figure{
  position: relative;
  aspect-ratio: 4/3.2;
  border-radius: var(--radius-lg);
  background: var(--grad-brand);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.page-hero{
  padding-block: clamp(40px, 7vw, 64px) 36px;
  border-bottom: 1px solid var(--border);
}
.page-hero .eyebrow{ margin-bottom: 14px; }

/* ---------- sections / layout ---------- */
section{ padding-block: clamp(48px, 7vw, 84px); }
.section-head{ max-width: 720px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head h2{ margin-top: 12px; }

.grid{ display: grid; gap: 22px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 920px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.alt{ background: var(--surface-2); border-block: 1px solid var(--border); }

/* ---------- cards ---------- */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.card:hover{ box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-2px); }

.service-card{ display: flex; flex-direction: column; gap: 14px; height: 100%; }
.service-icon{
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-soft);
  color: var(--teal-strong);
  flex: none;
}
.service-card h3{ margin-top: 2px; }
.service-card .tags{ margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }

.tag{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  border: 1px solid var(--border);
}

.stat-card{ text-align: left; }
.stat-num{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 600;
  color: var(--ink);
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label{ margin-top: 6px; font-size: 0.9rem; color: var(--muted); }

/* ---------- process node motif ---------- */
.node-row{
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding-block: 6px;
}
.node{
  flex: none;
  display: flex;
  align-items: center;
  gap: 0;
}
.node-dot{
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-soft);
  flex: none;
}
.node-line{
  width: clamp(28px, 5vw, 64px);
  height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--blue));
  flex: none;
}

.step-card{
  position: relative;
  padding-top: 56px;
}
.step-card h3{
  margin-top: 4px;
}
.step-num{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--teal-strong);
  background: var(--teal-soft);
  border-radius: 999px;
  padding: 4px 10px;
  position: absolute;
  top: 22px; left: 26px;
}

/* ---------- footer ---------- */
.site-footer{
  background: var(--navy-deep);
  color: #cfe0ee;
  padding-block: 52px 28px;
  margin-top: 40px;
}
.site-footer a{ color: #cfe0ee; }
.site-footer .brand{ color: #ffffff; }
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 28px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 780px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-col h4{ color: #ffffff; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--font-mono); font-weight: 500; margin-bottom: 14px; }
.footer-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a{ opacity: 0.82; font-size: 0.92rem; }
.footer-col a:hover{ opacity: 1; color: var(--teal); }
.footer-bottom{
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  padding-top: 22px; font-size: 0.82rem; opacity: 0.7;
}
.footer-address{ font-size: 0.92rem; opacity: 0.85; line-height: 1.6; }
.copy-line{ display: flex; align-items: center; gap: 8px; }

/* ---------- forms ---------- */
.field{ display: flex; flex-direction: column; gap: 6px; }
.field label{ font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.field input, .field select, .field textarea{
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px){ .form-grid{ grid-template-columns: 1fr; } }

.form-note{
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: var(--teal-strong);
  margin-top: 10px;
}

.contact-detail{
  display: flex; gap: 14px; align-items: flex-start;
  padding-block: 14px;
  border-bottom: 1px solid var(--border);
}
.contact-detail:last-child{ border-bottom: none; }
.contact-detail .ico{
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  background: var(--grad-soft); color: var(--teal-strong);
  display: flex; align-items: center; justify-content: center;
}

/* ---------- blog ---------- */
.post-card{ display: flex; flex-direction: column; gap: 12px; }
.post-meta{ font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
.post-card h3{ font-size: 1.15rem; }

/* ---------- misc ---------- */
.divider{ height: 1px; background: var(--border); border: none; margin-block: 0; }

.cta-band{
  border-radius: var(--radius-lg);
  background: var(--grad-brand);
  color: #ffffff;
  padding: clamp(32px, 5vw, 52px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-band h2{ color: #ffffff; }
.cta-band p{ color: rgba(255,255,255,0.85); }
.cta-band .btn-ghost{ border-color: rgba(255,255,255,0.55); color: #ffffff; }
.cta-band .btn-ghost:hover{ border-color: #ffffff; }

.value-row{ display: flex; gap: 16px; align-items: flex-start; }
.value-row .num{ font-family: var(--font-mono); color: var(--teal-strong); font-weight: 600; }

.reveal{ opacity: 1; }

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

:focus-visible{ outline: 2px solid var(--teal); outline-offset: 2px; }

/* ---------- server-rendered bilingual content (blog.php / article.php) ----------
   Content that comes from the JSON article store is rendered once, in both
   languages, then toggled with plain CSS — simpler than the data-i18n
   dictionary pattern for free-form per-article text. */
html[lang="fr"] .lang-en{ display: none; }
html[lang="en"] .lang-fr{ display: none; }