/* =========================================================
   fond-modele.css
   BRVMH-FOND-MODELE-V3

   Le fond du modele, la barre du bas et la bulle, en valeurs
   litterales. Aucune variable, aucun attribut data-teinte,
   aucune autre feuille necessaire : il suffit que le body
   porte class="rv".

   A CHARGER EN DERNIER, apres toutes les autres feuilles et
   apres le bloc <style> de la page.

   Les selecteurs de la barre visent .bnav et .bnav-item,
   ceux du modele — le balisage de la page a ete converti.

   Ce qui change par rapport au modele d'origine :

   1. LES ANCRAGES SONT RAPPROCHES DU CENTRE
      Le modele ancre ses quatre taches aux coins : 6%, 98%,
      88%, 4%. Sur un ecran large elles restent aux
      extremites et tout le centre — la ou se trouve la
      colonne — reste noir. Elles passent a 25%, 75%, 70%,
      30%, avec des rayons elargis.

   2. LA COULEUR DE BASE EST ECLAIRCIE
      #171432 au lieu de #0a0a12 : un violet tres sombre
      plutot qu'un quasi-noir. C'est lui qu'on voit la ou les
      nappes ne portent plus, en bas des pages longues.

   3. LES DEUX NAPPES SONT A PLEINE OPACITE
      1 et .95 au lieu de .95 et .684.

   Couleurs : violet #9A6EFF et #A570F0 en haut,
   bleu marine #2E42B8 et #3A4FA0 en bas.
   ========================================================= */

/* Le body reste transparent : ce sont les deux nappes qui
   peignent. Cette couleur est la base sous elles. */
body.rv {
  background-image: none;
  background-color: #0a0a12;
  isolation: isolate;
}

/* La premiere nappe : forte, en haut, sur 74 % de la hauteur
   de la fenetre. Un masque l'eteint progressivement vers le
   bas, un flou de 56 px fond les deux taches l'une dans
   l'autre. */
body.rv::before {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  height: 74vh;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(150% 100% at 25% -10%, #9A6EFF 0%, transparent 64%),
    radial-gradient(150% 100% at 75% -16%, #A570F0 0%, transparent 62%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .75) 52%, rgba(0, 0, 0, .28) 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .75) 52%, rgba(0, 0, 0, .28) 100%);
  filter: blur(56px) saturate(126%);
}

/* La seconde nappe : plus diffuse, sur TOUTE la hauteur de la
   fenetre. C'est elle qui porte la couleur jusqu'en bas —
   sans elle la page devient noire au tiers de l'ecran. */
body.rv::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .6;
  background:
    radial-gradient(120% 80% at 70% 35%, #3A4FA0 0%, transparent 66%),
    radial-gradient(120% 80% at 30% 75%, #2E42B8 0%, transparent 68%);
  filter: blur(80px) saturate(120%);
}

/* Tout le contenu passe devant les nappes. */
body.rv > * {
  position: relative;
  z-index: 1;
}

/* =========================================================
   LA BARRE DU BAS
   Pilule centree, valeurs relevees sur .bnav du parrainage.
   ========================================================= */
body.rv .bnav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 18px !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  /* Six entrees : la barre doit pouvoir s'etendre, sans
     jamais depasser l'ecran. */
  max-width: calc(100vw - 24px) !important;
  display: flex !important;
  align-items: center;
  gap: 5px;
  padding: 7px 9px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(10, 10, 14, .9) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: none !important;
  z-index: 1000;
}

/* Les six entrees : un rond par icone. */
body.rv .bnav-item {
  position: relative;
  width: 52px; height: 50px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: none;
  color: rgba(255, 255, 255, .72);
  font-size: 21px;
  text-decoration: none;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
body.rv .bnav-item:hover { color: #fff; }
body.rv .bnav-item.on {
  color: #fff;
  background: rgba(255, 255, 255, .13);
}

/* Le libelle est masque : seule l'icone se voit, comme sur
   le parrainage et le support. */
body.rv .bnav-item > span { display: none; }

/* La pastille doree des entrees a notification. */
body.rv .bnav-soon {
  display: block !important;
  position: absolute; top: 8px; right: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #F0B840;
}

/* =========================================================
   LA BULLE DE DISCUSSION
   Au bord droit de la colonne, pas au bord de l'ecran.
   ========================================================= */
body.rv .bulle {
  position: fixed;
  bottom: 82px;
  right: calc(50% - 240px + 14px);
  left: auto;
  width: 52px; height: 52px;
  border: 0; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 21px; color: #fff;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  z-index: 1700;
}
@media (max-width: 520px) {
  body.rv .bulle { right: 14px; }
}

/* La pastille de la cloche : en position absolue dans le coin,
   sinon le chiffre se pose sous l icone et deforme le rond.
   Valeurs relevees sur .m-cloche-badge du parrainage. */
body.rv .m-cloche { position: relative; }
body.rv .m-cloche-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px;
  background: #f87171; color: #fff;
  font-size: 10px; font-weight: 600; line-height: 17px;
  box-shadow: 0 0 0 2px rgba(12, 12, 14, .9);
}
/* Une pastille vide ou a zero ne se montre pas. */
body.rv .m-cloche-badge:empty { display: none; }

/* La pastille de notification : un point, pas un compteur.
   Regle copiee de page-parrainage-v3.css, lignes 1192 a 1203. */
:where(body.rv) .m-cloche-badge {
  top: 1px !important; right: 2px !important;
  width: 8px !important; height: 8px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  background: #ff5a5a !important;
}
:where(body.rv) .m-head-badge { display: none !important; }

/* Les panneaux de la cloche et du profil : masques par defaut,
   reveles par la classe on que posent clocheToggle() et
   toggleProfilMenu(). Valeurs copiees de pages-communes.css,
   lignes 418 a 431. */
body.rv .cloche-menu, body.rv .profil-menu {
  display: none;
  position: fixed; z-index: 1101;
  top: 62px; bottom: auto; left: auto; right: 14px;
  width: min(330px, calc(100vw - 32px));
  max-height: min(520px, calc(100vh - 150px));
  overflow-y: auto;
  background: rgba(20, 20, 26, .98);
  backdrop-filter: blur(26px);
  border: 0; border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 44px rgba(0, 0, 0, .6);
  padding: 12px;
  text-align: left;
}
body.rv .cloche-menu.on, body.rv .profil-menu.on { display: block; }

/* La bulle de discussion : valeurs copiees de support.html,
   lignes 2782 a 2790. Cette regle vient apres la precedente,
   donc elle l emporte. */
body.rv .ia-bulle, body.rv #ia-bulle {
  position: fixed; right: 16px; bottom: 118px; z-index: 9998;
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background-color: #6C3CE1;
  background-image: linear-gradient(135deg, #6C3CE1, #5B30D0);
  box-shadow: 0 8px 28px rgba(108, 60, 225, .42);
  color: #fff; font-size: 24px; transition: transform .2s;
}
body.rv .ia-bulle:hover { transform: scale(1.07); }
body.rv .ia-bulle.ouvert { transform: scale(.9); opacity: .85; }
@media (max-width: 520px) {
  body.rv .ia-bulle { bottom: 118px; right: 14px; width: 50px; height: 50px; font-size: 21px; }
}

/* La bulle de discussion : valeurs copiees de support.html,
   lignes 2782 a 2790. Cette regle vient apres la precedente,
   donc elle l emporte. */
body.rv .ia-bulle, body.rv #ia-bulle {
  position: fixed; right: 16px; bottom: 118px; z-index: 9998;
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background-color: #6C3CE1;
  background-image: linear-gradient(135deg, #6C3CE1, #5B30D0);
  box-shadow: 0 8px 28px rgba(108, 60, 225, .42);
  color: #fff; font-size: 24px; transition: transform .2s;
}
body.rv .ia-bulle:hover { transform: scale(1.07); }
body.rv .ia-bulle.ouvert { transform: scale(.9); opacity: .85; }
@media (max-width: 520px) {
  body.rv .ia-bulle { bottom: 118px; right: 14px; width: 50px; height: 50px; font-size: 21px; }
}

/* La bulle de la maquette prend les valeurs de celle du
   support (support.html, lignes 2782 a 2790). L assistant du
   parrainage reste masque : il ferait double emploi. */
body.rv .bulle {
  position: fixed; right: 16px; bottom: 118px; z-index: 9998;
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background-color: #6C3CE1;
  background-image: linear-gradient(135deg, #6C3CE1, #5B30D0);
  box-shadow: 0 8px 28px rgba(108, 60, 225, .42);
  color: #fff; font-size: 24px; transition: transform .2s;
}
body.rv .bulle:hover { transform: scale(1.07); }

/* La bulle se cale sur le bord droit de la colonne, pas sur
   celui de l ecran. Valeur relevee sur #ia-bulle du
   parrainage, page-parrainage-v3.css ligne 1844. */
body.rv .bulle { right: calc(50% - 240px + 14px); }
@media (max-width: 520px) { body.rv .bulle { right: 14px; } }

/* L assistant reprend sa place : c est lui qui porte le
   panneau, les suggestions et le champ de saisie. La bulle
   decorative de la maquette, un simple div sans onclick,
   est masquee — elle faisait double emploi. */
body.rv .bulle { display: none; }


/* ===== BRVMH-ASSISTANT-COPIE : debut ===== */
/* Copie litterale des lignes 1611 a 1874 de
   page-parrainage-v3.css : tout le traitement de
   l assistant. Aucune valeur retapee. */
:where(body.rv) #ia-box {
  /* Centre par les marges plutot que par une transformation :
     le script de l'assistant pose parfois ses propres valeurs
     de position, et une transformation se laisse plus
     facilement ecraser qu'un couple gauche/droite a zero. */
  left: 0 !important;
  right: 0 !important;
  margin-inline: auto !important;
  /* Elle s'arrete au-dessus de la bulle, qui sert de bouton
     de fermeture : posee jusqu'en bas, elle la recouvrait et
     il n'y avait plus moyen de refermer. */
  bottom: var(--su-bnav) !important;
  top: auto !important;
  transform: none !important;
  width: min(var(--su-fen), calc(100vw - 24px)) !important;
  max-width: min(var(--su-fen), calc(100vw - 24px)) !important;
  height: auto !important;
  max-height: calc(100dvh - var(--su-bnav)) !important;
  /* Le plafond laissait la place, mais le fil ne la remplissait
     pas : le bloc restait court. Le plancher la lui fait prendre,
     et comme bottom est fixe, il ne peut grandir que vers le haut. */
  min-height: min(680px, calc(100dvh - var(--su-bnav) - 20px)) !important;
  border: 0 !important;
  /* Arrondie sur les quatre cotes, comme les deux panneaux du
     haut : la meme famille de blocs. */
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .09) !important;
  -webkit-backdrop-filter: blur(34px) saturate(150%);
  backdrop-filter: blur(34px) saturate(150%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5),
              0 0 0 100vmax rgba(10, 8, 20, .74) !important;
  overflow: hidden !important;
  z-index: 1600 !important;
}
/* Aucun fond herite ne subsiste dans la fenetre. Le style
   d'origine est clair, et il porte des fonds blancs sur des
   conteneurs que je ne peux pas tous nommer — la zone de
   saisie en avait un, invisible dans mes essais et bien
   visible a l'ecran.

   Les regles qui suivent reposent les fonds utiles : elles
   citent une classe, donc elles l'emportent sur celle-ci,
   quel que soit l'ordre. */
:where(body.rv) #ia-box *,
:where(body.rv) #ia-box *::before,
:where(body.rv) #ia-box *::after {
  background-color: transparent !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
}

/* --- Le contenu de la discussion ---
   Il gardait la grammaire d'origine : bulle blanche opaque,
   texte centre, suggestions violettes sur fond violet. Rien
   n'y etait lisible. On le ramene au modele : aplats blancs
   translucides, texte a gauche, blanc plein.

   Les selecteurs sont forces : ce style est fabrique en
   JavaScript et pose apres la feuille. */

/* L'en-tete : titre et sous-titre l'un sous l'autre, a
   gauche. En deux colonnes, les deux se coupaient. */
:where(body.rv) #ia-box .ia-h {
  display: block !important;
  border: 0 !important;
  background: none !important;
  padding: 16px 16px 12px !important;
  text-align: center !important;
}
:where(body.rv) #ia-box .ia-h-t {
  display: block !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #fff !important;
  margin: 0 0 3px !important;
}
:where(body.rv) #ia-box .ia-h-s,
:where(body.rv) #ia-box .ia-h-s * {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, .58) !important;
  margin: 0 !important;
  max-width: none !important;
}
:where(body.rv) #ia-box .ia-pt,
:where(body.rv) #ia-box .ia-pts { background-color: rgba(255, 255, 255, .5) !important; }

/* Le fil */
:where(body.rv) #ia-box .ia-fil {
  background: none !important;
  padding: 0 16px 12px !important;
  gap: 9px !important;
  align-items: center !important;
  text-align: center !important;
}

/* Un message : aplat translucide, texte blanc, aligne a
   gauche. La bulle blanche opaque cassait la page. */
:where(body.rv) #ia-box .ia-m {
  max-width: 100% !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 14px !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  text-align: center !important;
  color: #fff !important;
  background-color: rgba(255, 255, 255, .13) !important;
}
/* Le message du membre porte la teinte et se range a droite. */
:where(body.rv) #ia-box .ia-m.moi,
:where(body.rv) #ia-box .ia-m.user,
:where(body.rv) #ia-box .ia-m.membre {
  align-self: flex-end !important;
  color: #fff !important;
  background-color: color-mix(in srgb, var(--bh-a) 46%, #191430) !important;
}

/* Les suggestions : du blanc lisible, pas du violet sur
   violet. */
:where(body.rv) #ia-box .ia-sug,
:where(body.rv) #ia-box .ia-s {
  display: flex !important;
  flex-direction: column;
  /* Le conteneur lui-meme doit se centrer dans la colonne du
     fil : sans cette ligne, il se calait a gauche et les
     pastilles paraissaient decalees malgre leur propre
     centrage. */
  align-self: center !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 16px 12px !important;
  background: none !important;
  text-align: center !important;
}
:where(body.rv) #ia-box .ia-sug button,
:where(body.rv) #ia-box .ia-s button,
:where(body.rv) #ia-box .ia-sug a {
  /* Chaque pastille se dimensionne a son texte et se centre,
     au lieu de s'etirer sur toute la largeur. */
  width: auto !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  padding: 11px 18px !important;
  border: 0 !important;
  border-radius: var(--bh-pill) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  cursor: pointer;
  color: #fff !important;
  background-color: rgba(255, 255, 255, .15) !important;
  transition: background .18s ease;
}
:where(body.rv) #ia-box .ia-sug button:hover,
:where(body.rv) #ia-box .ia-s button:hover {
  background-color: rgba(255, 255, 255, .19) !important;
}

/* Les points d'attente */
:where(body.rv) #ia-box .ia-pt,
:where(body.rv) #ia-box .ia-pts { background: rgba(255, 255, 255, .5) !important; }

/* La saisie et le pied */
:where(body.rv) #ia-box .ia-saisie {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  border: 0 !important;
  background: none !important;
  padding: 0 16px 10px !important;
}
:where(body.rv) #ia-box .ia-i {
  flex: 1 !important;
  border: 0 !important;
  border-radius: var(--bh-pill) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  background-color: rgba(255, 255, 255, .10) !important;
  color: #fff !important;
}
:where(body.rv) #ia-box .ia-i::placeholder { color: rgba(255, 255, 255, .45) !important; }
:where(body.rv) #ia-box .ia-env {
  flex-shrink: 0;
  width: 44px !important; height: 44px !important;
  border: 0 !important; border-radius: 50% !important;
  color: #fff !important;
  background-image: linear-gradient(135deg, var(--bh-a), var(--bh-b)) !important;
}
:where(body.rv) #ia-box .ia-pied,
:where(body.rv) #ia-box .ia-pied * {
  border: 0 !important;
  padding: 0;
  font-size: 10.5px !important;
  line-height: 1.55 !important;
  text-align: center !important;
  color: rgba(255, 255, 255, .40) !important;
  /* Le lien ne doit jamais se couper en deux morceaux de part
     et d'autre d'un retour a la ligne. */
  overflow-wrap: normal;
  word-break: keep-all;
}
:where(body.rv) #ia-box .ia-pied { padding: 0 16px 14px !important; }
:where(body.rv) #ia-box .ia-pied a,
:where(body.rv) #ia-box .ia-pied a * {
  /* Sur sa propre ligne, entier : « Ouvrir une demande »
     passait a cheval sur deux lignes, coupe en plein milieu. */
  display: block !important;
  width: fit-content;
  margin: 6px auto 0 !important;
  padding: 7px 16px !important;
  border-radius: var(--bh-pill);
  font-size: 11.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  color: var(--bh-or) !important;
  background: rgba(240, 184, 64, .14) !important;
  transition: background .18s ease;
}
:where(body.rv) #ia-box .ia-pied a:hover {
  background: rgba(240, 184, 64, .24) !important;
}

/* La bulle reste ronde, au-dessus de la barre du bas. */
:where(body.rv) #ia-bulle {
  bottom: calc(var(--su-bnav) - 10px) !important;
  /* Au bord droit de la colonne, pas au bord de l'ecran : sur
     un large moniteur elle partait se perdre a l'autre bout
     de la fenetre. */
  right: calc(50% - var(--bh-col) / 2 + 14px) !important;
  left: auto !important;
  /* Au-dessus du voile de la fenetre : sinon elle s'assombrit
     avec le reste de la page et on ne la retrouve plus. */
  z-index: 1700 !important;
}
@media (max-width: 520px) {
  :where(body.rv) #ia-bulle { right: 14px !important; }
  /* Sur telephone la fenetre prenait presque tout l'ecran :
     on la ramene a une hauteur ou la page reste visible
     derriere. */
  :where(body.rv) #ia-box {
    width: min(300px, calc(100vw - 56px)) !important;
    max-width: min(300px, calc(100vw - 56px)) !important;
    max-height: calc(100dvh - var(--su-bnav)) !important;
  /* Le plafond laissait la place, mais le fil ne la remplissait
     pas : le bloc restait court. Le plancher la lui fait prendre,
     et comme bottom est fixe, il ne peut grandir que vers le haut. */
  min-height: min(680px, calc(100dvh - var(--su-bnav) - 20px)) !important;
    bottom: var(--su-bnav) !important;
    border-radius: 20px !important;
  }
  :where(body.rv) #ia-box .ia-h { padding: 10px 12px 6px !important; }
  :where(body.rv) #ia-box .ia-h-t { font-size: 13.5px !important; }
  :where(body.rv) #ia-box .ia-h-s { font-size: 11px !important; }
  :where(body.rv) #ia-box .ia-fil { padding: 0 12px 8px !important; gap: 6px !important; }
  :where(body.rv) #ia-box .ia-saisie { padding: 0 12px 8px !important; }
  :where(body.rv) #ia-box .ia-i { padding: 10px 14px !important; font-size: 13px !important; }
  :where(body.rv) #ia-box .ia-env { width: 38px !important; height: 38px !important; }
  :where(body.rv) #ia-box .ia-pied { font-size: 9px !important; padding: 0 12px 9px !important; }
  :where(body.rv) #ia-box .ia-pied a { font-size: 11px !important; padding: 6px 14px !important; }
  :where(body.rv) #ia-box .ia-m { font-size: 12px !important; padding: 9px 11px !important; line-height: 1.5 !important; }
  :where(body.rv) #ia-box .ia-sug button,
  :where(body.rv) #ia-box .ia-s button { font-size: 11.5px !important; padding: 8px 13px !important; }
}
/* ===== BRVMH-ASSISTANT-COPIE : fin ===== */

/* Les variables dont dependent les positions copiees du
   parrainage. Sans elles, calc(var(--su-bnav) - 10px) echoue
   et la bulle part hors de l ecran.
   Valeurs de page-parrainage-v3.css, lignes 45 a 47. */
body.rv {
  --bh-col:  480px;
  --su-bnav: 92px;
  --su-fen:  340px;

  /* Les jetons dont dependent les regles copiees ci-dessus.
     Sans eux, var(--bh-a) et var(--bh-or) sont vides : la
     declaration entiere devient invalide et le bouton d envoi
     perd son rond, le lien son ambre, la pilule son arrondi.
     Valeurs de page-parrainage-v3.css, lignes 35 a 43. */
  --bh-or:   var(--or,      #F0B840);
  /* Valeurs relevees sur le support : la page ne charge pas le
     design system, le repli du parrainage donnait un violet
     qui n est pas celui du modele. */
  --bh-a:    var(--brand-a, #e1379e);
  --bh-b:    var(--brand-b, #2f3cf2);
  --bh-pill: 999px;
}

/* Ascenseur du fil : le style natif de Chrome ressort en blanc
   sur le verre sombre. Valeurs de .pa-tw, page-parrainage-v3.css
   lignes 984 a 987. */
:where(body.rv) #ia-box .ia-fil {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,.2) transparent !important;
}
:where(body.rv) #ia-box .ia-fil::-webkit-scrollbar { width: 6px; }
:where(body.rv) #ia-box .ia-fil::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255,255,255,.2); }
:where(body.rv) #ia-box .ia-fil::-webkit-scrollbar-track { background: transparent; }

/* La bulle, relevee sur parrainage.html : degrade a 140 degres,
   44 px, ombre portee, aucune bordure. Les jetons --bh-a et
   --bh-b sont ceux du bouton d envoi : les deux resteront
   accordes si la teinte du modele change. */
:where(body.rv) #ia-bulle {
  width: 44px !important;
  height: 44px !important;
  font-size: 19px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  background-image: linear-gradient(140deg, var(--bh-a), var(--bh-b)) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5) !important;
}

/* BRVMH-PANNEAUX-HABILLAGE-V1
   Habillage des panneaux de la cloche et du profil, repris tel
   quel de page-parrainage-v3.css. Le balisage vient de la meme
   page ; sans ces regles, les panneaux s ouvrent nus.
   Place en fin de feuille : a specificite egale, la derniere
   regle gagne. */

/* La pastille de notification : un point, pas un compteur. */
:where(body.rv) .m-cloche-badge {
  top: 1px !important; right: 2px !important;
  width: 8px !important; height: 8px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  background: #ff5a5a !important;
}

:where(body.rv) .profil-menu,
:where(body.rv) .cloche-menu,
:where(body.rv) .dropdown-menu { visibility: visible; }

/* =========================================================
   14. LA CLOCHE, LE PROFIL ET LA DISCUSSION
   ---------------------------------------------------------
   Les trois etaient des menus deroulants accroches a la barre
   de bureau — un motif qui n'existe pas dans le modele, et
   qui n'a plus de sens depuis que cette barre est reduite a
   rien.

   Ils deviennent des feuilles montantes, comme la fenetre de
   detail : poignee en haut, coins arrondis, aplat opaque.
   Une feuille qui recouvre doit couvrir.
   ========================================================= */

/* --- Le socle commun aux deux ---
   Sous leur icone, centres dans la colonne, et arrondis sur
   les quatre cotes : ce sont des panneaux poses sous la barre
   du haut, pas des feuilles montees du bas. */
:where(body.rv) .cloche-menu,
:where(body.rv) .profil-menu {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  /* Juste sous la barre du haut, qui fait 42 px plus ses
     marges. */
  top: 74px !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: min(var(--su-fen), calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 108px) !important;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 14px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 22px !important;
  /* La meme matiere que les cartes de la page : blanc
     translucide sur un flou. Le voile derriere assombrit
     assez pour que rien ne se lise au travers. */
  background: rgba(255, 255, 255, .09) !important;
  -webkit-backdrop-filter: blur(34px) saturate(150%);
  backdrop-filter: blur(34px) saturate(150%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5),
              0 0 0 100vmax rgba(10, 8, 20, .74) !important;
  z-index: 1600 !important;
}

:where(body.rv) .cloche-menu * ,
:where(body.rv) .profil-menu * { box-sizing: border-box; max-width: 100%; min-width: 0; }

/* Une fleche vers l'icone qui les ouvre, comme un panneau
   accroche a son bouton. */
:where(body.rv) .cloche-menu::before,
:where(body.rv) .profil-menu::before {
  content: '';
  position: absolute;
  top: -7px;
  width: 14px; height: 14px;
  transform: rotate(45deg);
  border-radius: 3px;
  background: rgba(255, 255, 255, .12);
}

/* La cloche est le troisieme rond, l'avatar le quatrieme :
   la fleche se place sous chacun. */
:where(body.rv) .cloche-menu::before { right: 76px; }

:where(body.rv) .profil-menu::before { right: 24px; }

/* Elles n'apparaissent qu'ouvertes — c'est le script qui pose
   la classe. */
:where(body.rv) .cloche-menu { display: none !important; }

:where(body.rv) .cloche-menu.on { display: block !important; }

:where(body.rv) .profil-menu { display: none !important; }

:where(body.rv) .profil-menu.open { display: block !important; }

/* --- La cloche --- */
:where(body.rv) .cloche-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding: 0 2px;
  border: 0 !important;
}

:where(body.rv) .cloche-hd b {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
}

:where(body.rv) .cloche-hd button {
  padding: 8px 14px;
  border: 0;
  border-radius: var(--bh-pill);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 400;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, .12);
}

:where(body.rv) .cloche-hd button:hover { background: rgba(255, 255, 255, .19); }

:where(body.rv) .cloche-body { padding: 0 !important; }

:where(body.rv) .cloche-vide {
  padding: 30px 14px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, .45);
}

:where(body.rv) .cloche-vide i {
  display: block;
  font-size: 26px;
  margin-bottom: 10px;
  opacity: .5;
}

:where(body.rv) .cloche-ft {
  margin-top: 12px;
  padding-top: 12px;
  border: 0 !important;
  text-align: center;
}

:where(body.rv) .cloche-ft a {
  display: block;
  padding: 13px;
  border-radius: var(--bh-pill);
  font-size: 13.5px;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, .12);
}

:where(body.rv) .cloche-ft a:hover { background: rgba(255, 255, 255, .19); }

/* --- Le profil --- */
:where(body.rv) .profil-hd {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 4px 2px 16px !important;
  border: 0 !important;
}

:where(body.rv) .profil-hd-av {
  flex-shrink: 0;
  width: 52px !important; height: 52px !important;
  display: grid !important; place-items: center;
  border-radius: 50% !important;
  font-size: 19px; font-weight: 500;
  color: #fff !important;
  background: linear-gradient(135deg, var(--bh-a), var(--bh-b)) !important;
}

:where(body.rv) .profil-hd-info { min-width: 0; }

:where(body.rv) .profil-hd-info .name {
  font-size: 17px; font-weight: 500; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

:where(body.rv) .profil-hd-info .email {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .55);
  margin: 2px 0 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

:where(body.rv) .profil-plan {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px !important;
  border: 0 !important;
  border-radius: var(--bh-pill) !important;
  font-size: 11.5px; font-weight: 400;
}

:where(body.rv) .profil-plan.plan-free {
  color: rgba(255, 255, 255, .8) !important;
  background: rgba(255, 255, 255, .12) !important;
}

:where(body.rv) .profil-plan.plan-invest {
  color: #fff !important;
  background: linear-gradient(135deg, var(--bh-a), var(--bh-b)) !important;
}

:where(body.rv) .profil-plan.plan-elite {
  color: #1a1207 !important;
  background: var(--bh-or) !important;
}

/* Le separateur devient de l'air : le modele ne trace pas de
   traits entre les lignes. */
/* --- Les entrees, en tuiles ---
   Le panneau devient une grille de trois colonnes. L'en-tete
   la traverse, les separateurs disparaissent, et chaque
   entree devient un carre arrondi surmonte de son libelle —
   la meme forme que les tuiles de sujet de la page.

   La deconnexion reste une ligne pleine largeur : c'est la
   seule action sans retour, et la ranger dans la grille
   reviendrait a la banaliser.
   ========================================================= */
:where(body.rv) .profil-menu.open {
  /* Sur la classe ouverte, jamais sur le panneau lui-meme :
     un display pose sans condition annule la regle qui le
     garde ferme. */
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 8px;
  align-content: start;
}

:where(body.rv) .profil-hd { grid-column: 1 / -1; }

:where(body.rv) .profil-item {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  color: rgba(255, 255, 255, .92) !important;
}

:where(body.rv) .profil-item i {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 15px;
  font-size: 20px;
  color: #fff;
  background: rgba(255, 255, 255, .14) !important;
  transition: background .18s ease, transform .18s ease;
}

:where(body.rv) .profil-item:hover   { background: none !important; }

:where(body.rv) .profil-item:hover i { background: rgba(255, 255, 255, .22) !important; }

:where(body.rv) .profil-item:active i { transform: scale(.95); }

/* La deconnexion : une ligne, en bas, a part. */
:where(body.rv) .profil-item.danger {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: center;
  gap: 9px;
  margin-top: 2px !important;
  padding: 12px !important;
  border-radius: var(--bh-pill) !important;
  font-size: 13px;
  color: rgba(255, 140, 130, .92) !important;
  background: rgba(224, 72, 60, .16) !important;
}

:where(body.rv) .profil-item.danger i {
  width: auto;
  aspect-ratio: auto;
  border-radius: 0;
  font-size: 16px;
  background: none !important;
}

:where(body.rv) .profil-item.danger:hover {
  color: #ff9d94 !important;
  background: rgba(224, 72, 60, .25) !important;
}

:where(body.rv) .profil-item.danger:hover i { background: none !important; }

/* L'en-tete se resserre : la grille prend la place gagnee. */
:where(body.rv) .profil-hd { padding: 2px 2px 4px !important; gap: 11px; }

:where(body.rv) .profil-hd-av { width: 42px !important; height: 42px !important; font-size: 16px; }

:where(body.rv) .profil-hd-info .name { font-size: 15px; }

:where(body.rv) .profil-hd-info .email { font-size: 11px; margin: 2px 0 5px; }

@media (max-width: 430px) {
  
    :where(body.rv) .cloche-menu,
    :where(body.rv) .profil-menu { top: 68px !important; }
  
    :where(body.rv) .cloche-menu::before { right: 68px; }
  
    :where(body.rv) .profil-menu::before { right: 18px; }
}

:where(body.rv) .cloche-dd,
:where(body.rv) .profil-dd,
:where(body.rv) .nav-dropdown { z-index: 1100 !important; }

:where(body.rv) .cloche-menu,
:where(body.rv) .profil-menu,
:where(body.rv) .dropdown-menu { z-index: 1101 !important; }

/* BRVMH-PANNEAUX-HABILLAGE-V2
   Habillage des panneaux de la cloche et du profil, repris tel
   quel de page-parrainage-v3.css. Le balisage vient de la meme
   page ; sans ces regles, les panneaux s ouvrent nus.
   Place en fin de feuille : a specificite egale, la derniere
   regle gagne. */

/* La pastille de notification : un point, pas un compteur. */
:where(body.rv) .m-cloche-badge {
  top: 1px !important; right: 2px !important;
  width: 8px !important; height: 8px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  background: #ff5a5a !important;
}

:where(body.rv) .profil-menu,
:where(body.rv) .cloche-menu,
:where(body.rv) .dropdown-menu { visibility: visible; }

/* =========================================================
   14. LA CLOCHE, LE PROFIL ET LA DISCUSSION
   ---------------------------------------------------------
   Les trois etaient des menus deroulants accroches a la barre
   de bureau — un motif qui n'existe pas dans le modele, et
   qui n'a plus de sens depuis que cette barre est reduite a
   rien.

   Ils deviennent des feuilles montantes, comme la fenetre de
   detail : poignee en haut, coins arrondis, aplat opaque.
   Une feuille qui recouvre doit couvrir.
   ========================================================= */

/* --- Le socle commun aux deux ---
   Sous leur icone, centres dans la colonne, et arrondis sur
   les quatre cotes : ce sont des panneaux poses sous la barre
   du haut, pas des feuilles montees du bas. */
:where(body.rv) .cloche-menu,
:where(body.rv) .profil-menu {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  /* Juste sous la barre du haut, qui fait 42 px plus ses
     marges. */
  top: 74px !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: min(var(--su-fen), calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 108px) !important;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 14px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 22px !important;
  /* La meme matiere que les cartes de la page : blanc
     translucide sur un flou. Le voile derriere assombrit
     assez pour que rien ne se lise au travers. */
  background: rgba(255, 255, 255, .09) !important;
  -webkit-backdrop-filter: blur(34px) saturate(150%);
  backdrop-filter: blur(34px) saturate(150%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5),
              0 0 0 100vmax rgba(10, 8, 20, .74) !important;
  z-index: 1600 !important;
}

:where(body.rv) .cloche-menu * ,
:where(body.rv) .profil-menu * { box-sizing: border-box; max-width: 100%; min-width: 0; }

/* Une fleche vers l'icone qui les ouvre, comme un panneau
   accroche a son bouton. */
:where(body.rv) .cloche-menu::before,
:where(body.rv) .profil-menu::before {
  content: '';
  position: absolute;
  top: -7px;
  width: 14px; height: 14px;
  transform: rotate(45deg);
  border-radius: 3px;
  background: rgba(255, 255, 255, .12);
}

/* La cloche est le troisieme rond, l'avatar le quatrieme :
   la fleche se place sous chacun. */
:where(body.rv) .cloche-menu::before { right: 76px; }

:where(body.rv) .profil-menu::before { right: 24px; }

/* Elles n'apparaissent qu'ouvertes — c'est le script qui pose
   la classe. */
:where(body.rv) .cloche-menu { display: none !important; }

:where(body.rv) .cloche-menu.on { display: block !important; }

:where(body.rv) .profil-menu { display: none !important; }

:where(body.rv) .profil-menu.open { display: block !important; }

/* --- La cloche --- */
:where(body.rv) .cloche-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding: 0 2px;
  border: 0 !important;
}

:where(body.rv) .cloche-hd b {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
}

:where(body.rv) .cloche-hd button {
  padding: 8px 14px;
  border: 0;
  border-radius: var(--bh-pill);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 400;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, .12);
}

:where(body.rv) .cloche-hd button:hover { background: rgba(255, 255, 255, .19); }

:where(body.rv) .cloche-body { padding: 0 !important; }

/* Une notification : rond a gauche, texte au centre, date a
   droite — la ligne de liste du modele. */
:where(body.rv) .cloche-n {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: var(--bh-r-sm) !important;
  background: rgba(255, 255, 255, .10) !important;
  text-align: left;
}

:where(body.rv) .cloche-n + .cloche-n { margin-top: 8px; }

:where(body.rv) .cloche-n:hover { background: rgba(255, 255, 255, .18) !important; }

:where(body.rv) .cloche-n-ic {
  flex-shrink: 0;
  width: 38px !important; height: 38px !important;
  display: grid !important; place-items: center;
  border-radius: 50% !important;
  font-size: 17px;
  color: #fff !important;
  background: linear-gradient(135deg, var(--bh-a), var(--bh-b)) !important;
}

:where(body.rv) .cloche-n-txt { flex: 1; min-width: 0; }

:where(body.rv) .cloche-n-titre {
  font-size: 14px; font-weight: 500; color: #fff;
  margin-bottom: 3px;
}

:where(body.rv) .cloche-n-desc {
  font-size: 12.5px; line-height: 1.5;
  color: rgba(255, 255, 255, .58);
}

:where(body.rv) .cloche-n-date {
  flex-shrink: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, .42);
  white-space: nowrap;
}

:where(body.rv) .cloche-vide {
  padding: 30px 14px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, .45);
}

:where(body.rv) .cloche-vide i {
  display: block;
  font-size: 26px;
  margin-bottom: 10px;
  opacity: .5;
}

:where(body.rv) .cloche-ft {
  margin-top: 12px;
  padding-top: 12px;
  border: 0 !important;
  text-align: center;
}

:where(body.rv) .cloche-ft a {
  display: block;
  padding: 13px;
  border-radius: var(--bh-pill);
  font-size: 13.5px;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, .12);
}

:where(body.rv) .cloche-ft a:hover { background: rgba(255, 255, 255, .19); }

/* --- Le profil --- */
:where(body.rv) .profil-hd {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 4px 2px 16px !important;
  border: 0 !important;
}

:where(body.rv) .profil-hd-av {
  flex-shrink: 0;
  width: 52px !important; height: 52px !important;
  display: grid !important; place-items: center;
  border-radius: 50% !important;
  font-size: 19px; font-weight: 500;
  color: #fff !important;
  background: linear-gradient(135deg, var(--bh-a), var(--bh-b)) !important;
}

:where(body.rv) .profil-hd-info { min-width: 0; }

:where(body.rv) .profil-hd-info .name {
  font-size: 17px; font-weight: 500; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

:where(body.rv) .profil-hd-info .email {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .55);
  margin: 2px 0 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

:where(body.rv) .profil-plan {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px !important;
  border: 0 !important;
  border-radius: var(--bh-pill) !important;
  font-size: 11.5px; font-weight: 400;
}

:where(body.rv) .profil-plan.plan-free {
  color: rgba(255, 255, 255, .8) !important;
  background: rgba(255, 255, 255, .12) !important;
}

:where(body.rv) .profil-plan.plan-invest {
  color: #fff !important;
  background: linear-gradient(135deg, var(--bh-a), var(--bh-b)) !important;
}

:where(body.rv) .profil-plan.plan-elite {
  color: #1a1207 !important;
  background: var(--bh-or) !important;
}

/* Le separateur devient de l'air : le modele ne trace pas de
   traits entre les lignes. */
/* --- Les entrees, en tuiles ---
   Le panneau devient une grille de trois colonnes. L'en-tete
   la traverse, les separateurs disparaissent, et chaque
   entree devient un carre arrondi surmonte de son libelle —
   la meme forme que les tuiles de sujet de la page.

   La deconnexion reste une ligne pleine largeur : c'est la
   seule action sans retour, et la ranger dans la grille
   reviendrait a la banaliser.
   ========================================================= */
:where(body.rv) .profil-menu.open {
  /* Sur la classe ouverte, jamais sur le panneau lui-meme :
     un display pose sans condition annule la regle qui le
     garde ferme. */
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 8px;
  align-content: start;
}

:where(body.rv) .profil-hd { grid-column: 1 / -1; }

:where(body.rv) .profil-sep { display: none !important; }

:where(body.rv) .profil-item {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  color: rgba(255, 255, 255, .92) !important;
}

:where(body.rv) .profil-item i {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 15px;
  font-size: 20px;
  color: #fff;
  background: rgba(255, 255, 255, .14) !important;
  transition: background .18s ease, transform .18s ease;
}

:where(body.rv) .profil-item:hover   { background: none !important; }

:where(body.rv) .profil-item:hover i { background: rgba(255, 255, 255, .22) !important; }

:where(body.rv) .profil-item:active i { transform: scale(.95); }

/* La deconnexion : une ligne, en bas, a part. */
:where(body.rv) .profil-item.danger {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: center;
  gap: 9px;
  margin-top: 2px !important;
  padding: 12px !important;
  border-radius: var(--bh-pill) !important;
  font-size: 13px;
  color: rgba(255, 140, 130, .92) !important;
  background: rgba(224, 72, 60, .16) !important;
}

:where(body.rv) .profil-item.danger i {
  width: auto;
  aspect-ratio: auto;
  border-radius: 0;
  font-size: 16px;
  background: none !important;
}

:where(body.rv) .profil-item.danger:hover {
  color: #ff9d94 !important;
  background: rgba(224, 72, 60, .25) !important;
}

:where(body.rv) .profil-item.danger:hover i { background: none !important; }

/* L'en-tete se resserre : la grille prend la place gagnee. */
:where(body.rv) .profil-hd { padding: 2px 2px 4px !important; gap: 11px; }

:where(body.rv) .profil-hd-av { width: 42px !important; height: 42px !important; font-size: 16px; }

:where(body.rv) .profil-hd-info .name { font-size: 15px; }

:where(body.rv) .profil-hd-info .email { font-size: 11px; margin: 2px 0 5px; }

@media (max-width: 430px) {
  
    :where(body.rv) .cloche-menu,
    :where(body.rv) .profil-menu { top: 68px !important; }
  
    :where(body.rv) .cloche-menu::before { right: 68px; }
  
    :where(body.rv) .profil-menu::before { right: 18px; }
}

:where(body.rv) .cloche-dd,
:where(body.rv) .profil-dd,
:where(body.rv) .nav-dropdown { z-index: 1100 !important; }

:where(body.rv) .cloche-menu,
:where(body.rv) .profil-menu,
:where(body.rv) .dropdown-menu { z-index: 1101 !important; }

/* BRVMH-PANNEAUX-FINITION-V1
   Trois defauts du navigateur que les regles reprises ne
   couvraient pas : elles vivent hors des familles cloche- et
   profil- dans les feuilles des autres pages. */

:where(body.rv) #cloche-menu a,
:where(body.rv) #profil-menu a {
  text-decoration: none !important;
}
:where(body.rv) #cloche-menu a:focus,
:where(body.rv) #cloche-menu a:focus-visible,
:where(body.rv) #profil-menu a:focus,
:where(body.rv) #profil-menu a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
:where(body.rv) #cloche-menu .cloche-body {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, .2) transparent !important;
}
:where(body.rv) #cloche-menu .cloche-body::-webkit-scrollbar { width: 6px; }
:where(body.rv) #cloche-menu .cloche-body::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255, 255, 255, .2); }
:where(body.rv) #cloche-menu .cloche-body::-webkit-scrollbar-track { background: transparent; }

/* BRVMH-PANNEAUX-FINITION-V2
   Trois defauts du navigateur que les regles reprises ne
   couvraient pas : elles vivent hors des familles cloche- et
   profil- dans les feuilles des autres pages.
   La barre de defilement est masquee, pas supprimee : la liste
   reste parcourable au doigt et a la molette. */

:where(body.rv) #cloche-menu a,
:where(body.rv) #profil-menu a {
  text-decoration: none !important;
}
:where(body.rv) #cloche-menu a:focus,
:where(body.rv) #cloche-menu a:focus-visible,
:where(body.rv) #profil-menu a:focus,
:where(body.rv) #profil-menu a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
:where(body.rv) #cloche-menu,
:where(body.rv) #cloche-menu .cloche-body,
:where(body.rv) #profil-menu {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
:where(body.rv) #cloche-menu::-webkit-scrollbar,
:where(body.rv) #cloche-menu .cloche-body::-webkit-scrollbar,
:where(body.rv) #profil-menu::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* BRVMH-PANNEAUX-AJUST-V1
   Les cartes s appuyaient sur var(--bh-r-sm), jeton absent de
   cette feuille : la declaration etait invalide et les coins
   restaient droits. On le pose, et on reduit la hauteur. */

body.rv { --bh-r-sm: 14px; --bh-r: 20px; }

:where(body.rv) #cloche-menu,
:where(body.rv) #profil-menu {
  max-height: 78vh !important;
}
:where(body.rv) #cloche-menu .cloche-body {
  max-height: calc(78vh - 96px) !important;
}
:where(body.rv) #cloche-menu .cloche-n,
:where(body.rv) #profil-menu .profil-item {
  border-radius: 18px !important;
}

/* BRVMH-PANNEAU-COLONNE-V1
   Le pied flottait par-dessus la liste : le panneau etait un
   bloc simple, et le plafond du corps calcule a part finissait
   par ne plus concorder. En colonne, l en-tete et le pied sont
   fixes, le corps prend ce qui reste et defile seul — le
   chevauchement ne peut plus se produire, quelle que soit la
   hauteur. */

:where(body.rv) #cloche-menu.on {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
:where(body.rv) #cloche-menu .cloche-hd,
:where(body.rv) #cloche-menu .cloche-ft {
  flex: 0 0 auto !important;
}
:where(body.rv) #cloche-menu .cloche-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
}

/* BRVMH-DOUBLONS-ENTETE-V1
   Le script des panneaux a apporte son propre bouton cloche et
   son avatar, poses en fin de page faute d en-tete ou s ancrer.
   L accueil a deja les siens en haut, cables vers les panneaux :
   ces doublons ne servent a rien et trainaient en bas a gauche.
   Les panneaux sont en position fixed, les masquer ne les touche
   pas. */

/* Le conteneur reste affiche : les panneaux sont dedans, le
   masquer les emportait. On ne cache que les boutons en trop
   et on retire la place que le conteneur occupait. */
body.rv > .cloche-dd > .cloche-btn,
body.rv > .profil-dd > .nav-av-img,
body.rv > .profil-dd > .nav-av,
body.rv > .cloche-dd > .cloche-badge {
  display: none !important;
}
body.rv > .cloche-dd,
body.rv > .profil-dd {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
}

/* BRVMH-PROFIL-FINITION-V1
   Le trait sous le badge : profil-sep existe dans le balisage
   mais aucune regle ne le dessinait — un div vide reste
   invisible sans bordure ni hauteur. */

/* Pose en block, le trait devenait une cellule de la grille et
   decalait les six tuiles. Il traverse toute la largeur. */
:where(body.rv) #profil-menu .profil-sep {
  display: block !important;
  grid-column: 1 / -1 !important;
  width: auto !important;
  height: 1px !important;
  margin: 12px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: rgba(255, 255, 255, .16) !important;
}

/* BRVMH-RECHERCHE-HABILLAGE-V1
   Le panneau de resultats s inserait apres .m-head, absent du
   dashboard dont l entete s appelle .tete. Et son habillage vit
   dans les feuilles page-*-v3 que cette page ne charge pas. */

/* --- Les resultats de recherche ---
   Un panneau sous la barre du haut, dans la matiere des
   cartes de la page. Il ne s'affiche que rempli. */
:where(body.rv) .su-res {
  display: none;
  position: relative;
  z-index: 1100;
  /* La meme largeur et la meme matiere que les panneaux de
     la cloche et du profil : c'est la meme famille de blocs,
     ouverte depuis la meme barre. */
  max-width: min(var(--su-fen), calc(100vw - 24px));
  margin: 4px auto 0;
  padding: 8px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .09);
  -webkit-backdrop-filter: blur(34px) saturate(150%);
  backdrop-filter: blur(34px) saturate(150%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5),
              0 0 0 100vmax rgba(10, 8, 20, .74);
}

:where(body.rv) .su-res.on { display: block; }

:where(body.rv) .su-res-i {
  display: block;
  padding: 11px 13px;
  border-radius: 14px;
  text-decoration: none;
  transition: background .18s ease;
}

:where(body.rv) .su-res-i + .su-res-i { margin-top: 4px; }

:where(body.rv) .su-res-i:hover { background: rgba(255, 255, 255, .12); }

:where(body.rv) .su-res-i { text-align: left; }

:where(body.rv) .su-res-t {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 3px;
}

:where(body.rv) .su-res-r {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .58);
}

:where(body.rv) .su-res-v {
  margin: 0;
  padding: 12px 13px 8px;
  text-align: center;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .58);
}

/* La sortie de secours : la recherche qui echoue devient un
   debut de demande. */
:where(body.rv) .su-res-x {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--bh-pill);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  /* Force : une regle d'une autre feuille repeignait le texte
     en blanc, et le bouton apparaissait vide. */
  color: #14141d !important;
  background: #fff !important;
  transition: filter .18s ease;
}

:where(body.rv) .su-res-x:hover { filter: brightness(.92); }

/* BRVMH-RESEAUX-VALEURS-V1
   Valeurs relevees sur parrainage.html. La-bas le conteneur est
   enfant de .foot-inner, structure absente ailleurs : charger la
   feuille entiere donnait des icones minuscules et entassees.
   On vise .foot-icons directement. */

body.rv .foot-icons {
  display: grid !important;
  grid-auto-flow: column !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 12px 0 0 !important;
}
body.rv .foot-icons .fi {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgb(32, 32, 36) !important;
  color: rgba(255, 255, 255, .62) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}
body.rv .foot-icons .fi i {
  font-size: 16px !important;
}

/* BRVMH-PIED-DEGAGE-V1
   La barre de navigation est en position fixe : elle recouvrait
   le bas du pied. On reserve sa hauteur sous le contenu. */

body.rv .pied {
  padding-bottom: calc(var(--su-bnav) + 24px) !important;
}

/* BRVMH-BULLE-DECO-V1
   .bulle est la bulle DECORATIVE des maquettes : un div sans
   gestionnaire, qui imite le bouton de discussion et se pose
   par-dessus le vrai (#ia-bulle). La regle existante la visait
   en enfant direct de body.rv ; sur certaines pages elle est
   imbriquee plus profond et echappait au masquage. Ici sans
   condition de parente. Le vrai bouton n est pas touche : il
   porte la classe .ia-bulle, pas .bulle. */
body.rv .bulle:not(.ia-bulle) {
  display: none !important;
}

/* BRVMH-PASTILLE-MCLOCHE-V1
   Deux structures d entete coexistent : a.rond sur les maquettes,
   a.m-cloche sur les pages a feuille propre. Les regles posees ne
   visaient que la premiere. Le parent est en overflow:hidden, qui
   rogne la pastille quel que soit son decalage, et .m-cloche-badge
   reste a 8 px alors qu il porte un chiffre. */
body.rv a.rond, body.rv a.m-cloche, body.rv .m-cloche {
  overflow: visible !important;
  position: relative !important;
}
body.rv #m-cloche-badge.on, body.rv .m-cloche-badge.on {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  z-index: 5 !important;
  min-width: 18px !important;
  width: auto !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  color: #fff !important;
  background: #ff5a5a !important;
  border: 2px solid rgba(10, 10, 18, .9) !important;
}

/* BRVMH-CONTOUR-PLAN-V1
   La regle du contour existe dans page-abonnements.css, que
   cette page ne charge pas — et elle posait border-color sans
   border-width, donc rien ne se voyait. Reprise ici avec la
   largeur, en violet pour le plan actif ; l or reste reserve
   au badge d Elite. */
body.rv .pc.cur {
  border: 1px solid #6C3CE1 !important;
  box-shadow: 0 8px 32px rgba(108, 60, 225, .2) !important;
}

/* BRVMH-CALQUE-PAIEMENT-V1
   fond-modele.css applique position:relative a tous les enfants
   directs du corps. Le calque de paiement en est un : son
   position:fixed etait ecrase, il repassait dans le flux et
   s affichait en bas de page. Meme piege que la bulle de
   l assistant, deja forcee plus haut. */
body.rv > .pd-ov, body.rv > #pd-ov {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* BRVMH-SANS-VOILE-V1
   Le panneau de resultats et la fenetre de l assistant posaient
   un voile sur la page par une ombre etalee sur 844 px :
   rgba(10,8,20,.74) 0 0 0 844px. Ce n est pas un calque, d ou
   le fait qu aucune recherche d element ne le trouvait. On garde
   l ombre portee proche et on retire l etalement. */
body.rv .su-res, body.rv .su-res.on {
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5) !important;
}
body.rv .ia-box, body.rv #ia-box {
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5) !important;
}

/* BRVMH-PAIEMENT-TAILLE-V1
   Le bloc de paiement occupait presque toute la largeur. Une
   regle du script le passe meme en pleine largeur sous un
   certain seuil — d ou le besoin de forcer. */
body.rv .pd-ov .pd-md {
  max-width: 340px !important;
  width: calc(100vw - 48px) !important;
}
body.rv .pd-ov .pd-hd { padding: 16px 18px 12px !important; }
body.rv .pd-ov .pd-hd h3 { font-size: 15px !important; }
body.rv .pd-ov .pd-bd { padding: 14px 18px 16px !important; }
body.rv .pd-ov .pd-zn-t { font-size: 12.5px !important; }
body.rv .pd-ov .pd-zn-b { padding: 11px 12px !important; }
body.rv .pd-ov .pd-zn-b b { font-size: 13.5px !important; }

/* BRVMH-PAIEMENT-ARRONDI-V1
   Sur mobile le script arrondit seulement le haut du bloc :
   il etait pense pour coller au bas de l ecran, en feuille.
   Maintenant qu il est centre, les quatre coins le sont. */
body.rv .pd-ov .pd-md {
  border-radius: 20px !important;
}

/* BRVMH-COURBE-CALQUE-V1
   Meme piege que le calque de paiement : position:relative est
   impose aux enfants directs du corps, le fixed etait annule et
   la fiche tombait en bas de page. */
body.rv > .cb-ov, body.rv > #cb-ov {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9000 !important;
}
body.rv > .cb-ov.on { display: flex !important; align-items: center !important; justify-content: center !important; }


/* BRVMH-INVITATION-HABILLAGE-V1
   L habillage du bandeau vivait dans page-accueil-v3.css, que les
   maquettes ne chargent pas : le bandeau s affichait en texte brut,
   sans fond ni disposition. Regles recopiees telles quelles. */
:where(body.rv) .inv,
:where(body.rv) .twa-abo {
  position: fixed;
  left: 50%;
  bottom: calc(var(--su-bnav) + 44px);
  transform: translateX(-50%);
  z-index: 1400;
  /* Un peu plus etroit que la colonne : le bandeau se pose
     par-dessus la page, il ne doit pas se confondre avec les
     blocs qu'il recouvre. */
  width: calc(100% - 44px);
  max-width: 420px;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 13px 14px !important;
  border: 0 !important;
  border-radius: var(--bh-r) !important;
  background: #2a2150 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}
:where(body.rv) .inv-i {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 19px;
  color: #fff;
  background: linear-gradient(135deg, var(--bh-a), var(--bh-b));
}
:where(body.rv) .inv-t {
  flex: 1; min-width: 0;
  display: flex !important;
  flex-direction: column !important;
  text-align: left;
}
/* Le bouton vit DANS le bloc de texte, pas a cote : il doit
   donc passer en dernier a l'interieur de celui-ci. Pose en
   premier, on lisait l'action avant de savoir de quoi il
   s'agissait. */
:where(body.rv) .inv-t > .inv-b {
  order: 9 !important;
  /* A sa taille, pas sur toute la largeur : pleine largeur, la
     pilule blanche debordait de la carte et chevauchait le
     bloc voisin. */
  width: auto !important;
  align-self: flex-start !important;
  margin: 10px 0 0 !important;
}
:where(body.rv) .inv-t b { font-size: 13.5px; font-weight: 500; }
:where(body.rv) .inv-t p {
  margin: 3px 0 0;
  font-size: 11.5px; line-height: 1.45;
  color: rgba(255, 255, 255, .6);
  /* Deux lignes au plus : le mode d'emploi complet ne tient
     pas dans un bandeau. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

:where(body.rv) .inv-b,
:where(body.rv) .twa-copier {
  order: 9;
  flex-shrink: 0;
  align-self: flex-start;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 10px 16px !important;
  white-space: nowrap;
  border: 0 !important;
  border-radius: var(--bh-pill) !important;
  font-family: inherit;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer;
  color: #14141d !important;
  background: #fff !important;
  transition: filter .18s ease;
}
:where(body.rv) .inv-b:hover,
:where(body.rv) .twa-copier:hover { filter: brightness(.92); }
:where(body.rv) .inv-x {
  position: absolute;
  top: 6px; right: 8px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 14px;
  color: rgba(255, 255, 255, .45) !important;
  background: none !important;
  border: 0 !important;
}
:where(body.rv) .inv-x:hover { color: #fff !important; background: rgba(255,255,255,.12) !important; }

/* Sur un ecran etroit, la carte se resserre — mais le bouton
   garde sa taille : c'est ce qui l'empechait de deborder. */
@media (max-width: 420px) {
  :where(body.rv) .inv { padding: 12px !important; gap: 10px; }
  :where(body.rv) .inv-i { width: 34px; height: 34px; font-size: 17px; }
  :where(body.rv) .inv-t b { font-size: 12.5px; }
  :where(body.rv) .inv-t p { font-size: 11px; }
  :where(body.rv) .inv-b { padding: 9px 14px !important; font-size: 12.5px !important; }


/* BRVMH-INVITATION-FINAL-V1
   Trois blocs se contredisaient sur le meme selecteur, dont deux
   identiques : le bandeau tombait a 195px de large. Un seul bloc
   desormais, pose en dernier, aux valeurs de la barre du haut. */
body.rv > .inv {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 150px !important;
  transform: translateX(-50%) !important;
  width: 355px !important;
  max-width: calc(100vw - 24px) !important;
  margin: 0 !important;
  z-index: 8000 !important;
}

/* BRVMH-TWA-PIED-V1
   Le bloc remplace le contenu de .page-inner, mais le pied de
   page est en dehors : il restait affiche et passait au travers.
   On le masque tant que le bloc est la. */
body.rv:has(.twa-abo) .foot,
body.rv:has(.twa-abo) .foot-icons { display: none !important; }

/* BRVMH-RESEAUX-COULEURS-V2 : la feuille se terminait par un bloc
   « @media (max-width: 420px) { » jamais referme (ligne « .inv-b »).
   Tout ce qui suivait ne valait donc que sous 420 px de large : les
   couleurs des reseaux n'apparaissaient pas en bureau. Cette accolade
   referme ce bloc ICI, juste avant les couleurs : les regles deja
   presentes (invitation, TWA) gardent exactement leur comportement. */
}

/* =========================================================
   BRVMH-RESEAUX-COULEURS-V1
   Pied de page : chaque reseau social prend la couleur de sa
   marque (fond plein, icone blanche), sur toutes les pages qui
   chargent cette feuille. TikTok et X sur fond noir, avec un
   filet clair pour rester visibles sur le fond sombre.
   ========================================================= */
html body .foot-icons a.fi[data-r="facebook"], html body.rv .foot-icons a.fi[data-r="facebook"] { background: #1877F2 !important; background-color: #1877F2 !important; color: #fff !important; border-color: transparent !important; }
html body .foot-icons a.fi[data-r="instagram"], html body.rv .foot-icons a.fi[data-r="instagram"] { background: linear-gradient(45deg, #F58529 0%, #DD2A7B 45%, #8134AF 75%, #515BD4 100%) !important; color: #fff !important; border-color: transparent !important; }
html body .foot-icons a.fi[data-r="tiktok"], html body.rv .foot-icons a.fi[data-r="tiktok"] { background: #000000 !important; background-color: #000000 !important; color: #fff !important; border-color: transparent !important; }
html body .foot-icons a.fi[data-r="linkedin"], html body.rv .foot-icons a.fi[data-r="linkedin"] { background: #0A66C2 !important; background-color: #0A66C2 !important; color: #fff !important; border-color: transparent !important; }
html body .foot-icons a.fi[data-r="youtube"], html body.rv .foot-icons a.fi[data-r="youtube"] { background: #FF0000 !important; background-color: #FF0000 !important; color: #fff !important; border-color: transparent !important; }
html body .foot-icons a.fi[data-r="whatsapp"], html body.rv .foot-icons a.fi[data-r="whatsapp"] { background: #25D366 !important; background-color: #25D366 !important; color: #fff !important; border-color: transparent !important; }
html body .foot-icons a.fi[data-r="telegram"], html body.rv .foot-icons a.fi[data-r="telegram"] { background: #229ED9 !important; background-color: #229ED9 !important; color: #fff !important; border-color: transparent !important; }
html body .foot-icons a.fi[data-r="twitter"], html body.rv .foot-icons a.fi[data-r="twitter"] { background: #1DA1F2 !important; background-color: #1DA1F2 !important; color: #fff !important; border-color: transparent !important; }
html body .foot-icons a.fi[data-r="x"], html body.rv .foot-icons a.fi[data-r="x"] { background: #000000 !important; background-color: #000000 !important; color: #fff !important; border-color: transparent !important; }
html body .foot-icons a.fi[data-r] i, html body.rv .foot-icons a.fi[data-r] i { color: #fff !important; }
html body .foot-icons a.fi[data-r="tiktok"], html body .foot-icons a.fi[data-r="x"], html body.rv .foot-icons a.fi[data-r="tiktok"], html body.rv .foot-icons a.fi[data-r="x"] { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28) !important; }
html body .foot-icons a.fi[data-r]:hover, html body.rv .foot-icons a.fi[data-r]:hover { filter: brightness(1.12) !important; transform: translateY(-2px); }

/* BRVMH-PWA-BOUTON-V1
   Le bouton « Installer l'application » (#pwa-btn, cree par le script
   PWA des pages) se posait en bas de l'ecran, sous la barre de
   navigation : on n'en voyait que le haut. Il remonte juste au-dessus
   de la barre, centre, et passe devant elle. */
html body #pwa-btn, html body.rv #pwa-btn {
  position: fixed !important; left: 50% !important; right: auto !important; top: auto !important;
  transform: translateX(-50%) !important;
  bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 10040 !important; white-space: nowrap !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(240, 184, 64, .45) !important;
}
@media (min-width: 860px) {
  html body #pwa-btn, html body.rv #pwa-btn { bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* BRVMH-PIED-2LIGNES-V1
   Mention du pied de page : « (c)2023-2026 | EBS-CE Academy · BRVM Horizon »
   puis « Tous droits reserves » — deux lignes, jamais trois. Sur les ecrans
   etroits, la premiere ligne se coupait avant « BRVM Horizon ». Elle reste
   d'un seul tenant, et sa taille s'ajuste a la largeur de l'ecran. Ne vise
   que les mentions ecrites sur deux lignes (avec un retour a la ligne). */
html body .foot p:has(br), html body .foot .foot-l1 { white-space: nowrap !important; }
@media (max-width: 859px) {
  html body .foot p:has(br) { font-size: min(12.5px, 3.3vw) !important; line-height: 1.7 !important; }
}

/* BRVMH-RESEAUX-TAILLE-V1
   Pied de page, en BUREAU (860 px et plus) : les ronds des reseaux passent
   a 50 px, icone en 21 px, plus espaces — comme sur l'accueil. En mobile,
   rien ne change (32 a 36 px, sur une ligne). */
@media (min-width: 860px) {
  html body .foot-icons a.fi[data-r], html body.rv .foot-icons a.fi[data-r] {
    width: 50px !important; height: 50px !important; min-width: 50px !important; font-size: 21px !important; }
  html body .foot-icons a.fi[data-r] i, html body.rv .foot-icons a.fi[data-r] i { font-size: 21px !important; }
  html body .foot-icons, html body.rv .foot-icons { gap: 14px !important; }
}

/* BRVMH-RECHERCHE-BUREAU-V1
   Recherche de la barre du haut, en BUREAU : le panneau de resultats
   (.su-res) est insere juste apres la barre, dans le contenu. En bureau,
   ce contenu est une grille : le panneau tombait tout en bas de la page,
   hors de vue — la recherche semblait ne rien faire. Il s'affiche
   maintenant juste sous la barre du haut, centre, par-dessus la page.
   En mobile, rien ne change (il y fonctionnait deja). */
@media (min-width: 860px) {
  html body .su-res.on, html body.rv .su-res.on {
    position: fixed !important; top: calc(70px + env(safe-area-inset-top, 0px)) !important; bottom: auto !important;
    left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
    width: min(640px, calc(100vw - 56px)) !important; max-width: none !important; margin: 0 !important;
    max-height: calc(100vh - 140px) !important; overflow-y: auto !important;
    grid-column: auto !important; grid-row: auto !important; z-index: 10045 !important;
    background: linear-gradient(158deg, rgba(154,110,255,.30), rgba(154,110,255,.10)), #1c1a52 !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(154,110,255,.28) !important; border-radius: 20px !important; }
}

/* BRVMH-DISCUSSION-REDUIT-V2
   Bureau : la fenetre de discussion se reduit a la largeur de la marge
   droite (la page ne bouge pas). Quand elle devient etroite (classe
   « bh-chat-etroit », moins de 320 px), son contenu se resserre :
   marges, textes, suggestions et champ plus compacts. */
@media (min-width: 860px) {
  html body #ia-box.bh-chat-etroit { font-size: 13px !important; }
  html body #ia-box.bh-chat-etroit * { max-width: 100% !important; box-sizing: border-box !important; }
  html body #ia-box.bh-chat-etroit .ia-hd, html body #ia-box.bh-chat-etroit [class*="ia-t"] { padding-left: 12px !important; padding-right: 12px !important; }
  html body #ia-box.bh-chat-etroit h3, html body #ia-box.bh-chat-etroit h2 { font-size: 15px !important; }
  html body #ia-box.bh-chat-etroit p, html body #ia-box.bh-chat-etroit .ia-msg, html body #ia-box.bh-chat-etroit [class*="ia-m"] { font-size: 12.5px !important; line-height: 1.5 !important; }
  html body #ia-box.bh-chat-etroit button { font-size: 12px !important; padding: 8px 12px !important; white-space: normal !important; }
  html body #ia-box.bh-chat-etroit input, html body #ia-box.bh-chat-etroit textarea { font-size: 13px !important; min-width: 0 !important; }
}

/* BRVMH-DISCUSSION-SAISIE-V1
   Bureau : zone de saisie de la discussion plus confortable. Quand la
   fenetre est etroite (bh-chat-etroit), le champ passe sur toute la
   largeur, sur 3 lignes, et le bouton d'envoi se place dessous a droite.
   Plus de petites fleches de defilement dans le champ. */
@media (min-width: 860px) {
  html body #ia-box .ia-i { min-height: 46px !important; line-height: 1.45 !important; scrollbar-width: thin; }
  html body #ia-box.bh-chat-etroit .ia-bas { padding: 10px 8px !important; }
  html body #ia-box.bh-chat-etroit .ia-saisie { padding: 6px !important; margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  html body #ia-box.bh-chat-etroit .ia-i {
    width: 100% !important; max-width: 100% !important; min-height: 76px !important; max-height: 160px !important;
    padding: 10px 12px !important; font-size: 13.5px !important; border-radius: 14px !important;
    resize: none !important; overflow-y: auto !important; scrollbar-width: none !important; }
  html body #ia-box.bh-chat-etroit .ia-i::-webkit-scrollbar { display: none !important; }
  html body #ia-box.bh-chat-etroit .ia-env { align-self: flex-end !important; width: 42px !important; height: 42px !important; flex: 0 0 auto !important; }
}

/* BRVMH-TIROIR-MEMOIRE-V1
   Bureau : le tiroir « Modules » ne se ferme plus quand on clique a cote
   (voile retire) — seulement par sa croix ou la touche Echap. La page en
   cours y est nettement surlignee : fond violet, filet dore a gauche, gras. */
@media (min-width: 860px) {
  html body .bh-voile, html body.rv .bh-voile, html body .bh-voile.ouvert, html body.rv .bh-voile.ouvert {
    background: transparent !important; pointer-events: none !important; }
}
html body .bh-tiroir-liste .ici, html body.rv .bh-tiroir-liste .ici {
  background: rgba(124, 77, 255, .55) !important; color: #fff !important; font-weight: 600 !important;
  box-shadow: inset 3px 0 0 #F0B840 !important; }
html body .bh-tiroir-liste .ici i, html body.rv .bh-tiroir-liste .ici i { color: #F0B840 !important; opacity: 1 !important; }