/* Virage — Design tokens and base styles */
:root {
  --vert-sapin: #1F4D3E;
  --vert-profond: #0F3329;
  --vert-menthe: #B8E6CF;
  --vert-menthe-soft: #D7F0E1;
  --creme: #F5F1EA;
  --creme-deep: #EDE6D8;
  --texte: #1F2937;
  --texte-soft: #4B5563;
  --texte-mute: #6B7280;
  --blanc: #FFFFFF;
  --hairline: rgba(31, 41, 55, 0.08);
  --hairline-strong: rgba(31, 41, 55, 0.14);
  /* Couleur de mise en avant — pour les highlights / "nouveau" / accents secondaires */
  --accent: #E5704B;
  --accent-soft: #FBE4DA;
}

/* Highlight color utility */
.highlight-accent {
  background: linear-gradient(180deg, transparent 60%, var(--accent-soft) 60%);
  padding: 0 4px;
  margin: 0 -4px;
}
.dot-accent {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent);
  vertical-align: middle; margin-right: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--creme);
  color: var(--texte);
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  width: 100%;
}
section { overflow-x: hidden; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; }

/* ---------- Type ramp ---------- */
.t-eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vert-sapin);
}
.t-display {
  font-weight: 800;
  font-size: clamp(48px, 6.5vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--texte);
}
.t-h1 {
  font-weight: 700;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.t-h2 {
  font-weight: 700;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.t-h3 {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.t-body {
  font-size: 17px;
  line-height: 1.55;
  color: var(--texte-soft);
}
.t-body-lg {
  font-size: 20px;
  line-height: 1.5;
  color: var(--texte-soft);
}
.t-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--texte-mute);
}
.italic-accent {
  font-style: italic;
  font-weight: 700;
  color: var(--vert-sapin);
}

/* ---------- Layout ---------- */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 720px) { .container { padding: 0 20px; } }

section { padding: 96px 0; }
@media (max-width: 720px) { section { padding: 64px 0; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: all 180ms ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--vert-sapin);
  color: var(--blanc);
}
.btn-primary:hover {
  background: var(--vert-profond);
  transform: translateY(-1px);
}
.btn-secondary {
  background: transparent;
  color: var(--texte);
  border: 1.5px solid var(--hairline-strong);
}
.btn-secondary:hover {
  border-color: var(--vert-sapin);
  color: var(--vert-sapin);
}
.btn-ghost {
  color: var(--texte);
  padding: 10px 12px;
}
.btn-ghost:hover { color: var(--vert-sapin); }

.btn .arrow {
  transition: transform 180ms ease;
}
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Cards ---------- */
.card {
  background: var(--blanc);
  border-radius: 24px;
  border: 1px solid var(--hairline);
  transition: all 220ms ease;
}
.card-hover:hover {
  border-color: rgba(31, 77, 62, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px -16px rgba(31, 77, 62, 0.18);
}

/* ---------- Pill / Badge ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background: var(--blanc);
  border: 1px solid var(--hairline);
  color: var(--texte);
}
.pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--vert-sapin);
}
.pill-dot.live::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--vert-sapin);
  animation: pulse 1.6s ease-out infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(3); opacity: 0; }
}

/* ---------- Logo (inline) ---------- */
.logo-wrap {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.logo-picto {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--vert-sapin);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.logo-text {
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--texte);
}

/* ---------- Hairline divider ---------- */
.hairline {
  height: 1px;
  background: var(--hairline);
  width: 100%;
}

/* ---------- Animation utilities ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeInUp 600ms ease-out backwards;
}

/* Floating card subtle bob */
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.bob { animation: bob 6s ease-in-out infinite; }

/* Striped placeholder for imagery */
.placeholder-img {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(31, 77, 62, 0.04) 0px,
      rgba(31, 77, 62, 0.04) 8px,
      rgba(31, 77, 62, 0.08) 8px,
      rgba(31, 77, 62, 0.08) 16px
    );
  border: 1px dashed rgba(31, 77, 62, 0.25);
  color: var(--vert-sapin);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  display: grid;
  place-items: center;
  border-radius: 16px;
}

/* Focus rings */
:focus-visible {
  outline: 2px solid rgba(31, 77, 62, 0.45);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Underline link */
.ulink {
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity 150ms ease;
}
.ulink:hover { opacity: 0.7; }

/* ---------- Page hero (intérieur — hors home) ---------- */
.page-hero {
  padding: 120px 0 64px;
  background:
    radial-gradient(900px 360px at 80% 0%, rgba(184, 230, 207, 0.35), transparent 60%),
    radial-gradient(700px 280px at 0% 30%, rgba(229, 112, 75, 0.06), transparent 60%);
}
@media (max-width: 720px) { .page-hero { padding: 80px 0 40px; } }

.page-hero .eyebrow-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.page-hero h1 { margin: 0 0 20px; }
.page-hero .lead { max-width: 720px; }

/* ---------- Prose ---------- */
.prose { max-width: 760px; }
.prose p { font-size: 17px; line-height: 1.7; color: var(--texte-soft); margin: 0 0 18px; }
.prose strong { color: var(--texte); font-weight: 600; }
.prose ul { padding-left: 22px; margin: 0 0 18px; color: var(--texte-soft); line-height: 1.7; font-size: 17px; }
.prose li { margin-bottom: 8px; }
.prose h2 { margin-top: 48px; }
.prose h3 { margin-top: 32px; margin-bottom: 8px; }

/* ---------- Mobile burger / menu (hidden on desktop by default) ---------- */
.header-burger { display: none; }
.header-burger:hover { background: var(--hairline); }

/* ---------- Responsive ---------- */

/* Tablet & below */
@media (max-width: 960px) {
  /* Header — drop tagline + secondary nav + login link */
  .header-tagline { display: none !important; }
  .header-nav { display: none !important; }

  /* Show the burger menu */
  .header-burger { display: inline-flex !important; }

  /* Header: tighten the demo CTA so it never overflows */
  header .btn-primary {
    padding: 12px 16px !important;
    font-size: 14px !important;
  }
  /* Hide login link on mobile (in burger menu instead) */
  header > div > div > a.btn-ghost { display: none !important; }

  /* Hero — stack text + mockup vertically, center the text block */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    text-align: center !important;
  }
  .hero-grid > .fade-in:first-child > * {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero-grid > .fade-in:first-child > div[style*="flex"] {
    justify-content: center !important;
  }

  /* Hero display title — bring down the size on small screens */
  .t-display {
    font-size: clamp(40px, 9vw, 64px) !important;
  }

  /* ProofStrip 3-stat card → single column */
  section .card[style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Strip the right border between stacked stats */
  section .card[style*="repeat(3, 1fr)"] > div {
    border-right: 0 !important;
    padding-right: 0 !important;
  }

  /* CursusBlock card — stack columns */
  section .card[style*="1.1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Collaboratif — stack text + workspace mockup */
  section > .container > div[style*="1fr 1.1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Pourquoi 3-col → 1 col (and Newsletter, ManifesteExtrait, TarifsAperçu plans grid) */
  section > .container > div[style*="repeat(3, 1fr)"],
  section > .container > div[style*="1.1fr 1fr"],
  section > .container > div[style*="1fr 1.2fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Highlighted Pro tarif card: cancel the lifted translateY on mobile */
  section .card[style*="translateY(-12px)"] {
    transform: none !important;
  }

  /* Platform mockup — hide the icon-only sidebar (no value on mobile) */
  .hero-grid section aside,
  .hero-grid .card > aside {
    display: none !important;
  }
  /* Reduce the mockup card to a single main area */
  .hero-grid .card[style*="64px 1fr"] {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  /* Inner mockup body — stack courses + agenda */
  .hero-grid .card div[style*="1.4fr 0.9fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Disable right border between stacked mockup panels */
  .hero-grid .card div[style*="1.4fr 0.9fr"] > div:first-child {
    border-right: 0 !important;
    border-bottom: 1px solid var(--hairline) !important;
  }

  /* Footer — 4 cols → 2 cols */
  footer > .container > div[style*="1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }

  /* Sections — tighten padding */
  section { padding: 64px 0 !important; }

  /* Newsletter big card padding */
  section[id="newsletter"] > .container > div {
    padding: 40px 28px !important;
  }

  /* CTA Final big card padding */
  section[id="demo"] > .container > div {
    padding: 56px 28px !important;
  }
}

/* Tab toggles (Cursus, Collaboratif) — scroll horizontally on small screens */
@media (max-width: 960px) {
  section .container > div[style*="inline-flex"][style*="border-radius: 999px"][style*="background: var(--creme)"] {
    display: flex !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
  }
  section .container > div[style*="inline-flex"][style*="border-radius: 999px"][style*="background: var(--creme)"]::-webkit-scrollbar {
    display: none !important;
  }
  section .container > div[style*="inline-flex"][style*="border-radius: 999px"][style*="background: var(--creme)"] > button {
    flex-shrink: 0 !important;
  }
}

/* Phone */
@media (max-width: 720px) {
  /* Progression 6 levels → 2 columns */
  section > .container > div > div[style*="repeat(6, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  /* Progression dashed path SVG: hide on mobile (too narrow) */
  section > .container > div > svg[viewBox="0 0 1000 80"] {
    display: none !important;
  }
  /* Progression staircase translateY effect off on mobile */
  section .card-hover[style*="translateY"] {
    transform: none !important;
  }

  /* H1 / H2 tighter */
  .t-h1 { font-size: clamp(28px, 7vw, 40px) !important; }
  .t-h2 { font-size: clamp(22px, 5vw, 28px) !important; }

  /* Footer — 2 cols → 1 col */
  footer > .container > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Manifeste illus — keep proportional */
  section .container img[src*="community"] { max-width: 100% !important; height: auto !important; }

  /* Progression bottom certif card (image + text + image) — stack vertically */
  section > .container > div[style*="vert-menthe-soft"][style*="display: flex"] {
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;
  }
  section > .container > div[style*="vert-menthe-soft"] img {
    width: 100px !important;
    height: 100px !important;
  }

  /* Tweak body text size */
  .t-body, .t-body-lg { font-size: 16px !important; }

  /* Hero — display title even smaller */
  .t-display { font-size: clamp(34px, 11vw, 52px) !important; }

  /* Mockup inner padding tightening */
  .hero-grid .card div[style*="padding: 22px"] {
    padding: 16px !important;
  }
}

/* Small phone */
@media (max-width: 480px) {
  .container { padding: 0 16px !important; }

  /* Tarifs star card — kill any leftover translateY */
  section .card[style*="translateY"] { transform: none !important; }

  /* Header CTA — even tighter */
  header .btn-primary {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  /* Hero pill text smaller */
  .pill { font-size: 12px !important; padding: 5px 10px !important; }

  /* CTA Final card extra tight */
  section[id="demo"] > .container > div {
    padding: 48px 20px !important;
  }
  section[id="demo"] .btn { padding: 14px 22px !important; font-size: 15px !important; }
}