/* =========================================================================
   Sporae — card.css
   Composant carte produit `.pcard` (+ modale), transposé de `/pro` (pro.css)
   vers le catalogue public. Écrit comme LA FUTURE SOURCE UNIQUE de ce
   composant (cf. docs/30-ux-cartes-catalogue-public.md §3) : le bloc
   .pcard/.pbody/.pfoot/.badges est recopié de pro.css avec les mêmes
   valeurs, et les quelques tokens propres à la carte sont déclarés en
   :root avec les mêmes valeurs que pro.css. Le reste de la palette et de
   l'échelle typo (couleurs, --fs-*, --radius-*, --shadow-*) reste celle de
   theme.css : « même niveau UX » ≠ « même skin ».

   Chargé UNIQUEMENT par catalogue.html (`pro.css` n'est pas touché dans ce
   lot — chemin de prise de commande en prod). Ordre : theme.css → card.css
   → catalogue.css (qui garde le droit de dernier mot page-spécifique).
   ========================================================================= */

:root {
  /* Tokens propres à la carte, absents de theme.css — mêmes valeurs que
     pro.css pour permettre une convergence future sans re-calibrage. */
  --line-strong: #D8C7AE;
  --ink-faint:   #A0917F;
  --bio:         #5E7C52;
  --bio-soft:    rgba(94, 124, 82, .14);
  --bio-bd:      rgba(94, 124, 82, .32);
  --font-serif:  "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  /* Fond neutre crème des vignettes produit — identique en photo comme en
     illustration (cf. §4 de la spec : un fond homogène rend la grille
     mixte photo/illustration cohérente). */
  --thumb-a: #FBF5EA;
  --thumb-b: #EFE3D0;
}

/* =========================================================================
   Carte produit
   ========================================================================= */
.pcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
/* Focus clavier : porté par la carte entière (pas par .pcard__open, non
   focusable côté public — cf. §5). Le clavier passe par .pcard__details,
   dont le :focus-visible natif (theme.css) déclenche ce contour englobant. */
.pcard:focus-within { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---- Vignette produit --------------------------------------------------
   Ratio fixe + fond crème neutre commun à TOUTES les cartes : une vraie
   photo (`image_url`) remplit ce cadre en cover ; à défaut, l'illustration
   SVG par genre (ou le placeholder) est cadrée en contain sur le même fond
   (`.pcard__media--illus`) — cf. §4 de la spec. */
.pcard__media {
  position: relative; aspect-ratio: 4 / 3;
  background: radial-gradient(120% 100% at 50% 0%, var(--thumb-a), var(--thumb-b));
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--color-border);
}
.pcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard__media--illus { padding: var(--space-4); }
.pcard__media--illus img { position: static; width: 100%; height: 100%; object-fit: contain; }

/* Bouton invisible qui recouvre toute la carte : confort SOURIS uniquement
   (carte entièrement cliquable). Côté public il est neutralisé au clavier
   (tabindex="-1" + aria-hidden="true" posés en HTML) : le clavier et le
   lecteur d'écran passent par le bouton réel .pcard__details (« Fiche »),
   seul focusable, seul annoncé. z-index sous .pfoot (3) qui garde donc ses
   propres clics ; .badges n'a pas de z-index propre donc les clics le
   traversent jusqu'à ce bouton. */
.pcard__open {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  border: 0; background: transparent; cursor: pointer; padding: 0;
}

/* ---- Badges (forme + Bio) — coin haut-gauche de la vignette ------------ */
.badges { position: absolute; top: 11px; left: 11px; display: flex; gap: 6px; flex-wrap: wrap; max-width: calc(100% - 22px); }
.badge {
  display: inline-flex; align-items: center; gap: .35em;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: .28rem .55rem; border-radius: var(--radius-sm);
  color: var(--color-primary-dark); background: var(--color-accent-soft);
}
.badge--bio {
  color: #48603D; background: var(--bio-soft); border-color: var(--bio-bd);
  display: inline-flex; align-items: center; gap: 5px;
}
.badge--bio svg { width: 11px; height: 11px; }
.badge--outline { background: transparent; border: 1px solid var(--color-primary-light); }

/* ---- Corps de carte ------------------------------------------------------ */
.pbody { display: flex; flex-direction: column; gap: 2px; padding: 15px 16px 4px; flex: 1; }
.pname { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--color-text); margin: 0 0 2px; line-height: 1.25; }
/* `--ink-faint` (repris de pro.css) tomberait à ~3,1:1 sur le fond blanc de la
   vitrine : sous le seuil AA. /pro est un outil interne à l'autre palette, la
   vitrine a le contraste en exigence de MEP (CLAUDE.md) → `--color-text-muted`
   (~5,3:1). Le token reste déclaré pour la convergence future avec /pro. */
.platin { font-style: italic; font-size: 12px; color: var(--color-text-muted); margin: 0 0 2px; }
/* Conteneur des 1 ou 2 lignes d'origine (production / transformation) : porte
   la marge de séparation avec l'élément suivant de la carte ; chaque ligne
   `.porigin` reste serrée (2px) sur celle qui la précède. */
.porigins { margin: 0 0 9px; }
.porigin { font-size: 12px; color: var(--color-text-muted); margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.porigin + .porigin { margin-top: 2px; }
.porigin .flag { width: 14px; height: 10px; border-radius: 2px; border: 1px solid var(--line-strong); flex: 0 0 auto; }

/* Ligne contenance — remplace la ligne prix (invariant) : information
   produit, pas commerciale. Ancrée en BAS du corps de carte (margin-top:auto
   dans .pbody en colonne) : quelle que soit la hauteur du titre ou le nombre
   de lignes d'origine, elle est toujours au même endroit, juste au-dessus du
   bouton — sinon elle flotte à des hauteurs différentes d'une carte à l'autre. */
.pcard__pack { font-size: 13px; font-weight: 600; color: var(--color-text); margin: 0; margin-top: auto; padding-top: 9px; }

/* ---- Pied de carte -------------------------------------------------------
   position:relative + z-index:3 : sans ça .pcard__open avalerait le clic
   sur « Fiche » (cf. §5). Un seul bouton (mono-action, arbitrage produit) :
   .btn--block (catalogue.css) l'étire sur toute la largeur. */
.pfoot { display: flex; padding: 14px 16px 16px; margin-top: auto; position: relative; z-index: 3; }