/*
 * En-tête du front public. Règles portées depuis le projet initial
 * (`misaju/frontoffice/views/pages/menu/P_Menu.css`, section « En-tête »).
 * Le fond suit `topbar_bg` (Studio) et retombe sur la couleur de marque `--menu-primary`.
 */

.menu-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: var(--menu-header-h, 72px);
    padding: 10px var(--menu-gutter, 17px);
    background: var(--misaju-topbar-bg, var(--menu-primary));
    color: var(--misaju-topbar-text, var(--menu-header-fg));
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.menu-header-identity {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-width: 0;
}

.menu-header-logo {
    width: auto;
    height: 44px;
    max-width: 160px;
    flex: 0 0 auto;
    object-fit: contain;
}

/*
 * Nom du commerce. Écart ASSUMÉ vs projet initial, qui le tient sur une seule ligne
 * (`white-space: nowrap` + `text-overflow: ellipsis`) et coupe donc les noms longs — sur
 * mobile, la plupart d'entre eux. Ici il passe à la ligne plutôt que d'être tronqué : le
 * nom doit rester lisible en entier, quitte à occuper deux lignes.
 *
 * Corollaire : l'en-tête n'a plus une hauteur fixe. `--menu-header-h` reste son plancher,
 * et C_HeaderHeight.js publie la hauteur RÉELLE dans `--menu-header-offset` pour que la
 * barre d'outils collante se cale dessous (cf. `.menu-toolbar` dans P_Menu.css).
 */
.menu-header-name {
    min-width: 0;
    margin: 0;
    color: inherit;
    font-family: var(--menu-font-display);
    /* Réduit vs référence (`clamp(1.7rem, 4vw, 2.8rem)`) : deux lignes de ce corps tiennent
       dans l'en-tête sans le faire déborder, y compris sur les écrans les plus étroits. */
    font-size: clamp(1.15rem, 3.2vw, 2.1rem);
    font-weight: 700;
    /* 1.2 et non 1 (référence, ligne unique) : sur deux lignes, un interligne serré fait
       cogner les accents de capitales (« É ») de la seconde ligne dans les jambages de la
       première — fréquent en français. */
    line-height: 1.2;
    letter-spacing: 0;
    /* Un nom d'un seul tenant (sans espace) plus large que la colonne doit être coupé,
       sinon il déborde de la barre au lieu de passer à la ligne.
       `break-word` et NON `anywhere` : `anywhere` entre aussi dans le calcul de la taille
       min-content, ce qui laissait l'élément flex se réduire à presque rien — le nom se
       repliait alors en colonne étroite et l'en-tête montait à 130px dès le desktop.
       Combiné au `min-width: 0` ci-dessus, `break-word` ne coupe que le mot qui déborde. */
    overflow-wrap: break-word;
}

/* Variante « centered » : identité centrée. */
.menu-header--centered .menu-header-identity {
    justify-content: center;
}

/* Variante « minimal » : pas de logo. */
.menu-header--minimal .menu-header-logo {
    display: none;
}

@media (max-width: 350px) {
    .menu-header-logo {
        display: none;
    }
}

@media print {
    .menu-header {
        display: none !important;
    }
}