/* =========================================================================
   AFO — Bloc formulaire d'inscription concours
   Design aligné sur la charte AFO (cf. style.css : palette1=pink #e6007e,
   palette2=purple #33224d, font 'BBB Poppins TN Display').
   2026-06-17
   ====================================================================== */

.afo-concours {
  --afo-purple: var(--global-palette2, #33224d);
  --afo-pink:   var(--global-palette1, #e6007e);
  --afo-white:  var(--global-palette9, #fff);
  --afo-font:   'BBB Poppins TN Display', 'Poppins', Helvetica, Arial, sans-serif;
  --afo-grey:   #565656;

  font-family: var(--afo-font);
  color: var(--afo-pink);
  max-width: 760px;
}

/* ---- En-tête ---------------------------------------------------------- */
.afo-concours__head { margin-bottom: 32px; }

.afo-concours__title {
  font-family: var(--afo-font);
  font-weight: 700;
  line-height: 1.1;
  color: var(--afo-pink);
  margin: 0 0 12px;
  font-size: clamp(28px, 4vw, 44px);
}
.afo-concours__title span { color: var(--afo-pink); }

.afo-concours__intro {
  font-size: 18px;
  margin: 0;
  color: var(--afo-pink);
}

.afo-concours__req { color: var(--afo-pink); font-weight: 700; }

/* ---- Champs ----------------------------------------------------------- */
.afo-concours__field { margin-bottom: 26px; border: 0; padding: 0; }
.afo-concours__group { margin: 0 0 26px; }

.afo-concours__label {
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--afo-pink);
  margin-bottom: 10px;
  padding: 0;
}

.afo-concours__input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--afo-pink);
  border-radius: 5px;
  min-height: 64px;
  padding: 14px 20px;
  font-family: var(--afo-font);
  font-size: 18px;
  color: #000;
  background: var(--afo-white);
}
.afo-concours__textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}
.afo-concours__input::placeholder { color: #000; opacity: .65; }

.afo-concours__input:hover,
.afo-concours__input:focus,
.afo-concours__input:focus-visible {
  outline: 2px solid var(--afo-purple);
  outline-offset: 2px;
}

/* ---- Radios / Checkboxes custom -------------------------------------- */
.afo-concours__choice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  padding: 8px 0;
  font-size: 17px;
  line-height: 1.4;
}
/* input natif masqué mais focusable */
.afo-concours__choice input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}
.afo-concours__choice-box {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  margin-top: 1px;
  border: 2px solid var(--afo-pink);
  border-radius: 50%;            /* radio */
  background: var(--afo-white);
  position: relative;
  transition: border-color .15s ease, background-color .15s ease;
}
.afo-concours__choice-box--check { border-radius: 4px; } /* checkbox */

/* coche / point */
.afo-concours__choice-box::after {
  content: "";
  position: absolute;
  opacity: 0;
  transition: opacity .12s ease;
}
.afo-concours__choice-box:not(.afo-concours__choice-box--check)::after {
  inset: 5px;
  border-radius: 50%;
  background: var(--afo-pink);
}
.afo-concours__choice-box--check::after {
  left: 7px; top: 3px;
  width: 6px; height: 11px;
  border: solid var(--afo-white);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.afo-concours__choice input:checked + .afo-concours__choice-box::after { opacity: 1; }
.afo-concours__choice input:checked + .afo-concours__choice-box--check {
  background: var(--afo-pink);
  border-color: var(--afo-pink);
}
.afo-concours__choice input:focus-visible + .afo-concours__choice-box {
  outline: 3px solid var(--afo-purple);
  outline-offset: 2px;
}
.afo-concours__choice-text { color: var(--afo-pink); }

/* ---- États d'erreur --------------------------------------------------- */
.afo-concours__field.is-error .afo-concours__input { border-color: #c0143c; }
.afo-concours__error {
  display: block;
  margin-top: 6px;
  color: #c0143c;
  font-size: 14px;
  font-weight: 600;
}

/* ---- Statut global (succès / erreur générale) ------------------------ */
.afo-concours__status {
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: 17px;
  font-weight: 600;
}
.afo-concours__status.is-success {
  background: #e7f6ed;
  color: #14663a;
  border: 1px solid #9bd4b3;
}
.afo-concours__status.is-failure {
  background: #fdecef;
  color: #8a1026;
  border: 1px solid #f0aebb;
}

/* ---- Honeypot (masqué) ------------------------------------------------ */
.afo-concours__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---- Bouton (style pill AFO) ----------------------------------------- */
.afo-concours__actions { margin-top: 12px; }

.afo-concours__submit {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--afo-white);
  border: 2px solid var(--afo-pink);
  border-radius: 80px;
  padding: 16px 44px;
  color: var(--afo-pink);
  font-family: var(--afo-font);
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.afo-concours__submit-icon {
  width: 28px; height: 28px;
  flex: 0 0 auto;
  background-color: var(--afo-pink);
  transition: background-color .18s ease;
  -webkit-mask: var(--afo-mail-mask) center / contain no-repeat;
          mask: var(--afo-mail-mask) center / contain no-repeat;
}
.afo-concours {
  --afo-mail-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none'><path d='M27.5 8.75L16.26 15.91a2.33 2.33 0 0 1-2.51 0L2.5 8.75' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><rect x='2.5' y='5' width='25' height='20' rx='2.5' stroke='black' stroke-width='2'/></svg>");
}
.afo-concours__submit:hover,
.afo-concours__submit:focus-visible {
  background: var(--afo-pink);
  border-color: var(--afo-pink);
  color: var(--afo-white);
  box-shadow: none;
}
.afo-concours__submit:hover .afo-concours__submit-icon,
.afo-concours__submit:focus-visible .afo-concours__submit-icon {
  background-color: var(--afo-white);
}
.afo-concours__submit:focus-visible {
  outline: 3px solid var(--afo-purple);
  outline-offset: 3px;
}
.afo-concours__submit[disabled] { opacity: .6; cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  .afo-concours__submit,
  .afo-concours__submit-icon,
  .afo-concours__choice-box,
  .afo-concours__choice-box::after { transition: none; }
}

/* ---- États ajoutés v2 (2026-06-17) ----------------------------------- */
/* Message informatif (clôture) — variante neutre du statut, charte violet. */
.afo-concours__status.is-info {
  background: #eef0f8;
  color: var(--afo-purple);
  border: 1px solid #c9cfe6;
}
.afo-concours__closed-msg { font-size: 18px; line-height: 1.5; }
.afo-concours__closed-msg p { margin: 0 0 10px; }
.afo-concours__closed-msg :last-child { margin-bottom: 0; }

/* Écran de remerciement (#3) — révélé en JS au succès, look "succès" AFO. */
.afo-concours__thanks {
  background: #e7f6ed;
  color: #14663a;
  border: 1px solid #9bd4b3;
  border-radius: 6px;
  padding: 24px 28px;
  font-size: 18px;
  line-height: 1.5;
}
.afo-concours__thanks p { margin: 0 0 12px; }
.afo-concours__thanks :last-child { margin-bottom: 0; }