/* =========================================================
   page-influenceurs-v3.css — /influenceurs.html

   CETTE FEUILLE EST CELLE DU PARRAINAGE.
   Pas une adaptation, pas une reecriture : le meme fichier,
   dont chaque regle recoit en plus les classes de cette page.
   Le fond de teinte, les panneaux translucides, la barre du
   haut, la barre du bas, les panneaux flottants, le voile, le
   flottement : tout vient de la, aux valeurs validees.

   Les cinquante-trois correspondances posees :
     .hero        prend les regles de .pr-hero
     .hero-h1     celles de .pr-h2
     .ep-lien     celles de .pr-code
     .ep-kpi      celles de .pr-chiffres
     .ep-solde    celles de .pr-recompense
     .bloc-dark   celles de .pr-bloc
     .obj-card    celles de .pr-et
     .cp-i .pt-i  celles de .pr-i
     .pa-acc      celles de .pa
     … et ainsi de suite.

   Une valeur changee ici doit donc l'etre aussi sur le
   parrainage : c'est le prix de l'identite entre les deux
   pages, et c'est ce qu'on cherchait.

   CE QUI RESTE PROPRE AUX PARTENAIRES
   Seules les classes sans equivalent : le tableau des
   commissions, les trois fenetres, et les utilitaires. Elles
   sont en fin de fichier.
   ========================================================= */

/* --------------------------------------------------------
   Ancienne en-tete, conservee pour memoire :
   page-parrainage-v3.css — Modele B.

   Pose apres :
     node parrainage-modele.cjs public/design-v2/parrainage.html

   DEUX MOITIES

   1. LA CHARPENTE, identique au support : barre du haut avec
      sa recherche, barre du bas a six entrees, panneaux de la
      cloche, du profil et de la discussion, voile, echelle
      d'empilement, flottement au defilement, bandeau
      d'installation. Rien de tout cela ne parle du support :
      c'est le commun, et il finira dans une feuille partagee.

   2. LE CONTENU, propre au parrainage, sur les classes du
      modele : pr-hero, pr-bloc, pr-rep, pr-chiffres,
      pr-part, pr-recompense, pr-etapes, pr-illu.

   Les classes que le script fabrique — pr-f, pr-f-a, pr-f-c,
   pr-f-n, pr-f-d, pr-f-b, pr-vide, pa-p, pa-code — sont
   traitees aussi : sans elles, les filleuls et les filtres
   arrivent sans style.
   ========================================================= */

/* =========================================================
   0. JETONS
   ========================================================= */
body.rv {
  --bh-fond:  #0a0a12;
  --bh-txt:   var(--text,   #ffffff);
  --bh-txt2:  var(--text-2, rgba(255, 255, 255, .70));
  --bh-txt3:  var(--text-3, rgba(255, 255, 255, .44));
  --bh-or:    var(--or,      #F0B840);
  --bh-a:     var(--brand-a, #7c3aed);
  --bh-b:     var(--brand-b, #4f46e5);
  --bh-ok:    var(--up,      #34d399);
  --bh-non:   var(--down,    #f87171);

  --bh-r:    20px;
  --bh-r-sm: 14px;
  --bh-pill: 999px;

  --bh-col:  480px;
  --su-fen:  340px;
  --su-bnav: 92px;
  --bh-tete: rgba(26, 26, 33, .72);
}

/* =========================================================
   1. LA PAGE
   ---------------------------------------------------------
   La teinte impregne tout l'ecran, du haut a la barre du bas.
   ========================================================= */
.page-net { display: none; }

body.rv[data-teinte] {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bh-a) 46%, #0f0b1e) 0%,
      color-mix(in srgb, var(--bh-b) 20%, #0c0a16) 34%,
      var(--bh-fond) 72%) no-repeat fixed;
  background-color: var(--bh-fond);
}

.pr-in {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--bh-col) !important;
  margin-inline: auto !important;
  /* La colonne ajoutait 22 px au-dessus du heros, herites de
     la feuille des modules. C'est la que se jouait l'ecart :
     le retrait du heros n'en pilotait qu'un quart. */
  padding-top: 0 !important;
  padding-bottom: calc(var(--su-bnav) + 24px);
}
.page-inner:has(.pr-in) {
  max-width: var(--bh-col) !important;
  margin-inline: auto !important;
  box-sizing: border-box;
}
body.rv .pr-in * { box-sizing: border-box; max-width: 100%; min-width: 0; }

.spin { animation: pr-tourne 1s linear infinite; display: inline-block; }
@keyframes pr-tourne { to { transform: rotate(360deg); } }
.anim-1, .anim-2, .anim-3, .anim-4 { animation: none; }

/* =========================================================
   2. LE HEROS
   ---------------------------------------------------------
   La promesse en grand et leger, puis le code : c'est ce que
   le membre vient chercher, il n'a pas a le trouver apres
   cinq compteurs.
   ========================================================= */
/* Le heros remonte sous la barre du haut et le titre se
   resserre : sur cette page la promesse tient en deux lignes
   longues, et a 34 px elle poussait tout le reste hors du
   premier ecran. */
/* Le titre remonte sous la barre du haut. Le support garde
   34 px parce que son heros est seul avant le bouton ; ici,
   la rangee d'acces et le code suivent, et le premier ecran
   doit tous les tenir. */
/* Le heros porte la rangee d'acces et son menu : il doit donc
   se placer au-dessus des blocs qui le suivent. */
.pr-hero, .hero { position: relative; z-index: 900; padding: 14px 6px 6px; text-align: center; }

.pr-h2, .hero-h1 {
  margin: 0 auto;
  max-width: 15ch;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #fff;
}
.pr-h2 .g, .hero-h1 .gold, .hero-h1 .gold-grad { display: block; color: rgba(255, 255, 255, .66); }

.pr-hero-s, .hero-p {
  margin: 12px auto 0;
  max-width: 32ch;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, .62);
}

.pr-code, .ep-lien {
  display: flex; align-items: center; gap: 10px;
  /* Puis 14 px, l'ecart des blocs du support. */
  margin: 14px 0 0;
  padding: 8px 8px 8px 22px;
  border: 0;
  border-radius: var(--bh-pill);
  background: rgba(0, 0, 0, .3);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bh-or) 34%, transparent);
}
.pr-code > span, .ep-lien-t {
  flex: 1;
  text-align: left;
  font-size: 22px; font-weight: 600;
  letter-spacing: .14em;
  color: var(--bh-or);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pr-sous-code, .ep-note {
  margin: 12px auto 0;
  max-width: 34ch;
  font-size: 12px; line-height: 1.5;
  color: rgba(255, 255, 255, .45);
}

.pr-cp, .ep-copier {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  transition: background .18s ease, transform .18s ease;
}
.pr-cp:hover, .ep-copier:hover { background: rgba(255, 255, 255, .22); }
.pr-cp:active, .ep-copier:active { transform: scale(.94); }

/* =========================================================
   3. LES REPERES DE SECTION
   ---------------------------------------------------------
   Ecrits normalement, en gris, suivis d'un chevron. Aucune
   capitale : le modele n'en utilise nulle part.
   ========================================================= */
.pr-rep, .bloc-lbl, .profil-section-lbl {
  display: flex; align-items: center; gap: 5px;
  margin: 26px 0 12px;
  font-size: 15px; font-weight: 400;
  color: rgba(255, 255, 255, .62);
}
.pr-rep::after { content: '\203A'; font-size: 17px; line-height: 1; }
.pr-rep b { font-weight: 400; color: rgba(255, 255, 255, .45); }
.pr-bloc .pr-rep { margin: 0 0 14px; }

/* Le panneau translucide : seuls le partage et la recompense
   en portent un. Le reste se pose sur le fond. */
.pr-bloc, .bloc-dark, .profil-bloc {
  margin-top: 14px;
  padding: 16px;
  border: 0;
  border-radius: var(--bh-r);
  background: rgba(255, 255, 255, .09);
}

/* =========================================================
   3 bis. LA LANGUETTE ET LES DEUX ONGLETS
   ---------------------------------------------------------
   LE PROBLEME
   La languette de module est un onglet colle au bord gauche,
   sous la barre du haut. Dans une colonne de 480 px elle se
   fait couper en deux et devient illisible. Les deux onglets,
   eux, arrivent dans une sous-barre pleine largeur qui ne
   ressemble a rien d'autre sur la page.

   CE QUE JE PROPOSE
   La languette rejoint la barre du haut, en rond, a cote de
   la cloche : c'est la que vivent deja les commandes qui ne
   dependent pas du contenu.

   Les deux onglets descendent sous la promesse, en pastilles
   centrees. « Parrainer un ami » et « Devenir partenaire »
   sont deux offres differentes, pas deux vues d'une meme
   page : on laisse d'abord comprendre de quoi il s'agit,
   puis on choisit. La page courante prend le blanc plein,
   comme le choix retenu d'un selecteur segmente.

   LE FILET
   Le script deplace la sous-barre du parrainage dans
   #par-onglets. Si un jour il ne le fait pas, elle reste ou
   elle est — et les regles ci-dessous l'habillent quand meme.
   On ne masque que les sous-barres des AUTRES modules, jamais
   celle-ci : c'est ce qui evite de perdre les deux onglets si
   le deplacement echoue.
   ========================================================= */

/* RIEN AVANT LA PROMESSE.

   La rangee posee par entete-parrainage.cjs — l'autre offre
   et le choix de module — vit SOUS le code. Les deux objets
   qui s'empilaient au-dessus du titre disparaissent donc :
   la sous-barre du parrainage, celles des autres modules, et
   la languette avec sa bande de pages.

   On ne masque que si la rangee de remplacement est bien la.
   Sans cette condition, un patch qui n'aurait pas tourne
   ferait perdre l'acces a « Devenir partenaire ». */
body.rv:has(.pr-acces) #par-onglets,
body.rv:has(.pr-acces) #subbar-par,
body.rv:has(.pr-acces) #nav-tab,
body.rv:has(.pr-acces) .nav-tab,
body.rv:has(.pr-acces) .nav-pages { display: none !important; }

/* Les sous-barres des autres modules, dans tous les cas. */
:where(body.rv) #subbar-brvm,
:where(body.rv) #subbar-sgi,
:where(body.rv) #subbar-mkt,
:where(body.rv) #subbar-aca,
:where(body.rv) #subbar-esp { display: none !important; }

/* --- La rangee d'acces, sous le code ---
   Le lien vers l'autre offre prend la largeur, le module se
   reduit a un rond. Les deux sont secondaires : ils viennent
   apres le message, pas avant.
   ========================================================= */
.pr-acces {
  /* Le menu s'ancre ici, pas sur le rond : la rangee occupe
     toute la colonne, donc « right: 0 » tombe sur le bord
     droit de la page. Ancre sur le rond, qui touche deja ce
     bord, le menu partait au-dela. */
  position: relative;
  /* Au-dessus des blocs qui suivent : sans cet etage, le code
     et le panneau de partage, poses plus bas dans la page,
     passaient par-dessus le menu ouvert.

     La valeur est haute a dessein. Le flottement au defilement
     applique une transformation aux blocs, ce qui leur cree un
     etage propre : un simple « 30 » ne suffit pas toujours a
     passer devant. */
  z-index: 900;
  display: flex;
  align-items: stretch;
  gap: 7px;
  /* Le vide franc du support entre le titre et son bouton. */
  margin: 44px 0 0;
}
.pr-acces-l {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 42px;
  padding: 9px 16px;
  border: 0;
  border-radius: var(--bh-pill);
  font-family: inherit;
  font-size: 12.5px; font-weight: 400;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .12);
  transition: color .18s ease, background .18s ease;
}
.pr-acces-l i { font-size: 15px; color: var(--bh-or); }
.pr-acces-l:hover { color: #fff; background: rgba(255, 255, 255, .19); }

/* Le menu s'ancre sur la rangee, qui occupe toute la colonne :
   son bord droit est celui de la page. */
.pr-acces-w { flex-shrink: 0; display: flex; }

/* --- L'anneau qui tourne ---
   Il est pose sur le BOUTON, pas sur son conteneur : c'est ce
   qui permet de laisser le conteneur sans position.

   Un degrade conique en rotation, decoupe en anneau par un
   masque : le centre reste transparent, seul le liseré se
   voit. Il attire l'oeil sans clignoter — un clignotement
   fatigue et se lit comme une alerte. */
.pr-acces-m::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  background: conic-gradient(from 0deg,
    transparent 0 62%,
    color-mix(in srgb, var(--bh-or) 70%, transparent) 78%,
    var(--bh-or) 88%,
    transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 57%, #000 60%);
  mask: radial-gradient(circle, transparent 57%, #000 60%);
  animation: pr-led 2.8s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes pr-led { to { transform: rotate(360deg); } }

/* Une fois le menu ouvert, l'anneau s'arrete : il a fait son
   travail, et le garder en mouvement derriere un panneau
   ouvert devient du bruit. */
.pr-acces-m.on::after { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .pr-acces-m::after { animation: none; }
}

.pr-acces-m {
  position: relative;
  z-index: 1;
  /* L'anneau deborde de 3 px : rien ne doit le rogner. */
  overflow: visible;
  flex-shrink: 0;
  width: 42px;
  height: 100%;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--bh-pill);
  cursor: pointer;
  font-size: 17px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  transition: background .18s ease, transform .18s ease;
}
.pr-acces-m:hover  { background: rgba(255, 255, 255, .19); }
.pr-acces-m:active { transform: scale(.95); }
.pr-acces-m.on { color: #14141d; background: #fff; }

/* Le menu des deux offres, sous la rangee et cale sur son
   bord droit : il ne peut donc pas depasser la colonne. */
.pr-acces-p {
  /* L'ancrage d'origine, par le CSS seul : sous le bouton,
     cale sur le bord droit de la rangee — qui occupe toute la
     colonne. C'est ce qui fonctionnait avant que je le
     remplace par un calcul en JavaScript. */
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  z-index: 1200;
  display: none;
  width: max-content;
  min-width: 200px;
  max-width: min(260px, 100%);
  padding: 8px;
  border: 0;
  border-radius: 22px;
  /* Opaque, et c'est le seul reglage qui tient.

     Essaye avec le fond translucide du panneau de profil, le
     menu redevenait illisible : les tuiles de partage se
     voyaient au travers. Le voile qui sauve le panneau de
     profil ne convient pas ici — il assombrit tout l'ecran
     pour deux lignes de menu. */
  background: #2a2150;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6),
              inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.pr-acces-p.on { display: block !important; }

.pr-acces-p a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  border-radius: 12px;
  font-size: 13px; font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  transition: background .18s ease;
}
.pr-acces-p a + a { margin-top: 4px; }
.pr-acces-p a i { font-size: 16px; color: var(--bh-or); }
.pr-acces-p a { background: rgba(255, 255, 255, .08); }
.pr-acces-p a:hover { background: rgba(255, 255, 255, .16); }
/* La page courante : elle ne se clique pas. */
.pr-acces-p a.ici {
  color: #14141d;
  font-weight: 500;
  background: #fff;
  pointer-events: none;
}
.pr-acces-p a.ici i { color: #14141d; }

/* =========================================================
   4. LE PARTAGE
   ========================================================= */
.pr-part, .ep-visuels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px 8px;
}
.pr-s {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  text-decoration: none;
  cursor: pointer;
  color: rgba(255, 255, 255, .9);
}
.pr-s i {
  display: grid; place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 16px;
  font-size: 21px;
  color: #fff;
  background: rgba(255, 255, 255, .13);
  transition: background .18s ease, transform .18s ease;
}
.pr-s span {
  display: block;
  margin-top: 8px;
  font-size: 10.5px; font-weight: 400;
  line-height: 1.2;
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pr-s:hover i  { background: rgba(255, 255, 255, .20); }
.pr-s:active i { transform: scale(.95); }

.pr-lien, .pa-rech {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px;
  padding: 6px 6px 6px 16px;
  border: 0;
  border-radius: var(--bh-pill);
  background: rgba(255, 255, 255, .10);
}
.pr-lien input {
  flex: 1;
  border: 0; background: none; outline: none;
  font-family: inherit; font-size: 12.5px;
  color: rgba(255, 255, 255, .7);
}

.pr-flash {
  margin: 11px 0 0;
  min-height: 16px;
  font-size: 12.5px;
  text-align: center;
  color: var(--bh-ok);
}

/* Ce que le filleul gagne : l'argument qu'on repete en
   partageant, donc juste sous le partage. */
.pr-gain, .ep-ct, .pt-off, .profil-info-card, .profil-2fa-card {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px;
  padding: 13px 15px;
  border: 0;
  border-radius: var(--bh-r-sm);
  background: rgba(240, 184, 64, .12);
}
.pr-gain > i { flex-shrink: 0; font-size: 20px; color: var(--bh-or); }
.pr-gain-t, .obj-h5, .section-h2 { margin: 0 0 3px; font-size: 13.5px; font-weight: 500; color: #fff; }
.pr-gain-d, .obj-p, .section-p { margin: 0; font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.pr-gain-d b { color: var(--bh-or); font-weight: 500; }
.pr-gain-d s { color: rgba(255, 255, 255, .38); }

/* =========================================================
   5. LES CHIFFRES, EN LIGNE
   ---------------------------------------------------------
   Cinq nombres empiles en cartes se lisent comme un tableau
   de bord. En ligne, separes d'un filet, ils se comparent
   d'un coup d'oeil.
   ========================================================= */
.pr-chiffres, .ep-kpi, .hero-bloc-grid { display: flex; }
.pr-c, .ep-k, .hero-bloc {
  flex: 1;
  padding: 2px 4px;
  border: 0;
  background: none;
  text-align: center;
}
.pr-c + .pr-c, .ep-k + .ep-k, .hero-bloc + .hero-bloc { border-left: 1px solid rgba(255, 255, 255, .10); }
.pr-c .n, .ep-k b, .ep-v-i, .hero-bloc-ttl {
  display: block;
  font-size: 22px; font-weight: 500;
  letter-spacing: -.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.pr-c .l, .ep-k span, .ep-v-t, .hero-bloc-txt {
  display: block;
  margin-top: 4px;
  font-size: 10px; line-height: 1.3;
  color: rgba(255, 255, 255, .5);
}
/* Le prochain mois offert porte l'or : c'est le seul qui
   annonce un gain a venir. */
.pr-c-or .n, .ep-v-f, .hero-bloc:last-child .hero-bloc-ttl { color: var(--bh-or); }

/* =========================================================
   6. LA RECOMPENSE
   ---------------------------------------------------------
   La seule chose de la page qui porte une couleur.
   ========================================================= */
.pr-recompense, .ep-solde, .profil-offer {
  margin-top: 16px;
  padding: 18px;
  border: 0;
  border-radius: var(--bh-r);
  background: linear-gradient(140deg,
    rgba(240, 184, 64, .16),
    color-mix(in srgb, var(--bh-a) 18%, transparent));
}
.pr-recompense h2, .ep-solde .ep-s > span:first-child { margin: 0 0 4px; font-size: 17px; font-weight: 500; color: #fff; }
.pr-recompense p, .ep-quand { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .68); }
.pr-use-n { margin: 12px 0 0 !important; font-size: 13px; font-weight: 500; color: var(--bh-or); }
.pr-use-plans { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.pr-use-plans button { text-align: center !important; }

/* --- L'etat d'attente ---
   Le bloc reste visible quand aucun mois n'est acquis, mais
   il s'efface : il annonce, il ne propose pas encore. */
.pr-recompense.pr-use-attente {
  background: linear-gradient(140deg,
    rgba(240, 184, 64, .09),
    color-mix(in srgb, var(--bh-a) 11%, transparent));
}
.pr-use-attente .pr-use-n { color: rgba(255, 255, 255, .6); }
.pr-use-attente .m-btn, .btn-gold, .btn-ghost, .vs-b {
  color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .09);
}
.pr-use-attente .m-btn:hover { background: rgba(255, 255, 255, .09); }

/* =========================================================
   7. LES TROIS ETAPES
   ---------------------------------------------------------
   En colonnes courtes : sur une page de conviction, personne
   ne lit trois paragraphes. La numerotation reste, parce que
   l'ordre porte une information.
   ========================================================= */
.pr-etapes, .obj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; }
/* Chaque colonne tient sur deux lignes, titre comme phrase :
   les hauteurs restent egales et la rangee ne se decale pas. */
.pr-et, .obj-card { text-align: center; }
.pr-et .n {
  width: 26px; height: 26px;
  margin: 0 auto 9px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 12px; font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--bh-a), var(--bh-b));
}
.pr-et h4 {
  margin: 0 0 5px;
  min-height: 2.5em;
  font-size: 12.5px; font-weight: 500;
  line-height: 1.25;
  color: #fff;
}
.pr-et p {
  margin: 0;
  min-height: 2.9em;
  font-size: 11px; line-height: 1.45;
  color: rgba(255, 255, 255, .5);
}

/* =========================================================
   8. LES FILLEULS
   ---------------------------------------------------------
   Des lignes separees d'un filet. Une liste se parcourt ;
   des cartes se lisent une par une.

   Ces classes sont fabriquees par le script : sans regle,
   les filleuls arrivent sans style.
   ========================================================= */
.pr-f, .tx-i, .pa-c { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.pr-f + .pr-f, .tx-i + .tx-i, .pa-c + .pa-c { border-top: 1px solid rgba(255, 255, 255, .08); }
.pr-f-a {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 13.5px; font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--bh-a), var(--bh-b));
}
.pr-f-c, .tx-n, .pa-c-n, .pa-c-nom { flex: 1; min-width: 0; }
.pr-f-n, .pa-c-nom {
  margin: 0 0 2px;
  font-size: 13.5px; font-weight: 500; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pr-f-d, .tx-s, .pa-c-meta, .pa-c-date { margin: 0; font-size: 11.5px; color: rgba(255, 255, 255, .42); }
/* Le statut : du texte colore a droite, pas une pastille —
   c'est ce que fait le modele pour les variations. */
.pr-f-b, .pa-badge, .pa-st {
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 11.5px; font-weight: 500;
  white-space: nowrap;
  color: rgba(255, 255, 255, .45);
}
.pr-f-b.ok  { color: var(--bh-ok); }
.pr-f-b.att { color: var(--bh-or); }

/* L'ecran vide : une invitation, pas un constat. */
.pr-vide, .ep-vide, .pa-vide, .rc-vide {
  padding: 24px 6px;
  text-align: center;
  font-size: 12.5px; line-height: 1.7;
  color: rgba(255, 255, 255, .45);
}

/* =========================================================
   9. LA CARTE FINALE
   ---------------------------------------------------------
   L'emplacement d'image reutilisable : l'image se passe par
   --img, en attribut style. Sans elle, un cadre d'attente
   montre la place reservee au lieu de casser la page.
   ========================================================= */
.pr-illu, .illu-img {
  position: relative;
  min-height: 250px;
  display: flex; flex-direction: column; justify-content: flex-end;
  margin-top: 30px;
  padding: 20px;
  border-radius: var(--bh-r);
  overflow: hidden;
  background-color: rgba(255, 255, 255, .07);
  background-image: var(--img, none);
  /* L'image couvre toute la largeur du bloc et deborde en
     hauteur : 100 % de large lui donne la place, 220 % de haut
     lui donne de quoi glisser. */
  background-size: 100% 220%;
  background-position: 50% 0%;
  background-repeat: no-repeat;
  animation: pr-glisse 7s ease-in-out infinite alternate;
}

/* Le va-et-vient, du haut vers le bas puis retour. « alternate »
   evite la coupure seche d'une boucle qui repart a zero : le
   mouvement s'inverse au lieu de sauter. */
@keyframes pr-glisse {
  from { background-position: 50% 0%; }
  to   { background-position: 50% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-illu { animation: none; background-position: var(--cadre, 50% 32%); }
}
/* Le voile fonce vers le bas, la ou le texte se pose. */
.pr-illu::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(18, 14, 38, .22) 0%, rgba(12, 10, 26, .66) 54%, rgba(10, 8, 20, .94) 100%);
}
.pr-illu:not([style*="--img"])::after {
  content: 'image';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 12px; letter-spacing: .1em;
  color: rgba(255, 255, 255, .28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
  border-radius: inherit;
}
.pr-illu > * { position: relative; }
.pr-past {
  align-self: flex-start; margin-bottom: auto;
  padding: 6px 13px;
  border-radius: var(--bh-pill);
  font-size: 11.5px;
  background: rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.pr-illu h2 { margin: 0 0 7px; font-size: 23px; font-weight: 500; letter-spacing: -.02em; color: #fff; }
.pr-illu p  { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .8); }

/* =========================================================
   10. VOUS AVEZ ETE PARRAINE
   ========================================================= */
.pr-saisi, .cp-alerte {
  display: flex; align-items: center; gap: 12px;
  margin-top: 22px;
  padding: 13px 15px;
  border: 0;
  border-radius: var(--bh-r-sm);
  background: color-mix(in srgb, var(--bh-a) 16%, transparent);
}
.pr-saisi > i { flex-shrink: 0; font-size: 20px; color: var(--bh-a); }
.pr-saisi-t, .pa-acc-t { margin: 0 0 3px; font-size: 13.5px; font-weight: 500; color: #fff; }
.pr-saisi-d, .pa-acc-n { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, .6); }

.pr-in-w, .pt-r, .lp-act, .pa-bar { display: flex; gap: 8px; }
.pr-i, .cp-i, .pt-i, .pt-ta, .lp-i, .pa-in, .pa-sel, .profil-input {
  flex: 1;
  padding: 13px 16px;
  border: 0;
  border-radius: var(--bh-pill);
  font-family: inherit; font-size: 14px;
  text-align: center; letter-spacing: .1em;
  color: #fff;
  background: rgba(255, 255, 255, .10);
  outline: none;
  transition: background .18s ease;
}
.pr-i::placeholder { color: rgba(255, 255, 255, .35); letter-spacing: 0; }
.pr-i:focus { background: rgba(255, 255, 255, .16); }

.pr-msg, .cp-msg, .pt-msg, .lp-msg, .pa-msg, .vs-msg { margin: 12px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.pr-msg.ok  { color: var(--bh-ok); }
.pr-msg.err { color: var(--bh-non); }

.pr-regles, .pt-note, .pt-cond, .vs-note, .pa-n, .tx-t { margin: 11px 0 0; font-size: 11.5px; line-height: 1.65; color: rgba(255, 255, 255, .4); }

/* =========================================================
   11. LES BOUTONS
   ---------------------------------------------------------
   Translucides partout ; le blanc plein est reserve aux
   endroits ou il n'y a qu'une action possible.
   ========================================================= */
.m-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding: 14px 22px;
  border: 0;
  border-radius: var(--bh-pill);
  font-family: inherit;
  font-size: 14.5px; font-weight: 500;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, .17);
  transition: filter .18s ease, transform .18s ease, opacity .18s ease;
}
.m-btn:hover    { background: rgba(255, 255, 255, .24); }
.m-btn:active   { transform: scale(.985); }
.m-btn:disabled { opacity: .45; cursor: not-allowed; }
.m-btn.v, .m-btn.or { color: #14141d; background: #fff; }
.m-btn.v:hover, .m-btn.or:hover { filter: brightness(.92); background: #fff; }
.pr-in-w .m-btn { width: auto; flex-shrink: 0; margin: 0; padding-inline: 22px; }

/* =========================================================
   12. LE PANNEAU RESERVE
   ========================================================= */
.pa-sep { display: flex; align-items: center; gap: 12px; margin-top: 30px; }
.pa-sep-l { display: none; }
.pa-sep-t {
  font-size: 15px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: rgba(255, 255, 255, .62);
}
.pa-sep-t::after { content: ' \203A'; }

.pa, .pa-acc {
  margin-top: 12px;
  border: 0;
  border-radius: var(--bh-r);
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}
.pa-h, .pa-acc-hd {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 16px;
  background: none; border: 0;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
}
.pa-h:hover { background: rgba(255, 255, 255, .06); }
.pa-h-l, .pa-acc-l { display: flex; align-items: center; gap: 12px; text-align: left; min-width: 0; }
.pa-h-ic, .pa-acc-c, .pt-off-ic, .profil-2fa-ic {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--bh-a), var(--bh-b));
}
.pa-h-t { margin: 0 0 2px; font-size: 16px; font-weight: 500; color: #fff; }
.pa-h-s { margin: 0; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .58); }
.pa-h-f { font-size: 12px; color: rgba(255, 255, 255, .44); }
.pa-ch-w { flex-shrink: 0; color: rgba(255, 255, 255, .44); }

.pa-b, .pa-acc-bd { padding: 0 16px 16px; border: 0 !important; }
.pa-b.ferme { display: none; }

.pa-f { display: flex; flex-direction: column; gap: 16px; padding: 10px 0 16px; }
.pa-fg { text-align: left; }
.pa-fg label {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 12px;
  font-size: 15px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: rgba(255, 255, 255, .62);
}
.pa-fg label::after { content: '\203A'; font-size: 15px; line-height: 1; }

/* Tout est visible d'un coup : une rangee qui defile cache la
   moitie des choix, et rien ne dit qu'il faut la faire
   glisser. */
.pa-pills, .cp-choix, .pa-tabs, .profil-onglets { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 4px; background: none; }
/* ATTENTION : .pa-lg est le LIBELLE d'un filtre — « Formule »,
   « Periode », « Rechercher » — pas une pastille. Habille en
   pilule, il donnait l'illusion d'un bouton : on cliquait sur
   un titre et rien ne se passait. */
.pa-lg, .cp-h, .pt-h, .profil-field-lbl {
  display: flex; align-items: center; gap: 5px;
  margin: 0 0 12px;
  padding: 0;
  border: 0; border-radius: 0;
  background: none;
  cursor: default;
  font-size: 15px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: rgba(255, 255, 255, .62);
}
.pa-lg::after { content: '\203A'; font-size: 16px; line-height: 1; }

/* Les vraies pastilles, posees par le script dans #pa-plan et
   #pa-per. */
.pa-p, .cp-t, .pt-t, .pa-tab, .pa-tab-lien, .profil-onglet, .btn-ghost-sm, .btn-violet-sm {
  flex: 0 1 auto;
  margin: 0 2px 2px 0;
  padding: 9px 15px;
  border: 0; border-radius: var(--bh-pill);
  font-family: inherit; font-size: 12.5px; font-weight: 400;
  line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
  color: rgba(255, 255, 255, .70);
  background: rgba(255, 255, 255, .10);
  transition: color .18s ease, background .18s ease;
}
.pa-p:hover { color: #fff; background: rgba(255, 255, 255, .17); }
.pa-p.on { color: #14141d; background: #fff; font-weight: 500; }

/* Le champ de recherche du panneau : une icone et un champ
   dans la meme pilule. .pa-ch-w n'est pas un chevron. */
.pa-ch-w {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  border-radius: var(--bh-pill);
  background: rgba(255, 255, 255, .10);
}
.pa-ch-w > i { flex-shrink: 0; font-size: 17px; color: rgba(255, 255, 255, .5); }
.pa-ch-w .pa-i {
  flex: 1;
  padding: 13px 0 !important;
  border-radius: 0 !important;
  background: none !important;
}
.pa-ch-w:focus-within { background: rgba(255, 255, 255, .16); }

.pa-i {
  width: 100%;
  padding: 13px 16px;
  border: 0; border-radius: var(--bh-r-sm);
  font-family: inherit; font-size: 14px; line-height: 1.5;
  color: #fff !important;
  background: rgba(255, 255, 255, .10) !important;
  outline: none;
  transition: background .18s ease;
}
.pa-i::placeholder { color: rgba(255, 255, 255, .44); }
.pa-i:focus { background: rgba(255, 255, 255, .16) !important; }
select.pa-i {
  appearance: none; cursor: pointer; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.44) 50%),
                    linear-gradient(135deg, rgba(255,255,255,.44) 50%, transparent 50%);
  background-position: calc(100% - 19px) 53%, calc(100% - 14px) 53%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select.pa-i option { background: #241b3d; color: #fff; }

.pa-res { margin: 4px 0 14px; font-size: 12.5px; color: rgba(255, 255, 255, .48); }
.pa-ac { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pa-ac .m-btn { flex: 1 1 130px; width: auto; margin: 0; }

/* Le tableau : la seule exception, des donnees se lisent en
   colonnes alignees. */
.pa-tw {
  /* Plus de defilement lateral : seul le vertical reste. */
  overflow-x: hidden;
  overflow-y: auto;
  /* Une hauteur bornee : avec beaucoup de parrains, la page
     deviendrait interminable. Le tableau defile chez lui. */
  max-height: 420px;
  overscroll-behavior: contain;
  border-radius: var(--bh-r-sm);
  background: rgba(0, 0, 0, .18);
  -webkit-overflow-scrolling: touch;
}
.pa-t {
  /* Il tient dans la colonne : plus de defilement lateral, donc
     plus de barre en bas ni de colonne figee a gauche. */
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11.5px;
}
.pa-t th {
  position: sticky; top: 0;
  padding: 11px 12px;
  border: 0;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  text-align: left;
  color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .06);
}
.pa-t td {
  padding: 11px 8px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .78);
  font-variant-numeric: tabular-nums;
}
.pa-t tbody tr:hover td { background: rgba(255, 255, 255, .04); }
/* La colonne du parrain : bornee, alignee a gauche, coupee si
   le nom est long. Elle prenait la moitie du tableau. */
.pa-t th:first-child,
.pa-t td:first-child {
  width: 30%;
  text-align: left;
  color: #fff;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Les cinq colonnes de chiffres se partagent le reste. */
.pa-t th:not(:first-child),
.pa-t td:not(:first-child) { text-align: center; }

/* Sous 430 px, les deux colonnes de detail s'effacent : le
   total des abonnes suffit, et le tableau reste lisible sans
   qu'on ait a le faire glisser. */
@media (max-width: 430px) {
  .pa-t th:nth-child(4), .pa-t td:nth-child(4),
  .pa-t th:nth-child(5), .pa-t td:nth-child(5) { display: none; }
  .pa-t th:first-child, .pa-t td:first-child { width: 38%; }
}
.pa-glisse {
  display: flex; align-items: center; gap: 6px;
  margin-top: 9px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .4);
}

.pa-tw { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.pa-tw::-webkit-scrollbar { width: 6px; }
.pa-tw::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255,255,255,.2); }
.pa-tw::-webkit-scrollbar-track { background: transparent; }
.pa-code {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 11px; font-weight: 500;
  letter-spacing: .06em;
  color: var(--bh-or);
  background: rgba(240, 184, 64, .13);
}

/* =========================================================
   13. LA CHARPENTE, AU MODELE
   ---------------------------------------------------------
   L'en-tete et la barre du bas viennent de pages-modules.css
   et gardent l'ancienne grammaire. On les reprend ici, pour
   que la page entiere parle le meme langage — c'est ce qui
   manquait : les blocs suivaient le modele, le cadre non.
   ========================================================= */

/* --- L'en-tete : un rond, une pilule, deux ronds ---
   Revolut ne pose pas de bandeau. Rien ne separe la barre du
   fond : ni fond propre, ni bordure, ni ombre. */
:where(body.rv) .m-head {
  display: flex !important;
  align-items: center;
  gap: 10px;
  max-width: var(--bh-col);
  margin-inline: auto;
  padding: 14px 16px 10px !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Les elements de la barre partagent un gris sombre neutre.
   Un blanc translucide prendrait la teinte de la page et
   virerait au violet — le modele les garde gris. */
body.rv { --bh-tete: rgba(26, 26, 33, .72); }

:where(body.rv) .m-head-logo {
  flex-shrink: 0;
  gap: 0 !important;
  text-decoration: none;
}
:where(body.rv) .m-head-txt { display: none !important; }
:where(body.rv) .m-head-dot {
  width: 44px !important; height: 44px !important;
  display: grid !important; place-items: center;
  border-radius: 50% !important;
  /* Pastille blanche : le logo garde ses couleurs d'origine,
     H bleu marine compris, et se detache de la barre. */
  background: #fff !important;
  overflow: hidden;
  /* Aucune marge : le dessin est deja recadre au plus pres,
     l'ajouter le reduirait pour rien. */
  padding: 0 !important;
}
/* Le logo tient entier dans le cercle, sans etre recadre. */
:where(body.rv) .m-head-dot img {
  width: 100% !important; height: 100% !important;
  border-radius: 0;
  object-fit: contain !important;
}

/* La pilule de recherche, posee par entete-support.cjs. */
:where(body.rv) .m-rech {
  order: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--bh-pill);
  background: var(--bh-tete);
  color: rgba(255, 255, 255, .58);
  font-family: inherit;
  font-size: 14.5px;
  text-align: left;
  cursor: pointer;
  transition: background .18s ease;
}
:where(body.rv) .m-rech:hover { background: rgba(38, 38, 47, .82); }
:where(body.rv) .m-rech i { font-size: 18px; color: rgba(255, 255, 255, .78); }
:where(body.rv) .m-rech span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Le champ de recherche occupe la pilule sans la redessiner. */
:where(body.rv) .m-rech input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none !important;
  outline: none;
  font-family: inherit;
  font-size: 14.5px;
  color: #fff !important;
  padding: 0 !important;
}
:where(body.rv) .m-rech input::placeholder { color: rgba(255, 255, 255, .58); }
:where(body.rv) .m-rech input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* --- 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); }

:where(body.rv) .m-cloche,
:where(body.rv) .m-head-av {
  order: 2;
  flex-shrink: 0;
  width: 42px !important; height: 42px !important;
  display: grid !important;
  place-items: center;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--bh-tete) !important;
  color: #fff !important;
  font-size: 18px;
  overflow: hidden;
  cursor: pointer;
}
:where(body.rv) .m-head-av img {
  width: 100% !important; height: 100% !important;
  border-radius: 50%;
  object-fit: cover;
}
/* 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) .m-head-badge { display: none !important; }

/* La sous-barre n'existe pas dans le modele. */
:where(body.rv) .sub-bar { display: none !important; }

/* La barre de bureau non plus — mais on ne peut pas la
   supprimer : les menus de la cloche et du profil vivent
   dedans, et avatarMobileClic() les ouvre. La masquer d'un
   display:none les rendait muets, ce qui explique que les
   deux ronds ne repondaient plus.

   On la reduit donc a rien de visible, en laissant ses
   enfants capables de s'afficher. */
:where(body.rv) .nav {
  position: fixed !important;
  top: 0; left: 0;
  width: 100% !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: 1100 !important;
}
:where(body.rv) .nav-inner {
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
:where(body.rv) .nav-logo,
:where(body.rv) .nav-links { display: none !important; }
/* Les boutons disparaissent, les menus qu'ils ouvrent non. */
:where(body.rv) .nav-right { visibility: hidden; }
:where(body.rv) .profil-menu,
:where(body.rv) .cloche-menu,
:where(body.rv) .dropdown-menu { visibility: visible; }

/* --- La barre du bas : pilule flottante, icones seules --- */
:where(body.rv) .bnav {
  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: var(--bh-pill) !important;
  background: rgba(10, 10, 14, .9) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: none !important;
}
:where(body.rv) .bnav-item {
  width: 52px !important; height: 50px !important;
  flex: 0 0 auto;
  display: grid !important;
  place-items: center;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--bh-pill) !important;
  background: none !important;
  color: rgba(255, 255, 255, .72) !important;
  transition: background .18s ease, color .18s ease;
}
:where(body.rv) .bnav-item i { font-size: 21px !important; }
/* La pastille « bientot » reste un point, pas un bandeau. */
:where(body.rv) .bnav-soon {
  top: 8px !important; right: 10px !important;
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
}
/* Les libelles disparaissent : le modele n'en a pas. */
:where(body.rv) .bnav-item span:not(.bnav-soon) { display: none !important; }
:where(body.rv) .bnav-item.ici,
:where(body.rv) .bnav-item.actif,
:where(body.rv) .bnav-item.active {
  color: #fff !important;
  background: rgba(255, 255, 255, .13) !important;
}

/* --- Le pied de page n'existe pas dans le modele --- */
:where(body.rv) .foot { display: none !important; }

/* =========================================================
   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; }

/* --- La discussion ---
   Son style est fabrique en JavaScript, hors d'atteinte d'une
   feuille ordinaire : d'ou les !important. */
: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: calc(var(--su-bnav) + 54px) !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: min(460px, calc(100dvh - var(--su-bnav) - 130px)) !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: min(280px, calc(100dvh - var(--su-bnav) - 230px)) !important;
    bottom: calc(var(--su-bnav) + 40px) !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; }
}

/* Sur un ecran etroit, les panneaux prennent la largeur
   disponible et leur fleche suit les ronds, qui se
   rapprochent du bord. */
@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; }
}

/* =========================================================
   15. LE FLOTTEMENT AU DEFILEMENT
   ---------------------------------------------------------
   Les classes sont posees par flottement-support.cjs, qui
   observe l'entree des blocs dans l'ecran. Ici, seulement
   l'etat de depart et l'etat d'arrivee.

   J'avais d'abord fait l'effet avec animation-timeline:
   view(). Le navigateur le prend en charge et la regle
   s'appliquait — mais rien ne bougeait : cette ligne de temps
   n'observait pas le conteneur qui defile reellement sur
   cette page. Un observateur d'intersection ne pose pas cette
   question.
   ========================================================= */
:where(body.rv) .bh-flot,
:where(body.rv) .bh-flot-fin {
  will-change: opacity, transform;
  transform-origin: center 60%;
  transition: opacity .5s cubic-bezier(.22, .61, .36, 1),
              transform .55s cubic-bezier(.22, .61, .36, 1);
}
/* Le point de depart est conditionne a la marque posee par le
   script. Si celui-ci n'arrive pas, aucun bloc n'est cache —
   une page vide serait pire que l'absence d'effet. */
/* Le zoom : les grands blocs arrivent plus petits et
   grandissent en se remettant en place. A .93 le mouvement se
   voit sans donner le tournis — au-dela, un bloc large semble
   bondir. */
:where(html.bh-anim body.rv) .bh-flot {
  opacity: 0;
  transform: translateY(26px) scale(.93);
}
:where(html.bh-anim body.rv) .bh-flot-fin {
  opacity: 0;
  transform: translateY(12px) scale(.97);
}

:where(body.rv) .bh-flot.bh-vu,
:where(body.rv) .bh-flot-fin.bh-vu {
  opacity: 1;
  transform: none;
}

/* La rangee d'acces ne flotte pas : la transformation du
   flottement lui creerait un etage propre, et son menu
   repasserait sous les blocs suivants. */
:where(body.rv) .pr-acces.bh-flot,
:where(body.rv) .pr-code.bh-flot {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Le panneau reserve ne flotte pas. Il s'ouvre et se ferme,
   il change de hauteur, et son contenu arrive par vagues :
   l'effet le faisait apparaitre puis disparaitre a chaque
   mouvement. */
:where(body.rv) .pa.bh-flot,
:where(body.rv) .pa .bh-flot,
:where(body.rv) .pa .bh-flot-fin,
:where(body.rv) .pa-tk.bh-flot-fin {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Sans JavaScript, ou avec les animations reduites, rien ne
   doit rester invisible. */
@media (prefers-reduced-motion: reduce) {
  :where(body.rv) .bh-flot,
  :where(body.rv) .bh-flot-fin {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- Le bandeau d'installation ---
   Son bouton etait un lien bleu souligne, invisible sur ce
   fond. Il devient une pilule blanche : c'est l'action qu'on
   propose, elle doit se voir. */
/* --- Le bandeau d'installation ---
   Il empilait son bouton, son titre et sa phrase sur trois
   rangees pleine largeur, le bouton blanc en premier : on
   lisait l'action avant de savoir de quoi il s'agissait.

   Il devient une ligne : l'icone, le texte, puis le bouton —
   et la croix au coin. */
: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; }
}

/* =========================================================
   16. L'EMPILEMENT
   ---------------------------------------------------------
   Une seule echelle, du fond vers la surface. Cette feuille
   etant chargee en dernier, c'est elle qui tranche.
   ========================================================= */
:where(body.rv) .pr-in { z-index: 1 !important; }
:where(body.rv) .m-head,
:where(body.rv) .nav,
:where(body.rv) .sub-bar,
:where(body.rv) .bnav { z-index: 1000 !important; }
: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; }
:where(body.rv) .app-sheet-ov { z-index: 1500 !important; }
:where(body.rv) .su-modal     { z-index: 2000 !important; }

/* =========================================================
   17. ACCESSIBILITE
   ========================================================= */
:where(body.rv) .pr-cp:focus-visible,
:where(body.rv) .pr-s:focus-visible,
:where(body.rv) .m-btn:focus-visible,
:where(body.rv) .pa-h:focus-visible,
:where(body.rv) .pa-p:focus-visible,
:where(body.rv) .pa-lg:focus-visible {
  outline: 2px solid var(--bh-a);
  outline-offset: 3px;
}

/* =========================================================
   18. TRES PETITS ECRANS
   ========================================================= */
@media (max-width: 380px) {
  .pr-h2 { font-size: 27px; }
  .pr-c .n { font-size: 19px; }
  .pr-c .l { font-size: 9px; }
  .pr-s span { font-size: 9.5px; }
  .pr-et h4 { font-size: 11.5px; }
  .pr-et p { font-size: 10px; }
  .pr-s i { border-radius: 14px; font-size: 19px; }
  .pr-illu h2 { font-size: 20px; }
  .pr-in-w { flex-direction: column; }
  .pr-in-w .m-btn { width: 100%; }
}


/* =========================================================
   17. CE QUI N'A PAS D'EQUIVALENT
   ---------------------------------------------------------
   Les classes propres aux partenaires. Elles reprennent les
   memes surfaces et les memes arrondis que le reste, par les
   jetons — aucune valeur nouvelle n'est inventee ici.
   ========================================================= */

/* La colonne de cette page. */
.m-in { padding-inline: 0; background: none; border: 0; }
.fond-heros { display: none; }
.page { background: none; border: 0; }
.page-inner { max-width: var(--bh-col); margin-inline: auto; box-sizing: border-box; }

/* Le badge d'etat du heros. */
.hero-grid { display: block; padding: 0; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 14px;
  padding: 6px 13px;
  border: 0; border-radius: var(--bh-pill);
  font-size: 11.5px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: var(--bh-txt2);
  background: rgba(255, 255, 255, .12);
}
.hero-badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bh-ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bh-ok) 22%, transparent);
}
.hero-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.hero-btns > * { flex: 1 1 140px; margin-top: 0 !important; }
.hero-bloc-ic, .hero-img, .hero-img-halo, .hero-dots { display: none; }

/* L'en-tete de bloc. */
.bloc-hd { margin-bottom: 12px; }

/* Le solde : deux lignes, libelle a gauche, montant a droite. */
.ep-s { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ep-s + .ep-s { margin-top: 10px; }
.ep-s > span:last-child, .ep-s b {
  font-size: 19px; font-weight: 500; color: #fff;
  font-variant-numeric: tabular-nums;
}
.ep-quand { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .10); }
.ep-quand b { color: #fff; font-weight: 500; }

/* Les visuels : la tuile de partage, avec son icone. */
.ep-visuels > * {
  display: block; padding: 0; border: 0; background: none;
  cursor: pointer; text-decoration: none; text-align: center;
  font-size: 10.5px; color: rgba(255, 255, 255, .9);
}
.ep-visuels > * > i {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 1;
  margin-bottom: 8px;
  border-radius: 16px;
  font-size: 21px; color: #fff;
  background: rgba(255, 255, 255, .13);
  transition: background .18s ease, transform .18s ease;
}
.ep-visuels > *:hover > i  { background: rgba(255, 255, 255, .20); }
.ep-visuels > *:active > i { transform: scale(.95); }
.ep-ct.ok { background: rgba(52, 211, 153, .12); }
.ep-ct.ok > i { color: var(--bh-ok); }
.ep-ct > i, .pr-gain > i { flex-shrink: 0; }

/* Les regles du contrat : elles portent des interdictions
   reglementaires, elles ne sont pas atténuees. */
.obj-card { box-shadow: inset 2px 0 0 rgba(248, 113, 113, .55); background: rgba(224, 72, 60, .11); }
.obj-ic {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 15px;
  color: #ff9d94;
  background: rgba(224, 72, 60, .18);
}

/* L'alerte de versement : meme forme que le bloc « vous avez
   ete parraine », mais en rouge — ici l'argent est bloque. */
.cp-alerte { box-shadow: inset 2px 0 0 rgba(248, 113, 113, .6); background: rgba(224, 72, 60, .14); }
.cp-alerte > i { color: #ff9d94; }
.cp-alerte.ok { background: rgba(52, 211, 153, .12); box-shadow: inset 2px 0 0 rgba(52, 211, 153, .6); }
.cp-alerte.ok > i { color: var(--bh-ok); }
.cp-f { display: none; }
.cp-f.on, .cp-f.momo, .cp-f.banque { display: block; }
.cp-g { margin-bottom: 14px; }
.cp-r { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--bh-r-sm); background: rgba(255,255,255,.07); font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.72); }
.cp-r b { color: #fff; font-weight: 500; }
.cp-mod { width: auto; padding-inline: 20px; }
.cp-ok { display: none; }
.cp-ok.on { display: flex; align-items: center; gap: 10px; }

/* La candidature. */
.pt-g { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pt-full, .pt-g > .pt-full { grid-column: 1 / -1; }
.pt-f { margin-bottom: 0; }
.pt-ta { resize: vertical; min-height: 110px; }
.pt-cond { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--bh-or) 55%, transparent); padding: 12px 14px; border-radius: var(--bh-r-sm); background: rgba(255,255,255,.07); }
.pt-ok { display: none; }
.pt-ok.on {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; border-radius: var(--bh-r-sm);
  background: rgba(52, 211, 153, .12);
  font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .85);
}
#pt-form, .pt-form { display: block; }
.pt { padding: 0; }

/* Le detail des commissions. */
.tx { padding: 0; background: none; }
.tx-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 12.5px; color: rgba(255,255,255,.5); }
.tx-b { display: flex; flex-direction: column; gap: 8px; }
.tx-p { flex-shrink: 0; font-size: 13px; font-weight: 500; color: var(--bh-or); font-variant-numeric: tabular-nums; }

/* Les trois fenetres : visuels, recu, configuration. Meme
   grammaire que la fenetre de detail du support. */
.vs, .rc, .lp-cfg {
  position: fixed; inset: 0; z-index: 2000;
  display: none; align-items: flex-end; justify-content: center;
  padding: 0;
  background: rgba(10, 8, 20, .72);
}
.vs.on, .vs.open, .vs.visible,
.rc.on, .rc.open, .rc.visible,
.lp-cfg.on, .lp-cfg.open { display: flex; }
.vs-box, .rc-bd, .lp-box {
  width: 100%;
  max-width: min(var(--su-fen), calc(100vw - 24px));
  max-height: calc(100dvh - 60px);
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 26px 26px 0 0;
  background: #241c3e;
  text-align: left;
}
.vs-box::before, .lp-box::before {
  content: ''; display: block;
  width: 38px; height: 4px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
}
.vs-hd, .rc-hd, .lp-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.vs-h, .rc-hd b, .lp-h b { margin: 0; font-size: 18px; font-weight: 500; color: #fff; }
.vs-x, .rc-x {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  cursor: pointer; font-size: 16px;
  color: var(--bh-txt2);
  background: rgba(255, 255, 255, .12);
}
.vs-x:hover, .rc-x:hover { color: #fff; background: rgba(255, 255, 255, .18); }
.vs-r { margin-bottom: 16px; }
.vs-som { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; font-size: 13.5px; cursor: pointer; color: rgba(255,255,255,.62); }
.vs-f { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vs-fic {
  position: relative; aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: var(--bh-r-sm);
  cursor: pointer; font-size: 20px; color: #fff;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.vs-fic img { width: 100%; height: 100%; object-fit: cover; }
.vs-i { width: 100%; border-radius: var(--bh-r-sm); display: block; }
.vs-ou { font-size: 11.5px; color: rgba(255, 255, 255, .45); }
.rc-p { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .75); }
.lp-ok  { font-size: 12.5px; color: var(--bh-ok); }
.lp-non { font-size: 12.5px; color: rgba(255, 255, 255, .45); }

/* Le panneau reserve : le detail des fiches. */
/* ATTENTION : ne jamais forcer la fermeture par « :not() ».
   Cette regle disait « tout ce qui n'a pas la classe ouvert
   reste cache » — or le script de la page utilise une autre
   classe. Le panneau restait donc ferme meme au clic, et meme
   au clic simule.

   On ne cache que ce qui est explicitement marque ferme, et on
   accepte les quatre noms possibles pour l'ouverture. */
/* L'ouverture peut etre marquee a DEUX endroits : sur le corps
   lui-meme, ou sur son conteneur .pa-acc. La mesure a montre
   que le corps ne porte aucune classe — elle est donc sur le
   parent, et une regle qui ne regarde que le corps ne peut
   rien voir.

   On ferme par defaut, et on ouvre des que l'un des deux porte
   la marque, quel que soit son nom. */
.pa-acc-bd { display: none; }

.pa-acc-bd.ouvert,
.pa-acc-bd.open,
.pa-acc-bd.on,
.pa-acc.ouvert  > .pa-acc-bd,
.pa-acc.open    > .pa-acc-bd,
.pa-acc.on      > .pa-acc-bd,
.pa-acc.ouvert    .pa-acc-bd,
.pa-acc.open      .pa-acc-bd,
.pa-acc.on        .pa-acc-bd { display: block; }

/* « ferme » l'emporte toujours. */
.pa-acc-bd.ferme,
.pa-acc-bd.close,
.pa-acc.ferme .pa-acc-bd { display: none !important; }

/* Le panneau d'administration vit hors de la colonne : son
   parent est .page, pas .page-inner. Sans ces deux lignes il
   reste pleine largeur, cale a gauche de l'ecran. */
.pa-adm {
  width: 100%;
  max-width: var(--bh-col);
  margin-inline: auto;
  box-sizing: border-box;
  padding-inline: 18px;
}
.pa-acc-r { flex-shrink: 0; color: rgba(255, 255, 255, .44); }
.pa-c-hd { display: flex; align-items: center; gap: 12px; }
.pa-c-m, .pa-c-msg { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.72); }
.pa-c-a, .pa-c-b { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.pa-c-a > *, .pa-c-b > * { flex: 1 1 120px; margin-top: 0 !important; }
.pa-c-h { font-size: 12px; color: rgba(255, 255, 255, .5); }
.pa-somme, .pa-verse, .pa-paie { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--bh-or); }
.pa-sous, .pa-echeance { font-size: 11.5px; color: rgba(255, 255, 255, .55); }
.pa-arch { opacity: .5; }
.pa-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pa-ct { font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.pa-rech > i { flex-shrink: 0; font-size: 16px; color: rgba(255, 255, 255, .5); }
.pa-rech .pa-in { padding: 12px 0 !important; border-radius: 0 !important; background: none !important; }

/* Les etiquettes et les messages qui traversent la page. */
.btn-gold { color: #14141d !important; background: #fff !important; }
.btn-danger-sm {
  padding: 9px 15px; border: 0; border-radius: var(--bh-pill);
  font-family: inherit; font-size: 12.5px; cursor: pointer;
  color: #ff9d94; background: rgba(224, 72, 60, .16);
}
.lbl-gold, .lbl-teal, .lbl-violet {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: var(--bh-pill);
  font-size: 11px; font-weight: 500;
}
.lbl-gold   { color: #1a1207; background: var(--bh-or); }
.lbl-teal   { color: #04231a; background: var(--bh-ok); }
.lbl-violet { color: #fff; background: linear-gradient(135deg, var(--bh-a), var(--bh-b)); }
.flash-ok, .flash-err {
  position: fixed; left: 50%; bottom: calc(var(--su-bnav) + 20px);
  transform: translateX(-50%); z-index: 2500;
  max-width: calc(100vw - 32px);
  padding: 12px 18px; border-radius: var(--bh-pill);
  font-size: 13px; font-weight: 500;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.flash-ok  { color: #04231a; background: var(--bh-ok); }
.flash-err { color: #fff;    background: var(--bh-non); }
.gold, .or { color: var(--bh-or); }
.vert { color: var(--bh-ok); }
.rouge, .danger { color: var(--bh-non); }
.violet { color: color-mix(in srgb, var(--bh-a) 75%, #fff); }
.gris { color: rgba(255, 255, 255, .5); }
.wht  { color: #fff; }
.gold-grad { color: var(--bh-or); }
.badge-soon, .soon {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: var(--bh-pill);
  font-size: 10.5px; color: rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .10);
}
.plan-free { color: rgba(255,255,255,.8) !important; background: rgba(255,255,255,.12) !important; }
.tick { color: var(--bh-ok); }
.ttl  { font-weight: 500; color: #fff; }
.fi, .gh, .sup, .sym, .name, .email, .lg { min-width: 0; }
.no, .non { display: none !important; }
.sub, .sub-bar-inner { padding: 0; background: none; border: 0; }
.sub-bar-back, .sub-bar-title { display: none; }
.sub-bar-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sub-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border: 0; border-radius: var(--bh-pill);
  font-size: 12.5px; white-space: nowrap; text-decoration: none;
  color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .12);
}
.sub-tab.on, .sub-tab.actif { color: #14141d; font-weight: 500; background: #fff; }

@media (max-width: 380px) {
  .pt-g { grid-template-columns: 1fr; }
  .ep-visuels { grid-template-columns: repeat(3, 1fr); }
  .vs-f { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   18. LA PLAQUETTE, AU MODELE
   ---------------------------------------------------------
   Les classes posees par influenceurs-modele.cjs. Elles
   reprennent les regles deja validees — pl-acces sur
   pr-acces, pl-sim sur pr-f — et n'ajoutent que ce qui
   n'existait nulle part.
   ========================================================= */
.pl-modele { display: block; }

/* Le taux tient la place du titre : c'est le seul argument qui
   decide un createur. */
.hero-h1 .gold {
  display: block;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--bh-or);
}
.pl-sous {
  margin-top: 10px !important;
  max-width: 17ch !important;
  font-size: 20px !important;
  font-weight: 500;
  line-height: 1.25 !important;
  color: #fff !important;
}
.pl-fin { margin-top: 9px !important; font-size: 13px !important; }

/* La rangee d'acces : les memes regles que sur le parrainage. */
.pl-acces { position: relative; display: flex; align-items: stretch; gap: 7px; margin-top: 22px; }
.pl-acces-l {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 42px; padding: 9px 16px;
  border: 0; border-radius: var(--bh-pill);
  font-family: inherit; font-size: 12.5px; font-weight: 400;
  text-align: center; text-decoration: none;
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .12);
  transition: color .18s ease, background .18s ease;
}
.pl-acces-l i { font-size: 15px; color: var(--bh-or); }
.pl-acces-l:hover { color: #fff; background: rgba(255, 255, 255, .19); }
.pl-acces-m {
  flex-shrink: 0; width: 42px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--bh-pill);
  cursor: pointer; font-size: 17px; color: #fff;
  background: rgba(255, 255, 255, .12);
  transition: background .18s ease, transform .18s ease;
}
.pl-acces-m:hover  { background: rgba(255, 255, 255, .19); }
.pl-acces-m:active { transform: scale(.95); }

/* La simulation : la ligne de liste, avec le montant a droite. */
.pl-sim { display: flex; flex-direction: column; gap: 8px; }
.pl-sim-l {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  border: 0; border-radius: var(--bh-r-sm);
  background: rgba(255, 255, 255, .07);
}
.pl-sim-l > span:first-child { flex: 1; min-width: 0; font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.pl-sim-l > span:last-child {
  flex-shrink: 0;
  font-size: 14px; font-weight: 500;
  color: var(--bh-or);
  font-variant-numeric: tabular-nums;
}

/* Les tuiles : la grille du partage, en quatre colonnes. */
.pl-tuiles { grid-template-columns: repeat(4, 1fr); }
.pl-tuiles > span { display: block; }

/* Les reperes hors panneau. */
.pl-rep { margin: 26px 0 12px !important; }

/* La regle reglementaire, avant le bouton. */
.pl-regle { margin-top: 20px; }

@media (max-width: 380px) {
  .hero-h1 .gold { font-size: 38px; }
  .pl-sous { font-size: 18px !important; }
}

/* =========================================================
   19. LA PLAQUETTE REORGANISEE
   ---------------------------------------------------------
   Les classes posees par plaquette-partenaires.cjs. Elles
   reprennent les regles deja validees et n'ajoutent que ce qui
   n'existait nulle part.
   ========================================================= */
.pl-modele-v2 { display: block; }

/* Le taux tient la place du titre. */
.hero-h1 .gold {
  display: block;
  font-size: 46px; line-height: 1;
  letter-spacing: -.03em;
  color: var(--bh-or);
}
.pl-sous {
  margin: 10px auto 0 !important;
  max-width: 20ch;
  font-size: 19px; font-weight: 500;
  line-height: 1.25;
  color: #fff;
}

/* Les deux acces du heros. */
.pl-acces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pl-acces-l {
  flex: 1 1 150px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 10px 16px;
  border: 0; border-radius: var(--bh-pill);
  font-family: inherit; font-size: 13px; font-weight: 400;
  text-decoration: none;
  color: rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .12);
  transition: color .18s ease, background .18s ease;
}
.pl-acces-l:first-child { color: #14141d; font-weight: 500; background: #fff; }
.pl-acces-l:first-child i { color: #14141d; }
.pl-acces-l i { font-size: 15px; color: var(--bh-or); }
.pl-acces-l:hover { background: rgba(255, 255, 255, .19); }
.pl-acces-l:first-child:hover { filter: brightness(.92); background: #fff; }

/* Le tableau des prix : trois colonnes, la derniere en or. */
.pl-prix { display: flex; flex-direction: column; gap: 6px; }
.pl-prix-l {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  border: 0; border-radius: var(--bh-r-sm);
  font-size: 12.5px;
  background: rgba(255, 255, 255, .07);
}
.pl-prix-l > span:nth-child(2),
.pl-prix-l > span:nth-child(3) {
  min-width: 68px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.pl-prix-l > span:first-child { color: rgba(255, 255, 255, .82); }
.pl-prix-l > span:nth-child(2) { color: rgba(255, 255, 255, .5); }
.pl-g { font-weight: 500; color: var(--bh-or); }
/* L'en-tete du tableau : pas une ligne, un reperage. */
.pl-prix-h {
  padding: 0 13px 4px;
  background: none;
  font-size: 10.5px;
  color: rgba(255, 255, 255, .42);
}
.pl-prix-h > span { color: inherit !important; }

/* L'acces offert : la seule carte coloree de la plaquette. */
.pl-offert {
  margin-top: 14px;
  padding: 18px;
  border: 0; border-radius: var(--bh-r);
  background: linear-gradient(140deg,
    rgba(240, 184, 64, .16),
    color-mix(in srgb, var(--bh-a) 18%, transparent));
}
.pl-offert-b {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 11px;
  border-radius: var(--bh-pill);
  font-size: 11px; font-weight: 500;
  color: #1a1207; background: var(--bh-or);
}
.pl-offert h2 { margin: 0 0 8px; font-size: 18px; font-weight: 500; color: #fff; }
.pl-offert p { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.pl-offert p b { color: #fff; font-weight: 500; }
.pl-offert-n {
  margin-top: 12px !important;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 12px !important;
  color: rgba(255, 255, 255, .6) !important;
}

/* Le fonctionnement : quatre colonnes sur bureau, deux sur
   telephone. */
.pl-etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; }
.pl-et { text-align: center; }
.pl-et .n {
  width: 26px; height: 26px; margin: 0 auto 9px;
  display: grid; place-items: center; border-radius: 50%;
  font-size: 12px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--bh-a), var(--bh-b));
}
.pl-et h4 { margin: 0 0 5px; min-height: 2.4em; font-size: 12.5px; font-weight: 500; line-height: 1.25; color: #fff; }
.pl-et p { margin: 0; font-size: 11px; line-height: 1.45; color: rgba(255, 255, 255, .5); }

/* Les conditions : trois qui rassurent, une qui met en garde. */
.pl-cond { display: flex; flex-direction: column; gap: 9px; }
.pl-c {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 14px;
  border: 0; border-radius: var(--bh-r-sm);
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 2px 0 0 rgba(52, 211, 153, .5);
}
.pl-c > i { flex-shrink: 0; font-size: 17px; color: var(--bh-ok); }
.pl-c p { margin: 0; font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.pl-c p b { color: #fff; font-weight: 500; }
/* Celle-ci porte une interdiction reglementaire : elle n'est
   pas atténuee. */
.pl-c-non {
  background: rgba(224, 72, 60, .12);
  box-shadow: inset 2px 0 0 rgba(248, 113, 113, .6);
}
.pl-c-non > i { color: #ff9d94; }

.pl-rep { margin: 26px 0 12px !important; }

@media (max-width: 430px) {
  .hero-h1 .gold { font-size: 38px; }
  .pl-sous { font-size: 17px !important; }
  .pl-etapes { grid-template-columns: repeat(2, 1fr); }
  .pl-prix-l { grid-template-columns: 1fr auto; row-gap: 4px; }
  .pl-prix-l > span:nth-child(2) { grid-column: 2; }
  .pl-prix-l > span:nth-child(3) { grid-column: 2; }
  .pl-prix-h { display: none; }
}

/* =========================================================
   20. LE PANNEAU D'ADMINISTRATION, EN DETAIL
   ---------------------------------------------------------
   Les classes que le script fabrique a l'ouverture : le
   selecteur de taux, les onglets, le tri, et les fiches de
   candidature avec leurs actions.
   ========================================================= */

/* --- Le taux des nouveaux partenaires --- */
.pa-taux { margin-bottom: 16px; }
.pa-taux-p { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.pa-taux-p button, .pa-taux-p .pa-p {
  flex: 0 1 auto;
  padding: 9px 16px;
  border: 0; border-radius: var(--bh-pill);
  font-family: inherit; font-size: 13px;
  cursor: pointer;
  color: rgba(255, 255, 255, .70);
  background: rgba(255, 255, 255, .10);
}
.pa-taux-p button.on, .pa-taux-p .pa-p.on,
.pa-taux-p button.actif { color: #14141d; font-weight: 500; background: #fff; }

/* --- Les onglets et le tri --- */
.pa-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pa-tab, .pa-tab-lien {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px;
  border: 0; border-radius: var(--bh-pill);
  font-family: inherit; font-size: 12.5px;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  color: rgba(255, 255, 255, .70);
  background: rgba(255, 255, 255, .10);
}
.pa-tab.actif, .pa-tab.on { color: #14141d; font-weight: 500; background: #fff; }
/* Le compteur de chaque onglet. */
.pa-tab b, .pa-tab .n {
  font-weight: 500;
  opacity: .7;
}

/* --- Une fiche de candidature --- */
.pa-c {
  padding: 14px;
  border: 0; border-radius: var(--bh-r-sm);
  background: rgba(255, 255, 255, .07);
}
.pa-c + .pa-c { margin-top: 9px; }

.pa-c-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pa-c-nom, .pa-c-n {
  font-size: 14.5px; font-weight: 500; color: #fff;
  overflow: hidden; text-overflow: ellipsis;
}
.pa-c-meta, .pa-c-date {
  margin-top: 3px;
  font-size: 11.5px; line-height: 1.5;
  color: rgba(255, 255, 255, .5);
  overflow-wrap: anywhere;
}
.pa-c-date { flex-shrink: 0; white-space: nowrap; }

/* Les etiquettes : pays, taille d'audience, sujets. */
.pa-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.pa-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--bh-pill);
  font-size: 11px;
  color: rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .10);
}

/* Le message du candidat : cite, donc detache. */
.pa-c-msg, .pa-c-m {
  margin: 10px 0 0;
  padding: 10px 13px;
  border-radius: 12px;
  font-size: 12.5px; line-height: 1.6; font-style: italic;
  color: rgba(255, 255, 255, .72);
  background: rgba(0, 0, 0, .18);
}

/* Le lien de parrainage attribue, avec son bouton copier. */
.pa-lien {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
  padding: 6px 6px 6px 14px;
  border-radius: var(--bh-pill);
  background: rgba(0, 0, 0, .26);
}
.pa-lien span, .pa-lien input {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none;
  font-family: inherit; font-size: 11.5px;
  color: var(--bh-or);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pa-lien button {
  flex-shrink: 0;
  padding: 7px 13px;
  border: 0; border-radius: var(--bh-pill);
  font-family: inherit; font-size: 11.5px;
  cursor: pointer;
  color: #fff; background: rgba(255, 255, 255, .14);
}

/* Les actions : accepter, refuser, renvoyer, voir le profil. */
.pa-c-a, .pa-c-b { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.pa-c-a > *, .pa-c-b > * {
  flex: 1 1 108px; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 12px;
  border: 0; border-radius: var(--bh-pill);
  font-family: inherit; font-size: 12.5px;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  color: rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .10);
  transition: background .18s ease, color .18s ease;
}
.pa-c-a > *:hover, .pa-c-b > *:hover { color: #fff; background: rgba(255, 255, 255, .18); }
/* Accepter : la seule action affirmative, donc la seule en
   vert. Refuser reste sobre — un refus ne se decide pas au
   reflexe. */
.pa-c-a > .ok, .pa-c-a > .accepter, .pa-c-b > .ok {
  color: #04231a; font-weight: 500; background: var(--bh-ok);
}
.pa-c-a > .ok:hover, .pa-c-b > .ok:hover { filter: brightness(.93); background: var(--bh-ok); }
.pa-c-a > .non, .pa-c-a > .refuser, .pa-c-b > .non {
  color: #ff9d94; background: rgba(224, 72, 60, .14);
}

/* L'etat : acceptee, refusee, archivee. */
.pa-badge, .pa-st {
  display: inline-flex; align-items: center; gap: 5px;
  flex-shrink: 0;
  padding: 4px 11px;
  border-radius: var(--bh-pill);
  font-size: 11px; font-weight: 500;
  white-space: nowrap;
  color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .12);
}
.pa-badge.ok, .pa-st.ok { color: #04231a; background: var(--bh-ok); }
.pa-badge.non, .pa-st.non { color: #fff; background: rgba(224, 72, 60, .55); }

/* --- Rien a afficher --- */
.pa-vide {
  padding: 26px 10px;
  text-align: center;
  font-size: 12.5px; line-height: 1.7;
  color: rgba(255, 255, 255, .45);
}

@media (max-width: 430px) {
  .pa-c-hd { flex-direction: column; gap: 4px; }
  .pa-c-date { align-self: flex-start; }
  .pa-c-a > *, .pa-c-b > * { flex: 1 1 100%; }
}

/* =========================================================
   21. RIEN NE DEBORDE
   ---------------------------------------------------------
   Les courriels et les liens de profil sont longs et ne
   contiennent pas d'espace : sans consigne, le navigateur ne
   les coupe pas et ils poussent la fiche hors de l'ecran.
   ========================================================= */
/* Le panneau lui-meme est exclu : sinon cette ligne ecrase la
   largeur de colonne posee plus haut, et il repart pleine
   largeur, cale a gauche. C'est ce qui vient d'arriver. */
.pa-adm * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.pa-adm {
  width: 100%;
  max-width: var(--bh-col) !important;
  margin-inline: auto !important;
  box-sizing: border-box;
  padding-inline: 18px;
}

.pa-c, .pa-c-hd, .pa-c-nom, .pa-c-n, .pa-c-meta, .pa-c-date,
.pa-c-msg, .pa-c-m, .pa-tag, .pa-lien span, .pa-lien input {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Le nom passe a la ligne plutot que d'etre coupe. Avec
   « nowrap » et « overflow: hidden » sur un element flexible a
   largeur minimale nulle, il se reduisait a rien : quatre noms
   avaient purement disparu de la liste. */
.pa-c-nom, .pa-c-n {
  /* Le nom prend toute la place disponible sur sa ligne. A
     6 caracteres de largeur minimale, « Kouadio kouassi
     siprien » se pliait sur trois lignes dans 52 px. */
  flex: 1 1 100%;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
/* La date passe sous le nom plutot que de lui disputer la
   ligne : sur 412 px, les deux ne tiennent pas cote a cote. */
.pa-c-hd { flex-wrap: wrap; }
.pa-c-date { margin-left: 0 !important; }

/* Le lien de profil : coupe, jamais etale. */
.pa-c-a a, .pa-c-b a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Le panneau lui-meme ne peut pas depasser la colonne. */
.pa-adm { overflow-x: hidden; }

/* =========================================================
   22. LES ECARTS DANS LE PANNEAU
   ---------------------------------------------------------
   Le script fabrique ses fiches avec des classes que je ne
   connais pas toutes. Plutot que de les deviner une a une, on
   pose des ecarts par la structure : deux elements voisins ne
   doivent jamais se toucher.

   Sans cela on lisait « Candidatures4Partenaires2 », « Voir le
   profilAccepterRefuser », « ...G90KCopier ».
   ========================================================= */

/* Toute rangee du panneau respire. */
.pa-acc-bd > div,
.pa-acc-bd > p,
.pa-c > div { max-width: 100%; }

/* Deux boutons, ou un lien et un bouton, ne se touchent pas. */
.pa-acc-bd :is(a, button) + :is(a, button) { margin-left: 7px; }

/* Les etiquettes et les compteurs se detachent du texte qui
   les precede. */
.pa-acc-bd :is(span, b, em) + :is(span, b, em) { margin-left: 6px; }

/* Une rangee d'actions : les boutons se repartissent et
   passent a la ligne si la place manque. */
.pa-c > :is(div, p):last-child:has(a, button) {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.pa-c > :is(div, p):last-child:has(a, button) :is(a, button) { margin-left: 0 !important; }

/* Les onglets : un ecart franc entre le libelle et son
   compteur. */
.pa-tab, .pa-tab-lien { gap: 7px; }

/* Le lien de parrainage et son bouton copier. */
.pa-acc-bd :is(a, span)[href*="?p="] + button,
.pa-lien :is(span, input) + button { margin-left: 8px; }

/* Le choix du tri, quand le script le rend en liste de
   boutons plutot qu'en menu. */
.pa-tri, .pa-sort { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 14px; }
.pa-tri :is(a, button), .pa-sort :is(a, button) {
  margin-left: 0 !important;
  padding: 8px 14px;
  border: 0; border-radius: var(--bh-pill);
  font-family: inherit; font-size: 12px;
  cursor: pointer;
  color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .10);
}
.pa-tri :is(a, button).on, .pa-sort :is(a, button).on,
.pa-tri :is(a, button).actif { color: #14141d; font-weight: 500; background: #fff; }

/* ===== BRVMH-ADMIN-PARTENAIRES-V1 : debut ===== */
/* Pourquoi ce bloc existe : ligne 631, .pa-c est agregee a .pr-f et
   .tx-i, deux lignes de liste horizontales. La carte de candidature
   n en est pas une : ses cinq enfants doivent s empiler. */

/* 1. La carte redevient une pile. */
.pa-c { display: block; }

/* 2. Le nom ne se coupe plus au milieu d un mot. */
.pa-c-nom, .pa-c-n { word-break: normal; overflow-wrap: break-word; }

/* 3. Une etiquette tient sur une ligne ou ne tient pas du tout. */
.pa-tag { white-space: nowrap; }

/* 4. Icone et libelle dans le flux, jamais superposes. */
.pa-c-a > *, .pa-c-b > * {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; white-space: nowrap;
}

/* 5. Le taux : quatre boutons sur une ligne.
   .tx-b sert deja au detail des commissions (ligne 2277), ou b veut
   dire bloc. On ne corrige pas cette regle, on la contourne par le
   conteneur reel des boutons, #tx-p.
   Valeurs d etat reprises telles quelles de .pr-acces-m du parrainage :
   fond .12, actif #14141d sur #fff, bordure nulle, rayon pilule. */
#tx-p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#tx-p .tx-b {
  flex-direction: row;
  width: auto; height: 42px; padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0;
  border: 0; border-radius: var(--bh-pill);
  cursor: pointer; white-space: nowrap;
  font-size: 13px; font-weight: 500;
  color: #fff; background: rgba(255, 255, 255, .12);
  transition: background .18s ease, transform .18s ease;
}
#tx-p .tx-b:hover  { background: rgba(255, 255, 255, .19); }
#tx-p .tx-b:active { transform: scale(.95); }
#tx-p .tx-b.on     { color: #14141d; background: #fff; }
#tx-p .tx-b[disabled] { opacity: .5; cursor: default; }

/* 6. Le sous-titre du taux etait illisible : gris du modele. */
#tx-s { color: rgba(255, 255, 255, .66); }
/* ===== BRVMH-ADMIN-PARTENAIRES-V1 : fin ===== */

/* ===== BRVMH-ADMIN-PARTENAIRES-V2 : debut ===== */

/* 1. Le conteneur de defilement. Rien ne doit passer sous la barre du
      haut ni sous la pilule du bas. */
#pa-liste { padding-top: 12px; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

/* 2. Les trois lignes a action : contrat, coordonnees de paiement, code.
      Structure commune <i> + <span> + <small>. Le <small> etait colle au
      texte (Contrat signe le 13 aout 2026Ouvrir) faute de mise en ligne. */
.pa-ct, .pa-paie, .pa-code {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; margin-top: 10px;
}
.pa-ct > span, .pa-paie > span, .pa-code > span {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pa-ct > i, .pa-paie > i, .pa-code > i { flex-shrink: 0; }
.pa-ct > small, .pa-paie > small, .pa-code > small {
  flex-shrink: 0; margin-left: auto; padding-left: 10px;
  white-space: nowrap; color: rgba(255, 255, 255, .5);
}

/* 3. Les compteurs sur une ligne, chiffre au-dessus du libelle. */
.pa-stats { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.pa-st {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 14px; border-radius: var(--bh-pill);
  background: rgba(255, 255, 255, .09);
  white-space: nowrap;
}
.pa-st > small { color: rgba(255, 255, 255, .5); }

/* 4. Les boutons de carte. Ligne 844, .pa-b porte padding: 0 16px 16px
      pour un autre usage. On ne la corrige pas : on la contourne par
      le conteneur reel. */
.pa-c-b .pa-b {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 11px 14px;
  white-space: nowrap; line-height: 1.2;
}
.pa-c-b .pa-b > i { flex-shrink: 0; }

/* 5. Le nom aligne a gauche, comme le modele. */
.pa-c-hd { text-align: left; }
.pa-c-nom, .pa-c-n { text-align: left; }

/* 6. L e-mail ne se coupe plus a 07380 : il passe a la ligne. */
.pa-c-meta {
  overflow: visible; text-overflow: clip; white-space: normal;
  word-break: normal; overflow-wrap: break-word;
}

/* 7. Les cinq <select> de la page. Le menu deroulant est dessine par le
      systeme et ne se style pas ; seule la pilule fermee nous appartient.
      Aucun balisage touche : les formulaires publics restent intacts. */
.pa-sel, select.cp-i, select.pt-i, select.vs-i {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  height: 42px; padding: 0 36px 0 16px;
  border: 0; border-radius: var(--bh-pill);
  cursor: pointer; white-space: nowrap;
  font-size: 13px; font-weight: 500; font-family: inherit;
  color: #fff; background-color: rgba(255, 255, 255, .12);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px 16px;
  transition: background-color .18s ease;
}
.pa-sel:hover, select.cp-i:hover, select.pt-i:hover, select.vs-i:hover {
  background-color: rgba(255, 255, 255, .19);
}
/* Le menu ouvert reste natif : on lui donne au moins un fond lisible. */
.pa-sel option, select.cp-i option, select.pt-i option, select.vs-i option {
  color: #14141d; background: #fff;
}

/* 8. L aplat decoratif derriere le titre du taux : absent du modele. */
.tx::before, .tx::after, #tx::before, #tx::after { display: none; content: none; }
/* ===== BRVMH-ADMIN-PARTENAIRES-V2 : fin ===== */

/* ===== BRVMH-ADMIN-PARTENAIRES-V3 : debut ===== */

/* 1. Le halo circulaire. Source : pages-modules.css ligne 48.
      La feuille commune n est pas modifiee : cette page est chargee
      apres elle, la declaration l emporte ici seulement. */
.m-hero::before { content: none; display: none; background: none; }

/* 2. pages-modules.css ligne 45 centre tout le contenu du hero.
      Le modele aligne a gauche. */
.m-hero { text-align: left; }
/* ===== BRVMH-ADMIN-PARTENAIRES-V3 : fin ===== */

/* ===== BRVMH-ADMIN-PARTENAIRES-V4 : debut ===== */

/* L arc clair : .pa-in portait border-radius: 999px, le rayon d une
   pilule, sur un conteneur de 3585 px de haut. Rayon de panneau. */
.pa-in { border-radius: 20px; }
/* ===== BRVMH-ADMIN-PARTENAIRES-V4 : fin ===== */

/* ===== BRVMH-PIED-V1 : debut ===== */
/* La ligne 1324 masque le pied. Il est complet dans le balisage
   (copyright, liens, sept reseaux) et mis en forme par
   pages-communes.css, remplissage bas compris. On le montre. */
:where(body.rv) .foot { display: block !important; }
/* ===== BRVMH-PIED-V1 : fin ===== */

/* ===== BRVMH-ADMIN-PARTENAIRES-V5 : debut ===== */

/* 1. L avatar du menu profil. .nav-av-img n avait aucune regle :
      l image s affichait a 412 px, soit toute la largeur, et son
      rayon de 50 % dessinait le grand arc clair de la page.
      Valeurs de .m-head-av, l autre avatar du meme en-tete. */
.nav-av-img {
  position: relative; flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  padding: 0; overflow: hidden;
  border: 0;
  font-size: 15px; line-height: 1;
}
.nav-av-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* 2. Les champs de saisie. pages-communes.css les atteint par
      input[type="..."], plus specifique qu une classe seule. On
      reprend les valeurs de la ligne 752 avec balise + classe. */
input.pt-i, input.cp-i, input.pr-i, input.lp-i, input.profil-input,
textarea.pt-ta, textarea.pt-i, textarea.cp-i {
  border: 0;
  border-radius: var(--bh-pill);
  color: #fff;
  background: rgba(255, 255, 255, .10);
  outline: none;
}
input.pt-i:focus, input.cp-i:focus, input.pr-i:focus,
input.lp-i:focus, textarea.pt-ta:focus {
  background: rgba(255, 255, 255, .16);
}
input.pt-i::placeholder, input.cp-i::placeholder,
input.pr-i::placeholder, textarea.pt-ta::placeholder {
  color: rgba(255, 255, 255, .35); letter-spacing: 0;
}
/* La zone de texte garde un rayon de panneau, pas de pilule. */
textarea.pt-ta { border-radius: 18px; }

/* 3. .pa-in n est pas un champ de saisie : il ne prend ni le
      centrage, ni l espacement des lettres, ni le remplissage
      que la ligne 752 destine aux input. */
.pa-in {
  padding: 0;
  text-align: left;
  letter-spacing: normal;
  background: none;
  flex: none;
}
/* ===== BRVMH-ADMIN-PARTENAIRES-V5 : fin ===== */

/* ===== BRVMH-LANGUETTE-V1 : debut ===== */
/* .pl-acces est declaree deux fois : la 2569 gagne, avec
   flex-wrap: wrap et flex: 1 1 150px — deux boutons de 150 px
   ne tiennent pas dans la colonne, le second passe a la ligne.
   On reprend le comportement de la 2488, celle du parrainage. */
.pl-acces { flex-wrap: nowrap; align-items: stretch; }
.pl-acces-l { flex: 1 1 0; min-width: 0; }
/* ===== BRVMH-LANGUETTE-V1 : fin ===== */

/* ===== BRVMH-SOUS-TITRE-V1 : debut ===== */
/* .pl-sous est declaree deux fois : 17ch !important ligne 2479
   l emporte sur 20ch ligne 2562. A 17ch la phrase de 36 signes
   tient sur trois lignes ; 21ch la coupe en deux, apres
   « de chaque abonnement ». */
.pl-sous { max-width: 21ch !important; }
/* ===== BRVMH-SOUS-TITRE-V1 : fin ===== */

/* ===== BRVMH-HERO-P-V1 : debut ===== */
/* Ligne 154, .hero-p est limitee a 32ch. Le premier segment de
   la phrase de la plaquette en fait 42 : il se coupait tout seul,
   et le <br> ajoutait une troisieme ligne.
   Le selecteur ne vise que la plaquette : le hero-p du tableau
   de bord partenaire, ligne 531 du balisage, garde ses 32ch. */
.pl-modele-v2 .hero-p { max-width: 44ch !important; }
/* ===== BRVMH-HERO-P-V1 : fin ===== */

/* ===== BRVMH-HERO-P-V2 : debut ===== */
/* Mesure : le segment « Pendant douze mois, renouvellements
   compris » fait 310 px a 15 px de police, pour une colonne de
   279. Il debordait et se coupait, le <br> ajoutant une
   troisieme ligne. A 13 px il tient. */
.pl-modele-v2 .hero-p { font-size: 13px !important; max-width: none !important; }
/* ===== BRVMH-HERO-P-V2 : fin ===== */

/* ===== BRVMH-ILLU-GLISSE-V1 : debut ===== */
/* cover preserve les proportions mais supprime la reserve de
   hauteur, donc le glissement. auto 130% garde le rapport de
   l image et laisse 30% de matiere pour le mouvement. */
.pl-modele-v2 .pr-illu {
  background-size: 100% auto !important;
  animation: bh-glisse 4s ease-in-out infinite alternate !important;
}
@keyframes bh-glisse {
  from { background-position: 50% 18%; }
  to   { background-position: 50% 82%; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-modele-v2 .pr-illu { animation: none !important; background-position: 50% 35% !important; }
}
/* ===== BRVMH-ILLU-GLISSE-V1 : fin ===== */

/* ===== BRVMH-CHAMP-ADMIN-V1 : debut ===== */
/* Le champ de recherche du panneau admin, #pa-q, n a aucune
   classe : il tombait sur un fond blanc par defaut, avec une
   couleur de texte blanche heritee. Valeurs de la ligne 752. */
input#pa-q {
  width: 100%;
  padding: 11px 16px;
  border: 0;
  border-radius: var(--bh-pill);
  font-family: inherit; font-size: 14px;
  color: #fff;
  background: rgba(255, 255, 255, .10);
  outline: none;
  transition: background .18s ease;
}
input#pa-q:focus { background: rgba(255, 255, 255, .16); }
input#pa-q::placeholder { color: rgba(255, 255, 255, .35); }
/* ===== BRVMH-CHAMP-ADMIN-V1 : fin ===== */

/* BRVMH-PASTILLE-LISIBLE-V1
   Le style de la pastille vit dans fond-modele.css, que seules les
   maquettes autonomes chargent. Repris ici pour les pages qui ont
   leur propre feuille. */
body.rv a.rond:has(#m-cloche-badge) { overflow: visible !important; position: relative !important; }
body.rv a.rond > span#m-cloche-badge.on {
  position: absolute !important; top: -7px !important; right: -7px !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-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-PANNEAU-PLANCHER-V1
   Le panneau est en colonne avec min-height:0 sur son corps —
   sans plancher sur le panneau lui-meme, il se referme a zero
   alors que le contenu est bien la (5 cartes mesurees). */
body.rv #cloche-menu.on, body.rv #profil-menu.open {
  min-height: min(420px, calc(100dvh - 180px)) !important;
  height: auto !important;
}
body.rv #cloche-menu.on .cloche-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}