/**
 * Mise en page du panneau du méga-menu — a4w_megamenu.
 *
 * POURQUOI UNE FEUILLE SÉPARÉE
 *
 * `a4w_megamenu.css` fait 990 lignes, contient 39 `!important`, déclare `.menu-item`
 * à trois endroits et possède DEUX mécanismes concurrents de séparation de colonnes.
 * Y ajouter des règles revenait à empiler des correctifs qui se faisaient écraser :
 * chaque retouche corrigeait un symptôme et en créait un autre.
 *
 * Cette feuille est chargée APRÈS. Elle ne modifie pas l'héritage — couleurs, survols,
 * transitions du thème restent ceux de la feuille d'origine. Elle reprend uniquement
 * la MISE EN PAGE des lignes et des colonnes, en un bloc cohérent et à spécificité
 * uniforme.
 *
 * Les `!important` qu'on trouve ici ne sont pas un choix de confort : ils répondent
 * aux `!important` de la feuille d'origine (`.dropdown-menu2 a { padding: … !important }`),
 * qu'on ne peut pas battre autrement sans réécrire cette feuille.
 *
 * LE GABARIT
 *
 *     [ gouttière icône ] [ libellé (+ sous-titre) ] [ compteur ] [ chevron ]
 *
 * La gouttière et la colonne de chevron ont une largeur FIXE et existent même quand
 * la ligne n'a ni icône ni chevron. C'est ce qui aligne les libellés entre eux : le
 * décalage venait de l'absence de gouttière, pas d'un réglage à ajuster.
 */

.a4w-megamenu {
    --a4wmm-thumb: 36px;          /* vignette de rayon, niveau 1 */
    --a4wmm-icon: 24px;           /* icône de catégorie, niveaux suivants */
    --a4wmm-gap: 14px;            /* entre gouttière et libellé */
    --a4wmm-chevron: 16px;        /* colonne de chevron, toujours réservée */
    --a4wmm-col-pad: 20px;        /* respiration de part et d'autre du filet */
    --a4wmm-row-y: 10px;
    --a4wmm-indent: 18px;         /* retrait d'un niveau, mode vertical */
}

/* ==================================================================== *
 * 1. Neutralisation ciblée, dans le périmètre du panneau uniquement
 * ==================================================================== */

/* La feuille d'origine impose `padding: 10px 15px !important` à tous les liens du
   panneau, et `padding-left: 20px !important` au survol — d'où un décalage
   horizontal au passage de la souris. On reprend la main sur le seul padding. */
.a4w-megamenu .dropdown-menu2 .menu-item > a,
.a4w-megamenu .mega-menu-column .menu-item > a {
    padding: var(--a4wmm-row-y) 8px !important;
}

.a4w-megamenu .dropdown-menu2 .menu-item > a:hover,
.a4w-megamenu .mega-menu-column .menu-item > a:hover {
    padding-left: 8px !important;
}

/* `.menu-item` est déclaré `display:flex; justify-content:space-between` à deux
   endroits. La grille reprend la main ici, une fois pour toutes.

   UNIQUEMENT dans la cascade horizontale. Là, `.menu-item` est un `<li>` qui
   contient un lien et, au plus, un chevron : deux cellules, deux pistes. En
   vertical, le MÊME `.menu-item` contient un titre de rayon ET toute la liste de
   ses sous-catégories — cette liste partait donc dans la piste de 16 px réservée
   au chevron, qui n'existe même pas dans ce mode. Le bloc 6 lui rend son flux. */
.a4w-megamenu .mega-menu-row:not(.vertical) .mega-menu-column .menu-item {
    display: grid;
    grid-template-columns: 1fr var(--a4wmm-chevron);
    align-items: center;
    column-gap: 4px;
    margin-bottom: 0;
}

/* ==================================================================== *
 * 2. Le gabarit de ligne
 * ==================================================================== */

/* La chaîne ul → li → a doit porter la largeur de la colonne EXPLICITEMENT.
 *
 * Sans ça, chaque maillon se dimensionne sur son contenu, la piste `1fr` du lien
 * se calcule sur la largeur minimale du texte, et le libellé casse à chaque
 * espace : « Gâteaux / & / pâtisseries ». Ce n'était pas un problème de coupure
 * — `break-word` n'y changeait rien — mais d'absence de largeur.
 *
 * `minmax(0, 1fr)` plutôt que `1fr` : une piste `1fr` a un minimum implicite de
 * `auto`, c'est-à-dire la largeur minimale du contenu, et refuse donc de se
 * réduire sous cette valeur. */
.a4w-megamenu .mega-menu-column > ul,
.a4w-megamenu .mega-menu-column .menu-item {
    width: 100%;
}

/* `:has(.menu-item-label)` n'est pas un ornement : c'est un garde-fou.
 *
 * Dans une ancre en grille, un texte brut forme un élément de grille anonyme,
 * placé dans la PREMIÈRE piste — celle des 24 px réservés à l'icône. Une ancre
 * sans `<span class="menu-item-label">` voyait donc son libellé écrasé dans la
 * gouttière et cassé à chaque espace, alors que la colonne faisait 400 px.
 * C'est ce qui arrivait aux niveaux 3 à 5.
 *
 * Les gabarits émettent tous le libellé désormais ; la garde fait que si l'un
 * d'eux l'oublie un jour, la ligne retombe simplement en flux normal — moins
 * bien alignée, mais lisible. */
.a4w-megamenu .mega-menu-column .menu-item > a:has(.menu-item-label) {
    display: grid;
    grid-template-columns: var(--a4wmm-icon) minmax(0, 1fr) auto;
    column-gap: var(--a4wmm-gap);
    align-items: center;
    width: 100%;
    min-width: 0;
    border-left: 0;
    text-decoration: none;
}

/* Une colonne sans la moindre icône n'a pas besoin de gouttière : elle la
   referme. Les libellés restent alignés entre eux — c'était le but — sans
   payer 38 px de retrait pour une colonne où il n'y a rien à aligner.
   Redéfinir les variables sur la colonne suffit : la grille comme la largeur
   du logement les lisent toutes deux. Le niveau 1 garde sa vignette, qui
   dépend de `--a4wmm-thumb` et sert de repère même vide. */
.a4w-megamenu .mega-menu-column:not(:has(.menu-item-icon)) {
    --a4wmm-icon: 0px;
    --a4wmm-gap: 0px;
}

.a4w-megamenu .menu-item-icon-slot {
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--a4wmm-icon);
    height: var(--a4wmm-icon);
}

.a4w-megamenu .menu-item-icon {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin: 0;
}

.a4w-megamenu .menu-item-label {
    grid-column: 2;
    min-width: 0;
    overflow-wrap: break-word;
    line-height: 1.35;
}

/* Le sous-titre passe sous le libellé, dans la même colonne de grille. */
.a4w-megamenu .menu-item-subtitle {
    grid-column: 2;
    display: block;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--a4w-mm-text-muted, #6b7280);
    font-weight: 400;
    margin-top: 2px;
}

.a4w-megamenu .menu-item-count {
    grid-column: 3;
    font-size: 0.6875em;
    line-height: 1;
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
    top: -0.4em;
}

/* Le chevron a sa colonne réservée sur le `<li>` : présent ou non, la largeur ne
   change pas, donc les libellés d'une même liste restent alignés. */
.a4w-megamenu .mega-menu-column .menu-item > .chevron {
    grid-column: 2;
    justify-self: end;
    margin: 0;
    opacity: 0.45;
    font-size: 0.875rem;
    line-height: 1;
}

/* ==================================================================== *
 * 3. Ce qui change d'un niveau à l'autre
 *
 * C'est cette variation qui donne au menu sa hiérarchie de lecture. Le
 * gabarit, lui, reste le même partout.
 * ==================================================================== */

/* --- Niveau 1 : les rayons ------------------------------------------ */

/* Le `:has()` est ici une question de POIDS, pas de garde.
 *
 * La règle de base porte `:has(.menu-item-label)`, et la spécificité de `:has()`
 * est celle de son argument : elle pèse donc 0,4,1. Sans le même `:has()` ici,
 * cette règle-ci ne pèse que 0,3,2 et se fait battre — la piste retombait sur
 * `--a4wmm-icon`, ramenée à 0 par la règle « colonne sans icône », pendant que
 * la vignette gardait ses 36 px et débordait sous le libellé. */
.a4w-megamenu .mega-menu-level-2 > ul > .menu-item > a:has(.menu-item-label) {
    grid-template-columns: var(--a4wmm-thumb) minmax(0, 1fr) auto;
    column-gap: 16px;
    padding-block: 12px !important;
}

.a4w-megamenu .mega-menu-level-2 > ul > .menu-item .menu-item-icon-slot {
    width: var(--a4wmm-thumb);
    height: var(--a4wmm-thumb);
    border-radius: 8px;
    /* Le fond gris clair tient lieu de repère tant qu'aucune image n'est déposée,
       et l'alignement ne bouge pas le jour où on en ajoute une. */
    background: var(--a4w-mm-hover-bg, #eef0f4);
}

.a4w-megamenu .mega-menu-level-2 > ul > .menu-item .menu-item-icon {
    width: 24px;
    height: 24px;
}

.a4w-megamenu .mega-menu-level-2 > ul > .menu-item .menu-item-label {
    font-weight: 700;
    font-size: 0.9375rem;
}

/* --- Niveaux suivants : catégories et sous-catégories ---------------- */

/* Toutes les colonnes de sous-menu, à toute profondeur (1.15.0). Les règles
   visaient `mega-menu-level-3` à `-5` : un menu détaillé qui descendait plus bas
   perdait ces réglages à partir de la colonne `level-6`. `.submenu` est porté
   par toutes les colonnes de la cascade, et par elles seules (pas le niveau 2).
   Poids 0,4,1 : l'en-tête de colonne du bloc 7 (0,5,1) garde sa graisse. */
.a4w-megamenu .submenu > ul > .menu-item .menu-item-label {
    font-weight: 400;
}

/* Lignes resserrées à partir de la deuxième colonne de la cascade ; la colonne
   `level-3` (blocs enfants d'un bloc) garde l'aération du niveau 2. */
.a4w-megamenu .submenu:not(.mega-menu-level-3) > ul > .menu-item > a {
    padding-block: 6px !important;
}

/* ==================================================================== *
 * 4. En-têtes de section — « NOS RAYONS », « LES CATÉGORIES »
 * ==================================================================== */

.a4w-megamenu .mega-menu-column .mg-title-parent {
    display: block;
    margin: 0;
}

.a4w-megamenu .mg-title,
.a4w-megamenu .mg-title-parent > .mg-title {
    display: block;
    width: 100%;
    padding: 0 8px 6px !important;
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--a4w-mm-text-muted, #6b7280);
    opacity: 0.75;
    text-decoration: none;
    cursor: default;
    border-left: 0;
}

/* Le titre coiffe ses entrées : le rapprochement se fait sous le titre. La première
   entrée garde le padding de ses voisines ; réduire son `padding-top` raccourcissait
   sa zone de survol et décentrait son libellé par rapport au fond et au chevron. */
.a4w-megamenu .mg-title-parent > .mg-title {
    padding-bottom: 0 !important;
}

/* ==================================================================== *
 * 5. Colonnes
 *
 * UN SEUL mécanisme de séparation. La feuille d'origine dessine déjà un
 * filet en `::before` sur `.mega-menu-column + .mega-menu-column` ; on
 * s'appuie dessus et on ne fait que régler la respiration autour. Ajouter
 * un `border-left` par-dessus donnait deux traits et un vide entre eux.
 * ==================================================================== */

/* La feuille d'origine dessinait DEUX séparateurs différents : un `border-right`
 * (avec ses marges) sur toute colonne contenant des entrées à enfants, et un
 * trait en `::before` sur chaque colonne qui en suit une autre. Une colonne à
 * enfants suivie d'une autre en affichait donc deux, séparés par un grand vide.
 *
 * Le `border-right` a été retiré de `a4w_megamenu.css` en 1.15.0 (sa règle
 * `:has()` n'était pas scopée, et n'existait que pour être neutralisée ici). Il
 * reste le `::before`, qui est le mécanisme correct : il ne dépend pas du
 * contenu de la colonne. Ce bloc neutralise encore le `padding-right: 15px` que
 * la feuille d'origine pose sur les colonnes de la cascade. */
.a4w-megamenu .mega-menu-row .mega-menu-column {
    border-right: 0;
    padding-right: 0 !important;
    margin-right: 0;
}

/* Un seul écart, posé d'un seul côté : la marge écarte la colonne, le padding
   décale le contenu du trait. Le trait tombe entre les deux. */
.a4w-megamenu .mega-menu-row > .mega-menu-column + .mega-menu-column {
    padding-left: var(--a4wmm-col-pad);
    margin-left: var(--a4wmm-col-pad);
}


/* La colonne doit tenir son libellé le plus long sans le casser mot à mot.
   `min-width` seul ne suffit pas : c est la largeur MINIMALE INTRINSÈQUE du
   contenu qui décide, et `overflow-wrap: anywhere` la réduisait à néant. */
.a4w-megamenu .mega-menu-row:not(.vertical) > .mega-menu-column {
    min-width: 240px;
    max-width: 420px;
    /* `flex: 1 1 240px` et non `0 1 auto` : la colonne doit prendre sa part de
       la place disponible, pas se rétracter sur la largeur minimale de son
       contenu — c est ce qui écrasait les libellés. */
    flex: 1 1 240px;
}

/* Largeur fixe (réglage « Largeur des colonnes », 1.17.0). En automatique, l'ouverture
   d'un niveau 3 ou 4 ajoute une colonne et la place se redistribue : les colonnes déjà
   ouvertes changent de largeur sous la souris. Fixées, elles ne bougent plus ; elles ne
   rétrécissent que si le panneau manque vraiment de place. Les colonnes suivantes
   ajoutent la respiration du filet (padding inclus dans la largeur) : toutes gardent
   la même largeur de contenu. */
.a4w-megamenu.a4w-megamenu--fixed-cols .mega-menu-row:not(.vertical) > .mega-menu-column {
    flex: 0 1 var(--a4wmm-col-width, 240px);
    width: var(--a4wmm-col-width, 240px);
    min-width: 0;
    max-width: none;
}

.a4w-megamenu.a4w-megamenu--fixed-cols .mega-menu-row:not(.vertical) > .mega-menu-column + .mega-menu-column {
    flex-basis: calc(var(--a4wmm-col-width, 240px) + var(--a4wmm-col-pad, 20px));
    width: calc(var(--a4wmm-col-width, 240px) + var(--a4wmm-col-pad, 20px));
}

/* En vertical, une colonne n'est pas un niveau de cascade qui apparaît au survol :
   c'est une colonne du panneau, fixée au back-office. Elles se partagent donc la
   largeur à parts égales. Avec le `max-width: 420px` de la cascade, un menu à une
   seule colonne — le cas courant — laissait les deux tiers du panneau vides. */
.a4w-megamenu .mega-menu-row.vertical > .mega-menu-column {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
}

.a4w-megamenu .mega-menu-column > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Une colonne dont la liste est vide ne doit ni s'afficher ni poser son filet.
   `a` en plus de `.menu-item` : en vertical, un bloc « lien libre » émet une ancre
   nue, sans `.menu-item` autour. La colonne qui n'en contenait qu'un disparaissait
   entièrement. */
.a4w-megamenu .mega-menu-row > .mega-menu-column:not(:has(.menu-item, a)) {
    display: none;
}

/* ==================================================================== *
 * 6. Mode vertical — le panneau à colonnes du bureau
 *
 * Rien ne s'y déplie au survol : les colonnes sont celles réglées au
 * back-office et tout leur contenu est visible d'emblée. La hiérarchie ne
 * se lit donc pas d'une colonne à l'autre, comme dans la cascade, mais par
 * le RETRAIT — un cran par niveau, dans la même colonne.
 * ==================================================================== */

/* La grille du bloc 2 est réservée à la cascade (voir son commentaire). Ici,
   `.menu-item` est un GROUPE : un titre de rayon suivi de la liste de ses
   sous-catégories. Il coule de haut en bas, ses enfants sur toute la largeur.
   `display: block` et non `flex` : la feuille d'origine posait un
   `align-items: flex-start` qui rétractait la liste sur la largeur de son plus
   long libellé, d'où des fonds de survol qui s'arrêtaient au milieu. */
.a4w-megamenu .mega-menu-row.vertical .menu-item,
.a4w-megamenu .mega-menu-row.vertical .category-group {
    display: block;
    width: 100%;
}

.a4w-megamenu .subcategory-list,
.a4w-megamenu .category-group {
    padding-left: 0;
    margin-left: 0;
}

/* Même garde qu'au bloc 2 : sans libellé, pas de grille — sinon le texte brut
   part dans la gouttière de 24 px et se casse à chaque espace. */
.a4w-megamenu .subcategory-list > a:has(.menu-item-label),
.a4w-megamenu .category-group > a:has(.menu-item-label) {
    display: grid;
    grid-template-columns: var(--a4wmm-icon) minmax(0, 1fr) auto;
    column-gap: var(--a4wmm-gap);
    align-items: center;
    width: 100%;
    padding: var(--a4wmm-row-y) 8px !important;
}

/* Un cran de retrait par niveau, et un seul : la feuille d'origine cumulait
   padding-left et margin-left à plusieurs endroits, d'où des décalages qui
   s'additionnaient de niveau en niveau. Les listes sont imbriquées dans le DOM :
   le retrait s'additionne de lui-même, il n'y a pas de règle par profondeur.
 *
 * Le cran a sa PROPRE variable. Adossé à `--a4wmm-icon` comme il l'était, il
 * tombait à zéro dans une colonne sans icône — le cas courant — et tous les
 * niveaux se retrouvaient alignés sur la même verticale, alors que le retrait est
 * ici le seul marqueur de hiérarchie : le mode vertical n'a pas de cascade pour
 * la porter. Les paddings par niveau de la feuille d'origine, eux, sont neutralisés
 * par le gabarit de ligne ci-dessus. */
.a4w-megamenu .mega-menu-row.vertical .subcategory-list {
    margin-left: var(--a4wmm-indent);
}

@media (prefers-reduced-motion: reduce) {
    .a4w-megamenu * {
        transition-duration: 0.01ms;
    }
}

/* ==================================================================== *
 * 7. Rappel de la catégorie parente en tête de colonne
 *
 * Distinct de l'en-tête de section du bloc 4 : celui-ci coiffe une liste
 * d'entrées sans rapport de parenté (« NOS RAYONS »), celui-là nomme la
 * catégorie dont la colonne montre les enfants — et reste un lien vers
 * elle. Il reprend donc le gabarit d'une entrée normale, gouttière
 * d'icône comprise, pour rester aligné sur ce qu'il coiffe ; seuls la
 * graisse, la couleur et le filet le distinguent.
 * ==================================================================== */

.a4w-megamenu .mega-menu-column .menu-item.mega-menu-column-header {
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--a4w-mm-border, #e8e8e8);
}

.a4w-megamenu .mega-menu-column .menu-item.mega-menu-column-header > a {
    color: var(--a4w-mm-text-muted, #6b7280);
}

.a4w-megamenu .mega-menu-column .menu-item.mega-menu-column-header > a:hover {
    color: var(--a4w-mm-text, #000000);
}

/* Le libellé porte la graisse, pas la ligne — et c'est une question de POIDS,
   pas de style. Le sélecteur des colonnes de sous-menu remet `font-weight: 400`
   sur `.menu-item-label` (bloc 3) et pèse 0,4,1 : une règle plus légère se
   faisait battre, et l'en-tête gardait la graisse d'une entrée ordinaire.
   Celle-ci pèse 0,5,1 et l'emporte sans `!important`. */
.a4w-megamenu .mega-menu-column .menu-item.mega-menu-column-header > a .menu-item-label {
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Flèche de retour, purement décorative : elle dit d'où vient la colonne et
   n'a donc pas à être lue à voix haute — d'où le CSS plutôt que le gabarit. */
.a4w-megamenu .mega-menu-column-header .menu-item-label::before {
    content: "\2039";
    margin-right: 6px;
    opacity: 0.6;
}

/* La colonne n'a pas à réserver sa gouttière d'icône pour ce seul en-tête :
   la règle « colonne sans icône » du bloc 2 regarde `.menu-item-icon`, que
   l'en-tête n'émet que si la catégorie parente en a une. Rien à ajouter. */

/* ==================================================================== *
 * 8. Icônes désactivées (réglage « Afficher les icônes de catégories »)
 *
 * Les gabarits n'émettent plus l'emplacement d'icône, mais la grille de
 * ligne réservait toujours sa piste : au niveau 1, la vignette de 36 px et
 * son fond coloré restaient à l'écran, carrés vides devant chaque rayon.
 * La racine du menu porte `a4w-megamenu--no-icons` : les trois largeurs
 * tombent à zéro, et le libellé se cale sur le bord de la colonne.
 * ==================================================================== */

.a4w-megamenu.a4w-megamenu--no-icons {
    --a4wmm-thumb: 0px;
    --a4wmm-icon: 0px;
    --a4wmm-gap: 0px;
}

/* 0,5,2 : bat le gabarit de rayon du bloc 3 (0,4,2), qui pose 16 px d'écart. */
.a4w-megamenu.a4w-megamenu--no-icons .mega-menu-level-2 > ul > .menu-item > a:has(.menu-item-label) {
    column-gap: 0;
}