/* ============================================================
   YAFOYE DESIGN SYSTEM — identité visuelle unique
   ============================================================ */

:root{
  --yi-navy-950:#03263B;
  --yi-navy-900:#063A55;
  --yi-navy-800:#075D78;
  --yi-navy-700:#087E96;
  --yi-blue-600:#0AA6B8;

  --yi-gold-600:#C9912C;
  --yi-gold-500:#D9A441;
  --yi-gold-400:#E9C369;
  --yi-gold-200:#F7E9C5;

  --yi-white:#FFFFFF;
  --yi-bg:#F3FBFC;
  --yi-surface:#FFFFFF;
  --yi-surface-soft:#F7FCFD;

  --yi-text:#063A55;
  --yi-text-soft:#55727F;
  --yi-border:rgba(6,58,85,.12);
  --yi-border-strong:rgba(6,58,85,.22);

  --yi-success:#147A50;
  --yi-warning:#9C6A08;
  --yi-danger:#B53A3A;
  --yi-info:#0B4F89;

  --yi-gradient-primary:linear-gradient(135deg,#08B7C8 0%,#0AA6B8 52%,#087E96 100%);
  --yi-gradient-primary-hover:linear-gradient(135deg,#06AFC0 0%,#078FA6 55%,#075D78 100%);
  --yi-gradient-gold:linear-gradient(135deg,#C58D2A 0%,#D9A441 55%,#E8BC62 100%);

  --yi-shadow-xs:0 2px 8px rgba(6,58,85,.06);
  --yi-shadow-sm:0 8px 22px rgba(6,58,85,.10);
  --yi-shadow-md:0 16px 36px rgba(6,58,85,.13);
  --yi-shadow-lg:0 24px 55px rgba(6,58,85,.17);

  --yi-radius-sm:10px;
  --yi-radius-md:14px;
  --yi-radius-lg:18px;
  --yi-radius-xl:24px;

  --yi-transition:180ms ease;
}

/* Base */
html,body{
  background:var(--yi-bg);
  color:var(--yi-text);
}
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{color:var(--yi-navy-800)}
::selection{background:var(--yi-gold-200);color:var(--yi-navy-900)}

/* ============================================================
   BUTTONS
   ============================================================ */
button,
.btn,
.button,
a.btn,
input[type="submit"],
input[type="button"]{
  transition:
    transform var(--yi-transition),
    box-shadow var(--yi-transition),
    background var(--yi-transition),
    border-color var(--yi-transition),
    color var(--yi-transition);
}

.btn-primary,
.primary-btn,
.cta-primary,
.yi-primary-action,
.publish-btn,
.reserve-btn,
.search-submit,
.login-btn,
.save-btn,
.submit-btn,
button[type="submit"],
button[data-primary="true"],
a[data-primary="true"],
.btn-instagram,
.instagram-btn,
.gradient-instagram,
.instagram-gradient,
.yi-instagram-gradient{
  background:var(--yi-gradient-primary)!important;
  color:var(--yi-white)!important;
  border:1px solid transparent!important;
  box-shadow:var(--yi-shadow-sm)!important;
}

.btn-primary:hover,
.primary-btn:hover,
.cta-primary:hover,
.yi-primary-action:hover,
.publish-btn:hover,
.reserve-btn:hover,
.search-submit:hover,
.login-btn:hover,
.save-btn:hover,
.submit-btn:hover,
button[type="submit"]:hover,
button[data-primary="true"]:hover,
a[data-primary="true"]:hover,
.btn-instagram:hover,
.instagram-btn:hover,
.gradient-instagram:hover,
.instagram-gradient:hover,
.yi-instagram-gradient:hover{
  background:var(--yi-gradient-primary-hover)!important;
  box-shadow:var(--yi-shadow-md)!important;
  transform:translateY(-1px);
}

.btn-primary:active,
.primary-btn:active,
.cta-primary:active,
.yi-primary-action:active,
.publish-btn:active,
.reserve-btn:active,
.search-submit:active,
.login-btn:active,
.save-btn:active,
.submit-btn:active,
button[type="submit"]:active{
  transform:translateY(0);
  box-shadow:var(--yi-shadow-xs)!important;
}

.btn-secondary,
.secondary-btn,
.yi-secondary-action,
button[data-secondary="true"]{
  background:var(--yi-white)!important;
  color:var(--yi-navy-900)!important;
  border:1px solid var(--yi-border-strong)!important;
  box-shadow:var(--yi-shadow-xs)!important;
}

.btn-secondary:hover,
.secondary-btn:hover,
.yi-secondary-action:hover,
button[data-secondary="true"]:hover{
  background:var(--yi-surface-soft)!important;
  border-color:var(--yi-gold-500)!important;
}

.btn-premium,
.premium-btn,
.gold-btn,
button[data-premium="true"]{
  background:var(--yi-gradient-gold)!important;
  color:var(--yi-navy-950)!important;
  border:1px solid rgba(197,141,42,.32)!important;
  box-shadow:0 10px 26px rgba(217,164,65,.20)!important;
}

/* ============================================================
   TABS / NAVIGATION
   ============================================================ */
.tab,
.nav-tab,
.category-tab,
.yi-tab,
[role="tab"]{
  color:var(--yi-text-soft);
  border-color:transparent;
  transition:all var(--yi-transition);
}

.tab.active,
.tabs .active,
.nav-tab.active,
.category-tab.active,
.yi-tab.active,
[role="tab"][aria-selected="true"],
[aria-current="page"]{
  background:var(--yi-gradient-primary)!important;
  color:var(--yi-white)!important;
  border-color:rgba(217,164,65,.36)!important;
  box-shadow:var(--yi-shadow-sm)!important;
}

.tab.active i,
.nav-tab.active i,
.category-tab.active i,
.yi-tab.active i,
[role="tab"][aria-selected="true"] i,
[aria-current="page"] i{
  color:var(--yi-gold-500)!important;
}

/* ============================================================
   INPUTS / SELECTS / TEXTAREAS
   ============================================================ */
input,
select,
textarea{
  color:var(--yi-text)!important;
  background:var(--yi-white)!important;
  border:1px solid var(--yi-border)!important;
  border-radius:var(--yi-radius-md)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),var(--yi-shadow-xs)!important;
}

input:focus,
select:focus,
textarea:focus{
  outline:none!important;
  border-color:var(--yi-gold-500)!important;
  box-shadow:0 0 0 4px rgba(217,164,65,.13),var(--yi-shadow-xs)!important;
}

.yi-select-trigger{
  background:
    radial-gradient(circle at 92% 0,rgba(217,164,65,.12),transparent 34%),
    linear-gradient(180deg,#FFFFFF 0%,#F8FAFD 100%)!important;
  border:1px solid var(--yi-border)!important;
  color:var(--yi-text)!important;
  box-shadow:var(--yi-shadow-xs)!important;
}

.yi-premium-select.is-open .yi-select-trigger{
  border-color:var(--yi-gold-500)!important;
  box-shadow:0 0 0 4px rgba(217,164,65,.13),var(--yi-shadow-sm)!important;
}

.yi-select-menu{
  background:var(--yi-white)!important;
  border:1px solid var(--yi-border)!important;
  box-shadow:var(--yi-shadow-lg)!important;
}

.yi-select-option:hover,
.yi-select-option.is-active,
.yi-select-option[aria-selected="true"]{
  background:rgba(7,42,87,.07)!important;
  color:var(--yi-navy-900)!important;
}

/* ============================================================
   CARDS / PANELS / MODALS
   ============================================================ */
.card,
.panel,
.modal-content,
.sheet,
.filter-card,
.yi-card,
.yi-filter-card,
.yi-explorer-filter-sheet,
.publish-card{
  background:var(--yi-white)!important;
  border:1px solid var(--yi-border)!important;
  border-radius:var(--yi-radius-lg)!important;
  box-shadow:var(--yi-shadow-sm)!important;
}

.modal-backdrop,
.overlay,
.yi-overlay{
  background:rgba(2,18,38,.62)!important;
  backdrop-filter:blur(7px);
}

/* ============================================================
   BADGES / STATUS
   ============================================================ */
.badge,
.status-badge,
.yi-badge{
  border-radius:999px!important;
  font-weight:800!important;
  letter-spacing:.01em;
}

.badge-primary,
.status-primary{
  background:rgba(7,42,87,.10)!important;
  color:var(--yi-navy-800)!important;
}
.badge-premium,
.status-premium{
  background:rgba(217,164,65,.16)!important;
  color:#7A5312!important;
}
.badge-success,
.status-success{
  background:rgba(20,122,80,.12)!important;
  color:var(--yi-success)!important;
}
.badge-danger,
.status-danger{
  background:rgba(181,58,58,.12)!important;
  color:var(--yi-danger)!important;
}

/* ============================================================
   GLOBAL OVERRIDES AGAINST INSTAGRAM GRADIENTS
   ============================================================ */
[style*="#072A57"],
[style*="#072A57"],
[style*="#072A57"],
[style*="#072A57"],
[style*="#072A57"],
[style*="#072A57"],
[style*="#072A57"],
[style*="#072A57"],
[style*="#072A57"],
[style*="#072A57"],
[style*="#072A57"],
[style*="#072A57"]{
  background:var(--yi-gradient-primary)!important;
  border-color:transparent!important;
  color:var(--yi-white)!important;
}

/* ============================================================
   MOBILE BOTTOM NAV
   ============================================================ */
@media(max-width:768px){
  /* V101.49: le sélecteur générique nav[class*="bottom"] attrapait
     n'importe quel <nav> dont le nom de classe contient "bottom" —
     y compris .yf-unified-bottom-nav (chrome client unifié,
     client-unified-chrome.js), qui n'a jamais dû être concerné par
     cette règle. C'était la vraie cause du menu teal sur Explorer au
     lieu du bleu marine attendu partout ailleurs. Le sélecteur générique
     est retiré ; les classes explicites qu'il visait à l'origine restent
     inchangées pour ne rien casser d'autre. */
  .bottom-nav,
  .mobile-bottom-nav,
  .bottom-navigation,
  .yi-bottom-nav{
    min-height:74px!important;
    background:linear-gradient(180deg,#087E96 0%,#075D78 100%)!important;
    border-top:1px solid rgba(217,164,65,.24)!important;
    box-shadow:0 -10px 30px rgba(3,27,58,.18)!important;
  }

  .bottom-nav a span,
  .bottom-nav button span,
  .mobile-bottom-nav a span,
  .mobile-bottom-nav button span,
  .bottom-navigation a span,
  .bottom-navigation button span,
  .yi-bottom-nav a span,
  .yi-bottom-nav button span{
    font-size:10.8px!important;
    font-weight:850!important;
    line-height:1.12!important;
    color:inherit!important;
    opacity:1!important;
  }

  .bottom-nav .active,
  .bottom-nav [aria-current="page"],
  .mobile-bottom-nav .active,
  .mobile-bottom-nav [aria-current="page"],
  .bottom-navigation .active,
  .bottom-navigation [aria-current="page"],
  .yi-bottom-nav .active,
  .yi-bottom-nav [aria-current="page"]{
    background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(217,164,65,.14))!important;
    color:var(--yi-white)!important;
    box-shadow:inset 0 0 0 1px rgba(217,164,65,.34)!important;
  }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible{
  outline:3px solid rgba(217,164,65,.42)!important;
  outline-offset:2px!important;
}


/* ============================================================
   CORRECTIONS CIBLÉES — MES ANNONCES / MON COMPTE
   ============================================================ */

/* Bouton Publier un bien aligné avec le titre Mes annonces */
#myAds .publish-btn,
#myAds .btn-publish,
#myAdsHeader .publish-btn,
#myAdsHeader .btn,
.my-ads-header .publish-btn,
.my-ads-header .btn,
.my-ads-toolbar .publish-btn,
.my-ads-toolbar .btn,
[data-view="myads"] .publish-btn,
[data-view="myads"] .btn-primary,
[data-view="my-ads"] .publish-btn,
[data-view="my-ads"] .btn-primary{
  background:var(--yi-gradient-primary)!important;
  color:var(--yi-white)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 10px 28px rgba(10,166,184,.22)!important;
}

/* Barre active sous Appartements, Résidences, etc. */
#myAds .tabs::after,
#myAds .tabs .active::after,
#myAds .subtabs .active::after,
#myAds .category-tabs .active::after,
#myAds .my-ads-tabs .active::after,
.my-ads-tabs .active::after,
.my-ads-tabs button.active::after,
.my-ads-tabs a.active::after,
[data-view="myads"] .tabs .active::after,
[data-view="my-ads"] .tabs .active::after{
  background:var(--yi-gradient-primary)!important;
  box-shadow:0 2px 10px rgba(10,166,184,.24)!important;
}

/* Icônes des catégories */
#myAds .tabs i,
#myAds .subtabs i,
#myAds .category-tabs i,
.my-ads-tabs i,
[data-view="myads"] .tabs i,
[data-view="my-ads"] .tabs i{
  color:var(--yi-blue-600)!important;
  background:none!important;
  -webkit-text-fill-color:currentColor!important;
}

/* Mon compte : boutons de mise à jour / changement d'email */
#account button,
#account .btn,
#myAccount button,
#myAccount .btn,
.account-view button,
.account-view .btn,
[data-view="account"] button,
[data-view="account"] .btn,
[data-view="profile"] button,
[data-view="profile"] .btn{
  background:var(--yi-gradient-primary)!important;
  color:var(--yi-white)!important;
  border:1px solid transparent!important;
  box-shadow:0 10px 28px rgba(10,166,184,.22)!important;
}

/* Ne pas appliquer le primaire aux boutons secondaires explicites */
#account .btn-secondary,
#myAccount .btn-secondary,
.account-view .btn-secondary,
[data-view="account"] .btn-secondary,
[data-view="profile"] .btn-secondary{
  background:var(--yi-white)!important;
  color:var(--yi-navy-900)!important;
  border:1px solid var(--yi-border-strong)!important;
  box-shadow:var(--yi-shadow-xs)!important;
}

/* Neutralisation finale des anciennes barres et textes en gradient Instagram */
.my-ads-tabs .active,
.my-ads-tabs .active span,
.account-view .btn,
.my-ads-header .btn{
  background-image:none!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
  -webkit-text-fill-color:currentColor!important;
}

/* yi-hide-scrollbars-sitewide */
html,body,*{scrollbar-width:none!important;-ms-overflow-style:none!important}html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;background:transparent!important}