/* ==========================================================================
   Coquille : barre haute, navigation, pied, transitions de page
   ========================================================================== */

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Barre haute
   -------------------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in oklab, var(--c-bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-mid) var(--e-ui), background-color var(--d-mid) var(--e-ui);
}
.topbar.is-stuck {
  border-bottom-color: var(--c-line);
  background: color-mix(in oklab, var(--c-bg) 96%, transparent);
}

/* Au-dessus de l'ouverture d'un objet, la barre se fait oublier. */
.topbar.is-over {
  background: linear-gradient(to bottom, rgba(6, 5, 10, 0.66), transparent);
  border-bottom-color: transparent;
  backdrop-filter: none;
}
.topbar.is-over .brand,
.topbar.is-over .nav__link { color: #F6F1E8; }

.topbar__inner {
  width: var(--w-wide);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 68px;
  padding-block: var(--s-2);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4ch;
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 400;
  font-variation-settings: var(--vf-title);
  letter-spacing: -0.025em;
  text-decoration: none;
  color: var(--c-ink);
  padding: var(--s-2) 0;
}
.brand__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-accent);
  transform: translateY(-1px);
}

.nav { display: none; }
@media (min-width: 900px) {
  .nav { display: flex; align-items: center; gap: var(--s-1); margin-left: var(--s-4); }
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 40px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--c-ink-soft);
  text-decoration: none;
  position: relative;
  transition: color var(--d-fast) var(--e-ui), background-color var(--d-fast) var(--e-ui);
}
.nav__link:hover { color: var(--c-ink); background: color-mix(in oklab, var(--c-ink) 6%, transparent); }
.nav__link.is-active { color: var(--c-ink); }
.nav__link.is-active::after {
  content: "";
  position: absolute; left: 50%; bottom: 2px;
  width: 16px; height: 2px; margin-left: -8px;
  border-radius: 2px;
  background: var(--c-accent);
}

.topbar__tools { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }

.icon-btn {
  width: var(--touch); height: var(--touch);
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  color: var(--c-ink-soft);
  cursor: pointer;
  transition: color var(--d-fast) var(--e-ui), background-color var(--d-fast) var(--e-ui), border-color var(--d-fast) var(--e-ui);
}
.icon-btn:hover { color: var(--c-ink); background: color-mix(in oklab, var(--c-ink) 7%, transparent); }
.icon-btn.has-badge { position: relative; }
.icon-btn .badge {
  position: absolute; top: 6px; right: 6px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--c-accent); color: var(--c-accent-ink);
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  border: 2px solid var(--c-bg);
}

/* Sélecteur de gardien */
.who {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 4px 4px 4px var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  cursor: pointer;
  min-height: 40px;
  font-size: var(--t-small); font-weight: 600;
  transition: border-color var(--d-fast) var(--e-ui);
}
.who:hover { border-color: var(--c-line-strong); }
.who__name { display: none; }
@media (min-width: 640px) { .who__name { display: inline; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }

.who-list { display: flex; flex-direction: column; gap: var(--s-1); }
.who-list__item {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3);
  align-items: center; text-align: left;
  padding: var(--s-3); border-radius: var(--r-md);
  border: 1px solid transparent; background: none; cursor: pointer; width: 100%;
  transition: background-color var(--d-fast) var(--e-ui);
}
.who-list__item:hover { background: color-mix(in oklab, var(--c-ink) 5%, transparent); }
.who-list__item.is-current { border-color: var(--c-accent); background: color-mix(in oklab, var(--c-accent-soft) 40%, transparent); }
.who-list__bio { font-size: var(--t-tiny); color: var(--c-ink-faint); line-height: 1.4; }

/* --------------------------------------------------------------------------
   Navigation basse (mobile)
   -------------------------------------------------------------------------- */

.tabbar {
  position: sticky;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: color-mix(in oklab, var(--c-bg) 90%, transparent);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--c-line);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 900px) { .tabbar { display: none; } }

.tabbar__link {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-height: 56px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--c-ink-faint);
  text-decoration: none;
  position: relative;
}
.tabbar__link.is-active { color: var(--c-accent); }
.tabbar__link .badge {
  position: absolute; top: 6px; right: 50%; margin-right: -18px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: var(--r-pill);
  background: var(--c-accent); color: var(--c-accent-ink);
  font-size: 9px; line-height: 15px; text-align: center;
}

/* --------------------------------------------------------------------------
   Contenu et pied
   -------------------------------------------------------------------------- */

.main { flex: 1 1 auto; display: flex; flex-direction: column; }

.foot {
  border-top: 1px solid var(--c-line);
  padding: var(--s-7) 0 var(--s-8);
  margin-top: var(--s-8);
  font-size: var(--t-small);
  color: var(--c-ink-soft);
}
.foot__inner { width: var(--w-content); margin-inline: auto; display: grid; gap: var(--s-5); }
@media (min-width: 760px) { .foot__inner { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot h4 { font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-ink-faint); margin-bottom: var(--s-3); }
.foot a { display: block; padding: 3px 0; text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* Rappel permanent, jamais en petits caractères illisibles. */
.disclaimer {
  border-left: 2px solid var(--c-line-strong);
  padding-left: var(--s-4);
  max-width: 34rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Bandeau hors ligne
   -------------------------------------------------------------------------- */

.offline-bar {
  position: sticky; top: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--c-danger); color: #fff;
  font-size: var(--t-small); font-weight: 600;
}

/* --------------------------------------------------------------------------
   Bandeau de visite de démonstration
   --------------------------------------------------------------------------
   Volontairement NON collant : la barre du haut l'est déjà (top: 0), deux
   éléments collants au même point se recouvriraient. Celui-ci s'en va au
   défilement, ce qui est le bon comportement — c'est un avertissement de
   contexte, pas un outil dont on a besoin en permanence. Le retour à la liste
   reste accessible depuis le menu du compte.
   -------------------------------------------------------------------------- */

.demo-bar {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-5);
  background: color-mix(in oklab, var(--c-accent) 16%, var(--c-bg));
  border-bottom: 1px solid var(--c-line-accent);
  color: var(--c-ink);
  font-size: var(--t-tiny);
  line-height: 1.4;
}
.demo-bar > svg { color: var(--c-accent); flex: none; }
.demo-bar > span { min-width: 0; }
.demo-bar strong { font-weight: 650; }

.demo-bar__back {
  flex: none; margin-left: auto;
  padding: 6px var(--s-3); min-height: 32px;
  border: 1px solid var(--c-line-accent);
  border-radius: var(--r-pill);
  background: var(--c-surface); color: var(--c-ink);
  font-size: var(--t-tiny); font-weight: 600; cursor: pointer;
  transition: background-color var(--d-fast) var(--e-ui), border-color var(--d-fast) var(--e-ui);
}
.demo-bar__back:hover { background: var(--c-raised); border-color: var(--c-accent); }
.demo-bar__back:disabled { opacity: 0.6; cursor: default; }

/* Sur un téléphone le bandeau reste sur une seule rangée : le laisser passer à
   la ligne le faisait monter à 136 px, soit un sixième de l'écran avant le
   contenu. Le libellé du bouton se raccourcit plutôt que d'envelopper. */
@media (max-width: 700px) {
  .demo-bar { padding-inline: var(--s-4); gap: var(--s-2); }
}

@media (pointer: coarse) {
  .demo-bar__back { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   Transitions de page
   -------------------------------------------------------------------------- */

/* Entrée seulement : aucune classe de sortie, donc aucune attente possible.
   Voir le commentaire dans App.js. */
.page-enter-active {
  transition: opacity var(--d-mid) var(--e-ui), transform var(--d-mid) var(--e-scene);
}
.page-enter-from { opacity: 0; transform: translateY(10px); }

/* --------------------------------------------------------------------------
   Barre de recherche
   -------------------------------------------------------------------------- */

.search {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 0 var(--s-3);
  min-height: 40px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-ink-soft);
  transition: border-color var(--d-fast) var(--e-ui), box-shadow var(--d-fast) var(--e-ui);
}
.search:focus-within { border-color: var(--c-focus); box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-focus) 22%, transparent); }
.search input {
  border: 0; background: none; outline: none;
  width: 100%; min-width: 0;
  font-size: var(--t-small);
}
.search input::placeholder { color: var(--c-ink-faint); }