/* Barre haute de la coquille (brique 6a), extraite de commun.css en brique 6d.
   Chargée par socle/base.html avec commun.css, et par la page planning SANS commun.css :
   tout ce dont la barre a besoin est ici, scopé — socle typographique, boutons, survol.
   Les variables de la charte (`:root`) viennent de commun.css ou de planning/styles.css,
   dont les jeux sont identiques. `--barre-h` est lu par la page planning (`.topbar`) et par la page Consignes
   (`scroll-margin-top`) — deux pages à onglets ; sous 88rem il vaut 98 px (deux rangées, voir en fin de fichier), même
   là où la barre d'une salariée, sans onglets, garde 52 px. */

:root { --barre-h: 52px; }

/* ---------- socle scopé : commun.css (14 px / 1.45) et styles.css (13 px / 1.3 / 500) diffèrent ---------- */
.barre, .sous-onglets, .barre *, .sous-onglets * { box-sizing: border-box; }
.barre, .sous-onglets { font-family: var(--font); font-size: 14px; line-height: 1.45; font-weight: 400; color: var(--ink); }
.barre button { font: inherit; cursor: pointer; }

/* ---------- barre haute (PC), avatar et menu ---------- */
/* Correctif 10a-bis-r1 (R3) : trois colonnes — onglets à gauche, « App K Dentaire » au centre, avatar à droite ;
   les colonnes latérales sont égales, le titre reste au centre de l'écran quel que soit le rôle. */
/* Brique consignes-1 (R8, relecture L6) : les écarts et le titre se resserrent (`clamp`, identiques au-delà de ~930 px) ;
   les onglets gardent `overflow-x` et un minimum 0 — filet si une rangée déborde encore. Sous 88rem, ils passent sur une
   seconde rangée (correctif consignes-1-r2, seuil relevé par la brique pointage-1a, en fin de fichier). */
.barre { position: sticky; top: 0; z-index: 21; height: var(--barre-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: clamp(12px, 3vw, 28px); --barre-pad: clamp(12px, 4vw, 24px); padding: 0 var(--barre-pad); background: var(--card); border-bottom: 1px solid var(--line); }
.barre .marque { grid-column: 2; grid-row: 1; font-size: clamp(15px, 1.2vw + 10px, 19px); font-weight: 700; letter-spacing: -.01em; color: var(--accent); text-decoration: none; white-space: nowrap; }
.barre .marque .app { color: var(--ink); font-weight: 500; }
.barre .marque:hover { color: var(--accent-ink); }
.onglets { grid-column: 1; grid-row: 1; justify-self: start; display: flex; gap: clamp(16px, 3vw, 28px); align-self: stretch; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
.onglets a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* le contour extérieur serait rogné par l'overflow */
.onglets a { display: flex; align-items: center; white-space: nowrap; color: var(--ink-2); text-decoration: none; }
.onglets a[aria-current="page"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent); }
.avatar { grid-column: 3; grid-row: 1; justify-self: end; position: relative; }
.avatar summary { list-style: none; width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.avatar summary::-webkit-details-marker { display: none; }
/* Brique accueil-2 (D-esp.4) : la photo remplit le rond ; sans photo, les initiales restent. */
.avatar summary img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.avatar[open] summary { background: var(--accent); color: #fff; }
.avatar .menu { position: absolute; right: 0; top: 44px; width: 250px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; z-index: 30; }
.menu-titre { margin: 0; padding: 10px 12px; font-weight: 700; border-bottom: 1px solid var(--line-2); }
.menu a, .menu button { display: block; width: 100%; min-height: 44px; padding: 10px 12px; text-align: left; background: none; border: 0; border-radius: var(--r-slot); color: var(--ink); font-weight: 500; text-decoration: none; cursor: pointer; }
.menu a:hover, .menu button:hover { background: var(--card-2); color: var(--ink); }
.menu form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--line-2); }

/* Brique affichage-1 (Daf.1) : la pastille du compte de l'équipe, à la place des onglets (colonne gauche, une rangée). */
.barre .lecture-seule { grid-column: 1; grid-row: 1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 3px 11px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre .lecture-seule svg { flex: none; width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- sous-onglets (Présences | Personnes), rendus par le même bloc que la barre ---------- */
.sous-onglets { display: flex; gap: 22px; padding: 0 24px; background: var(--card); border-bottom: 1px solid var(--line); }
.sous-onglets a { padding: 11px 0; color: var(--ink-2); text-decoration: none; }
.sous-onglets a[aria-current="page"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent); }

/* ---------- correctif consignes-1-r2 (Dr2.1) : la barre sur deux rangées ---------- */
/* Brique pointage-1a (R21, F37) : cinq onglets en service (« Pointages »). Sous 88rem, ils ne tiennent pas sur une rangée
   (mesure : 1 294 px pour cinq en police de secours, 1 106 pour quatre ; 1 170 pour quatre sur le poste, E1) : ils passent
   sur une seconde rangée, pleine largeur (marges négatives égales au `--barre-pad` de la barre), sous la marque et le rond.
   Écart resserré, `clamp(4px, 1.6vw, 28px)` : cinq onglets tiennent sur la seconde rangée de 360 à 412 px ; à 320 px, elle
   défile encore (filet `overflow-x`). Seule requête de largeur de la
   barre ; la page planning la reçoit, `--barre-h` suit. Une barre sans onglets (salariée) garde sa rangée unique.
   `start` : alignés à gauche, comme sur une rangée ; une rangée qui déborde encore défile à droite sans rogner le premier
   onglet (un centrage le rognerait à gauche, revue R1).
   Police bornée à 13 px (sous ~390 px) et interligne 1.1 : « Présences & personnes » sur trois lignes (3 × 13 × 1.1 = 42,9)
   tient dans les 45 px de la rangée,
   soulignement compris (revue R2). Ordre du clavier : marque, onglets, rond — celui du balisage (R6). */
@media (max-width: 87.99rem) {
  :root { --barre-h: 98px; }   /* 51 + 46 + 1 (filet du bas) */
  .barre { height: auto; grid-template-rows: 51px; grid-auto-rows: 46px; }
  .onglets { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; max-width: none; margin-inline: calc(-1 * var(--barre-pad)); padding-inline: var(--barre-pad); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min-content, max-content); justify-content: start; column-gap: clamp(4px, 1.6vw, 28px); border-top: 1px solid var(--line-2); }
  .onglets a { justify-content: center; text-align: center; white-space: normal; font-size: clamp(13px, 3.6vw, 14px); line-height: 1.1; }
}

@media print {
  .barre, .sous-onglets { display: none; }
}