/* ══════════════════════════════════════════════════════════════════════
   Identité visuelle Momento — reprise du design de la landing (Martin)
   pour que le produit et le site de vente ne fassent qu'un.

   Principe : papier crème, serif élégant pour les titres, terracotta en
   accent, formes très arrondies. Les surfaces sombres restent sombres là
   où c'est nécessaire (la carte, l'écran géant : des photos se regardent
   sur fond noir, et un mur crème projeté éblouirait la salle).
   ══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:wght@400;500;600;700&family=Caveat:wght@500;600&display=swap');

:root {
  /* Papier et encre */
  --paper: #FAF7F1;        /* fond principal clair */
  --paper-card: #FFFDF8;   /* surfaces surélevées */
  --paper-tint: #F6EEE6;   /* aplats doux */
  --ink: #201B16;          /* texte principal */
  --ink-deep: #17130F;     /* surfaces sombres */
  --ink-soft: #4B4238;     /* texte secondaire */
  --ink-mute: #8A7E6F;     /* texte tertiaire */
  --line: #E9E0D2;         /* bordures */
  --line-strong: #DDD3C3;  /* bordures marquées */

  /* Accent — terracotta par défaut (mariage), bleu ardoise pour l'entreprise */
  --accent: #B0503F;
  --accent-soft: #F6EEE6;
  --accent-corp: #3B4F8A;

  /* Surfaces sombres, pour la carte et l'écran géant */
  --night: #17130F;
  --night-soft: #241E19;
  --night-line: rgba(250, 247, 241, .16);
  --night-text: #FAF7F1;
  --night-mute: rgba(250, 247, 241, .62);

  /* Formes */
  --r-pill: 999px;
  --r-lg: 28px;
  --r-md: 16px;
  --r-sm: 12px;

  --shadow-card: 0 18px 50px rgba(23, 19, 15, .10);
  --shadow-deep: 0 24px 70px rgba(0, 0, 0, .45);

  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hand: 'Caveat', cursive;
}

/* Variante entreprise : on bascule l'accent d'une seule ligne */
[data-axe="entreprise"] { --accent: var(--accent-corp); --accent-soft: #EEF1F8; }

/* ---------- éléments communs ---------- */

.mo-title {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--ink);
}
.mo-sub { color: var(--ink-soft); line-height: 1.6; }
.mo-kicker {
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.mo-hand { font-family: var(--hand); font-size: 1.35em; color: var(--accent); }

.mo-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

.mo-btn {
  font-family: var(--sans); font-size: 16px; font-weight: 700;
  border: none; border-radius: var(--r-pill);
  padding: 15px 30px; cursor: pointer;
  background: var(--accent); color: #fff;
  transition: transform .12s ease, filter .2s ease;
}
.mo-btn:hover { filter: brightness(1.07); }
.mo-btn:active { transform: scale(.97); }

.mo-btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong);
}
.mo-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.mo-field {
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 13px 15px; outline: none;
  transition: border-color .18s ease;
}
.mo-field:focus { border-color: var(--accent); }

.mo-chip {
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  color: var(--ink-soft); cursor: pointer;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 9px 16px;
  transition: all .18s ease;
}
.mo-chip:hover { border-color: var(--accent); color: var(--accent); }
.mo-chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }