:root{
  --ink:#15161A;
  --ink-soft:#1C1D22;
  --mist:#ECEAE6;
  --haze:#8E8C92;
  --faint:#5C5B62;
  --line:rgba(236,234,230,.10);
  --line-strong:rgba(236,234,230,.18);
  --glow:#E6C79C;          /* champagne — n'apparaît qu'à l'action */
  --sage:#A7C4A0;
  --rose:#D89A8E;
  --serif: ui-serif, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--mist);
  background:
    radial-gradient(125% 80% at 50% 6%, #1B1C22 0%, var(--ink) 56%),
    var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}

.app{
  width:min(440px,100%);
  margin:0 auto;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:
    max(22px, env(safe-area-inset-top)) 28px
    max(24px, env(safe-area-inset-bottom));
}

/* ---------- header ---------- */
.head{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:6px;
}
.brand{
  font-family:var(--serif); font-size:19px; font-weight:400;
  letter-spacing:.01em; color:var(--mist);
}
.state{
  display:inline-flex; align-items:center; gap:8px;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--haze);
}
.state__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--faint);
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
.state__dot.is-on{ background:var(--sage); box-shadow:0 0 9px rgba(167,196,160,.55) }
.state__dot.is-off{ background:var(--rose); box-shadow:0 0 9px rgba(216,154,142,.5) }

/* ---------- main (centré) ---------- */
.main{
  flex:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding-bottom:7%;
}

.display{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(32px,10vw,40px); line-height:1.08;
  letter-spacing:-.012em; margin:0 0 12px;
}
.lede{
  margin:0; max-width:30ch;
  color:var(--haze); font-size:14.5px; line-height:1.55;
}
.lede--center{ margin-bottom:38px }

/* ---------- écran verrouillé ---------- */
.lock{ width:100%; display:flex; flex-direction:column; align-items:center }
.entry{ width:100%; max-width:300px; margin:36px 0 24px; text-align:left }
.entry__label{
  display:block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--haze); margin:0 0 14px;
}
.entry__input{
  width:100%; padding:11px 2px; background:transparent; color:var(--mist);
  border:none; border-bottom:1px solid var(--line-strong);
  font-family:var(--sans); font-size:17px; letter-spacing:.06em;
  outline:none; transition:border-color .3s var(--ease);
}
.entry__input::placeholder{ color:#4E4D53; letter-spacing:.28em }
.entry__input:focus{ border-color:var(--glow) }

.action{
  width:100%; max-width:300px; padding:14px 18px;
  font-family:var(--sans); font-size:15px; font-weight:500; letter-spacing:.01em;
  color:var(--ink); background:var(--mist);
  border:none; border-radius:999px; cursor:pointer;
  transition:transform .12s var(--ease), opacity .2s var(--ease);
}
.action:active{ transform:translateY(1px) scale(.995) }
.action:disabled{ opacity:.45; cursor:not-allowed }

/* ---------- la commande (signature) ---------- */
.stage{ display:flex; flex-direction:column; align-items:center }

.trigger{
  position:relative; width:212px; height:212px; border-radius:50%;
  border:none; background:transparent; padding:0; cursor:pointer;
  display:grid; place-items:center;
  -webkit-tap-highlight-color:transparent; user-select:none;
  touch-action:manipulation;
}
.trigger__glow{
  position:absolute; inset:-14%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(230,199,156,.30), transparent 62%);
  opacity:0; transition:opacity .6s var(--ease);
}
.trigger__ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--line-strong);
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.trigger__face{
  position:absolute; inset:9px; border-radius:50%;
  background:radial-gradient(120% 120% at 50% 24%, var(--ink-soft), var(--ink) 78%);
  box-shadow:0 30px 54px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.03);
  display:grid; place-items:center; gap:13px;
  transition:transform .4s var(--ease);
}
.trigger__glyph{
  width:34px; height:34px; color:var(--mist); opacity:.9;
  transition:color .4s var(--ease), opacity .4s var(--ease);
}
.trigger__word{
  font-size:11.5px; letter-spacing:.36em; text-transform:uppercase;
  color:var(--haze); padding-left:.36em;
  transition:color .4s var(--ease);
}

@media (hover:hover){
  .trigger:hover .trigger__ring{ border-color:rgba(230,199,156,.38) }
  .trigger:hover .trigger__glyph{ opacity:1 }
}
.trigger:focus-visible{ outline:none }
.trigger:focus-visible .trigger__ring{ border-color:var(--glow); box-shadow:0 0 0 4px rgba(230,199,156,.12) }
.trigger:active .trigger__face{ transform:scale(.985) }

/* état actif : la lumière champagne s'allume */
.trigger.is-fire .trigger__glow{ opacity:1 }
.trigger.is-fire .trigger__ring{ border-color:var(--glow); box-shadow:0 0 26px -3px rgba(230,199,156,.5) }
.trigger.is-fire .trigger__glyph{ color:var(--glow); opacity:1 }
.trigger.is-fire .trigger__word{ color:var(--glow) }

.trigger:disabled{ cursor:not-allowed }
.trigger:disabled .trigger__glyph,
.trigger:disabled .trigger__word{ color:#48474E }

.readout{
  margin-top:28px; min-height:18px;
  font-size:13px; letter-spacing:.05em; color:var(--haze);
  transition:color .3s var(--ease);
}
.readout.is-good{ color:var(--glow) }
.readout.is-bad{ color:var(--rose) }

/* ---------- footer ---------- */
.foot{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding-top:14px;
}
.foot__link{
  background:none; border:none; cursor:pointer; padding:8px 6px;
  font-family:var(--sans); font-size:12px; letter-spacing:.04em; color:var(--faint);
  transition:color .2s var(--ease);
}
.foot__link:hover{ color:var(--mist) }
.foot__sep{ color:#3A393F; font-size:12px }

.hidden{ display:none !important }

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important }
}