/* ==========================================================
   CERCLE MANOIRS — CARTEL D’INSCRIPTION
   ========================================================== */


/* ----------------------------------------------------------
   CARTEL PRINCIPAL
   ---------------------------------------------------------- */

.cercle-cartel {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  margin: 54px 0;
  padding: 58px 28px;

  border: none;
  background: #000;
}


/* ----------------------------------------------------------
   SIRACIDE COMPLET EN ARRIÈRE-PLAN
   ---------------------------------------------------------- */

.cercle-cartel::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 0;

  background-image: url("../img/siracide-manoirs.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 112% auto;

  opacity: 0.3;

  pointer-events: none;

  /*
   * Le motif est plus présent au centre
   * puis se fond progressivement vers les bords.
   */
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    #000 22%,
    rgba(0, 0, 0, 0.92) 58%,
    rgba(0, 0, 0, 0.50) 80%,
    transparent 100%
  );

  mask-image: radial-gradient(
    ellipse at center,
    #000 22%,
    rgba(0, 0, 0, 0.92) 58%,
    rgba(0, 0, 0, 0.50) 80%,
    transparent 100%
  );
}


/* ----------------------------------------------------------
   VOILE NOIR POUR PROTÉGER LA LECTURE
   ---------------------------------------------------------- */

.cercle-cartel::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 1;

  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.38) 0%,
    rgba(0, 0, 0, 0.22) 52%,
    rgba(0, 0, 0, 0.04) 100%
  );

  pointer-events: none;
}


/* ----------------------------------------------------------
   CONTENU DEVANT LE MOTIF ET LE VOILE
   ---------------------------------------------------------- */

.cercle-cartel__inner {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}


/* ==========================================================
   FORMULAIRE
   ========================================================== */

.cercle-form {
  margin: 0;
}


/* ----------------------------------------------------------
   CHAMP E-MAIL
   ---------------------------------------------------------- */

.cercle-field {
  display: flex;
  flex-direction: column;

  gap: 10px;
  margin-bottom: 22px;
}

.cercle-field label {
  font-size: 0.9rem;
  line-height: 1.4;
}

.cercle-field input[type="email"] {
  box-sizing: border-box;

  width: 100%;
  max-width: 100%;

  padding: 15px 16px;

  color: #f2f2f2;
  background: rgba(0, 0, 0, 0.62);

  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 0;

  font: inherit;

  -webkit-appearance: none;
  appearance: none;
}

.cercle-field input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.cercle-field input[type="email"]:focus {
  border-color: rgba(255, 255, 255, 0.76);

  outline: 1px solid rgba(255, 255, 255, 0.48);
  outline-offset: 3px;
}


/* ----------------------------------------------------------
   CONSENTEMENT
   ---------------------------------------------------------- */

.cercle-consent {
  display: flex;
  align-items: flex-start;

  gap: 13px;
  margin: 20px 0 24px;

  line-height: 1.5;
  cursor: pointer;
}

.cercle-consent input[type="checkbox"] {
  flex: 0 0 auto;

  width: 19px;
  height: 19px;
  margin-top: 4px;

  accent-color: #d8d2c6;
}


/* ==========================================================
   BOUTON
   ========================================================== */

.cercle-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;
  padding: 13px 20px;

  color: #e7e2d8;
  background: rgba(0, 0, 0, 0.76);

  border: 1px solid rgba(231, 226, 216, 0.60);
  border-radius: 0;

  font: inherit;
  letter-spacing: 0.03em;

  cursor: pointer;

  -webkit-appearance: none;
  appearance: none;

  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

.cercle-submit:hover,
.cercle-submit:focus-visible {
  color: #000;
  background: #e7e2d8;
  border-color: #e7e2d8;
}

.cercle-submit:focus-visible {
  outline: 1px solid #e7e2d8;
  outline-offset: 4px;
}


/* ----------------------------------------------------------
   NOTE SOUS LE FORMULAIRE
   ---------------------------------------------------------- */

.cercle-note {
  margin: 26px 0 0;

  color: rgba(255, 255, 255, 0.72);

  font-size: 0.9rem;
  line-height: 1.65;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 640px) {

  .cercle-cartel {
    margin: 46px 0;

    /* Plus de hauteur autour du formulaire */
    padding: 68px 16px;
  }

  /*
   * Le Siracide est déjà chargé dans la règle générale :
   *
   * .cercle-cartel::before {
   *   background-image: url("../img/siracide-manoirs.png");
   * }
   */

  .cercle-cartel::before {
  background-size: 108% auto;
  background-position: center 52%;
  background-repeat: no-repeat;

  opacity: 0.3;

  -webkit-mask-image: radial-gradient(
    circle at center,
    #000 0%,
    #000 62%,
    rgba(0, 0, 0, 0.78) 82%,
    transparent 100%
  );

  mask-image: radial-gradient(
    circle at center,
    #000 0%,
    #000 62%,
    rgba(0, 0, 0, 0.78) 82%,
    transparent 100%
  );
}

  /*
   * Voile noir placé entre le Siracide
   * et le formulaire pour préserver la lecture.
   */
  .cercle-cartel::after {
    background: radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0.52) 0%,
      rgba(0, 0, 0, 0.30) 56%,
      rgba(0, 0, 0, 0.05) 100%
    );
  }

  .cercle-field input[type="email"] {
    padding: 14px;
  }

  .cercle-consent {
    gap: 12px;
    margin: 20px 0 24px;
  }

  .cercle-submit {
    width: 100%;
    padding: 14px 16px;
  }

  .cercle-note {
    margin-top: 24px;
    font-size: 0.86rem;
    line-height: 1.6;
  }
}