/* ==========================================================================
   LOVIT — système de design (web)
   Transcription de DesignSystem/Palette.swift de l'application.

   La règle qui gouverne tout, reprise mot pour mot de l'app :
   LOVIT n'est PAS une interface rose. C'est une interface MONOCHROME —
   gris clair, blanc, noir — où la couleur est rare et signifiante.
   Le dégradé rose→corail appartient à la MARQUE (logo, mot-marque, moments
   d'acquisition) et ne se répand jamais dans l'habillage courant.

   Les appels à l'action sont des PILULES NOIRES, comme dans l'app. Un bouton
   rose sur un fond rose ne se voit pas ; un bouton noir se voit toujours.
   ========================================================================== */

:root {
  /* ---- Fonds et surfaces ---- */
  --bg: #efefef;          /* fond des écrans : gris clair, jamais blanc */
  --surface: #ffffff;     /* cartes et conteneurs posés sur le fond */
  --surface-alt: #e4e4e4; /* champs, pastilles inactives */

  /* ---- Texte ---- */
  --text: #1a1a1a;
  --text-2: #767676;
  --icon: #8a8a8a;
  --hairline: rgba(26, 26, 26, 0.08);

  /* ---- Marque (usage rare) ---- */
  --brand: #fe3c72;
  --brand-light: #ff7a9c;
  --grad-start: #fd297b;
  --grad-mid: #ff5864;
  --grad-end: #ff655b;
  --brand-gradient: linear-gradient(120deg, var(--grad-start), var(--grad-mid), var(--grad-end));

  /* ---- Couleurs de sens (reprises des actions du deck) ---- */
  --verified: #1d9bf0;
  --superlike: #4fa9ff;
  --gold: #e8b84b;

  /* ---- Rayons : généreux, à l'image des cartes de l'app ---- */
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --r-pill: 999px;

  /* ---- Ombres : douces et diffuses. Jamais d'ombre dure décalée. ---- */
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
          "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Typographie ----------
   Titres serrés et lourds : c'est la signature typographique de l'app. */

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; }
h1 { font-size: clamp(2.4rem, 6.5vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: 1.1rem; letter-spacing: -0.02em; }
p  { margin: 0; line-height: 1.65; }

a { color: var(--text); }

.label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}
.muted { color: var(--text-2); }
.center { text-align: center; }

/* Le mot-marque : le SEUL endroit où le dégradé s'applique à du texte. */
.wordmark {
  font-weight: 800;
  letter-spacing: -0.04em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Carte ---------- */

.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card-flat { background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--hairline); }

/* ---------- Boutons ----------
   Pilule noire par défaut : l'action principale de l'app. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.75rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--text);
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* Le bouton de marque : réservé à l'action d'acquisition (une par écran). */
.btn-brand { background: var(--brand-gradient); color: #fff; }
/* Bouton secondaire : blanc, cerné d'un filet. */
.btn-ghost { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--hairline); }
.btn-block { width: 100%; }
.btn-sm { padding: 0.65rem 1.2rem; font-size: 0.85rem; }

/* ---------- Puces ---------- */

.chip {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
}
/* Une seule puce colorée par bloc, sinon elle ne signifie plus rien. */
.chip-brand { background: var(--brand-gradient); color: #fff; box-shadow: none; }
.chip-solid { background: var(--text); color: #fff; box-shadow: none; }

/* ---------- Champs ---------- */

.field { display: block; margin-bottom: 1rem; }
.field > span {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.95rem 1rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  background: var(--surface-alt);
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--brand);
}

/* ---------- Mise en page ---------- */

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }
.stack > * + * { margin-top: 1rem; }
.grid { display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Cœur de marque ----------
   Silhouette pleine, sans contour ni reflet : le cœur de l'icône iOS. */

.heart { display: block; }
.heart .fill { fill: var(--brand); }
/* Sur fond de marque, le cœur passe en blanc. */
.heart-on-brand .fill { fill: #fff; }

/* ---------- Utilitaires ---------- */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.hidden { display: none !important; }

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