/* ==========================================================================
   Section newsletter — mise en page de la maquette
   --------------------------------------------------------------------------
   La maquette veut : les cases secteur, puis le champ e-mail et le bouton dans
   une même pilule blanche, puis le consentement en dessous.

   Gravity Forms sort les champs dans l'ordre du formulaire — secteurs,
   consentement, e-mail, bouton — et son champ « submit » doit rester le
   dernier. On replace donc chaque champ dans une zone de grille nommée : le
   DOM ne change pas, l'affichage suit la maquette, et le champ e-mail et le
   bouton partagent la même cellule pour ne former qu'une pilule.
   ========================================================================== */

.formulaire.newsletter-archive .gform_wrapper .gform_heading,
.formulaire.newsletter-archive .gform_wrapper .gform_required_legend,
.formulaire.newsletter-archive .gform_wrapper .gfield--type-email .gfield_label,
.formulaire.newsletter-archive .gform_wrapper .gf-sector-checkboxes > .gfield_label {
  display: none !important;
}

/* Le thème met ce conteneur en « flex column » avec une largeur maximale de
   31,25vw — d'où les champs empilés et, sur un écran étroit, une pilule trop
   courte pour contenir le bouton. On reprend la main sur les deux. */
.formulaire.newsletter-archive .gform_wrapper .gform_fields {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "secteurs"
    "saisie"
    "consentement";
  width: 100%;
  max-width: 620px !important;
  margin-left: auto;
  margin-right: auto;
  row-gap: 26px;
  column-gap: 0;
}

.formulaire.newsletter-archive .gform_wrapper .gfield.gf-sector-checkboxes {
  grid-area: secteurs !important;
}

.formulaire.newsletter-archive .gform_wrapper .gfield--type-email {
  grid-area: saisie !important;
  position: relative;
}

/* Même cellule que le champ e-mail : le bouton se pose dessus, à droite.
   « align-self: start » le garde collé au haut de la pilule même quand un
   message d'erreur fait grandir la cellule. */
.formulaire.newsletter-archive .gform_wrapper .gfield--type-submit {
  grid-area: saisie !important;
  justify-self: end;
  align-self: start;
  margin-top: 6px;
  z-index: 2;
}

.formulaire.newsletter-archive .gform_wrapper .gfield--type-mailchimp {
  grid-area: consentement !important;
  justify-self: start;
}

/* -------------------------------------------------- La pilule et son bouton */

.formulaire.newsletter-archive .gform_wrapper .gfield--type-email .ginput_container_email {
  margin: 0;
}

.formulaire.newsletter-archive .gform_wrapper .gfield--type-email input[type="email"] {
  width: 100%;
  height: 64px;
  margin: 0;
  /* La réserve à droite laisse la place au bouton, quelle que soit la langue. */
  padding: 0 200px 0 28px;
  border: 1px solid #e4e4ee;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 17, 26, 0.04);
  font-size: 16px;
  color: #11111a;
}

.formulaire.newsletter-archive .gform_wrapper .gfield--type-email input[type="email"]:focus {
  border-color: #6450d7;
  outline: none;
  box-shadow: 0 0 0 3px rgba(100, 80, 215, 0.15);
}

.formulaire.newsletter-archive .gform_wrapper .gfield--type-email input[type="email"]::placeholder {
  color: #9a9aa8;
  opacity: 1;
}

.formulaire.newsletter-archive .gform_wrapper .gfield--type-submit .gform-button,
.formulaire.newsletter-archive .gform_wrapper .gfield--type-submit button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  width: auto;
  margin: 0 6px 0 0;
  padding: 0 34px;
  border: 0;
  border-radius: 999px;
  background: #6450d7;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease;
}

.formulaire.newsletter-archive .gform_wrapper .gfield--type-submit .gform-button:hover,
.formulaire.newsletter-archive .gform_wrapper .gfield--type-submit button:hover {
  background: #523fc0;
}

/* ------------------------------------------------------- Les cases secteur
   Le thème a bien une règle pour elles, mais elle cible
   `.gform_fields .gfield:nth-child(1)` : or le premier enfant est le honeypot
   de Gravity Forms, donc elle ne s'applique jamais et les cases restent
   natives. On la rejoue sur le bon sélecteur, avec ses valeurs — celles que le
   thème utilise déjà pour la case de consentement, qui elle est correcte et
   qu'on laisse tranquille. */

.formulaire.newsletter-archive .gform_wrapper .gf-sector-checkboxes .gfield_checkbox .gchoice input[type="checkbox"] {
  position: relative;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25px;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  margin: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: 2px solid #6450d7;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.formulaire.newsletter-archive .gform_wrapper .gf-sector-checkboxes .gfield_checkbox .gchoice input[type="checkbox"]:checked {
  background-color: #6450d7;
}

.formulaire.newsletter-archive .gform_wrapper .gf-sector-checkboxes .gfield_checkbox .gchoice input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  -webkit-transform: translate(-50%, -60%) rotate(45deg);
  transform: translate(-50%, -60%) rotate(45deg);
}

/* Les deux secteurs sur une ligne, centrés : annule la mise en colonnes de
   Gravity Forms (gf_list_2col). */
.formulaire.newsletter-archive .gform_wrapper .gf-sector-checkboxes .ginput_container_checkbox {
  margin: 0;
  width: 100%;
}

.formulaire.newsletter-archive .gform_wrapper .gf-sector-checkboxes .gfield_checkbox {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 56px;
  grid-template-columns: none !important;
  -webkit-column-count: initial !important;
  column-count: initial !important;
  margin: 0;
  padding: 0;
  list-style: none;
}

.formulaire.newsletter-archive .gform_wrapper .gf-sector-checkboxes .gchoice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
}

/* 15px : la taille que le thème donne au libellé de consentement, pour que les
   deux lignes de cases se répondent. */
.formulaire.newsletter-archive .gform_wrapper .gf-sector-checkboxes .gchoice label {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  color: #11111a;
  cursor: pointer;
}

/* ------------------------------------------------- La case de consentement
   Le thème lui donne sa hauteur (25px), son bord violet, son rayon et sa coche
   — mais pas de largeur. Or il lui met `appearance: none` et `display: block` :
   Chrome la traite alors comme un champ texte et lui applique la largeur par
   défaut d'un input, mesurée à 134px. D'où le « bouton » trop large. Il ne
   manque que la largeur ; le reste de l'habillage est celui du thème.

   Le sélecteur reprend la chaîne du thème et y ajoute `.formulaire`, pour
   passer devant sans recourir à `!important`. */

.formulaire.newsletter-archive .gform_wrapper form .gform_body .gfield--type-mailchimp .gfield_checkbox li input[type="checkbox"] {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25px;
  flex: 0 0 25px;
  width: 25px;
  min-width: 25px;
  max-width: 25px;
  height: 25px;
}

/* Le libellé du thème est à 15px, mais cette règle-là est enfermée dans une
   media query mobile : on la rejoue pour que la ligne réponde aux secteurs. */
.formulaire.newsletter-archive .gform_wrapper form .gform_body .gfield--type-mailchimp .gfield_checkbox li label {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
}

/* ------------------------------------------------------------- Les messages */

/* Le thème masque le récapitulatif d'erreurs de Gravity Forms sur ce type de
   section. Le choix reste le sien, mais il faut alors que le message du champ
   s'affiche : sans lui, cliquer « S'abonner » sans case cochée ne produirait
   rien de visible. */
.formulaire.newsletter-archive .gform_wrapper .gfield_validation_message,
.formulaire.newsletter-archive .gform_wrapper .validation_message {
  display: block !important;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: #b3261e;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}

.formulaire.newsletter-archive .gform_confirmation_message {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

/* ----------------------------------------------------------------- Mobile */

@media (max-width: 767px) {
  .formulaire.newsletter-archive .gform_wrapper .gform_fields {
    grid-template-areas:
      "secteurs"
      "saisie"
      "bouton"
      "consentement";
    row-gap: 20px;
  }

  .formulaire.newsletter-archive .gform_wrapper .gfield--type-submit {
    grid-area: bouton !important;
    justify-self: stretch;
    margin-top: 0;
  }

  .formulaire.newsletter-archive .gform_wrapper .gfield--type-submit .gform-button,
  .formulaire.newsletter-archive .gform_wrapper .gfield--type-submit button {
    width: 100%;
    height: 56px;
    margin: 0;
  }

  .formulaire.newsletter-archive .gform_wrapper .gfield--type-email input[type="email"] {
    height: 56px;
    padding: 0 24px;
  }

  .formulaire.newsletter-archive .gform_wrapper .gf-sector-checkboxes .gfield_checkbox {
    gap: 14px 32px;
  }
}