/* HARRY — styles limités au composant ; aucune police ni règle globale ajoutée. */
.harry-protein-matrix {
 position:relative; /* Contient la zone accessible, y compris dans les fiches hors écran des Tops. */
 --harry-text-main:#2D3032; --harry-text-muted:#6D7375; --harry-border-dotted:#DDE4E5;
 --harry-brand-teal:#007C78; --harry-accent-yellow:#F4CC58; --harry-score-positive:#259A68;
 --harry-white:#fff; --harry-surface-soft:#FAFCFC;
 font-family:inherit; color:var(--harry-text-main); min-width:0;
}
.harry-protein-matrix, .harry-protein-matrix * { box-sizing:border-box; }
/* Composant autonome : toutes les règles de la carte restent sous ce sélecteur. */
.harry-protein-matrix { background:var(--harry-white); padding:27px 28px 20px; border-radius:12px; }
.harry-protein-matrix button { font-family:inherit; cursor:pointer; }
.harry-protein-matrix button:focus-visible,.harry-protein-matrix summary:focus-visible { outline:2px solid var(--harry-brand-teal); outline-offset:4px; }
.harry-protein-matrix .hpm-heading { display:flex; align-items:center; gap:10px; }
.harry-protein-matrix h2 { margin:0; font:600 20px/1.3 'Space Grotesk',sans-serif; letter-spacing:-.35px; }
.harry-protein-matrix .hpm-subtitle { color:var(--harry-text-muted); font-size:13px; margin:7px 0 0; line-height:1.5; }
.harry-protein-matrix .hpm-help { margin-left:auto; width:24px; height:24px; border:1px solid #cbd6d4; border-radius:50%; background:white; color:var(--harry-text-muted); font-size:12px; flex:none; }
.harry-protein-matrix .hpm-explanation { font-size:13px; line-height:1.55; padding:12px 0 0; color:var(--harry-text-muted); margin:0; max-width:620px; }
.harry-protein-matrix [hidden] { display:none !important; }
.harry-protein-matrix .hpm-chart { position:relative; margin:9px -2px 0; }
.harry-protein-matrix .hpm-chart svg { display:block; width:100%; overflow:visible; }
.harry-protein-matrix svg text { font-family:'DM Sans',Arial,sans-serif; }
.harry-protein-matrix .hpm-axis-label { fill:var(--harry-text-muted); font-size:11px; }
.harry-protein-matrix .hpm-axis-title { fill:var(--harry-text-main); font-weight:600; font-size:12px; }
.harry-protein-matrix .hpm-direct-label { font-size:11px; fill:var(--harry-text-main); font-weight:500; pointer-events:none; }
.harry-protein-matrix .hpm-rank { font-size:11px; fill:#1c443a; font-weight:700; pointer-events:none; }
.harry-protein-matrix .hpm-bubble { transition:opacity 160ms ease; }
.harry-protein-matrix .hpm-overlay { position:absolute; inset:0; pointer-events:none; }
.harry-protein-matrix .hpm-hit { position:absolute; pointer-events:auto; border:0; background:transparent; border-radius:50%; padding:0; }
.harry-protein-matrix .hpm-readout { border-top:1px solid #e8eeec; margin-top:2px; padding:16px 0 15px; display:grid; grid-template-columns:32px minmax(0,1fr); gap:11px; min-height:89px; align-items:start; }
.harry-protein-matrix .hpm-readout-rank { width:30px; height:30px; border-radius:50%; background:#edf5f1; color:var(--harry-brand-teal); display:grid; place-items:center; font-size:12px; font-weight:700; }
.harry-protein-matrix .hpm-readout-name { margin:0 0 6px; font-size:14px; font-weight:700; line-height:1.35; }
.harry-protein-matrix .hpm-readout-values { display:flex; flex-wrap:wrap; gap:5px 18px; font-size:12px; line-height:1.5; color:var(--harry-text-muted); }
.harry-protein-matrix .hpm-readout-values strong { color:var(--harry-text-main); font-weight:500; }
.harry-protein-matrix .hpm-legend { display:flex; align-items:center; flex-wrap:wrap; gap:9px; color:var(--harry-text-muted); font-size:11px; padding-bottom:14px; }
.harry-protein-matrix .hpm-size-dots { display:inline-flex; align-items:center; gap:4px; height:20px; }
.harry-protein-matrix .hpm-size-dots i { display:block; width:16px; height:16px; background:#b7d9cd; border-radius:50%; }
.harry-protein-matrix .hpm-size-dots i:nth-child(2) { width:10px;height:10px; }.harry-protein-matrix .hpm-size-dots i:nth-child(3) { width:7px;height:7px; }
.harry-protein-matrix .hpm-color-key { display:inline-block; width:42px; height:6px; border-radius:8px; background:linear-gradient(90deg,var(--harry-accent-yellow),var(--harry-score-positive)); margin-left:0; }
.harry-protein-matrix .hpm-profile-key { display:inline-flex; gap:8px; align-items:center; margin-left:auto; }
.harry-protein-matrix .hpm-sources { border-top:1px solid #e8eeec; padding-top:12px; }
.harry-protein-matrix .hpm-sources summary { font-size:12px; font-weight:500; color:var(--harry-brand-teal); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.harry-protein-matrix .hpm-sources summary::-webkit-details-marker { display:none; }
.harry-protein-matrix .hpm-sources summary::after { content:'+'; font-size:18px; font-weight:400; }.harry-protein-matrix .hpm-sources[open] summary::after { content:'−'; }
.harry-protein-matrix .hpm-source-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px 12px; padding-top:12px; }
.harry-protein-matrix .hpm-source { display:flex; gap:9px; align-items:center; background:transparent; border:0; border-radius:6px; padding:8px; text-align:left; color:var(--harry-text-main); font-size:12px; line-height:1.4; min-height:38px; }
.harry-protein-matrix .hpm-source[aria-pressed=true] { background:#eef6f2; }
.harry-protein-matrix .hpm-source span { color:var(--harry-brand-teal); font-weight:600; flex:none; min-width:17px; font-size:11px; }
.harry-protein-matrix .hpm-note { margin:13px 0 0; color:var(--harry-text-muted); font-size:11px; line-height:1.5; }
@media(max-width:560px) {
 .harry-protein-matrix{padding:20px 14px 17px}.harry-protein-matrix h2{font-size:18px}
 .harry-protein-matrix .hpm-subtitle{font-size:12px}.harry-protein-matrix .hpm-source-list{grid-template-columns:1fr}
 .harry-protein-matrix .hpm-color-key{margin-left:0}.harry-protein-matrix .hpm-readout{min-height:106px}
 .harry-protein-matrix .hpm-legend{gap:7px}.harry-protein-matrix .hpm-profile-key{margin-left:0}
}
@media(prefers-reduced-motion:reduce){.harry-protein-matrix *{transition:none!important}}

/* Deuxième proposition : continuité avec la fiche produit Harry. */
.harry-protein-matrix { padding:0; border-radius:0; }
.harry-protein-matrix .hpm-heading { gap:9px; align-items:flex-start; }
.harry-protein-matrix h2 { font-size:25px; font-weight:600; letter-spacing:-.7px; line-height:1.25; }
.harry-protein-matrix .hpm-title-stack { display:flex; flex-direction:column; gap:10px; }
.harry-protein-matrix .hpm-signature { display:flex; gap:5px; height:5px; }
.harry-protein-matrix .hpm-signature i { width:12px; height:5px; border-radius:8px; background:var(--harry-brand-teal); }
.harry-protein-matrix .hpm-signature i:nth-child(2) { background:var(--harry-accent-yellow); }
.harry-protein-matrix .hpm-signature i:nth-child(3) { background:var(--harry-score-positive); }
.harry-protein-matrix .hpm-help { margin:4px 0 0 2px; width:21px; height:21px; font-size:11px; }
.harry-protein-matrix .hpm-collapse { margin:2px 0 0 auto; border:0; width:28px; height:28px; border-radius:50%; color:#34423a; background:var(--harry-accent-yellow); font-size:19px; line-height:1; display:grid; place-items:center; padding:0; flex:none; }
.harry-protein-matrix .hpm-collapse:hover { background:#f8d879; }
.harry-protein-matrix .hpm-subtitle { font-size:14px; margin:17px 0 2px; color:var(--harry-text-muted); }
.harry-protein-matrix .hpm-chart { margin:12px 0 0; }
.harry-protein-matrix .hpm-direct-label { fill:#3e5049; font-weight:500; }
.harry-protein-matrix .hpm-rank { fill:#164e42; }
.harry-protein-matrix .hpm-readout { background:#f5f9f7; border-top:0; border-radius:9px; padding:16px 17px; grid-template-columns:36px minmax(0,1fr); min-height:80px; margin:4px 0 17px; align-items:center; }
.harry-protein-matrix .hpm-readout-rank { background:var(--harry-accent-yellow); width:34px; height:34px; color:#225b4e; font-size:13px; }
.harry-protein-matrix .hpm-readout-name { font-size:15px; }
.harry-protein-matrix .hpm-readout-values { gap:4px 22px; font-size:12px; }
.harry-protein-matrix .hpm-readout-values strong { color:var(--harry-brand-teal); }
.harry-protein-matrix .hpm-size-dots i { background:#c3dfd5; }
.harry-protein-matrix .hpm-legend { padding:0 0 18px; }
.harry-protein-matrix .hpm-color-key { background:linear-gradient(90deg,var(--harry-accent-yellow),var(--harry-score-positive)); }
.harry-protein-matrix .hpm-sources { border-top:2px dashed var(--harry-border-dotted); padding-top:13px; }
.harry-protein-matrix .hpm-sources summary { font-size:13px; }
.harry-protein-matrix .hpm-sources summary::after { border-radius:50%; background:#f0f6f3; width:24px; height:24px; text-align:center; line-height:24px; color:var(--harry-brand-teal); }
.harry-protein-matrix .hpm-note { font-size:11px; color:#808b87; margin-top:16px; }
@media(max-width:560px) {
 .harry-protein-matrix h2 { font-size:22px; }.harry-protein-matrix .hpm-subtitle { font-size:13px; max-width:280px; line-height:1.5; }
 .harry-protein-matrix .hpm-heading { gap:6px; }.harry-protein-matrix .hpm-help { width:20px; height:20px; }
 .harry-protein-matrix .hpm-readout { padding:14px 12px; gap:10px; min-height:97px; }
 .harry-protein-matrix .hpm-readout-name { font-size:14px; }.harry-protein-matrix .hpm-readout-values { font-size:12px; gap:3px 12px; }
 .harry-protein-matrix .hpm-profile-key { margin-left:0; }.harry-protein-matrix .hpm-legend { row-gap:10px; }
}

/* Récap permanent : les mêmes ingrédients, regroupés sans encoder de quantité. */
.harry-protein-matrix .hpm-recap { border-top:0; padding-top:15px; }
.harry-protein-matrix .hpm-recap h3 { margin:0 0 12px; font:600 14px/1.4 'DM Sans',Arial,sans-serif; color:var(--harry-text-main); }
.harry-protein-matrix .hpm-source-list { display:flex; flex-direction:column; gap:10px; padding:0; }
.harry-protein-matrix .hpm-recap-row { display:grid; grid-template-columns:86px minmax(0,1fr); gap:12px; align-items:start; --hpm-chip:#edf6f0; --hpm-chip-selected:#dceee3; --hpm-chip-ink:#236a50; }
.harry-protein-matrix .hpm-recap-plant { --hpm-chip:#fbf3df; --hpm-chip-selected:#f4e6be; --hpm-chip-ink:#82621c; }
.harry-protein-matrix .hpm-recap-yeast { --hpm-chip:#f0ecf8; --hpm-chip-selected:#e4daf3; --hpm-chip-ink:#6d538b; }
.harry-protein-matrix .hpm-recap-category { font-size:11px; font-weight:500; color:var(--harry-text-muted); display:flex; gap:7px; align-items:center; min-height:30px; }
.harry-protein-matrix .hpm-recap-category::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--hpm-chip-ink); opacity:.65; flex:none; }
.harry-protein-matrix .hpm-recap-chips { display:flex; flex-wrap:wrap; gap:6px; }
.harry-protein-matrix .hpm-source { min-height:30px; display:inline-flex; flex:none; gap:6px; padding:4px 10px 4px 5px; border-radius:18px; background:var(--hpm-chip); color:var(--hpm-chip-ink); border:1px solid transparent; }
.harry-protein-matrix .hpm-source:hover { background:var(--hpm-chip-selected); }
.harry-protein-matrix .hpm-source[aria-pressed=true] { background:var(--hpm-chip-selected); border-color:var(--hpm-chip-ink); }
.harry-protein-matrix .hpm-source .hpm-source-rank { display:grid; place-items:center; width:20px; height:20px; min-width:20px; border-radius:50%; font-size:10px; font-weight:700; color:var(--hpm-chip-ink); background:#ffffffb3; }
.harry-protein-matrix .hpm-source .hpm-source-name { min-width:0; color:inherit; font-size:11px; font-weight:500; line-height:1.3; }
@media(max-width:560px){
 .harry-protein-matrix .hpm-recap-row { grid-template-columns:1fr; gap:4px; }
 .harry-protein-matrix .hpm-recap-category { min-height:19px; }
 .harry-protein-matrix .hpm-source-list { gap:11px; }
 .harry-protein-matrix .hpm-source { min-height:32px; }
 .harry-protein-matrix .hpm-source .hpm-source-name { font-size:11px; }
}

.harry-protein-matrix .hpm-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

/* Couleurs Harry dans le récap ; la carte conserve sa couleur liée au profil. */
.harry-protein-matrix .hpm-recap-animal { --hpm-chip:var(--harry-score-positive); --hpm-chip-selected:#1e8056; --hpm-chip-ink:#10251b; }
.harry-protein-matrix .hpm-recap-plant { --hpm-chip:var(--harry-accent-yellow); --hpm-chip-selected:#ebbd38; --hpm-chip-ink:#554315; }
.harry-protein-matrix .hpm-recap-animal .hpm-recap-category::before { background:var(--harry-score-positive); opacity:1; }
.harry-protein-matrix .hpm-recap-plant .hpm-recap-category::before { background:var(--harry-accent-yellow); opacity:1; }
.harry-protein-matrix .hpm-recap-animal .hpm-source .hpm-source-rank { background:#fff; color:#145a3e; }
.harry-protein-matrix .hpm-recap-animal .hpm-source[aria-pressed=true] { color:#fff; border-color:#145a3e; box-shadow:0 0 0 2px #e2f0e9; }
.harry-protein-matrix .hpm-recap-plant .hpm-source[aria-pressed=true] { border-color:#aa831b; box-shadow:0 0 0 2px #fbf2d8; }
.harry-protein-matrix .hpm-explanation { max-width:none; }
.harry-protein-matrix .hpm-explanation > p { max-width:740px; margin:0 0 14px; }
.harry-protein-matrix .hpm-lessons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 0 12px; align-items:start; }
.harry-protein-matrix .hpm-lesson { background:#f6faf8; border-radius:8px; padding:13px 14px; }
.harry-protein-matrix .hpm-lesson summary { list-style:none; display:flex; align-items:center; gap:12px; color:var(--harry-brand-teal); font-size:13px; font-weight:600; line-height:1.4; cursor:pointer; }
.harry-protein-matrix .hpm-lesson summary::-webkit-details-marker { display:none; }
.harry-protein-matrix .hpm-lesson summary::after { content:'+'; margin-left:auto; font-size:18px; font-weight:400; }
.harry-protein-matrix .hpm-lesson[open] summary::after { content:'−'; }
.harry-protein-matrix .hpm-lesson-body p { margin:12px 0 0; font-size:13px; line-height:1.6; }
.harry-protein-matrix .hpm-reference { color:var(--harry-brand-teal); font-size:11px; display:inline-block; margin-top:13px; text-underline-offset:3px; }
@media(max-width:560px){.harry-protein-matrix .hpm-lessons { grid-template-columns:1fr; gap:8px; }}

/* Répertoire de sources : texte et repères, sans pastilles ni badges. */
.harry-protein-matrix .hpm-recap-row { grid-template-columns:86px minmax(0,1fr); align-items:baseline; }
.harry-protein-matrix .hpm-recap-animal { --hpm-directory-color:var(--harry-score-positive); }
.harry-protein-matrix .hpm-recap-plant { --hpm-directory-color:var(--harry-accent-yellow); }
.harry-protein-matrix .hpm-recap-yeast { --hpm-directory-color:#9c83b4; }
.harry-protein-matrix .hpm-recap-category { min-height:29px; }
.harry-protein-matrix .hpm-recap-chips { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 18px; }
.harry-protein-matrix .hpm-recap .hpm-source { position:relative; width:100%; min-height:32px; padding:5px 0; gap:8px; border:0; border-radius:0; box-shadow:none; background:transparent; color:var(--harry-text-main); align-items:baseline; }
.harry-protein-matrix .hpm-recap .hpm-source:hover,
.harry-protein-matrix .hpm-recap .hpm-source[aria-pressed=true] { background:transparent; color:var(--harry-text-main); border:0; box-shadow:none; }
.harry-protein-matrix .hpm-recap .hpm-source .hpm-source-rank { display:inline-block; width:18px; min-width:18px; height:auto; border:0; border-radius:0; background:transparent; color:#82918b; font-size:10px; line-height:1.5; font-weight:400; text-align:right; font-variant-numeric:tabular-nums; }
.harry-protein-matrix .hpm-recap .hpm-source .hpm-source-name { display:inline; min-width:0; font-size:12px; line-height:1.5; font-weight:400; color:var(--harry-text-main); text-align:left; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:5px; text-decoration-thickness:2px; }
.harry-protein-matrix .hpm-recap .hpm-source:hover .hpm-source-name,
.harry-protein-matrix .hpm-recap .hpm-source[aria-pressed=true] .hpm-source-name { text-decoration-color:var(--hpm-directory-color); }
.harry-protein-matrix .hpm-recap .hpm-source[aria-pressed=true] .hpm-source-name { font-weight:600; }
.harry-protein-matrix .hpm-recap .hpm-source[aria-pressed=true] .hpm-source-rank { color:var(--harry-brand-teal); font-weight:600; }
@media(max-width:700px){
 .harry-protein-matrix .hpm-recap-chips { grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px 13px; }
}
@media(max-width:560px){
 .harry-protein-matrix .hpm-recap-row { grid-template-columns:1fr; gap:1px; }
 .harry-protein-matrix .hpm-recap-category { min-height:22px; }
 .harry-protein-matrix .hpm-source-list { gap:13px; }
 .harry-protein-matrix .hpm-recap .hpm-source { min-height:36px; }
}

/* Répertoire plus dense, sans espacement vertical de grille superflu. */
.harry-protein-matrix .hpm-recap { padding-top:11px; }
.harry-protein-matrix .hpm-recap h3 { margin-bottom:7px; }
.harry-protein-matrix .hpm-source-list { gap:5px; }
.harry-protein-matrix .hpm-recap-chips { row-gap:0; }
.harry-protein-matrix .hpm-recap-category { min-height:24px; }
.harry-protein-matrix .hpm-recap .hpm-source { min-height:25px; padding:2px 0; }
@media(max-width:560px){
 .harry-protein-matrix .hpm-source-list { gap:7px; }
 .harry-protein-matrix .hpm-recap-row { row-gap:0; }
 .harry-protein-matrix .hpm-recap-category { min-height:20px; }
 .harry-protein-matrix .hpm-recap .hpm-source { min-height:27px; padding:3px 0; }
}

.harry-protein-matrix .hpm-rank { fill:#10251b; }
.harry-protein-matrix .hpm-size-dots i { background:var(--harry-score-positive); opacity:.45; }

.harry-protein-matrix .hpm-recap-plant { margin-top:6px; }

.harry-protein-matrix .hpm-recap .hpm-source .hpm-source-name { flex:1 1 auto; overflow-wrap:anywhere; }
.harry-protein-matrix .hpm-missing { font-size:12px; color:var(--harry-text-muted); }

/* Espacement du titre du récapitulatif sur desktop uniquement. */
@media (min-width:768px) {
 .harry-protein-matrix .hpm-recap h3 { margin-bottom:14px; }
}

/* Empêche les marges internes de s'échapper pendant l'animation de hauteur. */
.harry-protein-matrix .hpm-content,
.harry-protein-matrix .hpm-explanation,
.harry-protein-matrix .hpm-lesson-body { display:flow-root; }
.harry-protein-matrix .hpm-lesson[data-hpm-expanded="false"] summary::after { content:'+'; }
.harry-protein-matrix .hpm-lesson[data-hpm-expanded="true"] summary::after { content:'−'; }

/* Bouton d'aide aligné sur les boutons ? des critères (22 px). */
.harry-protein-matrix .hpm-heading {
  display: grid;
  grid-template-columns: minmax(0, max-content) 22px minmax(28px, 1fr);
  gap: 10px 9px;
  align-items: center;
}
.harry-protein-matrix .hpm-title-stack { display: contents; }
.harry-protein-matrix .hpm-heading h2 { grid-column: 1; grid-row: 1; }
.harry-protein-matrix .hpm-signature { grid-column: 1; grid-row: 2; }
.harry-protein-matrix .hpm-help {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  margin: 0;
  border: 1px solid #D6D3D1;
  border-radius: 50%;
  background: none;
  color: var(--harry-text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.harry-protein-matrix .hpm-collapse {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  margin: 0;
}