/**
 * KOAPRINT — MÉGA-MENU : SURCOUCHE v2
 * Créé le 13/08/2026 après remise à plat complète.
 *
 * POURQUOI CE FICHIER EXISTE
 * Au cours du 13/08, quatorze blocs de correctifs ont été empilés directement dans
 * koaprint-megamenu.css. Ils se contredisaient (trois hauteurs de pilule concurrentes,
 * deux gouttières, un overflow:hidden qui coupait les compteurs), et une règle morte du
 * 10/08 — width:1120px !important — se battait en permanence contre le JS.
 * Antony : « clean tout, et pars sur des bases saines pour modifier à souhait sans
 * complication ».
 *
 * RÈGLE D'OR DÉSORMAIS
 * koaprint-megamenu.css et koaprint-megamenu.js sont la BASE DU THÈME : on n'y touche plus.
 * Toute évolution du méga-menu se fait ici (présentation) et dans koaprint-megamenu-fix.js
 * (comportement). Pour tout désactiver, il suffit de retirer ces deux fichiers de la file
 * d'attente dans functions.php — le menu d'origine revient intact.
 *
 * Chargé APRÈS koaprint-megamenu.css : à spécificité égale, ce fichier gagne.
 */

@media (min-width: 1025px) {

/* ---------------------------------------------------------------------------
 * 1. PLEINE LARGEUR
 * Le panneau va d'un bord à l'autre de la fenêtre. Sa position horizontale est
 * calculée en JS : le CSS ne peut pas connaître la position du conteneur Elementor
 * parent, qui sert d'origine au `left`.
 * La largeur fixe de 1120px héritée du thème est neutralisée ici, y compris sur les
 * variantes de panneau, qui sont plus spécifiques.
 * ------------------------------------------------------------------------ */
.koa-megamenu-panel,
.koa-megamenu-panel.koa-mm-panel--wide,
.koa-megamenu-panel.koa-mm-panel--flat,
.koa-megamenu-panel.koa-mm-panel--realisations {
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Le contenu reste borné et centré : sur un écran très large, une ligne de 2000px
 * ne se lit pas. */
/* Le padding-haut de 28 px creait une bande blanche entre la barre de navigation et la
 * colonne grise des familles : mesure de 29 px, visible comme une coupure. On le retire
 * en haut et on le rend aux colonnes, qui gardent leur respiration interne. */
.koa-megamenu-panel > .koa-mm-volets,
.koa-megamenu-panel > .koa-mm-real-grille {
    max-width: calc(100vw - 48px);   /* plus de plafond : sur un 1920 et au-dela, le contenu restait borne a 1560 et laissait deux bandes vides (Antony, 14/08) */
    margin-left: auto;
    margin-right: auto;
    padding: 0 40px 26px;   /* 40px laissait trop de blanc sous le contenu le plus court */
    gap: 40px;
    align-items: flex-start;
}

/* La colonne des familles monte jusqu'au bord du panneau : plus de coupure.
 * Elle ne descend PAS au-delà de sa dernière entrée : son aplat gris laissait un moignon
 * vide sous « Foulards », suivi d'une grande zone blanche avant la bande de réassurance
 * (constat d'Antony, capture du 13/08). height:fit-content la fait s'arrêter net. */
.koa-megamenu-panel .koa-mm-familles {
    padding-top: 14px;
    padding-bottom: 14px;
    height: fit-content;
    align-self: flex-start;
}

/* Le volet droit garde sa respiration. */
.koa-megamenu-panel .koa-mm-contenu { padding-top: 22px; }

/* ---------------------------------------------------------------------------
 * 2. COLONNE DES FAMILLES
 * 336px : dimensionné sur le cas limite du site, l'univers Objets
 * (« Gourmandises & chocolats » + compteur à trois chiffres + chevron).
 * z-index : le volet droit débordait par-dessus la colonne et RECOUVRAIT les
 * compteurs des catégories sans sous-catégorie — mesuré le 13/08 :
 * elementFromPoint renvoyait `koa-mm-prod` au centre du compteur de « Polos ».
 * ------------------------------------------------------------------------ */
.koa-megamenu-panel .koa-mm-familles {
    position: relative;
    z-index: 2;
    flex: 0 0 336px;
    width: 336px;
    min-width: 336px;
    box-sizing: border-box;
}

.koa-megamenu-panel .koa-mm-fam {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px 10px 14px;
    box-sizing: border-box;
    font-size: 14.5px;
    cursor: pointer;
}

.koa-megamenu-panel .koa-mm-fam .koa-mm-picto { flex: 0 0 auto; }

/* Le libellé absorbe TOUTE la variation de longueur. S'il doit être coupé, il l'est
 * à l'ellipse — la fin d'un mot se devine. */
.koa-megamenu-panel .koa-mm-fam .koa-mm-lbl {
    flex: 1 1 auto;
    min-width: 0;
}

/* PAS DE COMPTEUR SUR LA COLONNE DES FAMILLES — décision d'Antony, 13/08/2026 :
 * « on ne met pas de chiffre sur la barre principale du menu, uniquement dans les bulles
 * et les cartes du sous-menu, ce sera plus clean ».
 *
 * C'est le bon arbitrage, et il supprime la cause au lieu de la corriger : l'alignement
 * de ces compteurs a produit trois bugs successifs le 13/08 (nombres non alignés car
 * suivant la fin du libellé, chiffres tronqués sur les libellés longs de l'univers
 * Objets, et compteurs recouverts par le volet droit sur les familles sans chevron).
 *
 * Sur le fond : un compteur sert à arbitrer AU MOMENT DU CHOIX. Comparer « Sacs à dos 27 »
 * à « Tote bags 15 » aide à décider ; comparer « Vêtements 300 » à « Objets 400 » n'aide
 * personne — à ce niveau on choisit un univers, pas un volume. Le chiffre reste donc là
 * où il travaille : les pilules de sous-catégories et la carte de fin de grille.
 *
 * Le libellé récupère toute la largeur et n'a plus besoin d'ellipse. */
.koa-megamenu-panel .koa-mm-fam .koa-mm-nb { display: none; }

.koa-megamenu-panel .koa-mm-fam .koa-mm-fl { flex: 0 0 auto; margin-left: auto; width: 12px; }

/* ---------------------------------------------------------------------------
 * 3. VOLET DROIT
 * ------------------------------------------------------------------------ */
.koa-megamenu-panel .koa-mm-contenu {
    min-width: 0;
    overflow: visible;
}

/* « Voir tout » collé au titre : il prolonge l'intitulé de la famille, il ne termine
 * pas le panneau. Repoussé au bord (space-between), il se retrouvait à un mètre de son
 * titre sur un écran large. */
.koa-megamenu-panel .koa-mm-entete {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 14px;
    margin: 0 0 20px;
    padding-bottom: 14px;
}

.koa-megamenu-panel .koa-mm-entete > h3 { flex: 0 0 auto; margin: 0; font-size: 19px; }

.koa-megamenu-panel .koa-mm-entete-voirtout {
    flex: 0 0 auto;
    color: #0f544d;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.koa-megamenu-panel .koa-mm-entete-voirtout::after { content: " \2192"; }
.koa-megamenu-panel .koa-mm-entete-voirtout:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
 * 4. SOUS-CATÉGORIES EN PILULES
 * Largeurs VARIABLES à dessein. Les uniformiser mettrait « Sacs à dos » à la largeur de
 * « Pochettes ordinateur » : du vide dans les courtes, de la troncature dans les longues,
 * et la perte de la reconnaissance de forme du mot — ce qui permet de repérer une
 * étiquette sans la lire entièrement. C'est la HAUTEUR qu'on régularise.
 * ------------------------------------------------------------------------ */
/* Mesure du 13/08 : le theme imposait column-gap:44px et row-gap:2px — des espaces
 * horizontaux enormes et des lignes collees, exactement l'inverse de ce qu'il faut.
 * Sa regle etant plus specifique, il faut !important ici. La gouttiere verticale reste
 * plus large que l'horizontale : c'est ce qui fait lire des LIGNES plutot qu'un bloc. */
.koa-megamenu-panel .koa-mm-grille {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    row-gap: 12px !important;
    column-gap: 8px !important;
    margin-bottom: 26px;
    max-width: 100%;
}

/* Fond BLANC sur bordure nette plutot que gris pale sur gris pale : les pilules
 * ressortaient a peine du fond du panneau (« les bulles sont pas ouf »). Le blanc les
 * detache, la bordure les dessine, et le texte gagne en contraste.
 * La transition rend le survol franc au lieu de brutal. */
.koa-megamenu-panel .koa-mm-lien {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: auto;
    height: 38px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid #cbdcd6;
    border-radius: 999px;
    background: #f2f7f5;   /* teinte legere : sur le panneau blanc, un fond blanc les rendait invisibles */
    color: #14312c;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

/* La puce décorative ferait doublon avec le contour de la pilule. */
.koa-megamenu-panel .koa-mm-lien::before { display: none; }

.koa-megamenu-panel .koa-mm-lien:hover,
.koa-megamenu-panel .koa-mm-lien:focus-visible {
    background: #0f544d;
    border-color: #0f544d;
    color: #fff;
}

.koa-megamenu-panel .koa-mm-lien .koa-mm-nb {
    flex: 0 0 auto;
    width: auto;
    color: #8b979d;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.koa-megamenu-panel .koa-mm-lien:hover .koa-mm-nb,
.koa-megamenu-panel .koa-mm-lien:focus-visible .koa-mm-nb { color: rgba(255,255,255,.78); }

/* ---------------------------------------------------------------------------
 * 5. VIGNETTES PRODUIT + 5e CELLULE
 * Quatre produits et une carte « Voir toute la catégorie », sur une grille de cinq.
 * La carte est le lien du thème, DÉPLACÉ ici par le JS (pas cloné) : le href reste
 * celui du thème et aucun doublon n'est possible.
 * ------------------------------------------------------------------------ */
.koa-megamenu-panel .koa-mm-prods {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.koa-megamenu-panel .koa-mm-prod-nom {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 10px;
    min-height: 2.9em;
    font-size: 13.5px;
    line-height: 1.45;
    color: #3d4a52;
}

/* ---------------------------------------------------------------------------
 * 6. NOS RÉALISATIONS
 * Six par ligne : c'est une galerie, la quantité fait la preuve.
 * ------------------------------------------------------------------------ */
.koa-mm-panel--realisations .koa-mm-real-grille,
.koa-mm-panel--realisations .koa-mm-prods {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.koa-mm-panel--realisations .koa-mm-real-vign img,
.koa-mm-panel--realisations img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
}

/* ---------------------------------------------------------------------------
 * 7. BANDE DU BAS — SUPPRIMÉE
 * Antony, 13/08 : « dégage le truc en bas, c'est naze ». Elle faisait triple emploi
 * avec la carte « Voir toute la catégorie » et le « Voir tout » de l'en-tête, et son
 * rendu était bancal (double flèche : une dans le texte, une en ::after).
 * Masquée en desktop UNIQUEMENT : sous 1025px elle reste le seul accès direct à la
 * catégorie mère.
 * ------------------------------------------------------------------------ */
.koa-megamenu-panel > .koa-mm-bande { display: none; }

/* Le pied de volet, vidé par le déplacement du lien dans la grille, ne doit pas laisser
 * son padding derrière lui. */
.koa-megamenu-panel .koa-mm-pied:empty,
.koa-megamenu-panel .koa-mm-pied.koa-mm-pied--vide { display: none; }

} /* fin @media desktop */

/* ---------------------------------------------------------------------------
 * 8. LA CARTE « VOIR TOUT » (hors media query : même rendu partout)
 * ------------------------------------------------------------------------ */
.koa-megamenu-panel .koa-mm-carte5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: auto;
    margin: 0;
    padding: 18px 12px;
    border: 1px solid #dfe6e4;
    border-radius: 12px;
    background: #f5f7f6;
    color: #0f544d;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
}

.koa-megamenu-panel .koa-mm-carte5:hover {
    background: #eaf3f0;
    border-color: #0f544d;
}

.koa-megamenu-panel .koa-mm-carte5__rond {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #0f544d;
    color: #fff;
    font-size: 20px;
    line-height: 1;
}

.koa-megamenu-panel .koa-mm-carte5__txt small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #5a6570;
}


/* La carte des realisations occupe une cellule de la grille comme un visuel :
 * meme gabarit carre, pour que la ligne reste reguliere. */
.koa-mm-panel--realisations .koa-mm-carte5--real {
    aspect-ratio: 1 / 1;
    gap: 10px;
    padding: 14px 10px;
    font-size: 13px;
}

.koa-mm-panel--realisations .koa-mm-carte5--real .koa-mm-carte5__rond {
    width: 38px;
    height: 38px;
    font-size: 18px;
}


/* ---------------------------------------------------------------------------
 * PIED DE PANNEAU — bande de réassurance
 * Ferme le panneau, qui donnait l'impression de s'arrêter en plein vol.
 * Décorative dans sa fonction visuelle, utile dans son contenu : délai, origine, port.
 * Volontairement discrète — le panneau a déjà ses appels à l'action.
 * ------------------------------------------------------------------------ */
@media (min-width: 1025px) {
    .koa-megamenu-panel .koa-mm-reassurance {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px 34px;
        max-width: calc(100vw - 48px);   /* plus de plafond : sur un 1920 et au-dela, le contenu restait borne a 1560 et laissait deux bandes vides (Antony, 14/08) */
        margin: 0 auto;
        padding: 15px 40px 18px;
        border-top: 1px solid #eef2f1;
        color: #6f7d82;
        font-size: 12.5px;
        letter-spacing: .15px;
    }

    .koa-megamenu-panel .koa-mm-reassurance__item {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
    }

    /* Une pastille verte en guise de puce : discrète, aux couleurs de la marque. */
    .koa-megamenu-panel .koa-mm-reassurance__item::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #0f544d;
        flex: 0 0 auto;
    }
}

/* Sous 1025px le panneau devient un accordéon : la bande n'y a pas sa place. */
@media (max-width: 1024px) {
    .koa-megamenu-panel .koa-mm-reassurance { display: none; }
}