/* REPERE-PIED-V86 */
/* ============================================================
   pages-communes.css — socle partage par toutes les pages
   v1.0

   Extrait de page-dashboard.css apres validation de celui-ci.
   Contient ce qui se repete d'une page a l'autre : fondations,
   en-tete, sous-barres, bandeau de cours, sections, cartes,
   boutons, page profil, menus, navigation basse, pied,
   assistant, elements flottants, alignements.

   Chaque page charge ensuite SA feuille, qui n'a plus a decrire
   que ce qui lui est propre.

     <link rel="stylesheet" href="/assets/css/brvm-horizon-ds.css">
     <link rel="stylesheet" href="/assets/css/pages-communes.css">
     <link rel="stylesheet" href="/assets/css/page-club.css">
   ============================================================ */

/* ============================================================
   1. FONDATIONS
   ============================================================ */
:root { --or: #F0B840; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body.rv {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  text-align: center;
  /* Pas d'overflow-x:hidden ici : il transforme le body en conteneur
     de defilement et empeche toute barre collante de tenir. C'est ce
     qui faisait redescendre l'en-tete. */
  overflow-x: clip;
  padding-top: 64px;   /* place tenue par l'en-tete fixe */
}

/* Colonne unique de 480 px, comme l'accueil */
.c,
#v2 .c,
#v2 .heros > .c,
.page-inner,
.foot-inner {
  max-width: 480px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  width: 100%;
}
/* .c est imbrique dans .page-inner : sans cette remise a zero, la
   marge laterale s'applique deux fois et la colonne perd 40 px. Les
   blocs du dashboard etaient donc plus etroits que ceux de l'accueil. */
.page-inner .c,
.page-inner #v2 .c { padding-inline: 0; max-width: 100%; }

/* Couches decoratives de l'ancienne maquette : neutralisees */
.fond-heros,
.page-net,
.heros-bg,
.s-grille,
.hero-dots,
#v2 .final-img { display: none; }

/* Revelation dans les deux sens.
   Le script d'origine ne revele que le bloc #v2 et ne desabonne
   jamais ; celui pose par refondre-page.cjs couvre toute la page et
   rejoue l'effet a la sortie. Sans lui, rien ne serait visible. */
.app, .app-l, .app-r, .app-z {
  opacity: 0;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  will-change: opacity, transform;
}
.app, .app-l, .app-r { transform: translateY(30px); }
.app-z { transform: scale(.95); }
.vu { opacity: 1; transform: none; }
/* Filet de securite : si aucun script ne tourne, tout reste visible. */
.no-js .app, .no-js .app-l, .no-js .app-r, .no-js .app-z { opacity: 1; transform: none; }
.stagger > *:nth-child(2) { transition-delay: 90ms; }
.stagger > *:nth-child(3) { transition-delay: 180ms; }
.stagger > *:nth-child(4) { transition-delay: 270ms; }
.stagger > *:nth-child(5) { transition-delay: 360ms; }
.stagger > *:nth-child(6) { transition-delay: 450ms; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .app, .app-l, .app-r, .app-z { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   2. EN-TETES
   ============================================================ */

/* La navigation bureau n'est pas retiree du rendu : ses deux menus
   deroulants — notifications et profil — y sont attaches. Un enfant
   d'un element en display:none ne peut jamais s'afficher, meme en
   position fixed. On la rend donc invisible sans la supprimer, puis
   on redonne la visibilite aux seuls menus ouverts. */
.nav {
  position: absolute; top: 0; left: 0; right: 0;
  height: 0; overflow: visible; z-index: 61;
  margin: 0; padding: 0; border: 0; background: none;
}
.nav-inner, .nav-right, .nav-links, .nav-logo, .nav-user,
.cloche-dd, .profil-dd, .cloche-btn, .nav-av {
  visibility: hidden; height: 0; margin: 0; padding: 0; border: 0;
  overflow: visible; pointer-events: none;
}

/* La hauteur totale occupee par la barre haute : son decalage
   du haut, sa hauteur propre et sa marge basse. Toute fenetre
   qui doit la degager s'y refere plutot que de deviner. */
:root { --barre-haute: 62px; }

.m-head {
  position: fixed; top: var(--s2); left: var(--gutter); right: var(--gutter);
  z-index: 60;
  display: flex; align-items: center; gap: var(--s3);
  max-width: 440px; margin-inline: auto;
  padding: var(--s2) var(--s2) var(--s2) var(--s3);
  border-radius: var(--r-full);
  background: rgba(12,12,14,.74); backdrop-filter: blur(22px);
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.m-head.colle {
  background: rgba(12,12,14,.94);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 8px 24px rgba(0,0,0,.45);
}
.m-head-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); margin-right: auto; }
.m-head-dot { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; }
.m-head-dot img { width: 100%; height: 100%; object-fit: cover; }
.m-head-txt { font-size: 16px; font-weight: 600; letter-spacing: -.032em; color: var(--or); }
.m-head-txt b { color: var(--text); font-weight: 600; }

.m-cloche, .m-head-av {
  position: relative; flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-3); border: 0; cursor: pointer;
  color: var(--text); text-decoration: none; font-size: 18px;
  padding: 0; overflow: hidden;
}
.m-head-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.m-cloche-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--r-full); background: var(--down); color: #fff;
  font-size: 10px; font-weight: 600; line-height: 17px;
  box-shadow: 0 0 0 2px rgba(12,12,14,.9);
}
.m-cloche-badge:empty, .m-cloche-badge[data-vide="1"] { display: none; }
.m-head-badge {
  position: absolute; right: 0; bottom: 0;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--up); display: grid; place-items: center;
  font-size: 7px; color: #000;
  box-shadow: 0 0 0 2px rgba(12,12,14,.9);
}

/* ============================================================
   3. SOUS-BARRES DE SECTION
   ============================================================ */
/* Chaque page porte la sous-barre de TOUTES les sections — c'est un
   gabarit commun. Une seule doit s'afficher : celle que la page
   active en lui posant sa classe d'etat. Les pages n'emploient pas
   toutes le meme mot, « actif » ici et « active » ailleurs, d'ou les
   deux ecritures. Aucune autre condition : viser les identifiants
   les affichait toutes en meme temps. */
.sub-bar { display: none; }
.sub-bar.actif, .sub-bar.active,
#m-subbar-slot > .sub-bar { display: block; }

.sub-bar-inner, .sub-bar-back { background: none; border: 0; }
.sub-bar-title {
  font-size: 20px; font-weight: 600; letter-spacing: -.028em;
  color: var(--text); margin-bottom: var(--s4); display: block;
}
.sub-bar-tabs, #nav-l2-tabs {
  display: flex; gap: var(--s2); overflow-x: auto;
  scrollbar-width: none; padding-bottom: var(--s2);
  justify-content: flex-start;
}
.sub-bar-tabs::-webkit-scrollbar, #nav-l2-tabs::-webkit-scrollbar { display: none; }

.sub-tab, .inpage-tab {
  flex: 0 0 auto; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.08); border: 0;
  border-radius: var(--r-full); padding: 9px 15px;
  font-family: var(--font); font-size: 13px; font-weight: 500;
  letter-spacing: -.01em; color: var(--text-2); cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.sub-tab:hover, .inpage-tab:hover { background: rgba(255,255,255,.16); color: var(--text); }
.sub-tab.active, .inpage-tab.ici,
.sub-tab.active i, .inpage-tab.ici i {
  background: var(--text); color: #000; font-weight: 550;
}
.sub-tab.active i, .inpage-tab.ici i { background: none; }

/* ============================================================
   4. BANDEAU DE COURS
   ============================================================ */
/* Un seul bandeau de cours : celui du milieu, dans le heros. Celui du
   haut faisait doublon et repoussait le contenu. */
.ticker-wrap { display: none; }

.bandeau {
  max-width: 480px; margin: var(--s5) auto; overflow: hidden;
  border-radius: var(--r-md); background: var(--bg-soft);
  border: 1px solid var(--hairline); padding: var(--s3) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker-track, .bandeau-piste {
  display: flex; gap: var(--s6); width: max-content;
  white-space: nowrap; animation: defile-cours 80s linear infinite;
}
.bandeau:hover .bandeau-piste { animation-play-state: paused; }
@keyframes defile-cours { to { transform: translateX(-50%); } }

.tick { display: inline-flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.tick .tk, .tick b { font-weight: 550; letter-spacing: -.015em; color: var(--text); }
.tick .px { color: var(--text-2); font-variant-numeric: tabular-nums; }
.tick .ch { font-weight: 550; font-variant-numeric: tabular-nums; color: var(--text-3); }
.tick .ch.h, .tick .h { color: var(--up); }
.tick .ch.b, .tick .b { color: var(--down); }
@media (prefers-reduced-motion: reduce) { .ticker-track, .bandeau-piste { animation: none; } }

/* ============================================================
   8. SECTIONS
   ============================================================ */
.s { padding-block: calc(var(--s10) + var(--s4)); }
.s.clair, .v3-sombre, .section-pleine, .bande-blanche, .bloc-dark { background: transparent; }

.centre { text-align: center; }

#v2 h2, .s h2 {
  font-size: 26px; line-height: 1.1; letter-spacing: -.032em;
  font-weight: 600; color: var(--text); margin: 0 0 var(--s3);
  text-wrap: balance;
}
#v2 h3, .s h3 { font-size: 22px; line-height: 1.15; letter-spacing: -.028em; font-weight: 600; color: var(--text); }
.s .sous, .centre .sous {
  color: var(--text-2); font-size: 15px; line-height: 1.6;
  max-width: 34ch; margin: 0 auto var(--s6);
}

/* ============================================================
   9. CARTES
   ============================================================ */
.obj-grid, .g3, .g2, .piliers-grid, .s-grille {
  display: grid; grid-template-columns: 1fr; gap: var(--s5);
}
.obj-card, .pilier-card, .mini-l, .pf-carte, .adm {
  background: rgba(22,22,26,.78); backdrop-filter: blur(18px);
  border: 0; border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  padding: var(--s8) var(--s6); text-align: center;
}
.obj-card:hover, .pilier-card:hover { transform: none; box-shadow: none; }
.obj-ic {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; font-size: 21px;
  margin: 0 auto var(--s4);
}
.obj-h5 {
  font-size: 17px; font-weight: 600; letter-spacing: -.022em;
  color: var(--text); margin: 0 0 var(--s2);
}
.obj-p {
  font-size: 14.5px; line-height: 1.6; color: var(--text-2);
  margin: 0 auto; max-width: 32ch;
}

/* ============================================================
   13. BOUTONS
   ============================================================ */
.btn, .btn-violet-sm {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; cursor: pointer; text-decoration: none;
  border-radius: var(--r-full); padding: 15px 26px;
  font-family: var(--font); font-size: 15px; font-weight: 550;
  letter-spacing: -.01em; background: var(--surface-3); color: var(--text);
  box-shadow: none;
  transition: filter .2s var(--ease), transform .2s var(--ease);
}
.btn:hover, .btn-violet-sm:hover { transform: none; filter: brightness(1.16); }
.btn:active, .btn-violet-sm:active { transform: scale(.97); }
.btn-v { background: var(--text); color: #000; }
.btn-o, .btn-violet-sm { background: linear-gradient(120deg, var(--brand-a), var(--brand-b)); color: #fff; }
.btn-f { background: transparent; box-shadow: inset 0 0 0 1px var(--hairline-2); color: var(--text); }
.h-actions .btn, .final .btn { width: 100%; }

.badge-soon, .fi {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(78,91,255,.18); color: #A8B0FF;
  border: 0; border-radius: var(--r-full);
  padding: 3px 9px; font-size: 10px; font-weight: 600; letter-spacing: .04em;
}

/* ============================================================
   15. PAGE PROFIL
   ============================================================ */
.profil-page { display: none; text-align: left; }
.profil-page.on, .profil-page[style*="block"] { display: block; }

.profil-bloc {
  background: rgba(22,22,26,.78); backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  border: 0; border-radius: var(--r-lg);
  padding: var(--s7) var(--s6); margin-bottom: var(--s5);
}
.profil-avatar-wrap { position: relative; width: 88px; margin: 0 auto var(--s5); }
.profil-avatar {
  width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(140deg, var(--brand-a), var(--brand-b));
  display: grid; place-items: center; font-size: 30px; font-weight: 600; color: #fff;
}
.profil-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profil-avatar-cam {
  position: absolute; right: -2px; bottom: -2px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--text); color: #000; display: grid; place-items: center;
  cursor: pointer; box-shadow: 0 0 0 3px var(--surface);
}

.profil-onglets { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; margin-bottom: var(--s5); }
.profil-onglets::-webkit-scrollbar { display: none; }

.profil-grid2 { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
.profil-field { margin-bottom: var(--s4); }
.profil-field-lbl {
  display: block; font-size: 12.5px; color: var(--text-2);
  font-weight: 500; letter-spacing: 0; text-transform: none; margin-bottom: 7px;
}
.profil-input, input[type="text"], input[type="email"],
input[type="tel"], input[type="password"], select, textarea {
  width: 100%; background: var(--surface-2); border: 0;
  border-radius: var(--r-sm); color: var(--text);
  font-family: var(--font); font-size: 15px; padding: 13px 15px;
}
.profil-input::placeholder { color: var(--text-3); }
.profil-input:focus, input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--brand); outline-offset: 1px;
}
.profil-sep { height: 1px; background: var(--hairline); margin: var(--s5) 0; }

.profil-item, .profil-notif-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3); border-radius: var(--r-sm);
  color: var(--text); text-decoration: none;
}
.profil-item:hover { background: var(--surface-2); }
.profil-notif-lbl { flex: 1; font-size: 14.5px; }

.profil-toggle {
  position: relative; width: 46px; height: 27px; flex: 0 0 auto;
  background: var(--surface-3); border: 0; border-radius: var(--r-full); cursor: pointer;
  transition: background .2s var(--ease);
}
.profil-toggle.on, .profil-toggle[aria-checked="true"] { background: var(--up); }
.profil-toggle-knob {
  position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: left .2s var(--ease);
}
.profil-toggle.on .profil-toggle-knob,
.profil-toggle[aria-checked="true"] .profil-toggle-knob { left: 22px; }

.profil-info-card, .profil-2fa-card {
  background: var(--surface-2); border: 0; border-radius: var(--r-md);
  padding: var(--s5); display: flex; align-items: center; gap: var(--s4);
}
.profil-2fa-ic {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface-3); display: grid; place-items: center; font-size: 19px;
}
.profil-offer {
  background: var(--surface-2); border: 0; border-radius: var(--r-lg);
  padding: var(--s6); margin-bottom: var(--s4); text-align: center;
}
.profil-plan-badge, #profil-plan-badge,
#badge-free, #badge-invest, #badge-elite {
  display: inline-block; border: 0; border-radius: var(--r-full);
  padding: 4px 11px; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  background: rgba(255,255,255,.1); color: var(--text-2);
}

.flash-ok, .flash-err {
  border: 0; border-radius: var(--r-md); padding: var(--s4) var(--s5);
  margin-bottom: var(--s4); font-size: 14px; text-align: left;
}
.flash-ok { background: var(--up-soft); color: var(--up); }
.flash-err { background: var(--down-soft); color: var(--down); }

/* ============================================================
   16. MENUS, CLOCHE, FEUILLE
   ============================================================ */
.dropdown-menu, .app-sheet {
  background: rgba(22,22,26,.96); backdrop-filter: blur(24px);
  border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  text-align: left;
}

/* ─── Notifications et profil : memes feuilles que « Application » ───
   Fermees, elles n'existent pas. Ouvertes, elles remontent du bas au
   centre de la colonne. Le voile sombre est obtenu par une ombre
   etalee, faute de pouvoir ajouter un element au balisage. */
/* ─── Palettes ancrees sous leur icone ───────────────────────────────
   Elles descendent de l'entete, calees sur l'icone qui les ouvre, et
   portent une pointe qui designe cette icone. Le centrage se fait par
   left/right, jamais par translateX : une transformation de centrage
   serait ecrasee par celle de l'animation d'entree. */

/* Bord droit de la colonne, quelle que soit la largeur de l'ecran */
:root { --col-droite: max(var(--gutter), calc(50% - 220px)); }

.cloche-menu, .profil-menu {
  display: none;
  position: fixed; z-index: 72;
  top: 62px; bottom: auto; left: auto;
  width: min(330px, calc(100vw - var(--gutter) * 2));
  max-height: min(460px, calc(100vh - 150px));
  overflow-y: auto; scrollbar-width: none;
  background: rgba(20,20,26,.98); backdrop-filter: blur(26px);
  border: 0; border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 20px 44px rgba(0,0,0,.6);
  padding: var(--s3);
  text-align: left;
  visibility: visible; pointer-events: auto;
}
.cloche-menu::-webkit-scrollbar, .profil-menu::-webkit-scrollbar { display: none; }

/* La cloche est la deuxieme icone en partant de la droite */
.cloche-menu { right: calc(var(--col-droite) + 40px); }
/* L'avatar est la derniere */
.profil-menu { right: var(--col-droite); }

/* Pointe vers l'icone : un carre pivote, masque par le fond */
.cloche-menu::before, .profil-menu::before {
  content: ''; position: absolute; top: -6px;
  width: 14px; height: 14px; transform: rotate(45deg);
  background: rgba(20,20,26,.98);
  box-shadow: -1px -1px 0 0 rgba(255,255,255,.12);
  border-radius: 3px;
}
.cloche-menu::before { right: 26px; }
.profil-menu::before { right: 20px; }

.cloche-menu.on, .profil-menu.open {
  display: block;
  animation: palette-descend .26s var(--ease);
  transform-origin: top right;
}
@keyframes palette-descend {
  from { opacity: 0; transform: translateY(-10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cloche-menu.on, .profil-menu.open { animation: none; }
}

/* Sur ecran tres etroit les deux palettes se calent au bord droit */
@media (max-width: 400px) {
  .cloche-menu, .profil-menu { right: var(--gutter); left: var(--gutter); width: auto; }
  .cloche-menu::before { right: 66px; }
  .profil-menu::before { right: 22px; }
}

/* En-tete de la feuille de notifications */
.cloche-hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding: var(--s2) var(--s2) var(--s3);
  box-shadow: inset 0 -1px 0 var(--hairline); margin-bottom: var(--s2);
}
.cloche-hd b { font-size: 14.5px; font-weight: 600; letter-spacing: -.025em; }
.cloche-hd button {
  background: var(--surface-3); border: 0; cursor: pointer;
  border-radius: var(--r-full); padding: 6px 12px;
  font-family: var(--font); font-size: 11.5px; font-weight: 550; color: var(--text-2);
}
.cloche-hd button:hover { color: var(--text); }
.cloche-ft { padding-top: var(--s3); box-shadow: inset 0 1px 0 var(--hairline); margin-top: var(--s3); }
.cloche-ft a {
  display: block; text-align: center; text-decoration: none;
  padding: 11px; border-radius: var(--r-full);
  background: var(--surface-3); color: var(--text);
  font-size: 13px; font-weight: 550;
}

/* Entete de la feuille profil : avatar, nom, courriel, formule */
.profil-menu .profil-hd {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s2) var(--s4);
  box-shadow: inset 0 -1px 0 var(--hairline); margin-bottom: var(--s2);
}
.profil-menu .profil-hd-av { width: 40px; height: 40px; font-size: 14px; }
.profil-menu .name { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.profil-menu .email { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.profil-menu .profil-plan, .profil-menu .plan-free {
  display: inline-block; margin-top: 6px;
  background: rgba(240,184,64,.16); color: var(--or);
  border-radius: var(--r-full); padding: 3px 10px;
  font-size: 11px; font-weight: 600;
}
.profil-menu .profil-sep { margin: var(--s3) 0; }

/* Les entrees des deux feuilles : memes cartes que « Application » */
.profil-menu .profil-item, .cloche-menu .cloche-n {
  display: flex; align-items: center; gap: var(--s3);
  padding: 11px var(--s3); margin-bottom: 5px;
  background: rgba(255,255,255,.04); border-radius: var(--r-md);
  text-decoration: none; color: var(--text);
  box-shadow: none;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.profil-menu .profil-item:hover, .cloche-menu .cloche-n:hover {
  background: rgba(255,255,255,.09); transform: translateY(-2px);
}
.profil-menu .profil-item:active, .cloche-menu .cloche-n:active { transform: scale(.985); }
.profil-menu .profil-item i { font-size: 19px; color: var(--text-2); flex: 0 0 auto; }
.profil-menu .profil-item.danger, .profil-menu .profil-item.danger i { color: var(--down); }
.profil-menu .profil-item.danger { background: var(--down-soft); }
.dropdown-item, .app-sheet-item, .profil-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r-sm);
  color: var(--text); font-size: 14.5px; font-weight: 450; text-decoration: none;
}
.dropdown-item:hover, .app-sheet-item:hover { background: var(--surface-2); }
.dropdown-item-ic, .asi-ic {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface-3); display: grid; place-items: center; font-size: 17px;
}
.dropdown-item-txt, .asi-txt { flex: 1; }
.asi-go, .dropdown-item-go { color: var(--text-3); }
.dropdown-sep, .cloche-hd, .cloche-ft { border-color: var(--hairline); }

/* Feuille « Application » — elle contient BRVM Club, Module SGI,
   Marketplace, Academie et Mon espace. Elle est masquee par defaut et
   remonte du bas quand le script ajoute .ouvert sur le voile ; sans
   cette regle elle restait affichee a plat dans la page. */
.app-sheet-ov {
  position: fixed; inset: 0; z-index: 70;
  display: none; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.62); backdrop-filter: blur(8px);
  padding: var(--gutter);
}
.app-sheet-ov.ouvert { display: flex; animation: voile-entre .25s var(--ease); }
@keyframes voile-entre { from { opacity: 0; } to { opacity: 1; } }

.app-sheet {
  position: relative;
  width: 100%; max-width: 440px;
  max-height: 76vh; overflow-y: auto; scrollbar-width: none;
  border-radius: var(--r-xl);
  background: rgba(20,20,26,.97); backdrop-filter: blur(26px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 -18px 48px rgba(0,0,0,.6);
  padding: var(--s2) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
  animation: feuille-monte .32s var(--ease);
}
.app-sheet::-webkit-scrollbar { display: none; }
@keyframes feuille-monte {
  from { transform: translateY(26px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .app-sheet, .app-sheet-ov.ouvert { animation: none; }
}
/* En-tete resserree : la barrette et le titre sur la meme respiration */
.app-sheet-hd { text-align: center; padding: var(--s2) 0 var(--s4); }
.app-sheet-grip { margin: 0 auto var(--s3); }
.app-sheet-ttl {
  margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.025em;
}

/* Les cinq entrees : icone ronde, titre, sous-titre, chevron */
/* Chaque entree est une carte : elle se souleve au survol et
   s'enfonce a l'appui. Les cinq apparaissent en cascade. */
.app-sheet .app-sheet-item {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4); margin-bottom: var(--s2);
  background: rgba(255,255,255,.04);
  border-radius: var(--r-md); text-decoration: none; color: var(--text);
  transition: background .2s var(--ease), transform .2s var(--ease);
  opacity: 0; animation: entree-item .34s var(--ease) forwards;
}
.app-sheet .app-sheet-item:nth-child(2) { animation-delay: .04s; }
.app-sheet .app-sheet-item:nth-child(3) { animation-delay: .08s; }
.app-sheet .app-sheet-item:nth-child(4) { animation-delay: .12s; }
.app-sheet .app-sheet-item:nth-child(5) { animation-delay: .16s; }
.app-sheet .app-sheet-item:nth-child(6) { animation-delay: .2s; }
@keyframes entree-item {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.app-sheet .app-sheet-item:hover {
  background: rgba(255,255,255,.09); transform: translateY(-2px);
}
.app-sheet .app-sheet-item:active { transform: scale(.985); }
.app-sheet .app-sheet-item:hover .asi-go { transform: translateX(3px); color: var(--text-2); }
@media (prefers-reduced-motion: reduce) {
  .app-sheet .app-sheet-item { opacity: 1; animation: none; }
}
.app-sheet .asi-ic {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px;
}
.app-sheet .asi-txt { flex: 1; min-width: 0; text-align: left; }
.app-sheet .asi-txt b {
  display: block; font-size: 15px; font-weight: 600;
  letter-spacing: -.02em; margin-bottom: 3px;
}
.app-sheet .asi-txt small {
  display: block; font-size: 12.5px; line-height: 1.45; color: var(--text-2);
}
.app-sheet .asi-go {
  flex: 0 0 auto; color: var(--text-3); font-size: 18px;
  transition: transform .2s var(--ease), color .2s var(--ease);
}
.app-sheet .badge-soon { flex: 0 0 auto; margin-right: var(--s2); }

.app-sheet-close {
  position: static; display: block; width: 100%;
  margin-top: var(--s3); padding: 13px 24px;
  border: 0; border-radius: var(--r-full); cursor: pointer;
  background: var(--surface-3); color: var(--text);
  font-family: var(--font); font-size: 15px; font-weight: 550;
}
.app-sheet-close:hover { filter: brightness(1.16); }

.cloche-body { max-height: 60vh; overflow-y: auto; }
.cf-r { display: flex; gap: var(--s3); padding: var(--s4); border: 0; box-shadow: inset 0 -1px 0 var(--hairline); }
.cf-r:hover { background: var(--surface-2); }
.cf-r-n { font-size: 14px; font-weight: 550; }
.cf-r-l { font-size: 13px; color: var(--text-2); }
.cf-r-v { font-size: 12px; color: var(--text-3); }
#cloche-badge, #m-cloche-badge { background: var(--down); color: #fff; }

/* ============================================================
   17. NAVIGATION BASSE
   ============================================================ */
/* Barre flottante, meme traitement que l'en-tete : detachee des bords,
   entierement arrondie, fond floute. */
.bnav {
  position: fixed; z-index: 50;
  left: var(--gutter); right: var(--gutter);
  bottom: calc(var(--s3) + env(safe-area-inset-bottom));
  max-width: 440px; margin-inline: auto;
  display: flex; align-items: stretch;
  background: rgba(14,14,18,.86); backdrop-filter: blur(24px);
  border: 0; border-radius: var(--r-full);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 10px 28px rgba(0,0,0,.5);
  padding: 5px;
}
/* Trois des quatre entrees sont des <button>, la quatrieme un <a>.
   Le navigateur donne aux boutons sa propre police et son propre
   corps : sans remise a zero explicite sur l'element ET sur ses
   enfants, les libelles n'ont pas la meme taille. C'est ce qui
   faisait ressortir Application, Parrainage et Support. */
.bnav .bnav-item {
  flex: 1 1 0; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 3px; padding: 7px 2px 8px; margin: 0;
  background: none; border: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  color: var(--text-3); text-decoration: none;
  font-family: var(--font); font-size: 10px; font-weight: 550;
  letter-spacing: -.005em; line-height: 1.15; text-align: center;
  transition: color .2s var(--ease);
}
.bnav .bnav-item > i,
.bnav .bnav-item > span {
  font-family: inherit; font-weight: inherit; letter-spacing: inherit;
}
.bnav .bnav-item > i {
  font-family: 'tabler-icons', sans-serif;
  font-size: 19px; line-height: 1; height: 19px;
}
.bnav .bnav-item > span {
  display: block; font-size: 9.5px; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.bnav .bnav-item:hover { color: var(--text-2); }
/* Temoin lumineux sous l'onglet courant */
.bnav .bnav-item::after {
  content: ''; position: absolute; bottom: 1px; left: 50%;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--or); opacity: 0; transform: scale(.4);
  box-shadow: 0 0 8px 1px rgba(240,184,64,.7);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
/* La page pose « actif » via activerBnav() ; on accepte aussi les
   autres conventions au cas ou une page voisine differerait. */
.bnav .bnav-item.actif::after, .bnav .bnav-item.on::after,
.bnav .bnav-item.active::after,
.bnav .bnav-item[aria-current="page"]::after { opacity: 1; transform: scale(1); }
.bnav .bnav-item.actif, .bnav .bnav-item.on, .bnav .bnav-item.active,
.bnav .bnav-item[aria-current="page"] { color: var(--text); }
.bnav .bnav-item.actif > i, .bnav .bnav-item.on > i,
.bnav .bnav-item.active > i { color: var(--or); }
.bnav .bnav-item:active { transform: scale(.94); }

/* ============================================================
   18. PIED
   ============================================================ */
/* Le pied occupe toute la largeur de la fenetre alors que le
   contenu tient dans une colonne de 480 px : son trait traversait
   donc tout l'ecran sur un poste de bureau. Le trait est reporte
   sur le contenu interieur, qui suit la colonne. */
.foot {
  border-top: 0;
  padding-block: var(--s4) 0;
  margin-top: var(--s4);
}
.foot-inner { position: relative; }
.foot-inner::before {
  content: ''; position: absolute; top: calc(var(--s4) * -1); left: var(--gutter); right: var(--gutter);
  height: 1px; background: var(--hairline);
}
.foot-inner { font-size: 13px; line-height: 1.7; color: var(--text-3); }

/* La ligne de copyright : le retour est pose dans le balisage par
   refondre-page.cjs. Aucune largeur maximale ici — elle repliait
   « ©2023-2026 | EBS-CE Academy · BRVM Horizon », qui doit tenir
   d'un seul tenant. Seul le <br> coupe. */
.foot-inner > p:first-child {
  max-width: none; margin-inline: auto; line-height: 1.75;
  text-wrap: nowrap;
}
/* En dessous de 400 px, la ligne ne tient plus : on la laisse se
   replier plutot que de la faire deborder. */
@media (max-width: 400px) {
  .foot-inner > p:first-child { text-wrap: wrap; font-size: 12px; }
}
.foot-inner a { color: var(--text-2); text-decoration: none; }
.foot-inner a:hover { color: var(--text); }
.foot-icons { display: flex; gap: var(--s4); justify-content: center; margin-top: var(--s5); }
.foot-icons a { font-size: 19px; }

/* ============================================================
   19. ASSISTANT
   ============================================================ */
#ia-bulle {
  border: 0; border-radius: 50%;
  background: linear-gradient(140deg, var(--brand-a), var(--brand-b));
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
#ia-box { border-radius: var(--r-lg); background: rgba(22,22,26,.96); backdrop-filter: blur(24px); }
#ia-i { background: var(--surface-2); border: 0; border-radius: var(--r-full); color: var(--text); }
#ia-env { background: var(--text); color: #000; border: 0; border-radius: 50%; }

/* ============================================================
   20. UTILITAIRES
   ============================================================ */
.hausse, .up, .pos { color: var(--up); }
.baisse, .down, .neg { color: var(--down); }
.or { color: var(--or); }
.ttl { font-size: 24px; font-weight: 600; letter-spacing: -.03em; color: var(--text); }
.gold { color: var(--or); }
.wht { color: var(--text); }
img { max-width: 100%; }
:where(body.rv) :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ============================================================
   21. COMPLEMENTS — classes relevees dans le balisage
   ============================================================ */

/* ---------- Administration du carrousel ---------- */
.adm-hd {
  display: flex; align-items: center; gap: var(--s3);
  font-size: 15px; font-weight: 600; letter-spacing: -.02em;
  cursor: pointer; padding-bottom: var(--s4);
}
.adm-hd b { flex: 1; text-align: left; }
.adm-bd { padding-top: var(--s4); box-shadow: inset 0 1px 0 var(--hairline); }
.adm-num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-3); display: grid; place-items: center;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.adm-in-wrap { flex: 1; display: flex; flex-direction: column; gap: var(--s2); }
.adm-sel {
  background: var(--surface-2); border: 0; border-radius: var(--r-sm);
  color: var(--text); font-family: var(--font); font-size: 14px; padding: 10px 13px;
}
.adm-act { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }
.adm-note { font-size: 12.5px; line-height: 1.6; color: var(--text-3); margin-top: var(--s4); }
.adm-sup {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--down-soft); color: var(--down);
  border: 0; cursor: pointer; display: grid; place-items: center;
}

/* ---------- Boutons compacts ---------- */
.btn-sm, .btn-sm-o, .btn-ghost-sm, .btn-danger-sm {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 0; cursor: pointer; text-decoration: none;
  border-radius: var(--r-full); padding: 10px 17px;
  font-family: var(--font); font-size: 13.5px; font-weight: 550;
  background: var(--surface-3); color: var(--text);
  transition: filter .2s var(--ease), transform .2s var(--ease);
}
.btn-sm:hover, .btn-sm-o:hover, .btn-ghost-sm:hover, .btn-danger-sm:hover { filter: brightness(1.16); }
.btn-sm:active, .btn-sm-o:active, .btn-ghost-sm:active, .btn-danger-sm:active { transform: scale(.97); }
.btn-sm-o { background: linear-gradient(120deg, var(--brand-a), var(--brand-b)); color: #fff; }
.btn-ghost-sm { background: transparent; box-shadow: inset 0 0 0 1px var(--hairline-2); }
.btn-danger-sm { background: var(--down-soft); color: var(--down); }

/* ---------- Feuille modale ---------- */
.app-sheet-grip { width: 38px; height: 4px; border-radius: var(--r-full); background: var(--hairline-2); margin: var(--s2) auto var(--s5); }
.app-sheet-ttl { font-size: 18px; font-weight: 600; letter-spacing: -.025em; text-align: center; }


/* ---------- Profil : entete et onglets ---------- */
.profil-hd { display: flex; align-items: center; gap: var(--s4); padding: var(--s4); }
.profil-hd-av {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(140deg, var(--brand-a), var(--brand-b));
  display: grid; place-items: center; font-size: 15px; font-weight: 600; color: #fff;
  overflow: hidden;
}
.profil-hd-av img { width: 100%; height: 100%; object-fit: cover; }
.profil-hd-info { flex: 1; min-width: 0; }
.name { font-size: 15px; font-weight: 550; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.email { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.profil-onglet {
  flex: 0 0 auto; white-space: nowrap; cursor: pointer;
  background: rgba(255,255,255,.08); border: 0; border-radius: var(--r-full);
  padding: 9px 16px; font-family: var(--font); font-size: 13px; font-weight: 500;
  color: var(--text-2); transition: background .2s var(--ease), color .2s var(--ease);
}
.profil-onglet:hover { background: rgba(255,255,255,.16); color: var(--text); }
.profil-onglet.on, .profil-onglet.active { background: var(--text); color: #000; font-weight: 550; }

.profil-section-lbl {
  display: block; font-size: 12px; font-weight: 550; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s4);
}
.profil-info-val { font-size: 15px; font-weight: 550; color: var(--text); }
.profil-offer-badge {
  display: inline-block; border-radius: var(--r-full); padding: 4px 11px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  background: rgba(240,184,64,.16); color: var(--or); margin-bottom: var(--s3);
}
.profil-plan, .plan-free { font-size: 13px; color: var(--text-2); }

/* ---------- Champ mot de passe ---------- */
.mdp-wrap { position: relative; }
.mdp-wrap .profil-input { padding-right: 46px; }
.mdp-oeil {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: transparent; color: var(--text-3); display: grid; place-items: center;
}
.mdp-oeil:hover { color: var(--text); background: var(--surface-3); }

/* ---------- Cloche ---------- */
.cloche-btn {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface-3); border: 0; cursor: pointer;
  color: var(--text); display: grid; place-items: center; font-size: 18px;
}
.cloche-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-full);
  background: var(--down); color: #fff; font-size: 10px; font-weight: 600; line-height: 17px;
}
.cloche-vide { padding: var(--s8) var(--s5); color: var(--text-3); font-size: 14px; text-align: center; }

/* ---------- Etats et divers ---------- */
.anim-1 { color: var(--text-2); font-size: 13px; }
.anim-1 a { color: #A8B0FF; text-decoration: none; }
.l1 { display: block; }
.mb { text-align: center; }
.sub { font-size: 13px; color: var(--text-2); }
.fl { display: flex; align-items: center; gap: var(--s3); }
.violet { color: #A8B0FF; }
.danger, .danger i { color: var(--down); }
.soon { opacity: .5; pointer-events: none; }
/* Point discret sur les entrees a venir, pose sur l'icone */
.bnav .bnav-soon {
  position: absolute; top: 8px; left: 50%; margin-left: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--or);
}
.spin { animation: tourne .9s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* ---------- Navigation bureau : masquee, mais ses enfants aussi ---------- */
.nav, .nav-inner, .nav-links, .nav-right, .nav-user,
.nav-dropdown, .nav-dropdown-btn, .nav-link,
.nav-logo, .nav-logo-orb, .nav-logo-txt,
.nav-av, .nav-av-img, .nav-av-check,
.cloche-dd, .profil-dd { }

/* ============================================================
   23. ELEMENTS FLOTTANTS INJECTES PAR LE JAVASCRIPT
   Le bouton d'installation et la bulle d'assistant ecrivent leur
   propre feuille a l'execution, donc apres celle-ci dans la
   cascade : seul !important peut les recadrer. On ne touche qu'a
   leur position, jamais a leur apparence.
   ============================================================ */

/* Hauteur reservee a la barre du bas, calculee une fois */
:root { --barre-basse: 82px; }

/* Bouton d'installation : centre dans la colonne, au-dessus de la barre */
#pwa-btn {
  left: 50% !important; right: auto !important;
  transform: translateX(-50%) !important;
  bottom: calc(var(--barre-basse) + env(safe-area-inset-bottom)) !important;
  max-width: calc(100vw - var(--gutter) * 2) !important;
  font-family: var(--font) !important;
  font-size: 13px !important; font-weight: 550 !important;
  border-radius: var(--r-full) !important;
  z-index: 49 !important;
}

/* Bulle d'assistant : calee sur le bord droit de la colonne */
.ia-bulle, #ia-bulle {
  right: max(var(--gutter), calc(50% - 220px)) !important;
  bottom: calc(var(--barre-basse) + env(safe-area-inset-bottom)) !important;
  z-index: 51 !important;
}
/* Le panneau de discussion reste dans la colonne */
.ia-box, #ia-box {
  right: max(var(--gutter), calc(50% - 220px)) !important;
  left: auto !important;
  bottom: calc(var(--barre-basse) + 68px + env(safe-area-inset-bottom)) !important;
  max-width: min(400px, calc(100vw - var(--gutter) * 2)) !important;
  z-index: 52 !important;
}

/* Banniere d'installation iOS : meme colonne */
.inv-b, .twa-abo {
  left: 50% !important; right: auto !important;
  transform: translateX(-50%) !important;
  bottom: calc(var(--barre-basse) + var(--s3) + env(safe-area-inset-bottom)) !important;
  width: calc(100% - var(--gutter) * 2) !important;
  max-width: 440px !important;
}

/* ============================================================
   24. ESPACES VIDES ET DEGAGEMENTS
   ============================================================ */

/* Le pied degage la barre flottante, sans un pixel de plus : la
   barre mesure 82 px, c'est exactement ce qu'il faut pour que les
   icones ne passent pas dessous. */
/* La barre flottante occupe 69 px : 57 de hauteur, 12 du bas de
   l'ecran. Le degagement lui laisse cette place plus 46 px
   d'intervalle — les icones remontent franchement au-dessus
   d'elle, sans la frôler. */
.foot { padding-bottom: calc(var(--barre-basse) + 33px + env(safe-area-inset-bottom)) !important; }
.foot-icons { margin-bottom: 0 !important; }
.foot-inner > p:last-child { margin-bottom: 0 !important; }
.foot-inner > *:last-child { margin-bottom: 0 !important; }
.page { padding-bottom: var(--s8); }

/* Une section dont le contenu est masque ne doit pas garder ses 88 px
   de respiration : c'est ce qui creusait les grands vides. */
.s > .c:empty,
.s:has(> .c:empty) { padding-block: 0; }
.illu:empty, .illu-img:empty, .mini-liste:empty,
#v2-pf:empty, #adm:empty, #v2-legs:empty { display: none; }

.final { padding-block: var(--s9) var(--s7); }
.final-in { display: block; }

/* ============================================================
   25. BLOC DEROULANT DE L'ADMINISTRATION
   Il s'ouvre et se ferme par la classe .on posee sur #adm. Sans
   cette regle le corps restait toujours deploye.
   ============================================================ */
.adm-bd {
  display: none;
  padding-top: var(--s4);
  box-shadow: inset 0 1px 0 var(--hairline);
}
.adm.on .adm-bd, #adm.on .adm-bd { display: block; }
.adm-hd { user-select: none; }
.adm-hd > i:last-child { transition: transform .28s var(--ease); color: var(--text-3); }
.adm.on .adm-hd > i:last-child, #adm.on .adm-hd > i:last-child { transform: rotate(180deg); }

/* ============================================================
   26. RESSERREMENT DES ESPACES
   Un bloc qui se termine par un bouton, un badge ou une pastille
   n'a pas besoin de la respiration pleine : l'oeil a deja compris
   que la section se termine.
   ============================================================ */

.s { padding-block: var(--s9); }

/* Dernier element d'une carte : plus de marge sous lui */
.obj-card > :last-child,
.acces > :last-child,
.promesse > :last-child,
.mini-l > :last-child,
.profil-bloc > :last-child,
.adm > :last-child { margin-bottom: 0; }

/* Une section qui se termine par un bouton se resserre */
.s > .c > .btn:last-child,
.s > .c > .centre:last-child,
.s .h-actions:last-child { margin-bottom: 0; }

.acces-band { margin-bottom: 0; }
.s:has(> .c > .acces-band:last-child) { padding-bottom: var(--s7); }

/* Blocs de contenu suivis d'un appel a l'action */
.illu, .illu.inv { margin-bottom: 0; }
.mini-liste { margin-top: var(--s4); margin-bottom: 0; }
/* Le bouton est enveloppe dans .h-actions : c'est ce conteneur qu'il
   faut ecarter, pas le bouton lui-meme. La regle porte sur toutes les
   sections, quel que soit le parent — les selecteurs de voisinage
   echouaient des qu'un commentaire ou un noeud s'intercalait. */
#v2 .s .h-actions,
#v2 .s .illu > .btn,
#v2-pf .btn {
  margin-top: var(--s8) !important;
  margin-bottom: var(--s7) !important;
}

/* Video et administration : moins d'air entre les deux */
.video-car { margin-bottom: var(--s4); }
.adm { margin-top: var(--s5); }

/* Bloc final : le pied suit immediatement */
.final { padding-block: var(--s8) var(--s6); }
.final-a, .final .h-actions { margin-bottom: 0; }

/* ============================================================
   27. DEGAGEMENT DU PIED DE PAGE
   La bulle de discussion mordait encore sur la rangee d'icones
   sociales : on ecarte les deux.
   ============================================================ */
.foot-icons {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  justify-content: center; margin-top: var(--s5);
  padding-inline: 64px;   /* la bulle occupe le coin droit */
}
.foot-icons a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 17px;
  background: var(--surface-2); color: var(--text-2);
  text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease);
}
.foot-icons a:hover { background: var(--surface-3); color: var(--text); }

/* La bulle remonte au-dessus des icones sociales */
/* Bulle dans l'angle : collee au bord droit de la colonne et posee
   juste au-dessus de la barre, sans la chevaucher. */
.ia-bulle, #ia-bulle {
  right: max(var(--s3), calc(50% - 232px)) !important;
  bottom: calc(var(--barre-basse) - 12px + env(safe-area-inset-bottom)) !important;
  width: 44px !important; height: 44px !important;
}

/* ============================================================
   28. BOUTONS DE FIN DE BLOC
   Un bouton en inline-flex se cale a gauche des que son parent
   est aligne a gauche : c'est ce qui decalait « Creer mon
   portefeuille » et « Voir l'offre Elite Club ».
   ============================================================ */
.illu > .btn, .illu > a.btn,
.mini-liste + .btn,
.s > .c > .btn,
.s > .c > .centre > .btn,
#v2-pf .btn, .pf-carte .btn {
  display: flex; width: 100%; max-width: 100%;
  margin-inline: auto; text-align: center;
}
.illu, .illu.inv, #v2-pf, .pf-carte { text-align: center; }
.illu .illu-tag, #v2-pf .illu-tag { margin-inline: auto; }

/* ============================================================
   29. ALIGNEMENTS
   ============================================================ */

/* Les trois mini-blocs du marche : trois colonnes egales */
.live-pied {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s2); margin-top: var(--s5); align-items: stretch;
}
.live-pied .chip {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; padding: 9px 6px; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center;
}

/* Les icones sociales : une seule rangee, jamais de retour a la ligne */
.foot-icons {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: var(--s2); justify-items: center; align-items: center;
  margin: var(--s3) auto 0; padding-inline: 0;
  max-width: 340px;
}
.foot-icons a { width: 36px; height: 36px; font-size: 16px; }
@media (max-width: 380px) {
  .foot-icons { grid-template-columns: repeat(4, 1fr); row-gap: var(--s3); max-width: 220px; }
}

/* ============================================================
   30. DYNAMISME RETABLI
   Les cartes qui glissent horizontalement ne declenchaient plus
   la revelation : leur conteneur ne quitte jamais l'ecran. On
   anime alors chaque carte a l'entree du conteneur.
   ============================================================ */
.promesses.vu .promesse,
.acces-band.vu .acces,
.obj-grid.vu .obj-card,
.g3.vu .obj-card,
.g2.vu .obj-card {
  animation: entree-carte .45s var(--ease) both;
}
.promesses.vu .promesse:nth-child(2),
.acces-band.vu .acces:nth-child(2),
.obj-grid.vu .obj-card:nth-child(2) { animation-delay: .07s; }
.promesses.vu .promesse:nth-child(3),
.acces-band.vu .acces:nth-child(3),
.obj-grid.vu .obj-card:nth-child(3) { animation-delay: .14s; }
.promesses.vu .promesse:nth-child(4),
.acces-band.vu .acces:nth-child(4),
.obj-grid.vu .obj-card:nth-child(4) { animation-delay: .21s; }
.acces-band.vu .acces:nth-child(5) { animation-delay: .28s; }
.acces-band.vu .acces:nth-child(6) { animation-delay: .35s; }
@keyframes entree-carte {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .promesses.vu .promesse, .acces-band.vu .acces,
  .obj-grid.vu .obj-card, .g3.vu .obj-card, .g2.vu .obj-card { animation: none; }
}

/* ============================================================
   23. CLASSES GENEREES A L'EXECUTION — communes
   Ecrites par le JavaScript, donc absentes du balisage : la
   cloche de notifications et la banniere d'installation
   apparaissent sur toutes les pages authentifiees.
   ============================================================ */

/* ---------- Notifications de la cloche ---------- */
.cloche-n {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s4); text-decoration: none; color: var(--text);
  box-shadow: inset 0 -1px 0 var(--hairline);
}
.cloche-n:hover { background: var(--surface-2); }
.cloche-n.non-lu { background: rgba(78,91,255,.08); }
.cloche-n-ic {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 17px; color: #fff;
}
.cloche-n-txt { flex: 1; min-width: 0; text-align: left; }
.cloche-n-titre {
  font-size: 13px; font-weight: 600; letter-spacing: -.015em; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cloche-n-desc {
  font-size: 12.5px; line-height: 1.45; color: var(--text-2); margin: 4px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cloche-n-date { font-size: 11px; color: var(--text-3); margin-top: 4px; display: block; }
.cloche-n-ic { width: 30px; height: 30px; font-size: 14px; }
.cloche-menu .cloche-n-desc { -webkit-line-clamp: 1; }
.profil-menu .profil-item { font-size: 14px; }

/* ---------- Banniere d'installation ---------- */
.inv-b {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: 88px;
  z-index: 58; max-width: 440px; margin-inline: auto;
  display: flex; gap: var(--s4); align-items: flex-start;
  background: rgba(22,22,26,.94); backdrop-filter: blur(24px);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  padding: var(--s5); text-align: left;
}
.inv-i {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px;
  background: rgba(240,184,64,.16); color: var(--or);
}
.inv-t { flex: 1; min-width: 0; }
.inv-t b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 5px; }
.inv-t p { margin: 0 0 var(--s4); font-size: 12.5px; line-height: 1.6; color: var(--text-2); }
.inv-t p i { color: var(--or); }
.inv-x {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-3); color: var(--text-2);
  border: 0; cursor: pointer; display: grid; place-items: center;
}

.sym { font-weight: 550; letter-spacing: -.01em; }

/* ============================================================
   24. MUR D'ABONNEMENT
   Ecran affiche quand la page demande une formule que le membre
   n'a pas. Il est cree et style par le JavaScript de la page ;
   ses regles arrivent donc apres celles-ci dans la cascade, d'ou
   le !important — seul moyen de le ramener a la charte.

   C'est un moment sensible : quelqu'un vient de se voir refuser
   l'acces. L'ecran doit rester sobre et proposer une sortie, pas
   ressembler a une reclame.
   ============================================================ */
#garde-mur {
  background: rgba(7,7,12,.94) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
}
#garde-mur .gm-carte {
  width: 100% !important; max-width: 400px !important;
  background: rgba(20,20,26,.96) !important;
  border: 0 !important; border-radius: var(--r-xl) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1),
              0 22px 54px rgba(0,0,0,.6) !important;
  padding: var(--s8) var(--s6) var(--s6) !important;
  text-align: center !important;
  font-family: var(--font) !important;
}
#garde-mur .gm-ic {
  width: 56px !important; height: 56px !important;
  border-radius: 50% !important;
  background: rgba(240,184,64,.16) !important;
  color: var(--or) !important; font-size: 24px !important;
  display: grid !important; place-items: center !important;
  margin: 0 auto var(--s5) !important;
}
#garde-mur .gm-t {
  font-size: 22px !important; font-weight: 600 !important;
  letter-spacing: -.028em !important; line-height: 1.15 !important;
  color: var(--text) !important; margin: 0 0 var(--s3) !important;
}
#garde-mur .gm-p {
  font-size: 14.5px !important; line-height: 1.6 !important;
  color: var(--text-2) !important;
  margin: 0 auto var(--s6) !important; max-width: 32ch !important;
}
#garde-mur .gm-p strong { color: var(--text) !important; font-weight: 600 !important; }
#garde-mur .gm-btn {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100% !important; box-sizing: border-box !important;
  background: var(--text) !important; background-image: none !important;
  color: #000 !important; border: 0 !important;
  border-radius: var(--r-full) !important;
  padding: 15px 24px !important; margin-bottom: var(--s3) !important;
  font-family: var(--font) !important; font-size: 15px !important;
  font-weight: 550 !important; text-decoration: none !important;
  box-shadow: none !important;
}
#garde-mur .gm-btn:hover { filter: brightness(.9) !important; }
#garde-mur .gm-lien {
  display: block !important; text-align: center !important;
  color: var(--text-2) !important; text-decoration: none !important;
  font-size: 13.5px !important; font-weight: 500 !important;
  padding: var(--s3) !important;
}
#garde-mur .gm-lien:hover { color: var(--text) !important; }

/* ============================================================
   25. LISTE DE NOTIFICATIONS
   Presente sur « Mon espace » et les pages qui affichent un fil
   d'actualite du compte. Son style vivait dans un bloc <style>
   de la page, retire par la refonte : il est redonne ici, a la
   charte, et servira partout ou le module apparait.
   ============================================================ */
.notif-sec { margin-bottom: var(--s7); }
.notif-list { display: flex; flex-direction: column; gap: var(--s2); }

.notif-item {
  position: relative;
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s4); border-radius: var(--r-md);
  background: rgba(22,22,26,.82);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  text-decoration: none; color: var(--text);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.notif-item:hover { background: rgba(30,30,36,.9); transform: translateY(-2px); }

/* Non lue : fond legerement teinte et pastille rouge */
.notif-item.non-lu {
  background: rgba(78,91,255,.09);
  box-shadow: inset 0 0 0 1px rgba(126,76,255,.28);
}
.notif-item.non-lu::after {
  content: ''; position: absolute; top: var(--s4); right: var(--s4);
  width: 8px; height: 8px; border-radius: 50%; background: var(--down);
}

.notif-ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 18px; color: #fff;
}
.notif-txt { flex: 1; min-width: 0; text-align: left; }
.notif-titre {
  font-size: 14.5px; font-weight: 600; letter-spacing: -.018em;
  color: var(--text); margin: 0; padding-right: var(--s5);
}
.notif-desc {
  font-size: 13px; line-height: 1.5; color: var(--text-2); margin: 5px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-date {
  display: block; font-size: 11.5px; color: var(--text-3); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.notif-vide {
  padding: var(--s8) var(--s5); text-align: center;
  font-size: 14px; color: var(--text-3);
}

/* Contenu reserve : la notification reste visible mais son texte est
   voile. On montre qu'il se passe quelque chose sans le devoiler —
   masquer entierement laisserait croire a une absence d'activite. */
.notif-item.notif-premium-lock .notif-desc {
  filter: blur(4px); user-select: none; pointer-events: none;
}
.notif-item.notif-premium-lock { opacity: .9; }
.cadenas {
  flex: 0 0 auto; align-self: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(240,184,64,.16); color: var(--or);
  display: grid; place-items: center; font-size: 15px;
}

/* ============================================================
   26. PIED DE PAGE ET FENETRES
   Le pied passait par-dessus les fenetres ouvertes : il lui
   manquait un plan explicite dans l'empilement. Toute fenetre
   modale se place a 80 ou au-dela, le pied reste a 1.
   ============================================================ */
.foot, .foot-inner { position: relative; z-index: 1; }

/* ============================================================
   27. LE PIED S'EFFACE PENDANT UNE FENETRE
   Les regles de plan ne suffisent pas toujours : il suffit qu'un
   ancetre soit anime ou floute pour qu'une fenetre reste
   prisonniere de son conteneur. Plutot que de lutter, le pied et
   la barre disparaissent le temps de la conversation — ils n'ont
   de toute facon rien a y faire.
   ============================================================ */
body:has(#su-modal.on) .foot,
body:has(.su-modal.on) .foot,
body:has(.ca-mod-ov.on) .foot,
body:has(#garde-mur) .foot,
body:has(#app-sheet-ov.ouvert) .foot,
body:has(.cloche-menu.on) .foot,
body:has(.profil-menu.open) .foot { visibility: hidden; }

body:has(#su-modal.on) .bnav,
body:has(.su-modal.on) .bnav,
body:has(.ca-mod-ov.on) .bnav { visibility: hidden; }

body:has(#su-modal.on) .ia-bulle,
body:has(.su-modal.on) .ia-bulle,
body:has(#su-modal.on) #pwa-btn,
body:has(.su-modal.on) #pwa-btn { display: none !important; }

/* ============================================================
   28. PIED TOUJOURS AU MEME ENDROIT
   Le pied suivait la fin du contenu : sur une page courte il
   remontait au milieu de l'ecran, sur une page longue il tombait
   tout en bas. D'une page a l'autre, ses icones changeaient donc
   de place — et elles bougeaient encore a l'ouverture d'un bloc,
   puisque le contenu s'allongeait.

   Le corps devient une colonne d'au moins une hauteur d'ecran :
   le contenu occupe l'espace disponible, le pied est repousse
   contre le bas. Il ne bouge plus, quelle que soit la page et
   quel que soit le contenu deplie.
   ============================================================ */
body.rv {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
/* Repli pour les navigateurs sans dvh */
@supports not (min-height: 100dvh) {
  body.rv { min-height: 100vh; }
}

/* Le contenu prend toute la place restante */
body.rv > .page,
body.rv > main,
body.rv > .page-inner { flex: 1 0 auto; }

/* Le pied est pousse contre le bas */
body.rv > .foot { flex: 0 0 auto; margin-top: auto; }

/* Les elements hors du flux — en-tete fixe, navigation, fenetres,
   assistant — ne sont pas concernes par la colonne. */
body.rv > .nav,
body.rv > .m-head,
body.rv > .bnav,
body.rv > .su-modal,
body.rv > .app-sheet-ov,
body.rv > .ia-bulle { flex: 0 0 auto; }

/* ============================================================
   30. LA BARRE HAUTE S'EFFACE PENDANT UNE FENETRE
   Les regles de plan ne suffisent pas toujours : il suffit
   qu'un ancetre soit anime ou floute pour qu'une fenetre reste
   prisonniere de son conteneur. Plutot que de lutter, la barre
   disparait le temps de la fenetre — elle n'a de toute facon
   rien a y faire.
   ============================================================ */
body:has(.pl-mod-ov.on) .m-head,
body:has(.pl-mod-ov.on) .nav,
body:has(.ca-mod-ov.on) .m-head,
body:has(.ca-mod-ov.on) .nav,
body:has(#su-modal.on) .m-head,
body:has(#su-modal.on) .nav,
body:has(.ixm-b.on) .m-head,
body:has(.ixm-b.on) .nav { visibility: hidden; }

/* ============================================================
   31. L'ASSISTANT, AU COMPLET
   Six de ses classes n'etaient traitees nulle part : le fil de
   discussion, les bulles, le champ de saisie, le bouton
   d'envoi, et surtout les QUESTIONS SUGGEREES — des <button>
   sans style, donc sur le fond blanc du navigateur.

   Le module etant commun a toutes les pages, il est traite
   ici une fois pour toutes.
   ============================================================ */

/* Le fil de discussion */
.ia-fil {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s4) 0;
  overflow-y: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ia-fil::-webkit-scrollbar { display: none; }

/* Les bulles. Celle du membre a droite, celle de l'assistant a
   gauche : la conversation se lit sans chercher qui parle. */
.ia-pt {
  font-size: 13.5px; line-height: 1.65;
  border-radius: var(--r-md); padding: var(--s3) var(--s4);
  max-width: 86%; white-space: pre-line; overflow-wrap: break-word;
}
.ia-pt.moi, .ia-fil > .moi .ia-pt, .ia-fil > .moi {
  align-self: flex-end;
  background: rgba(108,60,225,.22); color: #E4DBFF;
}
.ia-pt.ia, .ia-fil > .ia .ia-pt, .ia-fil > .ia {
  align-self: flex-start;
  background: rgba(255,255,255,.07); color: var(--text-2);
}
.ia-fil > div {
  max-width: 86%;
  font-size: 13.5px; line-height: 1.65;
  border-radius: var(--r-md); padding: var(--s3) var(--s4);
  overflow-wrap: break-word;
}
.ia-fil > div.moi {
  align-self: flex-end;
  background: rgba(108,60,225,.22); color: #E4DBFF;
}
.ia-fil > div.ia {
  align-self: flex-start;
  background: rgba(255,255,255,.07); color: var(--text-2);
}

/* ---------- LES QUESTIONS SUGGEREES ----------
   C'est par elles qu'on entre dans la conversation : elles
   doivent se voir et se lire d'un coup d'oeil. Sans style,
   un <button> reprend le fond blanc du navigateur. */
.ia-sug {
  display: flex; flex-direction: column; gap: var(--s2);
  align-self: stretch; margin-top: var(--s2);
}
.ia-s {
  display: block; width: 100%; box-sizing: border-box;
  border: 0; cursor: pointer; text-align: left;
  background: rgba(108,60,225,.14);
  box-shadow: inset 0 0 0 1px rgba(108,60,225,.28);
  border-radius: var(--r-md);
  padding: 11px 15px;
  font-family: var(--font); font-size: 12.5px; font-weight: 550;
  line-height: 1.45; color: #C4AEFF;
  -webkit-appearance: none; appearance: none;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.ia-s:hover {
  background: rgba(108,60,225,.26); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(108,60,225,.5);
}
.ia-s:active { transform: scale(.99); }

/* Le champ de saisie et son bouton */
.ia-bas {
  display: flex; align-items: flex-end; gap: var(--s2);
  padding-top: var(--s3);
  box-shadow: inset 0 1px 0 var(--hairline);
}
.ia-saisie {
  flex: 1; min-width: 0; box-sizing: border-box;
  background: rgba(255,255,255,.07);
  border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  border-radius: var(--r-md);
  padding: 11px 14px; color: var(--text);
  font-family: var(--font);
  /* 16 px : en dessous, iOS zoome a la saisie */
  font-size: 16px; line-height: 1.45;
  max-height: 110px; resize: none;
  -webkit-appearance: none; appearance: none;
}
.ia-saisie::placeholder { color: var(--text-3); }
.ia-saisie:focus {
  outline: none; background: rgba(108,60,225,.12);
  box-shadow: inset 0 0 0 1.5px #6C3CE1;
}
.ia-env {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  background: linear-gradient(135deg, #6C3CE1, #4A2BC4);
  color: #fff; font-size: 18px;
  -webkit-appearance: none; appearance: none;
  transition: filter .2s var(--ease), transform .15s var(--ease);
}
.ia-env:hover { filter: brightness(1.14); }
.ia-env:active { transform: scale(.94); }
.ia-env:disabled { opacity: .45; cursor: not-allowed; }

/* L'en-tete et le pied du panneau */
.ia-h { display: flex; align-items: center; gap: var(--s3); }
.ia-i {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(108,60,225,.2); color: #B9A0FF; font-size: 18px;
}
.ia-h-t { font-size: 15px; font-weight: 600; color: var(--text); margin: 0; }
.ia-h-s { font-size: 11.5px; color: var(--text-2); margin: 2px 0 0; }
.ia-pied {
  font-size: 10.5px; line-height: 1.55; color: var(--text-3);
  margin: var(--s3) 0 0; text-align: center;
}
.ia-pied a { color: #B9A0FF; text-decoration: none; }
.ia-pied a:hover { text-decoration: underline; }

/* ============================================================
   32. NAVIGATION A DEUX NIVEAUX
   Le premier niveau — la sous-barre de section — existait
   deja. Le second est pose par navigation.cjs : il montre les
   pages voisines SANS qu'on ait a cliquer, et marque celle ou
   l'on se trouve.

   La difference tient a ce qu'on voit sans agir : un membre
   arrive sur la revue hebdomadaire decouvre du meme coup les
   cours, les indices et le planning. Auparavant il fallait
   deviner qu'un onglet cachait quatre pages.
   ============================================================ */
.nav-n2 {
  position: relative; z-index: 2;
  max-width: 480px; margin: var(--s2) auto var(--s4);
  padding-inline: var(--gutter);
  box-sizing: border-box;
}
.nav-n2-in {
  display: flex; gap: var(--s2);
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.nav-n2-in::-webkit-scrollbar { display: none; }

.nav-n2-t {
  flex: 0 0 auto; white-space: nowrap;
  display: inline-flex; align-items: center;
  border-radius: var(--r-full); padding: 9px 15px;
  font-size: 12.5px; font-weight: 550; letter-spacing: -.005em;
  text-decoration: none;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  color: var(--text-2);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.nav-n2-t:hover { background: rgba(255,255,255,.12); color: var(--text); }

/* LA PAGE COURANTE : violet plein, et sans lien — un lien vers
   la page ou l'on est deja ne mene nulle part. C'est ce
   marquage qui repond a « ou suis-je ? », la question que la
   navigation d'origine laissait sans reponse. */
.nav-n2-t.ici {
  background: #6C3CE1; color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px rgba(108,60,225,.34);
  cursor: default;
}
.nav-n2-t.ici:hover { background: #6C3CE1; color: #fff; }

/* L'onglet de rubrique actif dans la sous-barre du dessus :
   meme code, pour que les deux niveaux se lisent ensemble. */
.sub-tab.active, .sub-tab.ici {
  background: rgba(108,60,225,.22) !important;
  color: #C4AEFF !important;
  font-weight: 600 !important;
}

@media (max-width: 380px) {
  .nav-n2-t { padding: 8px 13px; font-size: 12px; }
}

/* ============================================================
   33. LES DEUX BARRES TIENNENT DANS LE CADRE
   Elles debordaient : « overflow-x: auto » etait bien pose sur
   la rangee d'onglets, mais rien ne bornait la largeur de ses
   conteneurs. Un element ne peut defiler que si son parent lui
   impose une limite — sans quoi il s'etale, et c'est la page
   entiere qui deborde.

   Chaque niveau est donc borne a la colonne de 480 px, et sa
   rangee d'onglets se fait glisser a la main, de la droite
   vers la gauche.
   ============================================================ */

/* ---------- Le premier niveau : la sous-barre ---------- */
.sub-bar {
  width: 100%; max-width: 100%; box-sizing: border-box;
  overflow: hidden;
}
.sub-bar-inner {
  width: 100%; max-width: 480px; box-sizing: border-box;
  margin-inline: auto; padding-inline: var(--gutter);
  min-width: 0; overflow: hidden;
}
/* Le conteneur intermediaire du gabarit porte un style en
   ligne « display:flex » : il faut lui rendre la capacite de
   retrecir, sinon il impose la largeur de son contenu. */
.sub-bar-inner > div { min-width: 0; max-width: 100%; }

.sub-bar-tabs, #nav-l2-tabs {
  display: flex !important; flex-wrap: nowrap !important;
  gap: var(--s2);
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  overflow-x: auto !important; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Le geste vertical reste au navigateur, l'horizontal
     revient a la rangee. */
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  padding-bottom: var(--s2);
  justify-content: flex-start;
  cursor: grab;
}
.sub-bar-tabs::-webkit-scrollbar, #nav-l2-tabs::-webkit-scrollbar { display: none; }
.sub-tab, .inpage-tab {
  flex: 0 0 auto !important; white-space: nowrap !important;
}
/* Le titre de section et la fleche de retour ne doivent pas
   ecraser la rangee d'onglets. */
.sub-bar-title { flex: 0 0 auto; white-space: nowrap; }
.sub-bar-back { flex: 0 0 auto; }

/* ---------- Le second niveau ---------- */
.nav-n2 {
  width: 100%; max-width: 480px; box-sizing: border-box;
  overflow: hidden;
}
.nav-n2-in {
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  overflow-x: auto !important;
  touch-action: pan-y; overscroll-behavior-x: contain;
  cursor: grab;
}
.nav-n2-t { flex: 0 0 auto !important; }

/* Pendant le glissement a la main */
.sub-bar-tabs.glisse, .nav-n2-in.glisse {
  cursor: grabbing; user-select: none; scroll-behavior: auto;
}
.sub-bar-tabs.glisse *, .nav-n2-in.glisse * { pointer-events: none; }

/* ============================================================
   34. LE GLISSEMENT DES BARRES D'ONGLETS
   Trois obstacles empechaient le geste, en plus du module :

   - la selection de texte demarrait des le premier mouvement
     et interrompait le glissement ;
   - « touch-action: pan-y » rendait le geste horizontal au
     navigateur au lieu de le laisser a la barre ;
   - un lisere signalant qu'il reste des onglets manquait :
     rien n'invitait a faire le geste.
   ============================================================ */
.sub-bar-tabs, .nav-n2-in, #nav-l2-tabs {
  /* Le geste horizontal appartient a la barre, le vertical
     reste au navigateur. « pan-y » seul laissait le navigateur
     s'approprier les deux. */
  touch-action: pan-y !important;
  -webkit-user-select: none; user-select: none;
  scroll-snap-type: none;
}
/* Le texte d'un onglet ne doit pas se selectionner pendant le
   geste : la selection annule le glissement. */
.sub-tab, .nav-n2-t, .inpage-tab {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

/* LA BANDE NOIRE A DROITE
   Le degrade partait de « transparent » vers la couleur du
   fond, mais il etait pose sur une barre elle-meme translucide
   et floutee : au lieu de se fondre, il formait un bloc sombre
   nettement visible.

   Il ne s'affiche donc plus QUE lorsqu'il reste vraiment des
   onglets a decouvrir — c'est la classe « deborde », posee par
   le script quand la rangee est plus large que son cadre. Et
   il s'estompe en douceur, sur 40 px, jusqu'a une teinte tres
   legere. */
.nav-n2, .sub-bar-inner { position: relative; }
.nav-n2::after, .sub-bar-inner::after {
  content: ''; position: absolute; right: 0; bottom: 0;
  width: 40px; height: 40px;
  pointer-events: none; z-index: 1;
  background: linear-gradient(90deg,
    rgba(10,10,16,0) 0%,
    rgba(10,10,16,.34) 60%,
    rgba(10,10,16,.62) 100%);
  opacity: 0; transition: opacity .25s var(--ease);
  border-radius: 0 var(--r-full) var(--r-full) 0;
}
/* Il n'apparait que s'il reste quelque chose a voir, et
   disparait des qu'on atteint le bout de la rangee. */
.nav-n2.deborde::after, .sub-bar-inner.deborde::after { opacity: 1; }
.nav-n2.au-bout::after, .sub-bar-inner.au-bout::after { opacity: 0; }

/* AUCUNE BARRE DE DEFILEMENT VISIBLE, nulle part : c'est
   l'en-tete de la page, une barre grise y serait une couture
   apparente. Le glissement reste entier — seul son indicateur
   disparait, remplace par le degrade du bord droit.
   « display: none » sur la barre n'empeche pas le defilement,
   il le rend seulement invisible. */
.sub-bar-tabs, .nav-n2-in, #nav-l2-tabs {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.sub-bar-tabs::-webkit-scrollbar,
.nav-n2-in::-webkit-scrollbar,
#nav-l2-tabs::-webkit-scrollbar { display: none !important; }

/* ============================================================
   35. L'EN-TETE DE SECTION
   Le titre au centre, la fleche de retour a sa place, et les
   onglets en dessous.

   La fleche reste calee a gauche : c'est le geste de retour,
   il doit se trouver au meme endroit sur toutes les pages. Le
   titre se centre par rapport a la barre entiere, pas a
   l'espace qui reste — sinon il derive selon la longueur du
   titre.

   Le cercle autour de la fleche est transparent : il donne au
   geste une cible franche sans ajouter une tache de couleur
   dans une zone deja chargee.
   ============================================================ */
.sub-bar-inner > div:nth-child(2) {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  grid-template-areas: 'retour titre vide' 'onglets onglets onglets';
  align-items: center;
  gap: var(--s2) var(--s3) !important;
  width: 100%; min-width: 0;
  justify-content: unset !important;
}

/* La fleche : un cercle transparent, borde d'un lisere */
.sub-bar-back {
  grid-area: retour;
  width: 38px; height: 38px; border-radius: 50% !important;
  display: grid !important; place-items: center;
  background: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
  color: var(--text) !important; font-size: 17px;
  cursor: pointer; flex: 0 0 auto;
  transition: background .18s var(--ease), box-shadow .18s var(--ease);
}
.sub-bar-back:hover {
  background: rgba(255,255,255,.08) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
}
.sub-bar-back:active { transform: scale(.94); }

/* Le titre, centre dans toute la largeur */
.sub-bar-title {
  grid-area: titre;
  text-align: center; min-width: 0;
  font-size: 14px; font-weight: 600; letter-spacing: -.02em;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Les onglets, sur leur propre ligne */
.sub-bar-tabs {
  grid-area: onglets;
  width: 100%; min-width: 0;
  padding-bottom: 0 !important;
  justify-content: flex-start !important;
}

/* ============================================================
   36. LA LANGUETTE DE NAVIGATION
   ============================================================

   Une petite forme epinglee au bord gauche, comme un trombone
   glisse sur une feuille : sa pointe mord dans la marge, le
   reste depasse legerement.

   ELLE NE PREND AUCUN ESPACE. Elle est en position absolue :
   le contenu de la page ne se decale pas d'un pixel, ni en
   hauteur ni en largeur. Elle se pose par-dessus la marge
   gauche, la ou il n'y a rien.

   Au clic, un panneau se deroule juste dessous, ancre a
   gauche — le meme comportement que la palette du profil.
   ============================================================ */
.nav-tab {
  position: absolute;
  /* LA POSITION EST MESUREE, PAS CALCULEE.
     Deux calculs successifs ont echoue :
     - le premier soustrayait deux largeurs egales sous 480 px,
       l'ecart tombait a zero et le bouton se desalignait sur
       telephone ;
     - le second partait de « 100vw », qui INCLUT la barre de
       defilement sur un poste de bureau : le bouton sortait
       alors du cadre de quelques pixels.

     Le script mesure donc la position reelle de la barre haute
     et la reporte dans « --bord-barre ». Aucune hypothese sur
     la largeur de la fenetre, aucune surprise. */
  margin-left: var(--bord-barre, 0px);
  /* Elle mord sur la marge gauche : c'est ce qui donne
     l'impression d'un trombone glisse sur le bord de la page.
     « width: 0 » garantit qu'elle ne prend aucune place — le
     contenu ne se decale pas d'un pixel. */
  /* Cale sur le bord gauche de la barre haute : la languette
     part exactement de la, comme si elle en descendait. */
  left: 0;
  /* Collee a la bande : 4 px les separent. Dans un intervalle
     de 48 px, elle se pose tout en haut et le contenu suit
     juste apres. */
  margin-top: calc((48px - 4px + 13px) * -1);
  z-index: 45;
  width: 0; height: 0;
}

/* ---------- La languette ----------
   Le bord gauche est droit — c'est le cote epingle — et le
   bord droit se termine en pointe. La forme se lit comme
   quelque chose de glisse sous la page. */
.nav-tab-b {
  /* Son BORD ARRIERE — le cote droit, plat — tombe exactement
     sur le bord gauche de la barre haute. Les deux elements
     partagent donc la meme verticale. La barre fait 440 px
     centres ; son bord gauche est donc a
     (100vw - 440px) / 2 de la fenetre. */
  position: absolute; top: 0; left: 0;
  display: grid; place-items: center;
  /* Plus basse — 26 px au lieu de 34 — et plus enfoncee dans
     la marge : seule la pointe et l'icone depassent. */
  width: 42px; height: 26px;
  border: 0; cursor: pointer;
  padding: 0 7px 0 3px;
  background: linear-gradient(135deg, #6C3CE1, #4A2BC4);
  color: #fff; font-size: 14px;
  /* La pointe : le bord droit se resserre vers le milieu. */
  clip-path: polygon(0 0, 76% 0, 100% 50%, 76% 100%, 0 100%);
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  box-shadow: 3px 3px 12px rgba(8,6,24,.5);
  -webkit-appearance: none; appearance: none;
  transition: filter .18s var(--ease), transform .2s var(--ease);
}
.nav-tab-b:hover { filter: brightness(1.15); transform: translateX(2px); }
.nav-tab-b:active { transform: translateX(0) scale(.96); }
.nav-tab-b > i {
  /* Decale vers la gauche : la pointe occupe la droite. */
  margin-right: 6px;
  transition: transform .26s var(--ease);
}
.nav-tab.ouvert .nav-tab-b > i { transform: rotate(90deg); }

/* ---------- Le panneau ----------
   Il se deroule sous la languette, ancre a son bord gauche,
   comme la palette du profil sous son avatar. */
/* LA PALETTE RECOUVRE ENTIEREMENT LE BLOC.
   Elle part du meme bord gauche que lui et prend la meme
   largeur : ouverte, elle le masque completement au lieu de
   le laisser depasser sur un cote.

   Son plan est releve au-dessus du contenu, sans quoi
   l'en-tete de page se peindrait par-dessus. */
.nav-tab-p {
  /* DIRECTEMENT SOUS LA LANGUETTE.
     Elle etait en position fixe et centree sur la fenetre :
     elle se placait donc au milieu de l'ecran, sans rapport
     avec la languette qui l'ouvre.

     Elle redevient absolue, ancree au conteneur de la
     languette : elle part de son bord gauche et tombe juste
     sous elle. */
  position: absolute;
  top: 30px;
  left: 0;
  transform: translateY(-8px) scale(.97);
  width: min(440px, calc(100vw - var(--gutter) * 2));
  max-height: min(460px, calc(100vh - 200px));
  z-index: 72;
  overflow-y: auto; scrollbar-width: none;
  background: rgba(20,20,26,.98);
  backdrop-filter: blur(24px);
  border-radius: var(--r-md);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.1),
    0 18px 44px rgba(0,0,0,.6);
  padding: var(--s2);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px) scale(.97);
  transform-origin: top left;
  transition: opacity .2s var(--ease), transform .2s var(--ease),
              visibility .2s;
}
.nav-tab-p::-webkit-scrollbar { display: none; }
.nav-tab.ouvert .nav-tab-p {
  opacity: 1; visibility: visible; transform: none;
}
.nav-tab-t {
  margin: 0 0 var(--s3); padding: 0;
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
}
/* Les pages en PASTILLES, disposees en rangees : elles se
   lisent d'un coup d'oeil au lieu de former une liste
   verticale, et la palette reste courte. */
.nav-tab-p { display: block; }
.nav-tab-p .nav-tab-l {
  display: inline-flex; align-items: center;
  width: auto; box-sizing: border-box;
  border: 0; cursor: pointer; text-align: left;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13);
  border-radius: var(--r-full);
  margin: 0 var(--s2) var(--s2) 0;
  padding: 9px 15px;
  font-family: var(--font); font-size: 12.5px; font-weight: 550;
  color: var(--text-2); text-decoration: none; white-space: nowrap;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.nav-tab-p .nav-tab-l:hover {
  background: rgba(255,255,255,.13); color: var(--text);
}
/* La page ou l'on est : violet plein, sans lien */
.nav-tab-p .nav-tab-l.ici {
  background: #6C3CE1; color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px rgba(108,60,225,.34);
  cursor: default;
}
.nav-tab-p .nav-tab-l.ici:hover { background: #6C3CE1; color: #fff; }
/* Les rubriques : plus discretes, elles sont un cran au-dessus
   dans la hierarchie. */
.nav-tab-p .nav-tab-r {
  background: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  color: var(--text-3); font-size: 12px; padding: 8px 13px;
}
.nav-tab-p .nav-tab-r:hover {
  background: rgba(108,60,225,.14); color: #C4AEFF;
}
/* Les rangees de pastilles */
.nav-tab-p { padding: var(--s4) var(--s4) var(--s3); }
/* Le retour au choix de module : sur toute la largeur, en bas */
.nav-tab-p .nav-tab-chg {
  display: flex; width: 100%; justify-content: center; gap: 7px;
  margin: 0; background: none; box-shadow: none;
  color: var(--text-3); font-size: 12.5px;
}
.nav-tab-p .nav-tab-chg:hover { background: rgba(255,255,255,.06); }
.nav-tab-chg i { font-size: 16px; }
.nav-tab-sep {
  height: 1px; background: var(--hairline);
  margin: var(--s2) 0 var(--s4);
}

/* ---------- LES SOUS-ONGLETS RESTENT ----------
   Ils sont valides, on n'y touche pas. Seule la sous-barre de
   MODULE — celle qui porte « BRVM Club » et ses rubriques —
   s'efface : c'est elle que la languette remplace. La bande
   des pages, elle, reste affichee. */

/* ============================================================
   38. LA BANDE ET LA LANGUETTE, L'UNE SOUS L'AUTRE
   La bande revient : c'est par elle qu'on circule entre les
   quatre pages, et elle se glisse a la main. La languette
   vient dessous, pour le reste du module.

   Les valeurs de la bande sont celles qui avaient ete
   validees : largeur de la barre haute, glissement libre,
   degrades aux bords.
   ============================================================ */
/* LA BANDE PASSAIT SOUS LA BARRE HAUTE.
   Celle-ci est en position fixe : elle ne reserve aucune place
   dans le flux, et tout ce qui arrive en tete de page se glisse
   dessous. La bande degage donc sa hauteur.

   La languette est retiree : la bande seule suffit en tete, et
   les deux boutons prennent le relais plus bas. */
/* LA LANGUETTE RESTE SUR LES PAGES DE DONNEES.
   Elle n'est retiree que sur les pages de MODULE, ou les deux
   boutons la remplacent.

   Ecrite sans condition, cette regle la faisait disparaitre de
   tout le site — y compris des pages Cours, Indices, Planning
   et Revue, ou elle avait ete validee. C'est « .m-in », le
   conteneur propre aux pages de module, qui fait la
   difference. */
body:has(.m-in) .nav-tab { display: none !important; }
/* SAUF SUR LA MARKETPLACE : ses trois rubriques — projets,
   crowdfunding, experts — se choisissent par la languette. La
   masquer priverait le membre du seul moyen d y passer. */
/* Une page atteinte avec « ?m=... » affiche la languette du
   module demande : c'est par la qu'on est arrive. */
body[data-module] .nav-tab,
body:has(#subbar-mkt) .nav-tab,
body:has(#subbar-aca) .nav-tab,
body:has(#subbar-esp) .nav-tab,
body:has(.mkt-in) .nav-tab {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.nav-pages-in {
  display: flex; flex-wrap: nowrap; gap: var(--s2);
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  padding-inline: var(--s2);
  overflow-x: auto;
  /* Le geste horizontal appartient a la bande, le vertical
     reste au navigateur. */
  touch-action: pan-x; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: none;
  cursor: grab;
  -webkit-user-select: none; user-select: none;
  padding-block: var(--s2);
  margin-block: calc(var(--s2) * -1);
}
.nav-pages-in::-webkit-scrollbar { display: none; }
.nav-pages-in.glisse { cursor: grabbing; scroll-behavior: auto; }
.nav-pages-in.glisse * { pointer-events: none; }
.nav-pages-t {
  flex: 0 0 auto; white-space: nowrap;
  display: inline-flex; align-items: center;
  border-radius: var(--r-full); padding: 9px 16px;
  font-size: 12.5px; font-weight: 550; letter-spacing: -.005em;
  text-decoration: none;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  color: var(--text-2);
  -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.nav-pages-t:hover { background: rgba(255,255,255,.12); color: var(--text); }
/* La page courante : violet plein, sans lien */
.nav-pages-t.ici {
  background: #6C3CE1; color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px rgba(108,60,225,.34);
  cursor: default;
}
.nav-pages-t.ici:hover { background: #6C3CE1; color: #fff; }
/* Les onglets se fondent aux bords, sans etre coupes net */
.nav-pages::before, .nav-pages::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  width: 34px; pointer-events: none; z-index: 2;
  opacity: 0; transition: opacity .3s var(--ease);
}
.nav-pages::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg) 45%, rgba(7,7,12,0));
}
.nav-pages::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg) 45%, rgba(7,7,12,0));
}
.nav-pages.deborde::after { opacity: 1; }
.nav-pages.au-bout::after { opacity: 0; }
.nav-pages.parti::before { opacity: 1; }

/* LA LANGUETTE, A MI-CHEMIN.
   Elle est en position absolue et de hauteur nulle : pour la
   placer au milieu de l'intervalle, on la remonte de la moitie
   de sa propre hauteur — 17 px sur 34 — depuis le haut du
   bloc suivant.

   L'intervalle fait 56 px ; elle se pose donc a 28 px sous la
   bande, exactement au milieu. */
.nav-tab {
  /* Centree dans l'intervalle, qui passe a 72 px : le bouton
     respire des deux cotes au lieu d'etre coince entre la
     bande et le bloc. */
  margin-top: calc((var(--s9) / 2 + 13px) * -1);
}

@media (hover: hover) and (pointer: fine) {
  .nav-pages-in { cursor: grab; }
  .nav-pages-in:active, .nav-pages-in.glisse { cursor: grabbing; }
  .nav-pages-t:not(.ici) { cursor: pointer; }
}
@media (max-width: 380px) {
  .nav-pages-t { padding: 8px 14px; font-size: 12px; }
}

/* ============================================================
   39. LA PALETTE EN DEUX ETAGES
   Les rubriques du module en tete, les pages de la rubrique
   choisie en dessous. On choisit d'abord une rubrique, puis
   une page : la palette suit cet ordre.

   Un clic sur une rubrique remplace la liste du bas ET la
   bande d'onglets — les deux montrent toujours la meme chose.
   ============================================================ */
.nav-tab-rangee {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-bottom: var(--s3);
}
/* La rubrique ouverte : marquee, pour qu'on sache d'ou vient
   la liste du dessous. */
.nav-tab-p .nav-tab-r.active {
  background: rgba(108,60,225,.2);
  box-shadow: inset 0 0 0 1px rgba(108,60,225,.4);
  color: #C4AEFF; font-weight: 600;
}
.nav-tab-p .nav-tab-l { margin: 0; }

/* ============================================================
   40. LA BANDE SUR LES PAGES DE MODULE
   Elles utilisent « .m-in » et n'ont pas d'en-tete « -hero » :
   la bande s'y pose en tete du contenu, avec les memes ecarts
   que sur les pages de donnees.
   ============================================================ */
.m-in > .nav-pages {
  margin: var(--s5) auto var(--s9);
}
.m-in > .nav-tab { position: absolute; }
/* Le premier bloc de la page descend pour laisser la place au
   bouton, comme les en-tetes des pages de donnees. */
.m-in > .nav-tab + * { margin-top: var(--s6); }

/* ============================================================
   41. LES DEUX BOUTONS DE MODULE
   Sous le premier bloc, dans la forme deja validee sur la page
   parrainage : deux pastilles de largeur egale, cote a cote.

     [ Explorer le module ]   [ Autres modules ]

   Le premier deroule les rubriques et leurs pages ; le second
   ouvre la feuille « Application ».
   ============================================================ */
.bm {
  position: relative; z-index: 20;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s2);
  width: 100%; max-width: 440px; box-sizing: border-box;
  /* Descendus : un ecart franc les separe du bloc du dessus. */
  margin: var(--s6) auto var(--s8);
}
.bm-b {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; box-sizing: border-box; min-width: 0;
  border: 0; cursor: pointer;
  border-radius: var(--r-full); padding: 13px 12px;
  font-family: var(--font); font-size: 13px; font-weight: 550;
  letter-spacing: -.01em; white-space: nowrap;
  -webkit-appearance: none; appearance: none;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.bm-b > span {
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.bm-b > i { flex: 0 0 auto; font-size: 16px; }
/* Explorer : l'action principale, en violet de marque */
.bm-b1 {
  background: linear-gradient(135deg, #6C3CE1 0%, #4A2BC4 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 18px rgba(108,60,225,.3);
}
.bm-b1:hover { filter: brightness(1.12); }
/* Autres modules : secondaire, il ne doit pas concurrencer */
.bm-b2 {
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  color: var(--text-2);
}
.bm-b2:hover { background: rgba(255,255,255,.13); color: var(--text); }
.bm-b:active { transform: scale(.98); }
.bm.ouvert .bm-b1 { filter: brightness(1.15); }

/* ---------- La palette ----------
   Elle couvre la largeur des deux boutons, et descend juste
   dessous. */
.bm-p {
  position: absolute; top: calc(100% + var(--s2));
  left: 0; right: 0; z-index: 40;
  max-height: min(440px, calc(100vh - 200px));
  overflow-y: auto; scrollbar-width: none;
  background: rgba(20,20,26,.98);
  backdrop-filter: blur(24px);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.1),
    0 18px 44px rgba(0,0,0,.6);
  padding: var(--s4);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px) scale(.98);
  transform-origin: top center;
  transition: opacity .2s var(--ease), transform .2s var(--ease),
              visibility .2s;
}
.bm-p::-webkit-scrollbar { display: none; }
.bm.ouvert .bm-p { opacity: 1; visibility: visible; transform: none; }

/* Tout le contenu de la palette est centre : le titre du
   module, les rubriques, les pages. */
.bm-p { text-align: center; }
.bm-t {
  margin: 0 0 var(--s3);
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
  text-align: center;
}
.bm-t:empty { display: none; }
.bm-rangee {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  justify-content: center;
  margin-bottom: var(--s3);
}
.bm-l {
  display: inline-flex; align-items: center;
  border: 0; cursor: pointer; text-decoration: none;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13);
  border-radius: var(--r-full); padding: 9px 15px;
  font-family: var(--font); font-size: 12.5px; font-weight: 550;
  color: var(--text-2); white-space: nowrap;
  -webkit-appearance: none; appearance: none;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.bm-l:hover { background: rgba(255,255,255,.13); color: var(--text); }
/* La page ou l'on est : violet plein, sans lien */
.bm-l.ici {
  background: #6C3CE1; color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px rgba(108,60,225,.34);
  cursor: default;
}
.bm-l.ici:hover { background: #6C3CE1; color: #fff; }
/* Les rubriques : un cran au-dessus dans la hierarchie, donc
   plus discretes que les pages. */
.bm-r {
  background: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  color: var(--text-3); font-size: 12px; padding: 8px 13px;
}
.bm-r:hover { background: rgba(108,60,225,.14); color: #C4AEFF; }
/* La rubrique ouverte : on sait d'ou vient la liste du dessous */
.bm-r.active {
  background: rgba(108,60,225,.2);
  box-shadow: inset 0 0 0 1px rgba(108,60,225,.4);
  color: #C4AEFF; font-weight: 600;
}
.bm-sep {
  height: 1px; background: var(--hairline);
  margin: var(--s2) 0 var(--s4);
}

@media (max-width: 380px) {
  .bm-b { font-size: 12px; padding: 12px 8px; gap: 6px; }
  .bm-b > i { font-size: 15px; }
}

/* ============================================================
   42. LA BANDE, SEULE ET SOBRE
   La fleche de retour et le titre de section disparaissent :
   ils occupaient une ligne pour ne rien apprendre — le membre
   sait dans quelle section il est par le contenu de la page.

   Il ne reste que les sous-onglets, glissables a la main, dans
   le meme cadre et la meme typographie que les deux boutons du
   dessous : les trois elements forment un ensemble.
   ============================================================ */
.sub-bar-back,
.sub-bar-title { display: none !important; }
/* La rangee reprend toute la largeur une fois seule */
.sub-bar-inner > div:nth-child(2) {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

/* ---------- Le meme cadre que les boutons ----------
   Fond, lisere et coins identiques : la bande et les boutons
   se lisent comme une meme famille. */
.nav-pages-t {
  background: rgba(255,255,255,.07) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important;
  border-radius: var(--r-full) !important;
  padding: 13px 18px !important;
  font-family: var(--font) !important;
  font-size: 13px !important; font-weight: 550 !important;
  letter-spacing: -.01em !important;
  color: var(--text-2) !important;
}
.nav-pages-t:hover {
  background: rgba(255,255,255,.13) !important;
  color: var(--text) !important;
}
/* La page courante : le violet de marque, comme le bouton
   « Explorer le module ». */
.nav-pages-t.ici {
  background: linear-gradient(135deg, #6C3CE1 0%, #4A2BC4 100%) !important;
  color: #fff !important; font-weight: 600 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2),
              0 6px 18px rgba(108,60,225,.3) !important;
}
.nav-pages-t.ici:hover {
  background: linear-gradient(135deg, #6C3CE1 0%, #4A2BC4 100%) !important;
  color: #fff !important;
}

@media (max-width: 380px) {
  .nav-pages-t { padding: 12px 15px !important; font-size: 12px !important; }
}

/* Dans la bande, un <button> se comporte comme un lien : sur
   les modules dont les rubriques ne declarent pas de pages,
   les onglets sont relayes par des boutons. */
button.nav-pages-t {
  border: 0; cursor: pointer;
  font-family: var(--font);
  -webkit-appearance: none; appearance: none;
}

/* ============================================================
   43. LES PAGES DE MODULE — ET ELLES SEULES
   ============================================================

   TOUT CE QUI SUIT EST CONDITIONNE A « body:has(.m-in) ».
   Ce conteneur n'existe que sur brvm-club, module-sgi,
   marketplace, academie et mon-espace. Les pages Cours,
   Indices, Planning et Revue ne sont donc jamais touchees.

   Trois corrections :
   1. la bande reprend la position retenue sur les autres
      pages — sous la barre haute, largeur de celle-ci ;
   2. les onglets du gabarit ne s'affichent plus : ils
      faisaient doublon avec la bande ;
   3. le contenu de la palette est centre.
   ============================================================ */

/* ---------- CE QUI S'AFFICHE, ET OU ----------

   PAGES DE DONNEES — Cours, Indices, Planning, Revue :
     la bande des sous-onglets en haut, et la languette.

   PAGES DE MODULE — brvm-club, module-sgi, marketplace,
   academie, mon-espace :
     rien en haut ; les deux boutons sous le premier bloc.

   Dans les deux cas, les rangees du gabarit — sa sous-barre
   et son second niveau — restent masquees : elles font
   doublon. */

/* Le gabarit ne montre plus ses propres rangees */
.sub-bar,
#m-subbar-slot > .sub-bar,
#nav-l2-wrap,
#nav-l2-tabs,
.nav-n2 { display: none !important; }

/* LES PAGES DE MODULE ONT AUSSI LA BANDE ET LA LANGUETTE,
   avec les memes reglages que la page Cours : la bande a 8 px
   sous la barre haute, la languette 12 px plus bas, et le
   contenu qui la suit de pres. */
.m-in { padding-top: calc(var(--barre-haute) - var(--s8)) !important; }

.m-in > .nav-pages {
  display: block !important;
  order: -2;
  position: relative; z-index: 3;
  width: 100%; max-width: 440px; box-sizing: border-box;
  margin: var(--s2) auto 0 !important;
  padding-inline: 0;
  overflow: hidden;
}
.m-in > .nav-tab {
  display: block !important;
  order: -1;
  position: relative !important;
  height: 26px !important;
  margin-top: 12px !important;
  margin-bottom: var(--s2) !important;
}
/* Le premier bloc de contenu descend : un ecart franc le
   separe de la languette et de la bande au-dessus. */
.m-in > .nav-tab + * { margin-top: var(--s6) !important; }

/* Sur les pages de donnees : la bande a sa place retenue */
.rv-in .nav-pages,
.ca-in .nav-pages,
.ix-in .nav-pages,
.pl-in .nav-pages {
  display: block !important;
  position: relative; z-index: 3;
  width: 100%; max-width: 440px; box-sizing: border-box;
  /* Un ecart resserre sous la barre haute : la bande la suit
     de pres, comme deux elements d'un meme ensemble. Elle garde
     en revanche son degagement vers le contenu, ou la languette
     se loge. */
  /* La bande remonte encore — elle passe sous la barre haute —
     et l'intervalle vers le bas s'agrandit a 120 px : la
     languette s'y loge avec de l'air des deux cotes. */
  /* L'intervalle sous la bande tombe a 48 px : la languette et
     le contenu qui la suit remontent d'autant. */
  margin: calc(var(--barre-haute) - var(--s7)) auto 48px;
  padding-inline: 0;
  overflow: hidden;
}
/* Et la languette, epinglee entre la bande et le contenu */
.rv-in .nav-tab,
.ca-in .nav-tab,
.ix-in .nav-tab,
.pl-in .nav-tab { display: block !important; }



/* ---------- 3. La palette, centree ---------- */
body:has(.m-in) .bm-p { text-align: center; }
body:has(.m-in) .bm-t { text-align: center; }
body:has(.m-in) .bm-rangee { justify-content: center; }

/* ============================================================
   44. LE DECALAGE VERS LA DROITE, SUR TELEPHONE
   Barre haute, languette et menus paraissaient pousses d'un
   cote : un element debordait en largeur, ce qui creait une
   barre de defilement horizontale. Tout ce qui est centre sur
   la fenetre se retrouvait alors decale de sa largeur.

   On coupe le debordement a la racine : rien ne depasse
   lateralement, et les elements centres retrouvent leur axe.
   ============================================================ */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
/* Un enfant ne peut pas forcer la page a s'elargir */
.page, .page-inner,
.m-in, .rv-in, .ca-in, .ix-in, .pl-in, .su-in {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
}
/* La barre haute reste centree quoi qu'il arrive */
.m-head {
  left: 0 !important; right: 0 !important;
  margin-inline: auto !important;
  max-width: min(440px, calc(100% - var(--gutter) * 2)) !important;
}

/* ============================================================
   45. LA PALETTE DE LA LANGUETTE, CENTREE
   Ses pastilles — pages et rubriques — s'alignaient a gauche.
   Centrees, elles se lisent comme un bloc, et la palette
   paraît equilibree quel que soit le nombre d'entrees.
   ============================================================ */
.nav-tab-p { text-align: center; }
.nav-tab-t { text-align: center; }
.nav-tab-rangee {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  justify-content: center;
  margin-bottom: var(--s3);
}
/* Les entrees posees directement dans la palette, sans rangee */
.nav-tab-p > .nav-tab-l { margin-inline: auto; }

/* ============================================================
   46. L'ASSISTANT — PALETTE CLAIRE
   ============================================================

   Fond blanc pour tout le panneau, sauf l'en-tete qui reste
   sombre : le contraste designe la barre de titre sans
   assombrir la lecture.

   Le style d'origine est INJECTE PAR LE SCRIPT, donc apres
   cette feuille : « !important » est necessaire partout.
   ============================================================ */

/* ---------- Le panneau ----------
   Ces regles ne touchent pas a « display » : c'est le script
   qui ouvre et ferme. */
.ia-box, #ia-box {
  background: #FBFAFE !important;
  box-shadow: inset 0 0 0 1px rgba(20,12,50,.1),
              0 18px 44px rgba(0,0,0,.4) !important;
  overflow: hidden !important;
}

/* ---------- L'en-tete, seul element sombre ---------- */
.ia-h {
  display: flex !important; align-items: center !important;
  gap: var(--s3) !important;
  background: linear-gradient(135deg, #2A1B58, #1A1030) !important;
  padding: var(--s4) var(--s5) !important;
  margin: 0 !important;
}
.ia-h-t { color: #fff !important; font-size: 15px !important;
          font-weight: 600 !important; margin: 0 !important; }
.ia-h-s { color: rgba(255,255,255,.7) !important; font-size: 11.5px !important;
          margin: 2px 0 0 !important; }
.ia-i-ic, .ia-h > i, .ia-h .ia-ic {
  color: #C4AEFF !important;
}

/* ---------- Le fil, sur fond clair ---------- */
.ia-fil {
  background: #FBFAFE !important;
  padding: var(--s4) !important;
  text-align: center !important;
}
/* Les bulles : le membre a droite en violet, l'assistant a
   gauche en gris clair. */
.ia-pt {
  font-size: 13.5px !important; line-height: 1.65 !important;
  border-radius: var(--r-md) !important;
  padding: var(--s3) var(--s4) !important;
  max-width: 88% !important;
  text-align: left !important;
  background: rgba(20,12,50,.06) !important;
  color: #2A2140 !important;
}
.ia-pt.moi, .ia-fil .moi {
  background: rgba(108,60,225,.14) !important;
  color: #3A2470 !important;
}

/* ---------- Les questions suggerees, centrees ---------- */
.ia-sug {
  display: flex !important; flex-direction: column !important;
  align-items: center !important;
  gap: var(--s2) !important; width: 100% !important;
  margin-top: var(--s3) !important;
}
.ia-s {
  display: block !important;
  width: 100% !important; box-sizing: border-box !important;
  padding: 11px 15px !important;
  border-radius: var(--r-md) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(108,60,225,.3) !important;
  background: rgba(108,60,225,.08) !important;
  color: #4A2BC4 !important;
  font-size: 12.5px !important; font-weight: 600 !important;
  font-family: var(--font) !important;
  line-height: 1.45 !important;
  text-align: center !important;
  cursor: pointer !important;
}
.ia-s:hover {
  background: rgba(108,60,225,.16) !important;
  color: #2F1A8A !important;
}

/* ---------- LA ZONE DE SAISIE, A L'HORIZONTAL ----------
   Le champ et le bouton sur une seule ligne, le champ
   occupant toute la place restante. Un « textarea » porte une
   largeur intrinseque — l'attribut « cols » — qu'il faut
   neutraliser par une largeur explicite. */
.ia-bas {
  flex-shrink: 0 !important;
  background: #FBFAFE !important;
  border-top: 1px solid rgba(20,12,50,.12) !important;
  padding: var(--s4) !important;
}
/* « .ia-bas » est lui-meme en flex, donc « .ia-saisie » ne
   s'etirait pas : il gardait la largeur de son contenu — 28 px.
   « flex: 1 1 100% » le force a prendre toute la ligne. */
.ia-bas {
  flex-direction: column !important;
  align-items: stretch !important;
}
.ia-saisie {
  display: flex !important;
  flex: 1 1 100% !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: var(--s2) !important;
  width: 100% !important; box-sizing: border-box !important;
}
.ia-i {
  /* « display: grid » lui venait d'une regle voisine : un
     textarea doit rester un bloc. */
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important; min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 11px 14px !important;
  border-radius: var(--r-md) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(20,12,50,.16) !important;
  background: #fff !important;
  color: #14092E !important;
  /* 16 px : en dessous, iOS zoome a la saisie */
  font-size: 16px !important; line-height: 1.45 !important;
  font-family: var(--font) !important;
  /* « resize: none » suffit rarement sur Safari : la poignee
     de redimensionnement laisse un trait a droite. On la
     masque explicitement. */
  resize: none !important;
  min-height: 44px !important; max-height: 110px !important;
  text-align: left !important;
  overflow: auto !important;
  -webkit-appearance: none !important; appearance: none !important;
}
.ia-i::-webkit-resizer { display: none !important; }
.ia-i::-webkit-scrollbar { width: 0 !important; }
.ia-i::placeholder { color: rgba(20,12,50,.42) !important; }
.ia-i:focus {
  outline: none !important;
  background: #fff !important;
  box-shadow: inset 0 0 0 1.5px #6C3CE1 !important;
}
.ia-env {
  flex: 0 0 44px !important;
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important;
  display: grid !important; place-items: center !important;
  border: 0 !important;
  background: linear-gradient(135deg, #6C3CE1, #4A2BC4) !important;
  color: #fff !important; font-size: 18px !important;
  cursor: pointer !important;
  padding: 0 !important;
}
.ia-env:disabled { opacity: .4 !important; }

/* ---------- Le pied, centre ---------- */
.ia-pied {
  color: rgba(20,12,50,.5) !important;
  font-size: 10.5px !important; line-height: 1.55 !important;
  text-align: center !important;
  margin: var(--s3) 0 0 !important;
  background: none !important;
}
.ia-pied a { color: #5B30D0 !important; text-decoration: none !important; }
.ia-pied a:hover { text-decoration: underline !important; }

/* LE PANNEAU TIENT ENTRE LES DEUX BARRES.
   Il passait sous celle du bas : sa hauteur ne tenait compte
   que de la barre haute. Les deux sont maintenant retirees de
   la hauteur disponible — 62 px en haut, 82 en bas — plus un
   degagement de chaque cote. */
/* LE PANNEAU S'OUVRAIT TOUT SEUL.
   « display: flex !important » ecrasait le « display: none »
   qui le tient ferme : il s'affichait donc en permanence, des
   le chargement.

   La mise en forme ne s'applique plus qu'a l'etat OUVERT,
   reconnaissable a la classe « on ». Ferme, il retrouve son
   comportement d'origine. */
/* LE PANNEAU RESTE PRES DE SA BULLE.
   « top » ET « bottom » ensemble l'etiraient sur toute la
   hauteur de l'ecran : il partait se coller en haut au lieu de
   s'ouvrir a cote du bouton.

   Sur un poste de bureau, seul « bottom » est fixe — le
   panneau monte depuis sa bulle, et sa hauteur est bornee pour
   ne pas depasser la barre haute. */
.ia-box.on, #ia-box.on {
  display: flex !important;
  flex-direction: column !important;
  top: auto !important;
  bottom: calc(var(--barre-basse) + var(--s2)) !important;
  max-height: calc(
    100dvh - var(--barre-haute) - var(--barre-basse) - var(--s5)
  ) !important;
}

/* Sur telephone, la place manque : le panneau prend toute la
   hauteur disponible entre les deux barres. */
@media (max-width: 600px) {
  .ia-box.on, #ia-box.on {
    top: calc(var(--barre-haute) + var(--s2)) !important;
    left: var(--s3) !important; right: var(--s3) !important;
    width: auto !important; max-width: none !important;
    height: auto !important;
  }
}
/* Le fil prend la place restante, la zone de saisie reste
   visible en bas. */
.ia-fil {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* ============================================================
   47. LE BOUTON DE LANGUE
   Le drapeau de la langue courante, dans la barre haute. Un
   clic bascule — aucun menu, aucun second geste.

   Il occupe la place d'une icone, comme la cloche.
   ============================================================ */
.bh-lang {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 0; cursor: pointer;
  margin-right: var(--s2);
  padding: 0;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  -webkit-appearance: none; appearance: none;
  transition: background .18s var(--ease), transform .15s var(--ease);
}
.bh-lang:hover { background: rgba(255,255,255,.16); }
.bh-lang:active { transform: scale(.92); }
.bh-lang > span {
  font-size: 17px; line-height: 1;
  /* Les drapeaux sont des emojis : sur les systemes qui ne les
     dessinent pas, le texte de repli reste lisible. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji",
               "Noto Color Emoji", var(--font);
}

/* ============================================================
   48. L'INVITATION PLAY STORE
   Une bande discrete en bas d'ecran, au-dessus de la barre de
   navigation. Elle monte doucement plutot que d'apparaitre :
   une irruption brusque se lit comme une publicite.
   ============================================================ */
.bh-inv {
  position: fixed; z-index: 88;
  left: var(--s3); right: var(--s3);
  bottom: calc(var(--barre-basse) + var(--s3));
  max-width: 440px; margin-inline: auto;
  box-sizing: border-box;
  background: rgba(20,20,26,.98);
  backdrop-filter: blur(24px);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1),
              0 16px 40px rgba(0,0,0,.55);
  padding: var(--s4);
  opacity: 0; transform: translateY(16px);
  transition: opacity .3s var(--ease), transform .34s var(--ease);
}
.bh-inv.on { opacity: 1; transform: none; }

.bh-inv-c {
  display: flex; align-items: flex-start; gap: var(--s3);
  margin-bottom: var(--s3);
}
.bh-inv-i {
  flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: rgba(108,60,225,.18);
  color: #B9A0FF; font-size: 21px;
}
.bh-inv-t { flex: 1; min-width: 0; }
.bh-inv-t b {
  display: block; font-size: 13.5px; font-weight: 600;
  color: var(--text); margin-bottom: 3px;
}
.bh-inv-t p {
  margin: 0; font-size: 11.5px; line-height: 1.5;
  color: var(--text-2);
}
/* La fermeture reste discrete : elle ne doit pas concurrencer
   l'action, mais rester atteignable sans effort. */
.bh-inv-x {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,.07);
  color: var(--text-3); font-size: 15px;
  -webkit-appearance: none; appearance: none;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.bh-inv-x:hover { background: rgba(255,255,255,.14); color: var(--text); }

.bh-inv-b {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; box-sizing: border-box;
  border-radius: var(--r-full); padding: 13px 20px;
  text-decoration: none;
  background: linear-gradient(135deg, #6C3CE1 0%, #4A2BC4 100%);
  color: #fff;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2),
              0 6px 18px rgba(108,60,225,.32);
  transition: filter .2s var(--ease);
}
.bh-inv-b:hover { filter: brightness(1.12); }
.bh-inv-b > i { font-size: 17px; }

/* ============================================================
   49. LA SOUS-BARRE DU PARRAINAGE RESTE
   La regle qui masque les bandes en haut visait « .sub-bar »
   sans distinction — elle emportait donc aussi celle du
   parrainage, qui porte ses deux seuls boutons : « Parrainer
   un ami » et « Devenir partenaire ».

   Sur cette page, ces boutons SONT le contenu, pas une
   navigation redondante. Ils reviennent.
   ============================================================ */
/* SEULE LA SOUS-BARRE DU PARRAINAGE.
   Ecrite sur « .sub-bar » tout court, la regle reaffichait les
   SIX sous-barres du gabarit — BRVM Club, Module SGI et les
   autres — toutes presentes dans chaque page.

   On vise donc « #subbar-par » nommement. */
body:has(.pr-in) #subbar-par {
  display: block !important;
  width: 100%; max-width: 440px; box-sizing: border-box;
  margin: calc(var(--barre-haute) + var(--s3)) auto var(--s5);
  padding: 0;
  background: none !important; box-shadow: none !important;
}
/* Les deux onglets prennent l'apparence des boutons du site */
body:has(.pr-in) #subbar-par .sub-bar-tabs {
  display: flex !important; gap: var(--s2) !important;
  justify-content: center !important;
  padding: 0 var(--s2) !important;
  overflow-x: auto; scrollbar-width: none;
}
body:has(.pr-in) #subbar-par .sub-bar-tabs::-webkit-scrollbar { display: none; }
body:has(.pr-in) #subbar-par .sub-tab {
  flex: 0 0 auto !important; white-space: nowrap !important;
  display: inline-flex !important; align-items: center !important;
  gap: 7px !important; text-decoration: none !important;
  background: rgba(255,255,255,.07) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important;
  border-radius: var(--r-full) !important;
  padding: 13px 18px !important;
  font-family: var(--font) !important;
  font-size: 13px !important; font-weight: 550 !important;
  letter-spacing: -.01em !important;
  color: var(--text-2) !important;
}
body:has(.pr-in) #subbar-par .sub-tab:hover {
  background: rgba(255,255,255,.13) !important; color: var(--text) !important;
}
/* La page courante : le violet de marque */
body:has(.pr-in) #subbar-par .sub-tab.active {
  background: linear-gradient(135deg, #6C3CE1 0%, #4A2BC4 100%) !important;
  color: #fff !important; font-weight: 600 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2),
              0 6px 18px rgba(108,60,225,.3) !important;
}
/* Le titre et la fleche restent masques : les deux boutons se
   suffisent. */
body:has(.pr-in) #subbar-par .sub-bar-title,
body:has(.pr-in) #subbar-par .sub-bar-back { display: none !important; }

/* Les cinq autres sous-barres du gabarit restent masquees sur
   cette page : elles n'y ont rien a dire. */
body:has(.pr-in) #subbar-brvm,
body:has(.pr-in) #subbar-sgi,
body:has(.pr-in) #subbar-mkt,
body:has(.pr-in) #subbar-aca,
body:has(.pr-in) #subbar-esp,
body:has(.pr-in) #nav-l2-wrap,
body:has(.pr-in) .nav-n2 { display: none !important; }

/* ============================================================
   50. LA LANGUETTE — LUMIERE SUR LE CONTOUR
   Le meme principe que l'onglet « Devenir partenaire » : un
   degrade conique tourne derriere le bouton, un disque
   interieur le masque et ne laisse qu'un lisere de 2 px. La
   lumiere semble courir sur le pourtour.

   Ici en violet plutot qu'en dore : le dore est reserve aux
   etiquettes d'abonnement.
   ============================================================ */
.nav-tab-b {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

/* Le disque tournant. Il deborde largement du bouton pour que
   la rotation reste reguliere quel que soit le rapport des
   cotes. */
.nav-tab-b::before {
  content: ''; position: absolute; z-index: -1;
  top: 50%; left: 50%;
  width: 260%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    rgba(255,255,255,.08) 0deg,
    rgba(255,255,255,.08) 270deg,
    rgba(108,60,225,.7) 300deg,
    #C4AEFF 322deg,
    rgba(108,60,225,.7) 344deg,
    rgba(255,255,255,.08) 360deg);
  animation: langue-led 3s linear infinite;
  pointer-events: none;
}

/* Le masque interieur : il ne laisse voir qu'un lisere de
   2 px. Sa couleur reprend le fond du bouton, et sa forme
   suit la pointe. */
.nav-tab-b::after {
  content: ''; position: absolute; z-index: -1;
  inset: 2px;
  background: linear-gradient(135deg, #6C3CE1, #4A2BC4);
  clip-path: polygon(0 0, 76% 0, 100% 50%, 76% 100%, 0 100%);
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  pointer-events: none;
}

@keyframes langue-led {
  from { transform: translate(-50%, -50%) rotate(0turn); }
  to   { transform: translate(-50%, -50%) rotate(1turn); }
}

/* Au survol, la lumiere accelere : le geste obtient une
   reponse. */
.nav-tab-b:hover::before { animation-duration: 1.4s; }

/* Une fois le bouton utilise, la lumiere s'arrete : elle a
   fait son travail. */
.nav-tab.ouvert .nav-tab-b::before { animation: none; }

/* Sans mouvement si le systeme le demande : le lisere reste,
   il ne tourne plus. */
@media (prefers-reduced-motion: reduce) {
  .nav-tab-b::before {
    animation: none;
    background: rgba(108,60,225,.5);
  }
}

/* ============================================================
   LES SOUS-ONGLETS SE CENTRENT
   Valide sur le forum, applique partout. Quand les onglets ne
   remplissent pas la largeur — deux ou trois sur un ecran
   large — ils restaient colles a gauche et laissaient un
   grand vide a droite.

   « safe » compte : sans lui, une bande plus large que
   l'ecran verrait ses premiers onglets sortir a gauche, hors
   d'atteinte du doigt et impossibles a ramener.
   ============================================================ */
.nav-pages-in,
.sub-bar-tabs,
.sub-bar-inner,
#nav-l2-wrap {
  justify-content: safe center;
}
/* La languette garde son alignement : elle se lit de gauche a
   droite, comme un fil d'ariane. */
.nav-tab-p, .nav-tab-r { justify-content: flex-start; }

/* ============================================================
   LES COUCHES DE DECOR RESTENT IMMOBILES
   « .fond-grille » porte une animation « pfDerive » qui fait
   deriver un motif de lignes en boucle. Sous une zone sans
   fond opaque, on la voit passer — un zigzag qui bouge.

   Masquer la couche ne suffit pas : on coupe l'animation.
   ============================================================ */
.fond-grille, .fond-heros, .fond-halo, .page-net,
.fond-grille::before, .fond-grille::after,
.fond-heros::before, .fond-heros::after {
  animation: none !important;
}

/* BRVMH-TWA-COMPACT-V1
   Le bloc dans l onglet du profil : memes etapes, sans le grand
   bandeau ni les marges qui le faisaient deborder. */
.twa-abo.twa-compact {
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  transform: none !important;
  position: static !important;
}
.twa-abo.twa-compact .twa-abo-hd { padding: 16px 14px 14px !important; }
.twa-abo.twa-compact .twa-abo-etapes { padding: 16px 14px !important; }