/* =================================
   🖼️ HEADER GRID
================================= */

header {
    position:sticky;
    top:0;
    z-index:1000;
    background:url("../images/repair1.webp") center/cover no-repeat;
    color:var(--white);
    padding:15px 20px;
    box-shadow:0 2px 5px rgba(0,0,0,.2);
}

header::before {
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.6);
    z-index:-1;
}

/* =================================
   STRUCTURE GRID
================================= */

.header-container {
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-rows:auto auto;
    align-items:center;
    gap:10px 25px;
    max-width:var(--max-width);
    margin:auto;
}

/* =================================
   LOGO
================================= */

.header-logo {
    grid-column:1;
    grid-row:1 / 3;
    display:flex;
    align-items:center;
    justify-content:center;
}

.header-logo img {
    height:65px;
    width:auto;
}

/* =================================
   TITRE
================================= */

.header-content {
    grid-column:2;
    grid-row:1;
    text-align:center;
}

.header-content h1 {
    margin:0;
    font-size:clamp(22px,4vw,42px);
    color:var(--secondary-color);
}

.header-content p {
    margin:0;
    font-size:clamp(14px,2vw,20px);
    color:var(--secondary-color);
}

/* =================================
   UTILISATEUR
================================= */

.header-user {
    grid-column:3;
    grid-row:1;
    text-align:right;
    white-space:nowrap;
    font-size:.9rem;
    align-self:start;
}

.user-reparateur {
    color:var(--blue);
    font-weight:bold;
}

.user-admin {
    color:var(--red);
    font-weight:bold;
}

/* =================================
   NAVIGATION
================================= */

#main-nav {
    grid-column:2 / 4;
    grid-row:2;
    display:flex;
    justify-content:flex-end;
    align-items:center;
}

/* =================================
   BURGER
================================= */

.header-burger {
    display:none;
}

.header-burger button {
    background:none;
    border:0;
    color:var(--white);
    font-size:1.5rem;
    cursor:pointer;
}