/* ==========================================================================
   NavBar - bandeau supérieur, présent sur toutes les pages.
   Reproduction de A_NavBar (design_handoff_museaux/direction-a.jsx).
   ========================================================================== */

.mdm-navbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 28px var(--m-page-padding);
    font-family: var(--m-font-body);
    position: relative;
    z-index: 10;
}

/* Le menu prend l'espace au centre via margin auto, brand a gauche
   et le groupe (lang + panier + commander) reste a droite. */
.mdm-navbar > nav {
    margin: 0 auto;
}

/* Groupe droit : switcher de langue + panier + bouton commander.
   Tous regroupes pour eviter que space-between les eparpille. */
.mdm-navbar__right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* - Brand : logo paw + nom italique + Caveat « de Mena » - */
.mdm-navbar__brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--m-ink);
}

.mdm-navbar__brand:hover { color: var(--m-ink); }

.mdm-navbar__logo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--m-peach), var(--m-rose) 60%, var(--m-lavender));
    box-shadow: inset -3px -4px 8px rgba(74,56,50,.08);
    display: grid;
    place-items: center;
    color: var(--m-ink);
    flex-shrink: 0;
    overflow: hidden;
}

/* Logo Mena (chat noir transparent) inscrit dans le rond pastel.
   `object-fit: contain` garde les proportions, taille reduite (34/44)
   pour ne pas coller aux bords du cercle. */
.mdm-navbar__logo-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
}

.mdm-navbar__brand-text { line-height: 1; }

.mdm-navbar__brand-name {
    display: block;
    font-family: var(--m-font-display);
    font-style: italic;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    color: var(--m-ink);
}

.mdm-navbar__brand-suffix {
    display: block;
    font-family: var(--m-font-hand);
    font-size: 18px;
    color: var(--m-gold);
    line-height: 1;
    margin-top: 2px;
}

/* - Liens de navigation - */
.mdm-navbar__nav {
    display: flex;
    gap: 36px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    letter-spacing: .04em;
}

.mdm-navbar__nav li { margin: 0; }

.mdm-navbar__link {
    color: var(--m-ink-2);
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1.5px solid transparent;
    transition: color var(--m-fast) var(--m-ease),
                border-bottom-color var(--m-fast) var(--m-ease);
}

.mdm-navbar__link:hover,
.mdm-navbar__link.is-current {
    color: var(--m-ink);
    border-bottom-color: var(--m-gold);
}

/* - CTA Commander (bouton brun avec icône cœur rosé) - */
.mdm-navbar__cta {
    background: var(--m-ink);
    color: var(--m-cream);
    padding: 12px 22px;
    border-radius: var(--m-radius-pill);
    font-size: 13px;
    letter-spacing: .05em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex-shrink: 0;
    transition: transform var(--m-fast) var(--m-ease),
                box-shadow var(--m-fast) var(--m-ease);
}

.mdm-navbar__cta:hover {
    color: var(--m-cream);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(74,56,50,.45);
}

/* - Widget panier (icône avec compteur rond si non vide) - */
.mdm-navbar__cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--m-radius-pill);
    color: var(--m-ink);
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color var(--m-fast) var(--m-ease),
                transform var(--m-fast) var(--m-ease);
}
.mdm-navbar__cart:hover {
    background-color: rgba(74, 56, 50, .08);
    transform: translateY(-1px);
    color: var(--m-ink);
}
.mdm-navbar__cart--filled {
    color: var(--m-rose-deep, var(--m-ink));
}
.mdm-navbar__cart-count {
    position: absolute;
    /* Aligne sur le coin haut-droit de l'icone SVG (18px centree dans
       un conteneur 38x38) avec un debordement de quelques px. */
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--m-rose-deep, #c47b7b);
    color: var(--m-cream);
    font-size: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(74, 56, 50, .25);
}

/* - Notices WooCommerce globales (success / error / info) imprimées en
     haut de page après un add-to-cart, hors pages cart/checkout/account
     qui les rendent elles-mêmes. Padding horizontal aligné sur la
     navbar pour eviter le chevauchement gauche. - */
.mdm-wc-notices {
    padding: 0 var(--m-page-padding);
}

/* Layout flex pour aligner pictogramme/texte/bouton sur la meme ligne.
   On neutralise la border-top WC (3px) et le ::before icone WC (font
   icon qui se rend mal selon les systemes) pour utiliser nos propres
   pictos unicode dans un badge rond, robustes partout. */
.mdm-wc-notices .woocommerce-message,
.mdm-wc-notices .woocommerce-info,
.mdm-wc-notices .woocommerce-error {
    list-style: none;
    margin: 16px 0;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 4px 14px -8px rgba(74, 56, 50, .2);
    border-top: none !important;
    display: flex;
    align-items: center;
    gap: 14px;
}

.mdm-wc-notices .woocommerce-message::before,
.mdm-wc-notices .woocommerce-info::before,
.mdm-wc-notices .woocommerce-error::before {
    /* On reset le positionnement absolu WC + on remet un picto unicode
       lisible avec n'importe quelle font. */
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 16px;
    line-height: 1;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mdm-wc-notices .woocommerce-message {
    background: #ecf6ec;
    color: #2f6638;
    border-left: 3px solid #5fa66a;
}
.mdm-wc-notices .woocommerce-message::before {
    content: '\2713' !important; /* check mark ✓ */
    background: rgba(95, 166, 106, .18);
    color: #2f6638;
    font-weight: 700;
}

.mdm-wc-notices .woocommerce-info {
    background: #f0eef6;
    color: #4a386a;
    border-left: 3px solid #8a73c2;
}
.mdm-wc-notices .woocommerce-info::before {
    content: 'i' !important;
    background: rgba(138, 115, 194, .18);
    color: #4a386a;
    font-style: italic;
    font-weight: 700;
}

.mdm-wc-notices .woocommerce-error {
    background: #fbecec;
    color: #802d2d;
    border-left: 3px solid #c45a5a;
}
.mdm-wc-notices .woocommerce-error::before {
    content: '!' !important;
    background: rgba(196, 90, 90, .18);
    color: #802d2d;
    font-weight: 700;
}

.mdm-wc-notices .button {
    /* On annule le float: right WC pour laisser flex le placer. */
    float: none !important;
    margin-left: auto;
    flex-shrink: 0;
    background: var(--m-ink);
    color: var(--m-cream);
    padding: 8px 16px;
    border-radius: var(--m-radius-pill, 999px);
    font-size: 13px;
    text-decoration: none;
    transition: transform var(--m-fast, .2s) var(--m-ease, ease);
}
.mdm-wc-notices .button:hover {
    transform: translateY(-1px);
    color: var(--m-cream);
}

/* - Responsive minimal pour Phase 1 :
     en dessous de 900px, on cache les liens (ils reviendront en Phase 4
     avec un menu hamburger propre). Le brand et le CTA restent visibles. - */
@media (max-width: 900px) {
    .mdm-navbar { padding: 20px var(--m-space); gap: var(--m-space); }
    .mdm-navbar__nav { display: none; }
    .mdm-navbar__brand-name { font-size: 18px; }
    .mdm-navbar__brand-suffix { font-size: 15px; }
}

/* - Mobile portrait (<= 600px) : le texte « Demander mon portrait » du
     CTA principal etait trop large pour la barre en mode portrait
     telephone et debordait, ce qui desaxait l'alignement global. On
     passe le texte sur 2 lignes via white-space: normal + max-width
     contraint, et on reduit le padding/font-size pour rester compact.
     L'icone coeur reste alignee verticalement par flex.
     N'affecte pas paysage ni desktop (retour Cyril 2026-06-03). - */
@media (max-width: 600px) {
    .mdm-navbar__cta {
        padding: 8px 12px;
        font-size: 11px;
        line-height: 1.15;
        letter-spacing: .02em;
        gap: 6px;
        max-width: 130px;
        text-align: center;
    }
    .mdm-navbar__cta span {
        display: inline-block;
        white-space: normal;
    }
}