/* ============================================================
   Structure de page
   layout.css · lignes 38-81 du fichier d'origine
   ============================================================ */
/* ============ LAYOUT ============ */
.app{display:grid;                                min-height:100vh}
.sidebar{display:flex;flex-direction:column;        position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;}
.brand .logo{display:grid;place-items:center;color:#fff;}
.brand h1{line-height:1.1}
.brand span{text-transform:uppercase;}

.viewas{margin:2px 4px 12px;padding:10px 10px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-s)}
.viewas label{font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink-faint);font-weight:700;display:block;margin-bottom:6px}
.viewas select{width:100%;padding:8px 9px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-weight:600}

.nav-group>p{text-transform:uppercase;}
.nav-item{display:flex;align-items:center;                                                                                  width:100%;text-align:left;transition:.13s}
.nav-item .ico{text-align:center;}
.nav-item .badge{margin-left:auto;}

/* ============ MAIN ============ */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:14px;                                                                                                                                             position:sticky;top:0;z-index:20}
.topbar .spacer{flex:1}
.icon-btn{display:grid;place-items:center;                                         transition:.13s}
.content{width:100%}
.page-head{display:flex;align-items:flex-end;                            flex-wrap:wrap}
/* Hauteur imposée dans la barre d'actions. Ces boutons tiennent sur une ligne
   par construction ; sans cela, un pictogramme rendu comme emoji (plus haut
   que le texte) agrandit son bouton, qui dépasse ses voisins vers le HAUT —
   la barre étant alignée par le bas. C'était le cas de « ☎ Appeler ». */
@media (min-width:721px){
  .page-head > .btn{white-space:nowrap}
}
/* Sur mobile, la place manque et un libellé long passe à la ligne : on
   garantit un plancher plutôt qu'un plafond, sinon le texte serait coupé. */
@media (max-width:720px){
}
/* titre de page qui est une référence (CH-…, DV-…) : chiffres alignés, pas de crénage négatif */
.page-head h2.ref-title{letter-spacing:0;font-variant-numeric:tabular-nums}
.page-head .spacer{flex:1}
.sumbox{width:100%}
.sumrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0}
.sumrow span:first-child{color:var(--ink-soft);font-size:13px}
.sumrow span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.btn.wide{font-weight:700;justify-content:center}