/*
 * Vitrine discussly.ai — PAGE D'ATTENTE (refonte 29/07/2026).
 * Jetons repris du projet Claude Design d'Alexandre :
 *   violet #6D4CFF (survol #5B3BE8) · encre #071433 · secondaire #7A8194
 *   filet #E6E8F0 · fond BLANC FRANC · Plus Jakarta Sans.
 * Contraintes fermes : aucune surface teintée, aucune ombre colorée, aucun
 * dégradé. Le violet n'apparaît qu'à TROIS endroits : logo, bouton d'envoi,
 * liens. Tout le reste est encre sur blanc. Une colonne, mobile d'abord.
 */
:root {
  --violet: #6D4CFF;
  --violet-hover: #5B3BE8;
  --ink: #071433;
  --secondary: #7A8194;
  --line: #E6E8F0;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #fff;
  color: var(--ink);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
main {
  max-width: 560px;
  margin: 0 auto;
  padding: 40px 22px calc(28px + env(safe-area-inset-bottom));
}
.logo { display: block; width: 168px; height: auto; }
h1 {
  margin: 40px 0 18px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
}
.intro { margin: 0 0 34px; font-size: 16px; }
.demos { margin: 0 0 40px; padding: 0; list-style: none; }
.demos li { margin-bottom: 10px; font-size: 16px; }
a { color: var(--violet); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--violet-hover); }
form { border: 1px solid var(--line); border-radius: 12px; padding: 22px 20px; }
.form-title { margin: 0 0 4px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.form-sub { margin: 0 0 12px; font-size: 14px; color: var(--secondary); }
label { display: block; font-size: 13.5px; font-weight: 600; margin: 14px 0 5px; }
label .facultatif { font-weight: 400; color: var(--secondary); }
/* 16 px minimum : sous ce seuil, Safari iOS zoome au focus (piège connu). */
input, textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  outline: none;
}
input:focus, textarea:focus { border-color: var(--ink); }
textarea { min-height: 96px; resize: vertical; }
/* Honeypot : hors écran, jamais display:none (certains bots l'évitent). */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
button {
  margin-top: 20px;
  width: 100%;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--violet);
  border: none;
  border-radius: 10px;
  padding: 13px;
  cursor: pointer;
}
button:hover { background: var(--violet-hover); }
button:disabled { opacity: 0.55; cursor: default; }
.note { margin: 12px 0 0; font-size: 12.5px; color: var(--secondary); }
.feedback { margin: 14px 0 0; font-size: 14.5px; display: none; }
.feedback.error { display: block; color: var(--ink); font-weight: 700; }
.feedback.ok { display: block; color: var(--ink); }
footer {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--secondary);
}
footer a { font-weight: 600; }
/* Pages légales */
.legal h1 { font-size: 24px; margin: 36px 0 8px; }
.legal h2 { font-size: 16.5px; font-weight: 700; margin: 26px 0 6px; }
.legal p, .legal li { font-size: 15px; margin: 0 0 10px; }
.legal .retour { display: inline-block; margin-top: 10px; }
.a-completer { background: #fff; border: 1px dashed var(--ink); padding: 0 6px; font-weight: 700; }