/* Payday — système de design commun à toutes les pages (13/10/2026).
   Identité : violet électrique, titres Barlow Black Italic en capitales, texte Inter, beaucoup d'air.
   Les sections claires alternent avec quelques bandes violettes affirmées. Un seul thème, volontairement :
   la marque ne bascule pas en sombre. */

:root {
  /* Palette */
  --violet: #3c33e0;
  --violet-hover: #2e25ba;
  --ink: #111225;
  --white: #ffffff;
  --bg: #f7f7fc;
  --lavender: #ebe9ff;
  --grey: #62647b;
  --line: #e1e0f2;
  --lemon: #cbff63;
  /* Sémantique (statuts dans les exemples de produit) */
  --ok: #157a52;
  --ok-tint: #e3f4ec;
  --warn: #a8560a;
  --warn-tint: #fdf0e1;
  --danger: #c0262d;
  --danger-tint: #fde8e8;
  /* Noms historiques des pages, reliés à la nouvelle palette */
  --paper: var(--bg);
  --sheet: var(--white);
  --ink-soft: var(--grey);
  --rule: var(--line);
  --paid: var(--violet);
  --paid-tint: var(--lavender);
  --hold: var(--warn);
  --hold-tint: var(--warn-tint);
  --alert: var(--danger);
  --alert-tint: var(--danger-tint);
  /* Typographie */
  --font-display: "Barlow", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Inter", "Helvetica Neue", Arial, sans-serif; /* chiffres alignés via tabular-nums */
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.625rem;
  --step-3: clamp(2.1rem, 4.2vw, 3.1rem);
  --step-4: clamp(3rem, 8.6vw, 7rem);
  /* Formes */
  --r-btn: 12px;
  --r-card: 18px;
  --shadow: 0 24px 60px -36px rgba(17, 18, 37, 0.35);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--font-body);
  padding-inline: 20px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
.wrap { max-width: 1160px; margin-inline: auto; }

/* Titres : Barlow Black Italic, capitales pour l'impact */
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1, h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font: 800 italic var(--step-1)/1.15 var(--font-display); letter-spacing: -0.01em; }
.lead { font-size: var(--step-1); line-height: 1.55; color: var(--grey); max-width: 40ch; }
.muted { color: var(--grey); }
.eyebrow {
  font: 700 0.75rem/1.4 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet);
}
.mono { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 6px; }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 var(--step-0)/1 var(--font-body);
  padding: 15px 22px;
  border-radius: var(--r-btn);
  border: 1.5px solid var(--violet);
  background: var(--violet);
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.btn:hover { background: var(--violet-hover); border-color: var(--violet-hover); color: var(--white); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--violet); color: var(--violet); background: transparent; }

/* Bandes violettes pleine largeur (sans défilement horizontal : fond peint par une ombre, rogné en hauteur) */
.band-violet {
  background: var(--violet);
  color: var(--white);
  box-shadow: 0 0 0 100vmax var(--violet);
  clip-path: inset(0 -100vmax);
}
.band-violet .eyebrow { color: var(--lemon); }
.band-violet .muted, .band-violet .lead { color: rgba(255, 255, 255, 0.82); }
.band-violet .btn { background: var(--white); color: var(--violet); border-color: var(--white); }
.band-violet .btn:hover { background: var(--lavender); border-color: var(--lavender); color: var(--violet-hover); }
.band-violet .btn.ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.55); }
.band-violet .btn.ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); color: var(--white); }
.band-violet :focus-visible { outline-color: var(--lemon); }

/* Marque */
.logo {
  font: 900 italic 1.6rem/1 var(--font-display);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  display: inline-flex; align-items: baseline;
}
.band-violet .logo { color: var(--white); }

/* En-tête */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; }
.site-nav { display: flex; gap: 22px; font-size: var(--step--1); font-weight: 500; flex-wrap: nowrap; white-space: nowrap; }
.site-nav a { text-decoration: none; color: var(--grey); transition: color .15s ease; }
.site-nav a:hover { color: var(--ink); }
.band-violet .site-nav a { color: rgba(255, 255, 255, 0.78); }
.band-violet .site-nav a:hover { color: var(--white); }
.top-cta, .top-links { display: flex; gap: 8px; flex-wrap: wrap; }
.top-cta .btn, .top-links .btn { padding: 11px 16px; font-size: 0.9375rem; }
.back { color: var(--grey); text-decoration: none; font-size: 0.9375rem; font-weight: 500; }
.back:hover { color: var(--violet); }

/* Cartes */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); min-width: 0; }
.card.soft { background: var(--lavender); border-color: transparent; box-shadow: none; }

/* Sections */
section { padding-block: 88px; }
.section-head { display: grid; gap: 14px; max-width: 64ch; margin-bottom: 44px; }

/* Pied de page */
footer {
  border-top: 1px solid var(--line);
  padding-block: 32px 44px;
  display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; align-items: center;
  font-size: var(--step--1); color: var(--grey);
}
footer a { color: inherit; }
footer a:hover { color: var(--violet); }
footer .logo { font-size: 1.15rem; }

/* Apparition douce au défilement (activée par le script commun, désactivée si l'utilisateur limite les animations) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
  .js .reveal.in { opacity: 1; transform: none; }
}

@media (max-width: 1100px) { .site-nav { display: none; } }
@media (max-width: 960px) { section { padding-block: 64px; } }
@media (max-width: 560px) {
  body { padding-inline: 16px; }
  .site-nav { display: none; }
  .top-cta .btn.ghost, .top-links .btn.ghost { display: none; }
}