/**
 * La charte du site public, partagée par la page d'attente et la page d'action.
 *
 * Recopiée du backoffice (`apps/backoffice/src/index.css`) plutôt qu'importée :
 * les deux sites ne partagent aucun bundle, et la vitrine n'a pas de build.
 * Mais elle ne doit exister qu'UNE fois ici — c'est déjà la troisième copie de
 * cette palette dans le projet (backoffice, gabarit d'e-mail, et ce site), et
 * la quatrième serait celle de trop.
 */

:root {
  color-scheme: dark;
  --bg-body: hsl(0, 0%, 4%);
  --bg-surface: hsl(0, 0%, 8%);
  --bg-surface-elevated: hsl(0, 0%, 12%);
  --border-color: hsl(0, 0%, 16%);
  --primary: hsl(47, 95%, 45%);
  --primary-hover: hsl(47, 95%, 38%);
  --primary-glow: hsla(47, 95%, 45%, 0.1);
  --success: hsl(150, 50%, 45%);
  --danger: hsl(355, 70%, 55%);
  --text-main: hsl(0, 0%, 98%);
  --text-muted: hsl(0, 0%, 75%);
  --text-muted-dark: hsl(0, 0%, 45%);
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

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

body {
  min-height: 100vh;
  /* 100dvh sur mobile : sans lui, la barre d'URL de Safari mange le pied de page. */
  min-height: 100dvh;
  background: var(--bg-body);
  color: var(--text-main);
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  gap: 40px;
  text-align: center;
  background-image: radial-gradient(ellipse 80% 60% at 50% 0%, var(--primary-glow), transparent 70%);
}

.marque { display: flex; flex-direction: column; gap: 8px; }

.nom {
  font-size: clamp(28px, 8vw, 44px);
  font-weight: 700;
  letter-spacing: clamp(6px, 2.5vw, 12px);
  color: var(--primary);
  /* letter-spacing ajoute l'espace APRÈS la dernière lettre : sans cette
     compensation, le mot paraît décalé à gauche une fois centré. */
  text-indent: clamp(6px, 2.5vw, 12px);
}

.metier {
  font-size: clamp(10px, 2.6vw, 12px);
  font-weight: 300;
  letter-spacing: clamp(3px, 1.4vw, 6px);
  color: var(--text-muted-dark);
  text-indent: clamp(3px, 1.4vw, 6px);
  text-transform: uppercase;
}

.carte {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: clamp(28px, 6vw, 44px) clamp(24px, 5vw, 48px);
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
}

h1 { font-size: clamp(21px, 5vw, 26px); font-weight: 600; }

p { font-size: clamp(14px, 3.4vw, 15px); font-weight: 300; line-height: 1.65; color: var(--text-muted); }

footer { font-size: 13px; font-weight: 300; color: var(--text-muted-dark); }

footer a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}

footer a:hover, footer a:focus-visible { color: var(--primary); border-bottom-color: var(--primary); }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 2px;
}