.site-header {
    z-index: 1000!important;
}


/* 1) Style de base */
#menu-item-553 > a {
  display: inline-block;           /* pour permettre le padding et les bordures */
  background-color: #C71B00;          /* fond noir */
  color: #fff;                     /* texte blanc */
  border: 2px solid #C71B00;       /* contour rouge */
  border-radius: 4px;              /* coins arrondis */
  padding: 0px 10px 0px 10px;            /* espace intérieur */
  font-size: 14px;                 
  text-decoration: none;           /* on enlève le soulignement */
  transition: 
    background-color 0.2s ease, 
    color 0.2s ease;
}

/* 2) Hover / focus */
#menu-item-553 > a:hover,
#menu-item-553 > a:focus {
  background-color: #C71B00;       /* fond rouge au survol */
  color: #000;                     /* texte noir */
}


.nf-form-fields-required {
  display: none !important;
}

/* Conteneur des deux boutons */
.nf-next-previous {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;               /* espace entre les boutons */
  justify-content: center; /* ou space-between selon votre design */
}

/* Style commun à vos boutons */
.nf-next-previous input.nf-previous,
.nf-next-previous input.nf-next {
  /* Apparence général */
  background-color: #000;         /* fond noir */
  color: #fff;                    /* texte blanc */
  border: 2px solid #E50914;      /* bord rouge */
  border-radius: 4px;             /* coins arrondis */
  padding: 0.6em 1.2em;           /* espace intérieur */
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;       /* supprime le style par défaut sur certains navigateurs */
  transition: 
    background-color 0.2s ease,
    color 0.2s ease;
}

/* Effet au survol */
.nf-next-previous input.nf-previous:hover,
.nf-next-previous input.nf-next:hover {
  background-color: #E50914;  /* fond rouge */
  color: #FFF;                /* texte noir */
}

/* 1) Label (au‐dessus de tous les inputs) */
.nf-field-label {
  color: #fff !important;
  font-weight: 400;
  margin-bottom: 0.25em;
  display: block;
}

/* 2) Champs input/text/email/tel… */
.ninja-forms-field.nf-element {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid #E50914 !important;
  color: #fff !important;
  padding: 0.4em 0 !important;
  font-size: 1rem !important;
  outline: none !important;
  width: 100% !important;
  transition: border-color 0.2s ease !important;
}

/* 3) Placeholder en rose pâle */
.ninja-forms-field.nf-element::placeholder {
  color: #FFB6C1 !important;
  opacity: 1 !important;
}
.ninja-forms-field.nf-element:-ms-input-placeholder { color: #FFB6C1 !important; }
.ninja-forms-field.nf-element::-ms-input-placeholder { color: #FFB6C1 !important; }

/* 4) Focus : intensifier légèrement la bordure */
.ninja-forms-field.nf-element:focus {
  border-bottom-color: #FF4545 !important;
}

/* 5) En cas d’erreur */
.nf-form-field.nf-error .ninja-forms-field.nf-element {
  border-bottom-color: #ff0000 !important;
}

/* 6) Espacement sous chaque champ */
.nf-form-field {
  margin-bottom: 1.5em !important;
}







/* 1) Mise en page de la liste */
.nf-field-element ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nf-field-element ul li {
  margin-bottom: 1em;
  display: flex;
  align-items: center;
}

/* 2) On masque la checkbox native */
.nf-field-element input[type="checkbox"] {
  display: none !important;
}

/* 3) On stylise le label pour accueillir la case perso */
.nf-field-element label {
  position: relative;
  padding-left: 2em;    /* espace pour notre case */
  color: #fff;          /* texte blanc */
  cursor: pointer;
  user-select: none;
  font-size: 1rem;
}

/* 4) Le carré décoché */
.nf-field-element label::before {
  content: "";
  position: absolute;
  left: 0; top: 0.1em;   /* ajuste verticalement selon la taille du texte */
  width: 1.2em; height: 1.2em;
  border: 2px solid #E50914;  /* bord rouge */
  border-radius: 3px;
  background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* 5) Effet hover pour feedback */
.nf-field-element label:hover::before {
  border-color: #FF4545;
}

/* 6) Quand la case est cochée */
.nf-field-element input[type="checkbox"]:checked + label::before {
  background: #E50914;   /* fond rouge */
  border-color: #E50914;
}

/* 7) Le « ✓ » apparaissant */
.nf-field-element input[type="checkbox"]:checked + label::after {
  content: "\2713";      /* Unicode de la coche */
  position: absolute;
  left: 0.3em; top: 0.05em; 
  font-size: 1.1em;
  color: #fff;
}

/* 8) Petite animation à l’apparition de la coche */
.nf-field-element label::after {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.nf-field-element input[type="checkbox"]:checked + label::after {
  opacity: 1;
}

#nf-field-22.ninja-forms-field.nf-element[type="submit"] {
  background-color: #E50914 !important;
  color: #fff !important;
  border: 2px solid #E50914 !important;
  border-radius: 4px !important;
  padding: 0.6em 1.2em !important;
  font-size: 1rem !important;
  font-family: inherit !important;
  -webkit-appearance: none !important;
  display: inline-block !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Hover / focus (quand activé) */
#nf-field-22.ninja-forms-field.nf-element[type="submit"]:hover,
#nf-field-22.ninja-forms-field.nf-element[type="submit"]:focus {
  background-color: #E50914 !important;
  color: #000 !important;
}

/* Style spécifique quand il est désactivé */
#nf-field-22.ninja-forms-field.nf-element[type="submit"]:disabled,
#nf-field-22.ninja-forms-field.nf-element[type="submit"][aria-disabled="true"] {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  /* Si vous voulez un retour visuel différent, décommentez : */
  /* background-color: #333 !important; */
  /* border-color: #999 !important; */
}


/* 1) On réaffiche la checkbox #nf-field-20 */
#nf-field-20 {
  display: inline-block !important;
  /* dimensions du carré */
  width: 1.2em !important;
  height: 1.2em !important;
  /* on cache son style natif pour repartir à zéro */
  -webkit-appearance: none !important;
  appearance: none !important;
  /* bouton carré : bord rouge + fond transparent */
  border: 2px solid #E50914 !important;
  border-radius: 3px !important;
  background-color: transparent !important;
  /* position relative pour pouvoir dessiner la coche */
  position: relative !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  margin-right: 0.5em !important;
  margin-left: -0.5em !important;
}

/* 2) La coche blanche (pseudo-élément) */
#nf-field-20::after {
  content: "" !important;
  position: absolute !important;
  /* positionner le « ✓ » à peu près au centre */
  top: 2px !important;
  left: 6px !important;
  width: 4px !important;
  height: 8px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

/* 3) Afficher la coche quand c’est coché */
#nf-field-20:checked::after {
  opacity: 1 !important;
}

/* 4) Mettre label & checkbox sur la même ligne */
#nf-field-20-wrap {
  display: flex !important;
  align-items: center !important;
}

/* 5) Styler le label */
#nf-field-20-wrap .nf-field-label {
  color: #fff !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
}