@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');

/* ============================================================================
   BH-BRAND — Palette « Maison Vert »
   A charger APRES bh-theme-v3.css et AVANT les calques bh-lux-*.
   Ne redefinit que des couleurs : aucune regle de mise en page.
   ============================================================================ */

/* Les jetons de ce fichier vivent desormais dans bh-tokens.css.
   bh-brand.css ne garde que ses overrides de mise en page.
   (27 jetons deplaces, lot 2.) */

/* ── Remplacement de l'ancien jade #1A7A5E ────────────────────────────────
   L'ancien vert etait utilise a la fois pour la marque et pour l'interface.
   On separe les deux : le logo prend le vert bouteille, l'interface garde un
   vert plus clair, seul lisible sur de petits elements. */
html.bh-lux[data-theme-v3="1"] {
  --primary-color: var(--bh-action);
  --primary-dark:  var(--bh-action-survol);
  --lux-green:      var(--vert-800);
  --lux-green-deep: var(--vert-900);
  --lux-green-soft: var(--vert-100);
  --lux-green-line: var(--bh-action-filet);
  --lux-ink:  var(--bh-encre);
  --lux-bg:   var(--bh-fond);
  --lux-panel:var(--bh-panneau);
  --lux-side: var(--bh-cote);
  --lux-line: var(--bh-ligne);
  --lux-line2:var(--bh-ligne-2);
}

html.bh-lux[data-theme-v3="1"] [style*="#1A7A5E"] { color: var(--bh-action) !important; }
html.bh-lux[data-theme-v3="1"] [style*="background:#1A7A5E"],
html.bh-lux[data-theme-v3="1"] [style*="background: #1A7A5E"],
html.bh-lux[data-theme-v3="1"] [style*="linear-gradient(135deg,#1A7A5E"],
html.bh-lux[data-theme-v3="1"] [style*="linear-gradient(135deg, #1A7A5E"] {
  background: var(--bh-action) !important;
  background-image: none !important;
}

/* ── Zones de marque : en-tete, blocs sombres, carte CA ───────────────────
   Les aplats noirs deviennent vert bouteille : l'ecran gagne une couleur
   au lieu d'en avoir deux (un noir + un vert sans rapport). */
html.bh-lux[data-theme-v3="1"] .calendar-header,
html.bh-lux[data-theme-v3="1"] .calendar-modern-header,
html.bh-lux[data-theme-v3="1"] .bh2-ca {
  background: var(--bh-vert) !important;
}
html.bh-lux[data-theme-v3="1"] .calendar-header .period-nav-btn.active {
  background: var(--bh-action) !important;
}
html.bh-lux[data-theme-v3="1"] .bh2-ca-lbl { color: rgba(242,234,218,.55) !important; }
html.bh-lux[data-theme-v3="1"] .bh2-ca-subrow { color: rgba(242,234,218,.45) !important; }

/* ── Barre de statut mobile / theme du navigateur ─────────────────────────
   A completer par <meta name="theme-color" content="var(--bh-vert)"> dans le head. */

/* ============================================================================
   VERROU — rendu en <span> avec image de fond

   Quatre feuilles imposent width/height/object-fit a « toute image du logo »
   (bh-mobile.css, bh-v3-mobile.css, le style injecte par bh-layout.js, et
   mobile-logo-fix.js en inline). Un verrou 128x30 force dans un carre etait
   recadre en son milieu : on ne lisait plus que « OOST ».

   Le verrou n'est donc plus un <img> : aucune de ces regles ne peut le
   toucher. Les valeurs ci-dessous ne sont qu'un filet de securite.
   ============================================================================ */
.bh-verrou {
  display: inline-block !important;
  flex: none !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  border-radius: 0 !important;
}
.mobile-logo { overflow: visible !important; }
/* Largeur nominale du verrou. .mobile-logo etant en flex:1 1 auto avec
   overflow:hidden, max-width et aspect-ratio suffisent a le faire rentrer :
   la hauteur suit la largeur, donc rien n'est jamais rogne. */
.mobile-logo .bh-verrou {
  width: 189px;
  height: auto;
  aspect-ratio: 189 / 42;
  max-width: 100%;
  min-width: 0;
  flex: 0 1 auto;
}
.sidebar-logo .bh-verrou { height: 38px !important; width: 148px !important; }

/* ============================================================================
   MOT-SYMBOLE EN TEXTE (sidebar desktop)

   Le verrou d'un seul tenant se faisait ecraser par les regles de largeur des
   feuilles mobiles. On reprend donc la structure d'origine, qui fonctionnait :
   une image carree + du texte HTML a cote. Le texte est ici en Marcellus,
   tres espace, avec la baseline calee sur la meme largeur.
   ============================================================================ */
.bh-mot {
  font-family: 'Marcellus', 'Instrument Serif', Georgia, serif;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bh-encre);
  white-space: nowrap;
  font-weight: 400;
}
.bh-baseline {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 7.5px;
  line-height: 1.2;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: var(--bh-t3);
  white-space: nowrap;
  margin-top: 3px;
  font-weight: 500;
}
/* Fond vert : on inverse */
.sidebar-logo.sur-vert .bh-mot { color: var(--bh-ivoire); }
.sidebar-logo.sur-vert .bh-baseline { color: rgba(242,234,218,.62); }

/* ============================================================================
   MONOGRAMME — carre a coins adoucis, jamais un cercle

   bh-theme-v3.css imposait border-radius:50% + object-fit:cover sur l'image
   de la sidebar : le cartouche carre etait recadre en cercle et les angles du
   filet interieur disparaissaient. Corrige a la source ; la regle ci-dessous
   est un filet de securite au cas ou une autre feuille reimposerait le cercle.
   ============================================================================ */
.sidebar-logo > img,
.sidebar-header .sidebar-logo > img,
html[data-theme-v3="1"] .sidebar .sidebar-logo > img {
  border-radius: 9px !important;
  object-fit: contain !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
}

/* ── Ecart monogramme / mot-symbole ───────────────────────────────────────
   Quand le logo est rendu en deux elements (monogramme + texte, cas des
   sous-comptes et de certaines pages), l'ecart vient du gap flex et non du
   trace SVG. On l'aligne sur la valeur du verrou. */
.mobile-logo { gap: 6px !important; }
.mobile-logo .mobile-logo-text { margin-left: 0 !important; padding-left: 0 !important; }

/* ============================================================================
   VERROU DANS L'EN-TETE MOBILE

   L'en-tete mobile est deja une rangee flex : conteneur gauche (statuts,
   informations, agence), logo, conteneur droit (synchro, notifications,
   recherche). .mobile-logo y est en flex:1 1 auto avec overflow:hidden.

   Il suffit donc que le verrou accepte de rétrecir : largeur nominale,
   max-width a 100 % et aspect-ratio pour que la hauteur suive. Sans
   aspect-ratio, la largeur se clampait mais la hauteur restait a 42 px et le
   mot-symbole se faisait rogner.

   Le gabarit des boutons est defini dans le bloc injecte par bh-layout.js,
   la ou ils sont crees.
   ============================================================================ */
.mobile-logo .bh-verrou {
  width: 189px;
  height: auto;
  aspect-ratio: 189 / 42;
  max-width: 100%;
  min-width: 0;
  flex: 0 1 auto;
}

/* ============================================================================
   BOUTONS DE L'EN-TETE MOBILE — un seul gabarit

   Mesures relevees sur le site (fenetre 453 px) avant correction :

     conteneur gauche  198 px, gap 6 px  : svc 32x42, informations 32x42,
                                           agence 32x42
     conteneur droit   198 px, gap 0 px  : synchro 32x42, notifications 32x42,
                                           recherche 30 px, ronde

   Trois ecarts expliquaient le desequilibre :
     1. le gap valait 6 px a gauche et 0 a droite ;
     2. la recherche vient de bh-global-search.js, qui lui donne 38x38 et un
        border-radius de 50 % — un cercle au milieu de carres arrondis ;
     3. les boutons faisaient 42 px de haut et non 32 : leurs conteneurs sont
        en align-items:stretch par defaut, ils s'etiraient donc a la hauteur
        du verrou.

   Les regles vivent ici plutot que dans le CSS injecte par bh-layout.js :
   ce fichier est versionne par hash, donc jamais servi depuis un cache
   obsolete, et il s'applique quel que soit le fichier qui a cree le bouton.
   ============================================================================ */
@media (max-width: 920px) {
  /* Les deux conteneurs cessent d'etirer leurs enfants et adoptent
     STRICTEMENT le meme ecart. Le groupe de gauche etait a 6 px et celui de
     droite a 0 : le conteneur gauche etait donc plus large, ce qui poussait
     le logo vers la droite. Meme valeur des deux cotes, et plus aucune marge
     sur les enfants : les deux groupes sont desormais identiques et le logo
     retrouve le centre. */
  .mobile-header > div {
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .mobile-header > div > * {
    margin: 0 !important;
  }

  .mobile-header #bh-mobile-svc,
  .mobile-header #bh-mobile-ann-btn,
  .mobile-header #agencySwitcherBtnMobile,
  .mobile-header #syncBtnMobile,
  .mobile-header #bh-mobile-notif-btn,
  .mobile-header .bhgs-trigger-mobile,
  .mobile-header [id^="bhgs-trigger"] {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    flex: none !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    gap: 0 !important;
  }

  /* Icones au meme corps de part et d'autre */
  .mobile-header #bh-mobile-svc svg,
  .mobile-header #bh-mobile-ann-btn svg,
  .mobile-header #agencySwitcherBtnMobile svg,
  .mobile-header #syncBtnMobile svg,
  .mobile-header #bh-mobile-notif-btn svg,
  .mobile-header .bhgs-trigger-mobile svg,
  .mobile-header #bh-mobile-svc i,
  .mobile-header #bh-mobile-ann-btn i,
  .mobile-header #syncBtnMobile i,
  .mobile-header #bh-mobile-notif-btn i {
    width: 16px !important;
    height: 16px !important;
    font-size: 15px !important;
    margin: 0 !important;
  }

  /* Les deux pastilles de statut tiennent dans le carre */
  .mobile-header #bh-mobile-svc > * { margin: 0 !important; gap: 3px !important; }

  /* Le verrou n'a pas besoin d'ecart : le mot-symbole est dans le trace */
  .mobile-header .mobile-logo { gap: 0 !important; }
}

/* ============================================================================
   EN-TETE MOBILE — dernier calque, specificite a ID

   Mesures relevees en console (fenetre 453 px) :

     zone gauche  gap 4 px : svc 32x32, informations 32x32 + marge droite 6 px,
                             agence 32x32   -> ecarts 4 px puis 10 px
     zone droite  gap 0 px : synchro 32x32, notifications 32x32,
                             recherche 30x32 -> ecarts 0 px

   Trois causes :
     1. #bh-mobile-ann-btn porte margin-right:6px, pose par une regle a ID
        (specificite 1,1,0) qui battait mon .mobile-header > div > *.
     2. gap valait 4 px a gauche et 0 a droite.
     3. la recherche vient de bh-global-search.js, qui l'injecte a l'execution.

   D'ou ce calque : on abandonne gap au profit de marges posees NOMMEMENT sur
   chaque bouton, avec la meme specificite a ID que les regles adverses. Rien
   ne peut plus l'emporter, quel que soit le fichier d'origine ou l'ordre
   d'injection.
   ============================================================================ */
@media (max-width: 920px) {
  /* Plus de gap : l'ecart est porte par les marges, seule maniere d'egaler
     la specificite des regles a ID qui posent des marges. */
  .mobile-header > div,
  .mobile-header > div[style] {
    gap: 0 !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Gabarit : 32x32 pour les six, y compris la recherche */
  .mobile-header #bh-mobile-svc,
  .mobile-header #bh-mobile-ann-btn,
  .mobile-header #agencySwitcherBtnMobile,
  .mobile-header #syncBtnMobile,
  .mobile-header #bh-mobile-notif-btn,
  .mobile-header .bhgs-trigger-mobile,
  .mobile-header .bhgs-trigger-mobile.haptic-enabled,
  .mobile-header [class*="bhgs-trigger"] {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    border-width: 1px !important;
    box-sizing: border-box !important;
    flex: 0 0 32px !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
  }

  /* Premier de chaque groupe : aucune marge a gauche */
  .mobile-header #bh-mobile-svc,
  .mobile-header #syncBtnMobile {
    margin: 0 !important;
  }

  /* Suivants : le meme ecart de 4 px, des deux cotes */
  .mobile-header #bh-mobile-ann-btn,
  .mobile-header #agencySwitcherBtnMobile,
  .mobile-header #bh-mobile-notif-btn,
  .mobile-header .bhgs-trigger-mobile,
  .mobile-header .bhgs-trigger-mobile.haptic-enabled,
  .mobile-header [class*="bhgs-trigger"] {
    margin: 0 0 0 4px !important;
  }
}

/* ============================================================================
   PAGES PUBLIQUES — logo et mot-symbole

   index, login, register, cgv, mentions legales, blog, tarifs... portaient
   soit un PNG en base64, soit /images/logo.png, et un mot-symbole en texte
   bicolore (« Boosting » + « host » en vert). Tout passe au monogramme carre
   et aux capitales espacees de l'identite.
   ============================================================================ */

/* Les conteneurs de logo etaient prevus pour une image ronde recadree :
   un cartouche carre ne doit etre ni rogne ni arrondi en cercle. */
.logo-icon,
.hero-logo-icon,
.brand-logo,
.logo-link .logo-icon {
  border-radius: 9px !important;
  overflow: visible !important;
}
.logo-icon img,
.hero-logo-icon img,
.brand-logo img,
.brand-logo-img {
  object-fit: contain !important;
  border-radius: 9px !important;
}

/* Mot-symbole des en-tetes publics : meme graisse et meme approche que le
   verrou, pour que le texte et l'image racontent la meme chose. */
.logo-link .bh-mot,
.brand .bh-mot,
header .bh-mot {
  font-size: 17px;
  letter-spacing: .15em;
}
@media (max-width: 640px) {
  .logo-link .bh-mot,
  .brand .bh-mot,
  header .bh-mot { font-size: 14px; letter-spacing: .12em; }
}