.child-theme .body-container-wrapper form .hs-richtext {
  margin-top: 0px!important;
  color: #132348!important;
}
.hs-error-msg {
  max-height: 13px!important;
}

.child-theme ul.hs-error-msgs li {
  margin-left: 0px!important;
}



/* Style de base pour le conteneur du label flottant */
.hs-form-with-floating-labels .hs-form-field:not(.hs_phone, .hs-fieldtype-textarea):not(.hs-phone, .hs-fieldtype-textarea) .floating-label-input-container {
  background-color: #fff;
  border: 1px solid #e0dbd4; /* Bordure par défaut */
  border-radius: 8px;
  cursor: text;
  min-height: 0 !important; 
  padding: 28px 16px 4px;
  position: relative;
  transition: border-color .15s cubic-bezier(.4,0,.2,1) 0s, color .15s cubic-bezier(.4,0,.2,1) 0s; /* Ajout de transition pour la couleur du label */
}

.hs-form-with-floating-labels .hs-form-field:not(.hs_phone, .hs-fieldtype-textarea):not(.hs-phone, .hs-fieldtype-textarea) .floating-label-input-container:hover {
  border-color: #c9c5bd; 
}

/* Style du label (inchangé) */
.hs-form-with-floating-labels .hs-form-field:not(.hs_phone, .hs-fieldtype-textarea):not(.hs-phone, .hs-fieldtype-textarea) .floating-label-input-container > label {
  position: absolute; top: 0; left: 0; padding: 0 4px; 
  pointer-events: none; white-space: nowrap; color: #9c968f; 
  font-size: 16px; font-weight: 400; line-height: 24px; 
  text-overflow: ellipsis; overflow: hidden;
  transform-origin: top left; 
  transform: translate3d(16px, 16px, 0); 
  transition: all .15s cubic-bezier(.4,0,.2,1) 0s;
  background-color: #fff; 
}

/* Style de l'input à l'intérieur du conteneur (inchangé) */
.hs-form-with-floating-labels .hs-form-field:not(.hs_phone, .hs-fieldtype-textarea):not(.hs-phone, .hs-fieldtype-textarea) .floating-label-input-container input.hs-input,
.hs-form-with-floating-labels .hs-form-field:not(.hs_phone, .hs-fieldtype-textarea):not(.hs-phone, .hs-fieldtype-textarea) .floating-label-input-container textarea.hs-input {
  width: 100%; height: 24px; padding: 0; font-size: 16px; font-weight: 500;
  outline: none; border: none; background-color: transparent; color: #000;
  position: relative; z-index: 1;
}
.hs-form-with-floating-labels .hs-form-field:not(.hs_phone, .hs-fieldtype-textarea):not(.hs-phone, .hs-fieldtype-textarea) .floating-label-input-container textarea.hs-input {
  height: auto; min-height: 72px; resize: vertical; padding-top: 4px; padding-bottom: 4px;
}

/* Animation du label quand l'input est focus OU rempli (inchangé) */
.hs-form-with-floating-labels .hs-form-field:not(.hs_phone, .hs-fieldtype-textarea):not(.hs-phone, .hs-fieldtype-textarea) .floating-label-input-container.focused > label,
.hs-form-with-floating-labels .hs-form-field:not(.hs_phone, .hs-fieldtype-textarea):not(.hs-phone, .hs-fieldtype-textarea) .floating-label-input-container.filled > label,
.hs-form-with-floating-labels .hs-form-field:not(.hs_phone, .hs-fieldtype-textarea):not(.hs-phone, .hs-fieldtype-textarea) .floating-label-input-container.--has-placeholder > label {
  font-size: 12px; 
  font-weight: 600; 
  color: #7d786f; 
  transform: translate3d(12px, -8px, 0); 
}

/* Style pour le conteneur quand l'input est focus */
.hs-form-with-floating-labels .hs-form-field:not(.hs_phone, .hs-fieldtype-textarea):not(.hs-phone, .hs-fieldtype-textarea) .floating-label-input-container.focused {
  border-color: #3c6cec !important; /* Couleur de focus */
}
/* Style pour le label quand l'input est focus */
.hs-form-with-floating-labels .hs-form-field:not(.hs_phone, .hs-fieldtype-textarea):not(.hs-phone, .hs-fieldtype-textarea) .floating-label-input-container.focused > label {
  color: #3c6cec !important; /* Couleur du label en focus */
}


/* NOUVEAU: Styles pour l'état d'erreur en utilisant :has() */
.hs-form-with-floating-labels .hs-form-field:not(.hs_phone, .hs-fieldtype-textarea):not(.hs-phone, .hs-fieldtype-textarea) .floating-label-input-container:has(input.hs-input.error),
.hs-form-with-floating-labels .hs-form-field:not(.hs_phone, .hs-fieldtype-textarea):not(.hs-phone, .hs-fieldtype-textarea) .floating-label-input-container:has(input.hs-input.invalid),
.hs-form-with-floating-labels .hs-form-field:not(.hs_phone, .hs-fieldtype-textarea):not(.hs-phone, .hs-fieldtype-textarea) .floating-label-input-container:has(textarea.hs-input.error),
.hs-form-with-floating-labels .hs-form-field:not(.hs_phone, .hs-fieldtype-textarea):not(.hs-phone, .hs-fieldtype-textarea) .floating-label-input-container:has(textarea.hs-input.invalid) {
  border-color: #e74c3c !important; /* Couleur de la bordure en erreur */
}

/* Changer aussi la couleur du label animé en cas d'erreur en utilisant :has() */
.hs-form-with-floating-labels .hs-form-field:not(.hs_phone, .hs-fieldtype-textarea):not(.hs-phone, .hs-fieldtype-textarea) .floating-label-input-container:has(input.hs-input.error):is(.focused, .filled) > label,
.hs-form-with-floating-labels .hs-form-field:not(.hs_phone, .hs-fieldtype-textarea):not(.hs-phone, .hs-fieldtype-textarea) .floating-label-input-container:has(input.hs-input.invalid):is(.focused, .filled) > label,
.hs-form-with-floating-labels .hs-form-field:not(.hs_phone, .hs-fieldtype-textarea):not(.hs-phone, .hs-fieldtype-textarea) .floating-label-input-container:has(textarea.hs-input.error):is(.focused, .filled) > label,
.hs-form-with-floating-labels .hs-form-field:not(.hs_phone, .hs-fieldtype-textarea):not(.hs-phone, .hs-fieldtype-textarea) .floating-label-input-container:has(textarea.hs-input.invalid):is(.focused, .filled) > label {
  color: #e74c3c !important; /* Couleur du label en erreur quand il est flottant */
}

/* Styles pour les messages d'erreur HubSpot (inchangé) */
.hs-form-with-floating-labels .hs-error-msgs label.hs-error-msg {
  display: block;
  color: #e74c3c;
  font-size: 12px;
  margin-top: 4px;
  position: relative; 
}

/* Cibler le conteneur du message d'erreur pour le positionnement */
.hs-form-field .hs-error-msgs,
.hs-form-field .inputs-list { /* HubSpot utilise parfois l'un ou l'autre */
  position: relative; /* Contexte pour le positionnement absolu du pseudo-élément */
  /* Vous pourriez avoir besoin d'ajuster la hauteur ou le padding si le masquage cause des problèmes de layout */
}

/* Masquer le texte original du label d'erreur HubSpot */
.hs-form-field label.hs-error-msg {
  font-size: 0 !important; /* Rend le texte original invisible en réduisant sa taille à 0 */
  color: transparent !important; /* Rend le texte original transparent */
  display: block; /* S'assurer qu'il prend de la place pour le pseudo-élément */
  position: relative; /* Pour que le pseudo-élément se positionne par rapport à lui */
  /* min-height: 1em; */ /* Pour s'assurer qu'il a une hauteur même avec font-size: 0 */
}

/* Afficher votre message personnalisé avec un pseudo-élément pour chaque champ spécifique */

/* Pour le champ Prénom (en supposant que son conteneur .hs-form-field a la classe .hs_firstname) */
{#.hs-form-field.hs_firstname label.hs-error-msg::before {
  content: "Renseignez votre prénom"; /* Votre message personnalisé */
  font-size: 12px; /* Taille de police de votre message (doit correspondre à votre design) */
  color: #e74c3c;   /* Couleur de votre message d'erreur */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: block;
  /* white-space: nowrap; */ /* Si vous ne voulez pas de retour à la ligne */
}


.hs-form-field.hs_besoin_tsm_support label.hs-error-msg::before {
  content: "Veuillez renseigner vos informations "; /* Votre message personnalisé */
  font-size: 12px; /* Taille de police de votre message (doit correspondre à votre design) */
  color: #e74c3c;   /* Couleur de votre message d'erreur */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: block;
  /* white-space: nowrap; */ /* Si vous ne voulez pas de retour à la ligne */
}

/* Pour le champ Nom (en supposant .hs_lastname) */
.hs-form-field.hs_lastname label.hs-error-msg::before {
  content: "Renseignez votre nom";
  font-size: 12px; 
  color: #e74c3c;   
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: block;
}

/* Pour le champ Société (en supposant .hs_company) */
.hs-form-field.hs_company label.hs-error-msg::before {
  content: "Veuillez renseigner votre société";
  font-size: 12px; 
  color: #e74c3c;   
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: block;
}
.hs-form-field.hs_phone label.hs-error-msg::before {
  content: "Veuillez renseigner votre numéro de téléphone";
  font-size: 12px; 
  color: #e74c3c;   
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: block;
}
#}
/* Si vous avez un message d'erreur générique pour les autres champs obligatoires */
/* Vous pouvez utiliser :not() pour exclure ceux déjà traités */
/*
.hs-form-field:not(.hs_firstname):not(.hs_lastname):not(.hs_company) label.hs-error-msg::before {
content: "Ce champ est requis."; // Votre message générique personnalisé
font-size: 12px; 
color: #e74c3c;   
position: absolute;
left: 0;
top: 0;
width: 100%;
display: block;
}
*/


/* Assurez-vous que la liste ul elle-même n'ajoute pas de style de puce visible */
.hs-error-msgs.inputs-list{
  list-style-type: none !important;
  padding-left: 0 !important;
  margin-top: 4px; /* Ou l'espacement que vous souhaitez */
}
.hs-error-msgs.inputs-list li {
  padding-left: 0 !important;
}
.hs_besoin_tsm_support .hs-error-msgs li {
  list-style: none !important;
}

.step-5-expert .small-image-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Crée 3 colonnes de largeur égale */
  gap: 15px; /* Espace entre les images (ajustez selon vos besoins) */
  width: 100%; /* Ou une largeur max si vous voulez que la grille soit plus étroite */
  /* max-width: 400px; */ /* Exemple de largeur max pour la grille */
  /*margin-top: 20px; Espace au-dessus de la grille */
}

.small-image-grid-item {
  width: 100%; /* L'item prend toute la largeur de sa cellule de grille */
  aspect-ratio: 1 / 1; /* Pour rendre chaque cellule (et donc l'image) carrée */
  overflow: hidden; /* Si les images ne sont pas parfaitement carrées et que vous utilisez object-fit: cover */
  background-color: #f0f0f0; /* Couleur de fond si l'image est transparente ou charge */
  border-radius: 8px; /* Coins arrondis pour les items de la grille */
  display: flex; /* Pour centrer l'image à l'intérieur si elle est plus petite */
  justify-content: center;
  align-items: center;
}

.small-image-grid-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 'cover' remplit l'espace, 'contain' montre tout */
  border-radius: 8px; /* Si vous voulez que l'image elle-même ait des coins arrondis */
}

/* Responsive : Sur les petits écrans, vous pourriez vouloir moins de colonnes */
@media (max-width: 767px) {
  .step-5-expert .small-image-grid-container {
    grid-template-columns: repeat(2, 1fr); /* Passe à 2 colonnes sur mobile */
    gap: 10px;
    /* max-width: 300px; */ /* Ajustez la largeur max pour mobile si besoin */
  }
}

@media (max-width: 480px) {
  .step-5-expert .small-image-grid-container {
    /* Vous pourriez même passer à 1 colonne sur de très petits écrans,
    ou garder 2 colonnes mais avec des images plus petites. */
    /* grid-template-columns: repeat(1, 1fr); */
  }
  .slide-image-wrapper img { /* Si vous voulez aussi ajuster l'image principale du slider en mobile */
    max-width: 150px;
    max-height: 150px;
  }
}



/* TOAST */

/* Styles pour le conteneur de toasts (déjà dans votre HTML) */
/* #toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
width: 320px; 
display: flex;
flex-direction: column;
gap: 10px;
} */

.custom-toast-notification {
  background-color: #C53030; /* Rouge foncé (ajustez si besoin) */
  color: white;
  padding: 16px;
  border-radius: 8px; /* Bordures arrondies */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  font-family: Arial, sans-serif; /* Ou votre police préférée */
  font-size: 14px;
  display: flex;
  flex-direction: column; /* Pour placer la barre de progression en bas */
  position: relative; /* Pour la barre de progression absolue */
  overflow: hidden; /* Pour que la barre de progression ne dépasse pas les coins arrondis */
}

.custom-toast-notification.show {
  opacity: 1;
  transform: translateX(0);
}

/* Différents types de toasts (vous pouvez ajouter success, info, warning) */
.custom-toast-notification.error {
  background-color: #C53030; /* Rouge foncé pour erreur */
}
.custom-toast-notification.success {
  background-color: #2F855A; /* Vert foncé pour succès */
}
.custom-toast-notification.info {
  background-color: #2B6CB0; /* Bleu foncé pour info */
}


.custom-toast-notification-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.custom-toast-notification-message {
  flex-grow: 1;
  padding-right: 10px; /* Espace avant le bouton de fermeture */
}

.custom-toast-notification-close-button {
  background: none;
  border: none;
  color: white;
  font-size: 22px; /* Légèrement plus grand pour une meilleure cliquabilité */
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
  padding: 0 0 0 10px; /* Un peu de padding pour la zone de clic */
  align-self: flex-start; /* Aligner en haut si le message est long */
}

.custom-toast-notification-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.5); /* Blanc semi-transparent */
  width: 100%; /* Sera animé par JS */
  transition: width 0.1s linear; /* Transition douce pour la barre */
}