/* ═══════════════════════════════════════════════════════════════════════
   FACE CAMÉRA — formulaire de téléchargement
   Charte Wanda : noir #000000, or #C9A84C en accent seul, Inter.

   Toutes les règles sont portées par « .fc-optin ». Ce n'est pas une
   coquetterie de style : les articles de blog déclarent leurs propres
   sélecteurs, du type « .article-content p », dont la spécificité écrasait
   le bloc. Il s'affichait alors avec un titre à 17 px au lieu de 30 et un
   sur-titre gris au lieu d'or. Le préfixe rend le composant insensible à
   la feuille de style de la page qui l'accueille.
   ═══════════════════════════════════════════════════════════════════════ */

.fc-optin {
  --fc-or: #C9A84C;
  --fc-gris: #9A9A9A;
  border: 1px solid rgba(201, 168, 76, 0.32);
  background:
    radial-gradient(90% 120% at 88% 6%, rgba(201, 168, 76, 0.09) 0%, rgba(0, 0, 0, 0) 62%),
    #000000;
  padding: 40px 36px;
  max-width: 720px;
  margin: 0 auto;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  color: #ffffff;
  box-sizing: border-box;
  text-align: left;
}

.fc-optin *,
.fc-optin *::before,
.fc-optin *::after { box-sizing: border-box; }

.fc-optin .fc-kick {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fc-or);
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.fc-optin .fc-kick::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--fc-or);
  flex-shrink: 0;
}

.fc-optin .fc-titre {
  font-family: inherit;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-transform: none;
  color: #ffffff;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.fc-optin .fc-sous {
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--fc-gris);
  margin: 0 0 26px;
  padding: 0;
  max-width: 52ch;
}

/* ── Le formulaire ─────────────────────────────────────────────────── */

.fc-optin .fc-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.fc-optin .fc-mail {
  flex: 1 1 240px;
  min-width: 0;
  /* 16 px minimum : en dessous, Safari sur iPhone zoome à chaque focus et
     recadre la page. Propriétés séparées, car le raccourci « font »
     n'accepte pas « inherit » comme famille : toute la déclaration serait
     ignorée et le champ retomberait à 13,3 px. */
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  padding: 15px 22px;
  margin: 0;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.fc-optin .fc-mail::placeholder { color: #6b6b6b; opacity: 1; }

.fc-optin .fc-mail:focus {
  outline: none;
  border-color: var(--fc-or);
  background: rgba(255, 255, 255, 0.08);
}

.fc-optin .fc-mail:focus-visible { box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.28); }

.fc-optin .fc-btn {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: #000000;
  background: var(--fc-or);
  border: 0;
  border-radius: 100px;
  padding: 15px 30px;
  margin: 0;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.fc-optin .fc-btn:hover { transform: translateY(-1px); background: var(--fc-or); }
.fc-optin .fc-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.fc-optin .fc-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

/* Piège à robots : invisible à l'œil, atteignable par un script. */
.fc-optin .fc-pot,
.fc-optin .fc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.fc-optin .fc-note {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.55;
  color: #6b6b6b;
  margin: 16px 0 0;
  padding: 0;
  max-width: 56ch;
}

/* ── États ─────────────────────────────────────────────────────────── */

.fc-optin .fc-etat:empty { display: none; }

.fc-optin .fc-etat {
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: #ffffff;
  margin: 16px 0 0;
}

.fc-optin .fc-etat.fc-err { color: #E58A6B; }

.fc-optin .fc-ok {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: #ffffff;
  margin: 0 0 18px;
  padding: 0;
}

.fc-optin .fc-dl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: #000000;
  background: var(--fc-or);
  text-decoration: none;
  border: 0;
  border-radius: 100px;
  padding: 15px 30px;
}

.fc-optin .fc-dl::after { content: '↓'; font-size: 17px; }

/* ── Mobile ────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .fc-optin { padding: 30px 22px; }
  .fc-optin .fc-titre { font-size: 25px; }
  .fc-optin .fc-sous { font-size: 14.5px; }
  .fc-optin .fc-form { flex-direction: column; }
  /* En colonne, l'axe principal devient la verticale : le « flex: 1 1 240px »
     du champ s'y lit comme une hauteur de 240 px, étirée par le grow. Le
     champ se transformait en bulle. On neutralise le flex et on impose la
     largeur, qui est ici l'axe secondaire. */
  .fc-optin .fc-mail,
  .fc-optin .fc-btn { flex: 0 0 auto; width: 100%; }
  .fc-optin .fc-btn { padding: 16px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-optin .fc-btn,
  .fc-optin .fc-mail { transition: none; }
  .fc-optin .fc-btn:hover { transform: none; }
}