/**
 * MY-PHI — Styles et design
 * Complète Tailwind (chargé via CDN) avec variables et animations.
 */

/* --- Variables (alignées avec Tailwind theme) --- */
:root {
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-200: #bae6fd;
  --color-primary-300: #7dd3fc;
  --color-primary-400: #38bdf8;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  --color-primary-800: #075985;
  --color-primary-900: #0c4a6e;
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --shadow-soft: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
  --color-premium-gold: #c9a227;
}

/* Coche or premium (liste MY-PHI Premium, sauf « Fonctionnalité de base ») */
.check-premium-gold {
  color: var(--color-premium-gold);
}

/* --- Base --- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
}

/* --- Ancres de section (offset pour navbar sticky) --- */
.section-anchor {
  scroll-margin-top: 5.5rem;
}

/* --- Animations au scroll --- */
.animate-on-scroll {
  opacity: 0;
}

.animate-delay-100 { animation-delay: 100ms; }
.animate-delay-200 { animation-delay: 200ms; }
.animate-delay-300 { animation-delay: 300ms; }
.animate-delay-400 { animation-delay: 400ms; }

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Utilitaires design --- */
.shadow-soft {
  box-shadow: var(--shadow-soft);
}

.shadow-card {
  box-shadow: var(--shadow-card);
}

/* --- Bandeau cookies --- */
.cookie-banner {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* --- Feuille de route : connecteur chronologique entre jalons --- */
.roadmap-connector {
  min-height: 2rem;
}
.roadmap-connector .w-px {
  flex: none;
  height: 8px;
  min-height: 8px;
}

/* --- Déploiement : numéros étapes (style SaaS premium) --- */
.deployment-step-num {
  background: linear-gradient(135deg, var(--color-primary-600) 0%, #6366f1 100%);
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
}

/* --- Section Produits (SaaS 2026) --- */
.produits-section {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #ffffff 100%);
}

.produit-pill {
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.produit-pill:hover:not(.produit-pill-active) {
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.08), 0 6px 20px -4px rgba(0, 0, 0, 0.06);
  border-color: var(--color-slate-300);
}

.produit-card {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.produits-content-area {
  transition: opacity 0.3s ease;
}

/* Bloc intro MY-PHI Machine : capture d'écran avec léger effet 3D */
.problem-screenshot-wrap {
  transform: perspective(1200px) rotateX(2deg) rotateY(-2deg);
  transition: transform 0.3s ease;
}

.problem-screenshot-wrap:hover {
  transform: perspective(1200px) rotateX(0) rotateY(0);
}

/* --- Section Produits : blocs valeur (SaaS 2026, compact) --- */
.value-section-block {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 0;
  margin-bottom: 0;
}

.value-section-block:last-child {
  padding-bottom: 0;
}

/* Blocs valeur : format liste + image alternée (comme "Une solution 100 % web") */
.value-alternate-row {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.value-alternate-img {
  aspect-ratio: 16/9;
  max-height: 50%;
  max-width: 70%;
}

.value-alternate-img img {
  min-height: 50%;
  min-width: 50%;
}