/* =============================================================================
   OrthoAssist — css/02-entete.css
   En-tête de l'outil (refonte du 23/09/2026, préfixe « hd- »).

   Les fichiers css/ sont chargés dans l'ordre 01 → 04 : chacun surcharge les
   précédents. Ne pas changer cet ordre dans index.html.
   ============================================================================= */
/* =====================================================================
   EN-TÊTE DE L'OUTIL — refonte du 23/09/2026 (préfixe « hd- »).
   Avant : sept boutons au même niveau, chacun avec un emoji différent.
   Contrastes vérifiés (WCAG AA) sur fond blanc : texte #45534D 8:1,
   icônes #637069 5,2:1, sortie #B42318 6,5:1.
   ===================================================================== */
/* Fond presque opaque plutôt qu'un flou d'arrière-plan (27/09/2026) : le flou
   était recalculé à chaque image pendant le défilement, coûteux sur un
   portable en économie d'énergie, pour une différence à peine visible. */
.header { height: 64px; padding: 0 28px; background: rgba(255, 255, 255, .97); border-bottom: 1px solid #E6E9E3; }
.hd-actions { display: flex; align-items: center; gap: 2px; }
.hd-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: #45534D; font: 500 14px/1 'Plus Jakarta Sans', sans-serif; letter-spacing: -.005em; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.hd-btn:hover { background: rgba(19, 32, 27, .05); color: #13201B; }
/* « .hd-btn » (display: inline-flex) passe après « .demo-only » et l'emporterait :
   le bouton réservé à la démo s'afficherait pour une utilisatrice connectée. */
.hd-btn.demo-only { display: none; }
body.demo-mode .hd-btn.demo-only { display: inline-flex; }
.hd-btn svg { width: 18px; height: 18px; flex-shrink: 0; color: #637069; transition: color .15s; }
.hd-btn:hover svg { color: #137F5E; }
.hd-btn:focus-visible, .hd-avatar-btn:focus-visible, .hd-item:focus-visible { outline: 2px solid #137F5E; outline-offset: 2px; }
.hd-sep { width: 1px; height: 22px; background: #E6E9E3; margin: 0 10px; }
.hd-compte { position: relative; }
.hd-avatar-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 9px 0 3px; border: 1px solid #E6E9E3; border-radius: 99px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.hd-avatar-btn:hover, .hd-avatar-btn[aria-expanded="true"] { border-color: #D6DDD6; box-shadow: 0 1px 2px rgba(19, 32, 27, .06); }
.hd-avatar-btn > svg { width: 15px; height: 15px; color: #637069; transition: transform .2s; }
.hd-avatar-btn[aria-expanded="true"] > svg { transform: rotate(180deg); }
.hd-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #EAF5F0; color: #0B5B42; font: 600 13.5px/1 'Plus Jakarta Sans', sans-serif; letter-spacing: .02em; }
.hd-avatar svg { width: 16px; height: 16px; }
.hd-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 264px; padding: 6px; background: #fff; border: 1px solid #E6E9E3; border-radius: 14px; box-shadow: 0 2px 6px rgba(19, 32, 27, .05), 0 24px 48px -16px rgba(12, 51, 38, .25); z-index: 200; }
.hd-menu[hidden] { display: none; }
.hd-menu-tete { padding: 10px 12px 12px; margin-bottom: 6px; border-bottom: 1px solid #E6E9E3; }
.hd-menu-nom { font: 600 14px/1.3 'Plus Jakarta Sans', sans-serif; color: #13201B; }
.hd-menu-mail { margin-top: 2px; font-size: 13.5px; color: #637069; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-menu-mail:empty { display: none; }
.hd-item { display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; color: #45534D; font: 500 14px/1.2 'Plus Jakarta Sans', sans-serif; text-align: left; cursor: pointer; transition: background .12s, color .12s; }
.hd-item:hover { background: #F4F6F3; color: #13201B; }
.hd-item svg { width: 18px; height: 18px; flex-shrink: 0; color: #637069; }
.hd-item em { margin-left: auto; padding: 3px 7px; border-radius: 99px; background: #FEF3C7; color: #92400E; font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hd-menu-sep { height: 1px; margin: 6px 4px; background: #E6E9E3; }
.hd-item-sortie, .hd-item-sortie svg { color: #B42318; }
.hd-item-sortie:hover { background: #FEF3F2; color: #B42318; }
@media (max-width: 768px) {
  .header { height: 58px; padding: 0 12px; flex-wrap: nowrap; }
  .hd-label { display: none; }
  .hd-btn { width: 40px; padding: 0; justify-content: center; }
  .hd-sep { margin: 0 6px; }
  .hd-menu { width: min(264px, calc(100vw - 24px)); }
}