/* PIXICORE_CONTACT_MOBILE_PREMIUM_V1_START */

.pc-contact-page {
  --pc-contact-ink: #102b4c;
  --pc-contact-copy: #385674;
  --pc-contact-muted: #607993;
  --pc-contact-blue: #236fd0;
  --pc-contact-teal: #149b8a;

  min-height: 100vh;
  overflow-x: clip;
}

/*
 * Hero : neutralise les anciennes règles globales qui imposaient
 * une hauteur proche de 86vh sur téléphone.
 */
.pc-contact-page :is(.hero, .page-hero, .contact-hero) {
  position: relative;
  min-height: auto !important;
  overflow: hidden;
  padding:
    clamp(7rem, 10vw, 9rem)
    1rem
    clamp(4.2rem, 7vw, 6rem) !important;

  color: #f4f9ff;

  background:
    radial-gradient(
      circle at 16% 20%,
      rgba(48, 142, 255, .25),
      transparent 22rem
    ),
    radial-gradient(
      circle at 82% 74%,
      rgba(39, 221, 188, .18),
      transparent 23rem
    ),
    linear-gradient(
      145deg,
      #061429 0%,
      #0a2340 52%,
      #071d2c 100%
    );
}

.pc-contact-page :is(.hero, .page-hero, .contact-hero)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(
      110deg,
      rgba(255, 255, 255, .035),
      transparent 35%,
      rgba(76, 221, 203, .035)
    );
}

.pc-contact-page :is(.hero, .page-hero, .contact-hero) > * {
  position: relative;
  z-index: 1;
}

.pc-contact-page :is(.hero, .page-hero, .contact-hero) h1 {
  width: min(100%, 12ch);
  max-width: 12ch;
  margin-inline: auto;

  color: #f7fbff;
  font-size: clamp(2.5rem, 7vw, 4.8rem) !important;
  font-weight: 860;
  line-height: 1.01;
  letter-spacing: -.045em;
  text-align: center;
  text-wrap: balance;

  text-shadow:
    0 2px 14px rgba(0, 8, 24, .36),
    0 22px 52px rgba(0, 6, 20, .2);
}

.pc-contact-page :is(.hero, .page-hero, .contact-hero) p,
.pc-contact-page :is(.hero, .page-hero, .contact-hero) .lead {
  width: min(100%, 44rem);
  margin-inline: auto;

  color: rgba(225, 239, 250, .86);
  font-size: clamp(1rem, 2vw, 1.15rem) !important;
  line-height: 1.62;
  text-align: center;
  text-wrap: pretty;
}

/*
 * Section principale.
 */
.pc-contact-page .contact-section,
.pc-contact-page main {
  position: relative;
}

.pc-contact-page .contact-section {
  padding-block: clamp(3.8rem, 7vw, 6rem);
}

.pc-contact-page :is(
  .contact-method-card,
  .contact-form-card,
  .contact-insight
) {
  color: var(--pc-contact-copy);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .99),
      rgba(243, 248, 254, .97)
    );

  border: 1px solid rgba(83, 139, 191, .16);
  border-radius: 24px;

  box-shadow:
    0 20px 50px rgba(25, 65, 108, .09),
    inset 0 1px 0 rgba(255, 255, 255, .98);
}

.pc-contact-page :is(
  .contact-method-card,
  .contact-form-card,
  .contact-insight
) h2,
.pc-contact-page :is(
  .contact-method-card,
  .contact-form-card,
  .contact-insight
) h3 {
  color: var(--pc-contact-ink);
  font-weight: 830;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.pc-contact-page :is(
  .contact-method-card,
  .contact-insight
) p {
  color: var(--pc-contact-copy);
  font-weight: 510;
  line-height: 1.55;
}

.pc-contact-page .contact-method-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 50px;
  height: 50px;
  margin-bottom: .9rem;

  color: #1768be;

  background:
    linear-gradient(
      145deg,
      rgba(230, 242, 255, .98),
      rgba(225, 249, 244, .95)
    );

  border: 1px solid rgba(65, 147, 205, .2);
  border-radius: 16px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 10px 24px rgba(30, 89, 144, .09);
}

/*
 * Formulaire.
 */
.pc-contact-page .contact-form-card {
  padding: clamp(1.15rem, 3vw, 1.7rem);
}

.pc-contact-page .contact-form-card form {
  display: grid;
  gap: 1rem;

  margin: 0;
  padding: 0;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.pc-contact-page .contact-form-card label,
.pc-contact-page .contact-form-card .form-label {
  display: block;
  margin-bottom: .42rem;

  color: #183958;
  font-size: .84rem;
  font-weight: 760;
  line-height: 1.3;
}

.pc-contact-page .contact-form-card :is(
  input,
  select,
  textarea,
  .form-control,
  .form-select
) {
  width: 100%;
  min-width: 0;
  min-height: 50px;

  color: #102d4c;
  background: rgba(251, 253, 255, .99);

  border: 1px solid rgba(91, 141, 187, .28);
  border-radius: 15px;

  box-shadow:
    inset 0 1px 2px rgba(17, 48, 80, .035),
    0 8px 20px rgba(25, 70, 114, .035);

  font-size: 1rem;
  font-weight: 520;
}

.pc-contact-page .contact-form-card textarea {
  min-height: 150px;
  resize: vertical;
}

.pc-contact-page .contact-form-card :is(
  input,
  textarea
)::placeholder {
  color: #74889d;
  opacity: 1;
}

.pc-contact-page .contact-form-card :is(
  input,
  select,
  textarea,
  .form-control,
  .form-select
):focus {
  color: #0d2948;
  background: #fff;

  border-color: #3696d3;
  outline: 0;

  box-shadow:
    0 0 0 4px rgba(39, 143, 207, .13),
    0 12px 26px rgba(27, 82, 132, .08);
}

.pc-contact-page .contact-form-card :is(
  input,
  textarea
):invalid:not(:placeholder-shown) {
  border-color: rgba(201, 70, 85, .58);
}

.pc-contact-page .contact-form-card button[type="submit"] {
  min-height: 52px;
  padding: .82rem 1.1rem;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      #2477d8,
      #1762bb 58%,
      #168e82
    );

  border: 1px solid rgba(23, 94, 178, .7);
  border-radius: 16px;

  box-shadow:
    0 14px 30px rgba(22, 91, 174, .2),
    inset 0 1px 0 rgba(255, 255, 255, .2);

  font-weight: 790;
}

.pc-contact-page .contact-form-card button[type="submit"]:hover {
  background:
    linear-gradient(
      135deg,
      #3087ea,
      #1b6dcb 58%,
      #16a08f
    );

  transform: translateY(-1px);
}

.pc-contact-page .contact-form-card button[type="submit"]:focus-visible {
  outline: 0;

  box-shadow:
    0 0 0 4px rgba(41, 141, 210, .16),
    0 16px 34px rgba(20, 85, 161, .22);
}

/*
 * Messages et alertes.
 */
.pc-contact-page :is(
  .alert,
  .form-message,
  .form-status,
  [role="status"]
) {
  border-radius: 15px;
  font-weight: 620;
  line-height: 1.45;
}

/*
 * Mobile.
 */
@media (max-width: 767.98px) {
  .pc-contact-page :is(.hero, .page-hero, .contact-hero) {
    min-height: 0 !important;
    padding:
      clamp(5.8rem, 16vw, 6.6rem)
      .85rem
      clamp(3.2rem, 9vw, 4rem) !important;
  }

  .pc-contact-page :is(.hero, .page-hero, .contact-hero) h1 {
    width: min(100%, 10.8ch);
    max-width: 10.8ch;

    font-size: clamp(2.2rem, 10.6vw, 3rem) !important;
    line-height: 1.02;
  }

  .pc-contact-page :is(.hero, .page-hero, .contact-hero) p,
  .pc-contact-page :is(.hero, .page-hero, .contact-hero) .lead {
    font-size: 1rem !important;
    line-height: 1.58;
  }

  .pc-contact-page .contact-section {
    padding-block: 3.7rem;
  }

  .pc-contact-page :is(
    .container,
    .container-lg,
    .container-xl
  ) {
    width: min(calc(100% - 24px), 680px);
    max-width: 680px;
  }

  .pc-contact-page :is(
    .contact-method-card,
    .contact-form-card,
    .contact-insight
  ) {
    height: auto;
    padding: 1.1rem;
    border-radius: 21px;
  }

  .pc-contact-page .row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
  }

  .pc-contact-page .contact-form-card form {
    gap: .85rem;
  }

  .pc-contact-page .contact-form-card :is(
    input,
    select,
    textarea,
    .form-control,
    .form-select
  ) {
    font-size: 16px;
  }

  .pc-contact-page .contact-form-card button[type="submit"] {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .pc-contact-page :is(
    .container,
    .container-lg,
    .container-xl
  ) {
    width: min(calc(100% - 20px), 390px);
  }

  .pc-contact-page :is(.hero, .page-hero, .contact-hero) h1 {
    font-size: 2.05rem !important;
  }
}

/* PIXICORE_CONTACT_MOBILE_PREMIUM_V1_END */