/* ==========================================================
   PETSCOMPARE — Navigation principale (refonte septembre 2026)
   ==========================================================
   Mobile-first : le CSS de base est celui du mobile, on ajoute
   des styles pour desktop via media queries.

   Composants :
   - .pcn                : header sticky
   - .pcn-inner          : conteneur interne 3 colonnes
   - .pcn-brand          : logo + mascotte + wordmark
   - .pcn-desktop-links  : liens horizontaux (desktop only)
   - .pcn-hamburger      : bouton hamburger (mobile only)
   - .pcn-backdrop       : overlay semi-transparent
   - .pcn-drawer         : panel lateral mobile
   - .pcn-accordion      : accordeons "par animal"

   Palette utilisee (variables globales) :
   - var(--brand-primary)      #1e3a5f  marine doux
   - var(--brand-primary-dark) #0a1929
   - var(--brand-accent)       #7cb9a3  sauge
   - var(--cream)              #faf7f2
   - var(--amber)              #d96b27  CTA orange
   ========================================================== */

.pcn {
    position: sticky;
    top: 0;
    z-index: 90;
    background: #fff;
    border-bottom: 1px solid var(--cream-2, #ebe6dd);
    box-shadow: var(--shadow-card, 0 2px 12px rgba(10, 25, 41, 0.06));
}

.pcn-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
}

/* --- Brand (logo + mascotte + wordmark) --- */
.pcn-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--brand-primary, #1e3a5f);
    font-family: 'Fraunces', serif;
    font-weight: 600;
    flex-shrink: 0;
}
.pcn-brand:hover {
    text-decoration: none;
    color: var(--brand-primary-dark, #0a1929);
}
.pcn-mascot {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    transition: transform var(--t-base, .25s) var(--ease-out);
}
.pcn-brand:hover .pcn-mascot {
    transform: rotate(-6deg) scale(1.08);
}
.pcn-brand-text {
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    line-height: 1;
}

/* --- Nav desktop : cachee en mobile --- */
.pcn-desktop-links {
    display: none;
}

/* --- Actions droite (icone recherche + hamburger) --- */
.pcn-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.pcn-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: var(--brand-primary, #1e3a5f);
    cursor: pointer;
    border-radius: var(--r-md, 12px);
    transition: background var(--t-fast, .15s);
    text-decoration: none;
}
.pcn-icon-btn:hover {
    background: var(--cream-2, #ebe6dd);
    text-decoration: none;
}

/* --- Hamburger --- */
.pcn-hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    gap: 5px;
    border-radius: var(--r-md, 12px);
    transition: background var(--t-fast, .15s);
}
.pcn-hamburger:hover {
    background: var(--cream-2, #ebe6dd);
}
.pcn-hamburger span {
    width: 22px;
    height: 2px;
    background: var(--brand-primary, #1e3a5f);
    border-radius: 2px;
    transition: transform var(--t-base, .25s) var(--ease-out), opacity var(--t-fast, .15s);
    transform-origin: center;
}
/* Animation vers X quand ouvert */
.pcn-hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.pcn-hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.pcn-hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- Backdrop (mobile drawer) --- */
.pcn-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 25, 41, 0.5);
    z-index: 100;
    opacity: 0;
    transition: opacity var(--t-base, .25s) var(--ease-out);
}
.pcn-backdrop.is-open {
    opacity: 1;
}

/* --- Drawer (panel lateral) --- */
.pcn-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(85vw, 380px);
    height: 100vh;
    max-height: 100dvh; /* dynamic viewport height iOS */
    background: #fff;
    z-index: 101;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .35s var(--ease-out, cubic-bezier(.2, .7, .3, 1));
    box-shadow: -6px 0 30px rgba(10, 25, 41, 0.14);
    overflow: hidden;
}
.pcn-drawer.is-open {
    transform: translateX(0);
}

.pcn-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--cream-2, #ebe6dd);
    background: var(--cream, #faf7f2);
    flex-shrink: 0;
}
.pcn-brand-drawer .pcn-brand-text { font-size: 1.05rem; }

.pcn-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: var(--brand-primary, #1e3a5f);
    cursor: pointer;
    border-radius: var(--r-md, 12px);
    transition: background var(--t-fast, .15s);
}
.pcn-drawer-close:hover {
    background: var(--cream-2, #ebe6dd);
}

/* --- Barre de recherche dans le drawer --- */
.pcn-drawer-search {
    display: flex;
    padding: 14px 16px 8px;
    gap: 8px;
    flex-shrink: 0;
}
.pcn-drawer-search-input {
    flex: 1;
    padding: 12px 14px;
    border: 1px solid var(--cream-2, #ebe6dd);
    border-radius: var(--r-md, 12px);
    font-size: 15px;
    font-family: inherit;
    color: var(--ink, #0a1929);
    background: var(--cream, #faf7f2);
    outline: none;
    transition: border-color var(--t-fast, .15s);
}
.pcn-drawer-search-input:focus {
    border-color: var(--brand-primary, #1e3a5f);
    background: #fff;
}
.pcn-drawer-search-btn {
    width: 44px;
    height: 44px;
    border: 0;
    background: var(--brand-primary, #1e3a5f);
    color: #fff;
    border-radius: var(--r-md, 12px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast, .15s);
    flex-shrink: 0;
}
.pcn-drawer-search-btn:hover {
    background: var(--brand-primary-dark, #0a1929);
}

/* --- Nav dans le drawer (scrollable) --- */
.pcn-drawer-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 8px 20px;
    -webkit-overflow-scrolling: touch;
}
.pcn-drawer-section {
    margin-bottom: 24px;
}
.pcn-drawer-section-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted, #6b7a8a);
    margin: 0 12px 8px;
}

/* --- Accordions (par animal) --- */
.pcn-accordion {
    background: transparent;
    border-radius: var(--r-md, 12px);
}
.pcn-accordion + .pcn-accordion {
    margin-top: 2px;
}
.pcn-accordion-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 12px;
    cursor: pointer;
    list-style: none;
    font-size: 15.5px;
    font-weight: 500;
    color: var(--ink, #0a1929);
    border-radius: var(--r-md, 12px);
    transition: background var(--t-fast, .15s);
    -webkit-tap-highlight-color: transparent;
}
.pcn-accordion-summary::-webkit-details-marker { display: none; }
.pcn-accordion-summary:hover {
    background: var(--cream-2, #ebe6dd);
}
.pcn-chevron {
    color: var(--muted, #6b7a8a);
    transition: transform var(--t-base, .25s) var(--ease-out);
}
.pcn-accordion[open] > .pcn-accordion-summary .pcn-chevron {
    transform: rotate(180deg);
}
.pcn-accordion[open] > .pcn-accordion-summary {
    color: var(--brand-primary, #1e3a5f);
    font-weight: 600;
}
.pcn-accordion-body {
    padding: 4px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pcn-sublink {
    display: block;
    padding: 10px 12px;
    color: var(--ink, #0a1929);
    text-decoration: none;
    font-size: 14.5px;
    border-radius: var(--r-sm, 6px);
    transition: background var(--t-fast, .15s), color var(--t-fast, .15s);
}
.pcn-sublink:hover {
    background: var(--brand-accent-light, #a3d4c5);
    color: var(--brand-primary-dark, #0a1929);
    text-decoration: none;
}
.pcn-sublink-all {
    font-weight: 500;
    color: var(--brand-primary, #1e3a5f);
    margin-top: 4px;
    font-size: 13.5px;
}

/* --- Sous-accordeon "Plus d outils" dans la section Outils --- */
.pcn-accordion-tools {
    margin-top: 4px;
    border-top: 1px dashed var(--cream-2, #ebe6dd);
    padding-top: 4px;
}

/* --- Section legal en fin de drawer (a-propos, mentions, etc.) --- */
.pcn-drawer-section-legal {
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--cream-2, #ebe6dd);
}
.pcn-drawer-link-small {
    padding: 10px 12px;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--muted, #6b7a8a);
}
.pcn-drawer-link-small:hover {
    color: var(--brand-primary, #1e3a5f);
    background: transparent;
}

/* --- Liens simples "services" et "editorial" --- */
.pcn-drawer-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    color: var(--ink, #0a1929);
    text-decoration: none;
    font-size: 15.5px;
    font-weight: 500;
    border-radius: var(--r-md, 12px);
    transition: background var(--t-fast, .15s);
}
.pcn-drawer-link:hover {
    background: var(--cream-2, #ebe6dd);
    text-decoration: none;
}
.pcn-drawer-link-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    width: 28px;
    display: inline-flex;
    justify-content: center;
}

/* --- Footer du drawer (langue) --- */
.pcn-drawer-footer {
    padding: 14px 18px;
    border-top: 1px solid var(--cream-2, #ebe6dd);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--cream, #faf7f2);
}
.pcn-lang-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted, #6b7a8a);
}
.pcn-lang-btns {
    display: flex;
    gap: 4px;
}
.pcn-lang-form { display: inline-block; }
.pcn-lang-btn {
    padding: 6px 10px;
    border: 1px solid var(--cream-2, #ebe6dd);
    background: transparent;
    color: var(--muted, #6b7a8a);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    cursor: pointer;
    border-radius: var(--r-sm, 6px);
    transition: all var(--t-fast, .15s);
}
.pcn-lang-btn:hover {
    color: var(--brand-primary, #1e3a5f);
    border-color: var(--brand-primary, #1e3a5f);
}
.pcn-lang-btn.is-active {
    background: var(--brand-primary, #1e3a5f);
    color: #fff;
    border-color: var(--brand-primary, #1e3a5f);
}

/* Prevent body scroll when drawer open */
body.pcn-scroll-lock {
    overflow: hidden;
}

/* ==========================================================
   Desktop (>= 900px)
   ========================================================== */
@media (min-width: 900px) {
    .pcn-inner {
        padding: 12px 24px;
        min-height: 64px;
    }
    .pcn-brand-text {
        font-size: 1.3rem;
    }
    .pcn-mascot {
        width: 42px;
        height: 42px;
    }

    /* Show desktop nav links */
    .pcn-desktop-links {
        display: flex;
        align-items: center;
        gap: 4px;
        flex: 1;
        justify-content: center;
        margin: 0 24px;
    }
    .pcn-link {
        padding: 8px 14px;
        color: var(--ink, #0a1929);
        font-size: 14.5px;
        font-weight: 500;
        text-decoration: none;
        border-radius: var(--r-md, 12px);
        transition: background var(--t-fast, .15s), color var(--t-fast, .15s);
        white-space: nowrap;
    }
    .pcn-link:hover {
        background: var(--cream-2, #ebe6dd);
        color: var(--brand-primary, #1e3a5f);
        text-decoration: none;
    }
    .pcn-link.is-active {
        color: var(--brand-primary, #1e3a5f);
        font-weight: 600;
    }
    .pcn-link-hot {
        color: var(--amber, #d96b27);
        font-weight: 600;
    }
    .pcn-link-hot:hover {
        background: rgba(217, 107, 39, 0.1);
        color: var(--amber, #d96b27);
    }

    /* Hide hamburger on desktop, show search icon */
    .pcn-hamburger {
        display: none;
    }
    .pcn-icon-search {
        display: inline-flex;
    }
}

/* Prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .pcn-drawer,
    .pcn-backdrop,
    .pcn-mascot,
    .pcn-chevron,
    .pcn-hamburger span {
        transition: none !important;
    }
}

/* ==========================================================
   Cleanup elements pre-refonte (septembre 2026) qui font doublon
   avec la nouvelle nav :
   - .mobile-topbar : ancien header mobile (retire du _base.html)
   - .account-badge-wrap : barre langue + compte flottante top right
     -> on la cache sur mobile car le langue est deja dans le drawer,
        on la garde sur desktop pour l acces rapide au compte
   ========================================================== */
.mobile-topbar { display: none !important; }

@media (max-width: 899px) {
    .account-badge-wrap { display: none !important; }
}