/* Gabarit partage des 7 comparatifs "Dopami vs X".
   Tout le rendu vient des blocs pg-* de components.css: on ne garde ici
   que les quelques ajustements propres au gabarit comparatif. */

/* ---------- En-tete ---------- */

/* Le bouton Discord et le lien secondaire tiennent sur une meme ligne:
   la marge du composant est reprise par le conteneur. */
.vs-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}

.vs-actions .discord-cta { margin-top: 0; }

/* La precision sur la beta fermee suit les deux boutons, pas un seul. */
.vs-note {
  margin: 14px 0 0;
  max-width: 48ch;
  color: var(--dop-ink-3);
  font-size: 13px;
  line-height: 1.6;
}

/* "Short version" occupe la colonne droite du hero. Pas de carte: un
   filet en haut suffit a le detacher du titre. */
.vs-short {
  padding-top: 26px;
  border-top: 1px solid var(--dop-rule);
}

.vs-short h2 {
  font-size: var(--dop-fs-sm);
  font-weight: 700;
  font-family: var(--dop-font-body);
  text-transform: uppercase;
  letter-spacing: var(--dop-tracking-eyebrow);
  color: var(--dop-ink-3);
}

.vs-short > p {
  margin: 16px 0 26px;
  color: var(--dop-ink-2);
  font-size: var(--dop-fs-body);
  line-height: var(--dop-lh-normal);
}

/* ---------- Sommaire ---------- */

/* Pose entre le filet du hero et celui de la premiere section: il ne
   porte donc aucune bordure a lui. */
.vs-toc .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.vs-toc a {
  font-size: var(--dop-fs-sm);
  font-weight: 700;
  letter-spacing: var(--dop-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--dop-ink-3);
  transition: color var(--dop-dur);
}

.vs-toc a:hover { color: var(--dop-primary); }

/* ---------- Listes ---------- */

/* Les puces de synthese n'ont pas de titre: la ligne unique reprend la
   taille du corps de texte plutot que celle d'une legende. */
.vs-points li > span:only-child {
  margin-top: 0;
  font-size: var(--dop-fs-body);
}

.vs-col-title {
  margin-bottom: 8px;
  font-size: clamp(19px, 2vw, 24px);
}

/* Les encadres "Best for ..." gardent des h3 pour la hierarchie, avec le
   rendu du <b> des listes filetees. */
.pg-list h3 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: var(--dop-tracking-tight);
}

/* En grille, le dernier element d'une colonne n'est pas :last-child: le
   filet du bas passe donc sur chaque ligne, et le haut sur le conteneur. */
.vs-usecases {
  margin-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--dop-rule);
}

.vs-usecases li {
  border-top: 0;
  border-bottom: 1px solid var(--dop-rule);
}

/* ---------- Tableau ---------- */

/* Trois colonnes de phrases: en dessous de cette largeur le tableau
   defile dans son propre conteneur, jamais la page. */
.pg-table { min-width: 620px; }

/* ---------- Questions ---------- */

/* Le composant ne pose qu'un filet sous chaque question: on ferme la
   liste par le haut. */
.pg-faq details:first-child { border-top: 1px solid var(--dop-rule); }

/* ---------- Liens associes ---------- */

/* On conserve la formule d'appel d'origine sous la description. */
.vs-cue {
  color: var(--dop-primary);
  font-family: var(--dop-font-display);
  font-weight: 800;
  font-size: var(--dop-fs-sm);
}

@media (max-width: 920px) {
  .vs-short { margin-top: 12px; }
}

/* Sommaire tactile: 44px de cible par lien. */
@media (max-width: 920px) {
  .vs-toc .wrap { gap: 0 24px; padding-top: 8px; padding-bottom: 8px; }
  .vs-toc a { display: inline-block; padding: 12px 0; }
}