/* ───────────────────────────────────────────────
 * Header — Crèmerie des marchés
 * Tokens CDM (theme.json) uniquement.
 * ─────────────────────────────────────────────── */

.Header {
    position: relative;
    z-index: 50;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0 var(--wp--preset--spacing--l);
    padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--l);
    background: var(--wp--preset--color--tertiary);
    border-bottom: 1px solid var(--wp--custom--color--gris-bordure);

    @media (max-width: 1200px) {
        gap: 0 var(--wp--preset--spacing--m);
        padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--m);
    }
    @media (max-width: 992px) {
        justify-content: space-between;
        gap: 0;
        padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
    }
}

/* ── Logo ───────────────────────────────────────── */
.Header-logo {
    display: block;
    flex-shrink: 0;
    line-height: 0;
}
/* Spécificité renforcée (.Header-logo .Header-logoImg) pour rester immunisé
   contre les règles img des plugins (ex. WooCommerce sur les pages boutique). */
.Header-logo .Header-logoImg {
    display: block;
    width: auto;
    height: 56px;
    @media (max-width: 992px) {
        height: 44px;
    }
}
.Header-logo .Header-logoImg--light {
    display: none;
}

/* ── Barre déployable (inline desktop / drawer mobile) ── */
.Header-bar {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--wp--preset--spacing--s);

    @media (max-width: 1200px) {
        gap: var(--wp--preset--spacing--s);
    }

    @media (max-width: 992px) {
        position: fixed;
        top: var(--cdm-header-h, 68px);
        left: 0;
        z-index: 40;
        width: 100%;
        height: calc(100svh - var(--cdm-header-h, 68px));
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--wp--preset--spacing--m);
        background: var(--wp--preset--color--primary);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.45s cubic-bezier(0.51, 0.41, 0.005, 0.965);
        box-sizing: border-box;
    }
}
.isMenuOpen .Header-bar {
    @media (max-width: 992px) {
        transform: translateX(0);
    }
}

/* Ordre desktop : nav (gauche) · recherche (poussée à droite) · outils */
.Header-nav    { order: 1; }
.Header-search { order: 2; margin-left: auto; }
.Header-tools  { order: 3; }

@media (max-width: 992px) {
    /* Ordre drawer : recherche en haut · nav · outils */
    .Header-search { order: 1; margin-left: 0; }
    .Header-nav    { order: 2; }
    .Header-tools  { order: 3; margin-top: auto; }
}

/* ── Recherche ──────────────────────────────────── */
.Header-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--xxs);
    width: 187px;
    height: 40px;
    padding: 0  0 0 var(--wp--preset--spacing--xxs);
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--custom--color--gris-bordure);
    border-radius: var(--wp--custom--radius--s);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;

    @media (max-width: 1200px) {
        width: 187px;
        padding: 0 var(--wp--preset--spacing--xxs);
    }
    @media (max-width: 992px) {
        width: 100%;
        height: 48px;
        margin-bottom: var(--wp--preset--spacing--m);
        box-sizing: border-box;
        flex-shrink: 0;
    }
}
.Header-search:focus-within {
    border-color: var(--wp--preset--color--secondary);
    box-shadow: 0 2px 8px rgba(193, 140, 10, 0.18);
}
.Header-searchIcon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--wp--preset--color--secondary);
}
.Header-searchIcon .Header-icon {
    width: 17px;
    height: 17px;
}
.Header-searchField {
    flex: 1;
    min-width: 195px;
    width:100%;
    border: 0;
    background: transparent;
    font-family: var(--wp--preset--font-family--secondary);
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--primary);
    padding:10px var(--wp--preset--spacing--xs) 10px 30px;
    position: absolute;
    left:0;
    @media (max-width: 992px) {
        padding:15px var(--wp--preset--spacing--xs) 15px 30px;
    }
}
.Header-searchField::placeholder {
    color: var(--wp--custom--color--gris-disabled);
}

/* ── Outils : Boutiques / Compte / Panier ───────── */
.Header-tools {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--xs);

    @media (max-width: 992px) {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
}
.Header-tool {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--xxs);
    font-family: var(--wp--preset--font-family--secondary);
    font-weight: var(--wp--custom--font-weight--medium);
    font-size: var(--wp--preset--font-size--xxs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--wp--preset--color--primary);
    text-decoration: none;
    transition: color 0.15s ease;

    @media (max-width: 992px) {
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--wp--preset--spacing--s);
        padding: var(--wp--preset--spacing--s) 0;
        font-size: var(--wp--preset--font-size--m);
        letter-spacing: 0.02em;
        text-transform: none;
        color: var(--wp--preset--color--white);
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
}
.Header-tool:hover,
.Header-tool:focus-visible {
    color: var(--wp--custom--color--or-hover);
    @media (max-width: 992px) {
        color: var(--wp--preset--color--secondary);
    }
}
.Header-tool .Header-icon {
    width: 23px;
    height: 23px;
}
.Header-toolLabel {
    white-space: nowrap;
}

/* Le panier des outils est masqué en mobile (repris dans la barre du haut) */
.Header-tool--panier {
    @media (max-width: 992px) {
        display: none;
    }
}

.Header-tool--boutiques{
    @media (min-width: 992px) and (max-width: 1200px) {
        display: none;
    }
}

/* ── Compteur panier ────────────────────────────── */
.Header-cartIconWrap {
    position: relative;
    display: inline-flex;
}
.Header-cartCount {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--primary);
    border-radius: var(--wp--custom--radius--full);
    font-family: var(--wp--preset--font-family--secondary);
    font-size: 10px;
    font-weight: var(--wp--custom--font-weight--bold);
    line-height: 18px;
    text-align: center;
}
.Header-cartCount[hidden] {
    display: none;
}

/* ── Actions compactes mobile ───────────────────── */
.Header-mobileActions {
    display: none;
    @media (max-width: 992px) {
        display: flex;
        align-items: center;
        gap: var(--wp--preset--spacing--s);
    }
}
.Header-searchToggle,
.Header-mobileCart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--wp--preset--color--primary);
    cursor: pointer;
    line-height: 0;
}
.Header-searchToggle .Header-icon,
.Header-mobileCart .Header-icon {
    width: 23px;
    height: 23px;
}

/* Icône générique inline */
.Header-icon {
    display: block;
    width: 22px;
    height: 22px;
}

/* Accessibilité */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}