:root {
  --blue: #203646;
  --blue-mid: #29455f;
  --coral: #c95b47;
  --coral-dark: #a94633;
  --sand: #f5ebdd;
  --cream: #fff9ef;
  --paper: #fffdf9;
  --ink: #252a2e;
  --muted: #69757d;
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --body: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  --hand: Noteworthy, "Bradley Hand", "Segoe Print", cursive;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--blue); font-family: var(--body); }
button, input { font: inherit; }

.gate {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  overflow: hidden;
}
.gate:before {
  content: "";
  position: absolute;
  top: 14%;
  right: 12%;
  width: 90px;
  border-top: 5px solid rgba(201, 91, 71, .4);
  transform: rotate(-8deg);
}
.gate:after {
  content: "";
  position: absolute;
  bottom: 16%;
  left: 10%;
  width: 64px;
  border-top: 4px solid rgba(245, 235, 221, .18);
  transform: rotate(5deg);
}

.gate-card {
  position: relative;
  width: min(430px, 100%);
  padding: 34px 34px 26px;
  background: var(--cream);
  clip-path: polygon(.6% 1%, 99.5% 0, 100% 99%, 0 100%);
  transform: rotate(-.4deg);
}

.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; color: inherit; text-decoration: none; }
.brand-house {
  display: grid;
  place-items: center;
  width: 56px;
  height: 50px;
  flex: 0 0 auto;
  padding: 5px 4px 4px;
  color: var(--ink);
  background: var(--sand);
  clip-path: polygon(5% 28%, 47% 1%, 96% 25%, 94% 96%, 3% 100%);
  transform: rotate(2deg);
}
.brand-house svg { width: 100%; height: 100%; stroke-width: 11; overflow: visible; }
.brand-house .thin { stroke-width: 6; }
.brand-lockup { display: grid; align-content: center; line-height: .76; }
.brand-la { margin: 0 0 3px 4px; color: var(--coral); font-family: var(--hand); font-size: 15px; transform: rotate(-7deg); }
.brand-name { color: var(--blue); font-family: var(--display); font-size: 27px; letter-spacing: .01em; text-transform: uppercase; }

.eyebrow { margin: 0 0 6px; color: var(--coral-dark); font-family: var(--hand); font-size: 17px; font-weight: 900; }
h1 {
  margin: 0 0 10px;
  color: var(--blue);
  font-family: var(--display);
  font-size: clamp(42px, 9vw, 56px);
  font-weight: 950;
  line-height: .88;
  text-transform: uppercase;
}
.intro { margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.45; }

.gate-error {
  margin: 0 0 16px;
  padding: 10px 13px;
  color: var(--cream);
  background: var(--coral);
  font-family: var(--hand);
  font-size: 13px;
  font-weight: 900;
  clip-path: polygon(1% 8%, 100% 0, 99% 92%, 0 100%);
  transform: rotate(-.4deg);
}

form { display: grid; gap: 7px; }
label { color: var(--blue); font-family: var(--hand); font-size: 13px; font-weight: 900; }
input[type="password"] {
  width: 100%;
  min-height: 47px;
  padding: 0 12px;
  border: 0;
  border-bottom: 3px solid var(--blue);
  background: var(--paper);
  font-size: 17px;
  letter-spacing: .12em;
}
input[type="password"]:focus { outline: 3px solid rgba(201, 91, 71, .45); outline-offset: 2px; }
button[type="submit"] {
  min-height: 50px;
  margin-top: 14px;
  border: 0;
  color: var(--cream);
  background: var(--coral);
  font-family: var(--hand);
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  clip-path: polygon(2% 0, 100% 6%, 97% 100%, 0 93%);
}
button[type="submit"]:hover { background: var(--coral-dark); }

.gate-note { margin: 18px 0 0; color: var(--muted); font-size: 11px; }

.scribble {
  position: absolute;
  bottom: 26px;
  right: 30px;
  color: rgba(245, 235, 221, .28);
  font-family: var(--hand);
  font-size: 18px;
  font-weight: 900;
  transform: rotate(-4deg);
}

/* ---- écrans de compte : portes secondaires, étapes, couleurs, tampon ---- */
.gate-grid { display: grid; grid-template-columns: auto auto; gap: 28px; align-items: center; }
.side-doors { display: grid; gap: 14px; width: min(290px, 100%); }
.door { position: relative; display: block; padding: 18px 18px 15px; color: var(--cream); text-decoration: none; clip-path: polygon(1.5% 3%, 99% 0, 100% 96%, 0 100%); transition: transform .18s ease; }
.door:hover { transform: translateY(-3px) rotate(0deg) !important; }
.door-coral { background: var(--coral); transform: rotate(1.4deg); }
.door-blue { background: var(--blue-mid); transform: rotate(-1.6deg); }
.door b { display: block; font-family: var(--hand); font-size: 16px; margin-bottom: 4px; }
.door small { display: block; font-size: 11px; opacity: .85; line-height: 1.4; margin-bottom: 10px; }
.door .mini { display: inline-block; padding: 7px 13px; background: var(--cream); color: var(--blue); font-family: var(--hand); font-size: 12.5px; font-weight: 900; clip-path: polygon(3% 0, 100% 8%, 96% 100%, 0 92%); }

.gate-card-wrap { position: relative; width: min(500px, 100%); }
.gate-card.wide { width: 100%; }
.gate-stamp {
  position: absolute;
  z-index: 2;
  top: -24px; right: 12px;
  padding: 6px 12px;
  color: var(--coral);
  border: 3px solid var(--coral);
  background: rgba(255, 249, 239, .92);
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: rotate(7deg);
  animation: stamp-in .5s cubic-bezier(.2, 2.2, .4, 1) .5s backwards;
}
@keyframes stamp-in {
  from { opacity: 0; transform: rotate(12deg) scale(2); }
  to { opacity: 1; transform: rotate(7deg) scale(1); }
}

.steps { display: flex; gap: 6px; margin: 0 0 16px; }
.steps span { padding: 5px 11px; font-family: var(--hand); font-size: 11.5px; font-weight: 900; background: var(--sand); color: var(--blue); clip-path: polygon(2% 0, 100% 8%, 97% 100%, 0 90%); }
.steps span.on { background: var(--coral); color: var(--cream); }

.field-label { display: block; margin: 14px 0 6px; color: var(--blue); font-family: var(--hand); font-size: 13px; font-weight: 900; }
.color-row { display: flex; gap: 9px; }
.color-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.color-pick i { display: block; width: 36px; height: 37px; cursor: pointer; clip-path: polygon(4% 1%, 99% 7%, 93% 100%, 0 90%); }
.color-pick input:checked + i { outline: 3px solid var(--ink); outline-offset: 2px; }
.color-pick input:focus-visible + i { outline: 3px solid var(--coral-dark); outline-offset: 2px; }

.code-input { letter-spacing: .3em; font-family: var(--display); font-size: 20px !important; text-transform: uppercase; text-align: center; }
input[type="text"], input[type="email"] {
  width: 100%;
  min-height: 47px;
  padding: 0 12px;
  border: 0;
  border-bottom: 3px solid var(--blue);
  background: var(--paper);
  font-size: 15px;
}
input[type="text"]:focus, input[type="email"]:focus { outline: 3px solid rgba(201, 91, 71, .45); outline-offset: 2px; }
.gate-note a { color: var(--coral-dark); font-family: var(--hand); font-weight: 900; text-decoration: none; }
.intro b { color: var(--coral-dark); }

@media (max-width: 860px) {
  .gate-grid { grid-template-columns: 1fr; justify-items: stretch; }
  .side-doors { width: 100%; }
}
@media (max-width: 480px) {
  .gate { padding: 16px; align-items: start; padding-top: 9vh; }
  .gate-card { padding: 26px 22px 20px; }
  .scribble { right: 18px; bottom: 16px; font-size: 14px; }
}