/* Claude — 2026-08-09 — Méga-menu DESKTOP, refonte "deux volets" (widget nav-menu c585ee4,
   >=1025px). Remplace intégralement la version du 05/08 — sauvegarde :
   KOAPRINT/04-technique/backups/megamenu_2026-08-05/koaprint-megamenu.css (hub Claude) +
   backup horodaté serveur au déploiement. Fichier dédié, jamais d'Elementor Custom Code.

   Structure reprise de la maquette validée par Antony (_ECHANGES/megamenu-maquette.html) :
   volet gauche fixe (catégories, picto + libellé + compteur) / volet droit (sous-catégories
   en grille, révélé au survol ou au focus clavier du volet gauche, 1er élément ouvert par
   défaut au repos). Couleurs déclarées EN DUR partout (--e-global-color-accent retombe sur
   un bordeaux sur ce site, piège déjà payé le 04/08) : vert de marque #0F544D.

   Scope strict desktop : @media (min-width: 1025px) ET .elementor-element-c585ee4
   uniquement — le widget est déjà masqué en tablette/mobile par Elementor lui-même. */

@media (min-width: 1025px) {

  /* Neutralise le hover-dropdown natif Elementor (remplacé par nos panneaux dédiés) :
     scopé à l'ID de CE widget, aucun risque sur le widget mobile c5b0b01. */
  .elementor-element-c585ee4 #menu-1-c585ee4 > li.menu-item-has-children > ul.sub-menu.elementor-nav-menu--dropdown {
    display: none !important;
  }

  /* Défensif : SmartMenus/Elementor force display:none + position:absolute sur les <ul>
     rencontrés dans le conteneur du menu, quelle que soit leur profondeur d'imbrication
     réelle (piège déjà payé le 05/08 sur .koa-mm-list, revalidé ici pour .koa-mm-familles —
     le seul <ul> que ce fichier introduit ; .koa-mm-grille est un <div>, jamais concerné).
     PAS de "width:auto !important" ici (piège vérifié le 09/08 : ça écrase silencieusement
     la largeur de colonne posée plus bas, !important gagne toujours contre une déclaration
     normale quelle que soit sa spécificité) — la largeur de .koa-mm-familles est pilotée
     UNIQUEMENT par les gabarits de grille de .koa-mm-volets, jamais fixée ici. */
  .koa-megamenu-panel .koa-mm-familles {
    display: grid !important;
    position: static !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    float: none !important;
    list-style: none;
    margin: 0;
    padding: 10px 0;
  }
  .koa-megamenu-panel .koa-mm-item,
  .koa-megamenu-panel .koa-mm-item-direct {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    float: none !important;
  }

  /* État couleur des 4 déclencheurs — cf. correctif 05/08 (gardé à l'identique, toujours
     nécessaire : le tracking interne d'Elementor pose .elementor-item-active/.highlighted
     de façon non déterministe dès qu'un gros panneau est injecté dans le <li> voisin).
     Gris neutre au repos, vert UNIQUEMENT sur :hover/:focus natifs ou [aria-expanded="true"]
     (posé exclusivement par koaprint-megamenu.js sur le déclencheur que NOUS ouvrons). */
  .elementor-element-c585ee4 #menu-1-c585ee4 > li.menu-item-has-children > a.elementor-item,
  .elementor-element-c585ee4 #menu-1-c585ee4 > li.menu-item-has-children > a.elementor-item.elementor-item-active,
  .elementor-element-c585ee4 #menu-1-c585ee4 > li.menu-item-has-children > a.elementor-item.highlighted {
    color: #333333 !important;
    fill: #333333 !important;
  }
  .elementor-element-c585ee4 #menu-1-c585ee4 > li.menu-item-has-children > a.elementor-item:hover,
  .elementor-element-c585ee4 #menu-1-c585ee4 > li.menu-item-has-children > a.elementor-item:focus,
  .elementor-element-c585ee4 #menu-1-c585ee4 > li.menu-item-has-children > a.elementor-item[aria-expanded="true"] {
    color: #0F544D !important;
    fill: #0F544D !important;
  }
  .elementor-element-c585ee4 #menu-1-c585ee4 > li.menu-item-has-children > a.elementor-item::before,
  .elementor-element-c585ee4 #menu-1-c585ee4 > li.menu-item-has-children > a.elementor-item::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  /* Boost de contexte d'empilement — posé/retiré uniquement par le JS pendant l'ouverture,
     jamais laissé en dur ici (même technique que le panneau de recherche desktop). */
  .koa-mm-boost {
    position: relative !important;
    z-index: 10000 !important;
  }

  /* ============================================================
     PANNEAU — largeur standard 820px (320 gauche + place pour un volet droit à 3 colonnes,
     cf. Vestes/9 et Accessoires pratiques/10 qui s'en contentent) ; variante "wide" élargie à
     1120px UNIQUEMENT quand l'univers a plus de WIDE_THRESHOLD catégories dans le volet
     gauche (cf. koaprint-megamenu.js, `uni.categories.length > WIDE_THRESHOLD`) — aujourd'hui
     seul "Accessoires textiles" (12 catégories). Largeur mesurée le 05/08 : sous ~950px de
     volet droit, la grille dense de Sacs/14 retombait sur 3-4 lignes ("pas un mur", cf.
     brief). Ce seuil basé sur le volet gauche n'a PAS été découplé vers "une catégorie du
     volet droit dépasse WIDE_THRESHOLD sous-catégories" malgré la suggestion initiale du
     brief — testé le 09/08, ça cassait l'alignement du défaut 1 pour "Objets" (panneau élargi
     inutilement, recalé loin de son déclencheur). Détail dans koaprint-megamenu.js,
     commentaire de `buildPanel()`.

     Claude — 09/08 — CORRECTIF DÉFAUT 1 (retour Antony, capture à l'appui) : le panneau
     n'est PLUS centré sur le viewport/conteneur ancêtre (left:50%/translateX(-50%), supprimé
     ci-dessous) — ce centrage était IDENTIQUE pour les 4 univers alors que les 3 largeurs de
     variante (820/1120/320px) centrent différemment sur la même largeur de conteneur, d'où
     un décalage visuel incohérent selon l'univers survolé ("Vêtements personnalisés" décalé
     de ~440px, "Accessoires textiles" collé au bord gauche à 0px — même mécanisme, rendu
     différent). Le panneau est maintenant aligné sur le bord GAUCHE de SON déclencheur,
     recalé (clamp) aux bords du viewport si besoin — calcul dynamique dans
     `positionPanel()` (koaprint-megamenu.js), posé en `style.left` inline à chaque ouverture
     et recalculé au resize. `left: 0` ci-dessous n'est qu'un FILET statique (jamais utilisé
     en pratique, le JS pose toujours un `left` avant que le panneau soit visible) — pas un
     centrage, pour ne jamais donner un flash visuel centré avant le calcul JS.
     ============================================================ */
  .koa-megamenu-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 820px;
    max-width: calc(100vw - 32px);
    background: #ffffff;
    background-color: #ffffff;
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .18);
    border-top: 1px solid rgba(15, 84, 77, .08);
    border-radius: 0 0 12px 12px;
    z-index: 10001;
    box-sizing: border-box;
    /* Filet de sécurité seulement (jamais la mécanique normale de dimensionnement, cf.
       .koa-mm-contenu plus bas) : un panneau qui dépasserait quand même la hauteur de
       l'écran (très petit écran desktop, zoom élevé) scrolle en interne plutôt que de
       pousser la page ou de sortir de l'écran. */
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }
  .koa-megamenu-panel.koa-mm-panel--wide {
    width: 1120px;
  }
  /* Univers sans aucune catégorie à enfants (Nos sélections aujourd'hui) : le panneau se
     limite à la largeur du volet gauche, jamais de volet droit vide (cf. koaprint-megamenu.js). */
  .koa-megamenu-panel.koa-mm-panel--flat {
    width: 320px;
  }
  .koa-mm-panel--flat .koa-mm-familles {
    border-right: 0;
  }
  .koa-megamenu-panel.koa-mm-open {
    display: block;
  }

  /* ============================================================
     VOLETS — gauche fixe (320px, TOUJOURS 1 seule colonne, cf. correctif défaut 2 ci-dessous)
     en flux normal (c'est LUI qui donne sa hauteur au panneau) ; droit positionné en absolu
     à côté, hauteur en "auto" (PAS de bottom:0 — piège vérifié le 09/08 : bottom:0 combiné à
     top:0 sur un conteneur en height:auto ne suit pas le contenu réel, ça tronquait Sacs/14
     souscatégories sans aucun défilement visible). Avec top:0 SEUL, .koa-mm-contenu se
     dimensionne sur SON PROPRE contenu, jamais sur le volet gauche — vérifié le 09/08 sur les
     4 univers réels : avec la règle ">8 => 3 colonnes", le volet droit ne dépasse jamais la
     hauteur du volet gauche dans le catalogue actuel (marge la plus courte : Accessoires
     textiles, ~10px). Si ça change un jour (catalogue très déséquilibré), overflow-y:auto
     ci-dessous absorbe le dépassement plutôt que de chevaucher la bande basse.

     Claude — 09/08 — CORRECTIF DÉFAUT 2 (retour Antony, capture à l'appui) : le volet gauche
     passait en 2 colonnes (560px, grid-template-columns:1fr 1fr) au-delà de WIDE_THRESHOLD
     catégories — seul cas aujourd'hui : Accessoires textiles (12). Bug structurel : la 2e
     colonne (Casquettes, Bonnets, Bobs, Chapeaux, Gants, Foulards) s'interposait PHYSIQUEMENT
     entre la 1re colonne (Sacs, Serviettes, Tabliers, Chaussettes, Écharpes, Peignoirs) et le
     volet droit — un mouseenter sur un item de la 2e colonne pendant le trajet de la souris
     vers "Sacs" changeait le panneau affiché avant d'atteindre la cible : le contenu de
     "Sacs" était inatteignable à la souris. Solution retenue (option (a) d'Antony, préférée
     et confirmée sans dépassement à 1280×720, cf. vérification) : le volet gauche reste
     TOUJOURS 1 seule colonne, y compris pour Accessoires (12 entrées, mesuré ~590px de haut
     à 1280×720, tient sans scroll sous le plafond max-height:calc(100vh-90px) du panneau).
     Plus aucun item du volet gauche sur la trajectoire souris vers le volet droit. La règle
     `.koa-mm-panel--wide .koa-mm-familles` (2 colonnes, 560px) a été SUPPRIMÉE — elle
     n'existe plus, `.koa-mm-familles` ci-dessous s'applique sans exception. */
  .koa-mm-volets {
    position: relative;
  }
  .koa-mm-familles {
    display: grid;
    grid-template-columns: 1fr;
    width: 320px;
    background: #F4F6F5;
    background-color: #F4F6F5;
    border-right: 1px solid #E5E8E7;
    box-sizing: border-box;
  }

  /* En-tête catégorie (volet gauche). AVEC enfants : <div role="button"> non cliquable,
     chevron. SANS enfants : <a> direct, pas de chevron (cf. koaprint-megamenu.js — ce
     fichier ne fait qu'habiller les deux variantes identiquement au repos). */
  .koa-mm-fam {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-decoration: none;
  }
  .koa-mm-picto {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #E4EBE8;
    background-color: #E4EBE8;
    color: #0F544D;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .koa-mm-picto svg {
    display: block;
  }
  .koa-mm-lbl {
    flex: 1;
    min-width: 0;
  }
  .koa-mm-fl {
    color: #B6BFBC;
    font-size: 15px;
    flex: none;
  }
  .koa-mm-nb {
    color: #A6AEAB;
    font-size: 12px;
    font-weight: 500;
    flex: none;
  }

  /* Claude — 09/08 (correctif tactile) — item actif : piloté par la classe .koa-mm-active,
     posée par setActiveItem() (koaprint-megamenu.js) sur mouseenter/focus/click — plus par
     :hover/:focus-within seuls (cf. commentaire JS dédié : sur tactile, il n'existe pas de
     :hover persistant, donc rien ne se serait révélé au doigt). :hover/:focus-visible restent
     en PLUS, pour un retour visuel instantané à la souris avant même l'exécution du JS (aucun
     conflit possible : ces règles ne touchent QUE l'habillage de .koa-mm-fam, jamais l'affichage
     de .koa-mm-contenu, qui dépend maintenant uniquement de .koa-mm-active — cf. plus bas). */
  .koa-mm-item.koa-mm-active > .koa-mm-fam,
  .koa-mm-item:hover > .koa-mm-fam,
  a.koa-mm-fam:hover,
  a.koa-mm-fam:focus-visible {
    background: #ffffff;
    background-color: #ffffff;
    border-left-color: #0F544D;
    color: #0F544D;
  }
  .koa-mm-item.koa-mm-active > .koa-mm-fam .koa-mm-picto,
  .koa-mm-item:hover > .koa-mm-fam .koa-mm-picto,
  a.koa-mm-fam:hover .koa-mm-picto,
  a.koa-mm-fam:focus-visible .koa-mm-picto {
    background: #0F544D;
    background-color: #0F544D;
    color: #ffffff;
  }
  .koa-mm-item.koa-mm-active > .koa-mm-fam .koa-mm-fl,
  .koa-mm-item:hover > .koa-mm-fam .koa-mm-fl {
    color: #0F544D;
  }

  /* Focus clavier visible — requis même sur l'état "actif" ci-dessus (outline distinct du
     simple survol souris, cf. brief "le focus est visible"). */
  .koa-mm-fam:focus-visible {
    outline: 2px solid #0F544D;
    outline-offset: -2px;
  }

  /* ============================================================
     VOLET DROIT — un seul visible à la fois : celui marqué .koa-mm-active par setActiveItem()
     (koaprint-megamenu.js — mouseenter souris, focus clavier, click tactile, cf. commentaire
     dédié dans le JS). Claude — 09/08 — anciennement piloté par :hover/:focus-within seuls
     (100% CSS) : abandonné, un tap tactile ne déclenche ni l'un ni l'autre de façon fiable, ce
     qui aurait laissé DEUX volets droits invisibles à la fois (le 1er par défaut ET celui visé
     par le tap, aucun des deux réellement affiché) ou pire, superposés — cf. le commentaire du
     JS pour le détail du bug évité.
     ============================================================ */
  .koa-mm-contenu {
    display: none;
    position: absolute;
    left: 320px;
    right: 0;
    top: 0;
    /* PAS de bottom:0 — cf. commentaire de .koa-mm-volets ci-dessus (hauteur = contenu réel,
       jamais étirée/tronquée sur la hauteur du volet gauche). */
    padding: 20px 28px 24px;
    background: #ffffff;
    box-sizing: border-box;
    min-width: 0;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
  }
  /* Claude — 09/08 (correctif défaut 2) — l'offset "left: 560px" du volet droit en variante
     wide a été SUPPRIMÉ : le volet gauche est maintenant TOUJOURS 320px (1 colonne), donc le
     volet droit démarre TOUJOURS à left:320px (règle de base ci-dessus), que le panneau soit
     en largeur standard (820px) ou wide (1120px, cf. plus haut — la variante "wide" ne pilote
     plus QUE la largeur totale du panneau, jamais plus la position du volet droit). */
  /* Un seul sélecteur, une seule vérité (cf. commentaires ci-dessus) : le 1er item est actif
     par défaut parce que setActiveItem(items, items[0]) est appelé à la construction du
     panneau (koaprint-megamenu.js) — jamais parce que "personne ne survole rien". */
  .koa-mm-item.koa-mm-active > .koa-mm-contenu {
    display: block;
  }

  .koa-mm-entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 11px;
    margin-bottom: 14px;
    border-bottom: 1px solid #E5E8E7;
  }
  .koa-mm-entete h3 {
    font-size: 16.5px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
  }
  .koa-mm-voirtout {
    font-size: 13.5px;
    font-weight: 700;
    color: #0F544D;
    text-decoration: none;
    white-space: nowrap;
  }
  .koa-mm-voirtout:hover,
  .koa-mm-voirtout:focus-visible {
    text-decoration: underline;
  }

  /* Grille du volet droit — 2 colonnes par défaut, 3 au-delà de WIDE_THRESHOLD entrées
     (posé en JS via la classe koa-mm-grille--3, cf. brief "3 colonnes au-delà de 8 items"). */
  .koa-mm-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
  }
  .koa-mm-grille.koa-mm-grille--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 24px;
  }

  .koa-mm-lien {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    text-decoration: none;
    color: #1a1a1a;
    font-size: 13.5px;
  }
  .koa-mm-lien:hover,
  .koa-mm-lien:focus-visible {
    color: #0F544D;
  }
  .koa-mm-lien:focus-visible {
    outline: 2px solid #0F544D;
    outline-offset: 2px;
    border-radius: 4px;
  }
  .koa-mm-lien-nom {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .koa-mm-lien .koa-mm-nb {
    flex: 0 0 auto;
  }

  /* Bande basse : uniquement "Voir tout l'univers →", rien d'autre (cf. brief). */
  .koa-mm-bande {
    border-top: 1px solid #E5E8E7;
    background: #F4F6F5;
    background-color: #F4F6F5;
    padding: 12px 28px;
    display: flex;
    justify-content: flex-end;
  }
  .koa-mm-bande a {
    color: #0F544D;
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
  }
  .koa-mm-bande a:hover,
  .koa-mm-bande a:focus-visible {
    text-decoration: underline;
  }
}

/* Verrou explicite : aucune règle méga-menu ne doit s'appliquer sous 1025px (menu
   mobile/tablette intact, widget c5b0b01 non concerné par ce fichier). */
@media (max-width: 1024.98px) {
  .koa-megamenu-panel {
    display: none !important;
  }
}


@media (min-width: 1025px) {
}

@media (min-width: 1025px) {
  /* Claude — 09/08 (retour Antony : « a droite pas mega fou, on sait pas trop si on est
     dessus » puis « une barre, du gras, un survol vert »). Le volet droit ne changeait QUE
     la couleur du texte — signal trop faible, et contraire a WCAG 1.4.1 qui interdit de
     s'appuyer sur la seule couleur. On reprend le vocabulaire de la colonne de gauche :
     fond vert clair + barre verte + libelle appuye.

     DEUX PIEGES DE REFLOW, evites tous les deux — le lien est un flex space-between, donc
     tout ce qui elargit le libelle repousse le compteur et fait sauter la ligne au survol :
       - le gras passe par text-shadow, PAS par font-weight (metriques inchangees) ;
       - la barre passe par un ::before absolu, PAS par un border-left (largeur inchangee).
     Le margin negatif fait deborder le fond de 10px sans decaler le texte : les libelles
     restent alignes sur le titre du panneau. Les gaps de grille sont augmentes de 20px en
     consequence (32->52, 24->44) pour que l'espace VISIBLE entre colonnes reste identique —
     sans quoi les fonds de deux colonnes voisines se toucheraient. */
  .koa-mm-grille { gap: 2px 52px; }
  .koa-mm-grille.koa-mm-grille--3 { gap: 2px 44px; }

  .koa-mm-lien {
    position: relative;
    padding: 8px 12px;
    margin: 0 -12px;
    border-radius: 8px;
    transition: background-color .14s ease, color .14s ease;
  }
  .koa-mm-lien::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #0F544D;
    opacity: 0;
    transform: scaleY(.25);
    transition: transform .16s cubic-bezier(.4, 0, .2, 1), opacity .16s ease;
  }
  .koa-mm-lien:hover,
  .koa-mm-lien:focus-visible {
    color: #0F544D;
    background: #E8F0ED;
    background-color: #E8F0ED;
    /* Faux-gras : deux ombres de 0.35px epaississent le trait sans toucher aux metriques. */
    text-shadow: 0 0 .35px currentColor, 0 0 .35px currentColor;
  }
  .koa-mm-lien:hover::before,
  .koa-mm-lien:focus-visible::before {
    opacity: 1;
    transform: scaleY(1);
  }
  .koa-mm-lien:hover .koa-mm-nb,
  .koa-mm-lien:focus-visible .koa-mm-nb {
    color: #0F544D;
  }
  .koa-mm-lien:focus-visible {
    outline: 2px solid #0F544D;
    outline-offset: 0;
  }

  /* Respect de prefers-reduced-motion : l'etat final est identique, seul le mouvement saute. */
  @media (prefers-reduced-motion: reduce) {
    .koa-mm-lien, .koa-mm-lien::before { transition: none; }
    .koa-mm-lien::before { transform: none; }
  }
}



@media (min-width: 1025px) {
  /* Titre du volet droit rendu cliquable (cf. buildContenu) — il doit rester visuellement
     un titre, pas ressembler a un lien du corps de texte : meme couleur, soulignement au
     survol seulement. */
  .koa-mm-titre-lien {
    color: inherit;
    text-decoration: none;
  }
  .koa-mm-titre-lien:hover,
  .koa-mm-titre-lien:focus-visible {
    color: #0F544D;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .koa-mm-titre-lien:focus-visible {
    outline: 2px solid #0F544D;
    outline-offset: 3px;
    border-radius: 4px;
  }
}


@media (min-width: 1025px) {
  /* Volet droit d'une FEUILLE : 4 produits de la categorie (cf. buildContenu).
     Grille fixe a 4 colonnes — au-dela la vignette devient trop petite pour etre lue,
     en-deca elle s'etire et deforme la mise en page du panneau. */
  .koa-mm-prods {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    padding-top: 4px;
  }
  .koa-mm-prod {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: #1a1a1a;
    border-radius: 10px;
    padding: 8px;
    margin: -8px;
    transition: background-color .14s ease;
  }
  .koa-mm-prod:hover,
  .koa-mm-prod:focus-visible { background: #F4F7F6; color: #0F544D; }
  .koa-mm-prod:focus-visible { outline: 2px solid #0F544D; outline-offset: 0; }
  .koa-mm-prod-vign {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: #F4F6F5;
  }
  .koa-mm-prod-vign img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .koa-mm-prod-nom {
    font-size: 12.5px;
    line-height: 1.35;
    /* 2 lignes maximum : au-dela les cartes n'ont plus la meme hauteur et la grille bascule. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (min-width: 1025px) {
  /* Bande basse — « Voir tout l'univers X → » (retour Antony 09/08 : « ameliorer le bouton
     Voir tout »). C'etait un lien texte vert sur fond gris : la sortie principale du panneau
     avait moins de poids visuel qu'une sous-categorie de la grille. On en fait un vrai
     bouton. Il reste a droite : c'est une sortie, pas l'action premiere du panneau. */
  .koa-mm-bande {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12px 22px;
  }
  .koa-mm-bande a,
  .koa-mm-bande .koa-mm-voirunivers {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0F544D;
    background-color: #0F544D;
    color: #ffffff;
    padding: 11px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .14s ease, box-shadow .14s ease;
  }
  .koa-mm-bande a:hover,
  .koa-mm-bande a:focus-visible {
    background: #0B3F3A;
    background-color: #0B3F3A;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(15, 84, 77, .28);
  }
  .koa-mm-bande a:focus-visible {
    outline: 2px solid #0F544D;
    outline-offset: 2px;
  }
}


@media (min-width: 1025px) {
  /* Pied du volet droit — « Voir les N → » deplace depuis l'en-tete (cf. buildContenu).
     Aligne a gauche, sous le contenu : on le lit apres les sous-categories ou les
     vignettes, pas avant. Reste un lien, jamais un bouton — la bande basse porte deja
     le bouton plein, a droite. */
  .koa-mm-pied {
    display: flex;
    justify-content: flex-start;
    padding-top: 18px;
    margin-top: 4px;
  }
  .koa-mm-pied .koa-mm-voirtout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0F544D;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 12px;
    margin-left: -12px;
    border-radius: 8px;
    transition: background-color .14s ease;
  }
  .koa-mm-pied .koa-mm-voirtout:hover,
  .koa-mm-pied .koa-mm-voirtout:focus-visible {
    background: #EFF3F1;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .koa-mm-pied .koa-mm-voirtout:focus-visible {
    outline: 2px solid #0F544D;
    outline-offset: 0;
  }

  /* L'en-tete n'a plus qu'un titre : il ne doit plus repartir les extremites. */
  .koa-mm-entete { justify-content: flex-start; }
}

@media (min-width: 1025px) {
  /* Claude — 09/08 (Antony : « regler la hauteur des cards, menu pas meme taille /
     essaye d'etre uniforme »).

     Deux causes distinctes au desequilibre :
     1) .koa-mm-contenu est en position absolute avec top:0 et SANS bottom — sa hauteur
        valait donc son contenu. Volet gauche d'Accessoires : 12 entrees ; volet droit de
        « Chapeaux » : 4 vignettes. D'ou un grand blanc en bas a droite.
     2) La hauteur du panneau suit le volet gauche, qui va de 6 entrees (Vetements) a
        12 (Accessoires) : les univers n'avaient pas la meme allure entre eux.

     On ne remet PAS bottom:0 (ecarte plus haut a juste titre : il TRONQUE un volet droit
     plus haut que le gauche). min-height:100% etire sans jamais tronquer — le contenu reste
     libre de depasser. Le pied est pousse en bas par margin-top:auto : titre en haut,
     contenu au milieu, sortie en bas, quelle que soit la categorie. */
  .koa-mm-volets { min-height: 430px; }

  .koa-mm-item.koa-mm-active > .koa-mm-contenu {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
  .koa-mm-pied { margin-top: auto; }

  /* Les vignettes ne doivent pas s'etirer pour combler la hauteur rendue disponible :
     c'est le pied qui descend, pas les cartes qui grandissent. */
  .koa-mm-prods { align-content: start; }
  .koa-mm-prod { align-self: start; }
}

@media (min-width: 1025px) {
  /* Claude — 09/08, correction du bloc precedent, apres capture (« juste equilibre »).
     Deux defauts constates de visu, que les mesures seules ne montraient pas :
     1) min-height n'etait pose que sur .koa-mm-volets : le fond gris du volet GAUCHE
        s'arretait a sa 6e entree tandis que le panneau continuait en blanc — une marche
        nette au milieu. Il lui faut la meme hauteur plancher.
     2) margin-top:auto plaquait le lien tout en bas : sur T-shirts, 250px de vide entre
        la derniere sous-categorie et « Voir toute la categorie ». Remplir le blanc en
        eloignant le lien du contenu qu'il conclut, c'est deplacer le probleme.
     Le lien revient donc juste sous le contenu ; seules les hauteurs de FOND sont
     uniformisees. C'est l'equilibre demande : meme allure d'un univers a l'autre, sans
     etirer artificiellement ce qui n'a pas de quoi remplir. */
  .koa-mm-familles {
    min-height: 430px;
    align-content: start;
  }
  .koa-mm-pied { margin-top: 0; }
}

@media (min-width: 1025px) {
  /* Claude — 10/08/2026 (Antony : « la difference de taille des cards produit, et la
     difference de taille du panneau qui est totalement different »).

     Le panneau faisait 820px par defaut et 1120px au-dela de 8 familles (mode wide) — donc
     Accessoires seul etait large. Consequence directe une fois les vignettes produit posees :
     les memes cartes mesuraient ~190px de large sur Vetements et ~270px sur Accessoires.
     Meme composant, deux tailles selon l'univers survole ; et le panneau lui-meme changeait
     de gabarit d'un onglet a l'autre.

     On fixe une largeur unique. 1120px est retenu plutot que 820 : le volet gauche prend
     320px, il reste donc 800px pour le volet droit, soit ~200px par vignette — la taille
     confortable constatee sur Accessoires. A 820px il ne restait que 500px, d'ou les cartes
     etriquees de la capture Vetements. */
  .koa-megamenu-panel,
  .koa-megamenu-panel.koa-mm-panel--wide {
    width: 1120px !important;
  }

  /* Le volet droit passe donc partout en 3 colonnes : meme gabarit de grille d'un univers
     a l'autre, plus seulement sur celui qui depassait le seuil. */
  .koa-mm-grille {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2px 44px !important;
  }
}


@media (min-width: 1025px) {
  /* Panneau « Nos realisations » — grille de visuels, pas de volet gauche (cf.
     buildPanelRealisations). Il reprend la largeur (1120px) et le centrage communs :
     c'est la position et le gabarit qui font la coherence avec les 4 autres, pas la
     structure interne, qui n'a pas lieu d'etre identique pour un contenu different. */
  .koa-mm-panel--realisations .koa-mm-real-grille {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding: 24px 28px 8px;
  }
  .koa-mm-real-vign {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: #F4F6F5;
  }
  .koa-mm-real-vign img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
  }
  /* Les visuels ne sont pas cliquables : un leger zoom au survol du panneau suffit a les
     rendre vivants, sans jamais suggerer une cible. */
  .koa-mm-panel--realisations:hover .koa-mm-real-vign img { transform: scale(1.03); }

  @media (prefers-reduced-motion: reduce) {
    .koa-mm-real-vign img { transition: none; }
    .koa-mm-panel--realisations:hover .koa-mm-real-vign img { transform: none; }
  }
}