/* ================================================================
   ARSÕLYA — Simulation IA
   Import d'une photo → aperçu avant/après → matières. Portée sous
   body.sim-ia. Socle proportionnel --u (voir docs/responsive.md).
   ================================================================ */

body.sim-ia {
  --ink: #0b0d10;
  --ink-soft: rgba(11,13,16,.68);
  --ink-faint: rgba(11,13,16,.62);
  --bg: #ffffff;
  --line: rgba(11,13,16,.14);
  --line-soft: rgba(11,13,16,.09);
  --serif: "Times New Roman", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
  background: var(--bg);
  color: var(--ink);
}
body.sim-ia main#MainContent { background: transparent; }

.simhero * { box-sizing: border-box; }
.simhero { font-family: var(--sans); -webkit-font-smoothing: antialiased; padding-top: var(--ars-header-height); }

/* ---------------------------------------------------------------
   Bloc principal : texte + import à gauche, comparatif à droite
   --------------------------------------------------------------- */
.simhero-inner {
  max-width: calc(1360 * var(--u));
  margin: 0 auto;
  padding: clamp(calc(28 * var(--u)), 4vh, calc(52 * var(--u))) calc(40 * var(--u)) clamp(calc(48 * var(--u)), 6vh, calc(84 * var(--u)));
  display: grid;
  grid-template-columns: calc(430 * var(--u)) 1fr;
  gap: calc(56 * var(--u));
  align-items: center;
}

.simhero-kicker {
  font-size: calc(11 * var(--u)); letter-spacing: .32em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin: 0 0 calc(26 * var(--u));
}
.simhero-title {
  font-family: var(--serif); font-weight: 400; color: var(--ink);
  font-size: calc(46 * var(--u)); line-height: 1.14; letter-spacing: -.005em;
  margin: 0 0 calc(24 * var(--u));
}
.simhero-sub {
  font-size: calc(15 * var(--u)); line-height: 1.7; color: var(--ink-soft);
  max-width: calc(380 * var(--u)); margin: 0 0 calc(32 * var(--u));
}

.simhero-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(14 * var(--u));
  border: 1.5px dashed rgba(11,13,16,.2); border-radius: calc(14 * var(--u));
  padding: calc(36 * var(--u)) calc(20 * var(--u));
  cursor: pointer; text-align: center;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.simhero-drop:hover, .simhero-drop.is-drag {
  border-color: rgba(11,13,16,.57); background: rgba(11,13,16,.02);
}
.simhero-drop-icon {
  width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: 50%;
  background: rgba(11,13,16,.055); display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); flex-shrink: 0;
}
.simhero-drop-icon svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.simhero-drop-text { font-size: calc(15 * var(--u)); font-weight: 600; color: var(--ink); }

.simhero-or {
  font-size: calc(13 * var(--u)); color: var(--ink-faint); text-align: center;
  margin: calc(14 * var(--u)) 0 calc(22 * var(--u));
}

.simhero-cta {
  display: block; width: 100%; border: none; border-radius: calc(4 * var(--u));
  background: var(--ink); color: #fff; font-family: var(--sans);
  font-size: calc(12.5 * var(--u)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: calc(17 * var(--u)) 0; cursor: pointer;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.simhero-cta:hover { opacity: .86; }
.simhero-cta span { margin-left: calc(6 * var(--u)); }

/* ---------------------------------------------------------------
   Comparatif avant/après + échantillons de matière
   --------------------------------------------------------------- */
.simhero-right { min-width: 0; }
.simhero-compare {
  position: relative;
  border-radius: calc(18 * var(--u)); overflow: hidden;
  box-shadow: 0 24px 64px -30px rgba(20,16,10,.32);
  aspect-ratio: 1672 / 941;
  cursor: ew-resize; -webkit-user-select: none; user-select: none; touch-action: pan-y;
}
.simhero-compare:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.simhero-compare img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; pointer-events: none;
}
.simhero-img-before { z-index: 2; }
.simhero-label {
  position: absolute; top: calc(16 * var(--u)); z-index: 3;
  background: #fff; color: var(--ink);
  font-size: calc(10.5 * var(--u)); letter-spacing: .14em; text-transform: uppercase;
  padding: calc(7 * var(--u)) calc(14 * var(--u)); border-radius: 2px;
}
.simhero-label--before { left: calc(16 * var(--u)); }
.simhero-label--after { right: calc(16 * var(--u)); }
.simhero-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: #fff; z-index: 4; pointer-events: none; transform: translateX(-50%);
}
.simhero-handle-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; gap: calc(3 * var(--u));
  box-shadow: 0 10px 24px rgba(0,0,0,.26);
}
.simhero-handle-grip svg { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }
@media (prefers-reduced-motion: reduce) {
  .simhero-handle { transition: none !important; }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 980px) {
  .simhero-inner { grid-template-columns: 1fr; gap: 36px; padding: 32px 28px 48px; }
  .simhero-sub { max-width: none; }
}
@media (max-width: 560px) {
  .simhero-title { font-size: 34px; }
  .simhero-drop { padding: 28px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .simhero-drop, .simhero-cta { transition: none !important; }
}