:root{
  --indigo:#17143D; --indigo-2:#221E57; --ink:#0E0C28;
  --clay:#D2652D; --clay-dk:#A9441B; --ochre:#EBA35E;
  --sand:#F5ECDE; --sand-2:#EBDDC6; --paper:#FFFBF5;
  --text:#1D1930; --muted:#6B6377; --ok:#2F8F68; --err:#C2410C;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --accent:"Instrument Serif",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --sans:"Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --bogolan:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23EBA35E' stroke-width='1.5'%3E%3Cpath d='M0 12h48M0 36h48'/%3E%3Cpath d='M0 24l4-4 4 4 4-4 4 4 4-4 4 4 4-4 4 4 4-4 4 4 4-4 4 4'/%3E%3C/g%3E%3Cg fill='%23EBA35E'%3E%3Ccircle cx='12' cy='4' r='1.6'/%3E%3Ccircle cx='36' cy='4' r='1.6'/%3E%3Crect x='22' y='42' width='4' height='4'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{font-family:var(--sans);color:var(--text);background:var(--sand);-webkit-font-smoothing:antialiased;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;min-height:100vh}
@media(min-width:960px){body{grid-template-columns:minmax(420px,46%) minmax(0,1fr);grid-template-rows:1fr}}
::selection{background:var(--clay);color:#fff}
:focus-visible{outline:3px solid var(--clay);outline-offset:3px;border-radius:6px}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* ═════════ PANNEAU GAUCHE : le sceau ═════════ */
.vault{position:relative;overflow:hidden;background:var(--indigo);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:28px clamp(20px,4vw,48px)}
.vault::before{content:"";position:absolute;inset:0;background:var(--bogolan);opacity:.09;animation:slide 60s linear infinite}
.vault::after{content:"";position:absolute;width:640px;height:640px;left:50%;top:50%;margin:-320px 0 0 -320px;border-radius:50%;background:radial-gradient(circle,rgba(210,101,45,.28),transparent 62%);animation:breathe 7s ease-in-out infinite alternate}
@keyframes slide{to{background-position:480px 0}}
@keyframes breathe{from{opacity:.6;transform:scale(.92)}to{opacity:1;transform:scale(1.06)}}
.vault>*{position:relative;z-index:1}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand img,.brand .mk{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 2px var(--ochre)}
.brand b{display:block;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1}
.brand small{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#A39DC8}

.seal{width:min(400px,78%);aspect-ratio:1;margin:24px auto}
.seal svg{width:100%;height:100%;overflow:visible}
.ring-text{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:1px;fill:#A39DC8}
.r-spin{transform-origin:200px 200px;animation:spin 48s linear infinite}
.r-spin-rev{transform-origin:200px 200px;animation:spin 30s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.seg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:10;stroke-linecap:round;transition:stroke .3s,filter .3s}
.seg.on{stroke:var(--clay);filter:drop-shadow(0 0 8px rgba(210,101,45,.8))}
.seal.ok .seg{stroke:var(--ochre);filter:drop-shadow(0 0 10px rgba(235,163,94,.85))}
.seal.err .seg{stroke:#F87171}
.seal.err{animation:shake .45s}
.seal.send .r-spin-rev{animation-duration:2.5s}
.core{fill:var(--indigo-2);stroke:rgba(235,163,94,.35);stroke-width:1.5}
.lock-body{fill:var(--ochre);transition:fill .4s}
.lock-shackle{fill:none;stroke:var(--ochre);stroke-width:9;stroke-linecap:round;transition:transform .55s cubic-bezier(.3,1.6,.5,1),stroke .4s}
.seal.ok .lock-shackle{transform:translateY(-14px) rotate(-28deg);transform-origin:222px 186px;stroke:#fff}
.seal.ok .lock-body{fill:#fff}
.lock-hole{fill:var(--indigo-2)}
.seal-in{animation:sealIn 1.2s var(--ease) both}
@keyframes sealIn{from{opacity:0;transform:scale(.85) rotate(-25deg)}to{opacity:1;transform:none}}

.motto{max-width:420px}
.motto p{font-family:var(--accent);font-style:italic;font-size:clamp(28px,2.8vw,38px);line-height:1.1;color:#FFFBF5}
.motto p span{color:var(--ochre)}
.motto ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#A39DC8}
.motto li{display:flex;align-items:center;gap:8px}
.motto li::before{content:"";width:6px;height:6px;background:var(--clay);transform:rotate(45deg)}

@media(max-width:959px){
  .vault{flex-direction:row;align-items:center;gap:16px;padding:18px 20px;min-height:0}
  .seal{width:76px;margin:0 0 0 auto;order:2}
  .ring-text{display:none}
  .motto{display:none}
}

/* ═════════ PANNEAU DROIT : le formulaire ═════════ */
.panel{position:relative;display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,6vw,72px) clamp(20px,7vw,96px)}
.panel::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 0h24L12 12z' fill='%2317143D'/%3E%3C/svg%3E") repeat-x;background-size:24px 12px}
@media(min-width:960px){.panel::before{display:none}}
.wrap{width:100%;max-width:460px}

.counter{display:flex;align-items:baseline;gap:10px;font-family:var(--mono);font-weight:700;color:var(--muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.counter b{font-family:var(--display);font-size:44px;font-weight:800;letter-spacing:-.04em;color:var(--clay);line-height:1;transition:transform .4s var(--ease)}
.counter i{font-style:normal;opacity:.5}

h1{font-family:var(--display);font-weight:800;font-size:clamp(40px,5vw,60px);line-height:.95;letter-spacing:-.045em;color:var(--indigo);margin:18px 0 14px}
h1 em{display:block;font-family:var(--accent);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--clay)}
.lead{font-size:15.5px;line-height:1.6;color:var(--muted);max-width:400px}
.lead strong{color:var(--indigo);font-weight:600;overflow-wrap:anywhere;background:linear-gradient(transparent 62%,rgba(235,163,94,.4) 62%)}

.step{margin-top:34px}
.step[hidden]{display:none}
.step.enter{animation:enter .55s var(--ease) both}
@keyframes enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.head.enter{animation:enter .5s var(--ease) both}

.lbl{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--indigo);margin-bottom:10px}

/* Champ email : grande ligne */
.line{position:relative;display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--sand-2);padding-bottom:6px;transition:border-color .2s}
.line::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--clay);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.line:focus-within::after{transform:scaleX(1)}
.line.bad::after{background:var(--err);transform:scaleX(1)}
.line svg{width:22px;height:22px;color:var(--muted);flex:none;transition:color .2s}
.line:focus-within svg{color:var(--clay)}
.line input{flex:1;min-width:0;border:0;outline:none;background:none;font-family:var(--display);font-weight:500;font-size:clamp(20px,2.2vw,24px);letter-spacing:-.02em;color:var(--indigo);padding:10px 0}
.line input::placeholder{color:#B5A991}

/* Code : 3 + 3 tuiles */
.otp{display:flex;align-items:center;gap:8px}
.otp input{flex:1;min-width:0;height:72px;border-radius:14px;text-align:center;background:var(--paper);border:1.5px solid var(--sand-2);border-bottom-width:4px;font-family:var(--display);font-size:32px;font-weight:800;color:var(--indigo);outline:none;caret-color:var(--clay);transition:border-color .2s,transform .2s var(--ease),box-shadow .2s,background .2s}
.otp input:focus{border-color:var(--clay);transform:translateY(-3px);box-shadow:0 14px 24px -16px rgba(210,101,45,.8)}
.otp input.filled{border-color:var(--indigo);background:#fff}
.otp .sep{flex:none;width:14px;height:3px;border-radius:2px;background:var(--sand-2)}
.otp.bad input{border-color:var(--err)}
.otp.good input{border-color:var(--ok);background:#EAF6F0;color:var(--ok)}
.otp.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@media(max-width:420px){.otp{gap:5px}.otp input{height:58px;font-size:24px;border-radius:11px}.otp .sep{width:8px}}

/* Bouton pilule indigo avec pastille terre cuite */
.btn{margin-top:30px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 8px 8px 26px;border-radius:999px;background:var(--indigo);color:#fff;font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.01em;transition:background .2s,box-shadow .25s,transform .15s}
.btn:hover:not(:disabled){background:var(--ink);box-shadow:0 18px 34px -18px rgba(23,20,61,.8)}
.btn:active:not(:disabled){transform:scale(.99)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn .go{width:48px;height:48px;border-radius:50%;background:var(--clay);display:flex;align-items:center;justify-content:center;flex:none;transition:transform .3s var(--ease)}
.btn:hover:not(:disabled) .go{transform:rotate(-45deg)}
.btn .go svg{width:20px;height:20px}
.btn .spin{display:none;width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;animation:spin .7s linear infinite}
.btn.loading .spin{display:block}.btn.loading .go svg{display:none}
.btn.loading .go{transform:none}

.msg{margin-top:14px;font-size:13.5px;line-height:1.45;font-weight:500}
.msg:empty{display:none}
.msg.err{color:var(--err)}.msg.ok{color:var(--ok)}.msg.info{color:var(--muted)}

.alt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;font-size:14px;color:var(--muted)}
.link{color:var(--indigo);font-weight:600;border-bottom:1.5px solid var(--clay);padding-bottom:1px;transition:color .2s}
.link:hover:not(:disabled){color:var(--clay)}
.link:disabled{color:#A79E8E;border-color:transparent;cursor:default}
.timer{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}

.note{margin-top:36px;display:flex;gap:12px;align-items:flex-start;font-size:12.5px;line-height:1.55;color:var(--muted);padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.55);border:1px dashed var(--sand-2)}
.note svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--clay)}

.done{margin-top:34px}
.done .badge{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 12px;border-radius:999px;background:#EAF6F0;color:var(--ok);font-weight:600;font-size:14px}
.done .badge i{width:26px;height:26px;border-radius:50%;background:var(--ok);display:flex;align-items:center;justify-content:center;animation:pop .5s cubic-bezier(.3,1.6,.5,1) both}
.done .badge svg{width:15px;height:15px;color:#fff}
.done .bar{margin-top:22px;height:4px;border-radius:4px;background:var(--sand-2);overflow:hidden}
.done .bar i{display:block;height:100%;width:100%;background:var(--clay);transform-origin:left;animation:fill 1.1s var(--ease) both}
@keyframes pop{from{transform:scale(0)}to{transform:none}}
@keyframes fill{from{transform:scaleX(0)}to{transform:none}}

.foot{margin-top:48px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:#9C927F}
.foot b{color:var(--indigo)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}