/* ==========================================================================
   Méga-menu Cyber Jay 2.0
   Portée : #top-menu nav.cjm — la spécificité est délibérément supérieure à
   celle des règles historiques de style.css et responsive.css, qui ciblent
   « #top-menu nav … » sans la classe.
   ========================================================================== */

.cjm-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

#top-menu nav.cjm {
    --cjm-violet: #8f15ff;          /* --purple du thème */
    --cjm-violet-deep: #7211cc;
    --cjm-violet-wash: #f4eaff;
    --cjm-ink: #0e0e13;             /* plus noir que --black (#212529) */
    --cjm-ink-2: #3a3646;
    --cjm-ink-3: #7d7789;
    --cjm-line: #e6e3ee;
    --cjm-paper: #fff;
    --cjm-wash: #f6f5f9;
    --cjm-gold: #b47c0a;
    --cjm-green: #0d6b52;
}

/* ==========================================================================
   1. Barre principale
   ========================================================================== */

#top-menu nav.cjm > ul.cjm-nav {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0 0 0 24px;
    margin: 0;
    list-style: none;
    justify-content: flex-start;
    flex: 1;
    min-width: 0;
}

#top-menu nav.cjm > ul > li {
    display: flex;
    align-items: stretch;
    position: static;          /* le panneau s'ancre sur #top-menu */
    height: auto;
    padding: 0;
    border: 0;
}

#top-menu nav.cjm > ul > li > .cjm-top {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 100%;
    min-height: 56px;
    padding: 0 12px;
    position: relative;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--cjm-ink);
    background: none;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    transition: color .16s;
}

#top-menu nav.cjm > ul > li > .cjm-top::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    background: var(--cjm-violet);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .2s cubic-bezier(.2, .7, .3, 1);
}

#top-menu nav.cjm > ul > li > .cjm-top:hover,
#top-menu nav.cjm > ul > li > .cjm-top:focus-visible,
#top-menu nav.cjm > ul > li > .cjm-top[aria-expanded="true"] {
    color: var(--cjm-violet-deep);
}

#top-menu nav.cjm > ul > li > .cjm-top:hover::after,
#top-menu nav.cjm > ul > li > .cjm-top[aria-expanded="true"]::after {
    transform: scaleX(1);
}

#top-menu nav.cjm .cjm-chev {
    opacity: .5;
    transition: transform .2s, opacity .2s;
    flex: none;
}

#top-menu nav.cjm .cjm-top[aria-expanded="true"] .cjm-chev {
    transform: rotate(180deg);
    opacity: 1;
}

#top-menu nav.cjm #espacePro > .cjm-top {
    margin-left: 6px;
    padding: 0 13px;
    color: var(--cjm-violet-deep);
    font-weight: 600;
}

#top-menu nav.cjm :focus-visible {
    outline: 2px solid var(--cjm-violet);
    outline-offset: -3px;
    border-radius: 4px;
}

/* Le survol seul n'ouvre plus rien : les icônes gardent la taille du thème. */
#top-menu nav.cjm .cjm-i {
    flex: none;
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   2. Panneau
   ========================================================================== */

#top-menu nav.cjm .cjm-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;                 /* réglé à 57px auparavant dans une barre de 90px */
    z-index: 400;
    background: var(--cjm-paper);
    border-top: 1px solid var(--cjm-line);
    box-shadow: 0 24px 40px -26px rgba(14, 14, 19, .45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    /* visibility bascule d'un coup (0s), retardée à la fermeture : sinon le
       panneau reste non focusable pendant la transition. */
    transition: opacity .18s ease, transform .22s cubic-bezier(.2, .7, .3, 1), visibility 0s linear .18s;
    text-align: left;
}

#top-menu nav.cjm .cjm-top[aria-expanded="true"] + .cjm-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .18s ease, transform .22s cubic-bezier(.2, .7, .3, 1), visibility 0s linear 0s;
}

#top-menu nav.cjm .cjm-grid {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    max-width: 1320px;
    margin: 0 auto;
}

#top-menu nav.cjm .cjm-col { padding: 20px 24px 18px; }
#top-menu nav.cjm .cjm-col + .cjm-col { border-left: 1px solid var(--cjm-line); }

#top-menu nav.cjm .cjm-zone {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 11px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--cjm-ink-3);
}
#top-menu nav.cjm .cjm-zone::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--cjm-line);
}

#top-menu nav.cjm .cjm-sub {
    margin: 14px 0 7px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--cjm-ink-2);
}
#top-menu nav.cjm .cjm-sub:first-of-type { margin-top: 0; }

/* --- appareils --- */

#top-menu nav.cjm .cjm-devices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

#top-menu nav.cjm .cjm-dev {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--cjm-ink);
    text-decoration: none;
    transition: background .14s;
}
#top-menu nav.cjm .cjm-dev:hover { background: var(--cjm-violet-wash); }
#top-menu nav.cjm .cjm-dev .cjm-i { color: var(--cjm-violet); }
#top-menu nav.cjm .cjm-dev-t { display: flex; flex-direction: column; min-width: 0; }

#top-menu nav.cjm .cjm-dev .cjm-n {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
}

/* --- pannes --- */

#top-menu nav.cjm .cjm-faults {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px 6px;
}

#top-menu nav.cjm .cjm-fault {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 6px 9px;
    border-radius: 7px;
    font-size: 13px;
    color: var(--cjm-ink);
    text-decoration: none;
    transition: background .14s;
}
#top-menu nav.cjm .cjm-fault:hover { background: var(--cjm-wash); }
#top-menu nav.cjm .cjm-fault .cjm-i {
    width: 17px;
    height: 17px;
    color: var(--cjm-ink-3);
    transition: color .14s;
}
#top-menu nav.cjm .cjm-fault:hover .cjm-i { color: var(--cjm-violet); }
#top-menu nav.cjm .cjm-fault.cjm-expert .cjm-i { color: var(--cjm-gold); }
#top-menu nav.cjm .cjm-fault .cjm-n { line-height: 1.25; }

/* --- prix : violet, chiffres alignés --- */

#top-menu nav.cjm .cjm-p {
    font-size: 11px;
    font-weight: 600;
    color: var(--cjm-violet);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}
#top-menu nav.cjm .cjm-fault .cjm-p {
    margin-left: auto;
    padding-left: 8px;
    flex: none;
}

/* --- diagnostic & devis --- */

#top-menu nav.cjm .cjm-entries {
    display: grid;
    gap: 6px;
    margin-top: 14px;
}

#top-menu nav.cjm .cjm-entry {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--cjm-line);
    border-radius: 9px;
    background: var(--cjm-wash);
    color: var(--cjm-ink);
    text-decoration: none;
    transition: border-color .16s, background .16s;
}
#top-menu nav.cjm .cjm-entry:hover {
    border-color: var(--cjm-violet);
    background: var(--cjm-violet-wash);
}
#top-menu nav.cjm .cjm-entry .cjm-i {
    color: var(--cjm-violet);
    margin-top: 1px;
}
#top-menu nav.cjm .cjm-entry > span { min-width: 0; }
#top-menu nav.cjm .cjm-entry .cjm-n {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
#top-menu nav.cjm .cjm-entry .cjm-d {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--cjm-ink-2);
}

/* --- pied du panneau --- */

#top-menu nav.cjm .cjm-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 12px 24px;
    border-top: 1px solid var(--cjm-line);
    background: var(--cjm-wash);
}

#top-menu nav.cjm .cjm-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 18px;
}
#top-menu nav.cjm .cjm-tr {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--cjm-ink-2);
}
#top-menu nav.cjm .cjm-tr .cjm-i {
    width: 15px;
    height: 15px;
    color: var(--cjm-violet);
}
#top-menu nav.cjm .cjm-tr b { font-weight: 600; color: var(--cjm-ink); }

#top-menu nav.cjm .cjm-shops {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}
#top-menu nav.cjm .cjm-shop {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 11px;
    border: 1px solid var(--cjm-line);
    border-radius: 8px;
    background: var(--cjm-paper);
    color: var(--cjm-ink);
    text-decoration: none;
    transition: border-color .16s;
}
#top-menu nav.cjm .cjm-shop:hover { border-color: var(--cjm-violet); }
#top-menu nav.cjm .cjm-shop .cjm-i { width: 14px; height: 14px; color: var(--cjm-violet); }
#top-menu nav.cjm .cjm-shop > span { min-width: 0; }
#top-menu nav.cjm .cjm-a {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
}
#top-menu nav.cjm .cjm-h {
    display: block;
    margin-top: 1px;
    font-size: 10.5px;
    line-height: 1.2;
    color: var(--cjm-ink-3);
}
#top-menu nav.cjm .cjm-open { color: var(--cjm-green); font-weight: 600; }
#top-menu nav.cjm .cjm-closed { color: var(--cjm-ink-2); font-weight: 600; }

#top-menu nav.cjm .cjm-all {
    width: 100%;
    margin: 0;
    padding-top: 9px;
    border-top: 1px solid var(--cjm-line);
    text-align: right;
}
#top-menu nav.cjm .cjm-all a {
    font-size: 12px;
    font-weight: 600;
    color: var(--cjm-violet-deep);
    text-decoration: none;
}
#top-menu nav.cjm .cjm-all a:hover { text-decoration: underline; }

/* Voile sous le panneau ouvert. */
#top-menu .cjm-scrim {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 320px;
    z-index: 300;
    background: linear-gradient(rgba(14, 14, 19, .14), rgba(14, 14, 19, 0));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s, visibility .2s;
}
#top-menu.cjm-open .cjm-scrim { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
    #top-menu nav.cjm .cjm-panel,
    #top-menu nav.cjm .cjm-chev,
    #top-menu nav.cjm .cjm-top::after,
    #top-menu .cjm-scrim { transition: none; }
}

/* --------------------------------------------------------------------------
   Largeurs intermédiaires : le conteneur Bootstrap tombe à 1140px puis 960px
   alors que les neuf entrées en demandent 1196. On resserre par palier plutôt
   que de laisser la barre chevaucher les icônes de #tools.
   -------------------------------------------------------------------------- */

@media (max-width: 1399.98px) {
    #top-menu nav.cjm > ul.cjm-nav { padding-left: 8px; }
    #top-menu nav.cjm > ul > li > .cjm-top { padding: 0 7px; }
    #top-menu nav.cjm > ul > li > .cjm-top::after { left: 7px; right: 7px; }
    #top-menu nav.cjm #espacePro > .cjm-top { margin-left: 2px; padding: 0 9px; }
}

@media (max-width: 1199.98px) and (min-width: 992px) {
    #top-menu nav.cjm > ul.cjm-nav { padding-left: 0; }
    #top-menu nav.cjm > ul > li > .cjm-top { padding: 0 5px; font-size: 13px; gap: 4px; }
    #top-menu nav.cjm > ul > li > .cjm-top::after { left: 5px; right: 5px; }
    #top-menu nav.cjm #espacePro > .cjm-top { margin-left: 0; padding: 0 7px; }
    #top-menu #tools { padding-left: 18px; }
    #top-menu #tools li { padding-left: 18px; }
}

/* ==========================================================================
   3. Mobile — tiroir + accordéon
   Le sous-menu était masqué en dur par « nav ul ul{display:none!important} ».
   Le panneau est désormais un <div>, cette règle ne l'atteint plus.
   ========================================================================== */

@media (max-width: 991px) {

    /* margin-right: -100% débordait de 19px hors du viewport. */
    #top-menu { overflow-x: clip; }

    #top-menu nav.cjm {
        margin-right: 0 !important;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .28s cubic-bezier(.2, .7, .3, 1), visibility 0s linear .28s !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        height: 100%;
        padding: 20px 16px 32px !important;
    }
    #top-menu nav.cjm.active {
        transform: none;
        visibility: visible;
        transition: transform .28s cubic-bezier(.2, .7, .3, 1), visibility 0s linear 0s !important;
    }

    #top-menu nav.cjm > ul.cjm-nav {
        display: block;
        padding: 0 !important;
        flex: none;
    }

    #top-menu nav.cjm > ul > li {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        border-bottom: 1px solid var(--cjm-line);
    }
    #top-menu nav.cjm > ul > li:last-child { border-bottom: 0; }

    #top-menu nav.cjm > ul > li > .cjm-top {
        display: flex;
        width: 100%;
        min-height: 50px;
        padding: 0 4px;
        justify-content: flex-start;
        font-size: 15px;
        text-align: left;
    }
    #top-menu nav.cjm > ul > li > .cjm-top::after { display: none; }
    #top-menu nav.cjm .cjm-top .cjm-chev { margin-left: auto; }

    /* Le panneau redevient un bloc dans le flux : c'est l'accordéon. */
    #top-menu nav.cjm .cjm-panel {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        box-shadow: none;
        border-top: 0;
        background: var(--cjm-wash);
        border-radius: 9px;
        margin: 0 0 12px;
        transition: none;
    }
    #top-menu nav.cjm .cjm-top[aria-expanded="true"] + .cjm-panel { display: block; }

    #top-menu nav.cjm .cjm-grid { display: block; }
    #top-menu nav.cjm .cjm-col { padding: 12px 12px 4px; }
    #top-menu nav.cjm .cjm-col + .cjm-col { border-left: 0; border-top: 1px solid var(--cjm-line); }

    #top-menu nav.cjm .cjm-dev,
    #top-menu nav.cjm .cjm-fault {
        background: var(--cjm-paper);
        border: 1px solid var(--cjm-line);
        min-height: 48px;      /* cible tactile */
    }

    #top-menu nav.cjm .cjm-devices { gap: 6px; }
    #top-menu nav.cjm .cjm-faults { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }

    /* Le prix passe sous le libellé : les tuiles sont trop étroites au doigt. */
    #top-menu nav.cjm .cjm-fault { flex-wrap: wrap; padding: 8px 10px; }
    #top-menu nav.cjm .cjm-fault .cjm-n { flex: 1 1 0; min-width: 0; }
    #top-menu nav.cjm .cjm-fault .cjm-p { flex: 1 0 100%; margin-left: 0; padding-left: 25px; }

    #top-menu nav.cjm .cjm-foot {
        display: block;
        padding: 12px;
        background: transparent;
    }
    #top-menu nav.cjm .cjm-shops { margin: 8px 0 0; }
    #top-menu nav.cjm .cjm-shop { width: 100%; }
    #top-menu nav.cjm .cjm-all { text-align: left; }

    #top-menu .cjm-scrim { display: none; }
}

@media (max-width: 340px) {
    #top-menu nav.cjm .cjm-devices,
    #top-menu nav.cjm .cjm-faults { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   4. Neutralisation du CSS additionnel du Customizer

   Apparence > Personnaliser > CSS additionnel contient quatre règles écrites
   pour l'ancien menu, quand chaque entrée était un <a> :

       header nav ul li a         { color:#000 !important; font-size:1rem !important; … }
       header nav ul li a::before { … barre violette 2px … }
       header nav ul li a:hover::before { width:70% !important }
       header nav ul li a:hover   { color:#A22CFF !important }

   Elles s'appliquent aujourd'hui à TOUS les liens du panneau : texte forcé en
   noir, chips de panne à 16px au lieu de 13, et un soulignement parasite au
   survol de chaque tuile. Le vrai correctif est de porter ces règles sur les
   entrées de premier niveau uniquement — voir la note de livraison. En
   attendant, on les désamorce ici.
   ========================================================================== */

#top-menu nav.cjm a::before,
#top-menu nav.cjm a:hover::before {
    content: none !important;
    display: none !important;
}

/* Barre principale : les <a> doivent s'aligner sur le <button> « Réparer ». */
#top-menu nav.cjm > ul > li > a.cjm-top {
    font-size: 14px !important;
    color: var(--cjm-ink) !important;
}
#top-menu nav.cjm > ul > li > a.cjm-top:hover {
    color: var(--cjm-violet-deep) !important;
}
#top-menu nav.cjm #espacePro > .cjm-top,
#top-menu nav.cjm #espacePro > .cjm-top:hover {
    color: var(--cjm-violet-deep) !important;
}

/* Panneau : le survol se marque par le fond, pas par la couleur du texte. */
#top-menu nav.cjm .cjm-panel a,
#top-menu nav.cjm .cjm-panel a:hover {
    color: var(--cjm-ink) !important;
}
#top-menu nav.cjm .cjm-dev,
#top-menu nav.cjm .cjm-entry { font-size: 13px !important; }
#top-menu nav.cjm .cjm-fault { font-size: 13px !important; }
#top-menu nav.cjm .cjm-shop  { font-size: 12px !important; }
#top-menu nav.cjm .cjm-all a,
#top-menu nav.cjm .cjm-all a:hover {
    font-size: 12px !important;
    color: var(--cjm-violet-deep) !important;
}

@media (max-width: 1199.98px) and (min-width: 992px) {
    #top-menu nav.cjm > ul > li > a.cjm-top { font-size: 13px !important; }
}