/* =========================================================
   page-parrainage-v3.css — /parrainage.html
   Modele B, valide sur modele-parrainage-b.html.

   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 { position: relative; z-index: 900; padding: 14px 6px 6px; text-align: center; }

.pr-h2 {
  margin: 0 auto;
  /* Cale sur le texte long : « Deux amis s'abonnent, » fait
     21 caracteres, « un mois vous est offert » 23. A 15ch et
     34 px, la premiere ligne se cassait en trois. */
  max-width: 17ch;
  font-size: 31px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: #fff;
}
.pr-h2 .g { display: block; color: rgba(255, 255, 255, .66); }

.pr-hero-s {
  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 {
  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 {
  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 {
  margin: 12px auto 0;
  max-width: 34ch;
  font-size: 12px; line-height: 1.5;
  color: rgba(255, 255, 255, .45);
}

.pr-cp {
  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  { background: rgba(255, 255, 255, .22); }
.pr-cp: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 {
  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 {
  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 {
  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 {
  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 {
  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 { margin: 0 0 3px; font-size: 13.5px; font-weight: 500; color: #fff; }
.pr-gain-d { 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 { display: flex; }
.pr-c {
  flex: 1;
  padding: 2px 4px;
  border: 0;
  background: none;
  text-align: center;
}
.pr-c + .pr-c { border-left: 1px solid rgba(255, 255, 255, .10); }
.pr-c .n {
  display: block;
  font-size: 22px; font-weight: 500;
  letter-spacing: -.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.pr-c .l {
  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 { color: var(--bh-or); }

/* =========================================================
   6. LA RECOMPENSE
   ---------------------------------------------------------
   La seule chose de la page qui porte une couleur.
   ========================================================= */
.pr-recompense {
  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 { margin: 0 0 4px; font-size: 17px; font-weight: 500; color: #fff; }
.pr-recompense p  { 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 {
  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 { 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 { 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 { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.pr-f + .pr-f { 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 { flex: 1; min-width: 0; }
.pr-f-n {
  margin: 0 0 2px;
  font-size: 13.5px; font-weight: 500; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pr-f-d { 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 {
  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 {
  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 {
  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 {
  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 { margin: 0 0 3px; font-size: 13.5px; font-weight: 500; color: #fff; }
.pr-saisi-d { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, .6); }

.pr-in-w { display: flex; gap: 8px; }
.pr-i {
  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 { 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 { 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 {
  margin-top: 12px;
  border: 0;
  border-radius: var(--bh-r);
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}
.pa-h {
  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 { display: flex; align-items: center; gap: 12px; text-align: left; min-width: 0; }
.pa-h-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 { 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 { 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 {
  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 {
  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%; }
}

/* ===== BRVMH-PIED-V1 : debut ===== */
/* Le pied est complet dans le balisage (copyright, liens,
   sept reseaux) et mis en forme par pages-communes.css,
   remplissage bas compris. Une regle plus haut le masquait. */
:where(body.rv) .foot { display: block !important; }
/* ===== BRVMH-PIED-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;
}