/* ============================================================
   La Tour Pom'Pin — Diagnostic bien-être
   Palette: pin des montagnes, argile, brume crème.
   ============================================================ */

:root{
  --cream:       #f6efe2;
  --cream-deep:  #efe4cf;
  --paper:       #fffbf3;
  --ink:         #262319;
  --ink-soft:    #55503f;
  --pine:        #253327;
  --pine-2:      #37493b;
  --pine-tint:   #4f6754;
  --clay:        #bd6339;
  --clay-deep:   #9c4b2a;
  --gold:        #c99a4e;
  --line:        rgba(38, 35, 25, 0.13);
  --line-soft:   rgba(38, 35, 25, 0.07);
  --shadow:      0 30px 60px -25px rgba(38, 35, 25, 0.35);

  --serif: "Fraunces", "Iowan Old Style", ui-serif, Georgia, serif;
  --sans:  "Sora", "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(1100px 700px at 82% -8%, rgba(201,154,78,0.18), transparent 60%),
    radial-gradient(900px 620px at -10% 100%, rgba(37,51,39,0.14), transparent 55%),
    var(--cream);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
}

/* fixed grain texture, never on scrolling content */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:140px 140px;
}

/* -------------------------------------------------- brand rail */
.rail{
  position:fixed; left:0; top:0; bottom:0; width:64px; z-index:20;
  background: var(--pine);
  display:flex; flex-direction:column; align-items:center;
  justify-content:space-between; padding:28px 0;
  color: var(--cream);
}
.rail-text{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--serif);
  font-weight:500; font-size:13px; letter-spacing:.08em;
  color: rgba(246,239,226,.82);
  white-space:nowrap;
}
.rail-sprig{ width:20px; height:60px; color: rgba(246,239,226,.5); }

.topbar{ display:none; }

/* -------------------------------------------------- stage */
.stage{
  margin-left:64px;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding: 48px 6vw;
  position:relative;
}

.art-panel{
  position:absolute;
  top:-4%; right:-6%;
  width:46%;
  height:58%;
  border-radius: 40px;
  background-image:
    linear-gradient(160deg, rgba(37,51,39,0.08), rgba(191,99,57,.14)),
    url("/.netlify/images?url=/img/hero-pines.png&w=1400&fm=webp&q=78");
  background-size:cover;
  background-position:center 35%;
  -webkit-mask-image: radial-gradient(circle at 68% 30%, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 55%, transparent 78%);
  mask-image: radial-gradient(circle at 68% 30%, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 55%, transparent 78%);
  z-index:0;
  transform: rotate(2deg);
}

/* -------------------------------------------------- card */
.card{
  position:relative; z-index:1;
  width:100%; max-width:640px;
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
  padding: 52px 56px 48px;
}

.progress{ display:flex; align-items:center; gap:14px; margin-bottom:34px; }
.progress-label{
  font-family: var(--serif); font-style:italic; font-weight:500;
  font-size:14px; color: var(--ink-soft); white-space:nowrap;
}
.progress-track{ flex:1; height:3px; border-radius:3px; background: var(--line); overflow:hidden; }
.progress-fill{
  height:100%; width:0%; background: var(--clay);
  transition: width .5s cubic-bezier(.65,0,.35,1);
}

.step{
  display:none;
  animation: stepIn .5s cubic-bezier(.2,.8,.25,1);
}
.step.is-active{ display:block; }
@keyframes stepIn{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

.step-index{
  display:block;
  font-family: var(--serif); font-weight:600; font-size:15px;
  color: var(--gold); letter-spacing:.12em; margin-bottom:10px;
}

.back{
  border:none; background:none; cursor:pointer;
  font-family: var(--sans); font-size:13px; font-weight:600;
  color: var(--ink-soft); padding:0; margin-bottom:22px;
  display:inline-flex; align-items:center; gap:6px;
  transition: color .2s ease, transform .2s ease;
}
.back:hover{ color: var(--clay); transform: translateX(-2px); }

.question{
  font-family: var(--serif); font-weight:600; font-size:clamp(26px,3.4vw,34px);
  line-height:1.18; margin: 0 0 30px; color: var(--pine);
  max-width: 30ch;
}

.options{ display:flex; flex-direction:column; gap:10px; }

.option{
  display:flex; align-items:center; gap:16px;
  width:100%; text-align:left;
  padding:17px 18px;
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(255,255,255,.4);
  cursor:pointer;
  font-family: var(--sans); font-size:16px; font-weight:500; color: var(--ink);
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.option:hover{
  border-color: var(--clay);
  background: var(--paper);
  transform: translateX(3px);
  box-shadow: 0 10px 24px -18px rgba(38,35,25,.4);
}
.option:active{ transform: translateX(3px) scale(.99); }
.option.is-picked{
  border-color: var(--clay);
  background: linear-gradient(0deg, rgba(189,99,57,.09), rgba(189,99,57,.09));
}

.option-icon{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--cream-deep); color: var(--pine-2);
}
.option-icon svg{ width:19px; height:19px; }
.option-text{ flex:1; }
.option-arrow{
  flex:none; opacity:0; color: var(--clay);
  transform: translateX(-4px);
  transition: opacity .2s ease, transform .2s ease;
  font-size:18px;
}
.option:hover .option-arrow{ opacity:1; transform: translateX(0); }

/* -------------------------------------------------- result */
.result{ text-align:left; }
.result-tag{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--sans); font-weight:600; font-size:13px;
  letter-spacing:.05em; text-transform:uppercase;
  color: var(--paper); background: var(--pine);
  padding:9px 16px; border-radius:999px; margin: 0 0 22px;
}
.result-name{
  font-family: var(--serif); font-style:italic; font-weight:600;
  font-size:clamp(30px,4vw,42px); color: var(--clay-deep);
  margin:0 0 16px; line-height:1.1;
}
.result-phrase{
  font-family: var(--serif); font-size:18px; line-height:1.55;
  color: var(--ink-soft); max-width:44ch; margin:0 0 34px;
}
.cta{
  display:inline-flex; align-items:center; gap:12px;
  background: var(--clay); color: var(--paper);
  font-family: var(--sans); font-weight:600; font-size:16.5px;
  padding:17px 28px; border-radius:999px; text-decoration:none;
  box-shadow: 0 18px 30px -16px rgba(156,75,42,.55);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.cta:hover{ background: var(--clay-deep); transform: translateY(-2px); box-shadow: 0 22px 34px -14px rgba(156,75,42,.6); }
.cta-arrow{ transition: transform .2s ease; }
.cta:hover .cta-arrow{ transform: translateX(3px); }
.cta-sub{
  margin: 16px 0 30px; font-size:13.5px; color: var(--ink-soft);
  letter-spacing:.01em;
}
.restart{
  border:none; background:none; cursor:pointer;
  font-family: var(--sans); font-size:13.5px; font-weight:600;
  color: var(--pine-tint); padding:0;
  border-bottom:1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.restart:hover{ color: var(--pine); border-color: var(--pine); }

/* -------------------------------------------------- responsive */
@media (max-width: 900px){
  .rail{ display:none; }
  .topbar{
    display:flex; align-items:baseline; gap:10px;
    padding: 22px 6vw 0;
  }
  .topbar-mark{ font-family: var(--serif); font-weight:600; font-size:18px; color: var(--pine); }
  .topbar-sub{ font-family: var(--sans); font-size:12.5px; color: var(--ink-soft); }
  .stage{ margin-left:0; padding: 22px 5vw 60px; align-items:flex-start; }
  .art-panel{ width:70%; height:220px; top:0; right:-8%; opacity:.9; }
  .card{ padding: 34px 24px 36px; margin-top: 170px; }
  .question{ font-size: 24px; }
}

@media (max-width: 480px){
  .card{ border-radius:20px; padding: 30px 20px 32px; }
  .option{ padding:14px 14px; font-size:15px; }
  .result-name{ font-size:28px; }
}