/* ============================================================
   Revalta by Altus Conseil — design-system/sections/revalta-section-fees.css
   ------------------------------------------------------------
   « Frais » — identité (étude 9, portée le 28/09/2026). À gauche,
   des chiffres-clés en or sur cartes papier ; à droite, la grille
   de frais en tableau fileté. Bande blanche par défaut.

   Class names — convention §00 (préfixe .revalta-section-fees) :
     .revalta-section-fees                          (<section>)
       .revalta-section-fees-content
         .revalta-section-fees-header               (eyebrow · -title · -lede)
         .revalta-section-fees-grid
           .revalta-section-fees-numbers
             .revalta-section-fees-number           (b + span)
           table.revalta-section-fees-table         (caption · tbody > tr > th[scope=row] + td (> small))

   Bandes : data-revalta-band="white|paper|sky" (blanc par défaut) ;
   .revalta-section-inverse pour la marine.
   Requiert : colors_and_type.css.
   ============================================================ */

.revalta-section-fees {
  position: relative;
  background: var(--revalta-light);
  color: var(--revalta-fg1);
  font-family: var(--revalta-font);
  font-weight: var(--revalta-w-light);
  isolation: isolate;
  padding: var(--revalta-web-pad-section) var(--revalta-web-pad-x);
}
.revalta-section-fees-content {
  position: relative;
  z-index: 2;
  max-width: var(--revalta-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--revalta-web-gap-block);
}

/* ─── En-tête ─────────────────────────────────────────────── */
.revalta-section-fees-header { display: grid; gap: 20px; max-width: min(52vw, 760px); }
.revalta-section-fees-eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: var(--revalta-w-medium);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--revalta-accent);
}
.revalta-section-fees-title {
  margin: 0;
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: var(--revalta-w-title);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--revalta-fg1);
  text-wrap: balance;
}
.revalta-section-fees-lede {
  margin: 0;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--revalta-fg2);
  max-width: 60ch;
  text-wrap: pretty;
}

/* ─── Grille : chiffres | tableau ─────────────────────────── */
.revalta-section-fees-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

/* Chiffres-clés — cartes papier, valeur en or. */
.revalta-section-fees-numbers { display: grid; gap: 10px; }
.revalta-section-fees-number {
  display: grid;
  gap: 8px;
  padding: 22px 26px;
  background: var(--revalta-bg);
  border-radius: var(--revalta-r-card);
}
[data-revalta-band="paper"] .revalta-section-fees-number,
[data-revalta-band="sky"] .revalta-section-fees-number { background: var(--revalta-light); }
.revalta-section-fees-number b {
  font-size: clamp(30px, 2.8vw, 40px);
  font-weight: var(--revalta-w-title);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--revalta-gold);
}
.revalta-section-fees-number span { font-size: 15px; line-height: 1.45; color: var(--revalta-fg2); text-wrap: pretty; }

/* Tableau — lignes filetées, libellé muet à gauche, valeur tabulaire à droite. */
.revalta-section-fees-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
  line-height: 1.5;
}
.revalta-section-fees-table caption {
  text-align: left;
  padding: 0 0 14px;
  font-size: 12px;
  font-weight: var(--revalta-w-medium);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--revalta-fg2);
}
.revalta-section-fees-table th,
.revalta-section-fees-table td {
  padding: 14px 0;
  border-top: 1px solid var(--revalta-sep);
  vertical-align: top;
  text-align: left;
}
.revalta-section-fees-table tr:last-child th,
.revalta-section-fees-table tr:last-child td { border-bottom: 1px solid var(--revalta-sep); }
.revalta-section-fees-table th { width: 40%; padding-right: 24px; font-weight: var(--revalta-w-light); color: var(--revalta-fg2); }
.revalta-section-fees-table td { font-weight: var(--revalta-w-medium); font-variant-numeric: tabular-nums; }
.revalta-section-fees-table td small { display: block; margin-top: 4px; font-size: 13px; font-weight: var(--revalta-w-light); color: var(--revalta-fg2); }

/* ─── Variante inverse — marine ───────────────────────────── */
.revalta-section-fees.revalta-section-inverse { background: var(--revalta-bg-inverse); color: var(--revalta-fg1-inverse); }
.revalta-section-fees.revalta-section-inverse .revalta-section-fees-title { color: var(--revalta-fg1-inverse); }
.revalta-section-fees.revalta-section-inverse .revalta-section-fees-lede,
.revalta-section-fees.revalta-section-inverse .revalta-section-fees-table th,
.revalta-section-fees.revalta-section-inverse .revalta-section-fees-table caption,
.revalta-section-fees.revalta-section-inverse .revalta-section-fees-table td small { color: var(--revalta-fg2-inverse); }
.revalta-section-fees.revalta-section-inverse .revalta-section-fees-number { background: rgba(245, 243, 238, 0.06); }
.revalta-section-fees.revalta-section-inverse .revalta-section-fees-number b { color: var(--revalta-gold-inverse); }
.revalta-section-fees.revalta-section-inverse .revalta-section-fees-number span { color: var(--revalta-fg2-inverse); }

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .revalta-section-fees-header { max-width: none; }
  .revalta-section-fees-grid { grid-template-columns: minmax(0, 1fr); }
  .revalta-section-fees-table th { width: auto; }
}