/* ============================================================
   PORTAIL ZOHO DESK — CSS personnalisé
   Correction : le libellé du champ "Quel est votre besoin ?"
   (dropdown departmentId replié) suit maintenant la valeur
   réellement sélectionnée, dans toutes les langues.
   ============================================================ */

/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */

/* Agrandir le logo */
.Header__logo {
  max-height: 80px !important;
  width: auto !important;
}

/* Ajuste le conteneur */
.Header__logoimg {
  display: flex;
  align-items: center;
}

/* Donne plus d’espace à la navbar */
.Header__menuWrapper {
  min-height: 100px;
  margin-bottom: -20px !important;
}

/* Réduit l'espace au-dessus de la zone recherche */
.Header__titleSearchWrapper {
  padding-top: -20px !important;
  margin-top: -20px !important;
}

.Header__containerLink {
  width: 8.9rem !important;
}

/* ------------------------------------------------------------
   MISE EN PAGE DU FORMULAIRE
   ------------------------------------------------------------ */

.TicketFormLeftContainer__title {
  margin-top: -12px !important;
}

/* Cache le 1er titre de section du formulaire.
   Le nom de cette section est traduit nativement par Desk
   ("Informations sur Ticket" / "Ticket Information" / ...), donc la
   classe générée change à chaque langue ET à chaque département.
   On cible sa POSITION dans le DOM : le titre de section qui suit
   immédiatement le titre du formulaire. Les sections suivantes
   ("Informations spécifiques", "Objet de la demande") ne sont pas
   touchées. */
.TicketFormLeftContainer__title + .TicketFormLeftContainer__sectionName,
.TicketFormLeftContainer__title
  + .TicketFormLeftContainer__w50
  + .TicketFormLeftContainer__sectionName {
  display: none !important;
}

/* Remonte le bloc Service */
#field_departmentId {
  margin-top: -20px !important;
}

.TicketFormLeftContainer__part {
  background: #fff;
  border-radius: 16px !important;
  overflow: hidden;
  border: none;

  box-shadow:
    0 2px 8px rgba(0,0,0,.04),
    0 12px 32px rgba(0,0,0,.06);

  padding: 24px;
}

/* Bouton Envoyer */
span#ticket_submit.Button_primary {
  background: #425463 !important;
  border-color: #425463 !important;
  color: #fff !important;
}

/* Bloc aide */
.WidgetsContainer__rightWd {
  line-height: 1.3 !important;
}

/* Paragraphes */
.WidgetsContainer__rightWd .size {
  line-height: 1.3 !important;
  margin-bottom: 6px;
}

.Layout__twoColumn {
  max-width: 85%;
}

/* ------------------------------------------------------------
   LABEL departmentId
   ------------------------------------------------------------ */

/* Cache le texte original */
label[for="departmentId"] .Form__labelText {
  visibility: hidden !important;
}

/* Cache l'étoile originale */
label[for="departmentId"] .Form__required {
  display: none !important;
}

/* Prépare le label */
label[for="departmentId"] {
  position: relative;
}

/* Nouveau texte */
label[for="departmentId"]::after {
  content: "Quel est votre besoin ?";
  position: absolute;
  left: 0;
  top: 10;

  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;

  white-space: nowrap;
}

/* Nouvelle étoile */
label[for="departmentId"]::before {
  content: "*";
  position: absolute;

  left: 165px;
  top: 15;

  color: #d97706;
  font-weight: bold;
}

/* ------------------------------------------------------------
   LABEL productId
   ------------------------------------------------------------ */

/* 1. Cache le texte original */
label[for="productId"] span.Form__labelText {
  visibility: hidden !important;
}

/* 2. Cache l'étoile originale */
label[for="productId"] .Form__required {
  display: none !important;
}

/* 3. Prépare le label */
label[for="productId"] {
  position: relative;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  margin-top: 20px !important;
  margin-bottom: -10px !important;
}

/* 4. Nouveau label avec étoile devant */
label[for="productId"]::after {
  content: "Référence du produit (Code à 6 chiffres)";
  position: absolute;
  left: 0;
  top: 0;

  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;

  color: inherit;
  white-space: nowrap;
  pointer-events: none;
}

label[for="productId"]::before {
  content: "*";
  position: absolute;
  top: 0;
  left: 290px;

  color: #d32f2f;
  font-weight: bold;
}

/****************************/
/* Traduction dynamique des labels */
/****************************/

/* FR */
body:has([data-id="fr_selectedLocale"]) label[for="departmentId"]::after {
  content: "Quel est votre besoin ?";
}

body:has([data-id="fr_selectedLocale"]) label[for="productId"]::after {
  content: "Référence du produit (Code à 6 chiffres)";
}

/* EN */
body:has([data-id="en_selectedLocale"]) label[for="departmentId"]::after {
  content: "What do you need help with?";
}

body:has([data-id="en_selectedLocale"]) label[for="productId"]::after {
  content: "Product reference (6-digit code)";
}

/* IT */
body:has([data-id="it_selectedLocale"]) label[for="departmentId"]::after {
  content: "Di cosa hai bisogno?";
}

body:has([data-id="it_selectedLocale"]) label[for="productId"]::after {
  content: "Riferimento prodotto (codice a 6 cifre)";
}

/* PT */
body:has([data-id="pt_selectedLocale"]) label[for="departmentId"]::after {
  content: "Qual é a sua necessidade?";
}

body:has([data-id="pt_selectedLocale"]) label[for="productId"]::after {
  content: "Referência do produto (código de 6 dígitos)";
}

/* ES */
body:has([data-id="es_selectedLocale"]) label[for="departmentId"]::after {
  content: "¿Cuál es su necesidad?";
}

body:has([data-id="es_selectedLocale"]) label[for="productId"]::after {
  content: "Referencia del producto (código de 6 dígitos)";
}

/* NL */
body:has([data-id="nl_selectedLocale"]) label[for="departmentId"]::after {
  content: "Waar heeft u hulp bij nodig?";
}

body:has([data-id="nl_selectedLocale"]) label[for="productId"]::after {
  content: "Productreferentie (6-cijferige code)";
}

/* DE */
body:has([data-id="de_selectedLocale"]) label[for="departmentId"]::after {
  content: "Wobei benötigen Sie Hilfe?";
}

body:has([data-id="de_selectedLocale"]) label[for="productId"]::after {
  content: "Produktreferenz (6-stelliger Code)";
}

/* PL */
body:has([data-id="pl_selectedLocale"]) label[for="departmentId"]::after {
  content: "W czym potrzebujesz pomocy?";
}

body:has([data-id="pl_selectedLocale"]) label[for="productId"]::after {
  content: "Numer referencyjny produktu (kod 6-cyfrowy)";
}

/****************************/
/* Traduction dropdown departmentId — LISTE OUVERTE */
/****************************/

/* Cache le texte original des options */
body:has([data-id$="_selectedLocale"]) #dropdown_list_field_departmentId .DropDown__optionTxt {
  font-size: 0 !important;
}

/* Rétablit une taille lisible pour le faux texte des options */
body:has([data-id$="_selectedLocale"]) #dropdown_list_field_departmentId li:nth-child(1) .DropDown__optionTxt::after,
body:has([data-id$="_selectedLocale"]) #dropdown_list_field_departmentId li:nth-child(2) .DropDown__optionTxt::after {
  font-size: 14px !important;
}

/* FR */
body:has([data-id="fr_selectedLocale"]) #dropdown_list_field_departmentId li:nth-child(1) .DropDown__optionTxt::after {
  content: "Vous avez un problème technique";
}
body:has([data-id="fr_selectedLocale"]) #dropdown_list_field_departmentId li:nth-child(2) .DropDown__optionTxt::after {
  content: "Vous avez une question avant vente";
}

/* EN */
body:has([data-id="en_selectedLocale"]) #dropdown_list_field_departmentId li:nth-child(1) .DropDown__optionTxt::after {
  content: "You have a technical issue";
}
body:has([data-id="en_selectedLocale"]) #dropdown_list_field_departmentId li:nth-child(2) .DropDown__optionTxt::after {
  content: "You have a pre-sales question";
}

/* IT */
body:has([data-id="it_selectedLocale"]) #dropdown_list_field_departmentId li:nth-child(1) .DropDown__optionTxt::after {
  content: "Hai un problema tecnico";
}
body:has([data-id="it_selectedLocale"]) #dropdown_list_field_departmentId li:nth-child(2) .DropDown__optionTxt::after {
  content: "Hai una domanda pre-vendita";
}

/* PT */
body:has([data-id="pt_selectedLocale"]) #dropdown_list_field_departmentId li:nth-child(1) .DropDown__optionTxt::after {
  content: "Tem um problema técnico";
}
body:has([data-id="pt_selectedLocale"]) #dropdown_list_field_departmentId li:nth-child(2) .DropDown__optionTxt::after {
  content: "Tem uma questão de pré-venda";
}

/* ES */
body:has([data-id="es_selectedLocale"]) #dropdown_list_field_departmentId li:nth-child(1) .DropDown__optionTxt::after {
  content: "Tiene un problema técnico";
}
body:has([data-id="es_selectedLocale"]) #dropdown_list_field_departmentId li:nth-child(2) .DropDown__optionTxt::after {
  content: "Tiene una pregunta de preventa";
}

/* NL */
body:has([data-id="nl_selectedLocale"]) #dropdown_list_field_departmentId li:nth-child(1) .DropDown__optionTxt::after {
  content: "U heeft een technisch probleem";
}
body:has([data-id="nl_selectedLocale"]) #dropdown_list_field_departmentId li:nth-child(2) .DropDown__optionTxt::after {
  content: "U heeft een vraag vóór de aankoop";
}

/* DE */
body:has([data-id="de_selectedLocale"]) #dropdown_list_field_departmentId li:nth-child(1) .DropDown__optionTxt::after {
  content: "Sie haben ein technisches Problem";
}
body:has([data-id="de_selectedLocale"]) #dropdown_list_field_departmentId li:nth-child(2) .DropDown__optionTxt::after {
  content: "Sie haben eine Frage vor dem Kauf";
}

/* PL */
body:has([data-id="pl_selectedLocale"]) #dropdown_list_field_departmentId li:nth-child(1) .DropDown__optionTxt::after {
  content: "Masz problem techniczny";
}
body:has([data-id="pl_selectedLocale"]) #dropdown_list_field_departmentId li:nth-child(2) .DropDown__optionTxt::after {
  content: "Masz pytanie przedsprzedażowe";
}

/* Masque le placeholder du champ de recherche interne du dropdown */
body:has([data-id="en_selectedLocale"]) #dropdown_selected_field_departmentId input.DropDown__input::placeholder,
body:has([data-id="it_selectedLocale"]) #dropdown_selected_field_departmentId input.DropDown__input::placeholder,
body:has([data-id="pt_selectedLocale"]) #dropdown_selected_field_departmentId input.DropDown__input::placeholder,
body:has([data-id="es_selectedLocale"]) #dropdown_selected_field_departmentId input.DropDown__input::placeholder,
body:has([data-id="nl_selectedLocale"]) #dropdown_selected_field_departmentId input.DropDown__input::placeholder,
body:has([data-id="de_selectedLocale"]) #dropdown_selected_field_departmentId input.DropDown__input::placeholder,
body:has([data-id="pl_selectedLocale"]) #dropdown_selected_field_departmentId input.DropDown__input::placeholder {
  color: transparent !important;
}

/****************************/
/* Traduction dropdown departmentId — CHAMP REPLIÉ  [CORRIGÉ]  */
/****************************/
/*
   Principe :
   - En FR on ne masque RIEN : le texte natif du portail est déjà
     en français et suit naturellement la sélection.
   - Hors FR, on masque le texte natif UNIQUEMENT si la valeur
     sélectionnée est une valeur connue, puis on injecte la
     traduction correspondante en s'appuyant sur l'attribut
     data-id de .DropDown__textwrap, qui contient le libellé
     sélectionné (ex. : field_departmentId_Vous avez une question
     avant vente).
   - Conséquence : si un nouveau département est ajouté, son
     libellé français reste affiché au lieu d'une case vide.
*/

/* 1. Masquage du libellé natif (hors FR, valeurs connues seulement) */
body:has([data-id$="_selectedLocale"]):not(:has([data-id="fr_selectedLocale"]))
  #dropdown_selected_field_departmentId .DropDown__textwrap[data-id*="problème technique"] .DropDown__selectedContent,
body:has([data-id$="_selectedLocale"]):not(:has([data-id="fr_selectedLocale"]))
  #dropdown_selected_field_departmentId .DropDown__textwrap[data-id*="question avant vente"] .DropDown__selectedContent {
  font-size: 0 !important;
  color: transparent !important;
}

/* 2. Style commun du libellé injecté */
#dropdown_selected_field_departmentId .DropDown__selectedContent::after {
  font-size: 13px !important;
  color: #111 !important;
  white-space: nowrap;
}

/* 3. Traductions conditionnées à la valeur sélectionnée */

/* EN */
body:has([data-id="en_selectedLocale"]) #dropdown_selected_field_departmentId
  .DropDown__textwrap[data-id*="problème technique"] .DropDown__selectedContent::after {
  content: "You have a technical issue";
}
body:has([data-id="en_selectedLocale"]) #dropdown_selected_field_departmentId
  .DropDown__textwrap[data-id*="question avant vente"] .DropDown__selectedContent::after {
  content: "You have a pre-sales question";
}

/* IT */
body:has([data-id="it_selectedLocale"]) #dropdown_selected_field_departmentId
  .DropDown__textwrap[data-id*="problème technique"] .DropDown__selectedContent::after {
  content: "Hai un problema tecnico";
}
body:has([data-id="it_selectedLocale"]) #dropdown_selected_field_departmentId
  .DropDown__textwrap[data-id*="question avant vente"] .DropDown__selectedContent::after {
  content: "Hai una domanda pre-vendita";
}

/* PT */
body:has([data-id="pt_selectedLocale"]) #dropdown_selected_field_departmentId
  .DropDown__textwrap[data-id*="problème technique"] .DropDown__selectedContent::after {
  content: "Tem um problema técnico";
}
body:has([data-id="pt_selectedLocale"]) #dropdown_selected_field_departmentId
  .DropDown__textwrap[data-id*="question avant vente"] .DropDown__selectedContent::after {
  content: "Tem uma questão de pré-venda";
}

/* ES */
body:has([data-id="es_selectedLocale"]) #dropdown_selected_field_departmentId
  .DropDown__textwrap[data-id*="problème technique"] .DropDown__selectedContent::after {
  content: "Tiene un problema técnico";
}
body:has([data-id="es_selectedLocale"]) #dropdown_selected_field_departmentId
  .DropDown__textwrap[data-id*="question avant vente"] .DropDown__selectedContent::after {
  content: "Tiene una pregunta de preventa";
}

/* NL */
body:has([data-id="nl_selectedLocale"]) #dropdown_selected_field_departmentId
  .DropDown__textwrap[data-id*="problème technique"] .DropDown__selectedContent::after {
  content: "U heeft een technisch probleem";
}
body:has([data-id="nl_selectedLocale"]) #dropdown_selected_field_departmentId
  .DropDown__textwrap[data-id*="question avant vente"] .DropDown__selectedContent::after {
  content: "U heeft een vraag vóór de aankoop";
}

/* DE */
body:has([data-id="de_selectedLocale"]) #dropdown_selected_field_departmentId
  .DropDown__textwrap[data-id*="problème technique"] .DropDown__selectedContent::after {
  content: "Sie haben ein technisches Problem";
}
body:has([data-id="de_selectedLocale"]) #dropdown_selected_field_departmentId
  .DropDown__textwrap[data-id*="question avant vente"] .DropDown__selectedContent::after {
  content: "Sie haben eine Frage vor dem Kauf";
}

/* PL */
body:has([data-id="pl_selectedLocale"]) #dropdown_selected_field_departmentId
  .DropDown__textwrap[data-id*="problème technique"] .DropDown__selectedContent::after {
  content: "Masz problem techniczny";
}
body:has([data-id="pl_selectedLocale"]) #dropdown_selected_field_departmentId
  .DropDown__textwrap[data-id*="question avant vente"] .DropDown__selectedContent::after {
  content: "Masz pytanie przedsprzedażowe";
}

/****************************/
/* Traduction titres de sections */
/****************************/

/* Cache texte original */
body:has([data-id$="_selectedLocale"])
.TicketFormLeftContainer__sectionName.Informations_spécifiques,
body:has([data-id$="_selectedLocale"])
.TicketFormLeftContainer__sectionName.Objet_de_la_demande {
  font-size: 0 !important;
  position: relative;
}

/* Style du faux texte */
body:has([data-id$="_selectedLocale"])
.TicketFormLeftContainer__sectionName.Informations_spécifiques::after,
body:has([data-id$="_selectedLocale"])
.TicketFormLeftContainer__sectionName.Objet_de_la_demande::after {
  font-size: 18px !important; /* ajuste si besoin */
  font-weight: 600 !important;
  color: inherit;
}

/* ================= FR ================= */
body:has([data-id="fr_selectedLocale"])
.TicketFormLeftContainer__sectionName.Informations_spécifiques::after {
  content: "Informations spécifiques";
}

body:has([data-id="fr_selectedLocale"])
.TicketFormLeftContainer__sectionName.Objet_de_la_demande::after {
  content: "Objet de la demande";
}

/* ================= EN ================= */
body:has([data-id="en_selectedLocale"])
.TicketFormLeftContainer__sectionName.Informations_spécifiques::after {
  content: "Specific information";
}

body:has([data-id="en_selectedLocale"])
.TicketFormLeftContainer__sectionName.Objet_de_la_demande::after {
  content: "Request details";
}

/* ================= IT ================= */
body:has([data-id="it_selectedLocale"])
.TicketFormLeftContainer__sectionName.Informations_spécifiques::after {
  content: "Informazioni specifiche";
}

body:has([data-id="it_selectedLocale"])
.TicketFormLeftContainer__sectionName.Objet_de_la_demande::after {
  content: "Oggetto della richiesta";
}

/* ================= PT ================= */
body:has([data-id="pt_selectedLocale"])
.TicketFormLeftContainer__sectionName.Informations_spécifiques::after {
  content: "Informações específicas";
}

body:has([data-id="pt_selectedLocale"])
.TicketFormLeftContainer__sectionName.Objet_de_la_demande::after {
  content: "Assunto da solicitação";
}

/* ================= ES ================= */
body:has([data-id="es_selectedLocale"])
.TicketFormLeftContainer__sectionName.Informations_spécifiques::after {
  content: "Información específica";
}

body:has([data-id="es_selectedLocale"])
.TicketFormLeftContainer__sectionName.Objet_de_la_demande::after {
  content: "Asunto de la solicitud";
}

/* ================= NL ================= */
body:has([data-id="nl_selectedLocale"])
.TicketFormLeftContainer__sectionName.Informations_spécifiques::after {
  content: "Specifieke informatie";
}

body:has([data-id="nl_selectedLocale"])
.TicketFormLeftContainer__sectionName.Objet_de_la_demande::after {
  content: "Onderwerp van het verzoek";
}

/* ================= DE ================= */
body:has([data-id="de_selectedLocale"])
.TicketFormLeftContainer__sectionName.Informations_spécifiques::after {
  content: "Spezifische Informationen";
}

body:has([data-id="de_selectedLocale"])
.TicketFormLeftContainer__sectionName.Objet_de_la_demande::after {
  content: "Betreff der Anfrage";
}

/* ================= PL ================= */
body:has([data-id="pl_selectedLocale"])
.TicketFormLeftContainer__sectionName.Informations_spécifiques::after {
  content: "Informacje szczegółowe";
}

body:has([data-id="pl_selectedLocale"])
.TicketFormLeftContainer__sectionName.Objet_de_la_demande::after {
  content: "Temat zgłoszenia";
}

/****************************/
/* Traduction breadcrumb  [CORRIGÉ v3]  */
/****************************/
/*
   Rappel du comportement natif de Desk : le breadcrumb reflète le
   département de la PAGE, pas la valeur choisie dans le menu
   déroulant. Il ne se met pas à jour à la sélection.

   Deux couches, dans cet ordre :

   COUCHE 1 (repli) — traduit le département de la page, identifié
   par tooltip ou href. Sert quand la liste déroulante est OUVERTE :
   dans cet état .DropDown__textwrap disparaît du DOM et la couche 2
   ne peut plus s'appliquer. Non appliquée en FR (texte natif déjà bon).

   COUCHE 2 (prioritaire) — traduit la valeur RÉELLEMENT SÉLECTIONNÉE,
   en remontant au body via :has(). Spécificité plus forte que la
   couche 1, donc elle gagne dès que la liste est repliée. Appliquée
   dans les 8 langues, FR incluse, pour que le breadcrumb suive
   toujours la sélection.
*/

/* ---------- Style commun du faux texte ---------- */
a[data-id="_breadcrumb_1"]::after {
  font-size: 14px !important;
  color: inherit;
  white-space: nowrap;
}

/* ================================================== */
/* COUCHE 1 — département de la page (hors FR)         */
/* ================================================== */

/* Masquage du texte natif */
body:has([data-id$="_selectedLocale"]):not(:has([data-id="fr_selectedLocale"]))
a[data-id="_breadcrumb_1"][tooltip*="problème technique"],
body:has([data-id$="_selectedLocale"]):not(:has([data-id="fr_selectedLocale"]))
a[data-id="_breadcrumb_1"][href*="departmentId=231300000000007061"],
body:has([data-id$="_selectedLocale"]):not(:has([data-id="fr_selectedLocale"]))
a[data-id="_breadcrumb_1"][tooltip*="question avant vente"],
body:has([data-id$="_selectedLocale"]):not(:has([data-id="fr_selectedLocale"]))
a[data-id="_breadcrumb_1"][href*="departmentId=231300000000621169"] {
  font-size: 0 !important;
  position: relative;
}

/* ---------- EN ---------- */
body:has([data-id="en_selectedLocale"])
a[data-id="_breadcrumb_1"][tooltip*="problème technique"]::after,
body:has([data-id="en_selectedLocale"])
a[data-id="_breadcrumb_1"][href*="departmentId=231300000000007061"]::after {
  content: "You have a technical issue";
}
body:has([data-id="en_selectedLocale"])
a[data-id="_breadcrumb_1"][tooltip*="question avant vente"]::after,
body:has([data-id="en_selectedLocale"])
a[data-id="_breadcrumb_1"][href*="departmentId=231300000000621169"]::after {
  content: "You have a pre-sales question";
}

/* ---------- IT ---------- */
body:has([data-id="it_selectedLocale"])
a[data-id="_breadcrumb_1"][tooltip*="problème technique"]::after,
body:has([data-id="it_selectedLocale"])
a[data-id="_breadcrumb_1"][href*="departmentId=231300000000007061"]::after {
  content: "Hai un problema tecnico";
}
body:has([data-id="it_selectedLocale"])
a[data-id="_breadcrumb_1"][tooltip*="question avant vente"]::after,
body:has([data-id="it_selectedLocale"])
a[data-id="_breadcrumb_1"][href*="departmentId=231300000000621169"]::after {
  content: "Hai una domanda pre-vendita";
}

/* ---------- PT ---------- */
body:has([data-id="pt_selectedLocale"])
a[data-id="_breadcrumb_1"][tooltip*="problème technique"]::after,
body:has([data-id="pt_selectedLocale"])
a[data-id="_breadcrumb_1"][href*="departmentId=231300000000007061"]::after {
  content: "Tem um problema técnico";
}
body:has([data-id="pt_selectedLocale"])
a[data-id="_breadcrumb_1"][tooltip*="question avant vente"]::after,
body:has([data-id="pt_selectedLocale"])
a[data-id="_breadcrumb_1"][href*="departmentId=231300000000621169"]::after {
  content: "Tem uma questão de pré-venda";
}

/* ---------- ES ---------- */
body:has([data-id="es_selectedLocale"])
a[data-id="_breadcrumb_1"][tooltip*="problème technique"]::after,
body:has([data-id="es_selectedLocale"])
a[data-id="_breadcrumb_1"][href*="departmentId=231300000000007061"]::after {
  content: "Tiene un problema técnico";
}
body:has([data-id="es_selectedLocale"])
a[data-id="_breadcrumb_1"][tooltip*="question avant vente"]::after,
body:has([data-id="es_selectedLocale"])
a[data-id="_breadcrumb_1"][href*="departmentId=231300000000621169"]::after {
  content: "Tiene una pregunta de preventa";
}

/* ---------- NL ---------- */
body:has([data-id="nl_selectedLocale"])
a[data-id="_breadcrumb_1"][tooltip*="problème technique"]::after,
body:has([data-id="nl_selectedLocale"])
a[data-id="_breadcrumb_1"][href*="departmentId=231300000000007061"]::after {
  content: "U heeft een technisch probleem";
}
body:has([data-id="nl_selectedLocale"])
a[data-id="_breadcrumb_1"][tooltip*="question avant vente"]::after,
body:has([data-id="nl_selectedLocale"])
a[data-id="_breadcrumb_1"][href*="departmentId=231300000000621169"]::after {
  content: "U heeft een vraag vóór de aankoop";
}

/* ---------- DE ---------- */
body:has([data-id="de_selectedLocale"])
a[data-id="_breadcrumb_1"][tooltip*="problème technique"]::after,
body:has([data-id="de_selectedLocale"])
a[data-id="_breadcrumb_1"][href*="departmentId=231300000000007061"]::after {
  content: "Sie haben ein technisches Problem";
}
body:has([data-id="de_selectedLocale"])
a[data-id="_breadcrumb_1"][tooltip*="question avant vente"]::after,
body:has([data-id="de_selectedLocale"])
a[data-id="_breadcrumb_1"][href*="departmentId=231300000000621169"]::after {
  content: "Sie haben eine Frage vor dem Kauf";
}

/* ---------- PL ---------- */
body:has([data-id="pl_selectedLocale"])
a[data-id="_breadcrumb_1"][tooltip*="problème technique"]::after,
body:has([data-id="pl_selectedLocale"])
a[data-id="_breadcrumb_1"][href*="departmentId=231300000000007061"]::after {
  content: "Masz problem techniczny";
}
body:has([data-id="pl_selectedLocale"])
a[data-id="_breadcrumb_1"][tooltip*="question avant vente"]::after,
body:has([data-id="pl_selectedLocale"])
a[data-id="_breadcrumb_1"][href*="departmentId=231300000000621169"]::after {
  content: "Masz pytanie przedsprzedażowe";
}

/* ================================================== */
/* COUCHE 2 — valeur sélectionnée (8 langues)          */
/* ================================================== */

/* Masquage du texte natif dès qu'une valeur connue est sélectionnée */
body:has(.DropDown__textwrap[data-id*="problème technique"])
a[data-id="_breadcrumb_1"],
body:has(.DropDown__textwrap[data-id*="question avant vente"])
a[data-id="_breadcrumb_1"] {
  font-size: 0 !important;
  position: relative;
}

/* ---------- FR ---------- */
body:has([data-id="fr_selectedLocale"]):has(.DropDown__textwrap[data-id*="problème technique"])
a[data-id="_breadcrumb_1"]::after {
  content: "Vous avez un problème technique" !important;
}
body:has([data-id="fr_selectedLocale"]):has(.DropDown__textwrap[data-id*="question avant vente"])
a[data-id="_breadcrumb_1"]::after {
  content: "Vous avez une question avant vente" !important;
}

/* ---------- EN ---------- */
body:has([data-id="en_selectedLocale"]):has(.DropDown__textwrap[data-id*="problème technique"])
a[data-id="_breadcrumb_1"]::after {
  content: "You have a technical issue" !important;
}
body:has([data-id="en_selectedLocale"]):has(.DropDown__textwrap[data-id*="question avant vente"])
a[data-id="_breadcrumb_1"]::after {
  content: "You have a pre-sales question" !important;
}

/* ---------- IT ---------- */
body:has([data-id="it_selectedLocale"]):has(.DropDown__textwrap[data-id*="problème technique"])
a[data-id="_breadcrumb_1"]::after {
  content: "Hai un problema tecnico" !important;
}
body:has([data-id="it_selectedLocale"]):has(.DropDown__textwrap[data-id*="question avant vente"])
a[data-id="_breadcrumb_1"]::after {
  content: "Hai una domanda pre-vendita" !important;
}

/* ---------- PT ---------- */
body:has([data-id="pt_selectedLocale"]):has(.DropDown__textwrap[data-id*="problème technique"])
a[data-id="_breadcrumb_1"]::after {
  content: "Tem um problema técnico" !important;
}
body:has([data-id="pt_selectedLocale"]):has(.DropDown__textwrap[data-id*="question avant vente"])
a[data-id="_breadcrumb_1"]::after {
  content: "Tem uma questão de pré-venda" !important;
}

/* ---------- ES ---------- */
body:has([data-id="es_selectedLocale"]):has(.DropDown__textwrap[data-id*="problème technique"])
a[data-id="_breadcrumb_1"]::after {
  content: "Tiene un problema técnico" !important;
}
body:has([data-id="es_selectedLocale"]):has(.DropDown__textwrap[data-id*="question avant vente"])
a[data-id="_breadcrumb_1"]::after {
  content: "Tiene una pregunta de preventa" !important;
}

/* ---------- NL ---------- */
body:has([data-id="nl_selectedLocale"]):has(.DropDown__textwrap[data-id*="problème technique"])
a[data-id="_breadcrumb_1"]::after {
  content: "U heeft een technisch probleem" !important;
}
body:has([data-id="nl_selectedLocale"]):has(.DropDown__textwrap[data-id*="question avant vente"])
a[data-id="_breadcrumb_1"]::after {
  content: "U heeft een vraag vóór de aankoop" !important;
}

/* ---------- DE ---------- */
body:has([data-id="de_selectedLocale"]):has(.DropDown__textwrap[data-id*="problème technique"])
a[data-id="_breadcrumb_1"]::after {
  content: "Sie haben ein technisches Problem" !important;
}
body:has([data-id="de_selectedLocale"]):has(.DropDown__textwrap[data-id*="question avant vente"])
a[data-id="_breadcrumb_1"]::after {
  content: "Sie haben eine Frage vor dem Kauf" !important;
}

/* ---------- PL ---------- */
body:has([data-id="pl_selectedLocale"]):has(.DropDown__textwrap[data-id*="problème technique"])
a[data-id="_breadcrumb_1"]::after {
  content: "Masz problem techniczny" !important;
}
body:has([data-id="pl_selectedLocale"]):has(.DropDown__textwrap[data-id*="question avant vente"])
a[data-id="_breadcrumb_1"]::after {
  content: "Masz pytanie przedsprzedażowe" !important;
}

/****************************/
/* Position des étoiles par langue */
/****************************/

/* DepartmentId */
body:has([data-id="fr_selectedLocale"]) label[for="departmentId"]::before {
  left: 165px !important;
}

body:has([data-id="en_selectedLocale"]) label[for="departmentId"]::before {
  left: 210px !important;
}

body:has([data-id="it_selectedLocale"]) label[for="departmentId"]::before {
  left: 150px !important;
}

body:has([data-id="pt_selectedLocale"]) label[for="departmentId"]::before {
  left: 185px !important;
}

body:has([data-id="es_selectedLocale"]) label[for="departmentId"]::before {
  left: 165px !important;
}

body:has([data-id="nl_selectedLocale"]) label[for="departmentId"]::before {
  left: 205px !important;
}

body:has([data-id="de_selectedLocale"]) label[for="departmentId"]::before {
  left: 195px !important;
}

body:has([data-id="pl_selectedLocale"]) label[for="departmentId"]::before {
  left: 200px !important;
}

/* ProductId */
body:has([data-id="fr_selectedLocale"]) label[for="productId"]::before {
  left: 285px !important;
}

body:has([data-id="en_selectedLocale"]) label[for="productId"]::before {
  left: 225px !important;
}

body:has([data-id="it_selectedLocale"]) label[for="productId"]::before {
  left: 270px !important;
}

body:has([data-id="pt_selectedLocale"]) label[for="productId"]::before {
  left: 305px !important;
}

body:has([data-id="es_selectedLocale"]) label[for="productId"]::before {
  left: 315px !important;
}

body:has([data-id="nl_selectedLocale"]) label[for="productId"]::before {
  left: 250px !important;
}

body:has([data-id="de_selectedLocale"]) label[for="productId"]::before {
  left: 240px !important;
}

body:has([data-id="pl_selectedLocale"]) label[for="productId"]::before {
  left: 300px !important;
}