/* ================================================================
   BH CORE — socle commun toutes pages (chargé en dernier)
   1) Jetons de marque alignés sur le thème V3 (jade)
   2) Pont legacy : les anciennes variables emerald pointent sur jade
   3) Confort tactile / focus / sélection (additif, sans layout)
   ================================================================ */
/* Les jetons de ce fichier vivent desormais dans bh-tokens.css.
   bh-core.css ne garde que ses composants : badges, toasts, squelettes, focus.
   (16 jetons deplaces, lot 2.) */

html{-webkit-text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*{-webkit-tap-highlight-color:transparent}
::selection{background:var(--bh-vert);color:#fff}
:focus-visible{outline:2px solid var(--bh-vert);outline-offset:2px;border-radius:4px}
button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:none}
@media (max-width:768px){
  button,.btn,[role="button"]{min-height:42px}
}

/* ── Dark mode : masqué tant que la couverture est incomplète ──
   Le toggle (injecté par bh-layout.js) ne persiste pas le choix ;
   le cacher suffit à neutraliser la fonctionnalité. */
.bh-theme-toggle{display:none!important}
.bh-demo-mode-label{display:none!important}

/* ══ POLISH PACK — micro-interactions & finitions ══ */

/* Feedback tactile universel : léger enfoncement au tap.
   Propriété `scale` (pas transform) : ne casse aucun positionnement existant. */
:where(button, .btn, [role="button"], a.bh-demo-btn, .tab-btn):active{ scale: .965; }
:where(button, .btn, [role="button"]){ transition: scale .12s ease; }

/* Défilement : doux, sans rebond parasite dans les feuilles/modales */
html{ scroll-behavior: smooth; }
.bh-sheet-panel [id$="Content"], .modal-content{ overscroll-behavior: contain; }

/* Barres de défilement desktop : fines, discrètes, jade au survol */
@media (pointer: fine){
  *::-webkit-scrollbar{ width: 9px; height: 9px; }
  *::-webkit-scrollbar-track{ background: transparent; }
  *::-webkit-scrollbar-thumb{ background: rgba(122,134,149,.28); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
  *::-webkit-scrollbar-thumb:hover{ background: rgba(14,59,46,.45); border: 2px solid transparent; background-clip: content-box; }
}

/* Entrée de page : cascade discrète des blocs principaux (une fois, au chargement) */
@media (prefers-reduced-motion: no-preference){
  main.main-content > *{ animation: bhPageIn .32s cubic-bezier(.3,.9,.3,1) both; }
  main.main-content > *:nth-child(2){ animation-delay: .04s }
  main.main-content > *:nth-child(3){ animation-delay: .08s }
  main.main-content > *:nth-child(4){ animation-delay: .11s }
  main.main-content > *:nth-child(n+5){ animation-delay: .13s }
}
@keyframes bhPageIn{ from{ opacity: 0; transform: translateY(7px); } to{ opacity: 1; transform: none; } }

/* ══ TOASTS BH (définis par bh-polish.js) ══ */
#bh-toast-zone{ position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 100001;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; width: max-content; max-width: 92vw; }
.bh-toast{ display: flex; align-items: center; gap: 11px;
  background: #12211C; color: #F2EEE3; border-radius: 13px;
  padding: 11px 18px 11px 12px; font: 500 13.5px/1.45 'DM Sans', sans-serif;
  border-left: 3px solid var(--bh-or); box-shadow: 0 14px 44px rgba(32,34,31,.35);
  max-width: 92vw; pointer-events: auto;
  animation: bhToastIn .3s cubic-bezier(.22,1.1,.36,1); }
.bh-toast.sortie{ animation: bhToastOut .25s ease forwards; }
.bh-toast .bt-ic{ flex: none; width: 21px; height: 21px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; background: rgba(255,255,255,.14); }
.bh-toast.ok{ border-left-color: #3E9C7C; }   .bh-toast.ok .bt-ic{ background: #1F5C49; color: #BFE8D6; }
.bh-toast.err{ background: #4A1F14; border-left-color: #E07A5F; } .bh-toast.err .bt-ic{ background: #6E2E1E; color: #F6D5CB; }
.bh-toast.info{ border-left-color: #7C8FB0; } .bh-toast.info .bt-ic{ background: #2E3D52; color: #C9D6EA; }
@keyframes bhToastIn{ from{ transform: translateY(12px); opacity: 0 } to{ transform: none; opacity: 1 } }
@keyframes bhToastOut{ to{ transform: translateY(8px); opacity: 0 } }

/* ══ MICRO-INTERACTIONS — retour tactile unifié ══
   La propriété `scale` n'écrase pas les `transform` existants
   (logo centré, éléments translatés) : aucun conflit possible. */
button, .btn, [role="button"], [onclick],
.bh2-op, .bh2-stat, .kpi, .bh2-ca, .bh2-occ,
.status-badge, .page-btn, .mobile-tabs a, .cleaning-tabs .tab {
  transition-property: scale, box-shadow, background-color, border-color, color, opacity;
  transition-duration: .16s;
  transition-timing-function: cubic-bezier(.3,.9,.4,1);
}
button:active:not(:disabled), .btn:active, [role="button"]:active,
[onclick]:active, .bh2-op:active, .bh2-stat:active, .kpi:active,
.bh2-ca:active, .bh2-occ:active, .page-btn:active { scale: .975; }
/* lift discret au survol, uniquement à la souris */
@media (hover:hover) and (pointer:fine){
  .bh2-op:hover, .bh2-stat:hover, .kpi:hover { translate: 0 -1px; }
}
@media (prefers-reduced-motion:reduce){
  button:active, .btn:active, [onclick]:active { scale: none; }
}

/* ══ BADGES DE STATUT — système unifié ══
   Pilule + point coloré. Variantes : ok (jade), warn (ambre),
   err (terracotta), info (ardoise), ota (lavande), direct (jade pâle). */
.bh-badge{ display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px 3px 8px; border-radius:99px;
  font:600 11px/1.4 'DM Sans',sans-serif; letter-spacing:.015em;
  border:1px solid transparent; white-space:nowrap; }
.bh-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85; }
.bh-badge.ok{     background:var(--bh-vert-pale); color:#166B52; border-color:#D3E6DD; }
.bh-badge.warn{   background:#FBF3E2; color:#9A6514; border-color:#F0E2C2; }
.bh-badge.err{    background:#FBEDE7; color:#B0431E; border-color:#F2D8CC; }
.bh-badge.info{   background:#EEF1F6; color:#44546A; border-color:#DCE2EC; }
.bh-badge.ota{    background:#F1EDFB; color:#5B3FA8; border-color:#E2DAF4; }
.bh-badge.direct{ background:var(--bh-vert-pale); color:var(--bh-vert); border-color:#D3E6DD; }

/* ══ SKELETONS — chargement des listes (shimmer crème) ══ */
.bh-skel{ position:relative; overflow:hidden; background:#EDE7DB; border-radius:12px; }
.bh-skel::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);
  animation:bhSkelSlide 1.15s ease-in-out infinite; }
@keyframes bhSkelSlide{ from{transform:translateX(-100%)} to{transform:translateX(100%)} }
.bh-skel-carte{ height:118px; border-radius:16px; margin-bottom:12px; }
.bh-skel-ligne{ height:14px; margin-bottom:10px; }
.bh-skel-ligne.l60{ width:60% } .bh-skel-ligne.l80{ width:80% }
@media (prefers-reduced-motion:reduce){ .bh-skel::after{ animation:none } }
/* ============================================================================
   BOUTON « ← Tableau de bord » — un seul rendu
   ============================================================================
   A COLLER A LA FIN DE public/css/bh-core.css

   Pourquoi bh-core.css : il charge en DERNIER sur les 54 pages qui l'incluent,
   donc apres le CSS interne de chaque page. C'est le seul endroit d'ou l'on
   peut unifier ces boutons sans reecrire dix blocs de style disperses.

   ── LE PROBLEME ─────────────────────────────────────────────────────────
   Un meme bouton, dix classes differentes, chacune stylee dans le CSS de sa
   propre page :

     .welcome-back-btn     livret d'accueil    vert plein   (le bon rendu)
     .cleaning-back-btn    gestion du menage   blanc
     .settings-back-btn    mes logements       blanc
     .fp-btn-back          clients, factures proprietaires
     .deposits-back-btn    cautions
     .factures-back-btn    factures
     .help-back-btn        support
     .rp-btn-back          revenus
     .resa-back-btn        reservations
     .locks-back-btn       serrures connectees

   Personne n'a decide que ce bouton serait blanc ici et vert la : ces styles
   ont ete ecrits page par page, a des moments differents. Le rendu retenu est
   celui du livret d'accueil, le plus lisible : vert plein, texte blanc.

   ── LE !important, ASSUME ───────────────────────────────────────────────
   Les dix regles d'origine vivent dans le CSS interne des pages. Les
   surcharger depuis une feuille demande soit de les supprimer une a une dans
   dix fichiers, soit ce !important. Le second est reversible et tient en un
   bloc ; le premier viendra quand ces pages seront reprises.

   ── LA SUITE ────────────────────────────────────────────────────────────
   bh-layout.js sait deja construire ce bouton a partir de data-back-href et
   data-back-label — dynamic-pricing.html et reservations.html l'utilisent
   ainsi. La vraie cible est de supprimer les dix boutons ecrits a la main et
   de laisser bh-layout.js les poser : un seul bouton, un seul style, plus
   aucune classe a retenir.
   ============================================================================ */

.welcome-back-btn,
.cleaning-back-btn,
.settings-back-btn,
.deposits-back-btn,
.factures-back-btn,
.help-back-btn,
.locks-back-btn,
.resa-back-btn,
.rp-btn-back,
.fp-btn-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 20px !important;
  border: none !important;
  border-radius: 12px !important;
  background: var(--bh-vert) !important;
  color: #fff !important;
  font-family: var(--bh-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background .18s ease, transform .18s ease !important;
}

.welcome-back-btn:hover,
.cleaning-back-btn:hover,
.settings-back-btn:hover,
.deposits-back-btn:hover,
.factures-back-btn:hover,
.help-back-btn:hover,
.locks-back-btn:hover,
.resa-back-btn:hover,
.rp-btn-back:hover,
.fp-btn-back:hover {
  background: var(--bh-vert-fonce) !important;
}

.welcome-back-btn:active,
.cleaning-back-btn:active,
.settings-back-btn:active,
.deposits-back-btn:active,
.factures-back-btn:active,
.help-back-btn:active,
.locks-back-btn:active,
.resa-back-btn:active,
.rp-btn-back:active,
.fp-btn-back:active {
  transform: translateY(1px) !important;
}

/* La fleche suit la couleur du texte : sur la page Messages elle etait
   grisee par une regle de page, ce qui donnait ce vert delave. */
.welcome-back-btn i,
.cleaning-back-btn i,
.settings-back-btn i,
.deposits-back-btn i,
.factures-back-btn i,
.help-back-btn i,
.locks-back-btn i,
.resa-back-btn i,
.rp-btn-back i,
.fp-btn-back i {
  color: currentColor !important;
  font-size: 14px !important;
  margin: 0 !important;
}

/* Sur petit ecran l'en-tete passe en colonne : le bouton garde une hauteur
   de touche confortable sans devenir pleine largeur. */
@media (max-width: 620px) {
  .welcome-back-btn,
  .cleaning-back-btn,
  .settings-back-btn,
  .deposits-back-btn,
  .factures-back-btn,
  .help-back-btn,
  .locks-back-btn,
  .resa-back-btn,
  .rp-btn-back,
  .fp-btn-back {
    padding: 11px 16px !important;
    font-size: 14px !important;
  }
}
/* ============================================================================
   ANIMATION D'ENTREE — exclure les surcouches
   ============================================================================
   A COLLER A LA FIN DE public/css/bh-core.css

   ── LE PROBLEME ─────────────────────────────────────────────────────────
   La ligne 48 de bh-core.css anime tous les enfants directs du contenu :

       main.main-content > *{ animation: bhPageIn .32s ... both; }

   « both » veut dire que l'animation MAINTIENT son etat final apres la fin.
   L'etat final de bhPageIn est opacity:1. Et en CSS, une animation l'emporte
   sur une declaration ordinaire.

   Consequence : tout element cache par « opacity: 0 » et place en enfant
   direct du contenu devient VISIBLE en permanence. Sur la page Livret
   d'accueil, le toast « Brouillon enregistre ! » s'affichait des l'ouverture,
   avec le texte ecrit en dur dans le HTML — personne ne l'avait declenche.

   Ce n'etait donc pas un bug de la page : la page etait correcte
   (opacity:0, pointer-events:none). C'est l'animation qui la contredisait.

   ── LE CORRECTIF ────────────────────────────────────────────────────────
   Une surcouche en position fixe n'a rien a faire dans une animation
   d'entree de page : elle n'entre pas avec la page, elle apparait quand on
   la demande. On lui retire donc l'animation, ce qui rend leur effet aux
   regles de la page.

   Pas de !important : ces regles arrivent apres la ligne 48 dans le meme
   fichier, a specificite egale ou superieure — elles gagnent naturellement.
   ============================================================================ */

main.main-content > .toast,
main.main-content > [id*="oast"],
main.main-content > .modal,
main.main-content > .modal-overlay,
main.main-content > .bottom-sheet,
main.main-content > .bottom-sheet-overlay,
main.main-content > [class*="sheet"],
main.main-content > [class*="overlay"],
main.main-content > dialog,
main.main-content > .bh-no-page-in {
  animation: none !important;
}

/* Echappatoire pour la suite : poser la classe bh-no-page-in sur tout
   nouvel element qui ne doit pas participer a l'animation d'entree. */


/* ============================================================================
   A SAVOIR POUR PLUS TARD — trois animations d'entree coexistent
   ============================================================================
   bhPageIn est defini TROIS fois, dans trois fichiers, avec des durees et
   des cibles differentes :

     css/bh-core.css:48         main.main-content > *      .32s   both
     js/bh-layout.js:1943       body.bh-page-ready         .28s
     js/bh-page-transitions.js  body                       .26s   both

   Les trois se cumulent sur les pages qui chargent tout : le contenu est
   anime en tant qu'enfant, la page en tant que body, deux fois. D'ou une
   entree legerement molle et desynchronisee.

   Une seule devrait survivre — celle de bh-page-transitions.js, qui anime la
   page entiere une fois, plutot que chaque enfant separement. La regle de
   bh-core.css est aussi celle qui a cause le bug ci-dessus : animer « tous
   les enfants » atteint fatalement des elements qui ne le demandaient pas.

   Je ne le fais pas ici : cela change la sensation de chaque navigation dans
   le produit, et cela se decide en le voyant.
   ============================================================================ */
/* ============================================================================
   SOUS-TITRE DU CALENDRIER
   ============================================================================
   A COLLER A LA FIN DE public/css/bh-core.css

   bh-theme-v3.css style deja .bh-cal-legend et ses pastilles. Il manquait le
   sous-titre, que l'ancien code posait en style en ligne dans le JavaScript —
   d'ou une couleur en dur impossible a reprendre depuis une feuille.
   ============================================================================ */

html[data-theme-v3="1"] .bh-cal-subtitle {
  margin: 3px 0 0 50px;
  font-family: var(--bh-sans);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
  /* L'en-tete du calendrier est sombre dans les deux themes : un blanc
     translucide y tient mieux qu'un jeton de texte. */
  color: rgba(255,255,255,.45);
}

/* Le mot en italique des titres de page et du titre du calendrier. */
html[data-theme-v3="1"] .calendar-title-modern em {
  font-family: var(--bh-serif);
  font-style: italic;
  color: var(--vert-300);
}
/* ============================================================================
   BOUTON « ← Tableau de bord » — correction mobile
   ============================================================================
   A COLLER A LA FIN DE public/css/bh-core.css, APRES le bloc precedent.

   ── CE QUE J'AI CASSE ───────────────────────────────────────────────────
   Le bloc qui unifie les dix classes de ce bouton declare
   « display: inline-flex !important ». Ce !important ecrase aussi les regles
   par lesquelles certaines pages le MASQUAIENT en mobile — d'ou son
   apparition sur Reservations et Serrures connectees, ou il flottait
   par-dessus le contenu.

   ── POURQUOI IL DOIT DISPARAITRE EN MOBILE ──────────────────────────────
   En dessous de 1366px, bh-v3-mobile.css masque .main-header et affiche a la
   place l'en-tete mobile fixe et la barre d'onglets du bas. Le retour au
   tableau de bord y passe par l'onglet dedie : un second bouton flottant fait
   doublon, et masque une partie de la page.

   Le seuil de 1366px n'est pas choisi ici : c'est celui de bh-v3-mobile.css.
   Les deux doivent rester d'accord, sinon le bouton reapparaitrait dans la
   bande de largeurs ou l'en-tete mobile est deja actif.
   ============================================================================ */

@media (max-width: 1366px) {
  .welcome-back-btn,
  .cleaning-back-btn,
  .settings-back-btn,
  .deposits-back-btn,
  .factures-back-btn,
  .help-back-btn,
  .locks-back-btn,
  .resa-back-btn,
  .rp-btn-back,
  .fp-btn-back {
    display: none !important;
  }
}