/* Palette locale : les rôles du site restent inchangés hors du bloc. */
.sim {
  --color-bg: #1B2A6B;
  --color-soft: #1B2A6B;
  --color-ink: #F4F7FF;
  --color-muted: #C9D5F2;
  --color-accent: #A9B4FF;
  --color-border: #3A4C9A;
  --color-mist: #26398A;
  --sim-bg: var(--color-bg);
  --sim-surface: var(--color-soft);
  --sim-ink: var(--color-ink);
  --sim-body: var(--color-muted);
  --sim-muted: #A9B8E6;
  --sim-accent: var(--color-accent);
  --sim-accent-lit: #8FBBFF;
  --sim-line: var(--color-border);
  --sim-soft: var(--color-mist);
  --sim-btn-bg: #FFFFFF;
  --sim-btn-fg: #1B2A6B;
}
html[data-theme="dark"] .sim {
  --color-bg: #0F1636;
  --color-soft: #141C44;
  --color-ink: #EAF0FF;
  --color-muted: #B9C6E6;
  --color-accent: #9A9AFF;
  --color-border: #2B3766;
  --color-mist: #1A2350;
  --sim-muted: #8C9BC4;
  --sim-accent-lit: #8FBBFF;
  --sim-btn-bg: #FAFCFF;
  --sim-btn-fg: #1F2B4F;
}
/* Le simulateur remplit le conteneur de Concrètement, après le résultat. */
.sim { position: relative; z-index: 1; width: 100%; margin: 32px 0 0; padding: 0; scroll-margin-top: 100px; font-family: var(--font-body); font-weight: 400; line-height: 1.65; color: var(--sim-body); background: none; border: 0; box-shadow: none; border-radius: 0; }
.sim-band {position: relative; background: var(--sim-surface); border: 1px solid var(--sim-line); padding: 18px 24px; }
.sim-band::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--sim-accent), var(--sim-accent-lit)); }
.sim-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 14px 28px; align-items: center; }
.sim-eyebrow { display: block; margin-bottom: 2px; font: 500 10.5px/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--sim-accent); }
.sim-title { margin: 0; font: 400 clamp(18px, 2.2vw, 21px)/1.25 var(--font-display); color: var(--sim-ink); text-wrap: balance; }
.sim-label { display: block; margin-bottom: 2px; font: 500 10.5px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--sim-muted); }
.sim-val { float: right; font: 400 14px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--sim-ink); font-variant-numeric: tabular-nums; }
.sim-gain { font: 400 clamp(22px, 2.6vw, 28px)/1.15 var(--font-display); color: var(--sim-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sim-cta { display: inline-block; padding: 12px 20px; background: var(--sim-btn-bg); color: var(--sim-btn-fg); font: 400 13.5px var(--font-body); text-decoration: none; border-radius: 0; white-space: nowrap; }
.sim-method { margin: 12px 0 0; font-size: 12px; color: var(--sim-muted); }
#sim-heures { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; }
#sim-heures::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, var(--sim-accent) 0, var(--sim-accent-lit) var(--pct, 25%), var(--sim-line) var(--pct, 25%)); }
#sim-heures::-moz-range-track { height: 3px; background: var(--sim-line); }
#sim-heures::-moz-range-progress { height: 3px; background: linear-gradient(90deg, var(--sim-accent), var(--sim-accent-lit)); }
#sim-heures::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8.5px; background: var(--sim-surface); border: 2px solid var(--sim-ink); box-shadow: 0 0 0 4px var(--sim-soft); border-radius: 50%; }
#sim-heures::-moz-range-thumb { width: 16px; height: 16px; background: var(--sim-surface); border: 2px solid var(--sim-ink); box-shadow: 0 0 0 4px var(--sim-soft); border-radius: 50%; }
#sim-heures:focus-visible, .sim-cta:focus-visible { outline: 2px solid var(--sim-accent); outline-offset: 3px; }
@media (max-width: 900px) { .sim-grid { grid-template-columns: 1fr 1fr; } .sim-intro, .sim-cta-cell { grid-column: 1 / -1; } }
@media (max-width: 520px) { .sim-grid { grid-template-columns: 1fr; } .sim-band { padding: 16px; } .sim-gain { white-space: normal; } }

.sim-band { border-radius: 0; }
body.home-page #contenu > .home-demo--with-simulator { padding-bottom: 32px; }
@media (min-width: 721px) {
  .sim { margin-top: 48px; }
  body.home-page #contenu > .home-demo--with-simulator { padding-bottom: 48px; }
}
@media (min-width: 901px) { .sim-grid { min-height: 76px; } }
/* Préserver les tailles du bandeau face aux rôles typographiques globaux. */
@layer typography {
  html[data-theme] body .sim .sim-title { font: 400 clamp(18px, 2.2vw, 21px)/1.25 var(--font-display) !important; color: var(--sim-ink) !important; }
  html[data-theme] body .sim .sim-eyebrow { font: 500 10.5px/1.4 var(--font-body) !important; color: var(--sim-accent) !important; }
  html[data-theme] body .sim .sim-label { font: 500 10.5px/1.4 var(--font-body) !important; color: var(--sim-muted) !important; }
  html[data-theme] body .sim .sim-val { font: 400 14px var(--font-body) !important; color: var(--sim-ink) !important; }
  html[data-theme] body .sim #sim-valeur { font: inherit !important; color: inherit !important; }
  html[data-theme] body .sim #sim-gain { font: 400 clamp(22px, 2.6vw, 28px)/1.15 var(--font-display) !important; color: var(--sim-ink) !important; }
  html[data-theme] body .sim .sim-method { font-size: 12px !important; color: var(--sim-muted) !important; }
  html[data-theme] body .sim #sim-mois { font: inherit !important; color: inherit !important; }
  html[data-theme] body .sim .sim-cta { font: 400 13.5px var(--font-body) !important; color: var(--sim-btn-fg) !important; -webkit-text-fill-color: var(--sim-btn-fg) !important; }
}

/* Conserver les fonds et espacements existants malgré le déplacement de la section. */
body.home-page #contenu > .home-demo--with-simulator + .section { padding-bottom: 0; }
@layer refonte {
  html[data-theme="light"] body.home-page #contenu > .home-demo--with-simulator ~ section.section:nth-of-type(odd) {
    background-color: #FFFFFF !important;
  }
  html[data-theme="light"] body.home-page #contenu > .home-demo--with-simulator ~ section.section:nth-of-type(even) {
    background-color: #FAF9FF !important;
  }
  html[data-theme="light"] body.home-page #contenu > .home-demo--with-simulator ~ section.section:not(.section-aqua):not(.conversion-band):nth-of-type(odd) {
    --halo-side: 85%;
  }
  html[data-theme="light"] body.home-page #contenu > .home-demo--with-simulator ~ section.section:not(.section-aqua):not(.conversion-band):nth-of-type(even) {
    --halo-side: 15%;
  }
  html[data-theme="light"] body.home-page #contenu > .home-demo.home-demo--with-simulator + section.section.section-soft:not(.section-aqua):not(.conversion-band) {
    background-color: #FAF9FF !important;
    --halo-side: 15%;
  }
}

/* Situations par métier, avant le simulateur. Palette locale identique au simulateur. */
.cases {
  --cases-surface: #FFFFFF;
  --cases-ink: #1F2B4F;
  --cases-body: #25335F;
  --cases-muted: #7385AB;
  --cases-accent: #3E3EC1;
  --cases-accent-lit: #6FA8FF;
  --cases-line: #C3D2EA;
  margin: 32px 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--cases-body);
}
html[data-theme="dark"] .cases {
  --cases-surface: #141C44;
  --cases-ink: #EAF0FF;
  --cases-body: #B9C6E6;
  --cases-muted: #8C9BC4;
  --cases-accent: #9A9AFF;
  --cases-accent-lit: #8FBBFF;
  --cases-line: #2B3766;
}
.cases-title { margin: 0 0 6px; font: 400 clamp(24px, 2.6vw, 28px)/1.2 var(--font-display); color: var(--cases-ink); text-wrap: balance; }
.cases-intro { margin: 0 0 18px; max-width: 70ch; font-size: 15px; color: var(--cases-body); }
.cases-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.case { position: relative; display: flex; flex-direction: column; padding: 22px 20px 20px; background: var(--cases-surface); border: 1px solid var(--cases-line); border-radius: 0; box-shadow: none; }
.case::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--cases-accent), var(--cases-accent-lit)); }
.case-sector { display: block; margin-bottom: 8px; font: 500 12px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--cases-accent); }
.case-title { margin: 0 0 12px; font: 400 clamp(21px, 1.7vw, 22.4px)/1.3 var(--font-display); color: var(--cases-ink); text-wrap: balance; }
.case-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.case-list li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.65; color: var(--cases-body); }
.case-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 1px; background: var(--cases-accent); }
@media (max-width: 1100px) { .cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cases-grid { grid-template-columns: 1fr; } .case { padding: 20px 16px 18px; } }
.case-head { display: block; list-style: none; cursor: default; }
.case-head::-webkit-details-marker { display: none; }
.case-head .case-title { display: block; }
@media (max-width: 640px) {
  .case { padding: 0; }
  .case-head { position: relative; padding: 18px 48px 16px 16px; cursor: pointer; }
  .case-head .case-title { margin: 0; }
  .case-head::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border: solid var(--cases-accent); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s ease; }
  .case[open] .case-head::after { transform: rotate(-135deg); margin-top: -2px; }
  .case[open] .case-head { padding-bottom: 12px; }
  .case-list { padding: 0 16px 18px; }
  .case-head:focus-visible { outline: 2px solid var(--cases-accent); outline-offset: -2px; }
}

/* Mobile : halo violet doux, comme les premières cartes */
@media (max-width: 640px) {
  .cases { position: relative; isolation: isolate; }
  .cases::before { content: ""; position: absolute; z-index: -1; inset: -40px -16px -24px; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); background: radial-gradient(70% 38% at 85% 0%, rgba(94, 23, 235, .13), transparent 72%), radial-gradient(60% 30% at 0% 55%, rgba(0, 176, 255, .07), transparent 75%), radial-gradient(70% 30% at 90% 100%, rgba(94, 23, 235, .10), transparent 75%); }
  .case { background-image: radial-gradient(120% 90% at 100% 0%, rgba(94, 23, 235, .07), transparent 62%); background-color: var(--cases-surface); }
  html[data-theme="dark"] .cases::before { background: radial-gradient(70% 38% at 85% 0%, rgba(154, 154, 255, .16), transparent 72%), radial-gradient(70% 30% at 90% 100%, rgba(154, 154, 255, .12), transparent 75%); }
  html[data-theme="dark"] .case { background-image: radial-gradient(120% 90% at 100% 0%, rgba(154, 154, 255, .10), transparent 62%); }
  .case-sector { font-size: 12px; }
}

/* Bandeau bleu en jour : le texte suit la palette locale, y compris face aux couleurs imposées aux titres. */
@layer typography {
  html[data-theme] body .sim :is(.sim-title, .sim-eyebrow, .sim-label, .sim-val, .sim-gain, .sim-method) { -webkit-text-fill-color: currentColor !important; }
  html[data-theme] body .sim .sim-title, html[data-theme] body .sim .sim-gain, html[data-theme] body .sim .sim-val { color: var(--sim-ink) !important; }
}