/* ============================================================
   L'origine du thé — Composants
   Portés du design system React (_ds_bundle.js) en CSS pur :
   Button, Tag, SealStamp, HandwrittenNote, TeaCard, Field.
   ============================================================ */

/* ---------- Button ---------- */
.odt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-sans); font-weight: 500; letter-spacing: .04em;
  border-radius: var(--radius-pill); border: 1.5px solid transparent;
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.odt-btn:active { transform: translateY(1px); }
.odt-btn[disabled], .odt-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.odt-btn__seal { font-family: var(--font-display); font-size: 1.15em; line-height: 1; margin-top: -.08em; }
.odt-btn--sm { font-size: 13px; padding: .5em 1.15em; }
.odt-btn--md { font-size: 14px; padding: .7em 1.5em; }
.odt-btn--lg { font-size: 15px; padding: .85em 1.9em; }
.odt-btn--primary { background: var(--sage-800); color: var(--text-on-sage); border-color: var(--sage-800); }
.odt-btn--primary:hover { background: var(--sage-900); border-color: var(--sage-900); }
.odt-btn--accent { background: var(--seal-600); color: #fff; border-color: var(--seal-600); }
.odt-btn--accent:hover { background: var(--seal-700); border-color: var(--seal-700); }
.odt-btn--secondary { background: transparent; color: var(--text-strong); border-color: var(--ink-500); }
.odt-btn--secondary:hover { border-color: var(--ink-900); background: var(--paper-200); }
.odt-btn--ghost { background: transparent; color: var(--text-body); border-color: transparent; padding-left: .6em; padding-right: .6em; }
.odt-btn--ghost:hover { color: var(--ink-900); background: var(--paper-200); }
.odt-btn--on-dark.odt-btn--secondary { color: var(--text-on-dark); border-color: rgba(243,246,242,.55); }
.odt-btn--on-dark.odt-btn--secondary:hover { border-color: var(--text-on-dark); background: rgba(255,255,255,.08); }
.odt-btn--on-dark.odt-btn--ghost { color: var(--text-on-dark); }
.odt-btn--on-dark.odt-btn--ghost:hover { background: rgba(255,255,255,.08); }

/* ---------- Tag ---------- */
.odt-tag {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: .02em;
  color: var(--text-body); background: var(--paper-50);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: .32em .8em; line-height: 1;
}
.odt-tag__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.odt-tag--solid { background: var(--sage-100); border-color: transparent; color: var(--sage-900); }
.odt-tag--ghost { background: transparent; }
.odt-tag__dot--rouge { background: var(--clay-600); }
.odt-tag__dot--vert { background: var(--celadon-600); }
.odt-tag__dot--blanc { background: var(--qingbai-400); }
.odt-tag__dot--bleuvert { background: var(--sage-600); }
.odt-tag__dot--noir { background: var(--ink-700); }
.odt-tag__dot--jaune { background: var(--gold-500); }
.odt-tag__dot--puer { background: var(--clay-700); }

/* ---------- SealStamp ---------- */
.odt-stamp {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); color: var(--seal-600); line-height: 1;
  border: 2px solid var(--seal-600); box-sizing: border-box;
}
.odt-stamp--square { border-radius: var(--radius-sm); }
.odt-stamp--round { border-radius: 50%; }
.odt-stamp--filled { background: var(--seal-600); color: #fff; }
/* sceau vertical — plusieurs caractères empilés, à la manière des chops */
.odt-stamp--vertical {
  border-radius: var(--radius-sm);
  writing-mode: vertical-rl; text-orientation: upright;
  padding: 7px 6px; letter-spacing: 2px;
}

/* ---------- HandwrittenNote ---------- */
.odt-note {
  position: relative; border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  padding: 22px 24px 20px;
  background-color: var(--paper-100);
  background-image: linear-gradient(var(--graph-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--graph-line) 1px, transparent 1px);
  background-size: 22px 22px; background-position: -1px -1px;
}
.odt-note__tape {
  position: absolute; top: -9px; left: 26px; width: 78px; height: 20px;
  background: var(--indigo-300); opacity: .82; transform: rotate(-2deg);
  box-shadow: var(--shadow-xs);
}
/* note : écriture plus manuscrite (Kalam) que le reste du site (Caveat) */
.odt-note__body { font-family: 'Kalam', var(--font-script); font-size: 19px; line-height: 1.5; color: var(--ink-700); }
.odt-note__author { display: block; margin-top: 8px; font-family: 'Kalam', var(--font-script); font-weight: 700; font-size: 17px; color: var(--seal-600); }

/* ---------- TeaCard ---------- */
.odt-tea {
  display: flex; flex-direction: column;
  background: var(--surface-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.odt-tea--link { cursor: pointer; text-decoration: none; color: inherit; }

.odt-tea__media { position: relative; aspect-ratio: 4/3; background: var(--celadon-100); overflow: hidden; }
.odt-tea__media img { width: 100%; height: 100%; object-fit: cover; }
.odt-tea__stamp { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; font-size: 18px; background: rgba(251,248,240,.86); transform: rotate(-4deg); backdrop-filter: blur(2px); }
.odt-tea__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.odt-tea__head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.odt-tea__hanzi { font-family: var(--font-display); font-size: 24px; color: var(--ink-900); line-height: 1; }
.odt-tea__pinyin { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--text-faint); white-space: nowrap; }
.odt-tea__name { font-family: var(--font-display); font-size: 21px; font-weight: 500; color: var(--text-strong); line-height: 1.1; }
.odt-tea__notes { font-family: var(--font-script); font-size: 19px; line-height: 1.28; color: var(--ink-700); }
.odt-tea__foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--rule-ink); white-space: nowrap; }
.odt-tea__price { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--ink-900); }
.odt-tea__unit { font-family: var(--font-sans); font-size: 12px; color: var(--text-muted); margin-left: 4px; white-space: nowrap; }

/* ---------- Field ---------- */
.odt-field { display: flex; flex-direction: column; gap: 7px; font-family: var(--font-sans); }
.odt-field__label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.odt-field__control {
  font-family: var(--font-serif); font-size: 16px; color: var(--ink-900);
  background: var(--paper-50); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: .7em .85em; width: 100%; box-sizing: border-box;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.odt-field__control::placeholder { color: var(--text-faint); }
.odt-field__control:focus { outline: none; border-color: var(--sage-600); box-shadow: 0 0 0 3px var(--sage-100); }
textarea.odt-field__control { min-height: 96px; resize: vertical; line-height: 1.5; }
.odt-field__hint { font-size: 12px; color: var(--text-faint); }