/* Coque de l'application : en-tête vert (titre + avatar), barre d'onglets en bas (téléphone), barre latérale (ordinateur).
   Toutes les couleurs viennent des variables de noel.css (clair et sombre). */
.icon{display:block;flex:none}
.shell{min-height:100vh;background:var(--paper)}
.shell__main{min-width:0}

/* En-tête (téléphone) : titre en Bodoni italique, avatar entouré d'or, filet double doré */
.appbar{background:var(--chrome);color:var(--on-chrome);border-bottom:3px double var(--gold)}
.appbar__row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-5) var(--sp-5) var(--sp-4)}
.appbar__title{margin:0;font:italic 500 30px/1.1 var(--font-display);color:var(--on-chrome)}
.appbar--brand .appbar__title{font-size:22px}
.appbar__out{margin:0}
.appbar__tabs{display:flex;gap:var(--sp-2);padding:0 var(--sp-3);overflow-x:auto;scrollbar-width:none}
.appbar__tabs::-webkit-scrollbar{display:none}
.appbar__tabs a{flex:none;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--sp-3);color:var(--on-chrome-2);font:500 16px var(--font-ui);text-decoration:none;border-bottom:3px solid transparent}
.appbar__tabs a[aria-current="page"]{color:var(--chrome-accent);font-weight:600;border-bottom-color:var(--chrome-accent)}

.avatar{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--paper-sunk);color:var(--primary-text);font:italic 500 17px var(--font-display);text-decoration:none}
.avatar--ring{background:transparent;color:var(--chrome-accent);border:1.5px solid var(--gold)}

.content{max-width:76rem;margin:0 auto;padding:var(--sp-5) var(--sp-4) 96px}

/* Barre d'onglets (téléphone) */
.sidebar{display:none}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--chrome);border-top:3px double var(--gold);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:64px;padding:var(--sp-2) var(--sp-1);color:var(--on-chrome-2);font:500 12.5px/1.1 var(--font-ui);text-decoration:none;text-align:center}
.tabbar a[aria-current="page"]{color:var(--chrome-accent);font-weight:600}
.tabbar a[aria-current="page"]::before{content:"";position:absolute;top:0;left:50%;width:28px;height:3px;margin-left:-14px;background:var(--chrome-accent)}

.btn--ghost-light{background:transparent;color:var(--on-chrome);border:1px solid var(--on-chrome-2)}

/* Ordinateur : barre latérale de 232 px, titre dans le contenu */
@media (min-width:900px){
  .shell{display:grid;grid-template-columns:232px minmax(0,1fr)}
  .sidebar{display:flex;flex-direction:column;gap:var(--sp-2);position:sticky;top:0;height:100vh;box-sizing:border-box;padding:var(--sp-6) var(--sp-4);background:var(--chrome);color:var(--on-chrome);border-right:3px double var(--gold)}
  .sidebar__brand{margin-bottom:var(--sp-5);font:italic 500 22px/1.2 var(--font-display);color:var(--on-chrome);text-decoration:none}
  .sidebar__links{display:flex;flex-direction:column;gap:var(--sp-1)}
  .sidebar__links a{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--tap);padding:0 var(--sp-3);color:var(--on-chrome-2);font:500 16px var(--font-ui);text-decoration:none;border:1px solid transparent;border-radius:var(--r-xs)}
  .sidebar__links a[aria-current="page"]{color:var(--chrome-accent);border-color:var(--gold);font-weight:600}
  .sidebar__account{margin:auto 0 0;display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);color:var(--on-chrome);text-decoration:none;border:1px solid transparent;border-radius:var(--r-xs)}
  .sidebar__account[aria-current="page"]{border-color:var(--gold)}
  .sidebar__account span:last-child{display:flex;flex-direction:column;min-width:0}
  .sidebar__account small{color:var(--on-chrome-2);font-size:var(--fs-xs)}
  .tabbar{display:none}
  .appbar{background:transparent;color:var(--ink);border-bottom:0}
  .appbar--brand{display:none}
  .appbar__row{padding:var(--sp-7) var(--sp-7) 0}
  .appbar__title{color:var(--ink);font-size:40px}
  .appbar__avatar{display:none}
  .appbar__tabs{padding:var(--sp-3) var(--sp-7) 0}
  .appbar__tabs a{color:var(--ink-2)}
  .appbar__tabs a[aria-current="page"]{color:var(--primary-text);border-bottom-color:var(--primary-text)}
  .content{padding:var(--sp-5) var(--sp-7) var(--sp-7)}
}