/* ==========================================================
   ROYAL PALM AIX — custom-royalpalm.css (PROPRE / STABLE)
   Objectif: overrides légers, pas de reset global, pas de chaos.
   ========================================================== */

/* =========================
   1) TOKENS / PALETTE
   ========================= */
:root, [data-bs-theme="light"]{
  --rp-sable:#F4ECDF;
  --rp-ivoire:#F7F3EC;
  --rp-patine:#CBBEAA;
  --rp-brun:#3D2F1C;
  --rp-brun-2:#6B5436;
  --rp-or:#C9A86A;
  --rp-or-2:#8F6B3E;

  /* remap variables du site (si elles existent) */
  --primary-color: var(--rp-brun);
  --primary-color-dark: #2D2416;
  --primary-color-darker: #1F190F;

  --secondary-color: var(--rp-or);
  --secondary-color-dark: var(--rp-or-2);

  --text-color: var(--rp-brun);
  --border-color: rgba(61,47,28,.14);
  --background-color: var(--rp-sable);

  /* bootstrap overrides clés */
  --bs-body-color: var(--rp-brun);
  --bs-body-bg: var(--rp-sable);
  --bs-heading-color: var(--rp-brun);

  --bs-primary: var(--rp-brun);
  --bs-secondary: var(--rp-or);

  /* kill le vert bootstrap */
  --bs-success: var(--rp-brun-2);
  --bs-info: var(--rp-or-2);
  --bs-warning: var(--rp-or);
  --bs-focus-ring-color: rgba(201,168,106,.35);
}

/* =========================
   2) BASE (soft)
   ========================= */
html, body{
  background: var(--rp-sable) !important;
  color: var(--rp-brun) !important;
}

a{ color: var(--rp-brun-2) !important; }
a:hover{ color: var(--rp-brun) !important; }

/* =========================
   3) ANTI-VERT (sans massacrer)
   ========================= */
.text-success,
.bg-success,
.btn-success,
.badge.bg-success{
  color: var(--rp-brun) !important;
  background-color: rgba(203,190,170,.65) !important;
  border-color: rgba(61,47,28,.18) !important;
}

/* =========================
   4) BOUTONS (uniquement les vrais boutons)
   IMPORTANT: on ne touche pas "button.btn" / "a.btn" globalement
   sinon tu casses des composants
   ========================= */
.btn-primary,
.btn-secondary,
.btn-info,
.btn-warning{
  background: linear-gradient(145deg, rgba(201,168,106,.96), rgba(143,107,62,.96)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.btn-outline-primary{
  background: transparent !important;
  border: 1px solid rgba(61,47,28,.25) !important;
  color: var(--rp-brun) !important;
}

/* =========================
   5) INPUTS / FOCUS
   ========================= */
.form-control,
input, select, textarea{
  border-color: rgba(61,47,28,.18) !important;
}

.form-control:focus,
input:focus, select:focus, textarea:focus{
  border-color: rgba(203,190,170,.95) !important;
  box-shadow: 0 0 0 4px rgba(203,190,170,.35) !important;
}

/* =========================
   6) SEARCH BAR
   ========================= */
#search-bar,
.search-bar,
.searchbar,
.search-container,
.search-panel,
.search-wrapper,
.search-area,
.search-bar-container,
#searchBar{
  background: linear-gradient(145deg, rgba(201,168,106,.92), rgba(143,107,62,.92)) !important;
  border-color: rgba(61,47,28,.18) !important;
}

/* =========================
   7) TAGS / PILLS
   ========================= */
a.tag,
.badge,
span.badge,
.pill,
.tag,
.chip{
  background: rgba(203,190,170,.75) !important;
  color: var(--rp-brun) !important;
  border: 1px solid rgba(61,47,28,.15) !important;
}

/* =========================
   8) FOOTER
   ========================= */
footer{
  background: linear-gradient(180deg, rgba(61,47,28,.95), rgba(20,16,10,.98)) !important;
  color: rgba(255,255,255,.88) !important;
}
footer a{ color: rgba(255,255,255,.88) !important; }
footer a:hover{ color:#fff !important; }

/* =========================
   9) MOBILE: FIX HEADER GÉANT + MENU OUVERT PAR DÉFAUT
   La stratégie: on NE force pas "display:none" (risque de bloquer),
   on "ferme" le menu via max-height et overflow tant qu'il n'est pas ouvert.
   ========================= */
@media (max-width: 768px){

  /* 9.1 Réduit la marge top qui pousse tout */
  body.has-promoBar:not(.dashboard){
    margin-top: 120px !important; /* au lieu de 186px */
  }
  body:not(.dashboard){
    margin-top: 92px !important;
  }

  /* 9.2 Navbar plus compacte (sans casser desktop) */
  header,
  #primaryNavbar,
  nav#primaryNavbar.navbar{
    padding: 8px 12px !important;
  }

  /* 9.3 Logo plus petit */
  .navbar-brand img,
  header img{
    max-height: 40px !important;
    width: auto !important;
    height: auto !important;
  }

  /* 9.4 Boutons / liens plus propres */
  #primaryNavbar a,
  #primaryNavbar .btn{
    font-size: 14px !important;
    padding: 8px 10px !important;
    line-height: 1.2 !important;
  }

  /* 9.5 LE VRAI COUPABLE: menu mobile visible par défaut
        On le "plie" tant qu'il n'est pas ouvert */
  #mobileMenu.mobile-menu{
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: max-height .25s ease, opacity .2s ease !important;
  }

  /* Quand ton JS ajoute une classe d’ouverture */
  #mobileMenu.mobile-menu.open,
  #mobileMenu.mobile-menu.is-open,
  #mobileMenu.mobile-menu.active,
  #mobileMenu.mobile-menu.show{
    max-height: 80vh !important;
    overflow: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* =========================
   10) Petites tailles
   ========================= */
@media (max-width: 576px){
  h1{ font-size: 28px !important; }
  h2{ font-size: 22px !important; }
}
/* ==========================================================
   HOTFIX — HEADER MOBILE COMPACT (force)
   À coller TOUT EN BAS de custom-royalpalm.css
   ========================================================== */
@media (max-width: 768px){

  /* 1) Promo bar moins haute */
  #promoBar,
  .promo-bar,
  .promo-bar-container,
  .promo-bar-wrapper{
    padding: 6px 10px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  /* 2) Header / Navbar: on réduit la “brique” */
  header,
  header *{
    box-sizing: border-box !important;
  }

  header{
    padding: 6px 10px !important;
  }

  /* Le nav principal (souvent #primaryNavbar) */
  #primaryNavbar,
  nav#primaryNavbar.navbar,
  .navbar.navbar-expand{
    padding: 6px 10px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* Container interne bootstrap */
  #primaryNavbar .container,
  #primaryNavbar .container-fluid{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 3) Logo: STOP le logo XXL */
  .navbar-brand,
  .navbar-brand img,
  header .logo img,
  header img{
    max-height: 36px !important;
    height: 36px !important;
    width: auto !important;
  }

  /* 4) Liens / boutons dans le header */
  #primaryNavbar a,
  #primaryNavbar .nav-link,
  #primaryNavbar .btn,
  #primaryNavbar a.btn{
    font-size: 13px !important;
    padding: 6px 8px !important;
    line-height: 1.1 !important;
  }

  /* 5) Search-bar du header (souvent la vraie cause du “header énorme”) */
  #search-bar,
  .search-bar{
    padding: 6px 10px !important;
    margin: 6px 0 0 0 !important;
  }

  #search-bar input,
  .search-bar input{
    height: 38px !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
  }

  #search-bar button,
  .search-bar button{
    height: 38px !important;
    width: 38px !important;
    padding: 0 !important;
  }

  /* 6) IMPORTANT: si le body est trop “descendu”, ça donne l’impression d’un header énorme */
  body.has-promoBar:not(.dashboard){
    margin-top: 120px !important;
  }
  body:not(.dashboard){
    margin-top: 92px !important;
  }
}
/* =========================
   MOBILE HEADER — COMPACT + CLEAN
   ========================= */
@media (max-width: 768px){

  /* 1) On vire les traits chelous (bleu/orange) */
  header,
  #promoBar,
  #primaryNavbar,
  #search-bar,
  .search-bar,
  .navbar{
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
  }

  /* Safari / iOS: évite certains surlignages bizarres */
  *{
    -webkit-tap-highlight-color: transparent !important;
  }

  /* 2) Header vraiment plus petit */
  header{
    padding: 0 !important;
  }

  /* 3) Navbar compacte */
  #primaryNavbar.navbar{
    padding: 6px 10px !important;
    min-height: 56px !important;
    align-items: center !important;
  }

  /* 4) Logo visible + pas mini */
  .navbar-brand,
  .navbar .navbar-brand{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .navbar-brand img,
  .navbar .logo img,
  img.mobile-menu-logo{
    height: 34px !important;     /* <- ajuste ici si tu veux 32/36 */
    width: auto !important;
    max-height: 34px !important;
  }

  /* 5) Les gros boutons (Espace Pro / Se connecter) */
  .navbar .btn,
  .navbar a.btn{
    padding: 6px 10px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    border-radius: 14px !important;
  }

  /* 6) Menu burger moins envahissant */
  .navbar-toggler,
  .hamburger,
  .menu-toggle{
    transform: scale(0.9);
  }

  /* 7) Barre de recherche: moins haute */
  #search-bar,
  .search-bar{
    padding: 6px 10px !important;
    margin: 0 !important;
  }
  #search-bar input,
  .search-bar input{
    height: 38px !important;
    font-size: 14px !important;
  }
}
@media (max-width: 480px){
  /* On évite le header XXL: on masque “Visualisation 3D” et “Espace Pro” */
  #primaryNavbar .nav-link[href*="visualisation"],
  #primaryNavbar .btn:has(.icon-crown),
  #primaryNavbar .btn:has(i.icon-crown){
    display: none !important;
  }
}