/* --- ID 236: général style --- */
:root {
  /* Couleurs HomerentAI */
  --hr-color-primary:       #1D2850;  /* bleu foncé */
  --hr-color-primary-light: #4C6FFF;  /* bleu clair */
  --hr-gradient-primary:    linear-gradient(135deg, #1D2850 0%, #4C6FFF 100%);
  --hr-btn-radius-pill:     999px;

  /* On force aussi les variables "officielles" de HivePress / ListingHive */
  --hp-color-primary:       #1D2850;
  --hp-color-primary-alt:   #4C6FFF;
}




/* CTA de niveau 1 : gradient + glow */
.hp-form__button.button-primary,
.hp-form__button.button-primary.alt,
.hp-field--submit.button-primary,
.hp-field--submit.button-primary.alt,
.button.button--primary,
.button.button-primary,
.button.button-primary.alt,
.hp-header__button .button,
.header-navbar__actions .hp-menu__item.button--secondary,
.hp-vendor-dashboard .button.button-primary {
  border-radius: var(--hr-btn-radius-pill) !important;
  border: none !important;
  background-image: var(--hr-gradient-primary) !important;
  background-color: transparent !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow:
    0 18px 45px rgba(8, 14, 40, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  transition:
    transform 0.15s ease-out,
    box-shadow 0.15s ease-out,
    filter 0.15s ease-out;
}

.hp-form__button.button-primary:hover,
.hp-form__button.button-primary.alt:hover,
.hp-field--submit.button-primary:hover,
.hp-field--submit.button-primary.alt:hover,
.button.button--primary:hover,
.button.button-primary:hover,
.button.button-primary.alt:hover,
.hp-header__button .button:hover,
.header-navbar__actions .hp-menu__item.button--secondary:hover,
.hp-vendor-dashboard .button.button-primary:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow:
    0 22px 55px rgba(8, 14, 40, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.hp-form__button.button-primary:active,
.hp-form__button.button-primary.alt:active,
.hp-field--submit.button-primary:active,
.hp-field--submit.button-primary.alt:active,
.button.button--primary:active,
.button.button-primary:active,
.button.button-primary.alt:active,
.hp-header__button .button:active,
.header-navbar__actions .hp-menu__item.button--secondary:active,
.hp-vendor-dashboard .button.button-primary:active {
  transform: translateY(0);
  box-shadow:
    0 10px 28px rgba(8, 14, 40, 0.40),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}






/* Boutons de niveau 2 : plein bleu clair + léger glow */
.button.hp-field--button[data-add="true"],
.button.button--secondary,
.button:not(.button-primary):not(.button--primary),
.hp-button,
.hp-vendor-dashboard .button:not(.button-primary) {
  border-radius: var(--hr-btn-radius-pill) !important;
  background-image: none !important;
  background-color: var(--hr-color-primary-light) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 12px 30px rgba(8, 14, 40, 0.30);
  font-weight: 500;
  transition:
    transform 0.15s ease-out,
    box-shadow 0.15s ease-out,
    filter 0.15s ease-out;
}

.button.hp-field--button[data-add="true"]:hover,
.button.button--secondary:hover,
.button:not(.button-primary):not(.button--primary):hover,
.hp-button:hover,
.hp-vendor-dashboard .button:not(.button-primary):hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 16px 38px rgba(8, 14, 40, 0.40);
}

.button.hp-field--button[data-add="true"]:active,
.button.button--secondary:active,
.button:not(.button-primary):not(.button--primary):active,
.hp-button:active,
.hp-vendor-dashboard .button:not(.button-primary):active {
  transform: translateY(0);
  box-shadow: 0 8px 20px rgba(8, 14, 40, 0.30);
}





/* Bouton IA rond à droite de la barre de recherche */
.hr-ai-toggle__icon {
  background-image: var(--hr-gradient-primary) !important;
  background-color: transparent !important;
  color: #ffffff !important;
  box-shadow:
    0 12px 26px rgba(8, 14, 40, 0.35),
    0 0 0 4px rgba(76, 111, 255, 0.18);
}

/* Bouton de fermeture en mode IA – même look que le toggle */
.hr-ai-close {
  background-image: var(--hr-gradient-primary) !important;
  background-color: transparent !important;
  color: #ffffff !important;
  box-shadow:
    0 12px 26px rgba(8, 14, 40, 0.35),
    0 0 0 4px rgba(76, 111, 255, 0.18);
}






/* Tags sélectionnés (équipements, ambiance…) */
.hp-tag-pill.is-selected,
.hp-tag-pill.is-selected:hover {
  background-image: var(--hr-gradient-primary) !important;
  background-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 12px 32px rgba(8, 14, 40, 0.35);
}

/* Tags non sélectionnés – bord bleu clair discret */
.hp-tag-pill:not(.is-selected) {
  border-radius: 999px;
  border: 1px solid rgba(76, 111, 255, 0.20) !important;
}






/* Menu latéral dashboard */
.hp-vendor-dashboard .hp-menu__item--current > a,
.hp-vendor-dashboard .hp-menu__item--vendor-dashboard.hp-menu__item--current > a,
.hp-menu--user-account .hp-menu__item--current > a {
  border-radius: var(--hr-btn-radius-pill) !important;
  background-image: var(--hr-gradient-primary) !important;
  color: #ffffff !important;
  box-shadow:
    0 18px 45px rgba(8, 14, 40, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}






/* Focus bleu sur tout le site */
:focus-visible {
  outline-color: var(--hr-color-primary-light);
}

/* Hover sur les liens “accent” */
a:hover {
  color: var(--hr-color-primary-light);
}





/* CTA header "Ajouter une annonce" : même gradient que "Rechercher" */
.header-navbar__actions .hp-menu__item.button--secondary {
  background: var(--hr-gradient-primary) !important;
  background-image: var(--hr-gradient-primary) !important;
  background-color: transparent !important;
  color: #ffffff !important;
}

/* Hover / active idem, on garde juste la variation d’ombre gérée plus haut */
.header-navbar__actions .hp-menu__item.button--secondary:hover,
.header-navbar__actions .hp-menu__item.button--secondary:active {
  background: var(--hr-gradient-primary) !important;
  background-image: var(--hr-gradient-primary) !important;
}






/* On s'assure de retirer tout gradient hérité */
.hr-ai-toggle,
.hr-ai-toggle__icon,
.hr-ai-close {
  background-image: none !important;
}

/* Bouton IA — rond externe */
.hr-ai-toggle {
  background: #ffffff !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

/* Petit rond intérieur avec l’icône */
.hr-ai-toggle__icon {
  background: #ffffff !important;
  color: #1D2850 !important;
  box-shadow: none !important;
}

/* Hover : léger glow bleu, pas de changement de couleur interne */
.hr-ai-toggle:hover {
  transform: translateY(-1px);
  box-shadow:
    0 16px 40px rgba(76, 111, 255, 0.32);
}

/* Bouton de fermeture IA – même style que le toggle */
.hr-ai-close {
  width: 56px;
  height: 56px;
  border-radius: 999px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: #ffffff !important;
  color: #1D2850 !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.hr-ai-close:hover {
  transform: translateY(-1px);
  box-shadow:
    0 16px 40px rgba(76, 111, 255, 0.32);
}







/* =======================================================
   1) Bouton "Rechercher" + bouton IA "Lancer"
   -> style niveau 2 : plein bleu #4C6FFF + glow
   ======================================================= */

/* Etat normal : bleu plein */
.hp-form--listing-search .hp-form__footer .hp-form__button.button-primary,
.hr-ai-bar .hr-ai-submit.button {
  background-image: none !important;
  background-color: #4C6FFF !important;
  color: #ffffff !important;
  border-radius: var(--hr-btn-radius-pill) !important;
  border: 1px solid #4C6FFF !important;
  box-shadow: 0 12px 30px rgba(76, 111, 255, 0.40);
  transform: translateY(0);
  transition:
    background-color 0.15s ease-out,
    color 0.15s ease-out,
    box-shadow 0.15s ease-out,
    transform 0.15s ease-out;
}

/* Hover : fond blanc, texte bleu foncé + glow bleu */
.hp-form--listing-search .hp-form__footer .hp-form__button.button-primary:hover,
.hr-ai-bar .hr-ai-submit.button:hover {
  background-color: #ffffff !important;
  color: #1D2850 !important;
  box-shadow: 0 18px 40px rgba(76, 111, 255, 0.55);
  transform: translateY(-1px);
}

/* Active : un peu moins de glow, revient à plat */
.hp-form--listing-search .hp-form__footer .hp-form__button.button-primary:active,
.hr-ai-bar .hr-ai-submit.button:active {
  box-shadow: 0 8px 22px rgba(76, 111, 255, 0.35);
  transform: translateY(0);
}


/* =======================================================
   2) Bouton IA rond (toggle) + bouton de fermeture "×"
   -> pas de dégradé, look sobre + léger glow au survol
   ======================================================= */

/* Etat normal : puce blanche clean */
.hr-ai-toggle,
.hr-ai-close {
  background-image: none !important;
  background-color: #ffffff !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(76, 111, 255, 0.25);
  transition:
    box-shadow 0.15s ease-out,
    transform 0.15s ease-out,
    filter 0.15s ease-out;
}

/* On nettoie aussi l’intérieur de l’icône pour être sûr qu’aucun dégradé ne revienne */
.hr-ai-toggle__icon,
.hr-ai-toggle__icon svg {
  background-image: none !important;
  filter: none !important;
}

/* Hover / focus : même fond, juste glow bleu discret */
.hr-ai-toggle:hover,
.hr-ai-toggle:focus-visible,
.hr-ai-close:hover,
.hr-ai-close:focus-visible {
  box-shadow: 0 16px 40px rgba(76, 111, 255, 0.50);
  transform: translateY(-1px);
}

/* Active : on réduit un peu le glow et on remet à plat */
.hr-ai-toggle:active,
.hr-ai-close:active {
  box-shadow: 0 8px 22px rgba(76, 111, 255, 0.35);
  transform: translateY(0);
}


/* === Fix final IA : plus aucun dégradé, même au hover === */

/* On neutralise TOUT background/gradient sur le toggle et la croix */
.hr-ai-toggle,
.hr-ai-toggle:hover,
.hr-ai-toggle:focus,
.hr-ai-toggle:active,
.hr-ai-close,
.hr-ai-close:hover,
.hr-ai-close:focus,
.hr-ai-close:active {
  background-image: none !important;
  background-color: #ffffff !important;
}

/* Le petit rond interne garde un fond blanc simple */
.hr-ai-toggle__icon,
.hr-ai-toggle:hover .hr-ai-toggle__icon {
  background-image: none !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
}

/* On nettoie le SVG : plus de fill dégradé, juste des traits bleu foncé */
.hr-ai-toggle__icon svg rect,
.hr-ai-toggle__icon svg circle,
.hr-ai-toggle__icon svg path {
  fill: none !important;
  stroke: #1D2850 !important;
}

/* Hover / focus : uniquement glow bleu, aucun changement de couleur interne */
.hr-ai-toggle:hover,
.hr-ai-toggle:focus-visible,
.hr-ai-close:hover,

/* Active : glow réduit */
.hr-ai-toggle:active,








/* === Fix : garder la croix visible au hover === */

/* Couleur normale + hover + active pour la croix */
.hr-ai-close,
.hr-ai-close:hover,
.hr-ai-close:focus-visible,
.hr-ai-close:active {
  color: #1D2850 !important;   /* bleu foncé lisible sur fond blanc */
}

/* Si jamais HivePress applique une transition de filtre sur l’icône */
.hr-ai-close svg,
.hr-ai-close:hover svg,
.hr-ai-close:focus-visible svg,
.hr-ai-close:active svg {
  filter: none !important;
  stroke: #1D2850 !important;
  fill: none !important;
}










/* 1) IA toggle et bouton de fermeture : même taille partout */
.hr-ai-toggle,
.hr-ai-close {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important; /* empêche le shrink sur mobile */
}












/* Desktop : Lancer exactement aligné avec Rechercher */
@media (min-width: 1024px) {
  /* Même padding droit pour le card en mode normal & IA */
  form.hp-form--listing-search.hp-form--primary.hp-form--wide {
    padding-inline: 1.75rem !important;
  }

  .hp-form--listing-search .hp-form__footer,
  .hp-form--listing-search .hr-ai-bar__inner {
    padding-inline: 0 !important;
  }

  .hp-form--listing-search .hp-form__footer {
    display: flex;
    justify-content: flex-end;
    column-gap: 1.5rem !important;
  }

  .hp-form--listing-search .hr-ai-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    column-gap: 1.5rem !important;
  }

  /* Micro-ajustement : Lancer très légèrement vers la gauche */
  .hr-ai-bar .hr-ai-submit.button {
    margin-right: 0.10rem !important; /* ajuste à 0.05 / 0.15 si tu veux chipoter encore */
  }
}





/* Mobile: keep IA toggle aligned with the footer row. */
@media (max-width: 767px) {
  .hp-form--listing-search .hp-form__footer .hr-ai-toggle {
    margin-top: 0 !important;
  }
}




/* Desktop : même largeur pour "Rechercher" et "Lancer" */
@media (min-width: 1024px) {

  /* largeur identique des deux CTA */
  .hp-form--listing-search .hp-form__footer .hp-form__button.button-primary,
  .hr-ai-bar .hr-ai-submit.button {
    width: 280px !important;      /* ajuste à 270 / 290 si tu veux chipoter */
    flex: 0 0 280px !important;
  }

  /* on annule le micro décalage précédent sur Lancer */
  .hr-ai-bar .hr-ai-submit.button {
    margin-right: 0 !important;
  }
}



/* Desktop : épaissir légèrement le CTA "Lancer" */
@media (min-width: 1024px) {
  .hr-ai-bar .hr-ai-submit.button {
    padding-top: 0.9rem !important;   /* +0.1 à +0.2 rem selon ton goût */
    padding-bottom: 0.9rem !important;
  }
}








/* Badge "Mise en avant" — Version agrandie */
.hp-listing__featured-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;

  width: 56px;   /* ← augmenté */
  height: 56px;  /* ← augmenté */
  border-radius: 999px;

  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08);

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--hr-color-primary); /* #1D2850 */
  font-size: 1.45rem; /* ← un peu plus grand pour compenser */
  z-index: 20;

  box-shadow:
    0 14px 34px rgba(76, 111, 255, 0.25),
    0 0 0 3px rgba(76, 111, 255, 0.12);

  backdrop-filter: blur(8px);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hp-listing__featured-badge:hover {
  transform: translateY(-3px);
  box-shadow:
    0 20px 50px rgba(76, 111, 255, 0.38),
    0 0 0 3px rgba(76, 111, 255, 0.16);
}

.hp-listing__featured-badge i {
  color: var(--hr-color-primary);
}




/* Badge "Mise en avant" — Style HomerentAI */
.hp-listing__featured-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;

  width: 48px;
  height: 48px;
  border-radius: 999px;

  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08);

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--hr-color-primary); /* #1D2850 */
  font-size: 1.25rem;
  z-index: 20;

  box-shadow:
    0 12px 30px rgba(76, 111, 255, 0.22),
    0 0 0 2px rgba(76, 111, 255, 0.10);

  backdrop-filter: blur(8px);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hp-listing__featured-badge:hover {
  transform: translateY(-3px);
  box-shadow:
    0 18px 45px rgba(76, 111, 255, 0.35),
    0 0 0 3px rgba(76, 111, 255, 0.14);
}

/* Icône étoile propre */
.hp-listing__featured-badge i {
  color: var(--hr-color-primary); /* #1D2850 */
}






/* Badge Mise en avant – version agrandie forcée */
.hp-listing__header .hp-listing__featured-badge,
.hp-listing__header .hp-listing__featured-badge.hp-listing__featured {
  width: 35px !important;
  height: 35px !important;
  min-width: 35px !important;
  min-height: 35px !important;
  max-width: 35px !important;
  max-height: 35px !important;

  top: 1rem !important;
  left: 1rem !important;

  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  z-index: 20 !important;

  color: var(--hr-color-primary) !important;
  font-size: 1.6rem !important; /* étoile un peu plus grande */

  box-shadow:
    0 14px 34px rgba(76, 111, 255, 0.25),
    0 0 0 3px rgba(76, 111, 255, 0.12) !important;

  backdrop-filter: blur(8px) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

/* Icône étoile */
.hp-listing__header .hp-listing__featured-badge i {
  font-size: 1.3rem !important;
  color: var(--hr-color-primary) !important;
}

/* Hover premium */
.hp-listing__header .hp-listing__featured-badge:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 20px 50px rgba(76, 111, 255, 0.38),
    0 0 0 3px rgba(76, 111, 255, 0.16) !important;
}








/* Badge Mise en avant – version agrandie forcée */
.hp-listing__header .hp-listing__featured-badge,
.hp-listing__header .hp-listing__featured-badge.hp-listing__featured {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;

  top: 1rem !important;
  left: 1rem !important;

  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  z-index: 20 !important;

  font-size: 1.6rem !important; /* taille étoile */
  box-shadow:
    0 14px 34px rgba(76, 111, 255, 0.25),
    0 0 0 3px rgba(76, 111, 255, 0.12) !important;

  backdrop-filter: blur(8px) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

/* Icône étoile — maintenant en bleu clair #4C6FFF */
.hp-listing__header .hp-listing__featured-badge i {
  font-size: 1.3rem !important;
  color: #4C6FFF !important;  /* changement ici */
}

/* Hover premium */






/* ================================
   1) Nettoyage du vert -> bleu #4C6FFF
   ================================ */

/* Toute petite barre verte sous le menu user (header dropdown) */
.header-navbar__menu .hp-menu--user-account::before,
.header-navbar__menu .hp-menu--user-account::after {
  background: #4C6FFF !important;
  box-shadow: none !important;
}

/* Petits surlignages / pastilles verts dans le menu compte */
.hp-menu--user-account .hp-menu__item > a {
  background-image: none !important;
  background-color: transparent !important;
  color: #4B5563 !important; /* gris texte par défaut */
}

/* Survol : pastille blanche + texte bleu */
.hp-menu--user-account .hp-menu__item > a:hover {
  background-color: #ffffff !important;
  color: #4C6FFF !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 26px rgba(76, 111, 255, 0.25) !important;
}

/* Surlignage léger pour l’item hover qu’on voyait en vert pâle */
.hp-menu--user-account .hp-menu__item > a:hover span {
  background-color: transparent !important;
  color: inherit !important;
}