/* ============================================================================
   capture-inline.css, bloc de capture de courriel réutilisable (L25, 2026-08-02)

   POURQUOI UN FICHIER PARTAGÉ : le formulaire .capture-form existant est recopié
   en ligne dans chacune des 19 pages qui l'ont, styles compris. Le poser sur 10
   pages de plus par copier-coller aurait fait 29 copies à maintenir. Ici : une
   feuille, un script, et une div sur la page.

   RÈGLE DE POSITION (non négociable) : ce bloc ne se met JAMAIS au-dessus de
   l'offre. Sur une page de vente, il est la dernière chose de la page. Un
   formulaire qui demande un courriel au-dessus du bouton qui demande 57 $ ne
   bouche pas une fuite, il détourne une vente vers une liste.

   Les couleurs viennent de css/clario-v4.css (--gold, --ink, --body, --ink3,
   --ok, --erreur, --line, --card-top, --card-bot) : aucune valeur en dur, le
   bloc suit le thème du site partout où il est posé.
   ============================================================================ */

.capture-inline {
  max-width: 620px;
  margin: 44px auto 8px;
  padding: 26px 24px 24px;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--card-top), var(--card-bot));
  border: 1px solid var(--line);
  text-align: center;
}

.capture-inline .ci-titre {
  font-family: 'Sora', Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.3;
}

.capture-inline .ci-sous {
  color: var(--body);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 auto 18px;
  max-width: 430px;
}

.capture-inline form {
  display: grid;
  gap: 11px;
  max-width: 380px;
  margin: 0 auto;
}

.capture-inline input[type=email] {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(118, 107, 255, .4);
  background: rgba(7, 17, 31, .65);
  color: var(--ink);
  font-size: 15.5px;
  font-family: 'Inter', Arial, sans-serif;
}

.capture-inline input[type=email]:focus {
  outline: none;
  border-color: var(--gold);
}

.capture-inline button {
  width: 100%;
  padding: 15px 22px;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: 'Sora', Arial, sans-serif;
  background: var(--gold);
  color: #07111F;
}

.capture-inline button:disabled { opacity: .6; cursor: default; }

/* Pot de miel : invisible pour l'humain, rempli par les robots. Jamais display:none,
   certains robots ignorent les champs cachés de cette façon. */
.capture-inline .ci-hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}

.capture-inline .ci-msg {
  display: none;
  padding: 13px;
  border-radius: 12px;
  font-size: 14.5px;
  margin-top: 4px;
  line-height: 1.55;
}

.capture-inline .ci-msg.ok {
  display: block;
  background: rgba(121, 214, 163, .12);
  border: 1px solid rgba(121, 214, 163, .4);
  color: var(--ok);
}

.capture-inline .ci-msg.err {
  display: block;
  background: rgba(255, 128, 149, .1);
  border: 1px solid rgba(255, 128, 149, .4);
  color: var(--erreur);
}

.capture-inline .ci-reassure {
  font-size: 12.5px;
  color: var(--ink3);
  margin: 13px auto 0;
  line-height: 1.55;
  max-width: 400px;
}

.capture-inline .ci-reassure a { color: var(--ink3); text-decoration: underline; }

@media (max-width: 560px) {
  .capture-inline { margin: 34px 16px 8px; padding: 22px 18px 20px; }
}