/* ============================================================
   header.css — distribution flex du header
   À placer dans CSS/header.css
   ============================================================ */

/* Hauteur du header = référence pour le tiroir (Menu_CSS.css) */
:root {
  --header-height: 100px;
}

/* ---------- Layout flex ---------- */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 8px 15px;
  background: var(--blancsite);
  border-bottom: 2px solid var(--noirsite);
  position: relative;
  z-index: 2200;            /* au-dessus du tiroir (2100) et du voile (2050) */
  flex-wrap: wrap;
}

.header-left,
.header-center,
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-left   { flex: 0 0 auto; }
.header-center { flex: 1 1 auto; justify-content: center; }
.header-right  { flex: 0 0 auto; }

/* ---------- Logo ---------- */
#logo {
  height: 80px;
  width: auto;
  cursor: pointer;
  border-radius: 4px;
}

/* ---------- Boutons compte ---------- */
#ouvertureCompte,
#Création-Compte {
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
}
#ouvertureCompte:hover,
#Création-Compte:hover {
  opacity: 0.85;
}

/* ---------- Burger ---------- */
.burger-toggle {
  display: flex;
  align-items: center;
}
/* #openBtn et #closeBtn : display géré par le JS du tiroir.
   Le CSS initial display:none est dans Menu_CSS.css. */
#openBtn:hover,
#closeBtn:hover {
  opacity: 0.85;
}

/* ---------- Images décoratives ---------- */
#whisky, #ukraine {
  height: 55px;
  width: auto;
  cursor: pointer;
  border-radius: 4px;
}
#whisky:hover, #ukraine:hover {
  opacity: 0.85;
}

/* ---------- Info client ---------- */
#infoClient {
  text-align: right;
  font-size: 0.85em;
  min-width: 110px;
  line-height: 1.3;
}
#infoClient p {
  margin: 0;
}

/* ---------- Responsive ---------- */
@media only screen and (max-width: 799px) {
  :root { --header-height: 180px; }   /* header sur 2 lignes */

  .header {
    justify-content: center;
    gap: 8px;
    padding: 5px;
  }
  .header-left,
  .header-center,
  .header-right {
    flex: 1 1 100%;
    justify-content: center;
  }
  #logo     { height: 55px; }
  #whisky,
  #ukraine  { height: 38px; }
  #infoClient { text-align: center; min-width: auto; }
}