/*
 * Composants réutilisables — construits exclusivement à partir de
 * tokens.css. Aucune valeur brute ici : toujours var(--...).
 */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  /* Garde-fou responsive : sans ça, un mot long dans un titre (ex.
     "accompagnement") ne casse jamais et fait déborder la page
     horizontalement sur mobile — repéré lors de l'audit responsive du
     2026-09-18, corrige un bug déjà présent avant cette session. */
  overflow-wrap: break-word;
}

/* Titres */

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-family-heading);
  line-height: var(--line-height-heading);
  color: var(--color-heading);
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: 700;
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: 700;
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: 600;
}

h4 {
  font-size: var(--font-size-h4);
  font-weight: 700;
}

/* Styles visuels h1-h4 découplés du tag Hn — pour piloter le rendu visuel
   indépendamment du niveau de titre SEO (ou de l'absence de titre), sans
   changer ce rendu (validé par Sébastien, home 2026-09-14). */
.heading-style-h1 {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-family-heading);
  line-height: var(--line-height-heading);
  color: var(--color-heading);
  font-size: var(--font-size-h1);
  font-weight: 700;
}

.heading-style-h2 {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-family-heading);
  line-height: var(--line-height-heading);
  color: var(--color-heading);
  font-size: var(--font-size-h2);
  font-weight: 700;
}

.heading-style-h3 {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-family-heading);
  line-height: var(--line-height-heading);
  color: var(--color-heading);
  font-size: var(--font-size-h3);
  font-weight: 600;
}

.heading-style-h4 {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-family-heading);
  line-height: var(--line-height-heading);
  color: var(--color-heading);
  font-size: var(--font-size-h4);
  font-weight: 700;
}

p {
  margin: 0 0 var(--space-sm);
  color: var(--color-text);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-tertiary {
  color: var(--color-text-tertiary);
}

/* .rating-badge — pastille "★★★★★ 4,9/5 par nos clients" (hero), unifie le
   texte brut de la home et l'image Google de /page-conformite/, validé
   Sébastien */
.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  padding: var(--space-xs) var(--space-md);
  color: var(--color-text-secondary);
}

.rating-badge__stars {
  color: var(--color-accent);
  letter-spacing: 1px;
}

/* Rendu cliquable (voir docs/missing-components.md) : hover gris clair léger,
   réutilise --color-background-alt déjà validé. */
.rating-badge {
  transition: background-color 0.2s ease;
}

.rating-badge:hover {
  background: var(--color-background-alt);
}

/* Liens — par défaut identiques au texte environnant (choix de design
   existant, validé). --color-link est STRICTEMENT réservé au contenu
   d'article : n'appliquer .prose qu'au wrapper du corps d'article
   (étape 1b), jamais sur une page marketing (home/service/offres). */

a {
  color: inherit;
  text-decoration: none;
}

.prose a {
  color: var(--color-link);
  text-decoration: underline;
}

/* Boutons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border: none;
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: var(--font-size-body);
  text-decoration: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-radius: var(--radius-sm);
  padding: var(--padding-btn-compact);
  transition: background-color 0.4s ease, transform 0.2s ease;
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

.btn-primary:hover span {
  transform: translateX(3px);
}

.btn-primary--large {
  border-radius: var(--radius-md);
  padding: var(--padding-btn-large);
}

.btn-secondary {
  background: var(--color-secondary-bg);
  color: var(--color-secondary-text);
  border-radius: var(--radius-sm);
  /* Horizontal élargi (ronde 5) pour laisser respirer le texte des pilules
     de filtre (hero) — vertical inchangé. */
  padding: var(--padding-btn-compact) var(--space-md);
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.btn-secondary:hover {
  background: var(--color-secondary-bg-hover);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--color-heading);
  padding: var(--padding-btn-compact) 0;
}

.btn-ghost:hover {
  text-decoration: underline;
}

/* .btn-info — CTA fond bleu clair (ex: "En savoir plus sur le Dossier
   Fiscal"). Ne réutilise que des tokens déjà validés, aucune nouvelle
   couleur : --color-background-info + --color-heading. */
.btn-info {
  background: var(--color-background-info);
  color: var(--color-heading);
  border-radius: var(--radius-sm);
  padding: var(--padding-btn-compact) var(--space-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-info:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.btn-info:hover span {
  transform: translateX(3px);
}

/* Cards
   Quatre familles de cards mesurées séparément (voir docs/da-exploration.md,
   section "Cards — quatre blocs de DA") + .card générique en repli pour le
   contenu qui ne correspond à aucune des quatre. */

/* .card — générique/repli, encadrés de contenu d'article (key takeaways,
   exemple chiffré, étapes, tableau comparatif) */
.card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-card);
}

/* .card-compare — comparatif risque/bénéfice (FIFO vs DeclarAid,
   /page-conformite/), validé Sébastien */
.card-compare {
  border-radius: var(--radius-lg);
  padding: var(--space-card);
  text-align: center;
}

.card-compare--bad {
  background: var(--color-error-bg);
}

.card-compare--good {
  background: var(--color-success-bg);
}

.card-compare--bad .icon-outline {
  color: var(--color-error-text);
}

.card-compare--good .icon-outline {
  color: var(--color-success-text);
}

/* .card-pricing — /nos-offres/. Affinée après premier rendu, validée par
   Sébastien : titre agrandi, période/description resserrées et hiérarchisées,
   séparateur avant la checklist, hauteur de card et bas de bouton alignés
   entre les 4 offres (voir .card-pricing__description et .card-pricing__cta
   ci-dessous). */
.card-pricing {
  display: flex;
  flex-direction: column;
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pricing);
  box-shadow: none;
  padding: var(--space-lg);
  text-align: left;
  position: relative;
}

/* .card-pricing--featured — offre mise en avant (Sérénité) : fond blanc pur
   (vs. --color-background-alt des 3 autres cards) + ombre, pour ressortir
   du lot. Demandé explicitement par Sébastien. */
.card-pricing--featured {
  background: var(--color-background);
  box-shadow: var(--shadow-card-marketing);
}

.card-pricing__price {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  font-weight: 500;
  color: var(--color-heading);
  margin: var(--space-sm) 0 0;
}

.card-pricing__title {
  font-size: 24px;
}

.card-pricing__period {
  font-size: 13px;
  letter-spacing: -0.2px;
  color: var(--color-text-secondary);
}

.card-pricing__description {
  font-size: 12px;
  line-height: 1.25;
  color: var(--color-text-tertiary);
  /* Réserve une hauteur égale entre les 4 cards (la description la plus
     longue, Sérénité, fait ~5 lignes) pour que le séparateur et la
     checklist démarrent à la même hauteur sur les 4 offres. */
  min-height: 6.25em;
}

.card-pricing__separator {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-sm) 0;
}

.card-pricing__cta {
  margin-top: auto;
}

/* Checklist des fonctionnalités par offre : réutilise .split-section__checklist
   (layout) avec une coche verte (incluse) / une croix atténuée (non incluse),
   scoping sous .card-pricing pour ne pas affecter les autres usages de
   .split-section__checklist (page-conformite, home) qui n'ont pas cette
   distinction inclus/exclu. */
.card-pricing .split-section__checklist li svg {
  color: var(--color-success-text);
}

.card-pricing .split-section__checklist li.text-tertiary {
  opacity: 0.55;
}

.card-pricing .split-section__checklist li.text-tertiary svg {
  color: var(--color-text-tertiary);
}

/* .badge — pilule (ex: badge en haut des cards pricing). Non cliquable par
   défaut (span) ; utiliser <a class="badge"> pour la variante cliquable
   utilisée sur les cards des articles de blog. */
.badge {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-radius: var(--radius-pill);
  padding: var(--padding-badge);
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: default;
}

/* .card-pricing .badge — les libellés combinés (ex: "Multi-investissement +
   Dossier Fiscal") sont plus longs que les tags de blog qui utilisent aussi
   .badge (mot unique) : on autorise le retour à la ligne et on centre le
   texte pour rester dans la largeur de la card, sans toucher aux autres
   usages de .badge (nowrap conservé partout ailleurs). */
.card-pricing .badge {
  display: block;
  width: fit-content;
  max-width: 100%;
  white-space: normal;
  line-height: 1.3;
  text-align: center;
}

a.badge {
  cursor: pointer;
}

/* .badge-outline — pilule à fond clair + bordure/texte colorés (hero:
   "Bourse : calculs PMP" / "Crypto : 150-VH du CGI"). Couleurs validées
   ronde 3, distinctes de --color-background-info. */
.badge-outline {
  display: inline-block;
  border-radius: var(--radius-pill);
  padding: var(--padding-badge);
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.badge-outline--success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success-text);
}

.badge-outline--info {
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border-color: var(--color-info-text);
}

/* .badge-step — cercle numéroté (1/2/3), distinct de .badge (pilule) */
.badge-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-badge-step);
  height: var(--size-badge-step);
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-weight: 700;
  font-size: var(--font-size-body);
}

/* .icon-badge — cercle plein + icône ligne blanche centrée (SVG en enfant).
   Deux variantes de fond : noire par défaut, jaune (--icon-badge--accent). */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-icon-badge);
  height: var(--size-icon-badge);
  margin-bottom: var(--space-md);
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.icon-badge svg {
  width: 28px;
  height: 28px;
}

.icon-badge--accent {
  background: var(--color-accent);
}

/* .card-step — étapes numérotées en carte (ex: "Dossier Fiscal : le bouclier
   anti-contrôle"), même mécanique hover que .feature-columns--tech
   (translateY + --shadow-faq, déjà validés), scopée pour ne pas affecter
   les 65+ autres usages de .card sur le site. Validé par Elena le
   2026-09-17. */
.card-step {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-faq);
}

/* .card-marketing — cards marketing classiques (home/service/offres, hors
   FAQ et pricing — ex: encadré liste de courtiers) */
.card-marketing {
  background: var(--color-background);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-marketing);
  padding: var(--padding-card-marketing);
}

/* Encarts "tech" avec hover (voir docs/missing-components.md, validé par
   Sébastien le 2026-09-16) — scopé à .feature-columns--tech pour ne pas
   affecter les autres pages qui réutilisent .feature-columns__item.card
   (home, /declaration-impots-trading/...). Réutilise les mêmes tokens que
   le hover déjà validé sur l'encart "125 courtiers" (--shadow-faq). */
.feature-columns--tech .card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-columns--tech .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-faq);
}

/* Ombre plus marquée sur "C'est quoi DeclarAid ?" (home page), même
   traitement que les encarts du hero /declaration-impots-bourse/ — scopé à
   .feature-columns--elevated pour ne pas changer .card ailleurs. */
.feature-columns--elevated .card {
  box-shadow: var(--shadow-card-marketing);
}

/* .card-blog — card de la grille "Derniers articles" (/articles-blog/).
   Fond gris (au lieu du blanc+bordure de .card générique) + ombre pour
   ressortir sur le fond blanc de la page, demandé explicitement par
   Sébastien. Ne réutilise que des tokens déjà validés : pas de nouvelle
   couleur ni de nouvelle ombre. */
.card-blog {
  background: var(--color-background-alt);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-marketing);
  padding: var(--space-card);
}

.card-blog__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.card-blog h4 {
  margin: 0 0 var(--space-sm);
}

.card-blog p {
  margin: 0;
  font-size: 13px;
}

/* .card-toc — sommaire d'article de blog */
.card-toc {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-toc);
  box-shadow: var(--shadow-toc);
  padding: var(--space-card);
}

/* .toc-link — lien du sommaire d'article (dans .card-toc). Surlignage de
   la section en cours de lecture ajouté suite à demande explicite de
   Sébastien (scroll-spy, voir docs/missing-components.md et
   src/js/toc-scrollspy.js) — réutilise uniquement des tokens existants. */
.toc-link {
  display: block;
  padding: var(--space-xs) 0 var(--space-xs) var(--space-xs);
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-secondary);
  border-left: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

li + li > .toc-link {
  margin-top: var(--space-2xs);
}

.toc-link.is-active {
  color: var(--color-heading);
  border-left-color: var(--color-accent);
  font-weight: 700;
}

/* .card-faq — FAQ, présente sur les pages marketing et en fin d'article de
   blog. Padding non mesuré précisément par le script d'extraction (porté
   par un élément interne non capturé) — valeur approximative. */
.card-faq {
  background: var(--color-background);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-faq);
  padding: var(--space-md);
}

/* .card-quote — bloc citation avec avatar (fondateur/expert). Deux
   variantes : blanche avec ombre (défaut) et fond bleu clair (--info,
   réutilise --color-background-info déjà validé). */
.card-quote {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--color-background);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-marketing);
  padding: var(--space-card);
  /* Texte toujours aligné à gauche, y compris dans un parent centré
     (ex: .content-section) — validé ronde 5. */
  text-align: left;
}

.card-quote--info {
  background: var(--color-background-info);
  box-shadow: none;
}

/* .card-quote--info-strong — variante bleu un peu plus soutenu, scopée à un
   module précis (voir docs/missing-components.md, validé par Sébastien le
   2026-09-17) pour ne pas changer .btn-info ni les autres .card-quote--info
   qui partagent --color-background-info. */
.card-quote--info-strong {
  background: #e8f2ff;
}

.card-quote__avatar {
  flex-shrink: 0;
  width: var(--size-avatar-sm);
  height: var(--size-avatar-sm);
  border-radius: 50%;
  object-fit: cover;
}

/* .card-testimonial — avis client (nom/rôle + titre + citation + étoiles,
   dans cet ordre — pas d'avatar dans le contenu réel du site). Prévue pour
   être utilisée dans un carrousel .testimonial-marquee (voir plus bas). */
.card-testimonial {
  flex: 0 0 320px;
  background: var(--color-background);
  border: none;
  border-radius: var(--radius-md);
  /* Pas d'ombre (ronde 5) : le carrousel doit se fondre dans le fond de la
     page, sans démarcation visuelle entre les cards et la section. */
  box-shadow: none;
  padding: var(--space-card);
}

.card-testimonial__author {
  margin: 0 0 var(--space-sm);
}

.card-testimonial__title {
  margin: 0 0 var(--space-xs);
}

.card-testimonial__quote {
  margin: 0 0 var(--space-sm);
}

.card-testimonial__stars {
  color: var(--color-accent);
  letter-spacing: 2px;
  margin: 0;
}

/* .testimonial-marquee — carrousel à défilement continu (2 rangées, sens
   opposés) avec fondu sur les bords. Le contenu de .testimonial-track doit
   être dupliqué une fois dans le HTML (2 jeux de cards identiques à la
   suite) pour boucler sans coupure — l'animation va de 0 à -50%. */
.testimonial-marquee {
  overflow: hidden;
  min-width: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.testimonial-track {
  display: flex;
  align-items: center;
  width: max-content;
  min-width: 0;
  gap: var(--space-md);
  animation: marquee-left var(--duration-marquee) linear infinite;
}

@keyframes marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-track {
    animation: none;
  }
}

/* .logo-marquee-track — variante logos (hero /declaration-impot-crowdfunding/,
   hero /declaration-impot-crypto/, section "Comment ça marche ?"
   /declaration-impot-crypto/), réutilise .testimonial-marquee/.testimonial-track
   pour le défilement continu, sans le cadre .card : juste les logos, hauteur
   uniforme + espace un peu plus généreux qu'entre les cards témoignages. */
.logo-marquee-track {
  gap: var(--space-lg);
}

.logo-marquee-track img {
  height: 40px;
  width: auto;
  flex-shrink: 0;
}

/* .tag-cycle — mot/expression qui alterne dans une liste (ex: plateformes
   compatibles sous un titre de catégorie, hero /declaration-impots-bourse/).
   Le JS (js/tag-cycle.js) swap le texte et bascule cette classe pour le
   fondu ; en CSS seul, le mot reste affiché sans alterner (dégradation
   propre, pas de contenu qui disparaît si le JS ne charge pas). */
.tag-cycle {
  display: inline-block;
  color: var(--color-accent);
  font-weight: 700;
  transition: opacity 0.25s ease;
}

.tag-cycle--fade {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .tag-cycle {
    transition: none;
  }
}

/* Sections */

.section {
  padding: var(--space-3xl) 0;
  background: var(--color-background);
}

.section--alt {
  background: var(--color-background-alt);
}

.section--muted {
  background: var(--color-surface-muted);
}

.section--info {
  background: var(--color-background-info);
}

/* .section--dark — "Sécurité et Confidentialité". Couleur validée ronde 3. */
.section--dark {
  background: var(--color-background-dark);
  color: var(--color-text-on-dark);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--color-text-on-dark);
}

.section--dark p {
  color: rgba(255, 255, 255, 0.7);
}

/* .table-search — champ de recherche au-dessus de .broker-table (filtre par
   nom de courtier, voir js/broker-search.js). Validé explicitement par
   Sébastien pour /page-courtiers/ (voir docs/missing-components.md). */
.table-search {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto var(--space-lg);
  padding: var(--padding-btn-compact);
  font: inherit;
  font-size: var(--font-size-body);
  color: var(--color-text);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.2s ease;
}

.table-search:focus {
  border-color: var(--color-tag-cto-bg);
}

/* Icône loupe dans la barre de recherche (voir docs/missing-components.md,
   validé par Sébastien le 2026-09-16) — réutilise --space-sm/md/lg et
   --color-text-tertiary déjà validés, même style d'icône ligne (stroke-width
   2) que le reste du site. */
.table-search-wrap {
  position: relative;
  max-width: 400px;
  margin: 0 auto var(--space-lg);
}

.table-search-wrap .table-search {
  margin: 0;
  padding-left: calc(var(--space-md) + 20px);
}

.table-search__icon {
  position: absolute;
  left: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-tertiary);
  pointer-events: none;
}

.table-search__no-results {
  display: none;
  text-align: center;
  padding: var(--space-lg);
  color: var(--color-text-tertiary);
}

/* .broker-table — tableau des courtiers (/page-courtiers/). En-tête gris,
   lignes zébrées, colonnes Pays/Import centrées — repris du widget
   d'origine, validé explicitement par Sébastien (voir
   docs/missing-components.md). */
.broker-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.broker-table th,
.broker-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.broker-table thead tr {
  background: var(--color-secondary-bg);
  font-weight: 600;
  color: var(--color-heading);
}

.broker-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-secondary-bg);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.broker-table th:nth-child(2),
.broker-table td:nth-child(2),
.broker-table th:nth-child(3),
.broker-table td:nth-child(3) {
  text-align: center;
}

.broker-table tbody tr:nth-child(even) {
  background: var(--color-background-alt);
}

.broker-table tbody tr[hidden] {
  display: none;
}

/* Hover ergonomique (ronde 6, demande explicite de Sébastien) — réutilise
   --color-background-alt-dark, déjà validé, pour rester au-dessus du zébrage. */
.broker-table tbody tr {
  transition: background-color 0.15s ease;
}

.broker-table tbody tr:hover {
  background: var(--color-background-alt-dark);
}

/* Mobile (<768px, breakpoint canonique du site) : le tableau à 4 colonnes ne
   tient pas à l'écran — au lieu du scroll horizontal (pénible sur mobile),
   chaque ligne devient une mini-carte empilée. Le libellé de chaque colonne
   (data-label, posé sur chaque <td> dans le HTML) réapparaît via ::before à
   la place de l'en-tête, masqué sur ce format. */
@media (max-width: 767px) {
  .broker-table thead {
    display: none;
  }

  .broker-table,
  .broker-table tbody,
  .broker-table tr,
  .broker-table td {
    display: block;
    width: 100%;
  }

  .broker-table tr {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border);
  }

  .broker-table tbody tr:nth-child(even) {
    background: var(--color-background-alt);
  }

  .broker-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-2xs) 0;
    border-bottom: none;
    text-align: right;
  }

  .broker-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-tertiary);
    text-align: left;
  }

  .broker-table td:first-child {
    font-weight: 700;
    color: var(--color-heading);
    padding-top: 0;
  }

  .broker-table td:first-child::before {
    display: none;
  }
}

/* .tag — pilule de catégorie dans .broker-table (une ou plusieurs par
   ligne). Distinct de .badge (réservé aux cards pricing) : 5 couleurs
   propres à cette colonne, non réutilisables ailleurs sans revalidation. */
.tag {
  display: inline-block;
  padding: 2px 10px;
  margin: 2px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-tag-text);
}

.tag--cto { background: var(--color-tag-cto-bg); }
.tag--pea { background: var(--color-tag-pea-bg); }
.tag--crypto { background: var(--color-tag-crypto-bg); }
.tag--crowdfunding { background: var(--color-tag-crowdfunding-bg); }
.tag--compte { background: var(--color-tag-compte-bg); }