/* =========================================================
   page-support.css — /support.html
   Grammaire visuelle reprise de Revolut.

     node refondre-page.cjs public/design-v2/support.html \
          accueil pages-modules.css,page-support.css
     node revolut-support.cjs public/design-v2/support.html

   SIX MOTIFS, RELEVES SUR L'APPLICATION

   1. Le heros est un aplat de teinte qui va d'un bord a
      l'autre, sans carte ni cadre, et se fond dans la page.
      Grand titre, une phrase, un bouton blanc. Aucune photo :
      Revolut n'en met pas dans l'application, seulement dans
      son marketing.

   2. Les en-tetes de section sont petits, gris, suivis d'un
      chevron. Pas de gros titres a l'interieur des pages.

   3. Les choix se font en grille de tuiles : un rond, une
      icone, un mot.

   4. Les cartes n'ont pas de bordure. Un aplat plus clair que
      le fond suffit a les detacher — un liseré ferait
      bavard.

   5. Les lignes de liste tiennent en trois colonnes : rond a
      gauche, texte au centre, valeur alignee a droite.

   6. Le bouton principal est blanc, en pilule, pleine
      largeur. Un seul par ecran.

   Le reste de la page — panneau reserve, atelier, reseaux —
   suit la meme grammaire, pour qu'il n'y ait pas deux
   langages dans la meme page.
   ========================================================= */

/* Sans cette ligne, une boite en largeur 100 % ajoute ses
   marges internes par-dessus et deborde. C'est ce qui coupait
   les boutons de la fenetre de detail. */
body.rv .su-in *,
body.rv .su-modal * { box-sizing: border-box; }
/* Aucun enfant ne pousse la feuille au-dela de sa largeur :
   sans cette limite, un mot long ou un bouton a texte fixe
   la fait deborder. */
body.rv .su-mbox * { max-width: 100%; min-width: 0; }

/* =========================================================
   0. JETONS
   ---------------------------------------------------------
   Repris du design system avec valeur de repli : si un jeton
   manque, la page reste lisible au lieu de tomber en
   transparent.
   ========================================================= */
body.rv {
  --bh-fond:   #0a0a12;
  --bh-c1:     #14141d;   /* la carte */
  --bh-c2:     #1b1b26;   /* le creux dans la carte */
  --bh-c3:     #232330;   /* le survol */

  --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);

  /* Les quatre etats d'une demande. Seules couleurs vives de
     la page, et elles portent une information. */
  --su-nouveau: #60a5fa;
  --su-cours:   var(--bh-or);
  --su-resolu:  var(--bh-ok);
  --su-ferme:   rgba(255, 255, 255, .38);

  /* Revolut arrondit large et n'encadre rien. */
  --bh-r:    20px;
  --bh-r-sm: 14px;
  --bh-pill: 999px;

  --bh-col: 480px;
  --su-fen: 340px;

  /* La photo de la carte d'annonce, a gauche du texte. C'est
     la seule image de la page : c'est l'emplacement du modele,
     et le heros reste sur le fond de teinte.
     Vider cette valeur remet l'icone a la place. */
  --su-illu: url('/brvm-marketing/support-conseil.jpg');
  --su-bnav: 92px;
}

/* =========================================================
   1. LA PAGE
   ---------------------------------------------------------
   Chez Revolut la teinte imprègne tout l'ecran, du haut
   jusqu'a la barre du bas — elle ne s'arrete pas au heros.
   ========================================================= */
.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);
}

.su-in {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--bh-col) !important;
  margin-inline: auto !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: calc(var(--su-bnav) + 24px);
}
.page-inner:has(.su-in) {
  max-width: var(--bh-col) !important;
  margin-inline: auto !important;
  box-sizing: border-box;
}
.su-in > *, .su-grid > * { min-width: 0; max-width: 100%; box-sizing: border-box; }

.anim-1, .su-in > * { animation: su-monte .45s cubic-bezier(.22, .61, .36, 1) both; }
.su-in > *:nth-child(1) { animation-delay: .02s; }
.su-in > *:nth-child(2) { animation-delay: .07s; }
.su-in > *:nth-child(n+3) { animation-delay: .12s; }
@keyframes su-monte {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.spin { animation: su-tourne 1s linear infinite; display: inline-block; }
@keyframes su-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .anim-1, .su-in > *, .spin { animation: none !important; }
}

/* =========================================================
   2. LE HEROS
   ---------------------------------------------------------
   Un aplat de teinte d'un bord a l'autre, arrondi seulement
   en bas. Il ne flotte pas au-dessus de la page : il en est
   le sommet.
   ========================================================= */
.su-hero-grid {
  display: block;
  /* Le degrade couvre deja tout l'ecran par body.rv : le
     heros n'a plus rien a deborder. La sortie en 100vw que
     j'avais posee decalait tout vers la droite. */
  width: 100%;
  margin: 0;
  /* De l'air au-dessus du titre, peu en dessous du bouton :
     la carte qui suit enchaine directement. */
  padding: 34px 6px 6px;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: center;
}

/* Revolut ne met pas de photo dans le heros : il reste sur le
   fond de teinte, et l'image vit dans la carte d'annonce. */
.su-hero-img { display: none; }

.su-hero { padding: 0; }

/* Le surtitre disparait : le titre se suffit, et l'ecran est
   deja identifie par la barre du bas. */
.su-hero-l { display: none; }

.su-hero h1 {
  margin: 0;
  /* Grand et LEGER. Le gras rend lourd ce que Revolut rend
     calme : leurs titres sont a 34 px en graisse 500. */
  font-size: 34px;
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -.02em;
  color: #fff;
}
.su-hero h1 span { display: block; color: #fff; }

.su-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);
}

/* Le bouton du heros, pose par revolut-support.cjs. */
.su-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Le vide avant l'action : Revolut laisse respirer entre le
     titre et le bouton. */
  margin-top: 44px;
  height: 54px;
  padding: 0 24px;
  border-radius: var(--bh-pill);
  /* Translucide, pas blanc. Le blanc plein est reserve aux
     ecrans ou il n'y a qu'une seule action possible — ici le
     bouton d'envoi du formulaire. */
  background: rgba(255, 255, 255, .17);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}
.su-cta:hover  { background: rgba(255, 255, 255, .24); }
.su-cta:active { transform: scale(.985); }

/* =========================================================
   3. LES CARTES
   ---------------------------------------------------------
   Aucune bordure. Un aplat plus clair que le fond suffit.
   ========================================================= */
.su-grid { display: flex; flex-direction: column; gap: 14px; }

.su-card {
  padding: 18px 16px;
  border: 0;
  border-radius: var(--bh-r);
  /* Translucide plutot qu'opaque : la teinte de la page
     transparait, et les cartes ne font pas des trous noirs
     dans le degrade. */
  background: rgba(255, 255, 255, .09);
  text-align: left;
}

/* Les en-tetes de section : petits, gris, avec un chevron. */
.su-t {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .62);
}
.su-t::after {
  content: '\203A';
  font-size: 17px;
  line-height: 1;
}

.su-card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.su-card-h .su-t { margin: 0; }

.su-n-b {
  flex-shrink: 0;
  padding: 5px 11px;
  border-radius: var(--bh-pill);
  font-size: 11px;
  font-weight: 700;
  color: var(--bh-txt2);
  background: var(--bh-c2);
}

/* --- La carte d'annonce ---
   Texte a gauche, visuel a droite. Le motif de l'ecran
   « Commencez a batir votre patrimoine ». */
.su-annonce {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Les proportions du modele valide : 16 px en haut et en
     bas, 18 px sur les cotes, le texte a gauche et le visuel
     a droite. */
  padding: 16px 18px;
  border-radius: var(--bh-r);
  overflow: hidden;
  background: rgba(255, 255, 255, .09);
}
.su-annonce-c {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  /* Aligne a gauche, comme dans le modele : le titre et la
     phrase partent du meme bord. */
  text-align: left;
}
.su-annonce-t {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
}
.su-annonce-s {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .58);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.su-annonce-v {
  /* La vignette du modele : 84 x 68, a droite du texte. */
  position: relative;
  flex-shrink: 0;
  width: 96px; height: 82px;
  display: grid; place-items: center;
  font-size: 28px;
  color: rgba(255, 255, 255, .8);
  /* Ni fond, ni coins, ni decoupe : c'etait ce cadre qui se
     voyait, pas la photo. Le masque ci-dessous fait seul la
     limite, et il n'a pas d'arete. */
  background: none;
  border-radius: 0;
  overflow: visible;
}

/* La photo remplace l'icone, a droite du texte.

   Aucun bord ne doit se sentir : elle n'a ni cadre, ni coins,
   ni fond propre. Elle se dissout vers la gauche par un
   masque en degrade, et vers le haut et le bas par ses
   extremites. On ne voit donc jamais ou l'image s'arrete. */
.su-annonce-v {
  background-image: var(--su-illu, none);
  background-size: cover;
  /* Cadre sur le visage plutot qu'au centre. */
  background-position: 58% 14%;

  /* Le fondu commence tot et finit loin : la photo se dissout
     dans la carte au lieu de s'y decouper. Aucun bord n'est
     dessine nulle part. */
  -webkit-mask-image: radial-gradient(78% 78% at 52% 42%, #000 22%, transparent 82%);
  mask-image: radial-gradient(78% 78% at 52% 42%, #000 22%, transparent 82%);
}
.su-annonce-v i { display: none; }

/* Un voile assorti a la teinte. Le masque du parent le
   decoupe avec la photo : il ne peut donc pas dessiner de
   rectangle. */
.su-annonce-v::after {
  content: '';
  display: block;
  width: 100%; height: 100%;
  background: linear-gradient(100deg,
    rgba(10, 8, 20, .26),
    color-mix(in srgb, var(--bh-a) 20%, transparent));
}

/* =========================================================
   4. LE FORMULAIRE
   ========================================================= */
.su-lab {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, .62);
}
.su-lab::after {
  content: '\203A';
  font-size: 17px;
  line-height: 1;
}

/* --- Les sujets, en tuiles ---
   Quatre par ligne, un rond, une icone, un mot. Les icones
   sont posees par revolut-support.cjs. */
.su-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 12px;
  max-width: 100%;
}

.su-c {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  transition: color .18s ease;
}
/* Le libelle vit SOUS le carre, hors de lui, sur une seule
   ligne coupee par des points de suspension. */
.su-c span {
  display: block;
  margin-top: 9px;
  font-size: 13px;
  font-weight: 400;
  text-align: center;
  color: rgba(255, 255, 255, .92);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.su-c i {
  display: grid; place-items: center;
  width: 100%;
  aspect-ratio: 1;
  /* Carre arrondi, pas un rond : c'est la forme des tuiles de
     Revolut. Le remplissage est un blanc translucide, qui
     laisse passer la teinte de la page. */
  border-radius: 16px;
  font-size: 26px;
  color: #fff;
  background: rgba(255, 255, 255, .13);
  transition: background .18s ease, transform .18s ease;
}
.su-c:hover i  { background: rgba(255, 255, 255, .20); }
.su-c:active i { transform: scale(.95); }
.su-c.on i     { background: rgba(255, 255, 255, .32); }

/* --- Les champs ---
   Remplis, sans bordure, arrondis large. */
.su-i,
.su-ta {
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--bh-r-sm);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.55;
  color: var(--bh-txt) !important;
  background: rgba(255, 255, 255, .10) !important;
  outline: none;
  transition: background .18s ease, box-shadow .18s ease;
}
.su-i::placeholder,
.su-ta::placeholder { color: var(--bh-txt3); }
.su-i:focus,
.su-ta:focus {
  background: rgba(255, 255, 255, .16) !important;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bh-a) 70%, transparent);
}
.su-ta { resize: vertical; min-height: 130px; }
/* La reponse de l'administration n'a pas besoin d'autant de
   hauteur que la demande initiale. */
.su-mbox .su-ta { min-height: 84px; padding: 11px 14px; font-size: 13.5px; }

.su-cpt {
  margin: 8px 2px 18px;
  text-align: right;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--bh-txt3);
}

/* --- Le bouton principal : blanc, un seul par ecran --- */
.su-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px 24px;
  border: 0;
  border-radius: var(--bh-pill);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  color: var(--bh-txt);
  background: var(--bh-c2);
  transition: filter .18s ease, transform .18s ease, opacity .18s ease;
}
.su-btn:active   { transform: scale(.985); }
.su-btn:disabled { opacity: .45; cursor: not-allowed; }
.su-btn.v { background: #fff; color: #14141d; }
.su-btn.v:hover { filter: brightness(.92); }

.su-msg {
  margin: 12px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--bh-txt2);
}
.su-msg:empty { margin: 0; }
.su-msg.ok  { color: var(--bh-ok); }
.su-msg.err { color: var(--bh-non); }

.su-note {
  margin: 16px 0 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--bh-txt3);
}
.su-note a { color: var(--bh-or); text-decoration: none; font-weight: 700; }
.su-note a:hover { text-decoration: underline; }

/* =========================================================
   5. LES DEMANDES
   ---------------------------------------------------------
   Trois colonnes : rond, texte, valeur a droite.
   ========================================================= */
.su-tk {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 0;
  border-radius: var(--bh-r-sm);
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.su-tk + .su-tk { margin-top: 8px; }
.su-tk:hover  { background: rgba(255, 255, 255, .14); }
.su-tk:active { transform: scale(.99); }

/* Le rond de gauche, sans image : la teinte suffit. */
.su-tk::before {
  content: '\ea55';
  font-family: 'tabler-icons';
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 17px;
  color: #fff;
  background: linear-gradient(135deg, var(--bh-a), var(--bh-b));
}

.su-tk-c { flex: 1; min-width: 0; }
.su-tk-t {
  margin: 0 0 3px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--bh-txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.su-tk-d { margin: 0; font-size: 11.5px; color: var(--bh-txt3); }

.su-tk-r {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--su-nouveau);
}

/* Le statut : du texte a droite, pas une pastille. C'est ce
   que fait Revolut pour les variations. */
.su-badge {
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--bh-txt3);
}
.su-badge.nouveau  { color: var(--su-nouveau); }
.su-badge.en_cours { color: var(--su-cours); }
.su-badge.resolu   { color: var(--su-resolu); }
.su-badge.ferme    { color: var(--su-ferme); }

.su-vide {
  padding: 26px 14px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--bh-txt3);
}

/* =========================================================
   6. LA FENETRE D'UNE DEMANDE
   ---------------------------------------------------------
   Une feuille qui monte du bas, arrondie en haut seulement,
   avec la poignee grise — le motif de Revolut.
   ========================================================= */
.su-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  background: rgba(10, 8, 20, .72);
}
.su-modal.on { display: flex; animation: su-fondu .2s ease both; }
@keyframes su-fondu { from { opacity: 0; } to { opacity: 1; } }

.su-mbox {
  width: 100%;
  /* Plus etroite que la colonne : une feuille qui se pose
     par-dessus doit se distinguer de ce qu'elle recouvre. */
  max-width: min(var(--su-fen), calc(100vw - 24px)) !important;
  box-sizing: border-box;
  max-height: calc(100dvh - 60px);
  overflow-y: auto;
  /* Le debordement lateral faisait apparaitre une barre en bas
     et coupait les boutons. */
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 26px 26px 0 0;
  /* Aplat opaque, et c'est voulu : en translucide, la liste
     des demandes se lisait au travers de la fenetre posee
     par-dessus. Une feuille de lecture doit couvrir. */
  background: #241c3e;
  text-align: left;
  animation: su-feuille .26s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes su-feuille {
  from { transform: translateY(30px); }
  to   { transform: none; }
}
/* La poignee. */
.su-mbox::before {
  content: '';
  display: block;
  width: 38px; height: 4px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
}
@media (prefers-reduced-motion: reduce) {
  .su-modal.on, .su-mbox { animation: none !important; }
}

.su-mh {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.su-mh h2 {
  margin: 7px 0 4px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--bh-txt);
}
.su-cat {
  display: inline-block;
  margin-left: 6px;
  padding: 5px 12px;
  border-radius: var(--bh-pill);
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .12);
}
.su-m-meta { margin: 0; font-size: 11px; line-height: 1.45; color: var(--bh-txt3); }

.su-x {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  cursor: pointer;
  font-size: 17px;
  color: var(--bh-txt2);
  background: var(--bh-c2);
  transition: background .18s ease, color .18s ease;
}
.su-x:hover { background: var(--bh-c3); color: var(--bh-txt); }

/* --- Le fil --- */
.su-fil { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.su-b {
  padding: 11px 13px;
  border: 0;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 100%;
  color: var(--bh-txt);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.su-b.membre {
  align-self: flex-start;
  max-width: 92%;
  background: rgba(255, 255, 255, .10);
  border-bottom-left-radius: 5px;
}
.su-b.equipe {
  align-self: flex-end;
  max-width: 90%;
  /* Un aplat sourd, pas un degrade franc : une reponse longue
     en degrade sature devient un mur de couleur. */
  background: color-mix(in srgb, var(--bh-a) 42%, #191430);
  border-bottom-right-radius: 5px;
}
.su-b-h {
  display: flex; justify-content: space-between; gap: 10px;
  margin-bottom: 6px;
  font-size: 10.5px; font-weight: 700;
  color: var(--bh-txt3);
}
.su-b.equipe .su-b-h { color: rgba(255, 255, 255, .72); }
.su-b.equipe .su-b-h span:first-child { color: #fff; }

/* --- La reponse, cote administration --- */
.su-rep { display: none; }
.su-rep.on { display: block; padding-top: 14px; }

.su-ia-bar { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.su-ia-btn {
  flex: 1 1 130px;
  min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  /* Le texte peut passer a la ligne : « Proposer une reponse »
     ne tient pas sur une ligne dans une fenetre de 390 px, et
     un nowrap le faisait deborder du bouton. */
  min-height: 40px;
  padding: 9px 12px;
  border: 0; border-radius: var(--bh-pill);
  font-family: inherit; font-size: 12.5px; font-weight: 400;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  transition: background .18s ease;
}
.su-ia-btn:hover { background: rgba(255, 255, 255, .19); }

.su-ia-out,
.at-out {
  margin-bottom: 12px;
  padding: 13px 14px;
  border: 0;
  border-radius: var(--bh-r-sm);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--bh-txt2);
  background: color-mix(in srgb, var(--bh-a) 16%, var(--bh-c2));
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.su-ia-out b, .at-out b { color: var(--bh-txt); }

.su-rep-a {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.su-rep-a .su-btn {
  width: auto; flex: 1 1 130px; min-width: 0;
  min-height: 44px; padding: 8px 18px; font-size: 13.5px;
  white-space: normal; line-height: 1.2;
}
.su-rep-a .su-sel {
  flex: 1 1 140px; min-width: 0;
  height: 44px; padding: 0 32px 0 15px; font-size: 12.5px;
}

.su-sel {
  flex-shrink: 0;
  padding: 13px 34px 13px 16px;
  border: 0;
  border-radius: var(--bh-pill);
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer;
  color: #fff;
  background-color: rgba(255, 255, 255, .12);
  outline: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--bh-txt3) 50%),
                    linear-gradient(135deg, var(--bh-txt3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 53%, calc(100% - 13px) 53%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.su-sel option,
select.pa-i option {
  background: #241b3d;
  color: #fff;
}

/* --- Archiver, supprimer --- */
.su-dang {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 12px; padding-top: 10px;
}
.su-lien {
  flex: 1 1 120px;
  min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: normal; line-height: 1.2; text-align: center;
  padding: 10px 12px;
  border: 0; border-radius: var(--bh-pill);
  font-family: inherit; font-size: 12.5px; font-weight: 400;
  cursor: pointer;
  color: var(--bh-txt3);
  background: transparent;
  transition: color .18s ease, background .18s ease;
}
.su-lien:hover { color: var(--bh-txt2); background: var(--bh-c2); }
.su-lien.rouge:hover { color: var(--bh-non); }
/* Le bouton arme dit ce qu'il va faire : une suppression ne
   doit jamais surprendre celui qui clique. */
.su-lien.arme { color: #fff; font-weight: 800; background: var(--bh-non); }
.su-lien.arme:hover { color: #fff; background: var(--bh-non); filter: brightness(1.08); }

/* =========================================================
   7. LE PANNEAU RESERVE
   ---------------------------------------------------------
   Meme grammaire : aplats, pas de bordures, chevrons.
   ========================================================= */
.pa-sep { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.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 {
  border: 0;
  border-radius: var(--bh-r);
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}
.pa + .pa { margin-top: 12px; }

.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: var(--bh-txt);
  transition: background .18s ease;
}
.pa-h:hover { background: rgba(255, 255, 255, .06); }
.pa-h > i { font-size: 16px; color: var(--bh-txt3); flex-shrink: 0; }

.pa-h-l { display: flex; align-items: center; gap: 12px; text-align: left; min-width: 0; }
.pa-h-l > i {
  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-b {
  padding: 0 16px 16px;
  border: 0 !important;
  border-top: 0 !important;
}
.pa-b.ferme { display: none; }

/* --- Les filtres : selecteur segmente --- */
.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; }

.pa-pills {
  /* 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. Les pastilles passent donc a la ligne. */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0 4px;
  background: none;
}

.pa-p {
  flex: 0 1 auto;
  max-width: 100%;
  /* La marge double le gap : si une autre feuille reprend le
     conteneur, les libelles ne se collent pas les uns aux
     autres. */
  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; }
.pa-p.or.on { color: #1a1207; background: var(--bh-or); }

.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: var(--bh-txt) !important;
  background: rgba(255, 255, 255, .10) !important;
  outline: none;
  transition: background .18s ease;
}
.pa-i::placeholder { color: var(--bh-txt3); }
.pa-i:focus-visible { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.pa-i:focus { background: rgba(255, 255, 255, .16) !important; }
textarea.pa-i { resize: vertical; }
select.pa-i {
  appearance: none; cursor: pointer; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--bh-txt3) 50%),
                    linear-gradient(135deg, var(--bh-txt3) 50%, transparent 50%);
  background-position: calc(100% - 19px) 53%, calc(100% - 14px) 53%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}


.pa-res {
  margin: 4px 0 14px;
  text-align: left;
  font-size: 12.5px; font-weight: 400;
  color: rgba(255, 255, 255, .48);
}

/* --- Les actions --- */
.pa-ac { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pa-btn {
  flex: 1; min-width: 130px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 14px;
  border: 0; border-radius: var(--bh-pill);
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer;
  color: var(--bh-txt);
  background: rgba(255, 255, 255, .13);
  transition: background .18s ease, filter .18s ease, transform .18s ease;
}
.pa-btn:hover  { background: rgba(255, 255, 255, .20); }
.pa-btn:active { transform: scale(.985); }
.pa-btn:disabled { opacity: .45; cursor: not-allowed; }
.pa-btn.v  { background: #fff; color: #14141d; }
.pa-btn.or { background: var(--bh-or); color: #1a1207; }
.pa-btn.v:hover, .pa-btn.or:hover { filter: brightness(.92); }
.pa-btn.gris { background: transparent; color: var(--bh-txt3); }
.pa-btn.gris:hover { background: var(--bh-c2); color: var(--bh-txt2); }

/* --- Les demandes cote administration --- */
.pa-tk {
  display: flex; align-items: center; gap: 12px;
  text-align: left;
  padding: 12px 14px;
  border: 0; border-radius: var(--bh-r-sm);
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.pa-tk + .pa-tk { margin-top: 8px; }
.pa-tk:hover  { background: rgba(255, 255, 255, .14); }
.pa-tk:active { transform: scale(.99); }
/* Une archivee n'attend plus rien : elle s'efface sans
   disparaitre. */
.pa-tk.arch { opacity: .5; }

.pa-tk-c { flex: 1; min-width: 0; text-align: left; }
.pa-tk-t {
  margin: 0 0 3px;
  text-align: left;
  font-size: 14px; font-weight: 500;
  color: var(--bh-txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pa-tk-d {
  margin: 0; text-align: left;
  font-size: 12.5px; color: rgba(255, 255, 255, .55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* =========================================================
   8. L'ATELIER ET LES RESEAUX
   ========================================================= */
.at-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.at-btns .pa-btn { flex: 1; min-width: 130px; }
.at-note {
  margin: 14px 0 0;
  padding-top: 12px;
  font-size: 11.5px; line-height: 1.7;
  text-align: left;
  color: var(--bh-txt3);
}

.rs-note { margin: 14px 0; font-size: 11.5px; line-height: 1.7; text-align: left; color: var(--bh-txt3); }
.rs-note strong { color: var(--bh-txt2); }

.rs-grid { display: flex; flex-direction: column; gap: 10px; }
.rs-f { display: flex; align-items: center; gap: 12px; }
.rs-ic {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 18px;
  color: var(--bh-txt3);
  background: rgba(255, 255, 255, .13);
  transition: color .2s ease, background .2s ease;
}
/* Allumee : l'icone apparaitra dans le pied de page. */
.rs-ic.on { color: #14141d; background: var(--bh-ok); }

.rs-c { flex: 1; min-width: 0; text-align: left; }
.rs-l { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; color: var(--bh-txt2); }
.rs-i {
  width: 100%;
  padding: 11px 14px;
  border: 0; border-radius: 12px;
  font-family: inherit; font-size: 13px;
  color: var(--bh-txt) !important;
  background: rgba(255, 255, 255, .10) !important;
  outline: none;
  transition: background .18s ease, box-shadow .18s ease;
}
.rs-i::placeholder { color: var(--bh-txt3); }
.rs-i:focus { background: rgba(255, 255, 255, .16) !important; }
/* L'adresse rougit des la saisie : decouvrir l'erreur apres
   avoir clique ferait perdre un aller-retour. */
.rs-i.faux { box-shadow: inset 0 0 0 1.5px var(--bh-non); }

/* =========================================================
   9. L'EMPILEMENT
   ---------------------------------------------------------
   Une seule echelle, du fond vers la surface. Cette feuille
   etant chargee en dernier, c'est elle qui tranche.
   ========================================================= */
:where(body.rv) .su-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; }

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

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

/* =========================================================
   14. 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;
  transition: opacity .55s 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. */
:where(html.bh-anim body.rv) .bh-flot     { opacity: 0; transform: translateY(30px) scale(.975); }
:where(html.bh-anim body.rv) .bh-flot-fin { opacity: 0; transform: translateY(14px); }

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

/* 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. */
:where(body.rv) .inv,
:where(body.rv) .twa-abo {
  border: 0 !important;
  border-radius: var(--bh-r) !important;
  background: rgba(255, 255, 255, .10) !important;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
:where(body.rv) .inv-t { color: #fff !important; font-weight: 500 !important; }
:where(body.rv) .inv-b,
:where(body.rv) .twa-copier {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 11px 20px !important;
  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 {
  color: rgba(255, 255, 255, .5) !important;
  background: none !important;
  border: 0 !important;
}

/* =========================================================
   10. ACCESSIBILITE
   ========================================================= */
:where(body.rv) .su-c:focus-visible,
:where(body.rv) .su-btn:focus-visible,
:where(body.rv) .su-cta:focus-visible,
:where(body.rv) .su-tk:focus-visible,
:where(body.rv) .su-x:focus-visible,
:where(body.rv) .su-lien:focus-visible,
:where(body.rv) .su-ia-btn:focus-visible,
:where(body.rv) .pa-h:focus-visible,
:where(body.rv) .pa-p:focus-visible,
:where(body.rv) .pa-btn:focus-visible,
:where(body.rv) .pa-tk:focus-visible {
  outline: 2px solid var(--bh-a);
  outline-offset: 3px;
}

/* =========================================================
   11. TRES PETITS ECRANS
   ========================================================= */
@media (max-width: 380px) {
  .su-hero h1 { font-size: 24px; }
  .su-annonce-v { width: 84px; height: 72px; }
  /* Sur un ecran etroit, six entrees se resserrent plutot que
     de faire deborder la barre. */
  :where(body.rv) .bnav { gap: 2px; padding: 6px !important; }
  :where(body.rv) .bnav-item { width: 44px !important; height: 46px !important; }
  :where(body.rv) .bnav-item i { font-size: 19px !important; }
  .su-c { font-size: 9.5px; }
  .su-c i { border-radius: 15px; font-size: 20px; }
  .su-rep-a { flex-direction: column; }
  .su-rep-a .su-btn, .su-sel { width: 100%; }
}


/* ===== BRVMH-BOUTON-AIDE-V1 : debut ===== */
/* Deux boutons cote a cote, disposition et contraste repris
   de .pl-acces sur influenceurs : le premier en blanc plein,
   le second en blanc translucide, largeurs egales. */
.su-rangee { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px; margin-top: 22px; }
.su-rangee .su-cta {
  flex: 1 1 0; min-width: 0;
  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-size: 13px; font-weight: 400; white-space: nowrap; text-decoration: none;
  color: rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .12);
  transition: color .18s ease, background .18s ease;
}
.su-rangee .su-cta:first-child { color: #14141d; font-weight: 500; background: #fff; }
.su-rangee .su-cta:hover { background: rgba(255, 255, 255, .19); }
.su-rangee .su-cta:first-child:hover { filter: brightness(.92); background: #fff; }
.su-aide i { font-size: 15px; color: var(--bh-or); }
/* ===== BRVMH-BOUTON-AIDE-V1 : fin ===== */

/* ===== BRVMH-BANDEAU-INV-V1 : debut ===== */
/* Le bandeau Play Store ignorait la colonne du modele : sur
   ecran large il occupait toute la largeur, le bouton s etirait,
   et la barre du bas flottante recouvrait son titre. */
:where(body.rv) .inv-t {
  width: 100%;
  max-width: var(--bh-col);
  margin-inline: auto;
  box-sizing: border-box;
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
/* ===== BRVMH-BANDEAU-INV-V1 : fin ===== */

/* ===== BRVMH-BANDEAU-INV-V1 : debut ===== */
/* Mesure : .inv.on fait 412 px sans max-width, .inv-t 412 px,
   et .inv-b est en position fixed avec un plafond a 440 px —
   plus large que la colonne du modele. Sur ecran large le
   bandeau s etalait et la barre du bas recouvrait son titre. */
:where(body.rv) .inv {
  width: 100%;
  max-width: var(--bh-col);
  margin-inline: auto;
  box-sizing: border-box;
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
:where(body.rv) .inv-t { width: 100%; max-width: 100%; box-sizing: border-box; }
:where(body.rv) .inv-b { max-width: var(--bh-col); }
/* ===== BRVMH-BANDEAU-INV-V1 : fin ===== */

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