/* ===== Guyatouc Marché - base.css : reset, typographie, composants génériques ===== */
/* Consomme les tokens de tokens.css et les polices de fonts.css (ordre d'enqueue  */
/* figé dans functions.php : fonts, tokens, base, header-footer, home, shop,       */
/* cart-checkout-account, pages). Composants ci-dessous partagés par tous les      */
/* gabarits, à ne jamais redéfinir ailleurs (PLANNING-THEME-AUTONOME.md section 5).*/
/* Les trois invariants de couleur (voir tokens.css) sont respectés dans chaque    */
/* règle : aucune couleur d'univers ni l'accent comme texte nu, --od-touc toujours */
/* associé à --od-on-univers-dark, un texte sur teinte utilise --od-ink-on-tint.   */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background: var(--od-bg);
  color: var(--od-ink);
  font-family: var(--od-font-body);
  font-weight: 500;
  transition: background .25s ease, color .25s ease;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--od-font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: .96;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  max-width: 100%;
  display: block;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
input,
textarea,
select {
  font-family: inherit;
  color: inherit;
}

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

:focus-visible {
  outline: 2px solid var(--od-ink);
  outline-offset: 2px;
}

/* ===== Conteneur ===== */
.od-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--od-gutter);
}

/* ===== .od-btn : pilule, filet, ombre portée nette au survol ===== */
.od-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 14px 26px;
  border-radius: var(--od-radius-pill);
  border: var(--od-line) solid var(--od-border);
  background: var(--od-ink);
  color: var(--od-bg);
  font-family: var(--od-font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.01em;
  line-height: 1;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, opacity .14s ease;
}

.od-btn:hover,
.od-btn:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--od-shadow-sm) var(--od-shadow-sm) 0 var(--od-ink);
}

.od-btn:active {
  transform: translate(0, 0);
  box-shadow: none;
}

.od-btn:disabled,
.od-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
  box-shadow: none;
  transform: none;
}

.od-btn--ghost {
  background: transparent;
  color: var(--od-ink);
}

.od-btn--ghost:hover,
.od-btn--ghost:focus-visible {
  box-shadow: var(--od-shadow-sm) var(--od-shadow-sm) 0 var(--od-ink);
}

/* ===== .od-badge : pastille pleine, jamais de texte nu ===== */
.od-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--od-accent);
  color: var(--od-on-accent);
  border: var(--od-line) solid var(--od-border);
  border-radius: var(--od-radius-pill);
  padding: 4px 12px;
  font-family: var(--od-font-body);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}

.od-badge--accent {
  background: var(--od-accent);
  color: var(--od-on-accent);
}

.od-badge--touc {
  background: var(--od-touc);
  color: var(--od-on-univers-dark);
}

.od-badge--froid {
  background: var(--od-froid);
  color: var(--od-on-univers-light);
}

.od-badge--carbet {
  background: var(--od-carbet);
  color: var(--od-on-univers-light);
}

.od-badge--terrain {
  background: var(--od-terrain);
  color: var(--od-on-univers-light);
}

.od-badge--maison {
  background: var(--od-maison);
  color: var(--od-on-univers-light);
}

/* ===== .od-card : socle générique, réutilisé par tous les gabarits ===== */
.od-card {
  display: block;
  background: var(--od-surface);
  border: var(--od-line) solid var(--od-border);
  border-radius: var(--od-radius-lg);
}