@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;1,300;1,400&family=Outfit:wght@300;400;500;600&display=swap');

:root {
  --v1: #6c5ce7;
  --v2: #8b7cf8;
  --v-glow: rgba(108,92,231,0.28);
  --off-white: #faf9ff;
  --gris-clair: #f4f2ff;
  --texte: #0a0818;
  --texte2: #4a4565;
  --texte3: #8a86a8;
  --bordure: rgba(108,92,231,0.14);
  --bordure2: rgba(108,92,231,0.28);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Outfit", system-ui, sans-serif;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; }

body {
  font-family: var(--sans);
  background: var(--off-white);
  color: var(--texte);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Grain */
body::after {
  content: "";
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 100; opacity: 0.35;
}

/* Orbe décoratif */
body::before {
  content: "";
  position: fixed; top: -10%; right: -5%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(108,92,231,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding: 64px 72px;
  max-width: 560px;
  width: 90%;
  box-shadow: 0 32px 80px rgba(108,92,231,0.10), 0 2px 8px rgba(108,92,231,0.05);
  animation: fadeUp 0.7s cubic-bezier(0.4,0,0.2,1) both;
}

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

/* Barre violette gauche */
.card::before {
  content: "";
  position: absolute; left: 0; top: 12%; height: 76%; width: 3px;
  background: linear-gradient(to bottom, transparent, var(--v1), transparent);
  border-radius: 0 2px 2px 0;
}

/* Numéro décoratif */
.card::after {
  content: "01";
  position: absolute; top: 16px; right: 24px;
  font-family: var(--serif); font-size: 5rem; font-weight: 300;
  color: rgba(108,92,231,0.06); line-height: 1;
  letter-spacing: -3px; user-select: none;
}

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
.eyebrow-line { width: 32px; height: 1px; background: var(--v1); }
.eyebrow-text {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 3px;
  text-transform: uppercase; color: var(--v1);
}

h1 {
  font-family: var(--serif);
  font-size: 2.4rem; font-weight: 300; line-height: 1.15;
  color: var(--texte); letter-spacing: -1px;
  margin-bottom: 32px;
}
h1 em {
  font-style: italic; color: var(--v1);
}

a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none;
  padding: 13px 28px; border: 1.5px solid var(--v1); border-radius: 3px;
  color: var(--v1); background: transparent; position: relative; overflow: hidden;
  transition: color 0.25s ease, background 0.25s ease, transform 0.2s var(--ease-spring), box-shadow 0.25s ease;
}
a::after { content: "→"; font-size: 1em; transition: transform 0.2s ease; }
a:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--v1) 0%, #4834d4 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--v-glow);
  border-color: transparent;
}
a:hover::after { transform: translateX(4px); }