/* ---------- LA FICHE D'UN PRODUIT ----------
     Ouverte depuis une pastille de liste. Le produit en grand, puis les autres
     du même genre à faire défiler — c'est tout l'intérêt : voir qu'il existe
     autre chose avant de sortir vers le site du marchand. */

  .psheet{padding:16px 16px 20px; border-bottom:1px solid var(--border);}
  .psheet-visuel{
    width:100%; height:200px; border-radius:14px; background:var(--surface-soft);
    display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:12px;
  }
  .psheet-visuel img{width:100%; height:100%; object-fit:contain;}
  .psheet-visuel-vide{font-size:12px; color:var(--ink-soft); font-style:italic;}

  /* Les deux étiquettes ne disent pas la même chose : l'une avoue une
     publicité, l'autre engage notre avis. Elles ne se ressemblent donc pas. */
  .psheet-badges{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;}
  .pbadge{
    font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:700;
    text-transform:uppercase; letter-spacing:.06em; border-radius:999px; padding:3px 9px;
    white-space:nowrap;
  }
  .pbadge.sponso{background:var(--surface-soft); color:var(--ink-soft); border:1px solid var(--border);}
  .pbadge.reco{background:var(--accent-fill); color:#fff;}

  .psheet-genre{
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:3px;
  }
  .psheet-titre{margin:0; font-family:'Fraunces',serif; font-size:19px; font-weight:600; line-height:1.25; color:var(--ink);}
  .psheet-marque{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}
  .psheet-ligne{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px;}
  .psheet-price{font-size:19px; font-weight:700; color:var(--ink);}
  .psheet-discount{
    font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700;
    background:#E5342A; color:#fff; border-radius:999px; padding:2px 8px;
  }
  .psheet-desc{margin:12px 0 0; font-size:13px; line-height:1.5; color:var(--ink); white-space:pre-wrap;}

  .psheet-promo{
    display:flex; align-items:center; gap:9px; margin-top:12px; padding:9px 12px;
    background:var(--accent-bg); border-radius:11px;
  }
  .psheet-promo-label{
    font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:700;
    text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft);
  }
  .psheet-promo-code{font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:700; color:var(--ink); letter-spacing:.04em;}
  .psheet-barcode{display:block; margin-top:10px;}
  .psheet-barcode img{width:100%; max-height:160px; object-fit:contain; border-radius:11px; background:#fff; border:1px solid var(--border);}

  .psheet-lien{
    display:flex; align-items:center; justify-content:center; gap:7px; margin-top:16px;
    background:var(--action); color:#fff; border-radius:999px; padding:12px 18px;
    font-size:13.5px; font-weight:600; text-decoration:none;
  }
  .psheet-lien svg{width:14px; height:14px;}
  .psheet-lien:hover{opacity:.9;}
  .psheet-sans-lien{margin-top:14px; font-size:12px; font-style:italic; color:var(--ink-soft); text-align:center;}

  /* ---------- les autres du même genre ---------- */
  .psheet-autres{padding:14px 0 20px;}
  .psheet-autres-head{
    font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:700;
    text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft);
    padding:0 16px 9px;
  }
  /* Une liste, pas un carrousel : chaque produit prend toute la largeur, on
     les voit tous, et le rang (publicité, puis recommandé) se lit du haut. Le
     défilé horizontal en cachait la moitié hors écran. */
  .psheet-liste{display:flex; flex-direction:column;}
  .pline{
    display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
    background:none; border:none; border-bottom:1px solid var(--border);
    padding:10px 16px;
  }
  .pline:last-child{border-bottom:none;}
  .pline:hover{background:var(--bg);}
  .pline-visuel{
    flex-shrink:0; width:48px; height:48px; border-radius:10px; background:var(--surface-soft);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .pline-visuel img{width:100%; height:100%; object-fit:contain;}
  .pline-corps{flex:1; min-width:0;}
  .pline-titre{font-size:13px; font-weight:600; line-height:1.3; color:var(--ink);}
  .pline-marque{font-size:11px; color:var(--ink-soft); margin-top:1px;}
  .pline-badges{display:flex; flex-wrap:wrap; gap:4px; margin-top:4px;}
  .pline-badges .pbadge{font-size:8px; padding:2px 6px;}
  .pline-droite{flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:2px;}
  .pline-prix{font-size:13px; font-weight:700; color:var(--ink);}

  /* ---------- la pastille dans une liste ----------
     Elle ouvre la fiche : c'est un bouton, pas un lien vers l'extérieur. */
  button.product-chip{border:none; cursor:pointer; font-family:'Inter',sans-serif;}
  .chip-tag{
    flex-shrink:0; font-family:'IBM Plex Mono',monospace; font-size:8px; font-weight:700;
    border-radius:999px; padding:1px 5px; letter-spacing:.04em;
  }
  .chip-tag.sponso{background:var(--surface-soft); color:var(--ink-soft); border:1px solid var(--border);}
  .chip-tag.reco{background:var(--accent-fill); color:#fff; padding:1px 4px;}

  /* L'étiquette « recommandé » dans le catalogue du back office. */
  .admin-type-badge.reco{background:var(--accent-fill); color:#fff;}

  /* Choisir depuis la fiche : l'action principale quand on vient d'un article
     de liste. Elle passe avant le lien vers le site du marchand. */
  .psheet-choisir{
    width:100%; margin-top:16px; border:none; border-radius:999px; cursor:pointer;
    background:var(--send); color:#fff; padding:12px 18px;
    font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600;
  }
  .psheet-choisir:hover{opacity:.9;}
  .psheet-choisir + .psheet-lien{margin-top:8px; background:none; color:var(--ink); border:1px solid var(--border-soft);}

  /* Le produit déjà accroché à l'article : on le dit, et on offre de revenir
     dessus plutôt que de laisser croire que le choix est définitif. */
  .psheet-choisi{
    display:flex; align-items:center; justify-content:center; gap:7px; margin-top:16px;
    background:var(--accent-bg); color:var(--ink); border-radius:999px; padding:11px 18px;
    font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700;
    text-transform:uppercase; letter-spacing:.07em;
  }
  .psheet-retirer{
    width:100%; margin-top:8px; border:1px solid var(--border-soft); border-radius:999px; cursor:pointer;
    background:none; color:var(--ink-soft); padding:11px 18px;
    font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600;
  }
  .psheet-retirer:hover{color:#E5342A; border-color:#E5342A;}
  .psheet-choisi + .psheet-retirer + .psheet-lien{margin-top:8px;}