/* =========================================================================
   unbebe.fr — tabbar.css
   Barre d'onglets mobile (< 64 rem) + système de feuilles partagé avec le
   dock de lecture. Ajouté le 2026-10-03, chargé sur toutes les pages
   publiques (inc/tabbar.php).

   HORS `@layer`, chargé après color-mode.css : même raison que
   community.css — un espace de noms à nous (`ub-tabbar`, `ub-sheet`), seul
   le reset hors couche de Blocksy (`button`, `ul`, `li`, `p`, `h2`) est à
   battre, la spécificité de classe suffit.

   Signature : le médaillon central porte le doudou de la marque, teinté par
   l'univers courant, avec un sceau en pastille.
   ========================================================================= */

/* ── Barre ────────────────────────────────────────────────────────────── */

.ub-tabbar { display: none; }

@media (max-width: 63.99rem) {
  /* Espace réservé côté serveur : le pied de page ne passe jamais sous la
     barre, même sans JavaScript. */
  .ub-has-tabbar .ub-footer {
    padding-block-end: calc(var(--ub-tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--ub-s-5));
  }

  .ub-tabbar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--ub-z-tabbar);
    display: block;
    padding-block-end: env(safe-area-inset-bottom, 0px);
    border-block-start: var(--ub-stroke-thin) solid color-mix(in oklab, var(--ub-border) 80%, transparent);
    background-color: color-mix(in oklab, var(--ub-surface) 88%, transparent);
    box-shadow: 0 -0.75rem 2rem -1rem color-mix(in oklab, var(--ub-encre) 22%, transparent);
    -webkit-backdrop-filter: blur(1rem) saturate(1.4);
    backdrop-filter: blur(1rem) saturate(1.4);
    transition: transform var(--ub-dur-base) var(--ub-ease-out);
  }

  /* Clavier virtuel ouvert : la barre s'efface (tabbar.js pose la classe). */
  html.ub-typing .ub-tabbar { transform: translateY(calc(100% + var(--ub-s-6))); }
}

.ub-tabbar__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  block-size: var(--ub-tabbar-h);
  margin: 0 auto;
  padding: 0 var(--ub-s-1);
  max-inline-size: 40rem;
  list-style: none;
}

.ub-tabbar__list > li {
  display: flex;
  justify-content: center;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
}

.ub-tabbar__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1875rem;
  min-inline-size: max-content;
  min-block-size: var(--ub-tabbar-h);
  padding: 0 var(--ub-s-1);
  color: var(--ub-text-muted);
  font-family: var(--ub-font-text);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.ub-tabbar__tab:hover { color: var(--ub-text); }

.ub-tabbar__icon {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 1.875rem;
  border-radius: var(--ub-r-full);
  transition: background-color var(--ub-dur-fast) var(--ub-ease-out);
}

.ub-tabbar__icon .ub-icon { inline-size: 1.375rem; block-size: 1.375rem; }

.ub-tabbar__label { white-space: nowrap; }

/* 320 px : cinq colonnes de 62 px. « Connexion » en tient 60 à 11,5 px,
   sans marge intérieure. */
@media (max-width: 22.49rem) {
  .ub-tabbar__list { padding-inline: 0; }
  .ub-tabbar__tab { padding-inline: 0; font-size: 0.71875rem; }
  .ub-tabbar__icon { inline-size: 2.75rem; }
}

/* Onglet courant : pastille d'univers derrière l'icône + libellé encré. */
.ub-tabbar__tab[aria-current="page"] { color: var(--ub-text); }

.ub-tabbar__tab[aria-current="page"] .ub-tabbar__icon {
  background-color: var(--ub-silo-soft);
  color: var(--ub-silo-ink);
}

.ub-tabbar__tab[aria-expanded="true"] .ub-tabbar__icon { background-color: var(--ub-encre-100); }

.ub-tabbar__badge {
  position: absolute;
  inset-block-start: -0.25rem;
  inset-inline-end: 0.375rem;
  display: grid;
  place-items: center;
  min-inline-size: 1.125rem;
  block-size: 1.125rem;
  padding: 0 0.25rem;
  border: var(--ub-stroke-thin) solid var(--ub-surface);
  border-radius: var(--ub-r-full);
  background-color: var(--ub-framboise-600);
  color: var(--ub-blanc);
  font-size: 0.6875rem;
  font-weight: 700;
}

/* ── Médaillon central ────────────────────────────────────────────────── */

.ub-tabbar__tab--medal { justify-content: flex-end; padding-block-end: 0.5rem; }

.ub-tabbar__medal {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  margin-block: -1.5rem 0.125rem;
  border: var(--ub-stroke) solid var(--ub-surface);
  border-radius: var(--ub-r-full);
  background-color: var(--ub-silo-soft);
  box-shadow: 0 0.625rem 1.25rem -0.5rem color-mix(in oklab, var(--ub-silo) 60%, transparent), 0 0 0 var(--ub-stroke-thin) color-mix(in oklab, var(--ub-silo) 35%, transparent);
  transition: transform var(--ub-dur-base) var(--ub-ease-spring);
  --ub-logo-bg: var(--ub-silo);
  --ub-logo-ink: var(--ub-encre);
  --ub-logo-blush: var(--ub-framboise-100);
}

/* Le doudou de la marque, centré dans le médaillon. */
.ub-tabbar__medal > svg {
  inline-size: 2.375rem;
  block-size: 2.375rem;
}

.ub-tabbar__tab--medal:hover .ub-tabbar__medal { transform: translateY(-0.125rem); }

.ub-tabbar__seal {
  position: absolute;
  inset-block-end: -0.125rem;
  inset-inline-end: -0.25rem;
  display: grid;
  place-items: center;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  border: var(--ub-stroke-thin) solid var(--ub-surface);
  border-radius: var(--ub-r-full);
  background-color: var(--ub-soleil-500);
  color: var(--ub-encre);
}

.ub-tabbar__seal .ub-icon { inline-size: 0.875rem; block-size: 0.875rem; stroke-width: 2.4; }

.ub-tabbar__tab--medal.is-member .ub-tabbar__seal { background-color: var(--ub-menthe-500); }

.ub-tabbar__tab--medal[aria-current="page"] .ub-tabbar__medal { border-color: var(--ub-silo-soft); }

/* Le doudou garde ses couleurs en sombre : yeux encre sur un visage clair. */
html[data-ub-theme="dark"] .ub-tabbar__medal { --ub-logo-ink: oklch(18.37% 0 0); }

/* ── Bouton cookies flottant (ConsentPilot) ───────────────────────────────
   Fond blanc fixe et icône `currentColor` : en sombre il devenait un disque
   blanc, et il recouvrait la barre. Tokens du site, et remonté au-dessus
   de la barre (puis du dock, voir dock.css). */
#consentpilot-floating-btn {
  --cp-bg-solid: var(--ub-surface);
  --cp-text: var(--ub-text);
  --cp-border-strong: var(--ub-border);
  border-radius: var(--ub-r-full);
  box-shadow: var(--ub-sh-sticker);
}

@media (max-width: 63.99rem) {
  .ub-has-tabbar #consentpilot-floating-btn {
    bottom: calc(var(--ub-tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--ub-s-3));
    width: var(--ub-target-min);
    height: var(--ub-target-min);
  }
}

html.ub-sheet-open #consentpilot-floating-btn { display: none; }

/* ── Feuilles (barre et dock) ─────────────────────────────────────────── */

.ub-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--ub-z-modal) - 1);
  background-color: color-mix(in oklab, var(--ub-encre) 45%, transparent);
  opacity: 0;
  transition: opacity var(--ub-dur-base) var(--ub-ease-out);
}

.ub-scrim.is-open { opacity: 1; }

html.ub-sheet-open,
html.ub-sheet-open body { overflow: hidden; }

.ub-sheet {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--ub-z-modal);
  display: flex;
  flex-direction: column;
  max-block-size: min(86dvh, 46rem);
  margin-inline: auto;
  max-inline-size: 40rem;
  padding-block-end: env(safe-area-inset-bottom, 0px);
  border: var(--ub-stroke-thin) solid var(--ub-border);
  border-block-end: 0;
  border-radius: var(--ub-r-lg) var(--ub-r-lg) 0 0;
  background-color: var(--ub-surface);
  box-shadow: var(--ub-sh-float);
  color: var(--ub-text);
  transform: translateY(100%);
  transition: transform var(--ub-dur-base) var(--ub-ease-out);
}

.ub-sheet[hidden] { display: none; }
.ub-sheet.is-open { transform: none; }

.ub-sheet__grip {
  flex: none;
  inline-size: 2.75rem;
  block-size: 0.3125rem;
  margin: var(--ub-s-2) auto 0;
  border-radius: var(--ub-r-full);
  background-color: var(--ub-encre-100);
}

.ub-sheet__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--ub-s-3);
  padding: var(--ub-s-3) var(--ub-s-5) var(--ub-s-3);
}

.ub-sheet__title {
  display: block;
  margin: 0;
  color: var(--ub-text);
  font-family: var(--ub-font-display);
  font-size: var(--ub-fs-h4);
  font-weight: 800;
  line-height: var(--ub-lh-snug);
}

.ub-sheet__sub {
  display: block;
  margin: 0.125rem 0 0;
  color: var(--ub-text-muted);
  font-size: var(--ub-fs-xs);
  line-height: var(--ub-lh-snug);
}

.ub-sheet__close {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--ub-target-min);
  block-size: var(--ub-target-min);
  min-block-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ub-r-full);
  background-color: var(--ub-encre-100);
  color: var(--ub-text);
  cursor: pointer;
}

.ub-sheet__close:hover { background-color: var(--ub-silo-soft); color: var(--ub-text); }
.ub-sheet__close .ub-icon { inline-size: 1.25rem; block-size: 1.25rem; }

.ub-sheet__body {
  overflow-y: auto;
  padding: 0 var(--ub-s-5) var(--ub-s-5);
  overscroll-behavior: contain;
}

.ub-sheet__section {
  margin: var(--ub-s-5) 0 var(--ub-s-2);
  padding: 0;
  color: var(--ub-text-muted);
  font-size: var(--ub-fs-xs);
  font-weight: 700;
  letter-spacing: var(--ub-ls-caps);
  text-transform: uppercase;
}

/* Recherche */
.ub-sheet__search {
  display: flex;
  align-items: center;
  gap: var(--ub-s-2);
  min-block-size: 3.25rem;
  padding: var(--ub-s-1) var(--ub-s-1) var(--ub-s-1) var(--ub-s-4);
  border: var(--ub-stroke-thin) solid var(--ub-border);
  border-radius: var(--ub-r-full);
  background-color: var(--ub-bg);
}

.ub-sheet__search:focus-within { border-color: var(--ub-focus); }
.ub-sheet__search > .ub-icon { inline-size: 1.25rem; block-size: 1.25rem; color: var(--ub-text-muted); }

.ub-sheet__search input {
  flex: 1;
  min-inline-size: 0;
  min-block-size: var(--ub-target-min);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ub-text);
  font-size: var(--ub-fs-body);
}

.ub-sheet__search input:focus { outline: none; }

.ub-sheet__search-go {
  min-block-size: var(--ub-target-min);
  margin: 0;
  padding: 0 var(--ub-s-4);
  border: 0;
  border-radius: var(--ub-r-full);
  background-color: var(--ub-action-framboise, var(--ub-framboise-600));
  color: var(--ub-blanc);
  font-family: var(--ub-font-display);
  font-size: var(--ub-fs-sm);
  font-weight: 700;
  cursor: pointer;
}

/* Univers : tuile image + pastille d'icône + nombre réel. */
.ub-sheet__univers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ub-s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ub-sheet__univers > li { margin: 0; }

.ub-sheet__univers-link {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  gap: var(--ub-s-3);
  min-block-size: 4rem;
  padding: var(--ub-s-2);
  border-radius: var(--ub-r-md);
  background-color: var(--ub-silo-bg);
  color: var(--ub-text);
  text-decoration: none;
}

.ub-sheet__univers-link:hover { color: var(--ub-text); box-shadow: inset 0 0 0 var(--ub-stroke-thin) var(--ub-silo); }

.ub-sheet__univers-media {
  position: relative;
  display: block;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--ub-r-sm);
  background-color: var(--ub-silo-soft);
}

.ub-sheet__univers-media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  border-radius: var(--ub-r-sm);
  object-fit: cover;
}

.ub-sheet__univers-icon {
  position: absolute;
  inset-block-end: -0.25rem;
  inset-inline-end: -0.375rem;
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border: var(--ub-stroke-thin) solid var(--ub-surface);
  border-radius: var(--ub-r-full);
  background-color: var(--ub-silo);
  color: var(--ub-blanc);
  --ub-icon-hole: var(--ub-silo);
}

.ub-sheet__univers-icon .ub-icon { inline-size: 0.9375rem; block-size: 0.9375rem; }
.ub-sheet__univers-text { display: grid; gap: 0.125rem; min-inline-size: 0; }

.ub-sheet__univers-name {
  font-family: var(--ub-font-display);
  font-size: var(--ub-fs-sm);
  font-weight: 700;
  line-height: var(--ub-lh-snug);
}

.ub-sheet__univers-nb { color: var(--ub-silo-ink); font-size: var(--ub-fs-xs); font-weight: 700; }

/* Listes de liens et rangées d'action */
.ub-sheet__rapides,
.ub-sheet__liens {
  display: grid;
  gap: var(--ub-s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ub-sheet__rapides > li,
.ub-sheet__liens > li { margin: 0; }

.ub-sheet__rapides a,
.ub-sheet__liens a,
.ub-sheet__sortie button,
.ub-sheet__row {
  display: flex;
  align-items: center;
  gap: var(--ub-s-3);
  inline-size: 100%;
  min-block-size: 3rem;
  margin: 0;
  padding: var(--ub-s-2) var(--ub-s-3);
  border: 0;
  border-radius: var(--ub-r-sm);
  background-color: transparent;
  color: var(--ub-text);
  font-family: var(--ub-font-text);
  font-size: var(--ub-fs-body);
  font-weight: 600;
  line-height: var(--ub-lh-snug);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.ub-sheet__rapides a:hover,
.ub-sheet__liens a:hover,
.ub-sheet__sortie button:hover,
.ub-sheet__row:hover { background-color: var(--ub-silo-bg); color: var(--ub-text); }

.ub-sheet__rapides .ub-icon,
.ub-sheet__liens .ub-icon,
.ub-sheet__sortie .ub-icon,
.ub-sheet__row > .ub-icon {
  flex: none;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  color: var(--ub-silo-ink);
}

.ub-sheet__row small {
  display: block;
  margin-block-start: 0.125rem;
  color: var(--ub-text-muted);
  font-size: var(--ub-fs-xs);
  font-weight: 400;
}

.ub-sheet__nb {
  margin-inline-start: auto;
  padding: 0.125rem var(--ub-s-2);
  border-radius: var(--ub-r-full);
  background-color: var(--ub-framboise-600);
  color: var(--ub-blanc);
  font-size: var(--ub-fs-xs);
  font-weight: 700;
}

.ub-sheet__identite {
  display: flex;
  align-items: center;
  gap: var(--ub-s-3);
  min-inline-size: 0;
  color: var(--ub-text);
  text-decoration: none;
}

.ub-sheet__identite img,
.ub-sheet__identite .avatar { inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--ub-r-full); object-fit: cover; }

.ub-sheet__sortie {
  margin: var(--ub-s-3) 0 0;
  padding-block-start: var(--ub-s-3);
  border-block-start: var(--ub-stroke-thin) solid var(--ub-border);
}

.ub-sheet__sortie button { color: var(--ub-danger); }
.ub-sheet__sortie button .ub-icon { color: var(--ub-danger); }

/* ── Mouvement réduit, impression, RTL ────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ub-tabbar,
  .ub-tabbar__icon,
  .ub-tabbar__medal,
  .ub-sheet,
  .ub-scrim { transition: none; }

  .ub-tabbar__tab--medal:hover .ub-tabbar__medal { transform: none; }
}

@media print {
  .ub-tabbar,
  .ub-sheet,
  .ub-scrim { display: none; }

  .ub-has-tabbar .ub-footer { padding-block-end: 0; }
}

[dir="rtl"] .ub-tabbar__seal { inset-inline-end: auto; inset-inline-start: -0.25rem; }