/* Panneaux, cards, onglets, badges, messages. */

.panel,
.auth-card {
  padding:       var(--pad-card);
  background:    var(--surface);
  border:        1px solid var(--line);
  border-radius: var(--r-card);
}

.panel {
  margin-bottom: 1.5rem;
}

.auth-card {
  width:         100%;
  max-width:     420px;
  padding:       28px;
  border-radius: var(--r-panel);
}

/* --- Cards de bien -------------------------------------------------------- */

.card-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap:                   16px;
}

.card {
  padding:       var(--pad-card);
  background:    var(--surface);
  border:        1px solid var(--line);
  border-radius: var(--r-card);
}

.card-title {
  font-family:    var(--font-title);
  font-size:      var(--t-h3);
  font-weight:    600;
  letter-spacing: -0.01em;
  color:          var(--ink);
}

.card-title:hover {
  color: var(--teal-dark);
}

.card-sub {
  margin:    4px 0 0;
  color:     var(--muted);
  font-size: var(--t-sub);
}

.card-figures,
.figures {
  display:   flex;
  flex-wrap: wrap;
  gap:       16px 32px;
  margin:    16px 0 0;
}

.card-figures dt,
.figures dt {
  margin:         0;
  font-family:    var(--font-mono);
  font-size:      var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--muted);
}

.card-figures dd,
.figures dd {
  margin:               4px 0 0;
  font-family:          var(--font-mono);
  font-size:            var(--t-lead);
  font-weight:          500;
  font-variant-numeric: tabular-nums;
}

.figures {
  margin-top: 0;
}

/* Une précision sous un chiffre — « 2 loués, 1 vacant » — qui ne doit pas se
   lire comme un second chiffre. */
.figures-note {
  display:     block;
  margin-top:  2px;
  color:       var(--muted);
  font-size:   var(--t-small);
  font-weight: 400;
}

/* --- Onglets -------------------------------------------------------------- */

/* La barre d'onglets porte l'action de l'onglet à son extrémité droite. Le
   filet et la marge basse sont posés sur elle, pas sur la liste d'onglets, pour
   que le bouton s'aligne sur le même trait. */
.tab-bar {
  display:       flex;
  align-items:   flex-end;
  gap:           1rem;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.tab-bar > .button {
  flex:          none;
  margin-bottom: 8px;
}

/* Le design abandonne les onglets « dossier » pour un simple soulignement. */
.tabs {
  display:       flex;
  flex:          1;
  gap:           4px;
  padding:       0 2px;
  overflow-x:    auto;
}

.tab {
  padding:       11px 14px;
  border-bottom: 2px solid transparent;
  color:         var(--muted);
  font-size:     var(--t-body);
  white-space:   nowrap;
}

.tab:hover {
  color: var(--ink);
}

.tab-active {
  border-bottom-color: var(--teal);
  color:               var(--ink);
  font-weight:         500;
}

/* --- Badges --------------------------------------------------------------- */

.badge {
  display:        inline-block;
  padding:        3px 8px;
  border-radius:  var(--r-badge);
  background:     var(--surface-alt);
  color:          var(--muted);
  font-family:    var(--font-mono);
  font-size:      var(--t-label);
  font-weight:    500;
  letter-spacing: 0.02em;
  white-space:    nowrap;
}

.badge-pos {
  background: var(--pos-bg-2);
  color:      var(--pos-strong);
}

.badge-neg {
  background: var(--neg-bg);
  color:      var(--neg-strong);
}

.badge-warn {
  background: var(--warn-bg);
  color:      var(--warn);
}

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

/* --- Barre de progression -------------------------------------------------- */

.progress {
  height:        6px;
  border-radius: 3px;
  background:    var(--line-soft);
  overflow:      hidden;
}

.progress-fill {
  height:        100%;
  border-radius: 3px;
  background:    var(--teal);
}

.progress-fill-neg {
  background: var(--neg);
}

/* --- Messages flash -------------------------------------------------------- */

.flash {
  margin:        0 0 1rem;
  padding:       11px 14px;
  border:        1px solid transparent;
  border-radius: var(--r-ctl);
  font-size:     var(--t-sub);
}

.flash-success {
  background:   var(--pos-bg);
  border-color: var(--pos-bg-2);
  color:        var(--pos-strong);
}

.flash-error {
  background:   var(--neg-bg);
  border-color: var(--neg-bg);
  color:        var(--neg-strong);
}

/* --- Bandeau d'état --------------------------------------------------------- */

/* Ce que le plan interdit, dit en haut de l'écran où on s'apprêtait à le faire.
   Ambre et non rouge : rien n'est cassé, et rien n'est perdu — c'est une limite,
   pas une erreur. */
.banner {
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin:        0 0 1rem;
  padding:       11px 14px;
  border:        1px solid var(--warn-accent);
  border-radius: var(--r-ctl);
  background:    var(--warn-bg);
  color:         var(--warn);
  font-size:     var(--t-sub);
}

.banner svg {
  flex-shrink: 0;
}

/* L'essai en cours : une information, pas une limite — le ton neutre de la
   marque, jusqu'aux trois derniers jours. */
.banner-info {
  border-color: var(--line);
  background:   var(--surface-soft);
  color:        var(--ink-2);
}

/* Les trois derniers jours de l'essai, et les biens qu'il a laissés en lecture
   seule : l'ambre du bandeau de limite, dit explicitement. */
.banner-warn {
  border-color: var(--warn-accent);
  background:   var(--warn-bg);
  color:        var(--warn);
}

/* --- Abonnement et crédits -------------------------------------------------- */

/* Le solde, en gros, à droite du titre du compteur — la même disposition que
   l'en-tête d'un prêt. */
.credit-total {
  margin:               0;
  color:                var(--ink);
  font-family:          var(--font-mono);
  font-size:            var(--t-h2);
  font-variant-numeric: tabular-nums;
}

.credit-lines {
  margin:     12px 0 0;
  padding:    0;
  list-style: none;
}

/* Trois colonnes : d'où vient le lot, jusqu'à quand il vaut, combien il reste.
   La date est au milieu parce que c'est elle qui justifie l'ordre des lignes. */
.credit-lines .figure-row {
  display:               grid;
  grid-template-columns: 1fr auto 70px;
  gap:                   12px;
}

.credit-line-meta {
  color:     var(--muted);
  font-size: var(--t-small);
}

.credit-line-amount {
  color:                var(--ink);
  font-family:          var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align:           right;
}

.plan-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap:                   16px;
  margin-top:            14px;
}

.plan-card {
  padding:       var(--pad-card);
  border:        1px solid var(--line);
  border-radius: var(--r-card);
  background:    var(--surface-soft);
}

/* Le palier en cours se distingue par son trait, pas par un fond : trois cards
   de couleurs différentes se liraient comme trois offres promotionnelles. */
.plan-card-current {
  border-color: var(--teal);
  background:   var(--surface);
}

.plan-price {
  margin:      12px 0 0;
  color:       var(--ink);
  font-family: var(--font-mono);
  font-size:   var(--t-h3);
}

.plan-price small {
  color:       var(--muted);
  font-family: var(--font-body);
  font-size:   var(--t-small);
}

.plan-price-year {
  margin:    2px 0 0;
  color:     var(--muted);
  font-size: var(--t-small);
}

.plan-features {
  margin:     14px 0 0;
  padding:    0;
  list-style: none;
  font-size:  var(--t-sub);
}

.plan-features li {
  padding-top: 7px;
  color:       var(--ink-2);
}

/* Les deux engagements côte à côte, de même poids : l'annuel est mis en avant
   par ce qu'il donne — les scans offerts, déjà listés au-dessus — et pas par un
   bouton deux fois plus gros. */
.plan-actions {
  display:     flex;
  gap:         8px;
  margin-top:  14px;
  flex-wrap:   wrap;
}

.plan-actions button {
  flex: 1 1 auto;
}

/* La bascule Mensuel / Annuel (14-homepage.md §4.7), **en CSS et rien d'autre**.
 *
 * Deux boutons radio cachés à l'œil et une paire d'étiquettes : le navigateur
 * fait le reste, y compris les flèches du clavier et la restauration de l'état
 * au retour arrière. Aucun JavaScript, donc elle marche sur le site public, qui
 * ne charge pas Stimulus (§8.5), et elle marche avant que le moindre script
 * n'ait tourné.
 *
 * Les radios sont des frères de la grille : c'est ce qui rend
 * `#interval-yearly:checked ~ .plan-grid` possible. Les déplacer casserait tout
 * sans rien afficher de faux, alors c'est écrit ici.
 */
.interval-radio {
  position: absolute;
  width:    1px;
  height:   1px;
  margin:   -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.interval-switch {
  display:       inline-flex;
  gap:           2px;
  padding:       3px;
  border:        1px solid var(--line);
  border-radius: var(--r-pill);
  background:    var(--surface-alt);
}

/* Des <label> : la marge basse que forms.css donne à toute étiquette de champ
   est retirée, sans quoi la pastille cochée descend dans la bascule. */
.interval-switch-option {
  margin:        0;
  padding:       6px 14px;
  border-radius: var(--r-pill);
  color:         var(--ink-2);
  font-size:     var(--t-sub);
  cursor:        pointer;
  user-select:   none;
}

/* L'étiquette de la radio cochée porte l'état : c'est le seul endroit où la
   bascule « se souvient » de quoi que ce soit. */
#interval-monthly:checked ~ .interval-switch [for="interval-monthly"],
#interval-yearly:checked ~ .interval-switch [for="interval-yearly"] {
  background: var(--surface);
  color:      var(--ink);
  box-shadow: 0 1px 2px rgb(27 58 87 / 12%);
}

/* La radio est invisible, donc son anneau de focus doit se voir sur
   l'étiquette — sans quoi la bascule devient intraversable au clavier. */
#interval-monthly:focus-visible ~ .interval-switch [for="interval-monthly"],
#interval-yearly:focus-visible ~ .interval-switch [for="interval-yearly"] {
  outline:        2px solid var(--teal-dark);
  outline-offset: 2px;
}

/* Ce que chaque intervalle montre. Les deux volets sont dans le document : sans
   feuille de style, la page affiche les deux prix côte à côte, ce qui reste
   juste. */
#interval-monthly:checked ~ .plan-grid .interval-pane[data-interval="yearly"],
#interval-yearly:checked ~ .plan-grid .interval-pane[data-interval="monthly"] {
  display: none;
}

.interval-switch-note {
  color:     var(--pos);
  font-size: var(--t-small);
}

/* Barré contre le prix mensuel : « 2 mois offerts » se démontre plutôt qu'il
   ne s'annonce. */
.plan-price-year s {
  color: var(--muted-2);
}

/* Ce que dit la carte gratuite quand elle n'est pas à prendre : une carte qui
   perd seulement son bouton ne dit pas pourquoi. */
.plan-note {
  margin:    14px 0 0;
  color:     var(--muted);
  font-size: var(--t-sub);
}

/* Le palier mis en avant (§4.7) : un trait, une ombre, et la pastille
   « Recommandé » — un conseil de l'éditeur. Pas « Le plus choisi » de la
   maquette : c'est une preuve sociale, et il n'y a pas encore un seul abonné
   pour la soutenir (§1.1). */
.plan-card-featured {
  border-color: var(--teal);
  border-width: 1.5px;
  background:   var(--surface);
  box-shadow:   0 18px 40px -28px color-mix(in srgb, var(--navy) 40%, transparent);
}

.pack-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:                   16px;
  margin-top:            14px;
}

.pack-card {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  padding:        var(--pad-card);
  border:         1px solid var(--line);
  border-radius:  var(--r-card);
  background:     var(--surface-soft);
}

.pack-card .plan-price {
  margin: 0;
}

/* Le bouton du portail et sa ligne d'état, au-dessus de la grille : l'espace
   du bas le sépare de la bascule Mensuel / Annuel, qui n'en a pas en haut. */
.billing-portal {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin:      14px 0 22px;
  flex-wrap:   wrap;
}

/* --- Divers ---------------------------------------------------------------- */

.loan-head {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             1rem;
}

.loan-head h2 {
  margin-bottom: 0;
}

.loan-head a {
  color:     var(--muted);
  font-size: var(--t-sub);
}

.loan-head a:hover {
  color: var(--teal-dark);
}

/* --- Tuile d'indicateur ----------------------------------------------------- */

.stat-card {
  padding:       var(--pad-card);
  background:    var(--surface);
  border:        1px solid var(--line);
  border-radius: var(--r-card);
}

.stat-card .eyebrow {
  margin: 0 0 10px;
}

.stat-card-value {
  display:     flex;
  align-items: baseline;
  gap:         5px;
  margin:      0;
}

.stat-card-number {
  font-family:          var(--font-title);
  font-size:            var(--t-figure);
  font-weight:          600;
  line-height:          1;
  letter-spacing:       -0.02em;
  font-variant-numeric: tabular-nums;
}

.stat-card-unit {
  color:       var(--muted);
  font-family: var(--font-mono);
  font-size:   var(--t-lead);
}

.stat-card-hint {
  display:     flex;
  align-items: center;
  gap:         5px;
  margin:      10px 0 0;
  color:       var(--muted);
  font-size:   var(--t-small);
}

.stat-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap:                   16px;
  margin-bottom:         20px;
}

/* --- Ligne libellé / valeur --------------------------------------------------- */

.figure-row {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             16px;
  padding:         11px 0;
  border-bottom:   1px solid var(--line-soft);
}

.figure-row:last-child {
  border-bottom: 0;
}

.figure-row-label {
  color:     var(--muted);
  font-size: var(--t-sub);
}

.figure-row-value {
  font-family:          var(--font-mono);
  font-size:            var(--t-body);
  font-weight:          500;
  font-variant-numeric: tabular-nums;
  text-align:           right;
}

/* --- Blocs du tableau de bord ----------------------------------------------- */

/* Douze colonnes, et une largeur par bloc. C'est ce que « emplacement et
   dimension » veut dire tant que personne ne déplace rien à la souris. */
.dashboard-grid {
  display:               grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap:                   1.5rem;
  margin:                0 0 1.5rem;
}

/* Une ligne de blocs qui se partagent la largeur, quel qu'en soit le nombre :
   ceux qui n'ont rien à dire ne s'affichent pas, et les autres s'élargissent.
   C'est la règle du voisin qui prend la ligne (`09-enhance-dashboards.md` §3)
   généralisée à trois blocs — la page n'a pas à les compter, et elle ne le
   pourrait pas sans les rendre deux fois. */
.dashboard-row {
  display:               grid;
  grid-column:           span 12;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:                   1.5rem;
}

/* Dans une telle ligne, la largeur vient du partage, pas de la prop. */
.dashboard-row > .dashboard-block {
  grid-column: auto;
}

/* Le cadre appartient au bloc, pas à son contenu : écrit ici une fois, aucun
   gabarit de bloc ne dessine le sien. Un bloc ajouté l'a d'office, un bloc
   déplacé l'emporte avec lui (`09-enhance-dashboards.md` §3). */
.dashboard-block {
  position:      relative;
  min-width:     0; /* sans quoi un canvas refuse de rétrécir dans sa colonne */
  overflow:      hidden; /* le tableau masqué d'un graphique, qui ignore sa
                            largeur d'un pixel, élargissait la page au téléphone */
  grid-column:   span 12;
  padding:       var(--pad-card);
  background:    var(--surface);
  border:        1px solid var(--line);
  border-radius: var(--r-card);
}

/* Les tuiles de la synthèse portent leur intitulé en titre de bloc : le cadre
   est celui du bloc, et la tuile perd le sien — sans quoi ce serait un cadre
   dans un cadre. */
.dashboard-block.block-figure {
  container-type: inline-size;
}

.block-figure .stat-card {
  padding:       0;
  background:    none;
  border:        0;
  border-radius: 0;
}

/* Une tuile au tiers de la grille est étroite entre 900 et 1 200 px : le grand
   chiffre suit alors la largeur de son bloc plutôt que d'être coupé, sans
   jamais dépasser sa taille d'origine. */
.block-figure .stat-card-number {
  font-size: min(var(--t-figure), 13cqi);
}

/* Le triangle de variation, dans le pied d'une tuile : sa couleur vient des
   montants (`amount-positive` / `amount-negative`), jamais d'un vert ou d'un
   rouge écrit ici. */
.trend {
  font-size:   0.8em;
  line-height: 1;
}

/* La tendance, sur sa propre ligne sous le résultat cumulé. */
.cash-flow-pace {
  display:    block;
  margin-top: 4px;
}

/* Le filtre de période est enveloppé comme un bloc : le cadre est celui du
   bloc, et le formulaire perd le sien — sans quoi ce serait un cadre dans un
   cadre. Le filtre du grand livre, hors grille, garde le sien. Le bloc garde
   en revanche le fond adouci des barres de filtres : il commande les autres
   blocs, et se distingue d'eux au premier coup d'œil. */
.dashboard-block.dashboard-filters-block {
  background: var(--surface-soft);
}

.dashboard-filters-block .dashboard-filters {
  margin:        0;
  padding:       0;
  background:    none;
  border:        0;
  border-radius: 0;
}

.block-small  { grid-column: span 4; }
.block-medium { grid-column: span 6; }
.block-wide   { grid-column: span 8; }
.block-large  { grid-column: span 12; }

/* Sous 900 px, plus de colonnes : deux graphiques côte à côte n'y tiennent pas.
   Le filtre de période remonte alors au-dessus de Le bien : empilé dessous, il
   tomberait sous un bloc haut d'un écran, loin de tout ce qu'il commande. */
@media (max-width: 900px) {
  .block-small,
  .block-medium,
  .block-wide {
    grid-column: span 12;
  }

  .dashboard-filters-block {
    order: -1;
  }
}

.block-title {
  margin:      0 0 0.9rem;
  font-family: var(--font-title);
  font-size:   var(--t-lead);
  font-weight: 600;
}

/* La portée d'un bloc que la période ne commande pas, dite sous son titre. */
.block-scope {
  margin:      -0.6rem 0 0.9rem;
  color:       var(--muted);
  font-family: var(--font-mono);
  font-size:   var(--t-label);
}

.block-note {
  margin:    0.9rem 0 0;
  color:     var(--muted);
  font-size: var(--t-small);
}

/* --- Graphiques -------------------------------------------------------------- */

.chart {
  margin: 0;
}

/* Chart.js dessine dans le parent : sans hauteur ici, le canvas s'effondre. */
.chart-canvas {
  position: relative;
  height:   320px;
}

/* Un camembert partage sa boîte avec sa légende, qui passe à la ligne dans une
   colonne étroite : sans un peu de hauteur en plus, il ne reste qu'un jeton. */
.chart-pie .chart-canvas {
  height: 380px;
}

.chart figcaption {
  margin:         0.75rem 0 0;
  color:          var(--muted);
  font-family:    var(--font-mono);
  font-size:      var(--t-label);
  letter-spacing: 0.04em;
}

/* --- Période du tableau de bord --------------------------------------------- */

/* Le résumé de la période, sur sa propre ligne en pied de l'encadré du filtre :
   le filtre se suffit à lui-même, et dit ce qu'il a retenu. */
.dashboard-period,
.ledger-period {
  flex-basis:  100%;
  margin:      0;
  color:       var(--muted);
  font-family: var(--font-mono);
  font-size:   var(--t-label);
}

/* --- État vide ------------------------------------------------------------------ */

.empty-message {
  margin: 0;
}

.empty-action {
  margin: 10px 0 0;
}

/* --- Baux ------------------------------------------------------------------ */

/* Même en-tête que celui d'un prêt : le titre dit l'état, le lien ouvre la
   saisie, et les deux tiennent la même ligne. */
.lease-head {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             1rem;
}

.lease-head h2 {
  margin-bottom: 0;
}

.lease-head a {
  color:     var(--muted);
  font-size: var(--t-sub);
}

.lease-head a:hover {
  color: var(--teal-dark);
}

/* Un bail se lit d'un bloc : qui, combien, jusqu'à quand. Le trait à gauche le
   détache de ses voisins dans l'historique sans en faire une carte de plus. */
.lease-card {
  margin:      1rem 0 0;
  padding:     0.9rem 0 0.2rem 1.1rem;
  border-left: 3px solid var(--line-strong);
}

.lease-card header {
  display:     flex;
  align-items: baseline;
  gap:         0.6rem;
}

.lease-card header h4 {
  margin:    0;
  font-size: var(--t-sub);
}

.lease-card .figures {
  margin: 0.7rem 0 0.5rem;
}

.lease-card .lease-dates {
  margin:    0 0 0.6rem;
  font-size: var(--t-small);
}

/* Le passé pèse moins que le présent : l'historique s'efface d'un ton. */
.lease-history,
.lease-upcoming {
  margin-top: 1.8rem;
}

.lease-history .lease-card {
  border-left-color: var(--line);
  color:             var(--muted);
}

/* Le titre d'une card et son état locatif tiennent la même ligne : l'état se lit
   avant les chiffres, parce qu'un bien vacant explique son résultat à lui seul. */
.card-head {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             0.8rem;
}

/* L'action qui ferme un bail, ou le rouvre : elle vit dans l'en-tête de sa
   carte, à côté du crayon, et se lit comme une phrase plutôt qu'une icône. */
.lease-action {
  margin-left: auto;
  color:       var(--muted);
  font-size:   var(--t-small);
}

.lease-action:hover {
  color: var(--teal-dark);
}

/* Ce que le bail propose à ses deux bouts : le dépôt à l'entrée, sa restitution
   à la sortie. Une offre, pas une action déjà faite. */
.lease-offers {
  margin:    0.4rem 0 0.6rem;
  font-size: var(--t-small);
}

/* --- Les blocs d'action du tableau de bord global -------------------------- */

/* Le chiffre qui coiffe « À enregistrer » : c'est lui qu'on vient lire, pas la
   liste qui le détaille. */
.pending-total {
  margin: 0 0 12px;
  color:  var(--muted);
}

.pending-count {
  font-family:          var(--font-title);
  font-size:            var(--t-lead);
  font-weight:          600;
  font-variant-numeric: tabular-nums;
  color:                var(--ink);
}

.pending-clear {
  margin: 0;
  color:  var(--muted);
}

.pending-list,
.watchlist {
  margin:     0;
  padding:    0;
  list-style: none;
}

.pending-list > li,
.watchlist > li {
  padding-top: 10px;
  border-top:  1px solid var(--line-soft);
}

.pending-list > li:first-child,
.watchlist > li:first-child {
  padding-top: 0;
  border-top:  0;
}

.pending-list > li + li,
.watchlist > li + li {
  margin-top: 10px;
}

.pending-property,
.watchlist-property {
  display:     block;
  font-weight: 600;
}

/* Les lignes d'un bien : ce qu'il y a à enregistrer, et où. */
.pending-line {
  display:     block;
  margin-top:  2px;
  font-family: var(--font-mono);
  font-size:   var(--t-label);
}

/* Une règle déclenchée, sous le nom du bien. */
.watchlist-reason {
  display:    block;
  margin-top: 2px;
  color:      var(--muted);
  font-size:  var(--t-small);
}

/* Les prochaines échéances : deux montants et leur net, alignés en pile. */
.due-rows {
  width:                100%;
  font-variant-numeric: tabular-nums;
}

.due-rows th {
  font-weight: 400;
  text-align:  left;
  color:       var(--muted);
}

.due-rows td {
  font-family: var(--font-mono);
  text-align:  right;
}

.due-rows .due-count {
  padding-left: 12px;
  color:        var(--muted);
  font-size:    var(--t-label);
}

.due-rows tfoot th,
.due-rows tfoot td {
  padding-top: 8px;
  border-top:  1px solid var(--line);
  font-weight: 600;
  color:       var(--ink);
}

/* --- Mes portefeuilles, dans le profil ----------------------------------- */

.portfolio-list {
  margin:         0 0 1rem;
  padding:        0;
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            0.6rem;
}

.portfolio-rename {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
}

/* Le champ porte un `margin-bottom` global, posé pour un formulaire empilé :
   sur une ligne il décale le bouton d'un cran. */
.portfolio-rename input[type="text"] {
  flex:          1;
  margin-bottom: 0;
}

/* Le nom et les plans dans un seul formulaire : la grille respire au-dessus
   des actions du formulaire plutôt que de leur être collée. */
.plan-required {
  margin-top: 18px;
}

/* --- L'essai, l'accueil et le récapitulatif de paiement --------------------- */

/* Plus sobre que les cartes de plans : la rubrique « Vous hésitez ? » rattrape
   ceux qui n'osent pas encore, elle ne concurrence pas ce qui est en vente. */
.panel-quiet {
  border-style: dashed;
  background:   var(--surface-soft);
}

.trial-offer p {
  max-width: 62ch;
  color:     var(--ink-2);
}

.trial-offer form {
  margin-top: 14px;
}

/* Le choix mis en avant de l'écran d'accueil (§7.2.3) : un seul bloc porte la
   couleur de la marque, sinon aucun des trois ne se détache. */
.onboarding-highlight {
  border-color: var(--teal);
}

.onboarding-highlight p {
  max-width: 62ch;
  color:     var(--ink-2);
}

.onboarding-highlight form {
  margin-top: 14px;
}

/* L'issue gratuite, obligatoire et discrète : un lien, pas un bouton. */
.onboarding-skip {
  margin:     18px 0 0;
  text-align: center;
  font-size:  var(--t-sub);
}

.checkout-recap {
  max-width: 460px;
}

.checkout-recap form {
  margin-top: 18px;
}

.checkout-hesitate {
  margin-top: 10px;
}

/* Un bouton qui se lit comme un lien : l'action est un POST — elle change
   quelque chose — mais son poids visuel est celui d'une échappatoire. */
.button-link {
  padding:         0;
  border:          0;
  background:      none;
  color:           var(--ink-2);
  font-size:       var(--t-sub);
  text-decoration: underline;
  cursor:          pointer;
}

.button-link:hover {
  color: var(--ink);
}

/* --- Sections repliables ------------------------------------------------------
 *
 * Les biens vacants et les baux terminés, sous l'écran « Locataires » : on vient
 * y lire qui est là, pas qui y était. Un `<details>` natif plutôt qu'un
 * contrôleur, comme le sélecteur de portefeuille et la FAQ — il s'ouvre au
 * clavier et fonctionne avant que le moindre JS n'ait tourné.
 */

.fold {
  margin-bottom: 1.5rem;
  background:    var(--surface);
  border:        1px solid var(--line);
  border-radius: var(--r-card);
}

.fold > summary {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         14px 22px;
  cursor:          pointer;
  font-family:     var(--font-title);
  font-size:       var(--t-h3);
  font-weight:     600;
  letter-spacing:  -0.01em;
  color:           var(--ink);
  list-style:      none;
}

.fold > summary::-webkit-details-marker {
  display: none;
}

/* Le chevron est dessiné plutôt que listé : le marqueur natif ne se met pas
   où il faut, et une flèche en CSS tourne toute seule à l'ouverture. */
.fold > summary::before {
  content:    '';
  width:      7px;
  height:     7px;
  border:     solid var(--muted);
  border-width: 0 1.5px 1.5px 0;
  transform:  rotate(-45deg);
  transition: transform 0.15s ease;
}

.fold[open] > summary::before {
  transform: rotate(45deg);
}

.fold > summary:hover {
  color: var(--teal-dark);
}

.fold-count {
  padding:       1px 8px;
  background:    var(--surface-alt);
  border-radius: var(--r-pill);
  font-family:   var(--font-mono);
  font-size:     var(--t-small);
  font-weight:   500;
  color:         var(--muted);
}

.fold-body {
  padding: 0 22px 18px;
}

@media (prefers-reduced-motion: reduce) {
  .fold > summary::before {
    transition: none;
  }
}

/* Le titre d'une section à l'intérieur d'un panneau : plus discret qu'un h2
   isolé, qui se lirait comme le titre de la page. */
.section-heading {
  margin:         1.6rem 0 0.6rem;
  font-size:      var(--t-h3);
  color:          var(--ink-2);
}

/* Le cadenas d'un bien gelé dans une ligne du grand livre : muet et discret.
   La phrase complète, répétée sur trois cents lignes, serait du bruit — elle
   est dans l'infobulle et, pour les lecteurs d'écran, dans un texte caché. */
.row-lock {
  display:        inline-flex;
  vertical-align: middle;
  margin-left:    6px;
  color:          var(--muted-2);
}

/* « Me prévenir » (19-beta-plan.md §11) : un encart discret en tête du tableau
   de bord, pas une bannière — il ne doit pas faire concurrence aux chiffres. */
.waitlist-panel {
  display:       flex;
  align-items:   center;
  gap:           14px;
  flex-wrap:     wrap;
  margin-bottom: 18px;
  padding:       14px 18px;
  border:        1px dashed var(--line-strong);
  border-radius: var(--r-card);
  background:    var(--surface);
}

.waitlist-icon {
  flex:  none;
  color: var(--teal-dark);
}

.waitlist-text {
  flex:      1 1 260px;
  margin:    0;
  color:     var(--ink-2);
  font-size: var(--t-sub);
}

.waitlist-panel form {
  margin: 0;
}