body > header
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background-color: black;
	box-shadow: 0 0.2em 1em #444;
	height: 2em;
	column-gap: 0.3em;
	margin-right: 0.3em;
}

body > header > .logo
{
	position: absolute;
	left: 1em;
	top: 0;
	bottom: 0;
	color: transparent;
	background-image: url(../Images/Logo-White.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}


body > header > span
{
	color: white;
	padding: 0.1em 0.5em;
}

body:not(.authenticated) > header button.logout,
body:not([data-level]) > header .selected-level,
body:not([data-level]) > header button.switch-level,
body:not(.multiple-levels) > header button.switch-level
{
	display: none !important;
}
/* Était sans :not(.logout). On exclut logout des inversions globales. */
header button[title]:not(.logout):hover,
header button[title]:not(.logout):focus-visible{
  background: #000;
  color: #fff;
  border-color: #000;
}

/* Icône power en CSS pur (aucun glyphe requis) */
/* Bouton déconnexion : cercle + trait vertical qui dépasse */
/* Bouton déconnexion : anneau blanc + trait vertical qui dépasse */

header button.logout{
  --size: 28px;
  --stroke: 2px;
  --ring: #fff;
  --bar-w: 2.5px;
  --bar-h: 22px;
  --lift: 6px;

  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: transparent;
  border: var(--stroke) solid var(--ring); /* anneau blanc */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  color: #fff !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* trait vertical */
header button.logout::before{
  content: "";
  position: absolute;
  width: var(--bar-w);
  height: var(--bar-h);
  left: 50%; transform: translateX(-50%);
  top: calc((var(--size) - var(--bar-h))/2 - var(--lift));
  background: currentColor;     /* hérite de color du bouton */
  border-radius: 999px;
  pointer-events: none;
  
}

header button.logout:hover,
header button.logout:focus-visible{
  background: #fff !important;   /* intérieur blanc */
  color: #000 !important;        /* → barre noire */
  border-color: #fff !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}

header button.logout:hover::before,
header button.logout:focus-visible::before{
  background: #000 !important;
}

header button.logout > span, header button.logout > i { font-size: 0; }


/* Aligne le select et les pictos AFFICHAGE DISPO VUES */
header .layout-label { display: inline-flex; align-items: center; gap: 8px; }

/* Barre d'aperçu cliquable */
header .layout-preview { display: inline-flex; gap: 6px; }

/* Icône générique : petit cadre avec grille interne */
header .layout-preview .ico {
  width: 30px; height: 22px;
  padding: 2px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 2px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
header .layout-preview .ico:focus { outline: 2px solid #ac4543; outline-offset: 1px; }
header .layout-preview .ico.active { box-shadow: 0 0 0 2px #fd5b58 inset; }

:root { --g:#d9d4d4; --t:#ebebeb; }   /* couleurs discrètes */

/* blocs internes */
header .ico .g  { background: var(--g); border-radius: 2px; }
header .ico .t1,
header .ico .t2 { background: var(--t); border-radius: 2px; }

/* 1) défaut : graph au-dessus (barre), 2 tickets côte à côte dessous */
header .ico.ico-over .g  { grid-column: 1 / 3; grid-row: 1; height: 8px; }
header .ico.ico-over .t1 { grid-column: 1; grid-row: 2; }
header .ico.ico-over .t2 { grid-column: 2; grid-row: 2; }

/* 2) graph plein écran : le bloc graph occupe tout */
header .ico.ico-graph { grid-template-rows: 1fr; }
header .ico.ico-graph .g { grid-column: 1 / 3; grid-row: 1 / 3; }

/* 3) tickets plein écran : deux colonnes occupant toute la hauteur */
header .ico.ico-tickets { grid-template-rows: 1fr; }
header .ico.ico-tickets .t1 { grid-column: 1; grid-row: 1 / 3; }
header .ico.ico-tickets .t2 { grid-column: 2; grid-row: 1 / 3; }

/* 4) graph à gauche (2 rangées), tickets empilés à droite */
header .ico.ico-leftstack .g  { grid-column: 1; grid-row: 1 / 3; }
header .ico.ico-leftstack .t1 { grid-column: 2; grid-row: 1; }
header .ico.ico-leftstack .t2 { grid-column: 2; grid-row: 2; }

header .layout-select { display: none; }

/* Menu des niveaux dans le header */
header .level-select {
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid #d0d7de;
  background: #fff;
  font: inherit;
  line-height: 1.2;
}

header button[title]:hover,
header button[title]:focus-visible{
  background: #000;
  color: #fff;                  /* SVG/ico en currentColor => devient blanc */
  border-color: #000;           /* si un bord existe */
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  outline: none;                /* on gère le focus ci-dessous */
}

header button[title]:focus-visible{
  box-shadow: 0 0 0 2px rgba(255,255,255,.75);
}

header button.logout{
  /* ton style actuel d’anneau blanc */
  background: transparent;
  border-color: #fff;
  color: inherit;
}
header button.logout:hover,
header button.logout:focus-visible{
  background: #000;     /* fond noir au survol */
  border-color: #fff;   /* anneau blanc reste visible */
  color: #fff;          /* trait central (currentColor) devient blanc */
}