:root{
  --yellow:#F2C400;
  --ink:#111111;
  --muted:#2a2a2a;
  --card:#ffffff;
  --border: rgba(0,0,0,.16);
  --shadow: 0 18px 60px rgba(0,0,0,.14);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  color:var(--ink);

  /* Blanc étiquette + ambiance jaune discrète en bas */
  background:
    radial-gradient(1100px 520px at 50% 0%, rgba(242,196,0,.14), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 62%, rgba(242,196,0,.22) 78%, rgba(242,196,0,.65) 100%);
}

.wrap{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:28px 16px;
}

.hero{
  width:min(860px, 100%);
  text-align:center;
  position:relative;
  padding:20px 18px 18px;
}

.brand{
  display:flex;
  justify-content:center;
  margin: 6px 0 10px;
}

.logo{
  width: min(320px, 92%);
  height:auto;
  display:block;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.16));
}

h1{
  margin:10px 0 6px;
  letter-spacing:.02em;
  font-size: clamp(34px, 5vw, 54px);
}

.lead{
  margin:0 auto 18px;
  max-width: 62ch;
  color: var(--muted);
  font-size: 1.05rem;
}

.card{
  margin: 16px auto 0;
  width: min(720px, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 18px 16px 16px;
}

.card h2{
  margin: 4px 0 14px;
  font-size: 1.15rem;
}

.form{display:block}

.row{
  display:flex;
  gap:10px;
  align-items:stretch;
}

input[type="email"]{
  flex:1;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  font-size: 1rem;
  outline:none;
  background: #fff;
}

input[type="email"]:focus,
.human input:focus{
  border-color: rgba(0,0,0,.35);
  box-shadow: 0 0 0 5px rgba(242,196,0,.22);
}

button{
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.18);
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  cursor:pointer;
  transition: transform .05s ease, opacity .15s ease;
  min-width: 120px;
}

button:active{transform: translateY(1px)}
button:disabled{opacity:.55; cursor:not-allowed}

.human{
  margin: 14px auto 6px;
  width: min(520px, 100%);
  text-align:left;
}
.human label{
  display:block;
  font-weight:700;
  margin: 0 0 6px;
}
.human input{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  font-size: 1rem;
  outline:none;
}

.consent{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin: 10px 2px 0;
  font-size: .95rem;
  color: #1d1d1d;
}

.fineprint{
  margin: 10px 0 0;
  font-size: .85rem;
  color: #333;
  opacity:.9;
}
.fineprint a{color:inherit}

.msg{
  margin-top: 12px;
  min-height: 24px;
  font-weight: 800;
}
.msg.ok{color:#0b6b2e}
.msg.err{color:#9b111e}

.footer{
  margin-top: 18px;
  font-size: .9rem;
  opacity:.9;
}

/* helpers */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.sr-only{position:absolute; left:-9999px}

@media (max-width:560px){
  .row{flex-direction:column}
  button{width:100%}
}