/* === PROSE (onglet méthodo) === */
.prose p, .prose li { color: var(--text-primary); }
.prose ul { padding-inline-start: 1.2rem; margin: 0.3rem 0 0.8rem; }
.prose li { margin: 0.2rem 0; }
.callout {
  background: var(--accent-muted); border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius-sm); padding: 0.9rem 1rem; margin: 1rem 0; font-size: 0.9rem;
}

/* === PROTOCOLES (méthodo) : fiches dépliables. Ordi = tout ouvert ; mobile = accordéon. === */
.proto-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.4rem; }
.proto { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-secondary); }
.proto-head { display: flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0.8rem; min-width: 0; cursor: pointer; list-style: none; }
.proto-head::-webkit-details-marker { display: none; }
.proto-head::before { content: "\25B8"; flex: 0 0 auto; color: var(--text-secondary); font-size: 0.8rem; transition: transform 0.2s ease; }
.proto[open] .proto-head::before { transform: rotate(90deg); }
.proto-name { flex: 0 0 auto; font-family: var(--font-title); font-weight: 700; font-size: 1rem; white-space: nowrap; }
.proto-fullname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-size: 0.9rem; }
.proto-wait { margin-inline-start: auto; flex: 0 0 auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 0.15rem 0.5rem; font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Tests du profil du bac courant : fond accent doux (option B), repère sur toute la ligne. La liste
   reste exhaustive et dans l'ordre ; la légende d'intro explique le code couleur. */
.proto--profile { background: var(--accent-muted); border-color: rgba(var(--accent-rgb), 0.5); }
/* Légende d'intro (visible seulement avec un bac) : pastille de rappel + libellé + (i) de détail.
   La pastille reprend le fond accent des lignes de profil pour que l'utilisateur fasse le lien. */
.proto-legend { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--text-secondary); margin: 0.2rem 0 0.7rem; }
.proto-legend-sw { width: 12px; height: 12px; border-radius: 4px; background: var(--accent-muted); border: 1px solid rgba(var(--accent-rgb), .5); flex: 0 0 auto; }
/* Disclaimer en pied de la liste des protocoles : séparé par un filet. */
.methodo-foot { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--border); }
.proto-body { display: flex; flex-direction: column; gap: 0.4rem; padding: 0 0.8rem 0.7rem 1.55rem; }
.proto-field { display: flex; gap: 0.7rem; font-size: 0.88rem; line-height: 1.45; }
.proto-k { flex: 0 0 9rem; color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding-top: 0.12rem; }
.methodo-link { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.methodo-link:hover { text-decoration: underline; }
.methodo-na { color: var(--text-secondary); }
/* Petite icône info (CO₂ estimé) : bouton icône MD3 (SVG + state layer). Infobulle au survol (ordi),
   au focus clavier et au tap (mobile, via .show-tip posé en JS). Le ::before est la state layer. */
.info-i {
  position: relative; display: inline-grid; place-items: center; vertical-align: middle;
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  color: var(--text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.info-i > svg { width: 18px; height: 18px; display: block; position: relative; z-index: 1; }
.info-i::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: currentColor; opacity: 0; transition: opacity 0.15s ease; pointer-events: none;
}
.info-i:active::before { opacity: 0.16; }
.info-i.show-tip::before { opacity: 0.12; }
@media (hover: hover) { .info-i:hover::before { opacity: 0.10; } }
.info-i:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* "i" actif (ouvert au tap/clic) : passe en bleu accent pour un état "sélectionné" clair. */
.info-i.show-tip { color: var(--accent); }
.info-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: max-content; max-width: 15rem;
  background: var(--bg-card); border: 1px solid var(--text-secondary); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card); padding: 0.5rem 0.6rem;
  font-size: 0.72rem; font-weight: 400; line-height: 1.45; color: var(--text-secondary); white-space: normal;
  opacity: 0; visibility: hidden; transform: translateY(-3px);
  transition: opacity 0.15s ease, transform 0.15s ease; pointer-events: none;
}
.info-i.show-tip .info-pop, .info-i:focus-visible .info-pop { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) { .info-i:hover .info-pop { opacity: 1; visibility: visible; transform: none; } }

/* Ordi : tout déplié, non repliable (triangle masqué). UNE carte par ligne (pleine largeur),
   mais les DONNÉES internes (échantillon / réactifs / type / fiche) passent en 2 colonnes
   DANS la carte, champs empilés (label au-dessus de la valeur) pour ne pas tasser les textes longs. */
@media (min-width: 640px) {
  /* Accordéon aussi sur desktop (triangle + curseur conservés). Données en 2 colonnes une fois déplié :
     gauche = Échantillon + Réactifs, droite = Type + Fiche (flux vertical par colonne). */
  .proto-body { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: 0.5rem 1.5rem; padding-inline-start: 0.8rem; }
  .proto-field { flex-direction: column; gap: 0.1rem; }
  .proto-k { flex: none; padding-top: 0; }
}
/* Petit mobile : la valeur passe sous son label pour ne jamais rogner le texte (réactifs longs)
   et le badge d'attente se compacte pour ne pas déborder de la carte. */
@media (max-width: 479px) {
  .proto-field { flex-direction: column; gap: 0.1rem; }
  .proto-k { flex: none; padding-top: 0; }
  .proto-wait { font-size: 0.72rem; padding: 0.1rem 0.4rem; }
}
/* Très étroit : si nom + nom complet + badge d'attente ne tiennent pas, le badge passe sous le titre. */
@media (max-width: 360px) {
  .proto-head { flex-wrap: wrap; }
  /* Header très étroit (320px) : on resserre pour que logo + pilule bac + actions tiennent. */
  .header { padding: 0 0.6rem; }
  .logo { font-size: 1.05rem; }
  .header-actions { gap: 0.35rem; }
  body.authed .tanksw--header { margin-inline-start: 0.4rem; }
  .tanksw-cur { max-width: 38vw; padding: 0.3rem 0.6rem; font-size: 0.82rem; }
}