@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&family=Syncopate:wght@700&display=swap');

:root {
  --bg-main: #e5e5e5;
  --accent: #ff7a30;
  --grid-border: rgba(0, 0, 0, 0.1);
  --ink: #1a1a1a;
  --neu-dark: rgba(0, 0, 0, 0.15);
  --neu-light: rgba(255, 255, 255, 0.75);
  --nav-bg: rgba(229, 229, 229, 0.88); /* for frosted-glass sticky nav */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--bg-main);
  font-family: 'Space Grotesk', sans-serif;
  color: var(--ink);
  overflow-x: clip; /* prevent horizontal scroll (doesn't break position:sticky) */
}


a,
button,
input,
select {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Logo site ──────────────────────────────────────────────────────────── */
/* SVG injecté en inline via assets/logo.js → contrôle couleurs par CSS    */
.site-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo {
  height: 30px;
  width: 140px;
  display: block;
  overflow: visible;
}

.site-logo--sm {
  height: 20px;
  width: 93px;
}

/* Couleurs SVG inline — light mode */
.logo-text {
  fill: #1a1a1a;
  transition: fill 0.3s ease;
}

.logo-accent {
  fill: #ff7a30;
}

/* Dark mode : texte → clair, orange inchangé */
:root[data-theme='dark'] .logo-text {
  fill: #eceef3;
}

/* ── Logo engineer component (from logobach.html) ──────────────────── */
.logo-engineer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
}

.logo-engineer .main {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 3.5rem;
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 0.9;
  color: var(--ink);
}

.logo-engineer .line {
  width: 100%;
  height: 5px;
  background: var(--accent);
  margin: 12px 0 10px 0;
}

.logo-engineer .sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  letter-spacing: 0.45em;
  color: var(--gray, #4b5563);
  font-weight: 800;
  text-transform: uppercase;
  margin-right: -0.45em;
}

/* Typewriter cursor */
.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: tw-blink 0.7s steps(1) infinite;
}

@keyframes tw-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .typewriter-cursor { animation: none; opacity: 1; }
}

:root[data-theme='dark'] .logo-engineer .sub {
  color: #9ca3af;
}

/* Header-sized logo variant */
.logo-header {
  display: inline-flex;
}

.logo-header .logo-engineer .main {
  font-size: 1.2rem;
  letter-spacing: -0.5px;
}

.logo-header .logo-engineer .line {
  height: 3px;
  margin: 5px 0 4px 0;
}

.logo-header .logo-engineer .sub {
  font-size: 0.5rem;
}

.font-title {
  font-family: 'Syncopate', sans-serif;
  text-transform: uppercase;
}

.grid-layout {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 1fr 80px;
}

.cell {
  border-right: 1px solid var(--grid-border);
  border-bottom: 1px solid var(--grid-border);
  padding: 2rem;
}

.cell-no-right {
  border-right: none;
}

.btn-incubation {
  background: var(--accent);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
}

.btn-incubation:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.nav-link {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  font-weight: 700;
  text-transform: uppercase;
}

.nav-link.active,
.nav-link:hover {
  color: var(--accent);
}

.card {
  border: 1px solid var(--grid-border);
  border-radius: 0.8rem;
  background: #fff;
}

.tag {
  border: 1px solid var(--grid-border);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: #fff;
}

.tag.active {
  border-color: var(--accent);
  color: var(--accent);
}

.tool-link {
  color: var(--accent);
  font-size: 0.84rem;
  font-weight: 700;
}

@media (max-width: 1024px) {
  .grid-layout {
    grid-template-columns: 1fr;
  }

  .cell,
  .cell-no-right {
    border-right: none;
    padding: 1.25rem;
  }

  /* Prevent col-span-3 from creating implicit columns on a 1-column mobile grid */
  .grid-layout > .col-span-3 {
    grid-column: 1 / -1;
  }
}


.step-item {
  border: 1px solid var(--grid-border);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  background: #fff;
}

.site-footer {
  border-top: 1px solid var(--grid-border);
  padding: 1rem 2rem;
  font-size: 0.8rem;
  opacity: 0.8;
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.newsletter-form input {
  min-width: 220px;
  border: 1px solid var(--grid-border);
  border-radius: 0.5rem;
  padding: 0.65rem 0.8rem;
  font-family: inherit;
}


/* ── Hardware neumorphic toggle ────────────────────────────────────────── */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-main);
  border: none;
  padding: 7px 11px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 4px 4px 10px var(--neu-dark), -4px -4px 10px var(--neu-light);
  transition: box-shadow 0.3s ease;
  outline: none;
  text-decoration: none;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.toggle-label {
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: 'Space Grotesk', monospace;
  color: rgba(0, 0, 0, 0.2);
  transition: color 0.3s ease;
  user-select: none;
  line-height: 1;
}

.theme-toggle:not(.is-dark) .toggle-label[data-for="light"] { color: #5baeff; }
.theme-toggle.is-dark .toggle-label[data-for="dark"]         { color: var(--accent); }

.toggle-track {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--bg-main);
  box-shadow: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light);
  flex-shrink: 0;
  overflow: visible;
}

/* LED groove */
.toggle-track::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 5px;
  right: 5px;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 1px;
  background: #5baeff;
  opacity: 0.45;
  transition: background 0.35s ease, opacity 0.35s ease;
}

.theme-toggle.is-dark .toggle-track::before {
  background: var(--accent);
  opacity: 0.6;
}

.toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-main);
  box-shadow: 2px 2px 5px var(--neu-dark), -2px -2px 5px var(--neu-light);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
}

.toggle-knob::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #5baeff;
  opacity: 0.6;
  transition: background 0.35s ease, opacity 0.35s ease;
  box-shadow: 0 0 4px rgba(91, 174, 255, 0.6);
}

.theme-toggle.is-dark .toggle-knob { transform: translateX(20px); }
.theme-toggle.is-dark .toggle-knob::after {
  background: var(--accent);
  box-shadow: 0 0 4px rgba(255, 122, 48, 0.7);
}

:root[data-theme='dark'] .toggle-label { color: rgba(255, 255, 255, 0.2); }
:root[data-theme='dark'] .theme-toggle:not(.is-dark) .toggle-label[data-for="light"] { color: #5baeff; }
:root[data-theme='dark'] .theme-toggle.is-dark .toggle-label[data-for="dark"] { color: var(--accent); }

:root[data-theme='dark'] {
  --bg-main: #111216;
  --ink: #eceef3;
  --grid-border: rgba(255, 255, 255, 0.16);
  --neu-dark: rgba(0, 0, 0, 0.55);
  --neu-light: rgba(255, 255, 255, 0.04);
  --nav-bg: rgba(17, 18, 22, 0.88); /* dark mode frosted-glass */
}

:root[data-theme='dark'] .card,
:root[data-theme='dark'] .tag,
:root[data-theme='dark'] .step-item,
:root[data-theme='dark'] .theme-toggle,
:root[data-theme='dark'] .newsletter-form input,
:root[data-theme='dark'] .bg-white {
  background: #181a20 !important;
  color: var(--ink);
}

/* Améliorer le contraste en mode clair (WCAG AA: ratio ≥ 4.5:1 pour texte normal) */
/* text-black/60 ≈ ratio 3.6 → on monte à /72 ≈ ratio 4.6 */
.text-black\/60 {
  color: rgba(0, 0, 0, 0.72) !important;
}

:root[data-theme='dark'] .text-black\/40,
:root[data-theme='dark'] .text-black\/50 {
  color: rgba(236, 238, 243, 0.45) !important;
  opacity: 1;
}

:root[data-theme='dark'] .text-black\/60,
:root[data-theme='dark'] .text-black\/70,
:root[data-theme='dark'] .opacity-80,
:root[data-theme='dark'] .opacity-50 {
  color: rgba(236, 238, 243, 0.82) !important;
  opacity: 1;
}

:root[data-theme='dark'] .border-black\/10 {
  border-color: var(--grid-border) !important;
}

:root[data-theme='dark'] .h-\[1px\],
:root[data-theme='dark'] .lg\:h-20 {
  background-color: var(--grid-border) !important;
}

/* .blog-header now inherits from .services-hero — kept for backward compat */
.blog-header {
  border: 1px solid var(--grid-border);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(255, 122, 48, 0.14), rgba(255, 255, 255, 1) 40%);
}

/* ── Bloc info souveraineté / RGPD ─────────────────────────────────────── */
.info-sovereignty {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(59, 130, 246, 0.3);
  background: rgba(239, 246, 255, 0.92);
  padding: 0.75rem 1rem;
  max-width: 42rem;
  margin-top: 1.5rem;
}

.info-sovereignty .info-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 0.1rem;
}

.info-sovereignty p {
  font-size: 0.75rem;
  line-height: 1.65;
  color: #1e40af;
  margin: 0;
}

:root[data-theme='dark'] .info-sovereignty {
  border-color: rgba(96, 165, 250, 0.2);
  background: rgba(30, 58, 138, 0.18);
}

:root[data-theme='dark'] .info-sovereignty p {
  color: rgba(147, 197, 253, 0.9);
}

.blog-controls {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 1rem;
  align-items: end;
}

.blog-search {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.blog-search input {
  border: 1px solid var(--grid-border);
  border-radius: 0.65rem;
  padding: 0.7rem 0.85rem;
  font-family: inherit;
  background: #fff;
}

.blog-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.filter-chip {
  border: 1px solid var(--grid-border);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
}

.filter-chip.active,
.filter-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Filtres rapides Open Source & RGPD ────────────────────────────────── */
.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  transition: background 0.2s ease, border-color 0.2s ease,
              color 0.2s ease, transform 0.15s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.2s ease;
}

.filter-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.toggle-check {
  display: none;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0;
}

/* — Open Source actif — */
.filter-toggle--os.active {
  background: #dcfce7;
  border-color: #16a34a;
  color: #15803d;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
  transform: scale(1.05);
}
.filter-toggle--os.active .toggle-check { display: inline; }
.filter-toggle--os.active:hover { border-color: #15803d; }

/* — RGPD actif — */
.filter-toggle--rgpd.active {
  background: #dbeafe;
  border-color: #2563eb;
  color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  transform: scale(1.05);
}
.filter-toggle--rgpd.active .toggle-check { display: inline; }
.filter-toggle--rgpd.active:hover { border-color: #1d4ed8; }

/* Dark mode toggles */
:root[data-theme='dark'] .filter-toggle--os.active {
  background: rgba(21, 128, 61, 0.22);
  border-color: rgba(134, 239, 172, 0.55);
  color: #86efac;
  box-shadow: 0 0 0 3px rgba(134, 239, 172, 0.1);
}
:root[data-theme='dark'] .filter-toggle--rgpd.active {
  background: rgba(29, 78, 216, 0.22);
  border-color: rgba(147, 197, 253, 0.55);
  color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.1);
}

/* ── Badges cartes outils ────────────────────────────────────────────────── */
.badge-os {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #15803d;
}
.badge-rgpd {
  background: #dbeafe;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.badge-pricing-free {
  background: #dcfce7;
  color: #15803d;
}
.badge-pricing-freemium {
  background: #dbeafe;
  color: #1d4ed8;
}
.badge-pricing-paid {
  background: #fed7aa;
  color: #c2410c;
}

:root[data-theme='dark'] .badge-os {
  background: rgba(21, 128, 61, 0.22);
  border-color: rgba(134, 239, 172, 0.3);
  color: #86efac;
}
:root[data-theme='dark'] .badge-rgpd {
  background: rgba(29, 78, 216, 0.22);
  border-color: rgba(147, 197, 253, 0.3);
  color: #93c5fd;
}
:root[data-theme='dark'] .badge-pricing-free {
  background: rgba(21, 128, 61, 0.2);
  color: #86efac;
}
:root[data-theme='dark'] .badge-pricing-freemium {
  background: rgba(29, 78, 216, 0.2);
  color: #93c5fd;
}
:root[data-theme='dark'] .badge-pricing-paid {
  background: rgba(194, 65, 12, 0.2);
  color: #fdba74;
}

/* Étoiles vides (score) */
.star-empty { color: rgba(0, 0, 0, 0.15); }
:root[data-theme='dark'] .star-empty { color: rgba(255, 255, 255, 0.18); }

.article-card {
  border: 1px solid var(--grid-border);
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.article-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.article-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1rem 1rem 1.2rem;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
}

.article-card h2 {
  margin: 0;
  font-size: 1.17rem;
  line-height: 1.35;
}

.article-excerpt {
  margin: 0;
  color: rgba(0, 0, 0, 0.72);
  line-height: 1.45;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}

@media (max-width: 900px) {
  .blog-controls {
    grid-template-columns: 1fr;
  }
}

:root[data-theme='dark'] .blog-header,
:root[data-theme='dark'] .blog-search input,
:root[data-theme='dark'] .filter-chip,
:root[data-theme='dark'] .article-card {
  background: #181a20;
}

:root[data-theme='dark'] .article-excerpt,
:root[data-theme='dark'] .article-meta,
:root[data-theme='dark'] .text-black\/70,
:root[data-theme='dark'] .text-black\/60 {
  color: rgba(236, 238, 243, 0.8) !important;
}

/* ── IC chip favicon badge ─────────────────────────────────────────────── */
.tool-logo-chip {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(145deg, #ececec 0%, #f7f7f7 45%, #e4e4e4 100%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.07),
    2px 3px 6px rgba(0, 0, 0, 0.12),
    0 0 0 2.5px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* IC chip notch at top */
.tool-logo-chip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 4px;
  background: rgba(0, 0, 0, 0.09);
  border-radius: 0 0 4px 4px;
  z-index: 2;
}

/* Scan-line hover effect */
.tool-logo-chip::after {
  content: '';
  position: absolute;
  top: -120%;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.35), transparent);
  transition: top 0.45s ease;
  pointer-events: none;
}

article:hover .tool-logo-chip::after { top: 160%; }
article:hover .tool-logo-chip {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.07),
    3px 4px 10px rgba(0, 0, 0, 0.16),
    0 0 0 2.5px rgba(255, 122, 48, 0.18);
}

.tool-logo-chip img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
}

.tool-logo-chip .chip-fallback {
  font-size: 19px;
  line-height: 1;
  position: relative;
  z-index: 1;
}

:root[data-theme='dark'] .tool-logo-chip {
  background: linear-gradient(145deg, #272732 0%, #1e1e28 45%, #242430 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    2px 3px 6px rgba(0, 0, 0, 0.45),
    0 0 0 2.5px rgba(0, 0, 0, 0.25);
}

:root[data-theme='dark'] .tool-logo-chip::before { background: rgba(255, 255, 255, 0.07); }

:root[data-theme='dark'] article:hover .tool-logo-chip {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    3px 4px 10px rgba(0, 0, 0, 0.55),
    0 0 0 2.5px rgba(255, 122, 48, 0.3);
}

.tag-sponsor {
  border-color: rgba(255, 122, 48, 0.35);
  color: var(--accent);
}

.newsletter-feedback {
  width: 100%;
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.7);
}

.newsletter-feedback.is-error {
  color: #b42318;
}

:root[data-theme='dark'] .newsletter-feedback {
  color: rgba(236, 238, 243, 0.82);
}

:root[data-theme='dark'] .newsletter-feedback.is-error {
  color: #ff9b8f;
}

.services-hero {
  border: 1px solid var(--grid-border);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(255, 122, 48, 0.14), rgba(255, 255, 255, 1) 40%);
}

.service-card {
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 122, 48, 0.45);
}

/* ── Shared hero layout ────────────────────────────────────────────── */
.hero-block {
  min-height: 320px;
  border-radius: 1rem;
}

.hero-row {
  display: flex;
  gap: 4rem;
  padding: 4rem;
  min-height: 320px;
  align-items: center;
}

.hero-col-text {
  flex: 0 0 60%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border-left: 4px solid #ff591a;
  padding-left: 2rem;
}

.hero-col-logo {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

/* Reduced logo size for hero blocks */
.logo-sm .logo-engineer .main {
  font-size: 2.5rem;
}

/* Hero text items with numbering */
.hero-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.hero-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: #ff591a;
}

.hero-desc {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--ink);
  margin: 0;
}

.hero-sep {
  height: 1px;
  background: var(--grid-border);
}

/* ── Romeo showcase block ──────────────────────────────────────────── */
.romeo-block {
  border: 1.5px solid #ff591a;
  border-radius: 1rem;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(255, 89, 26, 0.06), transparent 40%);
}

:root[data-theme='dark'] .romeo-block {
  background: linear-gradient(140deg, rgba(255, 89, 26, 0.1), rgba(24, 26, 32, 1) 42%);
}

.romeo-badge {
  display: inline-block;
  width: fit-content;
  background: #ff591a;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
}

.romeo-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--ink);
  margin: 0;
}

.romeo-tagline {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

.romeo-desc {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--ink);
  opacity: 0.65;
  margin: 0;
}

.romeo-urgency {
  font-size: 0.8rem;
  font-weight: 600;
  font-style: italic;
  color: #ff591a;
  margin: 0;
}

.romeo-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.romeo-pill {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ff591a;
  background: rgba(255, 89, 26, 0.1);
  border: 1px solid rgba(255, 89, 26, 0.25);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
}

/* Responsive: stack columns on mobile, logo below text */
@media (max-width: 767px) {
  .hero-row {
    flex-direction: column;
    padding: 2rem 1.5rem;
    gap: 2rem;
  }

  .hero-col-text {
    flex: none;
    width: 100%;
  }

  .hero-col-logo {
    order: 1;
  }
}

.cta-banner {
  background: linear-gradient(135deg, rgba(255, 122, 48, 0.16), rgba(255, 255, 255, 1) 48%);
}

.contact-form {
  display: grid;
  gap: 1rem;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.83rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  border: 1px solid var(--grid-border);
  border-radius: 0.65rem;
  padding: 0.75rem 0.85rem;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.93rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}

.contact-form textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.contact-feedback {
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.74);
}

.contact-feedback.is-error {
  color: #b42318;
}

@media (min-width: 768px) {
  .contact-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Scroll-reveal animations (triggered by animations.js) ────────────── */

.reveal-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger: each direct child animates in sequence */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-stagger > *.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Nav scroll shadow */
.nav-scrolled {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}

:root[data-theme='dark'] .nav-scrolled {
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.4);
}

/* Desktop: always sticky from the top, frosted-glass on scroll */
@media (min-width: 769px) {
  .js-nav-section {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--nav-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: box-shadow 0.3s ease;
  }
}

:root[data-theme='dark'] .services-hero,
:root[data-theme='dark'] .cta-banner {
  background: linear-gradient(140deg, rgba(255, 122, 48, 0.16), rgba(24, 26, 32, 1) 42%);
}

:root[data-theme='dark'] .contact-form input,
:root[data-theme='dark'] .contact-form select,
:root[data-theme='dark'] .contact-form textarea {
  background: #181a20;
  color: var(--ink);
}

:root[data-theme='dark'] .contact-feedback {
  color: rgba(236, 238, 243, 0.82);
}

:root[data-theme='dark'] .contact-feedback.is-error {
  color: #ff9b8f;
}

:root[data-theme='dark'] select,
:root[data-theme='dark'] input[type='search'],
:root[data-theme='dark'] input[type='text'],
:root[data-theme='dark'] input[type='email'] {
  background: #181a20;
  color: var(--ink);
  border-color: var(--grid-border);
}

:root[data-theme='dark'] .toc {
  background: #181a20;
}
:root[data-theme='dark'] .toc-number {
  background: rgba(255, 122, 48, 0.15);
}
:root[data-theme='dark'] .toc-toggle,
:root[data-theme='dark'] .toc-text {
  color: var(--ink);
}
:root[data-theme='dark'] .toc-sub a {
  color: var(--ink);
}

:root[data-theme='dark'] .article-tag {
  background: #181a20;
  color: rgba(236, 238, 243, 0.6);
}

:root[data-theme='dark'] .article-tag--category {
  background: rgba(255, 122, 48, 0.15);
  color: var(--accent);
}

:root[data-theme='dark'] .article-meta-bar {
  color: rgba(236, 238, 243, 0.55);
}

:root[data-theme='dark'] .article-meta-sep {
  color: rgba(255, 255, 255, 0.15);
}

:root[data-theme='dark'] .article-tools-section {
  background: rgba(255, 122, 48, 0.06);
}

:root[data-theme='dark'] .toc strong {
  color: rgba(236, 238, 243, 0.5);
}

:root[data-theme='dark'] .toc a {
  color: var(--ink);
}

:root[data-theme='dark'] .prose p {
  color: rgba(236, 238, 243, 0.82);
}

:root[data-theme='dark'] .prose > p:first-child {
  color: rgba(236, 238, 243, 0.92);
}

:root[data-theme='dark'] .prose li {
  color: rgba(236, 238, 243, 0.82);
}

:root[data-theme='dark'] .breadcrumbs {
  color: rgba(236, 238, 243, 0.55);
}

/* ── Article layout ──────────────────────────────────────────────────── */
.article-body {
  display: flex;
  justify-content: center;
}

.article-container {
  max-width: 760px;
  width: 100%;
}

.article-title {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.article-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--grid-border);
}

.article-meta-sep {
  color: rgba(0, 0, 0, 0.2);
}

.article-hero {
  margin: 0 0 2rem;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--grid-border);
}

.article-hero img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

/* Article tags */
.article-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--grid-border);
  background: #fff;
  color: rgba(0, 0, 0, 0.6);
}

.article-tag--category {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255, 122, 48, 0.08);
}

/* Article tools section */
.article-tools-section {
  margin-top: 2.5rem;
  padding: 1.5rem;
  border: 1px solid var(--grid-border);
  border-radius: 0.8rem;
  background: rgba(255, 122, 48, 0.04);
}

.article-tools-section h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.8rem;
}

.article-tools-section ul {
  display: grid;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.article-tools-section a {
  color: var(--accent);
  font-weight: 700;
}

/* ── Breadcrumbs & TOC & Prose ───────────────────────────────────────── */
.breadcrumbs { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(0,0,0,.6); display:flex; gap:.5rem; flex-wrap:wrap; }
.breadcrumbs a { color: inherit; }
.seo-links { margin-top: 1.5rem; padding: 1rem; display:grid; gap:1rem; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); }
.seo-links h3 { font-weight: 700; margin-bottom: .4rem; }
.seo-links ul { font-size: .9rem; display:grid; gap:.35rem; }
/* ── TOC: hierarchical collapsible ──────────────────────────────────── */
.toc { border:1px solid var(--grid-border); border-radius:.7rem; padding:1.25rem 1.5rem; background:#fff; margin:0 0 2rem; }
.toc strong { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(0,0,0,0.45); display:block; margin-bottom:0.25rem; }
.toc-list { list-style:none; padding:0; margin:0.4rem 0 0; }
.toc-section { border-bottom:1px solid var(--grid-border); }
.toc-section:last-child { border-bottom:none; }
.toc-toggle { display:flex; align-items:center; gap:0.5rem; width:100%; padding:0.55rem 0; background:none; border:none; cursor:pointer; font:inherit; color:var(--ink); text-align:left; }
.toc-toggle:hover .toc-text { color:var(--accent); }
.toc-plain { display:flex; align-items:center; gap:0.5rem; padding:0.55rem 0; }
.toc-plain .toc-text { font-size:0.9rem; }
.toc-number { display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem; border-radius:50%; background:rgba(255,122,48,0.1); color:var(--accent); font-size:0.7rem; font-weight:700; flex-shrink:0; }
.toc-text { font-size:0.9rem; color:var(--ink); text-decoration:none; transition:color 0.2s; }
.toc-text:hover { color:var(--accent); }
.toc-chevron { width:0.9rem; height:0.9rem; margin-left:auto; transition:transform 0.25s ease; opacity:0.35; flex-shrink:0; }
.toc-toggle[aria-expanded="true"] .toc-chevron { transform:rotate(90deg); }
.toc-sub { list-style:none; padding:0 0 0.5rem 2.25rem; margin:0; display:grid; gap:0.2rem; font-size:0.85rem; }
.toc-sub a { color:var(--ink); opacity:0.65; transition:color 0.2s, opacity 0.2s; text-decoration:none; }
.toc-sub a:hover { color:var(--accent); opacity:1; }
.toc-active { color:var(--accent) !important; opacity:1 !important; font-weight:600; }
/* ── Prose: improved readability ────────────────────────────────────── */
.prose h2 { font-size:1.4rem; font-weight:700; margin:2.5rem 0 1rem; padding-top:1.5rem; border-top:2px solid transparent; border-image:linear-gradient(to right, var(--accent) 60px, var(--grid-border) 60px) 1; }
.prose h2:first-child { border-top:none; border-image:none; padding-top:0; margin-top:0; }
.prose h3 { font-size:1.1rem; font-weight:700; margin:1.75rem 0 .6rem; padding-left:0.75rem; border-left:3px solid var(--accent); }
.prose > p:first-child { font-size:1.1rem; line-height:1.8; color:rgba(0,0,0,0.88); margin-bottom:1.5rem; }
.prose p { margin:.85rem 0; color:rgba(0,0,0,.82); line-height:1.75; }
.prose ul { margin:0.75rem 0; padding-left:0; list-style:none; }
.prose li { margin:0.4rem 0; color:rgba(0,0,0,.82); line-height:1.65; padding-left:1.25rem; position:relative; }
.prose li::before { content:''; position:absolute; left:0; top:0.55em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.prose a { color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose table { width:100%; border-collapse:collapse; margin:1.2rem 0; font-size:0.95rem; overflow-x:auto; display:block; }
.prose thead { background:var(--accent); color:#fff; }
.prose th { padding:.6rem .75rem; text-align:left; font-weight:700; font-size:0.85rem; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; }
.prose td { padding:.55rem .75rem; border-bottom:1px solid var(--grid-border); color:rgba(0,0,0,.82); }
.prose tbody tr:nth-child(even) { background:rgba(0,0,0,.03); }
.prose tbody tr:hover { background:rgba(255,122,48,.06); }
:root[data-theme='dark'] .prose td { color:rgba(236,238,243,.82); }
:root[data-theme='dark'] .prose tbody tr:nth-child(even) { background:rgba(255,255,255,.04); }
:root[data-theme='dark'] .prose tbody tr:hover { background:rgba(255,122,48,.1); }
.comparison-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: .8rem 0; }
.comparison-table { width:100%; border-collapse: collapse; }
.comparison-table th,.comparison-table td{ border:1px solid var(--grid-border); padding:.55rem; text-align:left; }

/* ── Bannière de consentement RGPD ──────────────────────────────────────── */
#consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--bg-main);
  border-top: 1px solid var(--grid-border);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

#consent-banner.consent-visible {
  transform: translateY(0);
  opacity: 1;
}

.consent-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.consent-text {
  flex: 1;
  font-size: 0.82rem;
  color: rgba(0,0,0,0.75);
  margin: 0;
}

.consent-link {
  color: var(--accent, #ff7a30);
  text-decoration: underline;
  margin-left: 0.3rem;
}

.consent-actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

.consent-btn {
  padding: 0.45rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--grid-border);
  transition: background 0.2s, color 0.2s;
}

.consent-btn--accept {
  background: var(--accent, #ff7a30);
  color: #fff;
  border-color: var(--accent, #ff7a30);
}

.consent-btn--accept:hover { background: #e55e15; }

.consent-btn--refuse {
  background: transparent;
  color: var(--ink, #0f0f10);
}

.consent-btn--refuse:hover { background: rgba(0,0,0,0.06); }

:root[data-theme='dark'] #consent-banner {
  box-shadow: 0 -4px 32px rgba(0,0,0,0.45);
}
:root[data-theme='dark'] .consent-text { color: rgba(236,238,243,0.82); }
:root[data-theme='dark'] .consent-btn--refuse {
  color: var(--ink);
  border-color: rgba(255,255,255,0.2);
}

/* ── Mobile: auto-hide header on scroll down, reveal on scroll up ────── */
@media (max-width: 768px) {
  .js-nav-section {
    position: sticky;
    top: 0;
    z-index: 50;
    will-change: transform;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    background-color: var(--bg-main);
    /* Contain the header to viewport width — no overflow */
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  /* Compact vertical padding */
  .js-nav-section .col-span-3 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* Force nav horizontal on mobile instead of stacked */
  .js-nav-section nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  /* Smaller logo on mobile */
  .js-nav-section .site-logo {
    height: 22px;
    width: auto;
  }

  /* Hide the decorative side cells that stack above/below the nav on mobile */
  .js-nav-section .cell {
    display: none;
  }

  .js-nav-section.nav-hidden {
    transform: translateY(-100%);
  }

  /* Hide CTA in nav on mobile — already present in each page hero */
  .js-nav-section .btn-incubation {
    display: none;
  }
}

/* ── Mobile: category pills — ensure wrap and adequate spacing ─────────── */
@media (max-width: 640px) {
  /* Reduce padding on blog-header to give pills more room on narrow screens */
  .blog-header {
    padding: 1.25rem !important;
  }

  /* Pills container: wrap, auto height, visible overflow */
  .blog-header .flex.flex-wrap {
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: auto;
    overflow: visible;
  }

  /* Tags tappable size on mobile */
  .tag {
    padding: 0.35rem 0.65rem;
    font-size: 0.68rem;
  }
}

/* ── Global mobile improvements (375px–640px) ──────────────────────────── */
@media (max-width: 640px) {
  /* Reduce px-8 (2rem) → px-4 (1rem) horizontal padding on all col-span-3
     content areas: affects nav, hero, content sections and footer on every page */
  .grid-layout > .col-span-3 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Hide the 7.5px LIGHT / DARK labels — unreadable on mobile */
  .toggle-label {
    display: none;
  }

  /* Shorter article card images on mobile for better content/image ratio */
  .article-card img {
    height: 140px;
  }

  /* Ensure contact form inputs/selects meet 44px touch target */
  .contact-form input,
  .contact-form select {
    min-height: 44px;
    padding: 0.8rem 0.9rem;
  }

  /* Ensure tools-page filter inputs/selects meet 44px touch target */
  .blog-search input,
  .blog-search select {
    min-height: 44px;
  }

  /* Tighter consent banner padding on small screens */
  .consent-inner {
    padding: 0.75rem 1rem;
  }

  /* Ensure newsletter input doesn't overflow on small screens */
  .newsletter-form input {
    min-width: 0;
    width: 100%;
  }

  /* CTA buttons: 44px minimum touch target (padding 12px+12px+~16px font ≈ 40px) */
  .btn-incubation {
    min-height: 44px;
  }

  /* Filter-chip reset button: 44px touch target (was padding-only: ~25px) */
  .filter-chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Hero title: cap size on small screens (Syncopate is very wide) */
  .font-title {
    font-size: clamp(1.8rem, 8vw, 3rem) !important;
    word-break: break-word;
  }

  /* Safety: prevent content overflow on narrow screens */
  .services-hero,
  .cta-banner,
  .card {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  h2 {
    overflow-wrap: break-word;
  }
}

/* ── Very small screens (≤400px): tighter hero padding ─────────────── */
@media (max-width: 400px) {
  .hero-row {
    padding: 1.5rem 1rem;
  }
}

/* ── Prose code blocks: responsive overflow handling ─────────────────── */
.prose pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0.5rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.05);
  font-size: 0.9rem;
  line-height: 1.6;
}
:root[data-theme='dark'] .prose pre {
  background: rgba(255, 255, 255, 0.06);
}
.prose code {
  font-size: 0.88em;
  padding: 0.15em 0.35em;
  border-radius: 0.25rem;
  background: rgba(0, 0, 0, 0.06);
}
:root[data-theme='dark'] .prose code {
  background: rgba(255, 255, 255, 0.08);
}
.prose pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

@media (max-width: 640px) {
  .prose pre {
    font-size: 0.8rem;
    padding: 0.75rem;
  }
  .comparison-table th,
  .comparison-table td {
    padding: 0.4rem;
    font-size: 0.82rem;
  }
  .prose table { font-size: 0.82rem; }
  .prose th, .prose td { padding: 0.4rem 0.5rem; }
}

/* ── Dark mode: pricing badge Tailwind utility class overrides ─────────── */
/* Tool card badges use bg-green-100/blue-100/orange-100 — too light in dark mode */
:root[data-theme='dark'] .bg-green-100 { background-color: rgba(52, 211, 153, 0.12) !important; }
:root[data-theme='dark'] .text-green-800 { color: rgb(110, 231, 183) !important; }
:root[data-theme='dark'] .bg-blue-100 { background-color: rgba(96, 165, 250, 0.12) !important; }
:root[data-theme='dark'] .text-blue-800 { color: rgb(147, 197, 253) !important; }
:root[data-theme='dark'] .bg-orange-100 { background-color: rgba(251, 146, 60, 0.12) !important; }
:root[data-theme='dark'] .text-orange-800 { color: rgb(253, 186, 132) !important; }
:root[data-theme='dark'] .bg-gray-100 { background-color: rgba(255, 255, 255, 0.08) !important; }
:root[data-theme='dark'] .text-gray-700 { color: rgba(236, 238, 243, 0.7) !important; }

/* ── Article action buttons (copy + voice) ──────────────────────────── */
.article-actions {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.article-action-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--grid-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.15s, color 0.25s, box-shadow 0.25s;
  white-space: nowrap;
  overflow: hidden;
}

.article-action-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 122, 48, 0.15);
}

.article-action-btn:active {
  transform: translateY(0) scale(0.97);
}

/* Ripple effect */
.article-action-btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 122, 48, 0.25);
  transform: scale(0);
  animation: btn-ripple 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes btn-ripple {
  to { transform: scale(2.5); opacity: 0; }
}

/* SVG icon transition */
.article-action-btn svg {
  transition: transform 0.2s ease;
}
.article-action-btn:hover svg {
  transform: scale(1.12);
}

/* Success state — check mark bounce */
.article-action-btn.is-success {
  border-color: #22c55e;
  color: #16a34a;
  background: rgba(34, 197, 94, 0.08);
  animation: success-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes success-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Loading — sound wave animation (replaces spinner for voice btn) */
.article-action-btn.is-loading {
  pointer-events: none;
}

.article-action-btn.is-loading .article-action-label {
  animation: pulse-text 1.2s ease-in-out infinite;
}

@keyframes pulse-text {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* Sound wave bars for voice button loading */
.voice-wave {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 16px;
  margin-left: 0.35rem;
}

.voice-wave span {
  display: block;
  width: 2.5px;
  border-radius: 2px;
  background: var(--accent);
  animation: wave-bar 0.8s ease-in-out infinite;
}

.voice-wave span:nth-child(1) { height: 6px;  animation-delay: 0s; }
.voice-wave span:nth-child(2) { height: 12px; animation-delay: 0.15s; }
.voice-wave span:nth-child(3) { height: 8px;  animation-delay: 0.3s; }
.voice-wave span:nth-child(4) { height: 14px; animation-delay: 0.45s; }
.voice-wave span:nth-child(5) { height: 6px;  animation-delay: 0.6s; }

@keyframes wave-bar {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}

/* Ready state — subtle glow */
.article-action-btn.is-ready {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 122, 48, 0.1);
}

.article-action-label {
  pointer-events: none;
  transition: opacity 0.2s;
}

/* Tooltip on hover */
.article-action-btn[data-tooltip] {
  position: relative;
}

.article-action-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 0.3rem 0.65rem;
  font-size: 0.68rem;
  font-weight: 500;
  color: #fff;
  background: var(--ink);
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.article-action-btn[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Dark mode */
:root[data-theme='dark'] .article-action-btn {
  background: rgba(255, 255, 255, 0.06);
}
:root[data-theme='dark'] .article-action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 12px rgba(255, 122, 48, 0.2);
}
:root[data-theme='dark'] .article-action-btn .ripple {
  background: rgba(255, 122, 48, 0.3);
}
:root[data-theme='dark'] .article-action-btn.is-success {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border-color: #4ade80;
}
:root[data-theme='dark'] .article-action-btn[data-tooltip]::after {
  background: #eceef3;
  color: #111216;
}

/* ── Audio player ───────────────────────────────────────────────────── */
.article-audio-player {
  margin-bottom: 1.5rem;
  overflow: hidden;
}

/* Slide-in animation */
.article-audio-player.is-visible {
  animation: player-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes player-slide-in {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.article-audio-player-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--grid-border);
  border-radius: 1rem;
  backdrop-filter: blur(8px);
}

:root[data-theme='dark'] .article-audio-player-inner {
  background: rgba(255, 255, 255, 0.06);
}

.audio-play-pause,
.audio-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s, filter 0.2s, box-shadow 0.2s;
}

.audio-play-pause:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
  box-shadow: 0 3px 10px rgba(255, 122, 48, 0.35);
}

.audio-close:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
}

.audio-close {
  background: rgba(0, 0, 0, 0.1);
  color: var(--ink);
  width: 28px;
  height: 28px;
}

:root[data-theme='dark'] .audio-close {
  background: rgba(255, 255, 255, 0.12);
}

.audio-progress-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.audio-progress-bar {
  position: relative;
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  cursor: pointer;
  overflow: hidden;
  transition: height 0.15s;
}

.audio-progress-bar:hover {
  height: 8px;
}

:root[data-theme='dark'] .audio-progress-bar {
  background: rgba(255, 255, 255, 0.12);
}

.audio-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), #ff9a5c);
  border-radius: 3px;
  transition: width 0.15s linear;
}

.audio-time {
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: rgba(0, 0, 0, 0.5);
}

:root[data-theme='dark'] .audio-time {
  color: rgba(236, 238, 243, 0.5);
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .article-actions {
    flex-wrap: wrap;
  }
  .article-action-btn {
    font-size: 0.72rem;
    padding: 0.45rem 0.85rem;
    min-height: 44px;
  }
  .article-action-btn[data-tooltip]::after {
    display: none;
  }
}