/* ════════════════════════════════════════════════════════════════════
 *  AKŌ — Cards .aca-card partagées (Nos grains + Coups de cœur home)
 *  ───────────────────────────────────────────────────────────────────
 *  Style éditorial V3 : pastille famille + nom serif italique + notes
 *  + mini-atlas Intensité/Profil/Corps + footer prix discret.
 *
 *  Variables d'environnement à exposer par le wrapper de la grille
 *  (ou en :root) : --ap-primary, --ap-copper, --ap-surface-* ...
 *
 *  Le scope d'origine #ako-catalogue a été retiré pour permettre une
 *  réutilisation sur la home (#ako-home) avec la même esthétique.
 *  ════════════════════════════════════════════════════════════════════ */

/* ── Palette pastel par famille (réutilisée sur toutes les cards) ── */
.aca-cards-context {
  --past-choco:  #c19878;
  --past-fruit:  #d99a9a;
  --past-floral: #b89db8;
  --past-doux:   #d4be7e;
  --past-epice:  #9da76b;  /* olive poudré (différencié du chocolaté/ocre) */
  --bg-choco:  #f0e3d2;
  --bg-fruit:  #f5dede;
  --bg-floral: #ede0ed;
  --bg-doux:   #f2e9c8;
  --bg-epice:  #e3e8d0;  /* olive très clair (raccord avec --past-epice) */
  /* Fallbacks couleur si les --ap-* ne sont pas définis dans le scope parent */
  --ap-primary: var(--ap-primary, #163328);
  --ap-on-primary: var(--ap-on-primary, #f3f1e9);
  --ap-on-surface: var(--ap-on-surface, #1a2d24);
  --ap-on-surface-variant: var(--ap-on-surface-variant, #5a6b63);
  --ap-surface: var(--ap-surface, #faf8f2);
  --ap-surface-high: var(--ap-surface-high, #e3ddce);
  --ap-surface-white: var(--ap-surface-white, #ffffff);
  --ap-copper: var(--ap-copper, #b88554);
}

/* ── Card : objet éditorial sans bloc image ──
   Padding généreux, bordure cuivre au hover, transition douce. */
.aca-card {
  background: var(--ap-surface-white);
  border: 1px solid var(--ap-surface-high);
  border-radius: 12px;
  padding: 1.4rem 1.4rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.85rem;
  text-decoration: none; color: inherit;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.25s, opacity 0.55s cubic-bezier(0.22,0.61,0.36,1);
  position: relative; overflow: hidden;
}
.aca-card:hover {
  border-color: var(--ap-copper);
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(184,118,58,0.14), 0 4px 12px rgba(22,51,40,0.06);
}
.aca-card:hover .aca-v3-pastille {
  transform: scale(1.06);
}
.aca-v3-pastille {
  transition: transform 0.25s cubic-bezier(0.32,0.72,0,1);
}

/* ── Reveal au scroll (optionnel — la home gère son propre reveal via .ah-reveal,
   mais on garde le mécanisme aca-revealed pour cohérence si réutilisé ailleurs) ── */
.aca-card.aca-reveal-init {
  opacity: 0;
  transform: translateY(24px);
}
.aca-card.aca-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .aca-card.aca-reveal-init {
    opacity: 1; transform: none; transition: none;
  }
}

/* ── Head : numéro + bio ── */
.aca-v3-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ap-on-surface-variant); font-weight: 500;
}
.aca-v3-num {
  font-family: 'Noto Serif', serif; font-style: italic;
  font-size: 1.1rem; color: var(--ap-primary); letter-spacing: 0;
}
.aca-v3-bio {
  background: var(--ap-primary); color: var(--ap-on-primary);
  padding: 0.15rem 0.5rem; font-size: 0.6rem; letter-spacing: 0.08em;
}

/* ── Origine + coordonnées ── */
.aca-v3-origin {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ap-on-surface-variant); font-weight: 500;
}
.aca-v3-coords {
  font-size: 0.65rem; color: var(--ap-on-surface-variant); opacity: 0.7;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-top: 0.15rem;
}

/* ── Pastille famille ── */
.aca-v3-pastille {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ap-primary); font-weight: 500;
  align-self: flex-start;
  margin-top: -0.2rem;
}
.aca-v3-pastille::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%;
}
.aca-card[data-family="chocolaté"] .aca-v3-pastille { background: var(--bg-choco); }
.aca-card[data-family="chocolaté"] .aca-v3-pastille::before { background: var(--past-choco); }
.aca-card[data-family="fruité"] .aca-v3-pastille { background: var(--bg-fruit); }
.aca-card[data-family="fruité"] .aca-v3-pastille::before { background: var(--past-fruit); }
.aca-card[data-family="floral"] .aca-v3-pastille { background: var(--bg-floral); }
.aca-card[data-family="floral"] .aca-v3-pastille::before { background: var(--past-floral); }
.aca-card[data-family="doux"] .aca-v3-pastille { background: var(--bg-doux); }
.aca-card[data-family="doux"] .aca-v3-pastille::before { background: var(--past-doux); }
.aca-card[data-family="épicé"] .aca-v3-pastille { background: var(--bg-epice); }
.aca-card[data-family="épicé"] .aca-v3-pastille::before { background: var(--past-epice); }

/* ── Nom du grain + icône famille ── */
.aca-card-name {
  font-family: 'Noto Serif', serif; font-style: italic;
  font-size: 1.55rem; line-height: 1.1; color: var(--ap-primary);
  font-weight: 400; margin: 0;
}
.aca-v3-name-row {
  display: flex; align-items: center; gap: 0.6rem;
}
.aca-v3-name-icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.32,0.72,0,1);
}
.aca-card[data-family="chocolaté"] .aca-v3-name-icon { color: var(--past-choco); }
.aca-card[data-family="fruité"]    .aca-v3-name-icon { color: var(--past-fruit); }
.aca-card[data-family="floral"]    .aca-v3-name-icon { color: var(--past-floral); }
.aca-card[data-family="doux"]      .aca-v3-name-icon { color: var(--past-doux); }
.aca-card[data-family="épicé"]     .aca-v3-name-icon { color: var(--past-epice); }
.aca-card:hover .aca-v3-name-icon { transform: scale(1.08); }

/* ── Torréfacteur ── */
.aca-v3-roaster {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ap-on-surface-variant); font-weight: 500;
}

/* ── Notes de dégustation (italique serif, encadré horizontal) ── */
.aca-v3-notes {
  font-family: 'Noto Serif', serif; font-style: italic;
  font-size: 0.95rem; line-height: 1.4; color: var(--ap-on-surface);
  padding: 0.9rem 0;
  border-top: 1px solid var(--ap-surface-high);
  border-bottom: 1px solid var(--ap-surface-high);
  flex: 1;
}

/* ── Mini-atlas du goût : Intensité / Profil (spectrum) / Corps ── */
.aca-v3-radar {
  display: grid; grid-template-columns: 1fr 1.4fr 1fr;
  gap: 1rem; margin-top: 0.2rem;
}
.aca-v3-axis { display: flex; flex-direction: column; gap: 0.32rem; }
.aca-v3-axis-label {
  font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ap-on-surface-variant); font-weight: 500;
  text-align: center;
}
.aca-v3-bar {
  height: 6px; background: var(--ap-surface-high); position: relative; border-radius: 3px;
}
.aca-v3-fill {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px;
}
.aca-v3-tick {
  position: absolute; top: -3px;
  width: 12px; height: 12px;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 2px var(--ap-surface, #faf8f2);
}
.aca-card[data-family="chocolaté"] .aca-v3-fill,
.aca-card[data-family="chocolaté"] .aca-v3-tick { background: var(--past-choco); }
.aca-card[data-family="fruité"] .aca-v3-fill,
.aca-card[data-family="fruité"] .aca-v3-tick { background: var(--past-fruit); }
.aca-card[data-family="floral"] .aca-v3-fill,
.aca-card[data-family="floral"] .aca-v3-tick { background: var(--past-floral); }
.aca-card[data-family="doux"] .aca-v3-fill,
.aca-card[data-family="doux"] .aca-v3-tick { background: var(--past-doux); }
.aca-card[data-family="épicé"] .aca-v3-fill,
.aca-card[data-family="épicé"] .aca-v3-tick { background: var(--past-epice); }
.aca-v3-axis-profil .aca-v3-spectrum-labels {
  display: flex; justify-content: space-between;
  margin-top: 0.25rem;
  font-size: 0.6rem; letter-spacing: 0.04em;
  color: var(--ap-on-surface-variant); opacity: 0.85;
  font-style: italic; font-family: 'Noto Serif', serif;
}

/* ── Footer prix ── */
.aca-card-bottom {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 0.3rem;
  padding-top: 0;
  border-top: none;
}
.aca-card-price {
  font-family: 'Noto Serif', serif; font-style: italic;
  font-size: 1.1rem; font-weight: 400; color: var(--ap-primary);
}
.aca-v3-format {
  font-family: 'Noto Serif', serif; font-style: italic;
  font-size: 0.78rem; color: var(--ap-on-surface-variant); opacity: 0.85;
  margin-left: 0.1rem;
}

/* ── Bandeau "Découvrir le grain" au hover (slide depuis le haut) ── */
.aca-v3-discover {
  position: absolute; top: 0; left: 0; right: 0;
  background: var(--ap-surface, #faf8f2);
  border-bottom: 1px solid var(--ap-surface-high);
  padding: 0.95rem 1rem;
  transform: translateY(-105%);
  transition: transform 0.28s cubic-bezier(0.32,0.72,0,1);
  z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: 'Noto Serif', serif; font-style: italic;
  font-size: 0.88rem; color: var(--ap-copper); font-weight: 400;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.aca-card:hover .aca-v3-discover,
.aca-card:focus-within .aca-v3-discover {
  transform: translateY(0);
}
@media (hover: none), (max-width: 600px) {
  .aca-v3-discover { display: none; }
}

/* ── Photo produit en tête de carte (contenu sur crème) — Nos grains ── */
.aca-card-media {
  margin: -1.4rem -1.4rem 0;            /* full-bleed haut + côtés (annule le padding carte) */
  aspect-ratio: 4 / 5;
  background: var(--ap-surface, #faf8f2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--ap-surface-high);
}
.aca-card-media img {
  width: 100%; height: 100%;
  object-fit: contain;                  /* entier visible */
  padding: 1rem 1.1rem;
  display: block;
}