/* Vetossimo — coquilles d'application : barre latérale (desktop), barre d'onglets (mobile), en-tête public. */

#app { min-height: 100dvh; display: flex; flex-direction: column; }

/* ───────────────────────── Coquille « app » (connecté) ───────────────────────── */
.app-shell { display: flex; min-height: 100dvh; }

.app-sidebar {
  display: none;
  width: var(--sidebar-w); flex: none;
  flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  background: var(--surface);
  border-right: 1px solid var(--border);
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
}
.app-sidebar__brand { display: flex; align-items: center; padding: var(--sp-2); margin-bottom: var(--sp-4); border-radius: var(--r-md); text-decoration: none; transition: background-color .15s ease; }
.app-sidebar__brand:hover { background: var(--surface-2); }
.app-sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.app-sidebar__section {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-faint); padding: var(--sp-4) var(--sp-3) var(--sp-2);
}
.app-sidebar__footer { margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--border); }

.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--tap); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md); border: 0; background: none; width: 100%;
  color: var(--text-muted); font-weight: 600; font-size: var(--text-sm); text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.nav-item:hover { background: var(--surface-sunken); color: var(--text); }
.nav-item.is-active { background: var(--green-100); color: var(--green-800); }
.nav-item > .icon { width: var(--icon-lg); height: var(--icon-lg); }
.nav-item__badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--danger); color: #fff; font-size: var(--text-xs); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.app-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--header-h); padding: var(--sp-2) var(--sp-4);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding-top: max(var(--sp-2), env(safe-area-inset-top));
}
.app-header__menu { display: flex; flex: none; }   /* logo seul (mobile) : pas d'espace de ligne sous la pastille */
.app-header__title { font-size: var(--text-lg); }
.app-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); flex: none;
  border: 0; border-radius: var(--r-md); background: none; color: var(--text-muted);
  transition: background var(--transition), color var(--transition);
}
.icon-btn:hover { background: var(--surface-sunken); color: var(--text); }
.icon-btn__dot {
  position: absolute; top: 5px; right: 5px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill);
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface);
}

.app-content {
  flex: 1 1 auto;
  width: 100%; max-width: var(--content-max); margin-inline: auto;
  padding: var(--sp-5) var(--sp-4);
  padding-bottom: calc(var(--tabbar-h) + var(--sp-8));
}
.app-content--wide { max-width: 1440px; }

/* Barre d'onglets mobile ; le QR est au centre, en doré */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  align-items: center;
  min-height: var(--tabbar-h);
  padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
}
.tabbar__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 60px; padding: var(--sp-2) var(--sp-1);
  border: 0; background: none; color: var(--text-muted);
  font-size: 11px; font-weight: 600; text-decoration: none; text-align: center;
  position: relative;
}
.tabbar__item.is-active { color: var(--primary); }
.tabbar__item.is-active::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--primary);
}
.tabbar__item > .icon { width: var(--icon-lg); height: var(--icon-lg); }
.tabbar__label { line-height: 1.2; }
.tabbar__badge {
  position: absolute; top: 6px; left: 54%;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill);
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Le geste « Patte blanche » : bouton QR proéminent */
.tabbar__qr {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-decoration: none; color: var(--on-accent);
}
.tabbar__qr-btn {
  display: grid; place-items: center;
  width: 54px; height: 54px; margin-top: -18px;
  border-radius: var(--r-lg);
  background: var(--accent); color: var(--on-accent);
  box-shadow: var(--shadow-2);
  border: 3px solid var(--surface);
}
.tabbar__qr-btn > .icon { width: var(--icon-xl); height: var(--icon-xl); }
.tabbar__qr-label { font-size: 11px; font-weight: 700; color: var(--text-accent); }

@media (min-width: 1024px) {
  .app-sidebar { display: flex; }
  .tabbar { display: none; }
  .app-content { padding: var(--sp-8) var(--sp-8); padding-bottom: var(--sp-10); }
  .app-header { padding-inline: var(--sp-8); }
  .app-header__menu { display: none; }
}

/* ───────────────────────── Coquille publique ───────────────────────── */
.public-shell { display: flex; flex-direction: column; min-height: 100dvh; }

.public-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  padding-top: max(var(--sp-3), env(safe-area-inset-top));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.public-header__nav { display: none; gap: var(--sp-1); margin-left: var(--sp-6); }
.public-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.public-nav-link {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  color: var(--text-muted); font-weight: 600; font-size: var(--text-sm); text-decoration: none;
}
.public-nav-link:hover { background: var(--surface-sunken); color: var(--text); }
.public-nav-link.is-active { color: var(--primary); background: var(--green-100); }

.public-main { flex: 1 1 auto; }
.public-section { width: 100%; max-width: var(--content-max); margin-inline: auto; padding: var(--sp-10) var(--sp-4); }
.public-section--narrow { max-width: 760px; }

.public-footer {
  background: var(--green-900); color: #D6E2DA;
  padding: var(--sp-10) var(--sp-4) var(--sp-8);
  margin-top: var(--sp-16);
}
.public-footer a { color: #fff; text-decoration-color: rgba(255,255,255,.4); }
.public-footer__inner {
  max-width: var(--content-max); margin-inline: auto;
  display: grid; gap: var(--sp-8); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.public-footer__title {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--gold-300); margin-bottom: var(--sp-3);
}
.public-footer__links { display: flex; flex-direction: column; gap: var(--sp-2); list-style: none; padding: 0; font-size: var(--text-sm); }
.public-footer__bottom {
  max-width: var(--content-max); margin: var(--sp-8) auto 0; padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--text-xs); color: #A9BBB0;
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between;
}
.public-footer .wordmark__text { color: #fff; }
.public-footer .wordmark__accent { color: var(--gold-300); }
/* Le pied de page est vert profond dans les deux thèmes : le logo y est toujours sur sa pastille ivoire. */
.public-footer .logo-mark { background: #FAF7F0; }

/* Téléphone : le logo seul tient lieu de marque (le nom reste annoncé aux lecteurs d'écran) et les
   actions se resserrent pour tenir sur une ligne jusqu'à 360 px (Android courant) ; en dessous
   (320 px), elles passent à la ligne plutôt que de déborder. */
@media (max-width: 559px) {
  .public-header { gap: var(--sp-1); padding-inline: var(--sp-2); }
  .public-header .wordmark__text { display: none; }
  .public-header__actions { gap: var(--sp-1); flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
  .public-header__actions .btn--sm { padding-inline: var(--sp-2); }
}

@media (min-width: 900px) {
  .public-header { padding-inline: var(--sp-8); }
  .public-header__nav { display: flex; }
  .public-section { padding-inline: var(--sp-8); }
}

/* Coquille nue (QR plein écran) */
.bare-shell { min-height: 100dvh; display: flex; flex-direction: column; }

/* En-tête de page interne */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6);
}
.page-head__text { min-width: 0; }
.page-head__subtitle { color: var(--text-muted); margin-top: var(--sp-1); }
.page-head__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.breadcrumb { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--text-sm); margin-bottom: var(--sp-3); color: var(--text-muted); }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); text-decoration: underline; }

.section-title {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); margin-bottom: var(--sp-3);
}

/* ─────────────── Installation de l'application : en-tête public (js/lib/installation.js) ─────────────── */
.public-header__libelle-court { display: none; }

/* Jusqu'à 1099 px, l'en-tête n'a pas la place d'un libellé de plus : le bouton d'installation se réduit à
   son pictogramme (cible de 44 px, comme le bouton de thème ; son nom reste annoncé aux lecteurs d'écran)
   et, quand il est affiché, « Créer un compte » devient « S'inscrire ». L'en-tête tient ainsi sur une
   ligne dès 360 px, et sans débordement là où la navigation s'ajoute (900 px et plus). */
@media (max-width: 1099px) {
  .public-header__actions .install-btn--entete { width: var(--tap); min-height: var(--tap); padding: 0; }
  .public-header__actions .install-btn--entete > .icon { width: var(--icon-lg); height: var(--icon-lg); }
  .public-header__actions .install-btn--entete .install-btn__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .public-header__actions:has(> .install-btn--entete:not([hidden])) .public-header__libelle-long { display: none; }
  .public-header__actions:has(> .install-btn--entete:not([hidden])) .public-header__libelle-court { display: inline; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .public-header:has(.install-btn--entete:not([hidden])) .public-header__nav { margin-left: var(--sp-2); }
}