/* ---------------------------------------------------------------------------
   BioTwin V3.7, Bio-Signatures et biomarqueurs.
   Chargé en dernier sur index.html et sur les six pages de piliers.

   Aucun code couleur de statut. La page dit ce qui est mesuré, pas ce qui va
   bien ou mal.
--------------------------------------------------------------------------- */

/* ============ 1. Bandeau de synthèse, page d'aperçu ============ */

.v37-summary {
  padding-block: clamp(24px, 2.8vw, 38px);
  background: var(--v12-white, #fff);
}

.v37-summary-wrap {
  width: min(1240px, calc(100% - 48px));
  margin-inline: auto;
}

.v37-summary-card {
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid rgba(8, 115, 110, 0.22);
  border-radius: 16px;
  background: linear-gradient(180deg, #f3fbf9 0%, #ffffff 80%);
}

.v37-summary-card > .v37-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--v12-teal, #08736e);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

.v37-summary-card h2 {
  margin: 0 0 16px;
  font-size: clamp(1.3rem, 2.3vw, 1.9rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
}

.v37-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.v37-stats li {
  padding: 12px 14px;
  border: 1px solid rgba(7, 27, 44, 0.1);
  border-radius: 12px;
  background: #fff;
}

.v37-stats b {
  display: block;
  color: var(--v12-navy, #061a2c);
  font-size: clamp(1.4rem, 2.5vw, 1.95rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.v37-stats span {
  display: block;
  margin-top: 4px;
  color: #56666f;
  font-size: 0.79rem;
  line-height: 1.3;
}

.v37-pillar-tally {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v37-pillar-tally li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 8px;
  padding: 8px 11px;
  border: 1px solid rgba(7, 27, 44, 0.09);
  border-radius: 10px;
  background: #fff;
  font-size: 0.83rem;
}

.v37-pillar-tally b { color: var(--v12-navy, #061a2c); font-weight: 700; }
.v37-pillar-tally span { color: #5b6b78; }

/* ============ 2. Compteurs en tête de la section Bio-Signatures ============ */

.v37-sig-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 9px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.v37-sig-meta li {
  padding: 6px 12px;
  border: 1px solid rgba(8, 115, 110, 0.26);
  border-radius: 999px;
  background: #f2faf8;
  color: #22424b;
  font-size: 0.82rem;
  font-weight: 600;
}

.v37-sig-meta li b { color: var(--v12-teal, #08736e); font-weight: 800; }

/* ============ 3. Liste des Bio-Signatures ============ */

.v37-sig-list {
  display: grid;
  gap: 8px;
}

.v37-sig {
  border: 1px solid rgba(7, 27, 44, 0.13);
  border-radius: 13px;
  background: #fff;
  overflow: hidden;
}

.v37-sig[open] {
  border-color: rgba(8, 115, 110, 0.42);
  box-shadow: 0 12px 30px rgba(6, 26, 44, 0.07);
}

/* Rectangle 1, le total du programme. Pas de dépliant. */
.v37-sig-total {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 14px;
  padding: 15px 17px;
  border-color: rgba(8, 115, 110, 0.4);
  background: linear-gradient(180deg, #f2faf8 0%, #ffffff 92%);
}

.v37-sig-total .v37-sig-index {
  background: var(--v12-teal, #08736e);
  font-size: 1rem;
}

.v37-sig-total-figures {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  color: var(--v12-navy, #061a2c);
  font-size: 0.86rem;
  font-weight: 600;
  text-align: end;
}

.v37-sig-total-figures b {
  color: var(--v12-teal, #08736e);
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.v37-sig-total-figures span { color: #66757f; font-weight: 500; }

/* Cartes dépliables */
.v37-sig > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px 14px;
  padding: 13px 17px;
  cursor: pointer;
  list-style: none;
}

.v37-sig > summary::-webkit-details-marker { display: none; }
.v37-sig > summary:hover { background: #f6fbfa; }

.v37-sig-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--v12-navy, #061a2c);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
}

.v37-sig-name {
  min-width: 0;
  font-size: 0.99rem;
  font-weight: 700;
  line-height: 1.25;
}

.v37-sig-name small {
  display: block;
  margin-top: 2px;
  color: #62717d;
  font-size: 0.79rem;
  font-weight: 500;
  line-height: 1.35;
}

.v37-sig-tally {
  color: #3f5361;
  font-size: 0.83rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Le plus, qui devient un moins une fois la carte ouverte */
.v37-sig-plus {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(8, 115, 110, 0.42);
  border-radius: 50%;
  background: #f2faf8;
}

.v37-sig-plus::before,
.v37-sig-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--v12-teal, #08736e);
  transform: translate(-50%, -50%);
  transition: opacity .18s ease;
}

.v37-sig-plus::before { width: 11px; height: 2px; }
.v37-sig-plus::after { width: 2px; height: 11px; }

.v37-sig[open] .v37-sig-plus::after { opacity: 0; }
.v37-sig > summary:hover .v37-sig-plus { background: #e4f5f2; }

.v37-sig-body {
  padding: 14px 17px 16px;
  border-top: 1px solid rgba(7, 27, 44, 0.08);
}

.v37-sig-lead {
  margin: 0 0 14px;
  color: #354a57;
  font-size: 0.91rem;
  line-height: 1.55;
}

.v37-list-title {
  margin: 0 0 9px;
  color: var(--v12-navy, #061a2c);
  font-size: 0.79rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Liste complète des biomarqueurs, en colonnes pour rester lisible */
.v37-flat-list {
  margin: 0;
  padding: 0;
  column-count: 3;
  column-gap: 26px;
  list-style: none;
}

.v37-flat-list li {
  break-inside: avoid;
  padding: 5px 0 5px 14px;
  border-bottom: 1px solid rgba(7, 27, 44, 0.06);
  color: #2f4552;
  font-size: 0.84rem;
  line-height: 1.35;
  position: relative;
}

.v37-flat-list li::before {
  content: "";
  position: absolute;
  top: 12px;
  inset-inline-start: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(8, 115, 110, 0.5);
}

.v37-pending {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #eef2f5;
  color: #46565f;
  font-size: 0.82rem;
  line-height: 1.5;
}

.v37-list-note {
  margin: 12px 0 0;
  color: #6b7a84;
  font-size: 0.79rem;
  line-height: 1.5;
}

/* ============ 4. Compteurs sur les cartes de l'aperçu ============ */

.v37-card-tally {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.v37-card-tally span {
  padding: 4px 10px;
  border: 1px solid rgba(8, 115, 110, 0.26);
  border-radius: 999px;
  background: #f2faf8;
  color: #22424b;
  font-size: 0.76rem;
  font-weight: 600;
}

.v37-card-tally b { color: var(--v12-teal, #08736e); font-weight: 800; }

/* ============ 5. Tablette et mobile ============ */

@media (max-width: 1000px) {
  .v37-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v37-pillar-tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v37-flat-list { column-count: 2; }
}

@media (max-width: 767px) {
  .v37-summary-wrap { width: calc(100% - 32px); }
  .v37-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .v37-pillar-tally { grid-template-columns: 1fr; }
  .v37-flat-list { column-count: 1; }

  .v37-sig > summary,
  .v37-sig-total {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 12px 14px;
  }

  .v37-sig > summary .v37-sig-tally {
    grid-column: 2 / -1;
    white-space: normal;
  }

  .v37-sig-total-figures {
    grid-column: 1 / -1;
    text-align: start;
  }

  .v37-sig-body { padding: 12px 14px 14px; }
}

/* ============ 6. V3.8, fiche d'un biomarqueur, SPEC-2 section 7 ============ *
 * Elle ferme la liste des Bio-Signatures. Elle rend la profondeur concrete en
 * nommant un biomarqueur que le lecteur connait deja, et en montrant a quelle
 * Bio-Signature il se rattache. Aucune valeur n'y figure : la page ne promet
 * pas un resultat, elle montre la forme d'une lecture.
 * ------------------------------------------------------------------------- */

.v37-sample {
  margin-top: 10px;
  padding: 18px 20px 20px;
  border: 1px dashed var(--v12-line, rgba(8, 115, 110, 0.3));
  border-radius: 14px;
  background: var(--v12-teal-soft, #e8f6f3);
}

.v37-sample-kicker {
  margin: 0;
  color: var(--v12-teal, #08736e);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.v37-sample-name {
  margin: 6px 0 0;
  color: var(--v12-navy, #061a2c);
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.25;
}

.v37-sample-lead {
  margin: 8px 0 0;
  max-width: 62ch;
  color: var(--v12-navy, #061a2c);
  font-size: 0.9rem;
  line-height: 1.55;
}

.v37-sample-link {
  margin: 10px 0 0;
  color: #4a5c66;
  font-size: 0.86rem;
  line-height: 1.5;
}

.v37-sample-link b {
  color: var(--v12-teal, #08736e);
  font-weight: 700;
}

.v37-sample-foot {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--v12-line, rgba(8, 115, 110, 0.3));
  max-width: 62ch;
  color: #6b7a84;
  font-size: 0.78rem;
  line-height: 1.5;
}

@media (max-width: 767px) {
  .v37-sample { padding: 14px 16px 16px; }
  .v37-sample-name { font-size: 1.08rem; }
  .v37-sample-lead { font-size: 0.86rem; }
}

/* ============ 7. V3.8, bloc de description d'une Bio-Signature ============ *
 * Affiche avant la liste des biomarqueurs, au depliage de la carte.
 * Sous-titre du portail, puis description editoriale, puis cadrage de lecture.
 * ------------------------------------------------------------------------- */

.v37-sig-body .v37-sig-sub {
  margin: 0 0 8px;
  color: var(--v12-teal, #08736e);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
}

.v37-sig-body .v37-sig-lead {
  margin: 0 0 8px;
  max-width: 68ch;
  color: var(--v12-navy, #061a2c);
  font-size: 0.94rem;
  line-height: 1.6;
}

.v37-sig-body .v37-sig-frame {
  margin: 0 0 16px;
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--v12-line, rgba(8, 115, 110, 0.3));
  max-width: 68ch;
  color: #56666f;
  font-size: 0.84rem;
  line-height: 1.55;
}

@media (max-width: 767px) {
  .v37-sig-body .v37-sig-sub { font-size: 0.85rem; }
  .v37-sig-body .v37-sig-lead { font-size: 0.88rem; }
  .v37-sig-body .v37-sig-frame { font-size: 0.8rem; }
}