/* ================================================================
   ARSÕLYA — Simulation Õ
   Même langage que la page Décoration : un mur de planches encadrées
   (dessins au trait). On en ouvre une pour découvrir la formule.
   Portée sous body.sim-gallery — aucune ressource externe.
   ================================================================ */

body.sim-gallery {
  --ink: #0b0d10;
  --ink-soft: rgba(11,13,16,.56);
  --ink-faint: rgba(11,13,16,.38);
  --bg: #faf8f5;
  --bg-2: #f3f0ea;
  --paper: #fdfcf9;
  --warm: #e4d9c8;
  --line: rgba(11,13,16,.14);
  --line-soft: rgba(11,13,16,.08);
  --frame: #e8e2d5;
  --frame-dark: #8a8884;          /* contour gris moyen — formule 3D */
  --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);
  overflow: hidden;
  height: 100vh; height: 100svh;
}
html:has(body.sim-gallery) { overflow: hidden; height: 100%; }
body.sim-gallery main#MainContent { background: var(--bg); flex: none; }
body.sim-gallery .sim { height: 100vh; height: 100svh; overflow: hidden; }

/* Écrans courts ou mobiles : on rend la main au défilement normal */
@media (max-width: 860px), (max-height: 640px) {
  html:has(body.sim-gallery) { overflow: auto; height: auto; }
  body.sim-gallery { overflow-y: auto; height: auto; }
  body.sim-gallery .sim { height: auto; overflow: visible; }
}
body.sim-gallery .arsolya-legal-footer { display: none !important; }

.sim * { box-sizing: border-box; }
.sim { font-family: var(--sans); -webkit-font-smoothing: antialiased; position: relative; }

/* ================================================================
   LE MUR — pensé pour tenir en entier dans un écran à l'arrivée
   ================================================================ */
.sim-stage {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(calc(14 * var(--u)), 2.4vh, calc(30 * var(--u)));
  padding: calc(var(--ars-header-height) + calc(18 * var(--u))) calc(24 * var(--u)) calc(30 * var(--u));
  text-align: center;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.sim-stage.is-away { opacity: 0; transform: scale(.985); pointer-events: none; }

.sim-kicker { font-size: calc(10.5 * var(--u)); letter-spacing: .42em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.sim-intro {
  font-family: var(--serif); font-weight: 400;
  font-size: calc(44 * var(--u)); line-height: 1.08; letter-spacing: -.005em; margin: calc(6 * var(--u)) 0 0;
}
.sim-intro-sub {
  font-size: calc(14.4 * var(--u)); color: var(--ink-soft); line-height: 1.6;
  margin: calc(10 * var(--u)) auto 0; max-width: calc(440 * var(--u));
}

/* deux planches */
.sim-plates {
  display: flex; align-items: flex-start; justify-content: center;
  gap: calc(48.96 * var(--u)); flex-wrap: wrap; perspective: 2000px;
}
.sim-plate {
  border: none; background: none; padding: 0; cursor: pointer; font: inherit; color: inherit;
  display: flex; flex-direction: column; align-items: center; gap: calc(13 * var(--u));
}
.sim-plate-frame {
  width: calc(244 * var(--u));
  aspect-ratio: 3 / 4; position: relative;
  background: var(--frame); padding: calc(15 * var(--u)); border-radius: 2px;
  transform: rotateY(-13deg) rotateX(1.5deg); transform-style: preserve-3d;
  box-shadow: -22px 30px 58px -26px rgba(30,24,16,.48), 0 7px 18px rgba(30,24,16,.15);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.sim-plate:nth-child(2) .sim-plate-frame { transform: rotateY(10deg) rotateX(1.5deg); }
.sim-plate:hover .sim-plate-frame,
.sim-plate:focus-visible .sim-plate-frame {
  transform: rotateY(0deg) translateY(-14px);
  box-shadow: -30px 44px 84px -30px rgba(30,24,16,.52), 0 16px 36px rgba(30,24,16,.2);
}
.sim-plate--premium .sim-plate-frame { background: var(--frame-dark); }
.sim-plate-frame::after {
  content: ""; position: absolute; inset: calc(15 * var(--u));
  box-shadow: inset 0 0 0 1px rgba(11,13,16,.10), inset 0 1px 6px rgba(11,13,16,.06);
  pointer-events: none;
}

/* la « feuille » : dessin en haut, légende IA / 3D en dessous (même trait) */
.sim-plate-mat {
  position: absolute; inset: calc(15 * var(--u)); background: var(--paper);
  display: flex; flex-direction: column; align-items: center; overflow: hidden;
  padding: 13% 8% 0;
}
.sim-plate-tag {
  position: absolute; left: 10%; top: 9%; z-index: 2;
  font-size: calc(8.5 * var(--u)); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint);
}
.sim-plate-draw { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; }
.sim-plate-draw svg { width: 80%; height: 80%; color: var(--ink); }
.sim-plate-draw svg * { vector-effect: non-scaling-stroke; }

.sim-plate-cap {
  margin-bottom: 15%;
  font-family: var(--serif); font-weight: 400;
  font-size: calc(21 * var(--u));
  letter-spacing: .26em; text-indent: .26em; color: var(--ink);
}

.sim-plate-name { font-size: calc(12 * var(--u)); letter-spacing: .06em; color: var(--ink-soft); }
.sim-plate-meta { font-size: calc(11 * var(--u)); letter-spacing: .04em; color: var(--ink-faint); margin-top: calc(-7 * var(--u)); }
.sim-plate-hint {
  font-size: calc(10 * var(--u)); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint);
  opacity: 0; transform: translateY(4px); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.sim-plate:hover .sim-plate-hint, .sim-plate:focus-visible .sim-plate-hint { opacity: 1; transform: none; }

/* pied légal compact — visible juste sous le mur */
.sim-wall-foot {
  padding: calc(22 * var(--u)) calc(24 * var(--u)) calc(26 * var(--u)); text-align: center;
  border-top: 1px solid var(--line-soft);
}
.sim-wall-foot .sim-legal-row { justify-content: center; }
.sim-wall-foot p { font-size: calc(11 * var(--u)); letter-spacing: .06em; color: var(--ink-faint); margin: calc(8 * var(--u)) 0 0; }

/* ================================================================
   VUE DÉTAIL
   ================================================================ */
.sim-detail {
  position: fixed; left: 0; right: 0; top: var(--ars-header-height); bottom: 0; z-index: 60;
  background: var(--bg); overflow-y: auto; overflow-x: hidden;
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility 0s .45s;
}
.sim-detail.is-open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }

/* Bouton retour flottant — n'occupe aucune hauteur (plus de barre) */
.sim-back {
  position: absolute; top: calc(12 * var(--u)); left: clamp(calc(10 * var(--u)), 3vw, calc(26 * var(--u))); z-index: 6;
  border: 1px solid var(--line); background: rgba(250,248,245,.86);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%;
  display: grid; place-items: center; font-size: calc(16 * var(--u)); color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease); flex-shrink: 0;
}
.sim-back:hover { background: var(--ink); color: var(--paper); }

.sim-detail-inner {
  max-width: calc(1120 * var(--u)); margin: 0 auto;
  padding: clamp(calc(14 * var(--u)), 2vh, calc(22 * var(--u))) clamp(calc(20 * var(--u)), 4vw, calc(54 * var(--u))) calc(90 * var(--u));
  display: grid; grid-template-columns: minmax(0, calc(420 * var(--u))) minmax(0, 1fr); gap: calc(72 * var(--u));
  align-items: start;
}

.sim-hero-plate { position: sticky; top: calc(22 * var(--u)); }
.sim-hero-frame {
  background: var(--frame); padding: calc(22 * var(--u)); border-radius: 2px;
  box-shadow: -16px 24px 54px -28px rgba(30,24,16,.4), 0 4px 14px rgba(30,24,16,.12);
}
.sim-hero-frame.is-dark { background: var(--frame-dark); }
.sim-hero-mat {
  background: var(--paper); aspect-ratio: 4 / 5;
  display: flex; flex-direction: column; align-items: center; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(11,13,16,.10);
  padding: 13% 10% 0;
}
.sim-hero-mat .sim-plate-draw svg { width: 76%; height: 76%; }
.sim-hero-mat .sim-plate-cap { margin-bottom: 13%; }
.sim-hero-price {
  display: flex; align-items: baseline; gap: calc(10 * var(--u)); margin: calc(22 * var(--u)) 0 calc(2 * var(--u));
}
.sim-hero-price b { font-family: var(--serif); font-weight: 400; font-size: calc(30 * var(--u)); }
.sim-hero-price small { font-size: calc(11 * var(--u)); color: var(--ink-faint); }

.sim-hero-title {
  font-family: var(--serif); font-weight: 400; font-size: calc(34 * var(--u));
  margin: calc(8 * var(--u)) 0 calc(10 * var(--u)); line-height: 1.12;
}
.sim-hero-line { font-size: calc(13.5 * var(--u)); line-height: 1.75; color: var(--ink-soft); margin: 0; }

.sim-section-label {
  font-size: calc(11 * var(--u)); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
  font-weight: 600; margin: calc(6 * var(--u)) 0 calc(20 * var(--u)); padding-bottom: calc(12 * var(--u)); border-bottom: 1px solid var(--line-soft);
}
.sim-feats { list-style: none; margin: 0 0 calc(44 * var(--u)); padding: 0; }
.sim-feats li {
  display: grid; grid-template-columns: calc(22 * var(--u)) 1fr; gap: calc(12 * var(--u));
  padding: calc(13 * var(--u)) 0; border-top: 1px solid var(--line-soft);
  font-size: calc(13 * var(--u)); line-height: 1.55; color: var(--ink-soft);
}
.sim-feats li:first-child { border-top: none; }
.sim-feats li b { color: var(--ink); font-weight: 500; }
.sim-feats li .m { font-family: var(--serif); font-size: calc(12 * var(--u)); color: var(--ink-faint); line-height: 1.9; }

.sim-steps { display: grid; gap: calc(2 * var(--u)); margin-bottom: calc(44 * var(--u)); }
.sim-step {
  display: grid; grid-template-columns: calc(34 * var(--u)) 1fr; gap: 0 calc(16 * var(--u));
  padding: calc(16 * var(--u)) 0; border-top: 1px solid var(--line-soft);
}
.sim-step:first-child { border-top: none; }
.sim-step-n { font-family: var(--serif); font-size: calc(12 * var(--u)); color: var(--ink-faint); padding-top: calc(2 * var(--u)); }
.sim-step h4 { font-family: var(--serif); font-weight: 400; font-size: calc(14.5 * var(--u)); margin: 0 0 calc(4 * var(--u)); }
.sim-step p { font-size: calc(12.5 * var(--u)); line-height: 1.6; color: var(--ink-soft); margin: 0; }

.sim-cta-wrap {
  background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 2px;
  padding: calc(32 * var(--u)); display: flex; align-items: center; justify-content: space-between;
  gap: calc(20 * var(--u)); flex-wrap: wrap;
}
.sim-cta-wrap p { font-family: var(--serif); font-size: calc(20 * var(--u)); margin: 0; }
.sim-cta-wrap p span { display: block; font-family: var(--sans); font-size: calc(12 * var(--u)); color: var(--ink-soft); margin-top: calc(5 * var(--u)); }
.sim-btn {
  display: inline-flex; align-items: center; gap: calc(11 * var(--u)); flex-shrink: 0;
  font-family: var(--sans); font-size: calc(11.5 * var(--u)); letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--paper); background: var(--ink);
  border: 1px solid var(--ink); border-radius: 2px; padding: calc(15 * var(--u)) calc(26 * var(--u)); cursor: pointer; text-decoration: none;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.sim-btn:hover { background: transparent; color: var(--ink); }
.sim-btn .a { transition: transform .4s var(--ease); }
.sim-btn:hover .a { transform: translateX(4px); }

.sim-detail-foot {
  max-width: calc(1120 * var(--u)); margin: 0 auto; padding: calc(24 * var(--u)) clamp(calc(20 * var(--u)), 4vw, calc(54 * var(--u))) calc(60 * var(--u));
  border-top: 1px solid var(--line-soft);
}
.sim-legal-row { display: flex; align-items: center; gap: calc(14 * var(--u)); flex-wrap: wrap; margin-bottom: calc(8 * var(--u)); }
.sim-legal-row a { font-size: calc(12 * var(--u)); color: var(--ink-faint); text-decoration: none; transition: color .3s var(--ease); }
.sim-legal-row a:hover { color: var(--ink); }
.sim-legal-row s { width: 1px; height: calc(10 * var(--u)); background: var(--line); }
.sim-detail-foot p { font-size: calc(11 * var(--u)); letter-spacing: .06em; color: var(--ink-faint); margin: 0; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 900px) {
  .sim-detail-inner { grid-template-columns: 1fr; gap: 32px; padding-top: 46px; }
  .sim-hero-plate { position: relative; top: 0; max-width: 340px; }
}
@media (max-width: 680px) {
  .sim-stage { min-height: 0; padding-top: calc(var(--ars-header-height) + 24px); gap: 22px; }
  .sim-plates { gap: 22px 16px; }
  .sim-plate-frame { transform: none !important; width: 46vw; max-width: 220px;
    box-shadow: -10px 18px 38px -18px rgba(30,24,16,.4), 0 4px 12px rgba(30,24,16,.12); }
  .sim-plate:hover .sim-plate-frame { transform: translateY(-8px) !important; }
  .sim-plate-hint { opacity: 1; transform: none; }
  .sim-cta-wrap { flex-direction: column; align-items: stretch; }
  .sim-btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sim-stage, .sim-detail, .sim-plate-frame { transition: opacity .2s linear !important; }
  .sim-plate-frame { transform: none !important; }
}