/* =========================================================================
   MOMA — Hierarchie typographique
   Serif editoriale pour les titres, sans-serif sobre pour la lecture.
   L'identite italienne passe par le rythme, la casse et l'italique — pas
   par une accumulation de fontes.
   ========================================================================= */

.display,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* --- Niveaux ------------------------------------------------------------- */

.t-hero {
  font-size: var(--t-3xl);
  line-height: var(--lh-tight);
  font-weight: 600;
}

.t-section {
  font-size: var(--t-2xl);
}

.t-sub {
  font-size: var(--t-xl);
}

.t-card {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--ls-tight);
}

/* --- Surtitre -----------------------------------------------------------
   Petite capitale espacee, en accent. Toujours accompagne d'un vrai titre :
   ne remplace jamais un h2. Sur fond clair il utilise --ink-accent (5.7:1),
   jamais l'ocre (2.0:1).
   ------------------------------------------------------------------------ */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-accent);
}

.is-dark .eyebrow {
  color: var(--on-dark-accent);
}

.is-warm .eyebrow {
  color: var(--ink-on-warm);
}

/* Petite marque decorative posee devant chaque surtitre : purement
   ornementale (aria-hidden dans le HTML), reprend le rythme raye du store
   banne en miniature. */
.eyebrow-mark {
  display: inline-flex;
  gap: 3px;
  flex: none;
}

.eyebrow-mark span {
  width: 7px;
  height: 5px;
  border-radius: 2px;
  background-color: currentColor;
}

.eyebrow-mark span:nth-child(2) { opacity: 0.7; }
.eyebrow-mark span:nth-child(3) { opacity: 0.45; }
.eyebrow-mark span:nth-child(4) { opacity: 0.25; }

/* --- Corps de texte ------------------------------------------------------ */

.prose > p + p {
  margin-top: var(--sp-4);
}

.prose {
  color: var(--ink-soft);
  max-width: 62ch;
}

.is-dark .prose {
  color: var(--on-dark-soft);
}

/* Accent typographique expressif, utilise avec parcimonie :
   uniquement sur quelques mots-cles de titres. */
.accent-italic {
  font-style: italic;
  font-weight: 500;
  color: var(--ink-accent);
}

.is-dark .accent-italic {
  color: var(--on-dark-accent);
}

/* --- Liens dans le texte courant ---------------------------------------- */
.prose a,
.link-inline {
  color: var(--ink-accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness var(--dur-fast) var(--ease);
}

.prose a:hover,
.link-inline:hover {
  text-decoration-thickness: 2px;
}

.is-dark .prose a,
.is-dark .link-inline {
  color: var(--on-dark-accent);
}

/* --- Chiffres ------------------------------------------------------------
   Chiffres tabulaires pour que les prix s'alignent verticalement dans la
   carte, et que la note des avis ne "danse" pas. */
.tabular {
  font-variant-numeric: tabular-nums;
}

/* --- Insecable -----------------------------------------------------------
   Protege une locution qui ne doit jamais etre coupee en fin de ligne. Les
   navigateurs coupent apres un trait d'union : sans cela, « Veyrier-du-Lac »
   se scindait en « Veyrier-du- / Lac » dans le titre du hero sur telephone. */
.nowrap {
  white-space: nowrap;
}