/* ============================================================
   RUBRIQUE — la page d'un onglet du téléphone (js/pages/rubrique.js)
   ============================================================ */
.rubrique { max-width: 900px; }
.rb-groupe { margin: 0 0 22px; }
.rb-groupe h2 { margin: 0 2px 9px; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--texte-3); }

/* Les pages, en lignes à toucher. */
.rb-liste { border-radius: 20px; border: 1px solid var(--ligne); background: var(--surface); overflow: hidden; }
.rb-ligne {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 16px; align-items: center; gap: 12px;
  min-height: 64px; padding: 10px 14px; border-bottom: 1px solid var(--ligne); color: var(--texte);
  -webkit-tap-highlight-color: transparent; transition: background .2s;
}
.rb-ligne:last-child { border-bottom: 0; }
.rb-ligne:hover, .rb-ligne:active { background: var(--surface-2); }
.rb-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(47, 107, 255, .16); color: var(--ciel); }
.rb-ic svg { width: 21px; height: 21px; }
.rb-ic.est-logo { padding: 6px; background: #fff; }
.rb-ic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rb-txt { min-width: 0; }
.rb-txt b { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; }
.rb-txt small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--texte-2); line-height: 1.35; }
.rb-compte { min-width: 26px; height: 24px; padding: 0 8px; display: grid; place-items: center; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: #fff; background: var(--rouge); }
.rb-chev { width: 16px; height: 16px; color: var(--texte-3); }

/* Les pages courtes et nombreuses, en grille. */
.rb-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rb-tuile {
  min-height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 10px 6px;
  border-radius: 16px; border: 1px solid var(--ligne); background: var(--surface); color: var(--texte);
  font-size: 12.5px; font-weight: 700; line-height: 1.2; text-align: center; -webkit-tap-highlight-color: transparent; transition: background .2s, border-color .2s;
}
.rb-tuile:hover, .rb-tuile:active { background: var(--surface-2); border-color: var(--ligne-2); }
.rb-tuile .rb-ic { width: 36px; height: 36px; border-radius: 11px; }
.rb-tuile .rb-ic.est-logo { padding: 5px; }
@media (min-width: 761px) {
  .rb-grille { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
}