/**
 * Mega menu Produits - fichier CSS statique, volontairement HORS pipeline
 * Sass/Grunt (pas de watch actif en prod) pour rester déployable directement.
 *
 * Principe anti-jump : dans les colonnes niveau 2 et 3, tous les panneaux
 * sont empilés sur la même cellule de grille CSS (grid-area partagée).
 * Le conteneur adopte donc automatiquement la hauteur du panneau visible,
 * sans hauteur codée en dur et sans recalcul JS.
 */

.kc-megamenu-produits {
    display: flex;
    align-items: flex-start;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.kc-megamenu-col {
    padding: 15px;
    border-right: 1px solid rgba(0, 0, 0, .15);
    width: 250px;
    box-sizing: border-box;
}

.kc-megamenu-col--niveau2,
.kc-megamenu-col--niveau3 {
    display: grid;
    transition: width .15s ease;
}

/* Colonne sans aucun panneau visible (rien survolé, ou branche/page sans
   enfants) : on la réduit entièrement plutôt que de laisser un pavé blanc
   de 250px avec une bordure qui ne sépare plus rien. */
.kc-megamenu-col--niveau2.is-empty,
.kc-megamenu-col--niveau3.is-empty {
    width: 0;
    padding: 0;
    border-right: none;
    overflow: hidden;
}

.kc-megamenu-produits h3 {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #000;
}

.kc-megamenu-liens-parent {
    display: flex;
    flex-direction: column;
}

.kc-lien-parent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-size: 15px;
    padding: 10px 0;
    font-weight: 500;
    transition: color .2s ease;
}

.kc-lien-parent:hover,
.kc-lien-parent.is-active {
    color: #000;
    font-weight: 700;
}

.kc-panel,
.kc-subpanel {
    display: none;
    grid-area: 1 / 1;
}

.kc-panel.is-visible,
.kc-subpanel.is-visible {
    display: block;
}

.kc-megamenu-liste {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kc-megamenu-liste li {
    margin-bottom: 12px;
}

.kc-megamenu-liste a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: #444;
    font-size: 14px;
    transition: color .2s ease;
}

.kc-megamenu-liste a:hover,
.kc-megamenu-liste a.is-active {
    color: #000;
    font-weight: 600;
}