@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Covalba Design System : Original palette */
    --background: 60 20% 97%;
    --foreground: 215 52% 12%;

    --card: 0 0% 100%;
    --card-foreground: 215 52% 12%;

    --popover: 0 0% 100%;
    --popover-foreground: 215 52% 12%;

    --primary: 179 61% 26%;
    --primary-foreground: 0 0% 100%;

    --secondary: 180 33% 93%;
    --secondary-foreground: 215 52% 12%;

    --muted: 60 14% 96%;
    --muted-foreground: 216 12% 40%;

    --accent: 36 68% 50%;
    --accent-foreground: 0 0% 100%;

    --destructive: 10 55% 49%;
    --destructive-foreground: 0 0% 100%;

    --border: 60 14% 92%;
    --input: 60 7% 83%;
    --ring: 179 61% 26%;

    --radius: 0.75rem;

    /* Custom tokens */
    --navy: 215 52% 12%;
    --navy-light: 214 33% 17%;
    --teal: 179 61% 26%;
    --teal-light: 180 33% 93%;
    --teal-dark: 179 61% 20%;
    --teal-vivid: 180 52% 45%; /* #3AADAD — highlight sur fond navy */
    --terracotta: 10 55% 49%;
    --terracotta-dark: 10 58% 41%;
    --cream: 60 20% 97%;
    --offwhite: 60 14% 96%;
    --slate: 216 12% 40%;

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: var(--font-body), 'Plus Jakarta Sans', sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Satoshi', sans-serif;
    text-wrap: balance;
  }

  /* Focus ring */
  :focus-visible {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* Skip to content */
  .skip-link {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 0.5rem 1rem;
    background: hsl(var(--primary));
    color: white;
    font-weight: 600;
    border-radius: 0 0 0.5rem 0;
  }
  .skip-link:focus {
    left: 0;
    top: 0;
  }
}

/* Autofill detection — used by DiagnosticForm to know when the browser
   (Chrome/Safari/Edge) silently autofills inputs without firing React's onChange. */
@keyframes onAutoFillStart {
  from { opacity: 1; }
  to { opacity: 1; }
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  animation-name: onAutoFillStart;
  animation-duration: 1ms;
}

@layer utilities {
  .font-satoshi {
    font-family: 'Satoshi', sans-serif;
  }

  .font-body {
    font-family: var(--font-body), 'Plus Jakarta Sans', sans-serif;
  }

  .cta-gradient {
    background: linear-gradient(111.02deg, #991437, #d1290d);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .cta-gradient:active {
    transform: scale(0.98) translateY(1px);
  }

  .cta-secondary {
    border: 2px solid #991437;
    color: #991437;
    background: transparent;
    transition: background 0.2s ease, transform 0.2s ease;
  }

  .cta-secondary:hover {
    background: rgba(153, 20, 55, 0.05);
  }

  .cta-secondary:active {
    transform: scale(0.98) translateY(1px);
  }

  .glass {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .glass-dark {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* Marquee animation */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 35s linear infinite;
}

.seo-rich-text strong {
  color: hsl(var(--foreground) / 0.88);
  font-weight: 750;
}

.seo-rich-text em {
  color: hsl(var(--foreground) / 0.72);
  font-style: italic;
}

.seo-rich-link {
  color: hsl(var(--primary));
  font-weight: 700;
  text-decoration-color: hsl(var(--primary) / 0.25);
  text-underline-offset: 0.18em;
}

.seo-rich-link:hover {
  text-decoration-line: underline;
  text-decoration-color: hsl(var(--primary) / 0.55);
}

/* Fade in up for scroll */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade-in-up-delay-1 {
  animation: fadeInUp 0.6s ease-out 0.1s forwards;
  opacity: 0;
}

.animate-fade-in-up-delay-2 {
  animation: fadeInUp 0.6s ease-out 0.2s forwards;
  opacity: 0;
}

/* Hero stagger animations */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-hero-1 {
  animation: heroFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
  opacity: 0;
}

.animate-hero-2 {
  animation: heroFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
  opacity: 0;
}

.animate-hero-3 {
  animation: heroFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
  opacity: 0;
}

.animate-hero-4 {
  animation: heroFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
  opacity: 0;
}

/* Hero stats slide in from right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-hero-stats {
  animation: slideInRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards;
  opacity: 0;
}

/* Scroll reveal stagger for grid children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.stagger-children.in-view > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.stagger-children.in-view > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 80ms; }
.stagger-children.in-view > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 160ms; }
.stagger-children.in-view > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 240ms; }
.stagger-children.in-view > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 320ms; }
.stagger-children.in-view > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 400ms; }

/* Section reveal */
.section-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.section-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Slow ambient drift for background glows */
@keyframes ambientDrift {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 15px) scale(0.97); }
  100% { transform: translate(0, 0) scale(1); }
}

.animate-ambient {
  animation: ambientDrift 20s ease-in-out infinite;
}

.animate-ambient-slow {
  animation: ambientDrift 28s ease-in-out infinite reverse;
}

/* Dot pattern background */
.bg-dots {
  background-image: radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Table hover rows */
.comparison-table tbody tr {
  transition: background-color 0.15s ease;
}
.comparison-table tbody tr:hover td {
  background-color: hsl(var(--teal-light));
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .animate-marquee,
  .animate-fade-in-up,
  .animate-fade-in-up-delay-1,
  .animate-fade-in-up-delay-2,
  .animate-hero-1,
  .animate-hero-2,
  .animate-hero-3,
  .animate-hero-4,
  .animate-hero-stats {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .section-reveal,
  .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .animate-ambient,
  .animate-ambient-slow {
    animation: none !important;
  }
}

/* ── Corps d'article de blog (HTML éditeur classique WP) ───────────────── */
@layer components {
  .blog-prose {
    font-family: var(--font-body), 'Plus Jakarta Sans', sans-serif;
    color: hsl(var(--foreground) / 0.72);
  }
  .blog-prose > :first-child { margin-top: 0; }
  .blog-prose p {
    margin-bottom: 1.75rem;
    font-size: 1.04rem;
    line-height: 2rem;
  }
  .blog-prose h2 {
    font-family: 'Satoshi', sans-serif;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: hsl(var(--foreground));
    font-size: 1.875rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    scroll-margin-top: 8rem;
  }
  .blog-prose h3 {
    font-family: 'Satoshi', sans-serif;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: hsl(var(--foreground));
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
  }
  @media (min-width: 1024px) {
    .blog-prose h2 { font-size: 2.25rem; }
    .blog-prose p { font-size: 1.1rem; line-height: 2.25rem; }
  }
  .blog-prose strong { font-weight: 700; color: hsl(var(--foreground)); }
  .blog-prose a {
    color: hsl(var(--primary));
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .blog-prose ul { margin: 0 0 2.25rem; padding: 0; list-style: none; }
  .blog-prose ul li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.875rem;
    font-size: 1.04rem;
    line-height: 2rem;
  }
  .blog-prose ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.78em;
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 9999px;
    background: hsl(var(--primary));
  }
  .blog-prose .cvb-table {
    margin: 2.5rem 0;
    overflow-x: auto;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--card));
  }
  .blog-prose .cvb-table table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
  .blog-prose .cvb-table th,
  .blog-prose .cvb-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid hsl(var(--border));
    vertical-align: top;
  }
  .blog-prose .cvb-table thead th {
    background: hsl(var(--offwhite));
    color: hsl(var(--foreground));
    font-weight: 700;
  }
  .blog-prose .cvb-table tbody tr:last-child td { border-bottom: 0; }
  .blog-prose .cvb-tip {
    margin: 2rem 0;
    padding: 1.1rem 1.35rem;
    border-left: 3px solid hsl(var(--primary));
    background: hsl(var(--primary) / 0.06);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 1rem;
    line-height: 1.7;
    color: hsl(var(--foreground) / 0.8);
  }
}