/* ---------------------------------------------------------------------------
   Habillage du formulaire HubSpot pour fond sombre
   ---------------------------------------------------------------------------
   HubSpot génère son propre balisage : .hs-form, .hs-form-field, .hs-input,
   .hs-button, .hs-error-msgs… On ne peut pas le changer, on l'habille.

   Toutes les règles sont préfixées par .gfr-form-sombre : elles ne s'appliquent
   qu'aux formulaires posés dans cette section, jamais aux autres formulaires
   HubSpot du portail.

   Repères de balisage HubSpot, utiles pour intervenir plus tard :
     .hs-form-field          un champ complet (label + input + erreurs)
     .hs-form-field > label  l'intitulé, avec .hs-form-required pour l'astérisque
     .hs-field-desc          le texte d'aide sous l'intitulé
     .hs-input               input, select et textarea
     .hs-fieldtype-checkbox  cases à cocher (structure différente)
     .legal-consent-container  bloc RGPD si le formulaire en a un
     .hs_submit .hs-button   le bouton d'envoi
     .hs-error-msgs          les messages de validation
     .submitted-message      le message de remerciement en ligne
--------------------------------------------------------------------------- */

/* --- Intitulés ------------------------------------------------------------- */

.gfr-form-sombre .hs-form-field > label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

.gfr-form-sombre .hs-form-required {
  margin-left: 0.15rem;
  color: var(--emerald);
}

.gfr-form-sombre .hs-field-desc {
  display: block;
  margin: -0.25rem 0 0.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

/* --- Champs de saisie ------------------------------------------------------ */

.gfr-form-sombre .hs-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: #fff;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.gfr-form-sombre .hs-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.gfr-form-sombre .hs-input:hover {
  background: rgba(255, 255, 255, 0.12);
}

.gfr-form-sombre .hs-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--emerald) 50%, transparent);
  background: rgba(255, 255, 255, 0.12);
}

.gfr-form-sombre textarea.hs-input {
  min-height: 6rem;
  resize: vertical;
}

/* Les listes déroulantes héritent du fond du système : on force la couleur
   des options, sinon elles s'affichent en blanc sur blanc sous Windows. */
.gfr-form-sombre select.hs-input option {
  background: var(--navy-deep);
  color: #fff;
}

/* HubSpot pose parfois une largeur en pixels en style inline sur les champs :
   on la neutralise pour rester fluide. */
.gfr-form-sombre .hs-input[style*="width"] {
  width: 100% !important;
}

/* Cases à cocher et boutons radio : l'input ne doit pas s'étirer. */
.gfr-form-sombre .hs-input[type="checkbox"],
.gfr-form-sombre .hs-input[type="radio"] {
  width: auto;
  margin-right: 0.5rem;
  accent-color: var(--emerald);
}

.gfr-form-sombre .hs-fieldtype-checkbox label,
.gfr-form-sombre .hs-fieldtype-radio label,
.gfr-form-sombre .inputs-list label {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}

.gfr-form-sombre .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Espacement entre les champs ------------------------------------------- */

.gfr-form-sombre .hs-form-field {
  margin-bottom: 1rem;
}

.gfr-form-sombre .hs-form-field:last-of-type {
  margin-bottom: 0;
}

/* --- Consentement RGPD ------------------------------------------------------ */

.gfr-form-sombre .legal-consent-container {
  margin-top: 1rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
}

.gfr-form-sombre .legal-consent-container a {
  color: var(--emerald);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Blocs du consentement : un espacement régulier entre le texte d'intro, la
   case marketing, le texte de désinscription et la mention de traitement. */
.gfr-form-sombre .legal-consent-container > * + * {
  margin-top: 0.75rem;
}

.gfr-form-sombre .legal-consent-container .hs-form-field {
  margin-bottom: 0;
}

/* Case marketing : HubSpot décale le libellé de 20 px et laisse la case en
   haut de ligne. On la recolle au libellé et on la centre. */
.gfr-form-sombre .legal-consent-container .hs-form-booleancheckbox-display {
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
}

.gfr-form-sombre .legal-consent-container .hs-form-booleancheckbox-display > span {
  margin-left: 0;
}

.gfr-form-sombre .legal-consent-container input[type="checkbox"] {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin: 0;
}

/* --- Bouton d'envoi --------------------------------------------------------- */

.gfr-form-sombre .hs_submit {
  margin-top: 1.5rem;
}

.gfr-form-sombre .hs-button {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  border-radius: 9999px;
  background: var(--emerald);
  padding: 0.75rem 1.5rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--navy-deep);
  cursor: pointer;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--emerald) 25%, transparent);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gfr-form-sombre .hs-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px -4px color-mix(in srgb, var(--emerald) 45%, transparent);
}

.gfr-form-sombre .hs-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.gfr-form-sombre .hs-button:disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* --- Erreurs et message de confirmation ------------------------------------- */

.gfr-form-sombre .hs-error-msgs {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}

.gfr-form-sombre .hs-error-msg,
.gfr-form-sombre .hs-error-msgs label {
  font-size: 0.75rem;
  font-weight: 400;
  color: #ff9b9b;
}

.gfr-form-sombre .submitted-message {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}

.gfr-form-sombre .submitted-message a {
  color: var(--emerald);
}

/* --- Disposition sur deux colonnes ------------------------------------------
   HubSpot empile les champs. On repasse en grille, et on fait tenir sur toute
   la largeur ce qui a besoin de place : zones de texte, listes déroulantes,
   cases à cocher, consentement, erreurs, bouton.

   Le sélecteur :has() est indispensable ici (aucune classe HubSpot ne
   distingue un champ « long » d'un champ court). Les navigateurs qui ne le
   supportent pas gardent une seule colonne — dégradation propre. */

@supports selector(:has(*)) {
  @media (min-width: 640px) {
    .gfr-form-colonnes-2 form.hs-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 1rem;
    }

    .gfr-form-colonnes-2 form.hs-form > .hs-form-field:has(textarea),
    .gfr-form-colonnes-2 form.hs-form > .hs-form-field:has(select),
    .gfr-form-colonnes-2 form.hs-form > .hs-form-field:has(input[type="checkbox"]),
    .gfr-form-colonnes-2 form.hs-form > .hs-form-field:has(input[type="radio"]),
    .gfr-form-colonnes-2 form.hs-form > .hs-dependent-field,
    .gfr-form-colonnes-2 form.hs-form > .legal-consent-container,
    .gfr-form-colonnes-2 form.hs-form > .hs_error_rollup,
    .gfr-form-colonnes-2 form.hs-form > .hs_submit,
    .gfr-form-colonnes-2 form.hs-form > .hs_recaptcha {
      grid-column: 1 / -1;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .gfr-form-sombre .hs-input,
  .gfr-form-sombre .hs-button {
    transition: none;
  }

  .gfr-form-sombre .hs-button:hover {
    transform: none;
  }
}