:root{
  --paper:#14120f; --paper-2:#1c1916; --paper-3:#241f1a; --ink:#efe9df; --ink-2:#a89e90; --ink-3:#6f6659;
  --rule:#2c2621; --rule-2:#3d352d; --brand:#e2703f; --green:#5fa86e;
  --serif:'Instrument Serif',Georgia,serif; --sans:'Public Sans',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14.5px;line-height:1.6;
 min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;
 background-image:radial-gradient(circle at 78% -8%,rgba(226,112,63,.13),transparent 45%)}
a{color:var(--brand);text-decoration:none;border-bottom:1px solid rgba(226,112,63,.35)}

/* ---- colonne gauche : discours ---- */
.left{padding:56px 60px;display:flex;flex-direction:column;border-right:1px solid var(--rule)}
.kicker{font-size:10.5px;text-transform:uppercase;letter-spacing:.22em;color:var(--ink-3);margin-bottom:7px}
.logo{font-family:var(--serif);font-size:34px;line-height:.9;letter-spacing:-.01em}
.logo em{color:var(--brand);font-style:italic}
.pitch{margin-top:auto;padding-bottom:8px}
.pitch h1{font-family:var(--serif);font-size:52px;line-height:1.02;letter-spacing:-.02em;font-weight:400;max-width:15ch}
.pitch h1 em{font-style:italic;color:var(--brand)}
.pitch p{color:var(--ink-2);font-size:15px;margin-top:16px;max-width:42ch}
.pts{margin-top:34px;display:flex;flex-direction:column;gap:1px;background:var(--rule);border:1px solid var(--rule);max-width:430px}
.pt{background:var(--paper-2);padding:14px 18px;display:flex;gap:14px;align-items:flex-start}
.pt .n{font-family:var(--serif);font-size:22px;color:var(--brand);line-height:1;width:24px;flex:none}
.pt .t{font-size:13px;color:var(--ink-2);line-height:1.5}
.pt .t b{color:var(--ink);font-weight:600;display:block;font-size:13.5px}
.foot{margin-top:38px;font-size:11.5px;color:var(--ink-3);line-height:1.65;max-width:46ch}

/* ---- colonne droite : formulaire ---- */
.right{padding:56px 60px;display:flex;flex-direction:column;justify-content:center;background:var(--paper-2)}
.box{width:100%;max-width:380px;margin:0 auto}
.box h2{font-family:var(--serif);font-size:32px;font-weight:400;letter-spacing:-.01em;line-height:1.1}
.box .sub{color:var(--ink-2);font-size:14px;margin-top:10px}
form{margin-top:30px}
label{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-3);margin-bottom:7px}
input[type=email]{width:100%;background:transparent;border:none;border-bottom:1px solid var(--rule-2);
 color:var(--ink);font-family:var(--sans);font-size:16px;padding:9px 2px;outline:none;transition:border-color .15s}
input[type=email]:focus{border-color:var(--brand)}
input::placeholder{color:var(--ink-3);opacity:.45}
.err{color:var(--brand);font-size:12px;margin-top:9px;display:none}
.err.on{display:block}
.go{width:100%;margin-top:26px;background:var(--brand);color:#1a120c;border:none;border-radius:2px;
 font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
 padding:14px;cursor:pointer;transition:.15s}
.go:hover{background:#f0824f}
.go:disabled{opacity:.5;cursor:default}
.hint{font-size:11.5px;color:var(--ink-3);margin-top:16px;line-height:1.6}
.rule{height:1px;background:var(--rule);margin:30px 0}
.help{font-size:12px;color:var(--ink-2);line-height:1.7}

/* ---- état 2 : lien envoyé ---- */
.sent{display:none}
.sent.on{display:block;animation:fade .3s ease}
.form-state.off{display:none}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.seal{width:52px;height:52px;border:1px solid var(--green);border-radius:50%;display:grid;place-items:center;
 color:var(--green);font-size:23px;margin-bottom:22px}
.mailbox{background:var(--paper-3);border:1px solid var(--rule-2);border-left:2px solid var(--brand);
 padding:14px 16px;margin-top:22px;font-size:13px;color:var(--ink-2);line-height:1.6}
.mailbox b{color:var(--ink);font-weight:600}
.again{background:none;border:none;color:var(--brand);font-family:var(--sans);font-size:12.5px;
 cursor:pointer;padding:0;margin-top:20px;border-bottom:1px solid rgba(226,112,63,.35)}
@media(max-width:940px){body{grid-template-columns:1fr}.left{border-right:none;border-bottom:1px solid var(--rule);padding:36px 26px}
 .right{padding:40px 26px}.pitch h1{font-size:38px}.pitch{margin-top:30px}}

/* ---------- notice neutre ---------- */
/* Pendant neutre de .err : même mécanique (.on pour afficher), mais dans les
   tons de l'encre au lieu de l'accent. .err reste réservée à ce qui alarme
   (accès révoqué, lien invalide) ; .note porte ce qui informe (déconnexion,
   retour d'export). Le filet et le fond distinguent la notice d'un paragraphe
   ordinaire — sans eux, les messages d'export passaient inaperçus. */
.note{color:var(--ink-2);font-size:12px;margin-top:9px;display:none;
 background:var(--paper-2);border-left:2px solid var(--rule-2);padding:9px 12px}
.note.on{display:block}