/**
 * views.css
 * Styles spécifiques à chaque vue (Analyse, Comparateur, Mes Projets).
 * N'utilise que des variables de design-system.css.
 */

/* ============================================================
   VUE ANALYSE
   ============================================================ */

/* Layout deux colonnes : formulaire gauche, résultats droite */
.analyse-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 1200px) {
  .analyse-layout {
    grid-template-columns: 1fr 340px;
  }
}

@media (max-width: 1023px) {
  .analyse-layout {
    grid-template-columns: 1fr;
  }
}

/* Panneau formulaire */
.form-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Section du formulaire */
.form-section {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.form-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  user-select: none;
}

.form-section__number {
  width: 24px;
  height: 24px;
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.form-section__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  flex: 1;
}

/* Badge statut projet dans le header "Le Bien" */
.project-status-badge {
  flex-shrink: 0;
  font-size: 10px;
  opacity: 0.85;
  pointer-events: none;
}

.form-section__chevron {
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.form-section.is-collapsed .form-section__chevron {
  transform: rotate(-90deg);
}

.form-section.is-collapsed .form-section__body { display: none; }

.form-section__body {
  padding: var(--space-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-section__body .input-group--full {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  .form-section__body {
    grid-template-columns: 1fr;
  }
}

/* ---- Localisation France (Code postal / Ville) ---- */
.location-city-select:disabled {
  cursor: not-allowed;
  color: var(--color-text-muted);
  background-color: var(--color-bg);
}

.location-feedback {
  min-height: 1.25rem;
  transition: color var(--transition-fast);
}

.location-feedback--neutral {
  color: var(--color-text-muted);
}

.location-feedback--warning {
  color: var(--color-warning);
}

.location-feedback--success {
  color: var(--color-success);
}

.location-feedback--error {
  color: var(--color-danger);
}

/* ============================================================
   VUE MES INFOS
   ============================================================ */

.profile-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.profile-hero__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.profile-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  min-width: 200px;
}

.profile-status__updated {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-align: right;
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.profile-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.profile-empty-state {
  margin-top: var(--space-6);
}

.profile-field-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.profile-field-hint__action {
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .profile-hero__body {
    flex-direction: column;
  }

  .profile-status {
    align-items: flex-start;
    min-width: 0;
  }

  .profile-status__updated {
    text-align: left;
  }

  .profile-form__actions {
    flex-direction: column-reverse;
  }

  .profile-field-hint {
    align-items: flex-start;
  }
}

/* ---- Toggle Longue durée / Saisonnier ---- */
.location-type-toggle {
  display: flex;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.location-type-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.location-type-btn:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text);
}

.location-type-btn.is-active {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ---- Toggle Mois / Semaines / Jours (saisonnier) ---- */
.seasonal-unit-toggle {
  display: flex;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.seasonal-unit-btn {
  flex: 1;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.seasonal-unit-btn:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text);
}

.seasonal-unit-btn.is-active {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ---- Wrappers champs location — pleine largeur dans la grille ---- */
#loyer-longue-duree-fields {
  grid-column: 1 / -1;
}

/* display:contents → les enfants participent directement à la grille parente */
#loyer-saisonnier-fields {
  display: contents;
}

/* Masquage des champs location — sélecteur composé pour surpasser la spécificité de l'ID */
#loyer-saisonnier-fields.is-hidden,
#loyer-longue-duree-fields.is-hidden { display: none; }

/* Slider row */
.slider-row {
  grid-column: 1 / -1;
}

.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.slider-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  background-color: var(--color-primary-bg);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

/* Boutons d'action du formulaire */
.form-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Panneau résultats (sticky) */
.results-panel {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-height: calc(100vh - var(--header-height) - var(--space-12));
  overflow-y: auto;
  padding-right: var(--space-1);
}

@media (max-width: 1023px) {
  .results-panel {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

/* Wrapper badge scénario — masqué par défaut, affiché via .is-visible */
#results-scenario-badge-wrapper { display: none; }
#results-scenario-badge-wrapper.is-visible { display: block; }

/* Icône inline dans le badge scénario */
.results-scenario-badge__icon { vertical-align: middle; margin-right: 4px; }

/* Badge scénario actif (affiché dans la score-card, fond vert foncé) */
.results-scenario-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  padding: 2px var(--space-3);
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.85);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
}

/* ImmoScore card — layout horizontal compact */
.score-card {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: var(--color-text-inverse);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-md);
}

.score-card__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin-bottom: var(--space-3);
}

/* Ligne 2 : score + barre */
.score-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.score-bar-value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-shrink: 0;
  min-width: 54px;
}

.score-gauge__number {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
  line-height: 1;
}

.score-gauge__max {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.45);
}

.score-bar-track {
  flex: 1;
  height: 7px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  overflow: hidden;
}

.score-bar-fill {
  height: 100%;
  width: var(--fill-width, 0%);
  background-color: var(--score-color, var(--color-accent));
  border-radius: 4px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s ease;
}

/* Ligne 3 : scénario + label */
.score-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 20px;
}

.score-card__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--score-color, var(--color-accent));
}

.score-card__sublabel {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin-top: var(--space-1);
}

.score-card--estimated {
  box-shadow: inset 0 0 0 1px rgba(214, 158, 46, 0.45);
}

.score-card--blocked {
  box-shadow: inset 0 0 0 1px rgba(229, 62, 62, 0.45);
}

/* ============================================================
   BADGE & PANEL OPTIMISATION (dans la score-card)
   ============================================================ */

.opt-badge-container {
  display: none; /* Affiché via .is-visible quand des suggestions existent */
  margin-top: var(--space-3);
  width: 100%;
}

.opt-badge-container.is-visible { display: block; }

/* Bouton badge — pill dore sur fond sombre de la score-card */
.opt-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  background: rgba(5, 150, 105, 0.15);
  border: 1px solid rgba(5, 150, 105, 0.40);
  border-radius: var(--radius-md);
  color: var(--color-accent-light);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  text-align: left;
}

.opt-badge:hover {
  background: rgba(5, 150, 105, 0.25);
  border-color: rgba(5, 150, 105, 0.65);
}

.opt-badge__icon {
  font-size: 0.95rem;
  flex-shrink: 0;
}

.opt-badge__text {
  flex: 1;
}

.opt-badge__chevron {
  flex-shrink: 0;
  color: var(--color-accent);
  transition: transform 0.15s ease;
}

.opt-badge[aria-expanded="true"] .opt-badge__chevron {
  transform: rotate(180deg);
}

/* Panel suggestions — s'ouvre sous le badge, pousse les metriques vers le bas */
.opt-panel {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  animation: opt-slide-down 0.15s ease;
}

.opt-panel[hidden] {
  display: none;
}

@keyframes opt-slide-down {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Chaque suggestion */
.opt-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}

.opt-item__icon {
  font-size: 0.9rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.opt-item__body {
  flex: 1;
  min-width: 0;
}

.opt-item__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.opt-item__detail {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.50);
  margin-top: 1px;
}

.opt-item__delta {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-success-light);
  background: rgba(74, 222, 128, 0.15);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  white-space: nowrap;
  align-self: center;
}

/* Grille de métriques */
.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

/* Groupe frais notaire (champ + toggle %) */
.frais-notaire-row {
  display: flex;
  gap: var(--space-2);
}

.frais-notaire-row .input-group__field {
  flex: 1;
}

/* Message contextuel — masqué par défaut, affiché dynamiquement */
.contextual-message {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

.contextual-message.is-visible { display: flex; }

.contextual-message__text {
  margin: 0;
}

.contextual-message__hint {
  margin: 0;
  font-size: var(--font-size-2xs, 0.7rem);
  opacity: 0.75;
  font-style: italic;
}

.contextual-message--warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-light);
}

.contextual-message--success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success-light);
}

.contextual-message--info {
  background-color: var(--color-info-bg);
  color: var(--color-info);
  border: 1px solid rgba(3, 105, 161, 0.3);
}

.results-reliability {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.results-reliability__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.results-reliability__title {
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.results-reliability__text {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

.results-reliability__list {
  margin: var(--space-3) 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.results-reliability__item {
  font-size: var(--font-size-xs);
  color: inherit;
  line-height: var(--line-height-relaxed);
}

.results-reliability--success {
  border-color: var(--color-success-light);
  background: linear-gradient(180deg, rgba(56, 161, 105, 0.07), var(--color-surface));
}

.results-reliability--warning {
  border-color: var(--color-warning-light);
  background: linear-gradient(180deg, rgba(214, 158, 46, 0.08), var(--color-surface));
}

.results-reliability--danger {
  border-color: var(--color-danger-light);
  background: linear-gradient(180deg, rgba(229, 62, 62, 0.07), var(--color-surface));
}

/* ── Régime fiscal appliqué ──────────────────────────────────── */
.fiscal-regime-info {
  margin-top: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.8125rem;
}

.fiscal-regime-info--applique {
  border-color: rgba(56, 161, 105, 0.35);
  background: rgba(56, 161, 105, 0.04);
}

.fiscal-regime-info--warning {
  border-color: var(--color-warning-light);
  background: rgba(214, 158, 46, 0.05);
}

.fiscal-regime-info--neutral {
  border-color: var(--color-border);
  background: var(--color-surface-alt, var(--color-surface));
}

.fiscal-regime-info__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.fiscal-regime-info__label {
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.8125rem;
}

.fiscal-regime-info__justification {
  margin: 0 0 0.25rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.fiscal-regime-info__detail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.375rem;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.fiscal-regime-info__detail-sub {
  padding-left: 0.75rem;
  border-left: 2px solid var(--color-success, #38A169);
  color: var(--color-success, #38A169);
}

.fiscal-regime-info__detail-note {
  width: 100%;
  color: var(--color-warning, #D69E2E);
  font-style: italic;
}

.fiscal-regime-info__cs-incomplete {
  color: var(--color-danger, #E53E3E);
  font-weight: 500;
}

.fiscal-regime-info__cs-warn {
  color: var(--color-warning, #D69E2E);
  font-style: italic;
}

/* Animation sur les valeurs qui changent */
@keyframes value-updated {
  0%   { opacity: 0.3; transform: scale(0.95); }
  100% { opacity: 1;   transform: scale(1); }
}

.value-updated {
  animation: value-updated 0.3s ease-out forwards;
}

/* ============================================================
   VUE PLANS & TARIFS
   ============================================================ */

.tarifs-layout {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* En-tête */
.tarifs-header__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.tarifs-header__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin: 0;
}

/* Bannière essai Pro gratuit */
.tarifs-trial-banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: linear-gradient(135deg, var(--color-success-bg) 0%, #d1fae5 100%);
  border: 1px solid var(--color-success-light);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  flex-wrap: wrap;
}

.tarifs-trial-banner__icon {
  flex-shrink: 0;
}
.tarifs-trial-banner__icon img {
  width: 24px;
  height: 24px;
}

.tarifs-trial-banner__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tarifs-trial-banner__title {
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.tarifs-trial-banner__desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Toggle facturation */
.tarifs-billing-toggle {
  display: flex;
  gap: var(--space-1);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-1);
  width: fit-content;
}

.tarifs-billing-btn {
  background: none;
  border: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: background 0.15s, color 0.15s;
}

.tarifs-billing-btn--active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.tarifs-billing-save {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  background: rgba(21, 128, 61, 0.12);
  color: var(--color-success);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

/* Grille de plans */
.tarifs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

/* Carte de plan */
.tarifs-card {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
}

.tarifs-card--pro {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.12);
}

.tarifs-card__popular {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: var(--color-primary-dark);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.tarifs-card__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tarifs-card__price {
  font-size: 2.75rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: 1;
}

.tarifs-card__price--free {
  color: var(--color-text-muted);
}

.tarifs-card__period {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: calc(-1 * var(--space-2));
}

.tarifs-card__annual-note {
  display: none; /* Affiché via .is-visible uniquement en facturation annuelle */
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-success);
  background: rgba(21, 128, 61, 0.08);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}

.tarifs-card__annual-note.is-visible { display: block; }

/* Liste de features */
.tarifs-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tarifs-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.tarifs-feature--locked {
  color: var(--color-text-muted);
}

.tarifs-feature__check {
  color: var(--color-success);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  line-height: 1.4;
}

.tarifs-feature__cross {
  color: var(--color-border);
  flex-shrink: 0;
  line-height: 1.4;
}

/* Footer des cards */
.tarifs-card__footer {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.tarifs-card__current-plan {
  display: block;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
}

.tarifs-card__upgrade-btn {
  width: 100%;
  justify-content: center;
}

.tarifs-card__cta-note {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin: var(--space-2) 0 0;
}

/* FAQ */
.tarifs-faq__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

.tarifs-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tarifs-faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tarifs-faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: none;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-align: left;
}

.tarifs-faq__question:hover {
  background: var(--color-bg);
}

.tarifs-faq__chevron {
  flex-shrink: 0;
  transition: transform 0.2s;
}

.tarifs-faq__question.is-open .tarifs-faq__chevron {
  transform: rotate(180deg);
}

.tarifs-faq__answer {
  padding: 0 var(--space-4) var(--space-4);
  background: var(--color-surface);
}

.tarifs-faq__answer p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* Lien "Tarifs" dans la sidebar — léger accent doré */
.nav-item--tarifs {
  color: var(--color-accent);
}

.nav-item--tarifs .nav-item__icon {
  stroke: var(--color-accent);
}

.nav-item--tarifs:hover,
.nav-item--tarifs.active {
  background: rgba(5, 150, 105, 0.1);
  color: var(--color-accent);
}

/* Responsive tarifs */
@media (max-width: 700px) {
  .tarifs-grid {
    grid-template-columns: 1fr;
  }

  .tarifs-trial-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .tarifs-trial-banner > .btn {
    align-self: stretch;
    text-align: center;
    justify-content: center;
  }
}

/* ============================================================
   CTA UPGRADE CONTEXTUEL
   Bannière inline et hint texte — affichés au moment des actions verrouillées.
   ============================================================ */

/* Bannière d'upgrade (vue Mes Projets — limite 3 projets atteinte) */
.upgrade-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: linear-gradient(135deg, var(--color-success-bg) 0%, #d1fae5 100%);
  border: 1px solid var(--color-success-light);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.upgrade-banner__content {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.upgrade-banner__icon {
  flex-shrink: 0;
}
.upgrade-banner__icon img {
  width: 20px;
  height: 20px;
}

.upgrade-banner__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.upgrade-banner__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.upgrade-banner__desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Hint "limite projets" sous les boutons d'action (vue Analyse) — masqué par défaut */
.save-limit-hint {
  display: none;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}

.save-limit-hint.is-visible { display: block; }

.save-limit-hint__cta {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.save-limit-hint__cta:hover {
  color: var(--color-accent-light);
}

@media (max-width: 600px) {
  .upgrade-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .upgrade-banner > .btn {
    align-self: stretch;
    text-align: center;
    justify-content: center;
  }
}

/* ============================================================
   VUE MES PROJETS
   ============================================================ */
.projects-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.projects-header h2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.projects-header p {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
}

.projects-header .badge {
  margin-left: var(--space-2);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

.project-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.project-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--color-primary-light);
}

.project-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.project-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  line-height: 1.3;
}

.project-card__date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.project-card__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.project-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.project-metric__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.project-metric__value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.project-metric__value.is-positive { color: var(--color-success); }
.project-metric__value.is-negative { color: var(--color-danger); }

/* Score badge dynamique (couleur via CSS custom property --score-color) */
.project-card__score {
  text-align: right;
  flex-shrink: 0;
}

.badge--score {
  background: color-mix(in srgb, var(--score-color) 13%, transparent);
  color: var(--score-color);
  border-color: color-mix(in srgb, var(--score-color) 33%, transparent);
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-3);
}

.project-card__score-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.project-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* Section portfolio — séparée visuellement des actions primaires */
.project-card__portfolio {
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
}

/* Bouton toggle d'inclusion au portefeuille */
.portfolio-toggle-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}

.portfolio-toggle-btn:hover {
  border-color: var(--color-primary-light);
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* État actif : inclus dans le portefeuille */
.portfolio-toggle-btn.is-active {
  border-color: var(--color-success);
  color: var(--color-success);
  background-color: var(--color-success-bg);
}

.portfolio-toggle-btn.is-active:hover {
  border-color: var(--color-success);
  background-color: var(--color-success-bg);
  color: var(--color-success);
  filter: brightness(0.95);
}

.portfolio-toggle-btn__icon {
  flex-shrink: 0;
}

.portfolio-toggle-btn__label {
  flex: 1;
}

/* Card mise en évidence quand incluse dans le portefeuille */
.project-card--in-portfolio {
  box-shadow: inset 3px 0 0 var(--color-success), var(--shadow-sm);
}

/* ============================================================
   VUE COMPARATEUR
   ============================================================ */
.comparateur-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.comparateur-empty {
  text-align: center;
  padding: var(--space-16) var(--space-8);
}

/* Tableau comparatif */
.compare-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

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

.compare-table th {
  background-color: var(--color-bg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.compare-table th:first-child {
  background-color: var(--color-primary);
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 160px;
}

.compare-table td:first-child {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background-color: var(--color-bg);
}

.compare-table tr:last-child th,
.compare-table tr:last-child td {
  border-bottom: none;
}

/* Meilleure valeur mise en évidence */
.compare-table td.is-best {
  color: var(--color-success);
  font-weight: var(--font-weight-bold);
  background-color: var(--color-success-bg);
}

.compare-table td.is-worst {
  color: var(--color-text-muted);
}

/* En-tête de colonne bien */
.compare-table .col-header {
  text-align: center;
  padding: var(--space-4);
}

.compare-table .col-header .project-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.compare-table .col-header .remove-btn {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Score dans le tableau — couleurs dynamiques via CSS custom properties */
.compare-score {
  --score-color: #718096;
  --fill-width: 0%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.compare-score__bar {
  flex: 1;
  height: 6px;
  background-color: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.compare-score__fill {
  height: 100%;
  border-radius: var(--radius-full);
  width: var(--fill-width);
  background: var(--score-color);
  transition: width var(--transition-slow);
}

.compare-score__num {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  min-width: 28px;
  text-align: right;
  color: var(--score-color);
}

/* Titres dans l'en-tête comparateur */
.comparateur-header h2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}

.comparateur-header p {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
}

/* Actions (boutons Ajouter/Vider) dans l'en-tête */
.comparateur-header__actions {
  display: flex;
  gap: var(--space-3);
}

/* Feature-lock avec min-height pour le comparateur */
.feature-lock--comparateur {
  min-height: 400px;
}

/* Feature-lock avec min-height pour le dashboard portefeuille */
.feature-lock--dashboard {
  min-height: 500px;
}

/* Zone floutée dans le feature-lock */
.feature-lock__blurred {
  filter: blur(4px);
  pointer-events: none;
  padding: var(--space-6);
}

/* Métadonnées (score) sous le nom dans les en-têtes de colonnes */
.col-header__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Bouton retirer dans les colonnes */
.compare-table .col-header .remove-btn {
  margin-top: var(--space-2);
}

/* Colonne fantôme "Ajouter un bien" */
.col-header--add-ghost {
  opacity: 0.5;
  cursor: pointer;
}

.col-header--add-ghost__icon {
  font-size: 2rem;
  color: var(--color-border-strong);
}

.col-header--add-ghost__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Item de sélection de projet dans la modale comparateur */
.project-select-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}

/* Hover sur les items de sélection de projet dans la modale comparateur */
.project-select-item:hover {
  background: var(--color-bg);
}

.project-select-item__name {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.project-select-item__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Liste de projets dans la modale (wrapper flex) */
.modal-project-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ============================================================
   MODALE UPGRADE
   ============================================================ */
.upgrade-modal .modal {
  max-width: 640px;
}

.upgrade-header {
  text-align: center;
  padding: var(--space-8) var(--space-6) var(--space-4);
}

.upgrade-header__icon {
  margin-bottom: var(--space-3);
}
.upgrade-header__icon img {
  width: 40px;
  height: 40px;
}

.upgrade-header__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.upgrade-header__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Tableau Free vs Pro */
.plan-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: var(--space-5) 0;
}

.plan-col {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
}

.plan-col--pro {
  border-color: var(--color-accent);
  background: linear-gradient(to bottom, var(--color-accent-bg), var(--color-surface));
  position: relative;
}

.plan-col__popular {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-accent);
  color: var(--color-primary-dark);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.plan-col__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
}

.plan-col--free .plan-col__name { color: var(--color-text-muted); }
.plan-col--pro  .plan-col__name { color: var(--color-primary); }

.plan-col__price {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.plan-col__price-period {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.plan-col__billing-note {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  display: none;
}

.plan-col__billing-note.is-visible {
  display: block;
}

/* Composants partagés : détail facturation annuelle (modale + guide) */
.billing-annual__total {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}


.plan-col__features {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.plan-feature {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text);
}

.plan-feature__check {
  color: var(--color-success);
  flex-shrink: 0;
}

.plan-feature__cross {
  color: var(--color-border-strong);
  flex-shrink: 0;
}

.plan-feature.is-locked {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* ============================================================
   SCÉNARIOS MULTIPLES
   ============================================================ */

/* Wrapper au-dessus du formulaire */
.scenario-tabs-wrapper {
  margin-bottom: var(--space-4);
}

/* Barre d'onglets */
.scenario-tabs {
  display: flex;
  gap: var(--space-2);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  box-shadow: var(--shadow-sm);
}

/* Bouton d'onglet individuel */
.scenario-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  background: transparent;
  transition: all var(--transition-fast);
}

.scenario-tab-btn:hover {
  background-color: var(--color-bg);
  color: var(--color-text);
}

.scenario-tab-btn.active {
  background-color: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-xs);
}

/* Couleurs par scénario (remplace l'inline style --scenario-color) */
.scenario-tab-btn--danger  { --scenario-color: var(--color-danger); }
.scenario-tab-btn--warning { --scenario-color: var(--color-warning); }
.scenario-tab-btn--success { --scenario-color: var(--color-success); }

/* Indicateur de couleur (petit trait coloré) */
.scenario-tab__indicator {
  width: 3px;
  height: 16px;
  border-radius: var(--radius-full);
  background-color: var(--scenario-color, var(--color-border));
  opacity: 0;
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
}

.scenario-tab-btn.active .scenario-tab__indicator {
  opacity: 1;
}

.scenario-tab__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
  opacity: 0.55;
  transition: opacity var(--transition-fast);
}

.scenario-tab-btn.active .scenario-tab__icon,
.scenario-tab-btn:hover .scenario-tab__icon {
  opacity: 1;
}

/* Bouton "Comparer les scénarios" */
.scenario-compare-toggle {
  width: 100%;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

.scenario-compare-toggle.active {
  background-color: var(--color-primary-bg);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Panneau de comparaison — masqué par défaut, affiché via .is-visible */
.scenario-comparison-panel {
  display: none;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  animation: view-fade-in 0.2s ease-out both;
}

.scenario-comparison-panel.is-visible { display: block; }

/* Mode pleine largeur (sous le layout analyse) */
.scenario-comparison-panel--fullwidth {
  margin-top: var(--space-6);
}

.scenario-comparison-panel--fullwidth .scenario-comparison-panel__inner {
  overflow-x: auto;
}

.scenario-comparison-panel--fullwidth .scenario-comparison-table {
  min-width: 500px;
}

.scenario-comparison-panel__empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.scenario-comparison-panel__inner {
  overflow-x: auto;
}

/* Tableau de comparaison */
.scenario-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
}

.scenario-comparison-table th,
.scenario-comparison-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.scenario-comparison-table tr:last-child td {
  border-bottom: none;
}

/* En-tête de colonne */
.scenario-col-header {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  background-color: var(--color-bg);
  white-space: nowrap;
}

/* Barre colorée au-dessus de chaque colonne scénario */
.scenario-col-header::before {
  content: '';
  display: block;
  width: 24px;
  height: 3px;
  background-color: var(--scenario-color, var(--color-border));
  border-radius: var(--radius-full);
  margin: 0 auto var(--space-1);
}

/* Couleurs par scénario dans le panneau de comparaison */
.scenario-col-header--danger  { --scenario-color: var(--color-danger); }
.scenario-col-header--warning { --scenario-color: var(--color-warning); }
.scenario-col-header--success { --scenario-color: var(--color-success); }

/* Icône dans l'en-tête de colonne scénario */
.scenario-col-header__icon {
  vertical-align: middle;
  margin-right: 4px;
}

/* Scénario actif mis en évidence */
.scenario-col-header.is-active-scenario,
.scenario-cell.is-active-scenario {
  background-color: var(--color-primary-bg);
}

/* Badge "actif" */
.scenario-active-badge {
  display: inline-block;
  font-size: 9px;
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  padding: 1px 5px;
  margin-left: var(--space-1);
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Label de métrique (1ère colonne) */
.scenario-metric-label {
  text-align: left;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background-color: var(--color-bg);
  white-space: nowrap;
}

.scenario-metric-label-header {
  background-color: var(--color-bg);
}

/* Cellule sans données */
.scenario-cell--empty {
  color: var(--color-text-muted);
  opacity: 0.5;
}

/* Meilleure valeur */
.scenario-cell.is-best {
  color: var(--color-success);
  font-weight: var(--font-weight-bold);
  background-color: var(--color-success-bg) !important;
}

/* Mobile : masquer le label texte des onglets, garder l'emoji */
@media (max-width: 600px) {
  .scenario-tab__label {
    display: none;
  }

  .scenario-tab-btn {
    flex: 1;
    justify-content: center;
    padding: var(--space-2);
  }
}

/* ============================================================
   HISTORIQUE DES SIMULATIONS
   ============================================================ */

/* Panneau principal */
.history-panel {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* En-tête cliquable (toggle) */
.history-panel__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: background-color var(--transition-fast);
}

.history-panel__header:hover {
  background-color: var(--color-bg);
}

/* Titre avec icône + badge compteur */
.history-panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* Badge compteur */
.history-panel__count {
  font-size: var(--font-size-xs);
  padding: 1px var(--space-2);
}

/* Chevron — rotation 180° quand le panneau est ouvert */
.history-panel__chevron {
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

/* En-tête du panneau de comparaison de scénarios */
.scenario-comparison-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

/* Corps scrollable */
.history-panel__body {
  max-height: 320px;
  overflow-y: auto;
  border-top: 1px solid var(--color-border);
}

/* État vide */
.history-panel__empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

/* Pied de panneau (lien "Tout effacer") */
.history-panel__footer {
  padding: var(--space-2) var(--space-3);
  text-align: center;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg);
}

/* Entrée de snapshot */
.history-entry {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-2);
  transition: background-color var(--transition-fast);
}

.history-entry:last-child {
  border-bottom: none;
}

.history-entry:hover {
  background-color: var(--color-bg);
}

/* Métadonnées (label, date, métriques) */
.history-entry__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.history-entry__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.history-entry__date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.history-entry__metrics {
  display: flex;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  flex-wrap: wrap;
}

/* Boutons d'action (Restaurer + Supprimer) */
.history-entry__actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
  align-items: center;
}

/* Corps du panneau — état replié */
.history-panel__body.is-hidden { display: none; }

/* Chevron pivoté quand le panneau est ouvert */
.history-panel__chevron.is-rotated { transform: rotate(180deg); }

/* Bouton "Tout effacer" */
.history-panel__clear-btn {
  color: var(--color-danger);
  font-size: var(--font-size-xs);
}

/* Indication sous-texte dans l'état vide */
.history-panel__empty-hint { font-size: var(--font-size-xs); }

/* Score coloré par classe modificatrice */
.history-entry__score                { color: var(--color-text-muted); }
.history-entry__score--danger        { color: var(--color-danger); }
.history-entry__score--warning       { color: var(--color-warning); }
.history-entry__score--success       { color: var(--color-success); }
.history-entry__score--primary       { color: var(--color-primary); }

/* Bouton de suppression de snapshot */
.history-entry__delete-btn {
  color: var(--color-danger);
  padding: 0 var(--space-2);
}

/* ============================================================
   VUE GUIDE D'UTILISATION
   ============================================================ */

/* Layout deux colonnes : contenu + sidebar TOC */
.guide-layout {
  width: 100%;
}

.guide-hero {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-8);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-radius: var(--radius-xl);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-md);
}

.guide-hero__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  color: var(--color-accent);
}

.guide-hero__icon svg {
  width: 24px;
  height: 24px;
}

.guide-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.guide-hero__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
  color: var(--color-text-inverse);
  line-height: var(--line-height-tight);
}

.guide-hero__subtitle {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

/* Corps : grille contenu + sidebar */
.guide-body {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 1023px) {
  .guide-body {
    grid-template-columns: 1fr;
  }

  .guide-sidebar {
    order: -1;
  }
}

@media (max-width: 768px) {
  .guide-sidebar {
    display: none;
  }
}

/* ---- Sections (repliables) ---- */
.guide-section {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.guide-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg);
  border-bottom: none;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
}

.guide-section__header:hover {
  background-color: var(--color-border);
}

.guide-section--open .guide-section__header {
  border-bottom: 1px solid var(--color-border);
}

.guide-section__icon {
  width: 32px;
  height: 32px;
  background-color: var(--color-primary-bg);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}

.guide-section__icon svg {
  width: 16px;
  height: 16px;
}

.guide-section__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
  flex: 1;
}

/* Chevron indicateur */
.guide-section__chevron {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.guide-section--open .guide-section__chevron {
  transform: rotate(180deg);
}

/* Corps de la section — animation repli/dépli via grid */
.guide-section__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.guide-section--open .guide-section__body {
  grid-template-rows: 1fr;
}

.guide-section__body-inner {
  overflow: hidden;
}

.guide-section__body-content {
  padding: var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
}

.guide-section__body-content p {
  margin: 0 0 var(--space-3);
}

.guide-section__body-content p:last-child {
  margin-bottom: 0;
}

/* ---- Aperçu navigation ---- */
.guide-nav-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.guide-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
}

.guide-nav-icon {
  width: 28px;
  height: 28px;
  background-color: var(--color-primary-bg);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}

.guide-nav-icon svg {
  width: 14px;
  height: 14px;
}

/* ---- Étapes numérotées ---- */
.guide-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.guide-step {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.guide-step__number {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.guide-step__body {
  flex: 1;
  min-width: 0;
}

.guide-step__body > strong {
  display: block;
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
}

.guide-step__body p {
  margin: 0;
  color: var(--color-text-muted);
}

/* ---- Astuces ---- */
.guide-tip {
  display: block;
  overflow: hidden; /* clearfix pour le float du svg */
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--color-info-bg);
  border: 1px solid rgba(3, 105, 161, 0.3);
  color: var(--color-info);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  margin-top: var(--space-3);
}

.guide-tip svg {
  float: left;
  margin-right: var(--space-2);
  margin-top: 2px;
  flex-shrink: 0;
}

.guide-tip--warning {
  background-color: var(--color-warning-bg);
  border-color: var(--color-warning-light);
  color: var(--color-warning);
}

/* ---- Métriques ---- */
.guide-metrics-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.guide-metric-item {
  padding: var(--space-3);
  background-color: var(--color-bg);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary);
}

.guide-metric-item__label {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.guide-metric-item__desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-relaxed);
}

.guide-metric-item__scale {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---- Scénarios demo ---- */
.guide-scenario-tabs-demo {
  display: flex;
  gap: var(--space-2);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  margin: var(--space-3) 0;
  width: fit-content;
}

.guide-scenario-demo-tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  border: 1px solid transparent;
}

.guide-scenario-demo-tab--active {
  background-color: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-xs);
}

/* Couleurs des onglets scénario via classes (remplace --scenario-color inline) */
.guide-scenario-demo-tab--pessimiste { --scenario-color: #E53E3E; }
.guide-scenario-demo-tab--realiste   { --scenario-color: #D4AF37; }
.guide-scenario-demo-tab--optimiste  { --scenario-color: #38A169; }

/* Titre H3 de sous-section dans le guide */
.guide-section-h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: var(--space-5) 0 var(--space-3);
}

/* Libellé de sévérité d'alerte (inline dans du texte) */
.guide-alert-severity {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.guide-alert-severity--danger  { color: var(--color-danger); }
.guide-alert-severity--warning { color: var(--color-warning); }
.guide-alert-severity--info    { color: var(--color-info); }

/* ---- Listes ---- */
.guide-list {
  padding-left: var(--space-5);
  margin: var(--space-2) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.guide-list li {
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

/* ---- Actions projets ---- */
.guide-actions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.guide-action-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.guide-action-item .badge {
  flex-shrink: 0;
  min-width: 72px;
  text-align: center;
}

/* ---- Toggle facturation mensuel/annuel (guide + modale upgrade) ---- */
.guide-billing-toggle,
.upgrade-billing-toggle {
  display: flex;
  justify-content: center;
  margin: 0 auto var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 3px;
  width: fit-content;
}

.guide-billing-btn,
.upgrade-billing-btn {
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium, 500);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.guide-billing-btn--active,
.upgrade-billing-btn--active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.guide-billing-save,
.upgrade-billing-save {
  background: var(--color-success);
  color: var(--color-text-inverse);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: var(--radius-full);
  line-height: 1.4;
}

.guide-pro-billing-note {
  margin-bottom: var(--space-4);
  display: none;
}

.guide-pro-billing-note.is-visible {
  display: block;
}

/* Suffixe « /mois » dans le prix Pro */
.guide-plan-price__period {
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--color-text-muted);
}

/* Note d'accès Pro (bas de section Plans) */
.guide-plan-note {
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ---- Plans ---- */
.guide-plan-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

@media (max-width: 600px) {
  .guide-plan-table {
    grid-template-columns: 1fr;
  }
}

.guide-plan-col {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
  position: relative;
}

.guide-plan-col--pro {
  border-color: var(--color-accent);
  background: linear-gradient(to bottom, var(--color-accent-bg, rgba(5,150,105,0.05)), var(--color-surface));
}

.guide-plan-col__popular {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-accent);
  color: var(--color-primary-dark, #1A202C);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.guide-plan-col__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}

.guide-plan-col__price {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.guide-plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.guide-plan-features li {
  font-size: var(--font-size-xs);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.guide-plan-features li::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}

.guide-plan-features li.is-ok {
  color: var(--color-text);
}

.guide-plan-features li.is-ok::before {
  background-color: var(--color-success-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338A169' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.guide-plan-features li.is-no {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.guide-plan-features li.is-no::before {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CBD5E0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* ---- Blocs code/raccourcis ---- */
.guide-code-block {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: var(--space-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.guide-code-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  flex-wrap: wrap;
}

.guide-code-item kbd {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  font-family: monospace;
  font-size: var(--font-size-xs);
  color: var(--color-text);
}

.guide-code-item code {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  font-family: monospace;
  font-size: var(--font-size-xs);
  color: var(--color-primary);
}

.guide-code-item span {
  color: var(--color-text-muted);
}

/* ---- Table des matières (sidebar) ---- */
.guide-sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  max-height: calc(100vh - var(--header-height) - var(--space-8));
  overflow-y: auto;
}

.guide-toc {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.guide-toc__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.guide-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.guide-toc__link {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guide-toc__link:hover {
  background-color: var(--color-bg);
  color: var(--color-primary);
}

/* ---- CTA card ---- */
.guide-cta-card {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  color: var(--color-text-inverse);
  text-align: center;
}

.guide-cta-card__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}

.guide-cta-card__text {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--space-3);
  line-height: var(--line-height-relaxed);
}

/* contenu */
.guide-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ============================================================
   VUE DASHBOARD PORTEFEUILLE
   ============================================================ */

/* ---- Toggle global / individuel ---- */
.dashboard-mode-toggle {
  display: flex;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-5);
  width: fit-content;
}

.dashboard-mode-toggle--in-header {
  margin-bottom: 0;
}

.dashboard-mode-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.dashboard-mode-btn:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text);
}

.dashboard-mode-btn.is-active {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ---- Sélecteur de projet (mode individuel) ---- */
.dashboard-individual-selector {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.dashboard-individual-selector__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.individual-selector__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex: 1;
}

.individual-selector__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.individual-selector__item:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}

.individual-selector__item.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
}

.individual-selector__name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Gestion après achat ---- */
.post-achat-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.post-achat-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.post-achat-field__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.post-achat-field__input-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.post-achat-field__input {
  flex: 1;
  min-width: 0;
}

.post-achat-field__unit {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.post-achat-pv {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  border-width: 1px;
  border-style: solid;
  min-height: 80px;
  justify-content: center;
}

.post-achat-pv--positive {
  background-color: var(--color-success-bg);
  border-color: var(--color-success-light, #86efac);
  color: var(--color-success);
}

.post-achat-pv--negative {
  background-color: var(--color-danger-bg);
  border-color: var(--color-danger-light, #fca5a5);
  color: var(--color-danger);
}

.post-achat-pv__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.post-achat-pv__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.post-achat-pv__amount {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.post-achat-pv__pct {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.post-achat-pv__disclaimer {
  font-size: var(--font-size-xs);
  opacity: 0.65;
  margin-top: var(--space-1);
}

/* ---- Disposition sections individuelles (stack vertical) ---- */
.individual-side-by-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.individual-side-by-side > .dashboard-section {
  margin-top: 0;
}

/* Modification 3 — Ancrage visuel des titres de ces deux sections */
#ind-post-achat-title,
#ind-bien-temps-title {
  color: var(--color-text-muted);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-5);
  margin-top: 0;
}

/* Modification 2 — Sous-layout input + card métrique côte à côte */
.post-achat-input-metric-row,
.bien-temps-input-metric-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-6);
  align-items: stretch;
}

@media (max-width: 767px) {
  .post-achat-input-metric-row,
  .bien-temps-input-metric-row {
    grid-template-columns: 1fr;
  }
}

/* Modification 5 — Conteneur visuel autour de l'input */
.post-achat-input-wrapper,
.bien-temps-input-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

/* Modification 6 — Card encapsulant le bloc Coûts exceptionnels */
.extra-costs-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ---- Mon bien dans le temps ---- */
.bien-temps-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.bien-temps-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bien-temps-field-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.bien-temps-date-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.bien-temps-date-input {
  max-width: 200px;
}

.bien-temps-anciennete {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.bien-temps-invite {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

.bien-temps-empty {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Rendement réel */
.bien-temps-rendement {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  min-height: 80px;
  justify-content: center;
}

.bien-temps-rendement__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bien-temps-rendement__value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.bien-temps-rendement__detail {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Mini-formulaire coûts exceptionnels */
.extra-cost-form {
  display: grid;
  grid-template-columns: 150px 1fr 140px auto;
  gap: var(--space-3);
  align-items: end;
}

@media (max-width: 767px) {
  .extra-cost-form {
    grid-template-columns: 1fr 1fr;
  }
}

.extra-cost-form__date {
  min-width: 0;
}

.extra-cost-form__label {
  min-width: 0;
}

.extra-cost-form__amount-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.extra-cost-form__amount {
  flex: 1;
  min-width: 0;
}

.extra-cost-form__unit {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Liste des coûts */
.extra-costs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.extra-cost-item {
  display: grid;
  grid-template-columns: 110px 1fr auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}

.extra-cost-item:last-child {
  border-bottom: none;
}

.extra-cost-item__date {
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.extra-cost-item__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.extra-cost-item__amount {
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  text-align: right;
}

.extra-cost-delete {
  flex-shrink: 0;
  padding: 2px var(--space-2);
  font-size: var(--font-size-xs);
  line-height: 1;
  color: var(--color-text-muted);
}

.extra-cost-delete:hover {
  color: var(--color-danger);
}

.extra-costs-total {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-4);
  margin-top: var(--space-2);
  border-top: 2px solid var(--color-border-strong);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  color: var(--color-text);
}

/* Synthèse coûts exceptionnels */
.extra-costs-synthese {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.extra-costs-synthese__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--font-size-sm);
}

.extra-costs-synthese__row--impact {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-2);
  margin-top: var(--space-1);
}

.extra-costs-synthese__label {
  color: var(--color-text-muted);
}

.extra-costs-synthese__value {
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.extra-costs-synthese__impact {
  color: var(--color-warning);
}

.extra-costs-synthese__note {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

/* ---- Épargne forcée ---- */
.epargne-forcee {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.epargne-forcee__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.epargne-forcee__subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
}

.epargne-forcee__empty {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.epargne-forcee__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.epargne-forcee__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.epargne-forcee__th {
  text-align: right;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.epargne-forcee__th:first-child {
  text-align: left;
}

.epargne-forcee__td {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border-light, var(--color-border));
  white-space: nowrap;
}

.epargne-forcee__td--annee {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-align: left;
}

.epargne-forcee__td--num {
  text-align: right;
}

.epargne-forcee__td--cumul {
  font-weight: var(--font-weight-semibold);
}

.epargne-forcee__td--crd {
  color: var(--color-text-muted);
}

.epargne-forcee__table tbody tr:last-child .epargne-forcee__td {
  border-bottom: none;
}

/* ---- Projection revente ---- */
.projection-revente {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.projection-revente__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.projection-revente__subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
}

.projection-revente__empty {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.projection-revente__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.projection-revente__table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}

.projection-revente__th {
  text-align: right;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.projection-revente__th:first-child {
  text-align: left;
}

.projection-revente__th--num {
  text-align: right;
}

.projection-revente__td {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border-light, var(--color-border));
  font-size: var(--font-size-sm);
}

.projection-revente__td--annee {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-align: left;
}

.projection-revente__td--num {
  text-align: right;
}

.projection-revente__td--crd {
  color: var(--color-text-muted);
}

.projection-revente__td--net {
  font-weight: var(--font-weight-semibold);
}

.projection-revente__td--negative {
  color: var(--color-danger);
}

.projection-revente__table tbody tr:last-child .projection-revente__td {
  border-bottom: none;
}

.projection-revente__disclaimer {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
  font-style: italic;
}

/* ---- En-tête ---- */
.dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.dashboard-header__titles {
  min-width: 0;
}

.dashboard-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.dashboard-header__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: var(--line-height-tight);
}

.dashboard-header__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ---- Section générique ---- */
.dashboard-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dashboard-section + .dashboard-section {
  margin-top: var(--space-8);
}

.dashboard-section__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text);
}

/* ---- Grille KPI ---- */
.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .dashboard-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .dashboard-kpi-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.dashboard-kpi-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition: box-shadow var(--transition-fast);
  min-width: 0; /* empêche les cellules de grid de déborder */
  overflow: hidden;
}

/* Header icône + label */
.dashboard-kpi-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.dashboard-kpi-card__icon {
  display: flex;
  flex-shrink: 0;
  color: var(--color-text-muted);
  opacity: 0.7;
}

.dashboard-kpi-card:hover {
  box-shadow: var(--shadow-md);
}

.dashboard-kpi-card__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-kpi-card__value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: var(--line-height-tight);
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* Texte secondaire sous la valeur */
.dashboard-kpi-card__sub {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-kpi-card__value.is-positive {
  color: var(--color-success);
}

.dashboard-kpi-card__value.is-negative {
  color: var(--color-danger);
}

.dashboard-inline-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dashboard-inline-note {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* ---- Barre de score dans le tableau de métriques ---- */
.dashboard-score-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dashboard-score-bar__track {
  flex: 1;
  height: 6px;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

.dashboard-score-bar__fill {
  height: 100%;
  border-radius: 4px;
  width: var(--fill-width, 0%);
  background: var(--score-color, var(--color-accent));
}

.dashboard-score-bar__num {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  min-width: 40px;
  text-align: right;
  color: var(--score-color, var(--color-text-muted));
}

/* ---- Message vide dans les listes/contenus ---- */
.dashboard-empty-hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  padding: var(--space-4);
}

/* ---- Grille graphiques ---- */
.dashboard-charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .dashboard-charts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.dashboard-chart-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0; /* empêche le débordement en grille */
}

.dashboard-chart-card__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.dashboard-chart-card__canvas-wrapper {
  position: relative;
  /* Hauteur fixe pour éviter que Chart.js redimensionne en boucle */
  height: 180px;
}

.dashboard-chart-card__canvas-wrapper canvas {
  max-width: 100%;
  max-height: 100%;
}

/* Conteneur canvas utilisé par dashboard.js (_buildChartCard génère __body) */
.dashboard-chart-card__body {
  position: relative;
  height: 180px;
}

/* Graphique pleine largeur (historique) — légèrement plus haut */
.dashboard-chart-card--wide .dashboard-chart-card__body {
  height: 200px;
}

/* ---- Tableau comparatif ---- */
.dashboard-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  /* Ombre légère sur les bords pour signaler le scroll horizontal */
  box-shadow: var(--shadow-sm);
}

.dashboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.dashboard-table th,
.dashboard-table td {
  padding: var(--space-3) var(--space-4);
  text-align: right;
  border-bottom: 1px solid var(--color-border);
}

/* Première colonne (nom du bien) alignée à gauche */
.dashboard-table th:first-child,
.dashboard-table td:first-child {
  text-align: left;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  min-width: 140px;
  position: sticky;
  left: 0;
  background-color: var(--color-surface);
  z-index: var(--z-raised);
}

.dashboard-table thead th {
  background-color: var(--color-bg);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-border);
  user-select: none;
}

.dashboard-table thead th:first-child {
  background-color: var(--color-bg);
}

.dashboard-table__th.is-sortable {
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.dashboard-table__th.is-sortable:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-bg);
}

.dashboard-table__th.is-sorted {
  color: var(--color-primary);
}

.dashboard-table__th .sort-icon {
  display: inline-block;
  margin-left: var(--space-1);
  font-style: normal;
  opacity: 0.5;
  font-size: 0.7em;
  vertical-align: middle;
}

.dashboard-table__th.is-sorted .sort-icon {
  opacity: 1;
}

/* Dernière ligne sans bordure basse */
.dashboard-table tbody tr:last-child td {
  border-bottom: none;
}

/* Zebra stripping discret */
.dashboard-table tbody tr:nth-child(even) td {
  background-color: var(--color-bg);
}

.dashboard-table tbody tr:nth-child(even) td:first-child {
  background-color: var(--color-bg);
}

/* Survol ligne */
.dashboard-table tbody tr:hover td {
  background-color: var(--color-primary-bg);
}

.dashboard-table tbody tr:hover td:first-child {
  background-color: var(--color-primary-bg);
}

/* Mise en avant meilleure / pire valeur */
.dashboard-table td.is-best {
  color: var(--color-success);
  font-weight: var(--font-weight-semibold);
}

.dashboard-table td.is-worst {
  color: var(--color-danger);
}

/* ---- Alertes ---- */
.dashboard-alerts-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dashboard-alert-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.dashboard-alert-item__icon {
  flex-shrink: 0;
  line-height: 1.5; /* aligner avec le texte */
}

.dashboard-alert-item__message {
  flex: 1;
  min-width: 0;
  color: var(--color-text);
}

/* Variantes par sévérité */
.dashboard-alert-item--critical {
  background-color: var(--color-danger-bg);
  border-color: var(--color-danger-light);
}

.dashboard-alert-item--warning {
  background-color: var(--color-warning-bg);
  border-color: var(--color-warning-light);
}

.dashboard-alert-item--info {
  background-color: var(--color-info-bg);
  border-color: rgba(3, 105, 161, 0.35); /* --color-info-light absent du DS — border info approchée */
}

/* État sain (aucune alerte) */
.dashboard-alerts-healthy {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-success-bg);
  border: 1px solid var(--color-success-light);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-success);
  font-weight: var(--font-weight-medium);
}

/* ---- Modale de gestion du portefeuille ---- */
.portfolio-manage-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  line-height: var(--line-height-relaxed);
}

.portfolio-manage-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 400px;
  overflow-y: auto;
}

.portfolio-manage-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.portfolio-manage-item:hover {
  background-color: var(--color-bg);
}

.portfolio-manage-item.is-checked {
  background-color: var(--color-primary-bg);
  border-color: var(--color-primary-light);
}

.portfolio-manage-checkbox {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.portfolio-manage-item__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-manage-item__score {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.portfolio-manage-item__score--rated {
  color: var(--score-color);
  font-weight: var(--font-weight-semibold);
}

/* ---- État verrouillé (Free) ---- */
.dashboard-locked {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.dashboard-locked__blur {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
  opacity: 0.6;
}

.dashboard-locked__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  background-color: rgba(250, 250, 248, 0.85);
  text-align: center;
  padding: var(--space-8);
}

.dashboard-locked__icon {
  font-size: 2.5rem;
  line-height: 1;
}

.dashboard-locked__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.dashboard-locked__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  max-width: 320px;
  line-height: var(--line-height-relaxed);
}

/* ---- Responsive dashboard — mobile (< 768px) ---- */
@media (max-width: 767px) {
  /* Réduire le gap entre KPI cards pour gagner de la place sur 320px */
  .dashboard-kpi-grid {
    gap: var(--space-3);
  }

  /* Valeurs monétaires plus petites sur mobile pour éviter le wrap forcé */
  .dashboard-kpi-card__value {
    font-size: var(--font-size-base);
  }

  /* Réduire l'écart entre sections (32px → 24px) */
  .dashboard-section + .dashboard-section {
    margin-top: var(--space-6);
  }

  /* Modale gestion portefeuille : réduire hauteur max sur mobile */
  .portfolio-manage-list {
    max-height: 260px;
  }

  /* En-tête dashboard : empiler verticalement sur très petit écran */
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   APERÇU FISCAL FLOUTÉ (vue Analyse — Free uniquement)
   ============================================================ */

.fiscal-preview {
  display: none; /* Affiché via .is-visible quand les données sont valides et plan Free */
  margin-top: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}

.fiscal-preview.is-visible { display: block; }

.fiscal-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.fiscal-preview__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.fiscal-preview__body {
  padding: var(--space-4);
}

.fiscal-preview__blur-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.fiscal-preview__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}

.fiscal-preview__row + .fiscal-preview__row {
  border-top: 1px solid var(--color-border);
}

.fiscal-preview__regime {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.fiscal-preview__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.fiscal-preview__value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-success);
}

.fiscal-preview__delta {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.fiscal-preview__delta.is-gain {
  color: var(--color-success);
}

.fiscal-preview__cta {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.fiscal-preview__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 600px) {
  .fiscal-preview__body {
    padding: var(--space-3);
  }

  .fiscal-preview__row {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .fiscal-preview__regime {
    width: 100%;
  }
}

/* ============================================================
   DASHBOARD — RÉCAPITULATIF FISCAL
   ============================================================ */

.recap-fiscal {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 520px;
}

.recap-fiscal--estimated .recap-fiscal__table {
  opacity: 0.86;
}

.recap-fiscal__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

.recap-fiscal__notice--warning {
  border-color: var(--color-warning-light);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.recap-fiscal__notice--danger {
  border-color: var(--color-danger-light);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.recap-fiscal__table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.recap-fiscal__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-4);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.recap-fiscal__row:last-child {
  border-bottom: none;
}

/* Ligne d'abattement : légèrement mise en retrait visuellement */
.recap-fiscal__row--deduction {
  background-color: var(--color-bg);
  color: var(--color-text-muted);
}

/* Ligne base imposable : séparateur visuel après l'abattement */
.recap-fiscal__row--subtotal {
  border-top: 2px solid var(--color-border-strong);
  font-weight: var(--font-weight-medium);
}

/* Ligne total : fond coloré, mise en avant */
.recap-fiscal__row--total {
  background-color: var(--color-primary-bg);
  border-top: 2px solid var(--color-border-strong);
  font-weight: var(--font-weight-semibold);
}

.recap-fiscal__label {
  flex: 1;
  color: inherit;
}

.recap-fiscal__value {
  flex-shrink: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: inherit;
}

/* Valeur en rouge pour l'abattement (montant déduit) */
.recap-fiscal__value--deduction {
  color: var(--color-danger);
}

/* Valeur totale en gras */
.recap-fiscal__value--total {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.recap-fiscal__disclaimer {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
}

.recap-fiscal__foyer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
}

.recap-fiscal__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.recap-fiscal__eyebrow-text {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.recap-fiscal__copy,
.recap-fiscal__hint {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

.recap-fiscal__notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.recap-fiscal__table--compact .recap-fiscal__row {
  padding: var(--space-2) var(--space-3);
}

.recap-fiscal__value--positive {
  color: var(--color-success);
}

.recap-fiscal__value--negative {
  color: var(--color-danger);
}

.recap-fiscal__value--neutral {
  color: var(--color-text);
}

/* ============================================================
   VUE RAPPORT PARTAGÉ
   ============================================================ */

/* Bannière en haut de la vue */
.shared-report-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}

.shared-report-banner__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.shared-report-banner__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background-color: rgba(45, 55, 72, 0.08);
  color: var(--color-primary);
  flex-shrink: 0;
}

.shared-report-banner__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.shared-report-banner__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Layout principal de la vue — pleine largeur */
.shared-report-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.shared-report-reliability {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.shared-report-reliability p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.shared-report-reliability--warning {
  border-color: var(--color-warning-light);
  background: linear-gradient(180deg, rgba(214, 158, 46, 0.08), var(--color-surface));
}

.shared-report-reliability--danger {
  border-color: var(--color-danger-light);
  background: linear-gradient(180deg, rgba(229, 62, 62, 0.08), var(--color-surface));
}

/* Score card dans le rapport partagé — couleurs dynamiques via --score-color */
.shared-report-score-card .score-gauge__number {
  color: var(--score-color, var(--color-text-inverse));
}

.shared-report-score-card .score-card__label {
  text-align: center;
  display: block;
  margin-top: var(--space-2);
}

/* Grille de métriques — 4 colonnes sur desktop */
.shared-report-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.shared-report-metric {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition: box-shadow var(--transition-fast) ease;
}

.shared-report-metric:hover {
  box-shadow: var(--shadow-md);
}

.shared-report-metric__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.shared-report-metric__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: 1.2;
  margin-top: var(--space-1);
}

.shared-report-metric__value.is-good {
  color: var(--color-success);
}

.shared-report-metric__value.is-warning {
  color: var(--color-warning);
}

.shared-report-metric__value.is-bad {
  color: var(--color-danger);
}

/* Section bas : détails + carte CTA en 2 colonnes */
.shared-report-bottom {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-6);
  align-items: start;
}

/* Carte détails du bien */
.shared-report-details {
  width: 100%;
}

/* Description list dans les détails */
.shared-report-dl {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.shared-report-dl__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.shared-report-dl__row:last-child {
  border-bottom: none;
}

.shared-report-dl__row dt {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
}

.shared-report-dl__row dd {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  text-align: right;
}

/* Carte CTA — incitation à créer sa propre analyse */
.shared-report-cta-card {
  background: linear-gradient(150deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: var(--shadow-md);
}

.shared-report-cta-card__icon {
  width: 44px;
  height: 44px;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
}

.shared-report-cta-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
  line-height: 1.3;
  margin: 0;
}

.shared-report-cta-card__text {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0;
}

.shared-report-cta-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.shared-report-cta-card__features li {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.shared-report-cta-card__features li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
  flex-shrink: 0;
}

.shared-report-cta-card .btn--accent {
  align-self: flex-start;
  margin-top: var(--space-2);
}

/* Disclaimer */
.shared-report-disclaimer {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  padding: var(--space-4);
  background-color: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.shared-report-disclaimer__cta {
  display: inline-block;
  margin-top: var(--space-2);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.shared-report-disclaimer__cta:hover {
  text-decoration: underline;
}

/* État d'erreur (lien invalide) */
.shared-report-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-8);
  max-width: 480px;
  margin: 0 auto;
}

.shared-report-error__icon img {
  width: 48px;
  height: 48px;
}

.shared-report-error__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.shared-report-error__message {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

/* Lien "ImmoScore" dans le label de la bannière */
.shared-report-banner__brand-link {
  color: inherit;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.shared-report-banner__brand-link:hover {
  color: var(--color-primary);
}

/* Footer d'attribution (lien de retour vers ImmoScore) */
.shared-report-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}

.shared-report-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex-wrap: wrap;
}

.shared-report-footer__logo-icon {
  color: var(--color-primary);
  flex-shrink: 0;
}

.shared-report-footer__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.shared-report-footer__sep {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.shared-report-footer__tagline {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Lien retour dans l'état d'erreur */
.shared-report-error__backlink {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

.shared-report-error__backlink:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

@media (max-width: 600px) {
  .shared-report-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .shared-report-footer > .btn {
    align-self: stretch;
    text-align: center;
    justify-content: center;
  }
}

/* ---- Responsive rapport partagé ---- */
@media (max-width: 1023px) {
  .shared-report-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .shared-report-bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .shared-report-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .shared-report-banner__name {
    white-space: normal;
  }

  .shared-report-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}