/**
 * PPSOLAR — En-tête (inc/header-plus.php, js/header-plus.js)
 * Réglages : Apparence → Personnaliser → PPSOLAR – En-tête
 * Couleurs : variables de css/ppsolar-base.css
 */

/* =============================================================================
   Bouton devis
   ============================================================================= */
.custom-header .pp-devis-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 8px;
    background: var(--ppsolar-accent);
    box-sizing: border-box;
    color: #ffffff !important;
    font-family: var(--ppsolar-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease;
}

.custom-header .pp-devis-btn:hover,
.custom-header .pp-devis-btn:focus-visible {
    background: #e8981a;
    transform: translateY(-1px);
}

.custom-header .pp-devis-btn svg {
    flex: 0 0 auto;
}

/* Écran moyen : icône seule */
@media (min-width: 769px) and (max-width: 1180px) {
    .custom-header .pp-devis-btn {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
    }

    .custom-header .pp-devis-btn .pp-devis-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .custom-header .pp-devis-btn svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 768px) {
    .custom-header .pp-devis-btn {
        display: none !important;
    }
}

/* =============================================================================
   Menu du compte
   ============================================================================= */
.pp-acc {
    position: relative;
    display: flex;
}

.pp-acc-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: -8px;
    z-index: 1003;
    width: 260px;
    padding: 10px;
    border: 1px solid var(--ppsolar-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 26, 43, 0.16);
    font-family: var(--ppsolar-font);
    text-align: left;
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* Pont invisible entre l'icône et le menu (survol) */
.pp-acc-menu::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
}

/* Petite pointe */
.pp-acc-menu::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 21px;
    width: 12px;
    height: 12px;
    border-top: 1px solid var(--ppsolar-border);
    border-left: 1px solid var(--ppsolar-border);
    background: #ffffff;
    transform: rotate(45deg);
}

.pp-acc.is-open .pp-acc-menu,
.pp-acc:focus-within .pp-acc-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
}

.pp-acc-hello {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid #eef0f3;
}

.pp-acc-av {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ppsolar-navy);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.pp-acc-who {
    min-width: 0;
}

.pp-acc-who b {
    display: block;
    color: var(--ppsolar-navy);
    font-size: 14px;
    font-weight: 600;
}

.pp-acc-who small {
    display: block;
    overflow: hidden;
    color: var(--ppsolar-text-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-acc-menu ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.pp-acc-menu ul li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.pp-acc-menu ul li::before {
    content: none !important;
}

.pp-acc-menu ul a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--ppsolar-navy-2) !important;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none !important;
    transition: background 0.15s ease;
}

.pp-acc-menu ul a::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ppsolar-accent);
}

.pp-acc-menu ul a:hover,
.pp-acc-menu ul a:focus-visible {
    background: #fff7e8;
}

.pp-acc-menu .pp-acc-extra {
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid #eef0f3;
}

.pp-acc-logout {
    display: block;
    margin-top: 6px;
    padding: 11px 10px 6px;
    border-top: 1px solid #eef0f3;
    color: var(--ppsolar-red) !important;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none !important;
}

.pp-acc-title {
    margin: 4px 8px 10px !important;
    color: var(--ppsolar-navy);
    font-size: 14px;
    font-weight: 600;
}

.pp-acc-login,
.pp-acc-register {
    display: block;
    margin: 0 4px 8px;
    padding: 11px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none !important;
}

.pp-acc-login {
    background: var(--ppsolar-navy);
    color: #ffffff !important;
}

.pp-acc-login:hover {
    background: var(--ppsolar-navy-2);
}

.pp-acc-register {
    border: 1px solid var(--ppsolar-navy);
    color: var(--ppsolar-navy) !important;
}

.pp-acc-register:hover {
    background: #f6f7f9;
}

/* Mobile : l'icône mène directement à "Mon compte" (le compte est aussi dans le menu) */
@media (max-width: 768px) {
    .pp-acc-menu {
        display: none !important;
    }
}

/* =============================================================================
   En-tête compact (ordinateur)
   ============================================================================= */
@media (min-width: 769px) {
    .custom-header.pp-compact .header-top {
        padding: 8px 0 !important;
    }

    .custom-header.pp-compact .header-logo img {
        height: 38px !important;
    }

    .custom-header.pp-compact .header-nav {
        display: none !important;
    }
}

/* =============================================================================
   Images des rubriques (méga-menu et menu mobile) — cachées par défaut
   ============================================================================= */
html body .nav-menu .pp-hp-media,
html body .nav-menu .pp-hp-desc,
html body .nav-menu .pp-mega-promo,
html body .nav-menu > li.pp-mm-brand,
html body .nav-menu > li.pp-mm-account,
html body .nav-menu > li.pp-mm-foot {
    display: none !important;
}

html body .nav-menu img.pp-hp-thumb,
html body .nav-menu img.pp-mm-logo {
    display: block !important;
    visibility: visible !important;
    font-size: inherit !important;
}

/* Pas d'image : petit soleil */
html body .nav-menu a.pp-hp-noimg::before {
    content: "" !important;
    display: block !important;
    width: 34%;
    max-width: 38px;
    aspect-ratio: 1;
    background: var(--ppsolar-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =============================================================================
   Méga-menu (ordinateur) : colonnes de liens + encart devis
   Nombre de colonnes calculé par js/header-plus.js (--pp-cols, 1 à 4).
   ============================================================================= */
@media (min-width: 769px) {
    .pp-hp-mega .custom-header .header-nav {
        position: relative;
    }

    /* Le panneau s'ouvre sous la rubrique, aligné à gauche sur son titre
       (décalé vers la gauche par js/header-plus.js s'il dépasserait de l'écran) */
    .pp-hp-mega .custom-header .nav-menu > li.pp-mega {
        position: relative;
    }

    html body .nav-menu > li.pp-mega > .sub-menu.pp-mega-panel {
        --pp-cols: 3;
        --pp-col: 200px;
        --pp-promo: 0px;
        top: 100%;
        left: var(--pp-shift, 0px);
        right: auto;
        display: block;
        column-count: var(--pp-cols);
        column-gap: 18px;
        width: calc(var(--pp-cols) * var(--pp-col) + (var(--pp-cols) - 1) * 18px + 48px + var(--pp-promo));
        max-width: calc(100vw - 48px);
        min-width: 0;
        min-height: 0;
        margin: 12px 0 0 !important;
        padding: 22px calc(24px + var(--pp-promo)) 22px 24px !important;
        border: 0;
        border-top: 3px solid var(--ppsolar-accent);
        border-radius: 0 0 16px 16px;
        box-shadow: 0 24px 50px rgba(15, 26, 43, 0.18);
        box-sizing: border-box;
    }

    /* Avec l'encart : place réservée à droite */
    html body .nav-menu > li.pp-mega > .sub-menu.pp-mega-panel.pp-has-promo {
        --pp-promo: 258px;
        min-height: 230px;
    }

    html body .nav-menu .pp-mega-panel > li {
        break-inside: avoid;
    }

    html body .nav-menu .pp-mega-panel > li.menu-item:not(.hc-view-all):not(.pp-mega-promo) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        min-width: 0;
    }

    /* Lien de 2e niveau */
    html body .nav-menu .pp-mega-panel > li > a:not(.pp-hp-media):not(.pp-mega-promo-btn) {
        flex: 1 1 0;
        min-width: 0;
        padding: 8px 10px !important;
        border-radius: 8px;
        color: var(--ppsolar-navy-2) !important;
        font-size: 14px !important;
        font-weight: 500;
        line-height: 1.3;
        white-space: normal;
        transform: none !important;
    }

    html body .nav-menu .pp-mega-panel > li > a:not(.pp-hp-media):not(.pp-mega-promo-btn):hover {
        background: #fff7e8 !important;
        color: var(--ppsolar-red) !important;
    }

    /* Rubrique qui a ses propres sous-rubriques : titre en gras */
    html body .nav-menu .pp-mega-panel > li.menu-item-has-children > a:not(.pp-hp-media) {
        flex-basis: 100%;
        color: var(--ppsolar-navy) !important;
        font-weight: 600;
    }

    /* Petite image (seulement si la rubrique en a une) */
    html body .nav-menu .pp-mega-panel > li > .pp-hp-media {
        order: -1;
        display: flex !important;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin-right: 2px;
        padding: 0 !important;
        overflow: hidden;
        border-radius: 8px;
        background: #f6f7f9;
        transform: none !important;
    }

    html body .nav-menu .pp-mega-panel > li > .pp-hp-media.pp-hp-noimg {
        display: none !important;
    }

    html body .nav-menu .pp-mega-panel img.pp-hp-thumb {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
    }

    html body .nav-menu .pp-mega-panel > li > .pp-hp-desc {
        display: block !important;
        flex-basis: 100%;
        margin: -4px 0 4px;
        padding: 0 10px;
        color: var(--ppsolar-text-muted);
        font-size: 12px;
        line-height: 1.35;
    }

    /* 3e et 4e niveaux : liste sous le titre */
    html body .nav-menu .pp-mega-panel li.menu-item-has-children > a::after {
        display: none !important;
    }

    html body .nav-menu .pp-mega-panel .sub-menu {
        position: static !important;
        display: block !important;
        flex-basis: 100%;
        min-width: 0 !important;
        margin: 0 0 6px 10px !important;
        padding: 0 0 0 10px !important;
        border: 0 !important;
        border-left: 2px solid #eef0f3 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        visibility: inherit !important;
        opacity: 1 !important;
        animation: none !important;
    }

    html body .nav-menu .pp-mega-panel .sub-menu::before {
        content: none !important;
    }

    html body .nav-menu .pp-mega-panel .sub-menu a {
        display: block !important;
        padding: 5px 8px !important;
        border-radius: 6px;
        color: var(--ppsolar-navy-2) !important;
        font-size: 13px !important;
        font-weight: 400;
        white-space: normal;
        transform: none !important;
    }

    html body .nav-menu .pp-mega-panel .sub-menu li.menu-item-has-children > a {
        font-weight: 600;
    }

    html body .nav-menu .pp-mega-panel .sub-menu a:hover {
        background: #fff7e8 !important;
        color: var(--ppsolar-red) !important;
    }

    /* Encart devis */
    html body .nav-menu .pp-mega-panel > li.pp-mega-promo {
        position: absolute;
        top: 22px;
        right: 24px;
        bottom: 22px;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        width: 240px;
        padding: 20px;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--ppsolar-navy), var(--ppsolar-navy-2));
        color: #ffffff;
        box-sizing: border-box;
    }

    .pp-mega-promo-title {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.3;
    }

    .pp-mega-promo-text {
        color: rgba(255, 255, 255, 0.78);
        font-size: 12.5px;
        line-height: 1.5;
    }

    html body .nav-menu .pp-mega-promo a.pp-mega-promo-btn {
        align-self: flex-start;
        margin-top: 6px;
        padding: 10px 14px !important;
        border-radius: 8px;
        background: var(--ppsolar-accent) !important;
        color: #ffffff !important;
        font-size: 12px !important;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        white-space: nowrap;
        transform: none !important;
    }

    html body .nav-menu .pp-mega-promo a.pp-mega-promo-btn:hover {
        background: #e8981a !important;
        color: #ffffff !important;
    }
}

/* Écran moyen : colonnes plus étroites */
@media (min-width: 769px) and (max-width: 1100px) {
    html body .nav-menu > li.pp-mega > .sub-menu.pp-mega-panel {
        --pp-col: 165px;
    }

    html body .nav-menu > li.pp-mega > .sub-menu.pp-mega-panel.pp-has-promo {
        --pp-promo: 228px;
    }

    html body .nav-menu .pp-mega-panel > li.pp-mega-promo {
        width: 210px;
    }
}

/* =============================================================================
   Suggestions de recherche
   ============================================================================= */
.custom-header .header-search form {
    position: relative;
}

.pp-sugg {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 1002;
    padding: 16px 18px;
    border: 1px solid var(--ppsolar-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 26, 43, 0.16);
    font-family: var(--ppsolar-font);
    text-align: left;
}

.pp-sugg[hidden] {
    display: none !important;
}

.pp-sugg .pp-sugg-title {
    margin: 0 0 10px !important;
    color: var(--ppsolar-text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pp-sugg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.pp-sugg-chips:last-child {
    margin-bottom: 0;
}

.pp-sugg-chips a {
    padding: 7px 12px;
    border: 1px solid var(--ppsolar-border);
    border-radius: 999px;
    background: var(--ppsolar-grey-bg);
    color: var(--ppsolar-navy) !important;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none !important;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.pp-sugg-chips a::before {
    content: "↗ ";
    color: var(--ppsolar-accent);
}

.pp-sugg-chips a:hover,
.pp-sugg-chips a:focus-visible {
    border-color: var(--ppsolar-accent);
    background: #fff7e8;
}

.pp-sugg-cats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.pp-sugg-cats a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #eef0f3;
    border-radius: 10px;
    color: var(--ppsolar-navy) !important;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none !important;
    transition: border-color 0.15s ease;
}

.pp-sugg-cats a:hover,
.pp-sugg-cats a:focus-visible {
    border-color: var(--ppsolar-accent);
}

.pp-sugg-ico {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 8px;
    background: #fff7e8;
}

.pp-sugg-ico img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pp-sugg-ico:empty::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--ppsolar-accent);
}

@media (max-width: 600px) {
    .pp-sugg-cats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =============================================================================
   Menu mobile
   ============================================================================= */
@media (max-width: 768px) {
    /* Logo / nom en haut à gauche, face au bouton de fermeture */
    html body ul.nav-menu.nav-menu > li.pp-mm-brand {
        position: absolute;
        top: 16px;
        left: 24px;
        display: flex !important;
        align-items: center;
        width: auto;
        max-width: calc(100% - 110px);
        height: 44px;
        border: 0;
        color: var(--ppsolar-navy);
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    html body .nav-menu img.pp-mm-logo {
        width: auto !important;
        max-width: 100% !important;
        height: 34px !important;
        object-fit: contain;
    }

    /* Compte */
    html body ul.nav-menu.nav-menu > li.pp-mm-account {
        display: block !important;
        margin: 0 0 8px !important;
        border: 0;
        border-radius: 12px;
        background: var(--ppsolar-grey-bg);
    }

    html body .nav-menu > li.pp-mm-account > a {
        display: flex !important;
        align-items: center;
        gap: 12px;
        padding: 12px 14px !important;
        color: var(--ppsolar-navy) !important;
        font-size: 14px !important;
        font-weight: 600;
        text-transform: none !important;
    }

    .pp-mm-acc-text small {
        display: block;
        color: var(--ppsolar-text-muted);
        font-size: 12px;
        font-weight: 400;
    }

    html body .nav-menu .pp-acc-av svg {
        display: block !important;
        visibility: visible !important;
        width: 18px !important;
        height: 18px !important;
    }

    .pp-acc-av--guest {
        background: #fff7e8;
        color: var(--ppsolar-accent);
    }

    /* Rubriques : icône à gauche */
    .pp-hp-mobile-extras .nav-menu > li.menu-item {
        display: grid !important;
        grid-template-columns: 36px minmax(0, 1fr);
        column-gap: 12px;
        align-items: center;
    }

    .pp-hp-mobile-extras .nav-menu > li.menu-item > a:not(.pp-hp-media) {
        grid-column: 2;
        grid-row: 1;
    }

    .pp-hp-mobile-extras .nav-menu > li.menu-item > .sub-menu,
    .pp-hp-mobile-extras .nav-menu > li.menu-item > ul {
        grid-column: 1 / -1;
        z-index: auto !important; /* sinon le sous-menu passe devant le bas du menu */
    }

    html body.pp-hp-mobile-extras .nav-menu > li > .pp-hp-media {
        grid-column: 1;
        grid-row: 1;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0 !important;
        overflow: hidden;
        border-radius: 10px;
        background: #fff7e8;
    }

    html body .nav-menu > li > .pp-hp-media img.pp-hp-thumb {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

    html body .nav-menu > li > a.pp-hp-noimg::before {
        width: 20px;
    }

    /* Bas du menu : devis, téléphone, horaires */
    html body ul.nav-menu.nav-menu > li.pp-mm-foot {
        position: sticky;
        bottom: -24px;
        z-index: 1000;
        display: flex !important;
        flex-direction: column;
        gap: 12px;
        width: calc(100% + 48px);
        margin: auto -24px -24px !important;
        padding: 18px 24px 24px;
        border: 0;
        background: var(--ppsolar-navy);
        box-sizing: border-box;
    }

    html body .nav-menu > li.pp-mm-foot > a.pp-mm-devis {
        display: block !important;
        padding: 14px !important;
        border-radius: 10px;
        background: var(--ppsolar-accent);
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-align: center;
        text-transform: uppercase;
    }

    .pp-mm-contact {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 6px 12px;
        color: rgba(255, 255, 255, 0.8);
        font-size: 13px;
    }

    html body .nav-menu .pp-mm-contact a.pp-mm-phone {
        display: inline !important;
        padding: 0 !important;
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 600;
        text-transform: none !important;
    }
}

/* L'image de la rubrique ne porte pas le "+" / "▾" du sous-menu */
html body .nav-menu > li > a.pp-hp-media::after,
html body .nav-menu .sub-menu > li > a.pp-hp-media::after {
    content: none !important;
    display: none !important;
}

/* Menu mobile : rubriques du plugin PP Menu Brands (affichage d'origine, icône ajoutée à gauche) */
@media (max-width: 768px) {
    .pp-hp-mobile-extras .nav-menu > li.menu-item.pp-mb-item {
        display: block !important;
    }

    html body.pp-hp-mobile-extras .nav-menu > li.pp-mb-item > a:first-child {
        padding-left: 48px !important;
    }

    html body.pp-hp-mobile-extras .nav-menu > li.pp-mb-item::before {
        content: "" !important;
        display: block !important;
        position: absolute;
        top: 10px;
        left: 0;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: #fff7e8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4A622' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E") center / 20px no-repeat;
        pointer-events: none;
    }

    html body .nav-menu > li.pp-mb-item {
        position: relative;
    }
}

@media (min-width: 769px) {
    html body .nav-menu > li.pp-sub-right > .sub-menu {
        left: auto;
        right: 0;
    }
}

/* Méga-menu : logos des marques (plugin de logos) alignés, texte aligné sur les logos */
@media (min-width: 769px) {
    html body .nav-menu .pp-mega-panel > li > a:not(.pp-hp-media):not(.pp-mega-promo-btn) {
        display: flex !important;
        align-items: center;
        justify-content: flex-start !important;
        gap: 10px;
    }

    html body .nav-menu .pp-mega-panel > li > a img,
    html body .nav-menu .pp-mega-panel > li > a .pp-mb-logo {
        display: block !important;
        visibility: visible !important;
        flex: 0 0 auto;
        width: 30px !important;
        height: 30px !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 2px;
        border-radius: 6px;
        background: #ffffff;
        object-fit: contain;
        box-sizing: border-box;
    }

    /* Dans un panneau qui a des logos, les liens sans logo gardent le même alignement */
    html body .nav-menu .pp-mega-panel:has(> li > a img) > li:not(.pp-mega-promo):not(:has(> a img)) > a:not(.pp-hp-media):not(.pp-mega-promo-btn) {
        padding-left: 50px !important;
    }

    html body .nav-menu .pp-mega-panel:has(> li > a img) > li:not(.pp-mega-promo) > a:not(.pp-hp-media):not(.pp-mega-promo-btn) {
        min-height: 44px;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        box-sizing: border-box;
    }

    /* Aucun texte de présentation sous les liens */
    html body .nav-menu .pp-mega-panel .pp-hp-desc,
    html body .nav-menu .pp-mega-panel .menu-item-description {
        display: none !important;
    }
}

/* Pont invisible entre le titre et le panneau : la souris ne "sort" pas en descendant */
@media (min-width: 769px) {
    html body .nav-menu > li.pp-mega > .sub-menu.pp-mega-panel::before {
        content: "" !important;
        display: block !important;
        position: absolute;
        top: -16px;
        left: 0;
        right: 0;
        height: 16px;
        background: transparent;
    }
}

/* Bouton devis venant d'un shortcode : même aspect que le bouton devis */
.custom-header .pp-devis-sc {
    display: flex;
    align-items: center;
}

.custom-header .pp-devis-sc a,
.custom-header .pp-devis-sc button,
.custom-header .pp-devis-sc input[type="submit"],
.custom-header .pp-devis-sc input[type="button"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin: 0 !important;
    padding: 10px 20px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--ppsolar-accent) !important;
    color: #ffffff !important;
    font-family: var(--ppsolar-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    line-height: 1.4 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: none !important;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.2s ease, transform 0.2s ease;
}

.custom-header .pp-devis-sc a:hover,
.custom-header .pp-devis-sc button:hover {
    background: #e8981a !important;
    transform: translateY(-1px);
}

/* Mobile : le bouton reste dans la page (le menu mobile l'actionne) mais n'est pas affiché */
@media (max-width: 768px) {
    .custom-header .pp-devis-sc {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* Encart personnalisé (zone de widgets de la rubrique) : fond clair, contenu libre */
@media (min-width: 769px) {
    html body .nav-menu .pp-mega-panel > li.pp-mega-promo.pp-mega-promo--custom {
        bottom: auto;
        justify-content: flex-start;
        gap: 12px;
        min-height: calc(100% - 44px);
        padding: 16px;
        border: 1px solid #eef0f3;
        background: var(--ppsolar-grey-bg);
        color: var(--ppsolar-navy);
        font-size: 13px;
        line-height: 1.5;
        white-space: normal;
    }

    .pp-mega-promo--custom .pp-mega-widget-title {
        margin: 0 0 6px !important;
        color: var(--ppsolar-navy);
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
    }

    .pp-mega-promo--custom p {
        margin: 0 0 8px;
    }

    html body .nav-menu .pp-mega-promo--custom img {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 8px;
        font-size: inherit !important;
    }

    html body .nav-menu .pp-mega-promo--custom a {
        display: inline;
        padding: 0 !important;
        background: none !important;
        color: var(--ppsolar-navy) !important;
        font-size: inherit !important;
        text-decoration: underline;
        transform: none !important;
        white-space: normal;
    }

    html body .nav-menu .pp-mega-promo--custom a:has(img) {
        display: block;
        text-decoration: none;
    }

    html body .nav-menu .pp-mega-promo--custom .wp-block-button__link,
    html body .nav-menu .pp-mega-promo--custom .button {
        display: inline-block;
        padding: 10px 14px !important;
        border-radius: 8px;
        background: var(--ppsolar-accent) !important;
        color: var(--ppsolar-navy) !important;
        font-size: 12px !important;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-decoration: none;
        text-transform: uppercase;
    }
}

/* =============================================================================
   En-tête pleine largeur (option) : logo et icônes calés sur les bords, comme le contenu
   ============================================================================= */
@media (min-width: 769px) {
    .pp-hp-wide .custom-header .header-top .header-container {
        max-width: none;
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* =============================================================================
   Bouton devis : style "contour" (option)
   ============================================================================= */
.pp-hp-devis-contour .custom-header .pp-devis-btn,
.pp-hp-devis-contour .custom-header .pp-devis-sc a,
.pp-hp-devis-contour .custom-header .pp-devis-sc button,
.pp-hp-devis-contour .custom-header .pp-devis-sc input[type="submit"],
.pp-hp-devis-contour .custom-header .pp-devis-sc input[type="button"] {
    background: transparent !important;
    box-shadow: inset 0 0 0 2px var(--ppsolar-accent) !important;
    color: #0F1A2B !important;
}

.pp-hp-devis-contour .custom-header .pp-devis-btn:hover,
.pp-hp-devis-contour .custom-header .pp-devis-btn:focus-visible,
.pp-hp-devis-contour .custom-header .pp-devis-sc a:hover,
.pp-hp-devis-contour .custom-header .pp-devis-sc button:hover {
    background: var(--ppsolar-accent) !important;
    color: var(--ppsolar-navy) !important;
}

/* =============================================================================
   Boutons orange : texte marine (option, plus lisible que le blanc sur l'orange)
   ============================================================================= */
body.pp-hp-devis-marine .custom-header .pp-devis-btn,
body.pp-hp-devis-marine .custom-header .pp-devis-sc a,
body.pp-hp-devis-marine .custom-header .pp-devis-sc button,
body.pp-hp-devis-marine .custom-header .pp-devis-sc input[type="submit"],
body.pp-hp-devis-marine .custom-header .pp-devis-sc input[type="button"],
html body.pp-hp-devis-marine .nav-menu .pp-mega-promo a.pp-mega-promo-btn,
html body.pp-hp-devis-marine .nav-menu > li.pp-mm-foot > a.pp-mm-devis {
    color: var(--ppsolar-navy) !important;
}

/* =============================================================================
   En-tête harmonisé (option) : mêmes bords, mêmes arrondis, même hauteur (44 px)
   ============================================================================= */
/* Rubriques : calées sur les mêmes bords que le logo et le panier (avec l'option pleine largeur).
   En dessous de 1200 px, les rubriques passent sur deux lignes : elles restent centrées. */
@media (min-width: 1200px) {
    .pp-hp-harmony.pp-hp-wide .custom-header .header-nav .header-container {
        max-width: none;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .pp-hp-harmony.pp-hp-wide .custom-header .header-nav .nav-menu {
        width: 100%;
        justify-content: flex-start;
        gap: 2px clamp(14px, 1.55vw, 36px);
    }
}

/* Mêmes marges que le contenu des pages (10 px) */
@media (min-width: 769px) {
    .pp-hp-harmony.pp-hp-wide .custom-header .header-top .header-container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (min-width: 769px) {

    /* Recherche : arrondi complet, fond gris clair sans bordure, loupe ronde */
    .pp-hp-harmony .custom-header .header-search {
        max-width: 680px;
    }

    .pp-hp-harmony .custom-header .search-input {
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 52px 0 20px !important;
        border: 0 !important;
        border-radius: 22px !important;
        background: #F2F4F7 !important;
        box-shadow: none !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    .pp-hp-harmony .custom-header .search-input:focus {
        background: #FFFFFF !important;
        box-shadow: 0 0 0 2px var(--ppsolar-navy-2) !important;
    }

    .pp-hp-harmony .custom-header .search-button {
        right: 4px;
        border-radius: 50% !important;
        background: var(--ppsolar-navy) !important;
    }

    .pp-hp-harmony .custom-header .search-button svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Bouton devis : même hauteur et même arrondi que la recherche */
    .pp-hp-harmony .custom-header .pp-devis-btn,
    .pp-hp-harmony .custom-header .pp-devis-sc a,
    .pp-hp-harmony .custom-header .pp-devis-sc button,
    .pp-hp-harmony .custom-header .pp-devis-sc input[type="submit"],
    .pp-hp-harmony .custom-header .pp-devis-sc input[type="button"] {
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 22px !important;
        border-radius: 22px !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    /* Bouton de l'encart du méga-menu : même forme que le bouton devis */
    html body.pp-hp-harmony .nav-menu .pp-mega-promo a.pp-mega-promo-btn {
        border-radius: 22px !important;
        padding: 11px 18px !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        font-size: 13px !important;
    }
}

/* =============================================================================
   Rubriques du menu « N1 » (option) : pictogramme orange + minuscules, ligne centrée
   Les dessins des pictogrammes sont ajoutés par inc/header-plus.php (même liste que le menu mobile).
   ============================================================================= */
@media (min-width: 769px) {
    html body.pp-hp-nav-n1 .header-nav .nav-menu {
        justify-content: center !important;
        gap: 2px clamp(10px, 1.15vw, 30px) !important;
    }

    html body.pp-hp-nav-n1 .header-nav .nav-menu > li.menu-item-has-children > a:not(.pp-hp-media)::after {
        margin-left: -3px !important;
        font-size: 10px !important;
    }

    html body.pp-hp-nav-n1 .header-nav .nav-menu > li > a:not(.pp-hp-media) {
        display: inline-flex !important;
        align-items: center;
        gap: 7px;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    html body.pp-hp-nav-n1 .header-nav .nav-menu > li[class*="pp-picto-"] > a:not(.pp-hp-media)::before {
        content: "" !important;
        display: block !important;
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
        background: var(--ppsolar-accent);
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

}

/* Écrans moyens : texte un peu plus petit pour garder les rubriques sur une ligne */
@media (min-width: 769px) and (max-width: 1599px) {
    html body.pp-hp-nav-n1 .header-nav .nav-menu > li > a:not(.pp-hp-media) {
        font-size: 13.5px !important;
        gap: 6px;
    }
}

/* =============================================================================
   Barre des rubriques en marine (option, ordinateur)
   ============================================================================= */
@media (min-width: 769px) {
    html body.pp-hp-nav-dark .custom-header .header-nav {
        background: var(--ppsolar-navy);
    }

    html body.pp-hp-nav-dark .custom-header .header-top {
        border-bottom: 0;
    }

    html body.pp-hp-nav-dark .header-nav .nav-menu > li > a:not(.pp-hp-media) {
        color: #FFFFFF !important;
    }

    html body.pp-hp-nav-dark .header-nav .nav-menu > li > a:not(.pp-hp-media):hover,
    html body.pp-hp-nav-dark .header-nav .nav-menu > li.is-open > a:not(.pp-hp-media),
    html body.pp-hp-nav-dark .header-nav .nav-menu > li.current-menu-item > a:not(.pp-hp-media),
    html body.pp-hp-nav-dark .header-nav .nav-menu > li.current-menu-ancestor > a:not(.pp-hp-media) {
        color: var(--ppsolar-accent) !important;
    }

    html body.pp-hp-nav-dark .header-nav .nav-menu > li.menu-item-has-children > a:not(.pp-hp-media)::after {
        opacity: 0.7;
    }
}

/* Rubriques du menu en majuscules (option) */
@media (min-width: 769px) {
    html body.pp-hp-nav-n1.pp-hp-nav-upper .header-nav .nav-menu > li > a:not(.pp-hp-media) {
        text-transform: uppercase !important;
        letter-spacing: 0.02em !important;
    }
}

@media (min-width: 769px) and (max-width: 1599px) {
    html body.pp-hp-nav-n1.pp-hp-nav-upper .header-nav .nav-menu > li > a:not(.pp-hp-media) {
        font-size: 12.5px !important;
        letter-spacing: 0.01em !important;
    }

    html body.pp-hp-nav-n1.pp-hp-nav-upper .header-nav .nav-menu {
        gap: 2px clamp(8px, 0.8vw, 24px) !important;
    }
}

/* =============================================================================
   Boutons devis en rouge (option) : en-tête, encart du méga-menu, menu mobile, pied de page
   ============================================================================= */
body.pp-hp-devis-rouge .custom-header .pp-devis-btn,
body.pp-hp-devis-rouge .custom-header .pp-devis-sc a,
body.pp-hp-devis-rouge .custom-header .pp-devis-sc button,
body.pp-hp-devis-rouge .custom-header .pp-devis-sc input[type="submit"],
body.pp-hp-devis-rouge .custom-header .pp-devis-sc input[type="button"],
html body.pp-hp-devis-rouge .nav-menu .pp-mega-promo a.pp-mega-promo-btn,
html body.pp-hp-devis-rouge .nav-menu > li.pp-mm-foot > a.pp-mm-devis,
body.pp-hp-devis-rouge .pp-footer a.pp-footer-devis {
    background: var(--ppsolar-red) !important;
    color: #FFFFFF !important;
}

body.pp-hp-devis-rouge .custom-header .pp-devis-btn:hover,
body.pp-hp-devis-rouge .custom-header .pp-devis-btn:focus-visible,
body.pp-hp-devis-rouge .custom-header .pp-devis-sc a:hover,
body.pp-hp-devis-rouge .custom-header .pp-devis-sc button:hover,
html body.pp-hp-devis-rouge .nav-menu .pp-mega-promo a.pp-mega-promo-btn:hover,
body.pp-hp-devis-rouge .pp-footer a.pp-footer-devis:hover {
    background: var(--ppsolar-red-hover) !important;
    color: #FFFFFF !important;
}

/* Style « contour » en rouge */
body.pp-hp-devis-rouge.pp-hp-devis-contour .custom-header .pp-devis-btn,
body.pp-hp-devis-rouge.pp-hp-devis-contour .custom-header .pp-devis-sc a,
body.pp-hp-devis-rouge.pp-hp-devis-contour .custom-header .pp-devis-sc button {
    background: transparent !important;
    box-shadow: inset 0 0 0 2px var(--ppsolar-red) !important;
    color: var(--ppsolar-navy) !important;
}