/* ============================================================
   WiWallet — Design system
   Tokens + composants. Aucune bordure décorative, aucun emoji,
   aucune barre d'accent. La hiérarchie passe par la valeur et
   l'espace.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */

:root {
  /* Surfaces — du plus profond au plus élevé.
     Une carte "mise en avant" monte d'un cran, elle ne prend pas
     de bordure. C'est la règle la plus importante du système. */
  --ww-surface-0: #060D1A;   /* fond de page */
  --ww-surface-1: #0E1729;   /* carte au repos */
  --ww-surface-2: #122032;   /* carte mise en avant, carte survolée */
  --ww-surface-3: #18293F;   /* champ de saisie, élément actif */

  /* Marque */
  --ww-navy:         #0D1B3E;
  --ww-teal:         #028090;
  --ww-seafoam:      #02C39A;
  --ww-seafoam-soft: #4FD1C5;

  /* Texte — le corps ne descend jamais sous --ww-text-2.
     Ces trois valeurs passent WCAG AA sur --ww-surface-0 et 1. */
  --ww-text-1: #FFFFFF;      /* titres */
  --ww-text-2: #AFBED2;      /* corps  — ratio 9.4:1 */
  --ww-text-3: #7F91AB;      /* légendes, métadonnées — ratio 5.1:1 */

  /* Séparation. Une seule ligne autorisée : le filet de section.
     Jamais de contour de carte. */
  --ww-rule: #16233B;

  /* États */
  --ww-success: #02C39A;
  --ww-warning: #E0B457;
  --ww-danger:  #E2685F;

  /* Voiles seafoam, pour les fonds d'icône et les pastilles */
  --ww-seafoam-06: rgba(2, 195, 154, 0.06);
  --ww-seafoam-12: rgba(2, 195, 154, 0.12);
  --ww-seafoam-24: rgba(2, 195, 154, 0.24);

  /* Typographie */
  --ww-font-display: "Sora", system-ui, -apple-system, sans-serif;
  --ww-font-body: "Space Grotesk", system-ui, -apple-system, sans-serif;

  /* Échelle de type — ratio 1.25, ancrée à 16px.
     Les titres portent un letter-spacing négatif : c'est ce qui
     donne la densité optique d'Apple. */
  --ww-size-display: clamp(2.75rem, 6vw, 4.5rem);
  --ww-size-h1: clamp(2rem, 4vw, 3rem);
  --ww-size-h2: clamp(1.5rem, 3vw, 2rem);
  --ww-size-h3: 1.25rem;
  --ww-size-body-lg: 1.125rem;
  --ww-size-body: 1rem;
  --ww-size-sm: 0.875rem;
  --ww-size-xs: 0.75rem;

  --ww-track-display: -0.03em;
  --ww-track-heading: -0.02em;
  --ww-track-body: 0;
  --ww-track-eyebrow: 0.14em;

  --ww-leading-tight: 1.08;
  --ww-leading-snug: 1.28;
  --ww-leading-body: 1.6;

  /* Espacement — échelle de 4px. N'utilisez rien en dehors. */
  --ww-1: 0.25rem;
  --ww-2: 0.5rem;
  --ww-3: 0.75rem;
  --ww-4: 1rem;
  --ww-5: 1.25rem;
  --ww-6: 1.5rem;
  --ww-7: 1.75rem;
  --ww-8: 2rem;
  --ww-10: 2.5rem;
  --ww-12: 3rem;
  --ww-16: 4rem;
  --ww-20: 5rem;
  --ww-24: 6rem;
  --ww-32: 8rem;

  /* Rayons */
  --ww-r-sm: 10px;
  --ww-r-md: 14px;
  --ww-r-lg: 18px;   /* cartes */
  --ww-r-xl: 24px;
  --ww-r-pill: 999px;

  /* Ombres. Discrètes : sur fond sombre, l'ombre sert à décoller,
     pas à dramatiser. */
  --ww-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ww-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.35);
  --ww-shadow-3: 0 20px 48px rgba(0, 0, 0, 0.45);

  /* Mouvement */
  --ww-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ww-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ww-t-fast: 140ms;
  --ww-t-base: 220ms;
  --ww-t-slow: 420ms;

  /* Trame */
  --ww-container: 1120px;
  --ww-gutter: var(--ww-6);
  --ww-icon: 24px;
  --ww-icon-stroke: 1.75;
}

/* ---------- 2. BASE ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ww-surface-0);
  color: var(--ww-text-2);
  font-family: var(--ww-font-body);
  font-size: var(--ww-size-body);
  line-height: var(--ww-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--ww-font-display);
  color: var(--ww-text-1);
  font-weight: 600;
  line-height: var(--ww-leading-tight);
  letter-spacing: var(--ww-track-heading);
  margin: 0 0 var(--ww-4);
  text-wrap: balance;
}

h1 { font-size: var(--ww-size-h1); }
h2 { font-size: var(--ww-size-h2); }
h3 { font-size: var(--ww-size-h3); line-height: var(--ww-leading-snug); }

p { margin: 0 0 var(--ww-4); max-width: 62ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--ww-seafoam); text-decoration: none; }

/* Accessibilité clavier — non négociable, un opérateur télécom
   auditera ce point. */
:focus-visible {
  outline: 2px solid var(--ww-seafoam);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 3. TRAME ---------- */

.ww-container {
  width: 100%;
  max-width: var(--ww-container);
  margin-inline: auto;
  padding-inline: var(--ww-gutter);
}

.ww-section { padding-block: var(--ww-24); }
@media (max-width: 768px) { .ww-section { padding-block: var(--ww-16); } }

.ww-grid {
  display: grid;
  gap: var(--ww-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Filet de section — la seule ligne du système. */
.ww-rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--ww-rule);
}

/* ---------- 4. TYPOGRAPHIE UTILITAIRE ---------- */

.ww-display {
  font-family: var(--ww-font-display);
  font-size: var(--ww-size-display);
  font-weight: 700;
  line-height: var(--ww-leading-tight);
  letter-spacing: var(--ww-track-display);
  color: var(--ww-text-1);
  margin: 0;
  text-wrap: balance;
}

/* Surtitre. Pas de barre colorée devant — le suivi de caractères
   et la couleur suffisent à le signaler. */
.ww-eyebrow {
  font-family: var(--ww-font-body);
  font-size: var(--ww-size-xs);
  font-weight: 500;
  letter-spacing: var(--ww-track-eyebrow);
  text-transform: uppercase;
  color: var(--ww-seafoam);
  margin: 0 0 var(--ww-4);
}

.ww-lead {
  font-size: var(--ww-size-body-lg);
  color: var(--ww-text-2);
  max-width: 56ch;
}

.ww-caption {
  font-size: var(--ww-size-sm);
  color: var(--ww-text-3);
}

/* ---------- 5. ICÔNES ---------- */

.ww-icon {
  width: var(--ww-icon);
  height: var(--ww-icon);
  flex: none;
  stroke: var(--ww-seafoam);
  stroke-width: var(--ww-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.ww-icon--muted { stroke: var(--ww-text-3); }
.ww-icon--lg { width: 32px; height: 32px; stroke-width: 1.5; }

/* Pas de conteneur carré derrière les icônes. Si un fond est
   vraiment nécessaire — barre de navigation dense, liste
   d'intégrations — il est circulaire et très discret. */
.ww-icon-well {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--ww-r-pill);
  background: var(--ww-seafoam-06);
}

/* ---------- 6. CARTES ---------- */

.ww-card {
  background: var(--ww-surface-1);
  border-radius: var(--ww-r-lg);
  padding: var(--ww-7);
  transition: background var(--ww-t-base) var(--ww-ease),
              transform var(--ww-t-base) var(--ww-ease-out);
}

.ww-card > .ww-icon { margin-bottom: var(--ww-5); }

.ww-card h3 { margin-bottom: var(--ww-2); }

.ww-card p {
  color: var(--ww-text-2);
  font-size: var(--ww-size-sm);
  margin: 0;
}

/* Mise en avant : on monte d'un niveau de surface. Jamais de
   bordure, jamais de lueur. */
.ww-card--featured { background: var(--ww-surface-2); }

a.ww-card:hover,
.ww-card--interactive:hover {
  background: var(--ww-surface-2);
  transform: translateY(-2px);
}

/* ---------- 7. BOUTONS ---------- */

.ww-btn {
  --_h: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ww-2);
  height: var(--_h);
  padding-inline: var(--ww-7);
  border: 0;
  border-radius: var(--ww-r-pill);
  font-family: var(--ww-font-body);
  font-size: var(--ww-size-body);
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ww-t-fast) var(--ww-ease),
              color var(--ww-t-fast) var(--ww-ease),
              transform var(--ww-t-fast) var(--ww-ease);
}

.ww-btn:active { transform: scale(0.98); }

.ww-btn .ww-icon { width: 20px; height: 20px; stroke-width: 2; }

/* Primaire — seafoam plein, texte navy. Le texte foncé sur
   seafoam est plus lisible que le blanc et plus distinctif.
   UN SEUL bouton primaire par écran. */
.ww-btn--primary {
  background: var(--ww-seafoam);
  color: var(--ww-navy);
}
.ww-btn--primary .ww-icon { stroke: var(--ww-navy); }
.ww-btn--primary:hover { background: var(--ww-seafoam-soft); }

/* Secondaire — texte seul, pas de fond ni de contour. */
.ww-btn--secondary {
  background: transparent;
  color: var(--ww-text-1);
  padding-inline: var(--ww-4);
}
.ww-btn--secondary .ww-icon { stroke: var(--ww-seafoam); }
.ww-btn--secondary:hover { color: var(--ww-seafoam); }

/* Tertiaire — surface remontée, pour une action neutre dans une
   barre d'outils. */
.ww-btn--quiet {
  background: var(--ww-surface-2);
  color: var(--ww-text-1);
}
.ww-btn--quiet:hover { background: var(--ww-surface-3); }

.ww-btn[disabled],
.ww-btn[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

@media (max-width: 560px) {
  .ww-btn { width: 100%; }
}

/* ---------- 8. PASTILLES ---------- */

.ww-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ww-2);
  padding: var(--ww-2) var(--ww-4);
  border-radius: var(--ww-r-pill);
  background: var(--ww-seafoam-06);
  color: var(--ww-text-2);
  font-size: var(--ww-size-sm);
  line-height: 1.2;
}

.ww-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ww-seafoam);
}

/* Comparatif avant/après. Pas d'orange : l'état "avant" est
   simplement désaturé, l'état "après" porte la marque. */
.ww-pill--before {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ww-text-3);
}
.ww-pill--before::before { background: var(--ww-text-3); }

/* ---------- 9. AVANT / APRÈS ---------- */

.ww-compare {
  display: grid;
  gap: var(--ww-4);
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px) {
  .ww-compare { grid-template-columns: 1fr; }
}

.ww-compare__before {
  background: var(--ww-surface-1);
  border-radius: var(--ww-r-lg);
  padding: var(--ww-6);
}
.ww-compare__before h3 { color: var(--ww-text-2); }

.ww-compare__after {
  background: var(--ww-surface-2);
  border-radius: var(--ww-r-lg);
  padding: var(--ww-6);
}

/* ---------- 10. NAVIGATION ---------- */

/* Pas de bandeau d'accent sous la nav. La séparation se fait par
   un filet d'1px, et seulement une fois la page défilée. */
.ww-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ww-6);
  height: 68px;
  padding-inline: var(--ww-gutter);
  background: rgba(6, 13, 26, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ww-t-base) var(--ww-ease);
}

.ww-nav[data-scrolled="true"] { border-bottom-color: var(--ww-rule); }

.ww-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ww-3);
  font-family: var(--ww-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ww-text-1);
  letter-spacing: -0.02em;
}

/* ---------- 11. STATISTIQUES ---------- */

.ww-stat__value {
  font-family: var(--ww-font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ww-track-display);
  color: var(--ww-text-1);
  font-variant-numeric: tabular-nums;
}

.ww-stat__label {
  margin-top: var(--ww-3);
  font-size: var(--ww-size-sm);
  color: var(--ww-text-3);
}

/* ---------- 12. CHAMPS ---------- */

.ww-field {
  width: 100%;
  height: 52px;
  padding-inline: var(--ww-5);
  border: 1px solid transparent;
  border-radius: var(--ww-r-md);
  background: var(--ww-surface-3);
  color: var(--ww-text-1);
  font-family: var(--ww-font-body);
  font-size: var(--ww-size-body);
  transition: border-color var(--ww-t-fast) var(--ww-ease);
}

.ww-field::placeholder { color: var(--ww-text-3); }
.ww-field:focus { outline: none; border-color: var(--ww-seafoam); }