/* =========================================================
   Coworkly — Design System (v4)
   Structure/typo héritées du groupe ID Associates. La hero section
   utilise désormais le dégradé orange OFFICIEL du groupe pour Coworkly,
   extrait de https://idassociates2026.benandrianne.workers.dev/group/coworkly/
   (même logique d'harmonisation que idaccounting2026, qui reprend le
   dégradé emerald de sa propre page /group/id-accounting/).
   Fonts   : Comfortaa (headings) / Space Grotesk (secondary) / Inter (body) / Geist Mono (tags)
   Couleurs: Anthracite #14181F · Orange marque Coworkly #FF400A (boutons, liens, éléments UI)
             · Dégradé hero groupe #7C2D12 → #9A3412 → #EA580C
   ========================================================= */

:root{
  --font-heading: "Comfortaa", "Trebuchet MS", system-ui, sans-serif;
  --font-secondary: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-tag: "Geist Mono", "JetBrains Mono", "Fira Code", monospace;

  /* Neutres corporate (remplace le bleu du groupe) */
  --color-navy-900: #1a1d23;   /* anthracite profond (ex-navy) */
  --color-navy-950: #101216;   /* quasi noir, fond topbar/footer */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-900: #14181f;

  /* Orange Coworkly — couleur de marque exclusive */
  --color-blue-600: #FF400A;      /* alias conservé pour compat composants existants */
  --color-blue-700: #E23600;
  --color-orange-500: #FF400A;
  --color-orange-600: #E23600;
  --color-orange-400: #FF6A3D;
  --color-orange-50: #FFF1EC;

  --color-sky-400: #FF8A5C;
  --color-sky-500: #FF6A3D;
  --color-emerald-400: #FF8A5C;
  --color-emerald-500: #FF400A;
  --color-emerald-600: #E23600;
  --color-amber-400: #fcbb00;

  --gradient-hero: linear-gradient(135deg,#101216 0%,#1a1d23 50%,#262b33 100%);
  --gradient-brand: linear-gradient(135deg,#E23600 0%,#FF400A 55%,#FF6A3D 100%);
  --gradient-emerald: linear-gradient(135deg,#E23600 0%,#FF400A 100%);

  /* Dégradé "accent groupe" — identique à celui de la page
     /group/coworkly/ sur idassociates2026 (référence de marque groupe) */
  --color-accent-900: #7C2D12;
  --color-accent-800: #9A3412;
  --color-accent-600: #EA580C;
  --gradient-accent: linear-gradient(135deg, #7C2D12 0%, #9A3412 50%, #EA580C 100%);

  --shadow-soft: 0 10px 30px -12px rgba(255,64,10,.18);
  --shadow-lift: 0 25px 50px -12px rgba(255,64,10,.28);
}

html{scroll-behavior:smooth;}
body{
  font-family: var(--font-sans);
  color: var(--color-slate-900);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,.font-heading{
  font-family: var(--font-heading);
  letter-spacing:-.02em;
}
.font-secondary{ font-family: var(--font-secondary); }
.font-tag{ font-family: var(--font-tag); }

/* ---------- Utility Backgrounds ---------- */
.bg-gradient-hero{ background: var(--gradient-hero); }
.bg-gradient-accent{ background: var(--gradient-accent); }
.text-gradient-brand{
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bg-gradient-emerald{ background: var(--gradient-emerald); }
.grid-overlay{
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ---------- Glassmorphism ---------- */
.glass{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.glass-light{
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---------- Header ---------- */
/* Sticky header: transparent (over the dark hero) -> solid white on scroll.
   Pattern conceptually identical to idaccounting2026.benandrianne.workers.dev,
   with Coworkly's orange substituted for their green as the PRIMARY structural
   color (logo badge, active nav state, CTA) rather than a small accent. */
#app-header{
  transition: background-color .3s ease, box-shadow .3s ease;
}
#app-header.header-scrolled{
  background-color: #fff;
  box-shadow: 0 1px 0 rgba(15,23,42,.06), 0 10px 24px -12px rgba(15,23,42,.15);
}

/* Text/icon color driven by scroll state: white over hero, anthracite once scrolled */
.header-text{ color:#fff; }
#app-header.header-scrolled .header-text{ color:#1a1d23; }

.header-nav-link{
  color: rgba(255,255,255,.9);
  position:relative;
}
.header-nav-link:hover{ color:#fff; background-color: rgba(255,255,255,.12); }
.header-nav-link-active{ color:#fff; background-color: rgba(255,255,255,.18); font-weight:600; }

#app-header.header-scrolled .header-nav-link{ color:#45556c; }
#app-header.header-scrolled .header-nav-link:hover{ color:#E23600; background-color:#FFF1EC; }
#app-header.header-scrolled .header-nav-link-active{ color:#E23600; background-color:#FFF1EC; }

.header-icon-menu{ color:#fff; }
#app-header.header-scrolled .header-icon-menu{ color:#1a1d23; }

/* FR/EN language switch (desktop segmented control + mobile full-width
   buttons) — structure and class names identical to the toggle on
   idaccounting2026.benandrianne.workers.dev, recolored to Coworkly's
   orange brand (matching .header-nav-link-active above) instead of
   their green. */
.header-lang-switch{ border-color: rgba(255,255,255,.25); }
.header-lang-inactive{ color: rgba(255,255,255,.7); }
.header-lang-inactive:hover{ color:#fff; background-color: rgba(255,255,255,.1); }
.header-lang-active{ color:#fff; background-color: rgba(255,255,255,.18); }

#app-header.header-scrolled .header-lang-switch{ border-color: #e2e8f0; }
#app-header.header-scrolled .header-lang-inactive{ color: #64748b; }
#app-header.header-scrolled .header-lang-inactive:hover{ color:#E23600; background-color:#FFF1EC; }
#app-header.header-scrolled .header-lang-active{ color:#E23600; background-color:#FFF1EC; }

/* Nav dropdown (desktop) */
.nav-dropdown{
  opacity:0; transform: translateY(-8px); pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
}
.nav-group:hover .nav-dropdown{ opacity:1; transform: translateY(0); pointer-events:auto; }
.nav-group button svg{ transition: transform .2s ease; }
.nav-group:hover button svg{ transform: rotate(180deg); }

.nav-link{
  position:relative;
  transition: color .2s ease;
}
.nav-link.active{ color: var(--color-navy-900); font-weight:600; }
.nav-link.active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px;
  height:2px; border-radius:2px;
  background: var(--gradient-brand);
}

/* ---------- Cards ---------- */
.card-hover{
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.card-hover:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(37,99,235,.35);
}
.card-glow{ position:relative; overflow:hidden; }
.card-glow::before{
  content:"";
  position:absolute; inset:-2px;
  background: var(--gradient-brand);
  opacity:0; transition: opacity .35s ease;
  z-index:-1; border-radius: inherit;
  filter: blur(18px);
}
.card-glow:hover::before{ opacity:.35; }

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity:0; transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible{ opacity:1; transform: translateY(0); }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }
.reveal-delay-4{ transition-delay:.32s; }

/* ---------- Badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family: var(--font-tag);
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.35rem .75rem; border-radius:999px;
  font-weight:600;
}

/* ---------- Accordion (FAQ) ---------- */
.accordion-item{ border-bottom:1px solid #e2e8f0; }
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem 0; text-align:left; cursor:pointer; background:none; border:0;
  font-family: var(--font-secondary); font-weight:600; color: var(--color-slate-900);
}
.accordion-trigger .chev{ transition: transform .3s ease; flex-shrink:0; }
.accordion-item.open .accordion-trigger .chev{ transform: rotate(180deg); }
.accordion-panel{
  max-height:0; overflow:hidden; transition: max-height .35s ease;
}
.accordion-item.open .accordion-panel{ }
.accordion-panel-inner{ padding-bottom:1.25rem; color:#45556c; line-height:1.7; }

/* ---------- Custom range slider ---------- */
input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:999px;
  background: linear-gradient(90deg, var(--color-blue-600) 0%, var(--color-blue-600) var(--range-progress,50%), #e2e8f0 var(--range-progress,50%), #e2e8f0 100%);
  outline:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:#fff; border:4px solid var(--color-blue-600);
  box-shadow: 0 2px 8px rgba(27,58,107,.35);
  cursor:pointer; transition: transform .15s ease;
}
input[type="range"]::-webkit-slider-thumb:hover{ transform: scale(1.12); }
input[type="range"]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:#fff; border:4px solid var(--color-blue-600);
  box-shadow: 0 2px 8px rgba(27,58,107,.35);
  cursor:pointer;
}

/* ---------- Simulator option pill ---------- */
.opt-pill{
  cursor:pointer; user-select:none;
  border:1.5px solid #e2e8f0; border-radius:1rem;
  padding:1rem 1.1rem; transition: all .2s ease; background:#fff;
}
.opt-pill:hover{ border-color:#90c5ff; background:#eff6ff; }
.opt-pill.selected{
  border-color: var(--color-blue-600);
  background: linear-gradient(0deg, rgba(37,99,235,.06), rgba(37,99,235,.06)), #fff;
  box-shadow: 0 6px 18px -8px rgba(37,99,235,.35);
}
.chk-pill{
  cursor:pointer; user-select:none; display:flex; align-items:center; gap:.65rem;
  border:1.5px solid #e2e8f0; border-radius:.85rem; padding:.85rem 1rem;
  transition: all .2s ease; background:#fff;
}
.chk-pill:hover{ border-color:#a4f4cf; }
.chk-pill.selected{
  border-color: var(--color-emerald-500);
  background: rgba(0,187,127,.06);
}
.chk-box{
  width:20px; height:20px; border-radius:.4rem; border:2px solid #cad5e2;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition: all .2s ease; color:#fff;
}
.chk-pill.selected .chk-box{ background: var(--color-emerald-500); border-color: var(--color-emerald-500); }

/* ---------- Price counter ---------- */
.price-flip{ transition: all .25s ease; }

/* ---------- Multi-step form ---------- */
.step-dot{
  width:2.25rem; height:2.25rem; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-tag); font-weight:600; font-size:.85rem;
  border:2px solid #cad5e2; color:#62748e; background:#fff;
  transition: all .3s ease;
}
.step-dot.active{ border-color: var(--color-blue-600); color:#fff; background: var(--gradient-brand); }
.step-dot.done{ border-color: var(--color-emerald-500); color:#fff; background: var(--color-emerald-500); }
.step-line{ flex:1; height:2px; background:#e2e8f0; }
.step-line.done{ background: var(--color-emerald-500); }
.form-step{ display:none; }
.form-step.active{ display:block; animation: fadeSlide .4s ease; }
@keyframes fadeSlide{
  from{ opacity:0; transform: translateX(16px); }
  to{ opacity:1; transform: translateX(0); }
}

/* ---------- Misc ---------- */
.section-padding{ padding-top:5rem; padding-bottom:5rem; }
@media (max-width:768px){ .section-padding{ padding-top:3.5rem; padding-bottom:3.5rem; } }
.container-custom{ max-width:1280px; margin:0 auto; padding-left:1.25rem; padding-right:1.25rem; }

::selection{ background: rgba(37,99,235,.2); }

.marquee-track{
  display:flex; gap:3rem; width:max-content;
  animation: marquee 28s linear infinite;
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.pulse-dot{
  width:8px; height:8px; border-radius:999px; background: var(--color-emerald-400);
  animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

.tilt-img{ transition: transform .5s ease; }
.tilt-card:hover .tilt-img{ transform: scale(1.06); }

.scrollbar-hide::-webkit-scrollbar{ display:none; }
.scrollbar-hide{ -ms-overflow-style:none; scrollbar-width:none; }