@import url('./fonts.css');

/* ================================================================
   Design tokens — repris de resources/design-system/src/index.css
   ================================================================ */
:root {
  /* Brand & Yuppi palette */
  --color-brand: #007FFF;
  --color-primary: #0059b6;
  --yuppi-coral: #FF7A63;
  --yuppi-orange: #FFB366;
  --yuppi-yellow: #FFD166;
  --yuppi-pink: #E88BA8;
  --yuppi-purple: #C499E8;
  --yuppi-blue: #99C9E8;

  /* Surfaces */
  --color-background: #f5f6f7;
  --color-surface-container-lowest: #ffffff;
  --color-on-surface: #2c2f30;
  --color-on-surface-variant: #595c5d;

  /* Semantic (cf. design-system :root) */
  --foreground: #2C1810;
  --muted: #FFF4ED;
  --muted-foreground: #8B6B5C;
  --border: rgba(255, 122, 99, 0.15);

  /* Typography */
  --font-display: 'Pacifico', cursive;
  --font-headline: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Be Vietnam Pro', sans-serif;
  --font-ui: 'Inter', sans-serif;

  /* Radius (DS) */
  --radius-pill: 9999px;
  --radius-2xl: 1rem;       /* Tailwind rounded-2xl */
  --radius-card: 2rem;      /* DS card */
}

/* ================================================================
   Base
   ================================================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--foreground);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
}

/* ================================================================
   Hero layout — inspiré de HeroSection.tsx
   blob bleu top-right (#007FFF/10 blur-3xl) + accent coral
   ================================================================ */
main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  position: relative;
  isolation: isolate;
}

.bg-blobs {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Blob principal — reprend bg-[#007FFF]/10 blur-3xl du HeroSection */
.bg-blobs::before {
  content: '';
  position: absolute;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: rgba(0, 127, 255, 0.10);
  filter: blur(64px);
  top: -160px;
  right: -160px;
}

/* Blob secondaire — accent coral discret en bas-gauche */
.bg-blobs::after {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(255, 122, 99, 0.10);
  filter: blur(64px);
  bottom: -180px;
  left: -180px;
}

/* ================================================================
   Card — réplique du Card variant="elevated" du DS
   rounded-2xl + shadow elevated + p-6 (24px)
   ================================================================ */
.card {
  width: 100%;
  max-width: 640px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 3rem 2.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  text-align: center;
  position: relative;
}

/* ================================================================
   Brand wordmark — replique du NavBar logoText
   font-display (Pacifico) text-2xl, color = yuppi-coral
   ================================================================ */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.brand-mark {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 400; /* Pacifico n'a qu'un poids */
  font-size: 1.75rem; /* ≈ text-2xl + un poil pour Pacifico */
  line-height: 1;
  color: var(--yuppi-coral);
  letter-spacing: 0;
}

/* ================================================================
   Eyebrow / Badge — inspiré du Badge gradient/secondary du DS
   ================================================================ */
.eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0059b6;
  background: rgba(0, 89, 182, 0.08);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1rem;
  margin-bottom: 1.5rem;
}

.eyebrow.is-warning {
  color: #5c1a00;
  background: rgba(255, 148, 110, 0.18);
}

/* Statut affiché juste sous le logo (ex. "Maintenance en cours"). */
.status-line {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5c1a00;
  margin-bottom: 1.5rem;
}

/* ================================================================
   Headline — Plus Jakarta Sans, accent coral
   reprend les sizes du HeroSection (5xl-7xl en responsive)
   ================================================================ */
h1 {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--foreground);
  margin-bottom: 1rem;
}

h1 .accent {
  color: var(--yuppi-coral);
}

p.lead {
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: var(--muted-foreground);
  margin: 0 auto 2rem;
  max-width: 36rem;
}

/* ================================================================
   CTA Button — réplique Button variant="gradient" colorScheme="coral"
   linear-gradient(135deg, #FF7A63, color-mix(70% white))
   rounded-full, padding md (px-6 py-3), shadow 0 4px 12px
   ================================================================ */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  color: #ffffff;
  background: linear-gradient(135deg, var(--yuppi-coral) 0%, color-mix(in srgb, var(--yuppi-coral) 70%, white) 100%);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.875rem 1.75rem;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.cta:active {
  transform: scale(0.95);
}

/* ================================================================
   Secondary meta line
   ================================================================ */
.meta {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.meta a {
  color: var(--yuppi-coral);
  text-decoration: none;
  font-weight: 600;
}

.meta a:hover {
  text-decoration: underline;
}

.divider {
  height: 1px;
  background: var(--border);
  margin: 2rem auto 1.5rem;
  max-width: 4rem;
}

/* ================================================================
   Deadline badge (homologation) — encart coloré qui met en avant
   la date butoir de la phase d'homologation
   ================================================================ */
.deadline {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.25) 0%, rgba(255, 122, 99, 0.18) 100%);
  border: 1px solid rgba(255, 122, 99, 0.25);
  border-radius: var(--radius-2xl);
  padding: 0.875rem 1.75rem;
  margin: 0 auto 2rem;
}

.deadline-label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5c1a00;
}

.deadline-date {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--yuppi-coral);
  letter-spacing: -0.01em;
}

/* ================================================================
   Accounts / invité-via-alias block (homologation)
   ================================================================ */
.accounts {
  text-align: left;
  background: rgba(255, 122, 99, 0.06);
  border: 1px solid rgba(255, 122, 99, 0.18);
  border-radius: var(--radius-2xl);
  padding: 1.125rem 1.375rem;
  margin: 0 auto 1.5rem;
  max-width: 36rem;
}

.accounts-title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5c1a00;
  margin-bottom: 0.5rem;
}

.accounts p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--foreground);
  margin-bottom: 0.625rem;
}

.accounts p:last-of-type {
  margin-bottom: 0.75rem;
}

.accounts code {
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 0.875rem;
  background: #ffffff;
  border: 1px solid rgba(255, 122, 99, 0.25);
  border-radius: 4px;
  padding: 1px 6px;
  color: #5c1a00;
}

.accounts-example {
  font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--foreground);
  background: #ffffff;
  border: 1px solid rgba(255, 122, 99, 0.2);
  border-radius: 0.75rem;
  padding: 0.75rem 0.875rem;
}

.accounts-example .label {
  color: var(--muted-foreground);
}

.accounts-example .alias {
  color: var(--yuppi-coral);
  font-weight: 700;
}

/* ================================================================
   Loading dots (maintenance) — reprend la palette Yuppi
   ================================================================ */
.dots {
  display: inline-flex;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  animation: pulse 1.4s ease-in-out infinite;
}

.dot:nth-child(1) { background: var(--yuppi-coral); animation-delay: 0s; }
.dot:nth-child(2) { background: var(--yuppi-orange); animation-delay: 0.2s; }
.dot:nth-child(3) { background: var(--yuppi-yellow); animation-delay: 0.4s; }

@keyframes pulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}

/* ================================================================
   i18n
   ================================================================ */
[lang-block] {
  display: none;
}

html[lang="fr"] [lang-block="fr"],
html[lang="en"] [lang-block="en"] {
  display: contents;
}

/* ================================================================
   Language switch — réplique d'un toggle pill du DS
   ================================================================ */
.lang-switch {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: inline-flex;
  gap: 0.25rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
  padding: 0.25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border);
}

.lang-switch button {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.lang-switch button[aria-pressed="true"] {
  color: #ffffff;
  background: var(--yuppi-coral);
}

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 480px) {
  .card { padding: 2rem 1.25rem; }
  .lang-switch { top: 1rem; right: 1rem; }
  .brand-name { font-size: 1.5rem; }
}