/* Simulation rachat de credit */

.sim-page {
  --sim-blue: #4738de;
  --sim-blue-dark: #3125b8;
  --sim-red: #ec1c24;
  --sim-green: #bff574;
  --sim-bg: #f7f7fb;
  --sim-soft: #fdf3f4;
  --sim-lavender: #ececff;
  --sim-text: #282828;
  --sim-muted: #687086;
  --sim-border: #e5e7f2;
  --sim-shadow: 0 18px 46px rgba(31, 35, 85, 0.12);
  font-family: 'Poppins', Arial, sans-serif;
  color: var(--sim-text);
  background: var(--sim-bg);
  overflow-x: hidden;
}

.sim-page *,
.sim-page *::before,
.sim-page *::after {
  box-sizing: border-box;
}

.sim-page h1,
.sim-page h2,
.sim-page h3,
.sim-page h4 {
  font-family: 'Manrope', 'Poppins', Arial, sans-serif;
}

.sim-header {
  background: var(--sim-soft);
  padding: 26px 20px 18px;
  text-align: center;
}

.sim-breadcrumb {
  max-width: 1180px;
  margin: 0 auto 18px;
}

.sim-breadcrumb__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  color: #667085;
  font-size: 12px;
}

.sim-breadcrumb__inner a {
  color: #2d3345;
  text-decoration: none;
}

.sim-breadcrumb__inner a:hover {
  color: var(--sim-blue);
}

.sim-header h1 {
  max-width: 980px;
  margin: 0 auto;
  color: var(--sim-red);
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.15;
}

.sim-calculator {
  background: var(--sim-soft);
  padding: 8px 20px 44px;
}

.sim-calculator__inner {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.sim-calc-left,
.sim-calc-right {
  background: #fff;
  border: 1px solid var(--sim-border);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(31, 35, 85, 0.08);
  padding: 22px 24px 24px;
  min-width: 0;
}

.sim-calc-header {
  margin: 0 0 22px;
  color: var(--sim-blue);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sim-form-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
}

.sim-form-group label {
  margin: 0;
  color: #202638;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.sim-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 164px;
  border: 1px solid var(--sim-blue);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}

.sim-toggle button {
  min-height: 34px;
  border: 0;
  background: transparent;
  color: var(--sim-blue);
  cursor: pointer;
  font: 700 13px/1 'Poppins', Arial, sans-serif;
}

.sim-toggle button.active {
  color: #fff;
  background: var(--sim-blue);
}

.sim-input-group {
  display: flex;
  min-width: 0;
  height: 48px;
  border: 1px solid #cfd4f4;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.sim-input-group input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  padding: 0 16px;
  color: #242b3d;
  font-size: 15px;
  font-family: 'Poppins', Arial, sans-serif;
}

.sim-input-group input::placeholder {
  color: #a0a6b8;
}

.sim-input-group .currency {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 0 12px;
  background: var(--sim-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.sim-calc-right {
  background: #fff;
}

.sim-result-box {
  margin: 0 0 22px;
  padding: 0;
  text-align: center;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.sim-result-box > span,
.sim-sliders p,
.sim-charts p {
  display: block;
  margin: 0 0 11px;
  color: #202638;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.sim-result-val {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 7px 18px;
  color: #555e73;
  border-radius: 8px;
}

.sim-result-val strong {
  color: var(--sim-blue);
  font-size: 22px;
  font-weight: 800;
}

.sim-result-val > span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding-left: 10px;
  border-left: 1px solid #cdd2e5;
  color: #6d7486;
  font-size: 12px;
}

.sim-result-val > span strong {
  color: #232938;
  font-size: 14px;
}

.sim-slider-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 22px;
}

.sim-slider-item label {
  display: block;
  margin-bottom: 6px;
  color: #687086;
  font-size: 12px;
  font-weight: 600;
}

.sim-slider-val {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  border-radius: 7px;
  background: #eff1f7;
  color: #22283a;
  font-size: 13px;
  font-weight: 700;
}

.sim-slider-item input[type="range"] {
  width: 100%;
  accent-color: var(--sim-blue);
}

.sim-charts {
  margin-bottom: 20px;
}

.sim-charts-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.sim-chart {
  text-align: center;
}

.sim-chart-circle {
  width: 86px;
  height: 86px;
  margin: 0 auto 8px;
  border-radius: 50%;
  border: 11px solid #eef0f7;
  border-top-color: var(--sim-blue);
  position: relative;
}

.sim-chart-circle span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #232938;
  font-size: 16px;
  font-weight: 800;
}

.sim-chart:first-child .sim-chart-circle {
  border-top-color: #a3acc5;
  border-right-color: #a3acc5;
}

.sim-chart--blue .sim-chart-circle {
  border-color: #dfe3f1;
  border-top-color: var(--sim-blue);
  border-right-color: var(--sim-blue);
}

.sim-chart .label {
  display: block;
  margin-bottom: 3px;
  color: #9ba2b4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.sim-chart .val {
  display: block;
  color: #232938;
  font-size: 14px;
  font-weight: 800;
}

.sim-chart .sub {
  display: block;
  color: #687086;
  font-size: 10px;
}

.sim-chart-arrow {
  color: #8b91a5;
  font-size: 18px;
}

.sim-calc-actions {
  text-align: center;
}

.sim-details {
  margin: 0 0 20px;
  padding: 18px;
  border: 1px solid var(--sim-border);
  border-radius: 10px;
  background: #f8f9ff;
}

.sim-details__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.sim-details__item {
  padding: 14px;
  border-radius: 8px;
  background: #fff;
}

.sim-details__item span,
.sim-details__item strong {
  display: block;
}

.sim-details__item span {
  margin-bottom: 6px;
  color: #697188;
  font-size: 12px;
  font-weight: 600;
}

.sim-details__item strong {
  color: #232938;
  font-size: 16px;
  font-weight: 800;
}

.btn-green,
.sim-calc-actions .btn-green,
.sim-sidebar__cta .btn-green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--sim-green);
  color: var(--sim-blue-dark);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn-green:hover,
.sim-calc-actions .btn-green:hover,
.sim-sidebar__cta .btn-green:hover {
  background: #aee95e;
  color: var(--sim-blue-dark);
  transform: translateY(-1px);
}

.sim-details-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  margin: 10px auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #687086;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}

.sim-details-link i {
  transition: transform 0.2s ease;
}

.sim-details-link[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.sim-intro {
  padding: 20px 20px 56px;
  background: var(--sim-bg);
}

.sim-intro__inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 30px;
  border-radius: 10px;
  background: #eceeff;
}

.sim-intro__inner p {
  margin: 0;
  color: var(--sim-blue);
  font-size: 13px;
  line-height: 1.65;
  text-align: center;
}

.sim-layout {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px 74px;
}

.sim-layout__inner {
  display: grid;
  grid-template-columns: 246px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.sim-sidebar {
  position: sticky;
  top: 24px;
}

.sim-sidebar__sommaire {
  margin-bottom: 18px;
  padding: 24px 22px;
  border-radius: 10px;
  background: #dedfff;
}

.sim-sidebar__sommaire h3 {
  margin: 0 0 16px;
  color: var(--sim-red);
  font-size: 22px;
  font-weight: 800;
}

.sim-sidebar__sommaire ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.sim-sidebar__sommaire a {
  display: block;
  padding-left: 13px;
  border-left: 3px solid var(--sim-blue);
  color: #343a55;
  font-size: 12px;
  line-height: 1.45;
  text-decoration: none;
}

.sim-sidebar__sommaire a:hover {
  color: var(--sim-blue);
}

.sim-sidebar__cta {
  padding: 24px 20px;
  border-radius: 10px;
  background: var(--sim-blue);
  color: #fff;
  text-align: center;
}

.sim-sidebar__cta p {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

.sim-sidebar__cta small {
  display: block;
  margin-top: 12px;
  color: rgba(255,255,255,0.78);
  font-size: 11px;
  line-height: 1.45;
}

.sim-content {
  min-width: 0;
}

.sim-content h2,
.sim-main-content .az-container h2,
.sim-main-content .az-element h2,
.sim-main-content .ck-content h2 {
  margin: 0 0 18px;
  color: var(--sim-blue, #004b92);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.28;
  text-transform: uppercase;
  scroll-margin-top: 130px;
}

.sim-content h2:not(:first-child),
.sim-main-content .az-container h2:not(:first-child),
.sim-main-content .az-element h2:not(:first-child),
.sim-main-content .ck-content h2:not(:first-child) {
  margin-top: 42px;
}

.sim-content h3,
.sim-main-content .az-container h3,
.sim-main-content .az-element h3,
.sim-main-content .ck-content h3 {
  margin: 24px 0 14px;
  color: #1F2937;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  scroll-margin-top: 130px;
}

.sim-content p,
.sim-content li,
.sim-main-content .az-container p,
.sim-main-content .az-container li,
.sim-main-content .az-element p,
.sim-main-content .az-element li,
.sim-main-content .ck-content p,
.sim-main-content .ck-content li {
  color: #444b5e;
  font-size: 13px;
  line-height: 1.75;
}

.sim-content p,
.sim-main-content .az-container p,
.sim-main-content .az-element p,
.sim-main-content .ck-content p {
  margin: 0 0 17px;
}

.sim-content ul,
.sim-main-content .az-container ul,
.sim-main-content .az-element ul,
.sim-main-content .ck-content ul {
  margin: 0 0 18px;
  padding-left: 20px;
}

.sim-content strong,
.sim-main-content .az-container strong,
.sim-main-content .az-element strong,
.sim-main-content .ck-content strong {
  color: #22283a;
}

.sim-note-box {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  margin: 32px 0;
}

.sim-note-box > img {
  width: 100%;
  height: 100%;
  min-height: 250px;
  border-radius: 10px;
  object-fit: cover;
}

.sim-note-content {
  align-self: center;
  margin-left: -22px;
  border: 1px solid var(--sim-red);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(236, 28, 36, 0.09);
}

.sim-note-header {
  width: max-content;
  min-width: 120px;
  margin: 0 auto;
  padding: 8px 18px;
  background: var(--sim-red);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.sim-note-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 18px 20px;
}

.sim-note-body i {
  color: var(--sim-red);
  font-size: 18px;
  margin-top: 4px;
}

.sim-note-body p {
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
}

.sim-img-text {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin: 28px 0 38px;
}

.sim-img-text--rev {
  grid-template-columns: minmax(0, 1fr) 235px;
}

.sim-img-text img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 12px 30px rgba(31, 35, 85, 0.1);
}

.sim-img-text--rev img + img {
  margin-top: 18px;
}

.sim-banner-images {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0 38px;
}

.sim-banner-images img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 12px 28px rgba(31, 35, 85, 0.09);
}

.qs-author {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 38px;
  padding: 20px 24px;
  border-radius: 8px;
  background: #dfe1ff;
}

.qs-author img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
}

.qs-author strong,
.qs-author span {
  display: block;
}

.qs-author strong {
  color: #252b3a;
  font-size: 13px;
}

.qs-author span {
  margin-top: 4px;
  color: #687086;
  font-size: 12px;
}

.qs-bottom-cta {
  padding: 0 20px 72px;
}

.qs-bottom-cta__inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 34px 24px;
  border-radius: 12px;
  background: var(--sim-blue);
  color: #fff;
  text-align: center;
}

.qs-bottom-cta h2 {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 800;
}

.btn-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--sim-red);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.qs-bottom-cta p {
  margin: 12px 0 0;
  color: rgba(255,255,255,0.86);
  font-size: 13px;
  font-weight: 600;
}

.qs-related {
  padding: 0 20px 74px;
}

.qs-related__inner {
  max-width: 980px;
  margin: 0 auto;
}

.qs-related h2 {
  margin: 0 0 26px;
  color: #33394c;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

.qs-related__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
}

.qs-related__grid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--sim-border);
  border-radius: 8px;
  background: #fff;
  color: #30364a;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(31, 35, 85, 0.04);
}

.qs-related__grid a:hover {
  color: var(--sim-blue);
  border-color: #cfd2ff;
}

@media (max-width: 1024px) {
  .sim-calculator__inner,
  .sim-intro__inner,
  .qs-bottom-cta__inner,
  .qs-related__inner {
    max-width: 900px;
  }

  .sim-layout__inner {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 22px;
  }

  .sim-form-group {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .sim-toggle,
  .sim-input-group {
    width: 100%;
  }
}

@media (max-width: 820px) {
  .sim-calculator {
    padding-bottom: 32px;
  }

  .sim-calculator__inner,
  .sim-layout__inner,
  .sim-img-text,
  .sim-img-text--rev,
  .sim-note-box,
  .qs-related__grid {
    grid-template-columns: 1fr;
  }

  .sim-calc-left,
  .sim-calc-right {
    padding: 20px 18px;
  }

  .sim-details__grid {
    grid-template-columns: 1fr;
  }

  .sim-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
  }

  .sim-note-content {
    margin-left: 0;
    margin-top: -12px;
  }

  .sim-note-box > img {
    min-height: 180px;
  }

  .sim-banner-images {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .sim-header {
    padding: 22px 16px 16px;
  }

  .sim-breadcrumb__inner {
    justify-content: flex-start;
  }

  .sim-header h1 {
    text-align: left;
    font-size: 28px;
  }

  .sim-calculator,
  .sim-intro,
  .sim-layout,
  .qs-bottom-cta,
  .qs-related {
    padding-left: 14px;
    padding-right: 14px;
  }

  .sim-slider-row,
  .sim-charts-row {
    grid-template-columns: 1fr;
  }

  .sim-form-group {
    margin-bottom: 14px;
  }

  .sim-input-group {
    height: 42px;
  }

  .sim-input-group .currency {
    min-width: 64px;
    font-size: 11px;
    padding: 0 10px;
  }

  .sim-chart-arrow {
    transform: rotate(90deg);
  }

  .sim-result-val {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .sim-result-val > span {
    border-left: 0;
    padding-left: 0;
  }

  .sim-toggle {
    width: 100%;
  }

  .sim-toggle button {
    min-height: 40px;
  }

  .sim-content h2 {
    font-size: 18px;
  }

  .sim-content p,
  .sim-content li {
    font-size: 12px;
    line-height: 1.7;
  }

  .qs-author {
    align-items: flex-start;
    padding: 16px;
  }
}


/* ==========================================================================
   STYLES POUR GABARIT PAGE CONTENU (.sim-hero, .sim-quote)
   ========================================================================== */

.sim-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 100px 20px 120px; /* Ajustement du padding */
  color: #fff;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Changé de center à flex-start */
  text-align: left; /* Changé de center à left */
}

.sim-hero__overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7));
  z-index: 1;
}

.sim-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1200px; /* Augmenté pour correspondre à la maquette */
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  text-align: left;
}

.sim-hero__title {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 25px;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  text-align: left;
}

.sim-hero__checks {
  list-style: none;
  padding: 0;
  margin: 0 0 35px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: fit-content;
}

.sim-hero__checks li {
  font-size: 1.05rem;
  font-weight: 500;
  position: relative;
  padding-left: 30px;
  text-align: left;
}

.sim-hero__checks li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #a4ce16; /* Vert clair */
  font-weight: bold;
}

.sim-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 15px;
  margin-top: 20px;
}

.sim-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #e30613; /* Rouge Solutis */
  color: #fff;
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.3s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.sim-hero__cta:hover {
  background-color: #c80511;
  color: #fff;
}

.sim-hero__cta-icon {
  margin-right: 10px;
  height: 18px;
  width: auto;
  filter: brightness(0) invert(1); /* Rendre l'icône blanche */
}

.sim-quote {
  position: relative;
  background-color: #fff;
  padding: 35px 50px;
  max-width: 900px;
  margin: -60px auto 40px; /* Chevauche le hero */
  z-index: 3;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  border-radius: 12px;
  border: 1px solid #e0e5ed;
  text-align: center;
}

.sim-quote__text {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.6;
  color: #333;
  margin: 0;
}

.sim-quote__mark {
  color: var(--sim-blue);
  font-size: 2rem;
  line-height: 1;
  position: absolute;
}

.sim-quote__mark--open {
  top: 20px;
  left: 20px;
}

.sim-quote__mark--close {
  bottom: 20px;
  right: 20px;
}

@media (max-width: 768px) {
  .sim-hero { padding: 60px 15px 80px; }
  .sim-hero__title { font-size: 1.8rem; }
  .sim-hero__checks { align-items: center; }
  .sim-hero__checks li { text-align: center; }
  .sim-hero__ctas { flex-direction: column; }
  .sim-quote { margin: -30px 15px 40px; padding: 30px; }
}

/* ==========================================================================
   STYLES POUR LE CONTENU DXPR (Classes pures, sans inline)
   ========================================================================== */
.dxpr-title-primary { color: #1a2f7c; font-size: 1.4rem; font-weight: 700; text-transform: uppercase; margin-bottom: 1.5rem; margin-top: 3rem; }
.dxpr-title-secondary { color: #333333; font-size: 1.15rem; font-weight: 700; margin-bottom: 1rem; margin-top: 1.5rem; }
.dxpr-text-bold { font-weight: 700; }
.dxpr-text-primary { color: #1a2f7c; }
.dxpr-text-danger { color: #e30613; }

.dxpr-sidebar { position: sticky; top: 20px; }
.dxpr-sidebar-box { background: #fff; border: 1px solid #e0e5ed; border-radius: 8px; padding: 1.5rem; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); margin-bottom: 1.5rem; }
.dxpr-sidebar-title { color: #e30613; font-size: 1.2rem; font-weight: 700; text-align: center; margin-bottom: 1rem; }
.dxpr-sidebar-link { display: block; padding: 0.25rem 0.5rem; font-size: 0.85rem; color: #333; text-decoration: none; border-left: 2px solid transparent; margin-bottom: 0.5rem; }
.dxpr-sidebar-link.active { font-weight: 700; color: #1a2f7c; border-left-color: #1a2f7c; }
.dxpr-sidebar-cta { background: #1a2f7c; color: #fff; border-radius: 8px; padding: 1.5rem; text-align: center; margin-bottom: 1.5rem; }
.dxpr-sidebar-cta h4 { font-size: 0.95rem; font-weight: 700; line-height: 1.4; margin-bottom: 1rem; color: #fff; }
.dxpr-btn-danger { display: inline-block; background: #e30613; color: #fff; border-radius: 50px; font-weight: 700; font-size: 0.85rem; padding: 0.6rem 1rem; text-decoration: none; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); }
.dxpr-btn-danger:hover { color: #fff; background: #c80511; }

.dxpr-card-red { background: #fff; border: 1px solid #e30613; border-radius: 12px; padding: 1.5rem; text-align: center; height: 100%; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); }
.dxpr-card-red strong { display: block; color: #e30613; font-size: 0.9rem; text-transform: uppercase; margin-bottom: 0.5rem; }

.dxpr-tip-box { background: #fff; border: 1px solid #e0e5ed; border-radius: 8px; padding: 2.5rem 1.5rem 1.5rem; margin-top: 3rem; margin-bottom: 1.5rem; position: relative; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); text-align: center; font-size: 0.9rem; }
.dxpr-tip-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #e30613; color: #fff; font-size: 0.8rem; font-weight: 700; padding: 0.4rem 1rem; border-radius: 50px; }

.dxpr-example-header { display: flex; align-items: center; border: 1px solid #e0e5ed; border-radius: 8px; padding: 1rem; background: #fff; margin-bottom: 1.5rem; }
.dxpr-example-header img { width: 40px; height: 40px; margin-right: 1rem; }
.dxpr-example-grid { display: flex; flex-wrap: wrap; border: 1px solid #e0e5ed; border-radius: 8px; background: #fff; margin-bottom: 1.5rem; }
.dxpr-example-col { flex: 1 1 25%; padding: 1rem; text-align: center; border-right: 1px solid #e0e5ed; }
.dxpr-example-col:last-child { border-right: none; }
.dxpr-example-col img { height: 40px; margin-bottom: 10px; }
.dxpr-example-highlight { background: #fdf2f3; padding: 1rem; border-radius: 8px; text-align: center; font-size: 0.9rem; margin-bottom: 1rem; }
.dxpr-example-note { background: #f0f4fb; color: #1a2f7c; padding: 1rem; border-radius: 8px; text-align: center; font-weight: 700; font-size: 0.9rem; margin-bottom: 1.5rem; }
.dxpr-example-result { background: #f0f4fb; border-left: 4px solid #1a2f7c; padding: 1.5rem; border-radius: 8px; font-size: 0.9rem; }

.dxpr-timeline { position: relative; padding: 2rem 0; margin-top: 1.5rem; }
.dxpr-timeline-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #e0e5ed; transform: translateX(-50%); z-index: 0; }
.dxpr-timeline-step { display: flex; align-items: center; position: relative; z-index: 1; margin-bottom: 3rem; }
.dxpr-timeline-step-reverse { flex-direction: row-reverse; }
.dxpr-timeline-col-text { flex: 1; padding: 0 2rem; }
.dxpr-timeline-col-center { width: 60px; display: flex; justify-content: center; }
.dxpr-timeline-circle { width: 40px; height: 40px; background: #1a2f7c; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; box-shadow: 0 0 0 6px #fff; }
.dxpr-timeline-box { background: #fff; border: 1px solid #e0e5ed; border-radius: 8px; padding: 1rem; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); font-size: 0.85rem; }
.dxpr-timeline-title { font-weight: 700; color: #e30613; font-size: 0.95rem; display: block; margin-bottom: 0.5rem; text-transform: uppercase; }
.dxpr-timeline-step:nth-child(even) .dxpr-timeline-col-text:first-child { text-align: right; }
.dxpr-timeline-step:nth-child(odd) .dxpr-timeline-col-text:first-child { text-align: right; }

.dxpr-faq-wrapper { background: #f0f4fb; padding: 2rem; border-radius: 8px; margin-top: 3rem; }
.dxpr-faq-title { text-align: center; font-weight: 700; text-transform: uppercase; margin-bottom: 1rem; margin-top: 0; color: #1a2f7c; font-size: 1.3rem; }
.dxpr-faq-subtitle { text-align: center; font-size: 0.85rem; margin-bottom: 2rem; }
.dxpr-accordion-btn { background: #fff; color: #333; font-weight: 700; border: none; box-shadow: none; font-size: 0.95rem; }
.dxpr-accordion-btn:not(.collapsed) { background: #fff; color: #333; box-shadow: none; }
.dxpr-accordion-btn:focus { box-shadow: none; }
.dxpr-accordion-icon { font-size: 1.2rem; margin-right: 1rem; color: #1a2f7c; font-weight: 400; }

.dxpr-author-box { display: flex; align-items: center; background: #fff; border: 1px solid #e0e5ed; border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); }
.dxpr-charte-box { display: flex; align-items: flex-start; background: #fff; border: 1px solid #1a2f7c; border-radius: 8px; padding: 1.5rem; }

.dxpr-related-link { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border: 1px solid #e0e5ed; border-radius: 8px; background: #fff; color: #333; text-decoration: none; font-weight: 700; font-size: 0.85rem; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); height: 100%; transition: all 0.2s; }
.dxpr-related-link:hover { border-color: #1a2f7c; color: #1a2f7c; }
.dxpr-related-arrow { font-size: 1.5rem; color: #1a2f7c; line-height: 1; }

@media (max-width: 768px) {
  .dxpr-example-col { flex: 1 1 50%; border-right: none; border-bottom: 1px solid #e0e5ed; }
  .dxpr-timeline-line { display: none; }
  .dxpr-timeline-step { flex-direction: column !important; text-align: center !important; }
  .dxpr-timeline-step .dxpr-timeline-col-text:first-child { text-align: center !important; margin-bottom: 1rem; }
  .dxpr-timeline-circle { margin-bottom: 1rem; }
  .dxpr-charte-box { flex-direction: column; }
}

/* ==========================================================================
   STYLES POUR GABARIT PAGE PRODUIT (.produit-hero)
   ========================================================================== */
.produit-hero {
  background-color: var(--sim-soft); /* Fond doux */
  padding: 60px 20px;
  position: relative;
  overflow: hidden;
}

.produit-hero__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.produit-hero__content {
  flex: 0 0 55%;
}

.produit-hero__title {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 25px;
  color: var(--sim-blue);
}

.produit-hero__checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 35px 0;
}

.produit-hero__checklist li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  font-size: 1.1rem;
  font-weight: 500;
}

.produit-hero__checklist li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--sim-red); /* Check rouge */
  font-weight: bold;
}

.produit-hero__cta {
  display: inline-block;
  padding: 14px 35px;
  font-size: 1.1rem;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.produit-hero__image {
  flex: 0 0 40%;
  display: flex;
  justify-content: center;
}

.produit-hero__image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: var(--sim-shadow);
}

@media (max-width: 991px) {
  .produit-hero__container {
    flex-direction: column-reverse;
    text-align: center;
  }
  .produit-hero__checklist li {
    text-align: left;
    display: inline-block;
  }
  .produit-hero__checklist {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/* ==========================================================================
   STYLES POUR GABARIT PAGE GUIDE (.guide-page-header)
   ========================================================================== */
.guide-page-header {
  background-color: var(--sim-lavender);
  padding: 50px 20px 30px;
  text-align: center;
}

.guide-page-header__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.guide-page-header__title {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--sim-blue);
  margin-bottom: 20px;
}

/* ==========================================================================
   DXPR SIDEBAR & BODY CUSTOM STYLING (PERSISTENT IN THEME CSS)
   ========================================================================== */

/* 1. Sommaire Box */
.sim-sidebar-sommaire {
  background-color: #e8ecff !important;
  border-radius: 20px !important;
  padding: 28px 22px !important;
  position: relative !important;
  margin-bottom: 25px !important;
}

.sim-sidebar-sommaire h3, 
.sim-sidebar-sommaire h4,
.sim-sidebar-sommaire .sommaire-title {
  color: #e63946 !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin-bottom: 22px !important;
  border: none !important;
  background: none !important;
}

.sim-sidebar-sommaire ul,
.sim-sidebar-sommaire .sommaire-list {
  position: relative !important;
  padding-left: 20px !important;
  list-style: none !important;
  margin: 0 !important;
}

.sim-sidebar-sommaire ul::before,
.sim-sidebar-sommaire .sommaire-list::before {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  top: 12px !important;
  bottom: 12px !important;
  width: 2px !important;
  border-left: 2px dashed #b4c2ff !important;
}

.sim-sidebar-sommaire a,
.sim-sidebar-sommaire ul li a {
  position: relative !important;
  display: block !important;
  padding: 8px 0 !important;
  color: #2d3748 !important;
  font-size: 0.92rem !important;
  line-height: 1.45 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  border: none !important;
}

.sim-sidebar-sommaire a.active,
.sim-sidebar-sommaire ul li:first-child a {
  color: #4b44e0 !important;
  font-weight: 600 !important;
}

.sim-sidebar-sommaire a.active::before,
.sim-sidebar-sommaire ul li:first-child a::before {
  content: "" !important;
  position: absolute !important;
  left: -20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 5px !important;
  height: 24px !important;
  background-color: #4b44e0 !important;
  border-radius: 4px !important;
}

/* 2. Encart Violet */
.sim-sidebar-purple {
  background-color: #4b44e0 !important;
  border-radius: 20px !important;
  padding: 32px 22px !important;
  text-align: center !important;
  box-shadow: 0 10px 30px rgba(75, 68, 224, 0.25) !important;
  margin-bottom: 25px !important;
}

.sim-sidebar-purple p.purple-title,
.sim-sidebar-purple p:first-child {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  line-height: 1.45 !important;
  letter-spacing: 0.3px !important;
  margin-bottom: 22px !important;
  text-transform: uppercase !important;
}

.sim-sidebar-purple a.btn-lime,
.sim-sidebar-purple a.btn,
.sim-sidebar-purple a {
  background-color: #b0f736 !important;
  color: #4b44e0 !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 13px 20px !important;
  display: block !important;
  width: 100% !important;
  text-decoration: none !important;
  text-align: center !important;
  box-shadow: 0 4px 15px rgba(176, 247, 54, 0.4) !important;
}

.sim-sidebar-purple p.purple-sub,
.sim-sidebar-purple p:nth-of-type(2),
.sim-sidebar-purple p:nth-of-type(3) {
  color: #ffffff !important;
  font-size: 0.78rem !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

/* 3. Partager */
.sim-sidebar-share {
  margin-top: 24px !important;
}

.sim-sidebar-share p {
  color: #2d3748 !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  margin-bottom: 12px !important;
}

.sim-sidebar-share a {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1.5px solid #2d3748 !important;
  color: #2d3748 !important;
  font-weight: bold !important;
  font-size: 0.95rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  margin-right: 10px !important;
  background: transparent !important;
}

/* =========================================
   DXPR CUSTOM STYLES (Sommaire & Sidebar)
   ========================================= */

.sim-sommaire-box {
    background-color: #e5e8fb !important;
    border-radius: 20px !important;
    padding: 28px 22px !important;
    position: relative !important;
    margin-bottom: 1.5rem !important;
}

.sim-sommaire-box h3 {
    color: #e81b25 !important; /* bright red */
    font-size: 1.8rem !important;
    font-weight: 500 !important;
    text-align: center !important;
    margin-bottom: 22px !important;
}

.sim-sommaire-box ul {
    position: relative !important;
    padding-left: 25px !important;
    padding-right: 15px !important; /* space for scrollbar */
    list-style: none !important;
    margin: 0 !important;
    max-height: 380px !important;
    overflow-y: auto !important;
}

/* Custom Scrollbar for Sommaire */
.sim-sommaire-box ul::-webkit-scrollbar {
    width: 6px !important;
}
.sim-sommaire-box ul::-webkit-scrollbar-track {
    background: transparent !important;
}
.sim-sommaire-box ul::-webkit-scrollbar-thumb {
    background-color: #ffffff !important;
    border-radius: 10px !important;
}
.sim-sommaire-box ul::before {
    content: "";
    position: absolute !important;
    left: 4px !important;
    top: 4px !important;
    height: calc(100% - 8px) !important;
    width: 2px !important;
    border-left: 3px dashed #d0d6fb !important;
}
.sim-sommaire-box ul li {
    position: relative !important;
    margin-bottom: 18px !important;
}
.sim-sommaire-box ul li a {
    color: #3b3a44 !important;
    font-weight: 400 !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    display: block !important;
}
.sim-sommaire-box ul li a:hover {
    color: #4933d6 !important;
}

.sim-sommaire-box ul li.active::before,
.sim-sommaire-box ul li.is-active::before {
    content: "";
    position: absolute !important;
    left: -22px !important;
    top: 2px !important;
    width: 4px !important;
    height: 18px !important;
    background-color: #4933d6 !important;
    border-radius: 4px !important;
    display: inline-block !important;
}
.sim-sommaire-box ul li.active a,
.sim-sommaire-box ul li.is-active a {
    color: #4933d6 !important;
    font-weight: 500 !important;
}

/* Sidebar Purple Box */
.sim-purple-box {
    background-color: #4933d6 !important;
    border-radius: 20px !important;
    padding: 32px 22px !important;
    text-align: center !important;
    box-shadow: 0 10px 30px rgba(73, 51, 214, 0.25) !important;
    margin-bottom: 1.5rem !important;
}
.sim-purple-box h4 {
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 1.05rem !important;
    line-height: 1.45 !important;
    margin-bottom: 25px !important;
    text-transform: uppercase !important;
    text-align: center !important;
}
.sim-purple-box a.sim-btn {
    background-color: #bef45a !important; /* lime green from image */
    color: #4933d6 !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 14px 20px !important;
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
    text-align: center !important;
    margin-bottom: 15px !important;
}
.sim-purple-box a.sim-btn:hover {
    color: #4933d6 !important;
    background-color: #a0f020 !important;
}
.sim-purple-box p {
    color: #ffffff !important;
    font-size: 0.78rem !important;
    margin-bottom: 2px !important;
    text-align: center !important;
}
.sim-purple-box p.small-opacity {
    opacity: 0.9 !important;
    margin-bottom: 0 !important;
}

/* ==========================================================================
   RIGHT COLUMN — Main Content Styling (via .sim-main-content wrapper in Twig)
   These styles target the Twig wrapper, NOT CKEditor internals,
   so they persist even when the DXPR editor is active.
   ========================================================================== */

/* H2 Headings — purple uppercase */
.sim-main-content h2 {
    color: #3b30d8 !important;
    font-weight: 800 !important;
    font-size: 1.35rem !important;
    text-transform: uppercase !important;
    margin-top: 30px !important;
    margin-bottom: 16px !important;
    letter-spacing: 0.2px !important;
    font-style: italic !important;
}

/* H3 Subheadings */
.sim-main-content h3 {
    color: #1e1b4b !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    margin-top: 20px !important;
    margin-bottom: 12px !important;
}

/* Paragraphs */
.sim-main-content p {
    color: #4a4a5a !important;
    font-size: 0.9rem !important;
    line-height: 1.75 !important;
    margin-bottom: 14px !important;
}

/* Bold/strong text — purple accent */
.sim-main-content strong {
    color: #3b30d8 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-decoration-color: #3b30d8 !important;
    text-underline-offset: 2px !important;
}

/* Links in content */
.sim-main-content a {
    color: #3b30d8 !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

/* Lists — purple bullet points */
.sim-main-content ul {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-bottom: 20px !important;
}
.sim-main-content ul li {
    position: relative !important;
    padding-left: 22px !important;
    margin-bottom: 10px !important;
    color: #4a4a5a !important;
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
}
.sim-main-content ul li::before {
    content: "●";
    color: #3b30d8 !important;
    font-size: 0.7rem !important;
    position: absolute !important;
    left: 2px !important;
    top: 4px !important;
}

/* Images */
.sim-main-content img {
    border-radius: 16px !important;
    object-fit: cover !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Info Cards Row (3 columns with border) */
.sim-main-content .info-card {
    border: 1.5px solid #c7d2fe !important;
    border-radius: 14px !important;
    padding: 20px 16px !important;
    text-align: center !important;
    background: #fff !important;
    height: 100% !important;
}
.sim-main-content .info-card h4,
.sim-main-content .info-card .card-title {
    color: #e63946 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
}
.sim-main-content .info-card p {
    font-size: 0.82rem !important;
    color: #4a4a5a !important;
    text-decoration: none !important;
    margin-bottom: 4px !important;
    text-align: center !important;
}

/* Callout / "Bon à savoir" box */
.sim-main-content .callout-box {
    border: 2px solid #e63946 !important;
    border-radius: 16px !important;
    padding: 24px 20px !important;
    background: #fff !important;
    position: relative !important;
    margin: 30px 0 !important;
}
.sim-main-content .callout-box .callout-badge {
    position: absolute !important;
    top: -14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #e63946 !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    padding: 4px 18px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
}

/* Example section — light blue background box */
.sim-main-content .example-box {
    background: #eef1fd !important;
    border-radius: 16px !important;
    padding: 24px 20px !important;
    margin: 20px 0 !important;
}

/* Example credit cards */
.sim-main-content .credit-card {
    border: 1.5px solid #c7d2fe !important;
    border-radius: 14px !important;
    padding: 18px 14px !important;
    text-align: center !important;
    background: #fff !important;
}
.sim-main-content .credit-card h5 {
    color: #3b30d8 !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
}

/* Red bordered summary box */
.sim-main-content .summary-box {
    border-left: 4px solid #e63946 !important;
    background: #fef5f5 !important;
    padding: 18px 20px !important;
    border-radius: 0 12px 12px 0 !important;
    margin: 20px 0 !important;
}

/* Blue highlighted box */
.sim-main-content .highlight-box {
    background: #eef1fd !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin: 20px 0 !important;
    border-left: 4px solid #3b30d8 !important;
}

/* Partager icons */
.sim-sidebar-share p {
    color: #2d3748 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    margin-bottom: 12px !important;
}
.sim-sidebar-share a {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1.2px solid #2d3748 !important;
    color: #2d3748 !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    margin-right: 10px !important;
    background: transparent !important;
}
.sim-sidebar-share a:hover {
    background: #2d3748 !important;
    color: #fff !important;
}