/* Mise en page « VETTER Gestion » pour les portails Écrans et Pointeuse (12/10/2026).
   SOURCE UNIQUE : ~/Developer/vetter-brand/vetter-portail.css — copier tel quel dans vetter-ecrans/portal et vetter-pointeuse/portal,
   chargé EN DERNIER (après glass.css). Les deux portails ont la même structure (render() dans app.js) :
     .shell > aside.side (logo, .sidenav, .me) + .content > header.top (téléphone seulement), .clientbar, main#main ; nav.bnav (téléphone)
   Ordinateur : menu prune sur toute la hauteur, logo en haut, compte en bas (comme Gestion).
   Partout : le titre de la page (premier bloc de main) est dans le bandeau prune, client compris (un seul bloc prune). */

/* ---------- Ordinateur ---------- */
.shell { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }
.side { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 25;
  margin: 0; padding: 14px 12px; border: 0; border-radius: 0; box-shadow: none; background: var(--v-prune); color: #fff;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.side > .logo { display: flex; align-items: center; gap: 12px; height: auto; min-height: 56px; width: auto; margin: 0 0 14px; padding: 6px 8px;
  border: 0; border-radius: 14px; background: none; box-shadow: none; color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.side > .logo b { width: 44px; height: 44px; border-radius: 12px; background: #fff; box-shadow: none; flex: none; }
.side > .logo b svg { width: 32px; height: 32px; }
.side > .logo span { font: 800 20px/1.05 var(--display); letter-spacing: -.01em; color: #fff; }
.side > .logo small { display: block; margin-top: 2px; font: 400 14px/1.2 var(--font); letter-spacing: 0; color: var(--v-bandeau-texte); opacity: 1; }
.side > .logo .sw { display: grid; place-items: center; margin-left: auto; color: #fff; opacity: 1; }
.side > .logo .sw svg { width: 18px; height: 18px; }
.side > .logo.appsw { cursor: pointer; }
@media (hover: hover) { .side > .logo.appsw:hover { background: var(--v-bandeau-survol); } }
.sidenav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.side .nav2 { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 999px;
  background: none; color: rgba(255,255,255,.72); font-size: 15px; font-weight: 600; text-align: left; box-shadow: none; }
@media (hover: hover) { .side .nav2:not(.on):hover { background: var(--v-bandeau-survol) !important; color: #fff; } }
.side .nav2.on, .side .nav2.on:hover { background: var(--v-magenta) !important; color: #fff; font-weight: 800; }
.side .nav-switch { margin-top: 10px; justify-content: flex-start; padding: 0 14px; }
.side .curcli { padding: 0 8px 10px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; gap: 2px; }
.side .curcli b { color: #fff; font-weight: 800; }
.side .curcli small { margin: 0; color: var(--v-bandeau-texte) !important; }
.side .me { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 8px 4px; border-top: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.72); font-size: 14px; }
.side .me span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .me .linkbtn { display: inline-flex; align-items: center; gap: 6px; width: auto; min-height: 40px; padding: 0 14px; border: 0; border-radius: 20px;
  background: var(--v-bandeau-bouton); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; }
@media (hover: hover) { .side .me .linkbtn:hover { background: rgba(255,255,255,.22); } }
.content { min-width: 0; }
.content > header.top { display: none; }

/* bandeau du client : prune, collé au titre (un seul bloc, comme l'en-tête de Gestion) */
.clientbar, .content .clientbar { position: sticky; top: 0; z-index: 19; width: auto; max-width: none; margin: 0; border: 0; border-radius: 0;
  background: var(--v-prune); color: #fff; box-shadow: none; }
.clientbar .cb-in { max-width: 1280px; margin: 0 auto; padding: 14px 20px 0; }

/* hors d'un client (liste des clients) : titre de la page dans le bandeau prune, sur toute la largeur */
.content:not(:has(> .clientbar)) main:has(> .row:first-child, > h1:first-child) { padding-top: 0; }
.content:not(:has(> .clientbar)) main > .row:first-child, .content:not(:has(> .clientbar)) main > h1:first-child, .content:not(:has(> .clientbar)) main > h1:first-child + .sub {
  background: var(--v-prune); color: #fff; box-shadow: 0 0 0 100vmax var(--v-prune);
  clip-path: inset(-2px -100vmax 0 -100vmax); }   /* déborde de 2 px vers le haut : pas de fine ligne claire entre deux blocs prune (bords entre deux pixels) */
.content:not(:has(> .clientbar)) main > .row:first-child { padding: 18px 0 22px; margin: 0 0 20px; }
.content:not(:has(> .clientbar)) main > h1:first-child { padding: 18px 0 22px; margin: 0 0 20px; }
.content:not(:has(> .clientbar)) main > h1:first-child:has(+ .sub) { padding-bottom: 4px; margin-bottom: 0; }
.content:not(:has(> .clientbar)) main > h1:first-child + .sub { padding: 0 0 22px; margin: 0 0 20px !important; }
.content:not(:has(> .clientbar)) main > .row:first-child h1, .content:not(:has(> .clientbar)) main > h1:first-child { color: #fff; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.content:not(:has(> .clientbar)) main > .row:first-child .sub, .content:not(:has(> .clientbar)) main > h1:first-child + .sub { color: var(--v-bandeau-texte); }
.content:not(:has(> .clientbar)) main > .row:first-child .sub b, .content:not(:has(> .clientbar)) main > h1:first-child + .sub b { color: #fff; }
.content:not(:has(> .clientbar)) main > .row:first-child .btn:not(.primary) { background: var(--v-bandeau-bouton); border-color: transparent; color: #fff; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (hover: hover) { .content:not(:has(> .clientbar)) main > .row:first-child .btn:not(.primary):hover { background: rgba(255,255,255,.22); } }
.content:not(:has(> .clientbar)) main > .row:first-child .btn.primary { border-color: rgba(255,255,255,.25); box-shadow: none; }
.content:not(:has(> .clientbar)) main > .row:first-child .btn.primary:hover { background: #8E0F52; } /* sur fond prune, un survol prune ne se verrait pas */
.content:not(:has(> .clientbar)) main > .row:first-child .badge { background: var(--v-bandeau-bouton); color: #fff; }
.content:not(:has(> .clientbar)) main > .row:first-child input, .content:not(:has(> .clientbar)) main > .row:first-child input.btn:not(.primary), .content:not(:has(> .clientbar)) main > .row:first-child select { background: rgba(255,255,255,.94); color: var(--v-encre); border-color: transparent; box-shadow: none; }
.content:not(:has(> .clientbar)) main > .row:first-child input::placeholder { color: var(--v-encre-3); }
.content:not(:has(> .clientbar)) main > .row:first-child a { color: #fff; }

/* dans un client : pas de titre de page (l'onglet actif est déjà dans le menu de gauche / la barre du bas) — demande du 12/10/2026 */
.content:has(> .clientbar) .clientbar .cb-in { padding-bottom: 14px; }
.content:has(> .clientbar) main > .row:first-child > div:first-child:has(> h1),
.content:has(> .clientbar) main > h1:first-child, .content:has(> .clientbar) main > h1:first-child + .sub { display: none; }
.content:has(> .clientbar) main > .row:first-child:not(:has(> :not(div:first-child:has(> h1)))) { display: none; }   /* ligne qui ne contenait que le titre */

/* ---------- Téléphone ---------- */
@media (max-width: 760px) {
  .shell { display: block; min-height: 0; }
  .side { display: none; }
  .content > header.top { display: flex; position: sticky; top: 0; z-index: 30; box-shadow: none; }
  .clientbar, .content .clientbar { position: static; }
  .clientbar .cb-in { padding: 6px 16px 0; }
  .cb-name b { font-size: 20px; }
  .content:not(:has(> .clientbar)) main > .row:first-child, .content:not(:has(> .clientbar)) main > h1:first-child { padding-top: 14px; }
  .content:not(:has(> .clientbar)) main > .row:first-child h1, .content:not(:has(> .clientbar)) main > h1:first-child { font-size: 30px; }
  .content:not(:has(> .clientbar)) main > .row:first-child, .content:not(:has(> .clientbar)) main > h1:first-child + .sub, .content:not(:has(> .clientbar)) main > h1:first-child:not(:has(+ .sub)) { margin-bottom: 16px; }
}