/* ==========================================================================
   InZeBox 0.38.0 – connexion, inscription et compte client
   Chargé par templates/_partials/head.tpl après inzebox-listing.css et AVANT
   le CSS boutique (variables --primary, --ibx-btn-*, --ibx-header-icon-color).

   1. Boutons Bootstrap aux couleurs de la boutique (TOUT le site)
   2. Champs de formulaire : focus, cases à cocher, boutons radio (TOUT le site)
   3. Connexion / inscription / mot de passe oublié
   4. Tableau de bord « Mon compte » (tuiles)
   5. Menu latéral du compte (Informations, Adresses, … Déconnexion)
   6. Liens « Retour à votre compte » / « Accueil »
   7. Cartes d'adresses (0.38.1)
   8. Listes d'envies (module blockwishlist, pages générées en Vue.js) (0.39.0)
   Les liens des modules (listes d'envies, RGPD, alertes) utilisent les mêmes
   classes account-menu__* : ils sont couverts par 4 et 5.
   ========================================================================== */
:root {
  --ibx-account-icon-color: var(--ibx-header-icon-color, var(--primary, #0b69f6)); /* icônes ≥ 3:1 */
  --ibx-account-icon-bg: color-mix(in srgb, var(--primary, #0b69f6) 12%, #fff);
  --ibx-account-tile-border: #e5e7eb;
  --ibx-account-tile-hover: var(--ibx-tab-active-color, var(--primary, #0b69f6));
  --ibx-account-active-bg: color-mix(in srgb, var(--primary, #0b69f6) 12%, #fff);
  --ibx-account-text: var(--ibx-tab-text-active-color, #1f2937);
  --ibx-account-muted: #4b5563;                                   /* 7,6:1 */
  --ibx-focus-ring: color-mix(in srgb, var(--primary, #0b69f6) 30%, transparent);
}

/* 1. Boutons --------------------------------------------------------------- */
.btn-primary {
  --bs-btn-color: var(--ibx-btn-text);
  --bs-btn-bg: var(--ibx-btn-bg);
  --bs-btn-border-color: var(--ibx-btn-bg);
  --bs-btn-hover-color: var(--ibx-btn-text);
  --bs-btn-hover-bg: var(--ibx-btn-bg-hover);
  --bs-btn-hover-border-color: var(--ibx-btn-bg-hover);
  --bs-btn-active-color: var(--ibx-btn-text);
  --bs-btn-active-bg: var(--ibx-btn-bg-hover);
  --bs-btn-active-border-color: var(--ibx-btn-bg-hover);
  --bs-btn-disabled-color: var(--ibx-btn-text);
  --bs-btn-disabled-bg: var(--ibx-btn-bg);
  --bs-btn-disabled-border-color: var(--ibx-btn-bg);
  --bs-btn-focus-shadow-rgb: 0, 0, 0;
}

.btn-outline-primary {
  /* texte = couleur des liens (boutique assombrie, ≥ 5,4:1) ; contour = couleur boutique */
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-border-color: var(--ibx-btn-outline-color);
  --bs-btn-hover-color: var(--ibx-btn-text);
  --bs-btn-hover-bg: var(--ibx-btn-bg);
  --bs-btn-hover-border-color: var(--ibx-btn-bg);
  --bs-btn-active-color: var(--ibx-btn-text);
  --bs-btn-active-bg: var(--ibx-btn-bg-hover);
  --bs-btn-active-border-color: var(--ibx-btn-bg-hover);
  --bs-btn-disabled-color: var(--bs-link-color);
  --bs-btn-disabled-border-color: var(--ibx-btn-outline-color);
}

/* Boutons secondaires Hummingbird (« Retour », « Mot de passe oublié ») */
:is(.btn-outline-tertiary, .btn-basic) {
  --bs-btn-hover-color: var(--ibx-account-text);
  --bs-btn-hover-bg: var(--ibx-account-active-bg);
  --bs-btn-hover-border-color: var(--ibx-account-tile-hover);
  --bs-btn-active-color: var(--ibx-account-text);
  --bs-btn-active-bg: var(--ibx-account-active-bg);
}

/* Focus clavier : anneau couleur boutique au lieu du halo bleu */
.btn:focus-visible {
  outline: 2px solid var(--ibx-account-tile-hover);
  outline-offset: 2px;
  box-shadow: none;
}

/* 2. Champs de formulaire --------------------------------------------------- */
.form-control:focus,
.form-select:focus {
  border-color: var(--ibx-account-tile-hover);
  box-shadow: 0 0 0 .25rem var(--ibx-focus-ring);
}

.form-check-input:focus {
  border-color: var(--ibx-account-tile-hover);
  box-shadow: 0 0 0 .25rem var(--ibx-focus-ring);
}

.form-check-input:checked {
  background-color: var(--ibx-btn-bg);
  border-color: var(--ibx-btn-bg);
}

/* Bouton « afficher le mot de passe » : contour, pas de bloc plein */
.password-field .btn-primary {
  --bs-btn-color: var(--ibx-account-icon-color);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--ibx-account-icon-color);
  --bs-btn-hover-bg: var(--ibx-account-active-bg);
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-active-color: var(--ibx-account-icon-color);
  --bs-btn-active-bg: var(--ibx-account-active-bg);
  --bs-btn-active-border-color: var(--bs-border-color);
}

/* 3. Connexion / inscription ------------------------------------------------ */
.login__form-wrapper,
.register-form {
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--ibx-account-tile-border);
  border-radius: calc(var(--bs-border-radius) * 2);
}

.login > hr {
  display: none;                                  /* le bloc ci-dessous a son propre cadre */
}

.login__register-prompt {
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
  background: var(--ibx-account-active-bg);
  border: 1px solid color-mix(in srgb, var(--primary, #0b69f6) 30%, #fff);
  border-left: 4px solid var(--ibx-account-tile-hover);
  border-radius: calc(var(--bs-border-radius) * 2);
}

.login__register-prompt .h4 {
  font-weight: 700;
  color: var(--ibx-account-text);
}

.register-form__login-prompt {
  color: var(--ibx-account-muted);
}

@media (max-width: 575.98px) {
  .login__form-wrapper,
  .register-form {
    padding: 1rem;
  }
}

/* 4. Tableau de bord « Mon compte » ----------------------------------------- */
.account-menu--main .account-menu__link {
  position: relative;
  color: var(--ibx-account-text);
  background-color: #fff;
  border: 1px solid var(--ibx-account-tile-border);
  border-radius: calc(var(--bs-border-radius) * 2);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.account-menu--main .account-menu__link:hover {
  color: var(--ibx-account-text);
  border-color: var(--ibx-account-tile-hover);
  box-shadow: inset 0 calc(-1 * var(--ibx-tab-active-width, 3px)) 0 var(--ibx-account-tile-hover);
}

/* Icône dans une pastille ronde teintée */
.account-menu--main .account-menu__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-size: 1.75rem;
  color: var(--ibx-account-icon-color);
  background: var(--ibx-account-icon-bg);
  border-radius: 50%;
}

/* Déconnexion (mobile seulement dans le tableau de bord) : sobre, rouge au survol */
.account-menu--main .account-menu__link--signout {
  color: var(--ibx-account-muted);
}

.account-menu--main .account-menu__link--signout .account-menu__icon {
  color: var(--ibx-account-muted);
  background: #f3f4f6;
}

.account-menu--main .account-menu__link--signout:hover {
  color: var(--bs-danger);
  border-color: var(--bs-danger);
  box-shadow: inset 0 calc(-1 * var(--ibx-tab-active-width, 3px)) 0 var(--bs-danger);
}

/* 5. Menu latéral du compte ------------------------------------------------- */
.account-menu--sidebar {
  gap: .25rem;
}

.account-menu--sidebar .account-menu__title {
  padding-bottom: .625rem;
  margin-bottom: .75rem;
  font-size: var(--ibx-tab-font-size, 1rem);
  font-weight: 700;
  color: var(--ibx-account-text);
  text-transform: var(--ibx-tab-text-transform, uppercase);
  box-shadow: inset 0 -1px 0 var(--ibx-tab-line-color, #d9d9d9);
}

.account-menu--sidebar .account-menu__link {
  padding: .625rem .75rem;
  font-weight: 500;
  color: var(--ibx-account-text);
  border-radius: .5rem;
}

.account-menu--sidebar .account-menu__icon {
  font-size: 1.375rem;
  color: var(--ibx-account-icon-color);
}

.account-menu--sidebar .account-menu__link:hover {
  color: var(--ibx-account-text);
  background-color: color-mix(in srgb, var(--primary, #0b69f6) 6%, #fff);
}

/* Page courante : rectangle arrondi teinté + gras (pas que la couleur) */
.account-menu--sidebar .account-menu__link--active {
  font-weight: 700;
  color: var(--ibx-account-text);
  background-color: var(--ibx-account-active-bg);
}

/* Déconnexion : séparée du reste, sobre, rouge au survol */
.account-menu--sidebar .account-menu__link--signout {
  padding-top: .875rem;
  margin-top: .5rem;
  color: var(--ibx-account-muted);
  border-top: 1px solid var(--ibx-tab-line-color, #d9d9d9);
  border-radius: 0;
}

.account-menu--sidebar .account-menu__link--signout .account-menu__icon {
  color: var(--ibx-account-muted);
}

.account-menu--sidebar .account-menu__link--signout:hover {
  color: var(--bs-danger);
  background: none;
}

.account-menu--sidebar .account-menu__link--signout:hover .account-menu__icon {
  color: var(--bs-danger);
}

.account-menu__link:focus-visible {
  outline: 2px solid var(--ibx-account-tile-hover);
  outline-offset: 2px;
}

/* 6. Liens de bas de page du compte ----------------------------------------- */
.account-link {
  display: inline-flex;
  gap: .25rem;
  align-items: center;
  margin-right: 1.5rem;
  font-weight: 600;
  color: var(--bs-link-color);
  text-decoration: none;
}

.account-link .material-icons {
  color: var(--ibx-account-icon-color);
}

.account-link:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (forced-colors: active) {
  .account-menu--sidebar .account-menu__link--active { outline: 2px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  .account-menu--main .account-menu__link { transition: none; }
}

/* 7. Cartes d'adresses (0.38.1) --------------------------------------------- */
.address-card {
  border-color: var(--ibx-account-tile-border);
  border-radius: calc(var(--bs-border-radius) * 2);
}

/* Un texte long (adresse, champ ajouté par un module) ne déborde plus sur la carte voisine */
.address-card__content,
.address-card__extra {
  min-width: 0;
  overflow-wrap: anywhere;
}

.address-card__alias {
  color: var(--ibx-account-text);
}

/* Carte « Ajouter une nouvelle adresse » : centrée, pointillés, survol teinté */
.address-card--add-address {
  color: var(--bs-link-color);
  text-align: center;
  text-decoration: none;
  border-style: dashed;
}

.address-card--add-address:hover {
  color: var(--bs-link-color);
  background-color: var(--ibx-account-active-bg);
  border-color: var(--ibx-account-tile-hover);
}

.address-card--add-address .address-card__add-text {
  font-weight: 600;
}

.address-card--add-address:focus-visible {
  outline: 2px solid var(--ibx-account-tile-hover);
  outline-offset: 2px;
}

/* 8. Listes d'envies (0.39.0) ------------------------------------------------
   Pages « Mes listes d'envies » et « contenu d'une liste » (blockwishlist).
   Le HTML est produit par Vue.js : pas de template à surcharger, CSS seul.
   - Le lien « Créer une nouvelle liste » et les liens de bas de page portent
     la classe Bootstrap .text-primary, imposée en !important dans une couche
     CSS : on redéfinit donc --bs-primary-rgb sur ces conteneurs (= couleur des
     liens de la boutique) au lieu de combattre la règle. */
:is(.wishlist-container, .wishlist-products-container, .wishlist-footer-links) {
  --bs-primary-rgb: var(--bs-link-color-rgb);
}

/* Titres : style onglet, comme toutes les pages */
:is(.wishlist-container-header, .wishlist-products-container-header) {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1rem;
  box-shadow: inset 0 calc(-1 * var(--ibx-tab-line-width, 1px)) 0 var(--ibx-tab-line-color, #d9d9d9);
}

:is(.wishlist-container-header, .wishlist-products-container-header) h1 {
  display: inline-block;
  padding: .5rem 0 .625rem;
  margin: 0;
  font-size: var(--ibx-listing-title-size-mobile, .875rem);
  font-weight: var(--ibx-tab-font-weight-active, 700);
  line-height: 1.2;
  color: var(--ibx-account-text);
  text-transform: var(--ibx-tab-text-transform, uppercase);
  border-bottom: var(--ibx-tab-active-width, 3px) solid var(--ibx-account-tile-hover);
}

@media (min-width: 768px) {
  :is(.wishlist-container-header, .wishlist-products-container-header) h1 {
    font-size: var(--ibx-listing-title-size, 1rem);
  }
}

.wishlist-products-container-header .wishlist-products-count {
  font-weight: 600;
  color: var(--ibx-account-muted);
}

/* « Créer une nouvelle liste » */
.wishlist-container .wishlist-add-to-new {
  display: inline-flex;
  gap: .375rem;
  align-items: center;
  padding-bottom: .625rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.wishlist-container .wishlist-add-to-new:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wishlist-container .wishlist-add-to-new .material-icons {
  color: var(--ibx-account-icon-color);
}

/* Liste des listes */
.wishlist-container .page-content.card {
  border-color: var(--ibx-account-tile-border);
  border-radius: calc(var(--bs-border-radius) * 2);
}

.wishlist-container .wishlist-list .wishlist-list-item {
  border-radius: .5rem;
  transition: background-color .15s ease-in-out;
}

.wishlist-container .wishlist-list .wishlist-list-item-title {
  margin: 0;
  font-weight: 600;
  color: var(--ibx-account-text);
}

.wishlist-container .wishlist-list .wishlist-list-item:hover {
  background-color: color-mix(in srgb, var(--primary, #0b69f6) 6%, #fff);
}

.wishlist-container .wishlist-list .wishlist-list-item:hover .wishlist-list-item-title {
  color: var(--bs-link-color);
}

.wishlist-container .wishlist-list .wishlist-list-item-default {
  border-bottom-color: var(--ibx-tab-line-color, #d9d9d9);
}

/* Icônes d'action (partager, menu, supprimer) */
.wishlist-container .wishlist-list-item-right > button,
.wishlist-container .wishlist-list-item-right > .wishlist-list-item-actions {
  color: var(--ibx-account-icon-color);
  background: none;
  border: 0;
  border-radius: 50%;
}

.wishlist-container .wishlist-list-item-right > button:hover {
  background-color: var(--ibx-account-active-bg);
}

.wishlist-container .wishlist-list-item-right .dropdown-menu button:hover {
  color: var(--ibx-account-text);
  background-color: var(--ibx-account-active-bg);
}

/* Contenu d'une liste : produits */
.wishlist-products-container .wishlist-product .wishlist-product-title {
  font-weight: 600;
  color: var(--ibx-account-text);
}

.wishlist-products-container .wishlist-product .wishlist-product-price {
  color: var(--ibx-price-color, var(--bs-link-color));
}

.wishlist-products-container .wishlist-product .wishlist-product-price-promo {
  color: var(--ibx-account-muted);
}

.wishlist-products-container .wishlist-product-combinations a {
  color: var(--ibx-account-icon-color);
}

.wishlist-products-container .wishlist-product-combinations a:hover {
  color: var(--bs-link-hover-color);
}

/* Tri (« Derniers ajoutés ») */
.wishlist-products-container .products-sort-order .select-title {
  border: 1px solid var(--ibx-tab-line-color, #d9d9d9);
  border-radius: var(--bs-border-radius);
}

.wishlist-products-container .products-sort-order .dropdown-menu .select-list:hover {
  color: var(--ibx-account-text);
  background-color: var(--ibx-account-active-bg);
}

/* Pagination */
.wishlist-pagination .js-wishlist-search-link,
.wishlist-pagination a {
  color: var(--bs-link-color);
}

.wishlist-pagination .current a,
.wishlist-pagination .current .js-wishlist-search-link {
  font-weight: 700;
  color: var(--ibx-account-text);
}

/* Liens de bas de page (« Retour à votre compte », « Accueil ») */
.wishlist-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: 1.5rem;
}

.wishlist-footer-links a {
  display: inline-flex;
  gap: .25rem;
  align-items: center;
  font-weight: 600;
  color: var(--bs-link-color);
  text-decoration: none;
}

.wishlist-footer-links a .material-icons {
  color: var(--ibx-account-icon-color);
}

.wishlist-footer-links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}