/* ==========================================================================
   PROSPEE — pdm.css
   PLACE DE MARCHÉ « en simulation » — source de vérité UNIQUE, chargée par les
   DEUX surfaces : la home publique (§08) et la page app /app/place-de-marche
   (qui ne charge jamais home.css). Ne dépend que de brand/tokens.css et des
   composants (.btn, .badge, .modale).

   Directive Leon 15/09/2026 : la place de marché est « à venir », mais elle doit
   donner envie — active, vivante, dynamique. Les cartes arrivent, les cabinets
   les prennent sous vos yeux, les compteurs bougent. L'honnêteté tient dans le
   libellé, affiché sur les deux surfaces : « Aperçu animé · exemples » +
   « Ouverture bientôt ». Moteur : /static/js/pdm-live.js.

   Motion (charte §7) : rien ne rebondit. Entrées --ease-pose / --duree-pose,
   sorties = 60 % de l'entrée en fondu --ease-sortie, transform + opacity
   uniquement, tout neutralisé sous prefers-reduced-motion.

   Budget bleu (≤ 3 %) : le point pulsé du badge « Ouverture bientôt », le
   bouton « Réserver » de la carte à la une, les points de notification. Rien
   d'autre n'est bleu.
   ========================================================================== */

:root {
  /* Sortie d'une carte réservée = 60 % de --duree-pose (500 ms). */
  --duree-pdm-sortie: 300ms;
}

/* ---------- Badge « Ouverture bientôt » à point pulsé ---------- */
.pdm-ouv {
  display: inline-flex; align-items: center; gap: var(--space-2);
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--rayon-xs);
  background: var(--color-surface-2); color: var(--color-encre-2);
  box-shadow: inset 0 0 0 var(--filet-epaisseur) var(--color-bordure);
}
.pdm-ouv-point {
  width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--color-accent);
}
@media (prefers-reduced-motion: no-preference) {
  .pdm-ouv-point { animation: pdm-pouls 1.8s var(--ease-ui) infinite; }
}
@keyframes pdm-pouls {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.78); }
}

/* ---------- Toggle carillon (app seulement — jamais sur la home) ---------- */
.pdm-son {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 8px 14px; border-radius: 999px;
  background: var(--color-surface); color: var(--color-encre);
  border: var(--filet-epaisseur) solid var(--color-bordure);
  font-family: var(--font-texte); font-size: var(--text-sm);
  font-weight: var(--graisse-ui); line-height: 1; cursor: pointer;
  transition: background-color var(--duree-ui) var(--ease-ui);
}
.pdm-son:hover { background: var(--color-surface-2); }
.pdm-son[aria-pressed="true"] {
  background: var(--color-surface-2);
  box-shadow: inset 0 0 0 var(--filet-epaisseur) var(--color-bordure-forte);
}
.pdm-son svg { width: 18px; height: 18px; flex: none; }

/* ---------- Les trois compteurs (tuiles papier) ---------- */
.pdm-compteurs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.pdm-compteur {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: var(--filet-epaisseur) solid var(--color-bordure);
  border-radius: var(--rayon-m);
}
.pdm-compteur-val {
  font-family: var(--font-titres); font-weight: var(--graisse-titre);
  font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem); line-height: 1.05;
  letter-spacing: var(--tracking-h2);
  font-variant-numeric: tabular-nums;
  color: var(--color-encre);
}
.pdm-compteur-lib { color: var(--color-encre-2); }
/* Le chiffre qui change se repose : translateY + fondu, jamais de rebond. */
@media (prefers-reduced-motion: no-preference) {
  .pdm-compteur-val.est-change { animation: pdm-chiffre var(--duree-ui) var(--ease-pose) both; }
}
@keyframes pdm-chiffre {
  from { opacity: 0.3; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* La ligne d'honnêteté, jamais optionnelle : ce sont des exemples. */
.pdm-apercu-note { color: var(--color-encre-2); margin-top: var(--space-3); }

/* ---------- Le flux de cartes ---------- */
.pdm-flux { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }

.pdmc {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: var(--filet-epaisseur) solid var(--color-bordure);
  border-radius: var(--rayon-m);
}
.pdmc--une {
  gap: var(--space-3);
  padding: var(--space-6) var(--space-6) var(--space-5);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre-carte);
}
.pdmc-tete { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pdmc-neuf {
  padding: 1px var(--space-2); border-radius: var(--rayon-xs);
  background: var(--color-surface-2); color: var(--color-encre);
  box-shadow: inset 0 0 0 var(--filet-epaisseur) var(--color-bordure-forte);
}
.pdmc-titre { color: var(--color-encre); font-weight: var(--graisse-ui); }
.pdmc--une .pdmc-titre { font-family: var(--font-titres); font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--graisse-titre-doux); }
.pdmc-lieu { color: var(--color-encre); }
.pdmc-creneau { color: var(--color-encre-2); font-variant-numeric: tabular-nums; }
.pdmc-pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  margin-top: var(--space-1); padding-top: var(--space-3);
  border-top: var(--filet-epaisseur) solid var(--color-bordure);
}
.pdmc-meta { color: var(--color-encre-2); font-variant-numeric: tabular-nums; }
.pdmc-prix { font-weight: var(--graisse-ui); white-space: nowrap; }
.pdm-action { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.pdm-action[hidden] { display: none; }   /* carte réservée : le bouton s'efface */
.pdm-auto-tag { color: var(--color-encre-2); white-space: nowrap; }

/* Entrée d'une carte : elle se pose (jamais de rebond). */
@media (prefers-reduced-motion: no-preference) {
  .pdmc { animation: pdm-entree var(--duree-pose) var(--ease-pose) both; }
}
@keyframes pdm-entree {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Réservée sous vos yeux : le tampon ---------- */
.pdmc--reserve { background: var(--color-surface-2); }
.pdmc--reserve .pdmc-corps { opacity: 0.45; }
.pdmc--reserve .pdmc-pied { border-top-color: var(--color-bordure); }
.pdm-tampon {
  position: absolute; top: 50%; right: var(--space-5);
  transform: translateY(-50%) rotate(-2deg);   /* fixe : la rotation ne s'anime pas */
  max-width: calc(100% - 2 * var(--space-5));
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--color-bordure-forte);
  border-radius: var(--rayon-xs);
  background: var(--color-surface);
  color: var(--color-encre);
  font-family: var(--font-titres); font-weight: var(--graisse-titre-doux);
  font-size: var(--text-sm); letter-spacing: 0.04em; white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .pdm-tampon { animation: pdm-fondu var(--duree-trace) var(--ease-pose) both; }
}
@keyframes pdm-fondu { from { opacity: 0; } to { opacity: 1; } }

/* Sortie : fondu + glissement, 60 % de la durée d'entrée. */
.pdmc--sortie {
  opacity: 0; transform: translateX(12px);
  transition: opacity var(--duree-pdm-sortie) var(--ease-sortie),
              transform var(--duree-pdm-sortie) var(--ease-sortie);
}

/* ---------- Pile de notifications (app seulement) ---------- */
.pdm-notifs {
  position: fixed; z-index: 60;
  top: calc(var(--nav-h, 64px) + var(--space-4)); right: var(--space-6);
  width: min(23rem, calc(100vw - 2 * var(--space-6)));
  display: flex; flex-direction: column; gap: var(--space-2);
  pointer-events: none;
}
.pdm-notif {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--filet-epaisseur) solid var(--color-bordure);
  border-radius: var(--rayon-m);
  box-shadow: var(--ombre-moyenne);
  color: var(--color-encre);
}
.pdm-notif-point {
  width: 6px; height: 6px; flex: none; border-radius: 50%;
  margin-top: 0.5em;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-surface-accent);
}
@media (prefers-reduced-motion: no-preference) {
  .pdm-notif { animation: pdm-notif-entree var(--duree-pose) var(--ease-pose) both; }
}
@keyframes pdm-notif-entree {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}
.pdm-notif--sortie {
  opacity: 0;
  transition: opacity var(--duree-pdm-sortie) var(--ease-sortie);
}

/* ---------- Mobile ≤ 600 px ---------- */
@media (max-width: 600px) {
  .pdm-compteurs { gap: var(--space-2); }
  .pdm-compteur { padding: var(--space-3); }
  .pdm-compteur-val { font-size: 1.5rem; }
  .pdmc { padding: var(--space-4); }
  .pdmc--une { padding: var(--space-5); }
  .pdmc-pied { align-items: stretch; row-gap: var(--space-3); }
  .pdmc-pied .btn { width: 100%; }
  .pdm-tampon {
    position: static; transform: rotate(-2deg);
    align-self: flex-start; max-width: 100%;
    margin-top: var(--space-1);
  }
  /* La pile de notifications passe en bas d'écran (le pouce, pas la nav). */
  .pdm-notifs {
    top: auto; bottom: var(--space-4);
    left: var(--space-4); right: var(--space-4);
    width: auto;
  }
}