@charset "UTF-8";

/* =========================================================
   ZUTIL.FR — DESIGN SYSTEM DE L’UNIVERS ACCORDS METS ET VINS
   Chargé avant le CSS propre à chaque type de page.
   ========================================================= */

:root {
  /* Couleurs de marque */
  --av-wine-950: #2d0813;
  --av-wine-900: #3f0d1d;
  --av-wine-800: #551329;
  --av-wine-700: #721f3e;
  --av-wine-600: #8b2b4d;
  --av-gold-600: #9b651f;
  --av-gold-500: #b98538;
  --av-gold-400: #d6a34d;
  --av-gold-300: #f0ce87;

  /* Fonds et textes */
  --av-paper: #fffdf9;
  --av-paper-warm: #fff8ef;
  --av-surface: #ffffff;
  --av-surface-soft: #fffaf4;
  --av-ink: #2d1717;
  --av-text: #705f57;
  --av-muted: #8a7b73;
  --av-line: rgba(73, 36, 28, 0.12);
  --av-line-strong: rgba(73, 36, 28, 0.2);

  /* Formes communes */
  --av-radius-sm: 14px;
  --av-radius-md: 20px;
  --av-radius-lg: 26px;
  --av-radius-xl: 34px;
  --av-radius-pill: 999px;

  /* Profondeur commune */
  --av-shadow-xs: 0 5px 16px rgba(61, 34, 27, 0.055);
  --av-shadow-sm: 0 14px 38px rgba(61, 34, 27, 0.075);
  --av-shadow-md: 0 24px 64px rgba(61, 27, 27, 0.12);
  --av-shadow-hero: 0 34px 90px rgba(52, 12, 22, 0.2);

  /* Mouvement et largeur */
  --av-transition: 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --av-container: 1220px;
}

/* Atmosphère partagée par la catégorie, les outils et les guides. */
.wine-universe {
  background:
    radial-gradient(circle at 10% 3%, rgba(214, 163, 77, 0.1), transparent 30rem),
    radial-gradient(circle at 91% 12%, rgba(114, 31, 62, 0.065), transparent 34rem),
    var(--av-paper);
  color: var(--av-ink);
  overflow-x: hidden;
}

.wine-universe ::selection {
  color: #fff;
  background: var(--av-wine-700);
}

.wine-universe a:focus-visible,
.wine-universe button:focus-visible,
.wine-universe input:focus-visible,
.wine-universe summary:focus-visible {
  outline: 3px solid rgba(214, 163, 77, 0.48);
  outline-offset: 4px;
}

/* Même langage pour tous les petits libellés éditoriaux. */
.wine-universe :is(
    .eyebrow,
    .content-kicker,
    .guide-kicker,
    .category-title,
    .article-status
  ) {
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Même bouton principal sur les trois niveaux de navigation. */
.wine-universe .primary-btn {
  border-radius: var(--av-radius-pill);
  transition:
    transform var(--av-transition),
    box-shadow var(--av-transition),
    background var(--av-transition);
}

.wine-universe .primary-btn:hover {
  transform: translateY(-2px);
}

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