/* La coque : barre latérale, en-tête de page, zone de contenu.
 *
 * Le design remplace l'en-tête horizontal par une barre latérale permanente.
 * Elle est `sticky` et non `fixed` : le contenu garde son flux normal, ce qui
 * évite de compenser sa largeur partout et laisse les tableaux longs défiler
 * sans que la barre ne se décolle.
 */

.app-shell {
  display:    flex;
  min-height: 100vh;
}

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

/* --- Barre latérale ------------------------------------------------------ */

.sidebar {
  flex:           0 0 var(--side-width);
  width:          var(--side-width);
  height:         100vh;
  position:       sticky;
  top:            0;
  padding:        22px 0;
  background:     var(--navy);
  display:        flex;
  flex-direction: column;
}

/* Le tiroir et son panneau portent la colonne que la barre tenait seule : en
   desktop le résumé est caché et le panneau reste visible, tiroir ouvert ou
   non. `display` ne suffit pas : le navigateur cache le contenu d'un
   `<details>` fermé avec `content-visibility`, sur le panneau lui-même pour
   les navigateurs d'hier, sur `::details-content` pour ceux d'aujourd'hui. */
.sidebar-drawer,
.sidebar-panel {
  display:        flex;
  flex:           1;
  min-height:     0;
  flex-direction: column;
}

.sidebar-panel,
.sidebar-drawer::details-content {
  content-visibility: visible;
}

.sidebar-bar {
  display: none;
}

.sidebar-brand {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     0 20px 26px;
  color:       #FFFFFF;
}

.sidebar-brand:hover {
  color: #FFFFFF;
}

.sidebar-brand .brand-word {
  font-family:    var(--font-title);
  font-size:      32px;
  font-weight:    700;
  letter-spacing: -0.01em;
  line-height:    1;
}

.sidebar-brand .brand-word span {
  color: var(--teal);
}

/* --- Sélecteur de portefeuille ------------------------------------------
 *
 * Un `<details>` natif : il s'ouvre au clavier et fonctionne avant que le
 * moindre JS n'ait tourné. Il n'existe dans le HTML qu'à partir de deux
 * portefeuilles, donc rien ici ne concerne l'utilisateur qui n'en a qu'un.
 */

.portfolio-switcher {
  /* La barre fait 100vh : c'est `.sidebar-nav`, qui défile, qui absorbe la
     place que prend la liste dépliée — pas le sélecteur, qui se tasserait. */
  flex:    0 0 auto;
  margin:  0 12px 4px;
  padding: 0;
}

.portfolio-switcher > summary {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       9px 10px;
  border-radius: var(--r-ctl);
  background:    var(--navy-hover);
  color:         #FFFFFF;
  font-size:     var(--t-sub);
  font-weight:   500;
  cursor:        pointer;
  list-style:    none;
}

/* Le triangle par défaut : remplacé par l'icône du gabarit. */
.portfolio-switcher > summary::-webkit-details-marker {
  display: none;
}

.portfolio-switcher > summary:hover {
  background: var(--navy-line);
}

.portfolio-switcher-name {
  flex:          1;
  min-width:     0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.portfolio-switcher-list {
  margin:     4px 0 0;
  padding:    0;
  list-style: none;
}

/* `button[type="submit"]` pèse plus lourd qu'une classe seule — la note des
   boutons dans `forms.css` le dit déjà. Une ligne du sélecteur est un élément
   de menu, pas une action à valider : elle doit être nommée avec la même force
   pour le rester, sinon elle arrive en pavé turquoise centré.
   `white-space` et `justify-content` sont remis explicitement : ce sont les
   deux réglages du bouton d'action qui débordent le plus visiblement d'une
   barre latérale de 236 px. */
.portfolio-switcher-create,
button[type="submit"].portfolio-switcher-option {
  display:         flex;
  align-items:     flex-start;
  justify-content: flex-start;
  gap:             8px;
  width:           100%;
  min-width:       0;
  padding:         7px 10px;
  border:          0;
  border-radius:   var(--r-ctl);
  background:      transparent;
  color:           var(--side-fg);
  font:            inherit;
  font-size:       var(--t-sub);
  font-weight:     400;
  text-align:      left;
  white-space:     normal;
  cursor:          pointer;
}

.portfolio-switcher-create:hover,
button[type="submit"].portfolio-switcher-option:hover {
  background: var(--navy-hover);
  color:      #FFFFFF;
}

button[type="submit"].portfolio-switcher-option[aria-current] {
  color:       #FFFFFF;
  font-weight: 500;
}

/* La coche du portefeuille courant. Sur les autres lignes, un tiret de la
   couleur du fond : la place est tenue, l'alignement ne saute pas. */
.portfolio-switcher-option[aria-current] .portfolio-switcher-mark {
  color: var(--teal);
}

.portfolio-switcher-mark {
  flex-shrink: 0;
  margin-top:  3px;
  color:       var(--side-label);
}

/* Le pied de liste, séparé de ce qu'on choisit : créer n'est pas basculer. */
.portfolio-switcher-foot {
  margin-top:  4px;
  padding-top: 4px;
  border-top:  1px solid var(--navy-line);
}

.portfolio-switcher-option span {
  min-width:     0;
  overflow-wrap: anywhere;
}

.portfolio-switcher-option small {
  display:   block;
  color:     var(--side-meta);
  font-size: var(--t-label);
}

/* Le solde de scans, sous le sélecteur. Discret : c'est un repère qu'on
   consulte du coin de l'œil, pas une alerte — il ne prend des couleurs que
   quand la souris s'y pose. */
.sidebar-credits {
  display:         flex;
  align-items:     center;
  gap:             8px;
  flex:            0 0 auto;
  margin:          0 12px 4px;
  padding:         8px 10px;
  border:          1px solid var(--navy-line);
  border-radius:   var(--r-ctl);
  color:           var(--side-meta);
  font-size:       var(--t-sub);
  text-decoration: none;
}

.sidebar-credits:hover,
.sidebar-credits:focus-visible {
  border-color: var(--teal);
  color:        var(--side-fg);
}

.sidebar-credits-count {
  flex:                 1;
  color:                var(--side-fg);
  font-family:          var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.sidebar-credits-go {
  color: var(--side-label);
}

.sidebar-nav {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  padding:        0 12px;
  overflow-y:     auto;
}

.sidebar-section {
  padding:        18px 10px 10px;
  font-family:    var(--font-mono);
  font-size:      var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--side-label);
}

.sidebar-section:first-child {
  padding-top: 8px;
}

.sidebar-link {
  display:       flex;
  align-items:   center;
  gap:           11px;
  padding:       10px;
  border-radius: var(--r-ctl);
  color:         var(--side-fg);
  font-size:     var(--t-body);
  font-weight:   500;
}

.sidebar-link:hover {
  background: var(--navy-hover);
  color:      #FFFFFF;
}

.sidebar-link[aria-current] {
  background:  var(--teal);
  color:       var(--teal-ink);
  font-weight: 500;
}

/* Le rameau ouvert : « Mes biens » pendant qu'on est dans un bien. Il s'éclaire
   en blanc plutôt qu'en turquoise — la hiérarchie se lit en luminosité, et
   l'accent reste le signe d'une seule chose à la fois, la page courante. */
.sidebar-link-branch {
  color: #FFFFFF;
}

/* Le bien ouvert, en retrait sous « Mes biens ». */
.sidebar-sublink {
  padding-left: 38px;
  font-size:    var(--t-sub);
  font-weight:  400;
}

.sidebar-badge {
  margin-left:   auto;
  padding:       1px 7px;
  border-radius: var(--r-pill);
  background:    var(--teal);
  color:         var(--teal-ink);
  font-family:   var(--font-mono);
  font-size:     var(--t-label);
  font-weight:   500;
}

.sidebar-link[aria-current] .sidebar-badge {
  background: var(--teal-ink);
  color:      var(--teal);
}

/* --- Bloc utilisateur, en pied de barre ---------------------------------- */

.sidebar-user {
  margin-top:  auto;
  padding:     16px 20px 0;
  border-top:  1px solid var(--navy-line);
  display:     flex;
  align-items: center;
  gap:         10px;
}

.sidebar-avatar {
  flex:            0 0 32px;
  width:           32px;
  height:          32px;
  border-radius:   50%;
  background:      var(--teal);
  color:           var(--teal-ink);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       var(--t-sub);
  font-weight:     600;
}

.sidebar-user-id {
  min-width: 0;
  flex:      1;
}

.sidebar-user-name {
  display:       block;
  color:         #FFFFFF;
  font-size:     var(--t-sub);
  font-weight:   500;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* Comme les lignes du sélecteur : `button[type="submit"]` de `forms.css` pèse
   plus lourd qu'une classe seule, et « Déconnexion » sortait en pavé turquoise
   au lieu du libellé discret sous le nom. */
button[type="submit"].sidebar-user-meta {
  padding:     0;
  border:      0;
  background:  none;
  color:       var(--side-meta);
  font-family: var(--font-mono);
  font-size:   var(--t-micro);
  cursor:      pointer;
}

button[type="submit"].sidebar-user-meta:hover {
  color: var(--teal);
}

/* --- En-tête de page ------------------------------------------------------ */

.page-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             24px;
  flex-wrap:       wrap;
  padding:         22px 32px;
  background:      var(--surface);
  border-bottom:   1px solid var(--line);
}

.page-header-id {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  min-width:      0;
}

.page-header-actions {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.page-body {
  padding: 26px 32px 48px;
}

/* Le bandeau d'essai, au-dessus de l'en-tête de page : aligné sur ses marges,
   et absent sans laisser de trou quand il n'a rien à dire. */
.trial-banner .banner {
  margin: 16px 32px 0;
}

/* Le fil d'Ariane du détail d'un bien. */
.breadcrumb {
  display:     flex;
  align-items: center;
  gap:         7px;
  font-size:   var(--t-sub);
  color:       var(--muted);
}

.breadcrumb a {
  color: var(--muted);
}

.breadcrumb a:hover {
  color: var(--teal-dark);
}

/* --- Pages d'authentification -------------------------------------------- */

/* Pas de barre latérale tant qu'on n'est pas connecté : la maquette du logo
   sert de référence, carte centrée sur le fond de l'application. */
.auth-main {
  min-height:      100vh;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             1.5rem;
  padding:         3rem 1.5rem;
}

.auth-brand {
  display:     flex;
  align-items: center;
  gap:         10px;
  color:       var(--navy);
}

.auth-brand .brand-word {
  font-family:    var(--font-title);
  font-size:      26px;
  font-weight:    700;
  letter-spacing: -0.01em;
  line-height:    1;
}

.auth-brand .brand-word span {
  color: var(--teal-dark);
}

/* --- Repli ---------------------------------------------------------------- */

/* Sous 900 px, la barre devient un bandeau collé en haut et son contenu un
   tiroir. Le bandeau horizontal d'avant poussait les liens hors de l'écran :
   le bloc utilisateur prenait la place restante, et rien n'annonçait qu'il
   fallait défiler pour retrouver « Mes biens ». */
@media (max-width: 900px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    position: sticky;
    top:      0;
    z-index:  20;
    width:    100%;
    height:   auto;
    flex:     none;
    padding:  0;
  }

  .sidebar-drawer {
    flex: none;
  }

  /* Fermé, le tiroir cache de nouveau son contenu. */
  .sidebar-drawer:not([open])::details-content {
    content-visibility: hidden;
  }

  .sidebar-bar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    padding:         10px 16px;
    color:           #FFFFFF;
    cursor:          pointer;
    list-style:      none;
  }

  /* Le triangle par défaut : le bouton burger le remplace. */
  .sidebar-bar::-webkit-details-marker {
    display: none;
  }

  .sidebar-bar .sidebar-brand {
    gap:     8px;
    padding: 0;
  }

  .sidebar-bar .brand-word {
    font-size: 24px;
  }

  .sidebar-burger {
    display:     flex;
    align-items: center;
    color:       #FFFFFF;
  }

  /* Ouvert, le burger devient la croix qui referme. */
  .sidebar-burger-close,
  .sidebar-drawer[open] .sidebar-burger-open {
    display: none;
  }

  .sidebar-drawer[open] .sidebar-burger-close {
    display: block;
  }

  .sidebar-panel {
    flex:           none;
    /* Le tiroir défile seul si la liste des portefeuilles le dépasse ; la
       page, derrière, garde sa position. */
    max-height:     calc(100vh - 56px);
    overflow-y:     auto;
    padding-bottom: 14px;
  }

  /* La marque est déjà dans le bandeau. */
  .sidebar-brand-link {
    display: none;
  }

  .sidebar-user {
    margin-top: 14px;
  }

  .page-header,
  .page-body {
    padding-left:  16px;
    padding-right: 16px;
  }

  .trial-banner .banner {
    margin-left:  16px;
    margin-right: 16px;
  }
}

/* --- Page publique (en attendant la vraie) ------------------------------ */

.landing {
  text-align: center;
}

.landing .eyebrow {
  margin: 0;
}

.landing-title {
  max-width:   22ch;
  margin:      0;
  font-family: var(--font-title);
  font-size:   var(--t-h1);
  line-height: 1.2;
}

.landing-link {
  color:     var(--muted);
  font-size: var(--t-sub);
}