/* ============================================================
   RJ Patrimoine — Styles des simulateurs
   Conformes à la charte du site (bleu nuit #0F1628, bleu #4A6FA5).
   Remplace Tailwind CDN + simulator-site.css + les styles inline.
   Tout est scopé sous .sim pour ne jamais affecter le reste du site.
   ============================================================ */

/* Variables remappées sur la charte (l'ancienne palette verte
   pointe désormais vers le bleu du site). */
.sim {
  --sim-navy: #0F1628;
  --sim-blue: #4A6FA5;
  --sim-ink: #1E1E24;
  --sim-muted: #5C5C66;
  --sim-line: #E6E6E4;
  --sim-soft: #FBFBF9;
  --color-primary-dark: #0F1628;
  --color-secondary-green: #4A6FA5;
  --color-accent-gold: #4A6FA5;
  --color-text-medium: #5C5C66;
  --color-text-dark: #1E1E24;
}

/* ====================== L'OUTIL ====================== */
.sim .tool-container,
.sim .tool-wrapper,
.sim .simulator-card,
.sim.per-tool {
  background: #fff;
  border: 1px solid var(--sim-line);
  border-radius: 12px;
  padding: clamp(1.25rem, 3vw, 2rem);
}
.sim { display: block; }

/* En-tête d'outil / lien retour */
.sim .tool-back {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 600; color: var(--sim-blue);
  margin-bottom: 1.25rem;
}
.sim .tool-back:hover { color: var(--sim-navy); }

/* ---- Champs de formulaire ---- */
.sim form { margin: 0; }
.sim label,
.sim .form-label {
  display: block; font-size: .85rem; font-weight: 600;
  color: var(--sim-ink); margin-bottom: .35rem;
}
.sim .tool-input,
.sim .form-input,
.sim .form-select,
.sim input[type="number"],
.sim input[type="text"],
.sim select {
  width: 100%; padding: .7rem .9rem; font: inherit; font-size: .95rem;
  color: var(--sim-ink); background: #fff;
  border: 1px solid #D8DBE0; border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sim .tool-input:focus,
.sim .form-input:focus,
.sim .form-select:focus,
.sim input:focus,
.sim select:focus {
  outline: none; border-color: var(--sim-blue);
  box-shadow: 0 0 0 3px rgba(74, 111, 165, .18);
}
.sim .help-text,
.sim .input-description,
.sim .disclaimer-text { font-size: .78rem; color: #8A8F9A; margin-top: .3rem; }
.sim fieldset,
.sim .form-fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
.sim .form-group,
.sim .input-group { margin-bottom: 0; }

/* ---- Boutons de l'outil ---- */
.sim .btn-primary,
.sim .submit-button,
.sim button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.4rem; min-height: 46px;
  background: var(--sim-navy); color: #fff;
  border: 1px solid var(--sim-navy); border-radius: 8px;
  font-weight: 600; font-size: .9rem; cursor: pointer;
  transition: background-color .15s ease, transform .15s ease, box-shadow .2s ease;
}
.sim .btn-primary:hover,
.sim .submit-button:hover,
.sim button[type="submit"]:hover {
  background: #1d2c44; transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15, 22, 40, .22);
}
.sim .btn-secondary-tool-reset,
.sim button[type="reset"] {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.4rem; min-height: 46px;
  background: #EDF1F7; color: var(--sim-navy);
  border: 1px solid #D8DBE0; border-radius: 8px;
  font-weight: 600; font-size: .9rem; cursor: pointer;
  transition: background-color .15s ease;
}
.sim .btn-secondary-tool-reset:hover,
.sim button[type="reset"]:hover { background: #e0e6ef; }

/* ---- Barre de progression ---- */
.sim .progress-contextual,
.sim .progress-bar {
  position: relative; width: 100%; height: 8px;
  background: var(--sim-line); border-radius: 999px;
  overflow: hidden; margin-bottom: 1.25rem;
}
.sim .progress-fill {
  position: absolute; inset: 0 auto 0 0; height: 100%;
  background: var(--sim-blue); border-radius: 999px;
  transition: width .35s cubic-bezier(.22, 1, .36, 1);
}
.sim .progress-text { font-size: .78rem; color: var(--sim-muted); }

/* ---- Résultats ---- */
.sim .result-section,
.sim .results-area,
.sim .per-results {
  margin-top: 1.75rem; padding: 1.5rem;
  background: var(--sim-soft); border: 1px solid var(--sim-line);
  border-radius: 10px;
}
.sim .result-section > h3,
.sim .results-area > h3 {
  font-size: 1.15rem; font-weight: 700; color: var(--sim-navy);
  margin-bottom: 1rem; text-align: center;
}
.sim .result-summary p { margin-bottom: .5rem; font-size: .95rem; color: var(--sim-muted); }
.sim .result-summary strong { color: var(--sim-ink); font-weight: 600; }
.sim .mensualite-value,
.sim .final-capacity,
.sim .final-capital {
  color: var(--sim-blue); font-weight: 700;
}
.sim .mensualite-value { font-size: 1.5rem; display: block; }

/* Cartes de résultat / scénarios */
.sim .result-comparison-grid,
.sim .scenario-input-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem; margin: 1rem 0;
}
.sim .result-scenario-card,
.sim .per-result-card,
.sim .per-card,
.sim .per-metric,
.sim .scenario-container {
  background: #fff; border: 1px solid var(--sim-line);
  border-radius: 10px; padding: 1.1rem;
}
.sim .result-scenario-card .scenario-title,
.sim .per-result-card h3 { font-size: .95rem; color: var(--sim-ink); margin-bottom: .4rem; }

/* ---- Graphiques (Plotly / charts maison) ---- */
.sim .chart-container {
  margin: 1.25rem 0; padding: 1.25rem;
  background: #fff; border: 1px solid var(--sim-line);
  border-radius: 10px; min-height: 320px; overflow: hidden;
}
.sim .chart-container h4 {
  font-size: .95rem; font-weight: 600; color: var(--sim-navy);
  margin-bottom: .75rem; text-align: center;
}
.sim .chart-container > div { width: 100% !important; max-width: 100%; }

/* Mini-graphiques en barres maison */
.sim .simple-chart { display: grid; gap: .7rem; padding: .85rem;
  border: 1px solid var(--sim-line); border-radius: 8px; background: var(--sim-soft); }
.sim .simple-chart-row {
  display: grid; grid-template-columns: minmax(110px, .34fr) minmax(0, 1fr) auto;
  gap: .65rem; align-items: center; font-size: .85rem;
}
.sim .simple-chart-track {
  display: block; height: 10px; border-radius: 999px;
  background: #e8edf2; overflow: hidden;
}
.sim .simple-chart-fill { display: block; height: 100%; border-radius: inherit; background: var(--sim-navy); }
.sim .simple-chart-fill.alt { background: var(--sim-blue); }
.sim .simple-chart-fill.soft { background: #9aa9bd; }

/* ---- Commentaires & encadrés ---- */
.sim .user-friendly-comment {
  font-size: .82rem; color: var(--sim-muted); margin-top: .6rem;
  padding: .7rem .9rem; background: #EDF1F7;
  border-left: 3px solid var(--sim-blue); border-radius: 0 6px 6px 0;
}
.sim .message-area { font-size: .85rem; }
.sim .info-section,
.sim .card-header-main-content { color: var(--sim-muted); }

/* Contrôle segmenté (Salarié / TNS…) */
.sim .per-segment {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .35rem 0 0;
}
.sim .per-segment label,
.sim .per-segment button {
  display: flex; align-items: center; justify-content: center;
  padding: .65rem; border: 1px solid #D8DBE0; border-radius: 8px;
  background: #fff; font-weight: 600; font-size: .85rem; cursor: pointer;
}
.sim .per-segment input { position: absolute; opacity: 0; pointer-events: none; }
.sim .per-segment input:checked + label,
.sim .per-segment .active {
  background: var(--sim-navy); color: #fff; border-color: var(--sim-navy);
}

/* Infobulles */
.sim .tooltip-container { position: relative; display: inline-flex; }
.sim .tooltip-content {
  position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%);
  background: var(--sim-navy); color: #fff; font-size: .72rem; line-height: 1.5;
  padding: .5rem .7rem; border-radius: 6px; width: max-content; max-width: 240px;
  opacity: 0; visibility: hidden; transition: opacity .15s ease; z-index: 5;
}
.sim .tooltip-trigger:hover + .tooltip-content,
.sim .tooltip-container:hover .tooltip-content { opacity: 1; visibility: visible; }

/* Layouts spécifiques (PER, scénarios) */
.sim .per-grid,
.sim .per-form-grid,
.sim .per-results {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem;
}
.sim .per-intro { margin-bottom: 1.25rem; }
.sim .per-actions,
.sim .submit-button-container,
.sim .btn-back-container-bottom {
  display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem;
}
.sim .per-note,
.sim .per-warning {
  font-size: .82rem; color: var(--sim-muted);
  padding: .8rem 1rem; background: #FFF7ED;
  border-left: 3px solid #B45309; border-radius: 0 6px 6px 0; margin-top: 1.25rem;
}

/* ====================== UTILITAIRES ======================
   Sous-ensemble des classes Tailwind utilisées par les
   simulateurs — implémenté localement pour supprimer le CDN. */
.sim .block { display: block; }
.sim .flex { display: flex; }
.sim .inline-flex { display: inline-flex; }
.sim .grid { display: grid; }
.sim .hidden { display: none; }
.sim .flex-col { flex-direction: column; }
.sim .flex-grow { flex-grow: 1; }
.sim .items-center { align-items: center; }
.sim .text-center { text-align: center; }
.sim .w-full { width: 100%; }
.sim .italic { font-style: italic; }
.sim .cursor-help { cursor: help; }
.sim .transition-colors { transition: color .15s ease, background-color .15s ease; }

.sim .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.sim .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sim .gap-4 { gap: 1rem; }
.sim .gap-x-6 { column-gap: 1.5rem; }
.sim .gap-y-4 { row-gap: 1rem; }

.sim .font-medium { font-weight: 500; }
.sim .font-semibold { font-weight: 600; }
.sim .font-bold { font-weight: 700; }
.sim .text-xs { font-size: .75rem; }
.sim .text-sm { font-size: .875rem; }
.sim .text-md, .sim .md\:text-md { font-size: 1rem; }
.sim .text-lg { font-size: 1.125rem; }
.sim .text-2xl { font-size: 1.5rem; }

.sim .rounded { border-radius: 6px; }
.sim .rounded-lg { border-radius: 8px; }
.sim .border { border: 1px solid var(--sim-line); }
.sim .border-green-200 { border-color: #cfe3d6; }
.sim .border-blue-200 { border-color: #cdd9ea; }
.sim .bg-white { background: #fff; }
.sim .bg-green-50 { background: #F1F7F2; }
.sim .bg-blue-50 { background: #EDF1F7; }

.sim .mb-1 { margin-bottom: .25rem; }
.sim .mb-3 { margin-bottom: .75rem; }
.sim .mb-4 { margin-bottom: 1rem; }
.sim .mb-6 { margin-bottom: 1.5rem; }
.sim .mb-8 { margin-bottom: 2rem; }
.sim .mt-1 { margin-top: .25rem; }
.sim .mt-2 { margin-top: .5rem; }
.sim .mt-4 { margin-top: 1rem; }
.sim .mt-6 { margin-top: 1.5rem; }
.sim .mt-8 { margin-top: 2rem; }
.sim .ml-1 { margin-left: .25rem; }
.sim .ml-2 { margin-left: .5rem; }
.sim .mr-1 { margin-right: .25rem; }
.sim .mr-2 { margin-right: .5rem; }
.sim .p-3 { padding: .75rem; }
.sim .p-4 { padding: 1rem; }
.sim .space-x-2 > * + * { margin-left: .5rem; }
.sim .space-y-3 > * + * { margin-top: .75rem; }
.sim .space-y-8 > * + * { margin-top: 2rem; }

.sim .text-gray-500 { color: #8A8F9A; }
.sim .text-gray-600 { color: #5C5C66; }
.sim .text-gray-700 { color: #3F4350; }
.sim .text-gray-800 { color: #1E1E24; }
.sim .text-green-600 { color: #2E7D5A; }
.sim .text-green-800 { color: #1f5740; }
.sim .text-blue-500, .sim .text-blue-600 { color: #4A6FA5; }
.sim .text-blue-800 { color: #34507a; }
.sim .text-red-600 { color: #C0392B; }
.sim .text-orange-600 { color: #B45309; }
.sim .text-purple-600 { color: #4A6FA5; }
.sim .text-\[var\(--color-primary-dark\)\] { color: #0F1628; }
.sim .text-\[var\(--color-secondary-green\)\] { color: #4A6FA5; }
.sim .text-\[var\(--color-text-medium\)\] { color: #5C5C66; }

@media (min-width: 640px) {
  .sim .sm\:flex-row { flex-direction: row; }
  .sim .sm\:w-auto { width: auto; }
}
@media (min-width: 768px) {
  .sim .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sim .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sim .md\:text-3xl { font-size: 1.875rem; }
}
@media (max-width: 560px) {
  .sim .grid-cols-2 { grid-template-columns: minmax(0, 1fr); }
  .sim .per-segment { grid-template-columns: 1fr 1fr; }
}

/* Hero compact pour les pages outils — le simulateur reste prioritaire */
.product-hero--compact { min-height: 0; }
.product-hero--compact .product-hero-copy { padding: 3.25rem 0; }
@media (max-width: 768px) {
  .product-hero--compact .product-hero-copy { padding: 2.5rem 0; }
}