.banner{display:grid;grid-template-areas:"logo title""user user";grid-template-columns:auto 1fr;align-items:center;gap:.5rem;padding:.5rem 1rem;background-color:var(--bleu);color:var(--blanc)}.banner__logo{grid-area:logo;display:flex;align-items:center}.banner__logo img{max-width:100%;height:auto;width:150px}.banner__title{font-size:1.2rem;font-weight:600;color:var(--blanc);text-align:center}.banner__user{grid-area:user;justify-self:end;margin-top:.5rem}.banner__button,.user-menu__toggle{background-color:var(--blanc);color:var(--bleu);border:0;border-radius:6px;padding:.4rem .8rem;cursor:pointer;font-weight:600;text-decoration:none;display:inline-block;transition:.2s}.banner__button:hover,.user-menu__toggle:focus,.user-menu__toggle:hover{background-color:#f0f0f2}.user-menu{position:relative;display:inline-block}.user-menu__panel{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,.2)}.user-menu:focus-within .user-menu__panel,.user-menu:hover .user-menu__panel{display:block}.user-menu__info p{margin:.25rem 0;color:var(--noir)}.user-menu__actions,.user-menu__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.5rem}.user-menu__item a{text-decoration:none;color:var(--bleu);padding:.3rem .5rem;display:block}.user-menu__item a:focus,.user-menu__item a:hover{background-color:var(--bleu_clair);color:#fff;border-radius:4px}@media (min-width:601px){.banner{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap}.banner__user{margin-top:0}}@media (max-width:400px){.banner__title{font-size:1.2rem}.user-menu__panel{width:90%;right:5%}.banner__logo img{width:80px}}