/* Claude — 2026-08-04 — menu mobile pleine largeur (widget c5b0b01, dropdown burger Elementor Pro). Claude — 2026-08-09 — portee elargie de <=767px a <=1024px (mobile ET tablette). Verifie en base (zero HTTP, lecture _elementor_data + kit settings) : viewport_md=768 / viewport_lg=1025 (breakpoints Elementor standard, non personnalises sur ce site) — le widget c5b0b01 porte `hide_desktop` mais AUCUN `hide_tablet` : il est deja affiche par Elementor de 0 a 1024px, pas seulement en mobile. Ce fichier ne le stylait jusqu'ici que sous 768px : entre 768 et 1024px (iPad portrait 768, iPad paysage/petit portable 1024), le widget existait dans le DOM mais retombait sur l'apparence brute d'Elementor (aucun de nos 44px de zone tactile, aucune icone, aucun accordeon) — trou d'affichage trouve et corrige le 09/08 (retour Antony : "propre sur ordi, tablette et mobile"). Le widget desktop deux volets (c585ee4) est confirme hors de portee ici : son CONTENEUR parent (b9bb3b9) porte `hide_tablet` ET `hide_mobile`, donc il ne s'affiche JAMAIS sous 1025px — aucun risque de chevauchement entre les deux fichiers. Fichier dedie, distinct de koaprint-header-search-mobile.css (chantier recherche en parallele, non touche). MECANISME REUTILISE (natif Elementor Pro, non reimplemente ici) : - Ouverture/fermeture globale du panneau : geree par le handler JS du widget nav-menu (elementor-pro/modules/nav-menu/assets/js/frontend/handlers/nav-menu.js). Le clic sur .elementor-menu-toggle bascule la classe .elementor-active sur CE bouton et anime .elementor-nav-menu__container.elementor-nav-menu--dropdown via max-height/transform (regles natives du plugin, non dupliquees ici). - Ouverture/fermeture des sous-menus (Vetements/Accessoires/Objets/Nos selections) : geree par la librairie SmartMenus (assets/lib/smartmenus/jquery.smartmenus.js), qui pose nativement la classe .highlighted + aria-expanded="true" sur le parent quand son sous-menu est deplie. La rotation du chevron ci-dessous s'appuie donc UNIQUEMENT sur cet etat natif (CSS pur, aucun JS necessaire pour ce point precis). CE QUE CE FICHIER FAIT : 1) Panneau BORD A BORD (position:absolute, largeur = viewport entier, ancre sous le bas du header entier) — meme methode que le panneau de recherche mobile. Le calcul (largeur/ left/top) est fait par assets/js/koaprint-menu-mobile.js car il depend de la position de l'icone dans le header, impossible a garantir en CSS pur (meme raisonnement que la recherche). Les valeurs dynamiques sont posees en inline style !important par le JS — priorite la plus haute du cascade, au-dessus de n'importe quelle regle !important de feuille de style, y compris la regle legacy ci-dessous. Claude — 2026-08-05 — la marge de 10px de chaque cote (widget "carte flottante") a ete retiree (mission refonte, cible "bord a bord") : voir margin=0 dans positionPanel() cote JS, et border-radius/box-shadow retires ci-dessous cote CSS. 2) Neutralisation de la regle CUSTOM CSS LEGACY posee sur le widget (element Advanced > Custom CSS, visible dans le HTML source de la page : right:0/width:86vw/max-width:340px !important) SANS toucher _elementor_data — meme methode que le correctif deja valide sur la recherche (widget c0aa01a) : specificite superieure (selecteur sur-qualifie, 5+ classes contre les 2 classes de la regle legacy) plutot qu'edition de la source. 3) Grille des lignes (56px niveau 1 / 44px sous-menu, cf. mission refonte 2026-08-05), separateurs, icone 20px + compteur de produits sur les 4 univers, chevrons 20px colores et rotatifs, bouton "Contact rapide" plein — cf. mission du 2026-08-04 puis refonte du 2026-08-05 (retrait carte flottante + lien telephone doublon, cf. commentaires dedies plus bas). BUG "2e utilisation ca clique pas" (Antony, 2026-08-05) : la cause N'ETAIT PAS dans ce fichier CSS ni dans koaprint-menu-mobile.js (mecanisme d'ouverture verifie sain sur 3+ cycles reels) mais dans la configuration PAR DEFAUT de SmartMenus (collapsibleBehavior: 'default' = "2e tap sur un univers suit le lien au lieu de replier l'accordeon") — corrige cote JS (patchSmartMenusCollapsibleBehavior), rien a changer ici. Detail complet en tete de koaprint-menu-mobile.js. PIEGE COULEUR : --e-global-color-accent vaut #961038 (bordeaux). Toute couleur declaree ici est explicite (hex), jamais de currentColor/var() non garanti. */ @media (max-width: 1024px) { /* ============================================================ BOOST DE CONTEXTE D'EMPILEMENT — meme piege/meme correctif que la recherche : la chaine d'ancetres du widget (c5b0b01 > 5c0f4cf > bec155d + le conteneur header) est en position:relative mais z-index:auto, alors qu'une section de contenu (le hero) a un z-index explicite -> sans boost, le panneau passe DERRIERE le hero. Classe posee/retiree par le JS UNIQUEMENT pendant que le menu est ouvert (jamais en permanence). Nom de classe distinct de celui de la recherche (koa-search-header-boost) : fichiers et mecanismes independants, comme demande. ============================================================ */ .koa-menu-header-boost { position: relative !important; z-index: 10000 !important; } /* ============================================================ PANNEAU — proprietes statiques (position/left/top/width restent dynamiques, poses par le JS en inline !important). Selecteur sur-qualifie (nav + 2 classes + ancetre c5b0b01 = 5 classes/1 type minimum sur les regles filles) pour battre la regle Custom CSS legacy citee plus haut, quel que soit l'ordre de source. ============================================================ */ .elementor-element-c5b0b01 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container { box-sizing: border-box !important; padding: 0 !important; margin-top: 0 !important; /* le gap sous le header est deja inclus dans le calcul JS du top */ /* Claude — 2026-08-05 — retrait "carte flottante" (border-radius 16px + ombre portee) : mission refonte menu mobile, cible "bord a bord". La largeur/le decalage bord a bord viennent du JS (margin 10 -> 0, cf. koaprint-menu-mobile.js positionPanel()) ; ici on retire ce qui restait de l'habillage "carte" (coins arrondis + ombre) pour un panneau plein largeur, jusqu'au bord de l'ecran. */ border-radius: 0 !important; background: #fff !important; background-color: #fff !important; /* Claude — 2026-08-05 — CORRECTIF 2 (finitions post-nuit) : le panneau n'avait aucune box-shadow ("none"), il "flottait" sans jamais se distinguer du contenu de la page en dessous (visible juste apres "Contact rapide"). Ombre discrete ajoutee — ne revient PAS sur le "bord a bord" de la nuit (border-radius reste 0, pas de marge laterale) : la largeur du panneau ne change pas, seule une ombre portee est ajoutee sous son bord bas. */ box-shadow: 0 8px 24px rgba(0, 0, 0, .12) !important; /* Claude — 2026-08-05 — 160px -> 200px : le panneau s'allonge avec les sous-categories. Claude — 2026-08-09 — toujours vrai avec la refonte accordeon (potentiellement plus de lignes qu'avant sur les grandes categories, ex. Sacs/14) : c'est justement CE budget (max-height + overflow-y:auto ci-dessous) qui garantit qu'on peut toujours atteindre le bas du menu au scroll, quel que soit le nombre de sous-categories deplie (brief : "verifie qu'on peut atteindre le bas du menu au scroll"). Jamais de debordement de page. */ max-height: calc(100vh - 200px) !important; max-height: calc(100dvh - 200px) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; } /* ============================================================ LIGNES NIVEAU 1 (Vetements / Accessoires textiles / Objets / Nos selections / A propos / Blog / Contact rapide / lien telephone injecte) — 52px min, padding horizontal 20px, texte 16px aligne a gauche, separateurs legers entre chaque ligne. ============================================================ */ .elementor-element-c5b0b01 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul.elementor-nav-menu > li { border-top: 1px solid rgba(0, 0, 0, .08) !important; } .elementor-element-c5b0b01 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul.elementor-nav-menu > li:first-child { border-top: 0 !important; } .elementor-element-c5b0b01 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul.elementor-nav-menu > li > a.elementor-item { display: flex !important; align-items: center !important; /* Claude — 2026-08-05 — space-between -> flex-start : avec l'icone ajoutee en tete (cf. .koa-menu-toplevel-icon), space-between repartirait TOUS les enfants (icone/libelle/ compteur/chevron) a intervalles egaux au lieu de coller icone+libelle a gauche. Le compteur (koa-menu-toplevel-count) porte desormais margin-left:auto : c'est LUI qui pousse compteur+chevron a droite, flex-start laisse icone+libelle groupes a gauche. Sans compteur (A propos/Blog, pas de univers), effet visuel inchange (un seul enfant). */ justify-content: flex-start !important; gap: 8px !important; min-height: 56px !important; /* 52 -> 56, cible mission "56px par entree principale" */ height: auto !important; padding: 8px 20px !important; margin: 0 !important; font-size: 16px !important; line-height: 1.3 !important; text-align: left !important; color: #1a1a1a !important; background: transparent !important; } .elementor-element-c5b0b01 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul.elementor-nav-menu > li > a.elementor-item:active { background: rgba(15, 84, 77, .06) !important; } /* ============================================================ Claude — 2026-08-05 — HIERARCHIE VISUELLE (mission sous-categories) : les 4 univers (Vetements/Accessoires textiles/Objets/Nos selections) en tete, plus lourds ; puis un separateur plus marque ; puis les pages secondaires (A propos/Blog) en retrait. Selecteur ".menu-item-has-children" : classe WordPress NATIVE deja posee uniquement sur les 4 univers (ce sont les seuls a avoir un sous-menu) — stable, pas besoin d'ID en dur. ============================================================ */ .elementor-element-c5b0b01 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul.elementor-nav-menu > li.menu-item-has-children > a.elementor-item { font-weight: 600 !important; } /* Separateur plus marque : fin du bloc "univers", debut des pages secondaires. A-propos (menu-item-22961) est le premier element apres les 4 univers. */ .elementor-element-c5b0b01 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul.elementor-nav-menu > li.menu-item-22961 { border-top: 8px solid rgba(0, 0, 0, .04) !important; margin-top: 4px !important; } /* Pages secondaires (A propos, Blog) : plus discretes que les univers — 15px, poids 400, couleur attenuee (#595959, deja valide AA sur fond blanc ailleurs dans ce theme). */ .elementor-element-c5b0b01 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul.elementor-nav-menu > li.menu-item-22961 > a.elementor-item, .elementor-element-c5b0b01 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul.elementor-nav-menu > li.menu-item-22962 > a.elementor-item { font-size: 15px !important; font-weight: 400 !important; color: #595959 !important; } /* Chevrons plus francs : 20px, vert de marque, rotation 180deg quand le sous-menu est deplie. L'etat "deplie" est natif (SmartMenus pose .highlighted + aria-expanded="true" sur le parent) — aucune logique JS necessaire pour ce point. */ .elementor-element-c5b0b01 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul.elementor-nav-menu > li > a.elementor-item .sub-arrow { margin: 0 !important; padding: 0 !important; } .elementor-element-c5b0b01 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul.elementor-nav-menu > li > a.elementor-item .sub-arrow svg { width: 20px !important; height: 20px !important; color: #0F544D !important; fill: #0F544D !important; transition: transform 160ms ease-out !important; } .elementor-element-c5b0b01 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul.elementor-nav-menu > li > a.elementor-item.highlighted .sub-arrow svg, .elementor-element-c5b0b01 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul.elementor-nav-menu > li > a.elementor-item[aria-expanded="true"] .sub-arrow svg { transform: rotate(180deg) !important; } @media (prefers-reduced-motion: reduce) { .elementor-element-c5b0b01 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container .sub-arrow svg { transition: none !important; } } /* ============================================================ Claude — 2026-08-05 — ICONE + COMPTEUR sur les 4 lignes univers (mission refonte menu mobile). Construits par le JS (assets/js/koaprint-menu-mobile.js), classes maison sans equivalent Elementor a battre en specificite -> pas de prefixe .elementor-element-c5b0b01 necessaire, comme deja fait pour .koa-menu-subcat-count. ============================================================ */ .koa-menu-toplevel-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 20px !important; width: 20px !important; height: 20px !important; } /* Repli gracieux : si window.KOA_ICONS n'est pas encore charge, le span reste vide et ne doit pas laisser un "trou" de 20px dans la ligne avant que l'icone n'arrive. */ .koa-menu-toplevel-icon:empty { display: none !important; } .koa-menu-toplevel-icon svg { width: 20px !important; height: 20px !important; } .koa-menu-toplevel-count { flex: 0 0 auto !important; margin-left: auto !important; /* pousse compteur + chevron a l'extreme droite, cf. justify-content: flex-start ci-dessus */ font-size: 13px !important; font-weight: 400 !important; color: rgba(0, 0, 0, .45) !important; white-space: nowrap !important; } /* ============================================================ Claude — 2026-08-05 — ACCORDEON au lieu de dropdown flottant (retour coordinateur apres verification a l'ecran) : le sous-menu s'ouvrait en calque flottant par-dessus les univers suivants (comportement natif SmartMenus "popup"), rendant "Accessoires textiles"/"Objets"/ "Nos selections" illisibles des qu'une section etait depliee — incompatible avec les 5 sous-categories visibles en permanence demandees par Antony. MECANISME REEL (verifie dans le code source de smartmenus.js, pas suppose) : isCollapsible: function() { return this.$firstSub.css('position') == 'static'; } SmartMenus decide LUI-MEME, a chaque ouverture, s'il doit faire du positionnement flottant (menuPosition($sub), calcul de top/left en inline, popup) ou du mode "collapsible" (accordeon natif : $sub.css({zIndex:'',width:'auto',minWidth:'',maxWidth:'',top:'',left:'', marginLeft:'',marginTop:''}) puis simple show() dans le flux) — en lisant la valeur CSS COMPUTED de "position" sur le premier sous-menu. En forcant position:static ici, on ne fait pas un hack visuel par-dessus le mecanisme JS : on bascule SmartMenus SUR SON PROPRE chemin de code accordeon, celui pour lequel il est concu. Le declenchement d'ouverture (.highlighted, aria-expanded, sur lequel s'appuie la rotation du chevron) est totalement independant de ce choix de positionnement — non affecte. Scope mobile+tablette (@media max-width:1024px, deja le conteneur de tout ce fichier) : le widget desktop (c585ee4) n'a pas cette regle, son SmartMenus reste en mode popup normal. ============================================================ */ .elementor-element-c5b0b01 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container ul.sub-menu.elementor-nav-menu--dropdown { position: static !important; box-shadow: none !important; width: 100% !important; max-width: none !important; min-width: 0 !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; z-index: auto !important; margin: 0 !important; /* Claude — 2026-08-09 — ajout defensif (piege trouve en testant la refonte accordeon) : cette regle remettait "margin:0" mais jamais "padding" — le padding par defaut d'un