.banner {
  display: grid;
  grid-template-areas:
    "logo title"
    "user user";
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--bleu);
  color: var(--blanc);
}

/* Logo et titre */
.banner__logo { grid-area: logo; display: flex; align-items: center; }

.banner__logo img {
    max-width: 100%;   /* ne dépasse jamais le conteneur */
    height: auto;      /* conserve les proportions */
    width: 150px;      /* largeur par défaut pour écran large */
}
.banner__title { grid-area: title; font-size: 1.5rem; font-weight: bold; }

/* Utilisateur */
.banner__user { grid-area: user; justify-self: end; margin-top: 0.5rem; }

.banner__button {
    background-color: var(--blanc);
    color: var(--bleu);
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none; /* pour enlever le souligné des <a> */
    display: inline-block; /* pour que padding et bg fonctionnent correctement */
}

.banner__button:hover {
    background-color: #f0f0f2;
}

/* Dropdown CSS pur */
.dropdown { position: relative; display: inline-block; }
.dropdown__menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: var(--gris);
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 1rem;
    width: 300px;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.dropdown:hover .dropdown__menu,
.dropdown:focus-within .dropdown__menu { display: block; }

.user-menu__info p { margin: 0.25rem 0; }
.user-menu__actions { margin-top: 1rem; display:flex; flex-direction:column; gap:0.5rem; }

/* Responsive grand écran : flex classique */
@media (min-width: 601px) {
  .banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
  }
  .banner__user { margin-top: 0; }
}

/* Responsive petit écran si nécessaire */
@media (max-width: 400px) {
  .banner__title { font-size: 1.2rem; }
  .dropdown__menu { width: 90%; right: 5%; }
  .banner__logo img {
        width: 80px;  /* réduit le logo sur mobile */
    }
}