/*
 * megamenuperso - la feuille de style du menu, en boutique.
 *
 * TROIS REGLES QUI EXPLIQUENT LA FORME DU FICHIER
 *
 * 1. AUCUNE CLASSE DE GRILLE DU THEME. Ni .container, ni .row, ni .col-md-*,
 *    ni .hidden-sm-down. classic est en Bootstrap 4 et plafonne a 1140 px,
 *    hummingbird est en Bootstrap 5 et plafonne a 1320 px, et .sr-only
 *    n'existe pas dans le second. Une seule racine, .mmp-root, et nos propres
 *    points de bascule : le module tient alors sur les deux themes livres et
 *    sur celui que le client a achete ailleurs.
 *
 * 2. LE TIROIR DU TELEPHONE EST LE NOTRE. On ne reutilise jamais
 *    _desktop_top_menu ni #menu-icon : le theme deplace ces elements vers
 *    #_mobile_top_menu, deja occupe par ps_mainmenu, et les deux menus se
 *    superposent. Notre tiroir est une surcouche a nous, sans dependance.
 *
 * 3. LE MENU S'OUVRE SANS JAVASCRIPT. Les panneaux repondent a :hover et a
 *    :focus-within tant que le script n'a pas pose la classe mmp-js. Le script
 *    n'ajoute que le confort ; s'il ne se charge pas, le menu reste parcourable
 *    a la souris ET au clavier.
 *
 * Toutes les valeurs de couleur, de rayon et d'espacement passent par une
 * variable --mmp-* posee EN LIGNE sur la racine de chaque menu (attribut
 * style, voir MegaMenuPersoRendu). Deux menus d'une meme page ont ainsi chacun
 * leur allure. Chaque var() porte SON defaut en second argument : une variable
 * absente laisse le menu dans son aspect livre, jamais dans des valeurs vides.
 */

/*
 * TROIS FAMILLES DE DECLARATIONS PORTENT !important, ET TROIS SEULEMENT :
 * LA COULEUR DU TEXTE, LE TRAIT SOUS LES LIENS - sur le lien, sur ce qu'il
 * CONTIENT et sur tout ce qui l'ENTOURE dans le menu -, ET LES QUATRE DESSINS
 * QUE CE DERNIER AURAIT EMPORTES.
 *
 * Le menu vit dans l'en-tete du theme, et classic y ecrit :
 *     #block_myaccount_infos .myaccount-title a, #header a, ... { color: #232323 }
 * Un selecteur a IDENTIFIANT bat n'importe quelle classe, si precise soit-elle :
 * toute couleur choisie dans L'allure - et toute couleur choisie sur une entree
 * ou une brique - etait donc ignoree DANS L'EN-TETE, et appliquee ailleurs.
 * Mesure du 23/09/2026 : couleur demandee #C81E4A, couleur calculee #232323.
 *
 * LA MEME HISTOIRE, SUR LA DECORATION (30/09/2026). Le marchand a signale
 * "les rayons sont soulignes par defaut". Reproduit sur le banc en ajoutant au
 * theme - et a lui seul - la regle qu'un theme ou un constructeur de page
 * ecrit couramment :
 *     #header a, #wrapper a { text-decoration: underline }
 * Mesure AVANT : .mmp-l calcule text-decoration-line = underline, alors que
 * ".mmp-root a { text-decoration: none }" (0,1,1) est bien la - il ne pese
 * simplement pas assez lourd face a (1,0,1). Toutes les lignes de bloc, le
 * titre de bloc, le produit, le bouton de banniere, l'image liee et l'entree
 * sortaient soulignes. Meme chose avec "border-bottom: 1px solid", que
 * certains themes emploient comme soulignement : mesure AVANT, .mmp-l a
 * 1px solid, et l'entree perdait meme son propre trait de 2 px.
 *
 * !important rend la main au marchand sans rien figer : la valeur reste une
 * VARIABLE (--mmp-lien-trait, choisie dans L'apparence d'un bloc), donc
 * l'allure du menu, l'entree et la brique continuent de se superposer
 * normalement entre elles. Les decorations VOULUES - le survol d'un titre de
 * bloc, d'un nom de produit, d'un bouton de banniere - passent sous le meme
 * !important, sinon la remise a zero les emporterait.
 *
 * LE TRAIT SE REECRIT SUR L'ENFANT DU LIEN, et c'etait la sixieme voie
 * (01/10/2026, 1.5.4). Les cinq remises a zero du dessus visent le <a> et le
 * <button> ; le mot d'une ligne de menu, lui, est un <span>. "#header a span"
 * passait donc toutes les cinq. Elle est fermee a son tour, plus bas, avec le
 * detail de la mesure.
 *
 * IL SE REECRIT AUSSI SUR CE QUI ENTOURE LE LIEN, et c'etaient la septieme et
 * la huitieme (01/10/2026, meme journee, a la contre-verification). Une
 * decoration posee sur le <ul>, le <li> ou le <div> qui entourent la ligne -
 * ou sur notre racine, qui est un <nav> - se PROPAGE jusqu'au mot, et rien de
 * ce qui est ecrit plus bas ne l'efface : ni sur le lien, ni sur le <span>.
 * Elle ne se mesure meme pas en valeur calculee, qui repond 'none' sur le mot
 * pendant que le trait est dessine : elle se compte en pixels. La huitieme est
 * "text-emphasis ... under", un tiret sous chaque caractere, propriete heritee
 * elle aussi. Les deux sont fermees par la premiere regle du fichier, qui vise
 * desormais la racine et tout ce qui vit dedans, <s>, <u> et <abbr> exceptes.
 * Une neuvieme, l'image de bordure, est fermee juste apres : elle survivait a
 * "border-bottom: 0 !important", border-image ayant sa propre largeur.
 *
 * La liste complete est tenue par tools/tests/php/structure.php, selecteur par
 * selecteur : le banc dit lequel manque et lequel est en trop. Il verifie en
 * plus qu'aucune regle de dessin du module ne soit morte sous la remise a zero
 * des enfants de lien - l'inventaire des enfants se LIT dans menu.tpl.
 *
 * TROIS RESERVES CONNUES, et aucune ne tient au hasard : les trois ont ete
 * ESSAYEES, pas supposees, le 01/10/2026 ; ce qui suit est le resultat.
 *
 * (1) LA DECORATION POSEE SUR UN ANCETRE QUI N'EST PAS A NOUS. "#header
 * { text-decoration: underline }", et non "#header a" - et, depuis la
 * contre-verification de la 1.5.4, c'est bien le SEUL ancetre qui reste :
 * celui qui est AU-DESSUS de notre racine. Tous ceux qui sont dedans, ou qui
 * SONT notre racine, sont fermes par la premiere regle du fichier. CSS dessine
 * le trait A TRAVERS
 * les descendants EN FLUX, et aucune declaration posee sur un descendant,
 * fut-elle !important, ne l'efface - c'est le fonctionnement de la
 * propriete, pas un defaut de poids. getComputedStyle du descendant repond
 * 'none' : la mesure ne peut pas etre une valeur calculee, elle se COMPTE EN
 * PIXELS. Trait du banc en rouge, capture de la barre agrandie quatre fois :
 * 3 752 pixels rouges, un trait de 938 px de large sous toute la barre. Le
 * contenu des PANNEAUX, lui, en compte 0 : il est en position absolue, donc
 * hors flux, et le tiroir ouvert non plus, il est en position fixe.
 * CE QUI LA RECONNAIT, capture a l'appui (01/10/2026) : le trait court sous le
 * NOM des entrees de la barre et SEULEMENT la - pas dans les panneaux, pas
 * dans le tiroir, et pas sous le chevron, un <button> n'heritant pas d'une
 * decoration propagee. Autrement dit : il ne se voit QUE sur la barre, et le
 * menu dessine de l'atelier - qui n'a pas #header au-dessus de lui - ne le
 * montre pas. Si l'atelier dessine un menu sans trait et que la boutique en
 * affiche un sur la seule barre, c'est celle-la.
 *
 * LA PARADE DE LA SPECIFICATION EXISTE, ET ELLE A ETE MESUREE. Une decoration
 * ne traverse pas un descendant en ligne ATOMIQUE (inline-block, inline-flex,
 * flottant, hors flux). Huit ecritures ont ete essayees sur le banc :
 *   - ".mmp-root .mmp-entree-mot { display: inline-block }" : 3 752 pixels,
 *     AUCUN EFFET. Le mot est un element flexible, et un element flexible voit
 *     son display "blockifie" : inline-block y redevient block. La parade
 *     s'eteint d'elle-meme, sans rien dire ;
 *   - ".mmp-root .mmp-barre { display: inline-flex; width: 100% }" : 0 pixel,
 *     la parade marche - mais la barre n'est plus centree. "margin: 0 auto" ne
 *     centre pas une boite de niveau ligne : ecart gauche 0 px et droite
 *     525 px, la ou le menu doit etre a 263 / 263. C'est exactement le defaut
 *     corrige le 23/09/2026 ;
 *   - ".mmp-root { display: inline-block; width: 100% }" : 0 pixel, centrage
 *     garde (263 / 263), aucune hauteur de plus, aucun ecart de base, tiroir
 *     et 375 px intacts. Celle-la tenait.
 * ET C'EST CELLE-LA QUI A ETE REFUSEE, pour une raison mesuree : le module ne
 * choisit pas son parent. Rendu flexible - ce qu'est une colonne de Creative
 * Elements, c'est-a-dire l'endroit meme ou le marchand colle son code court -,
 * le parent blockifie la racine (display calcule : inline-block hors d'un
 * flex, block dedans) et le trait revient, 3 752 pixels. Une parade qui
 * s'eteint en silence a l'endroit precis ou on en a besoin est pire que pas de
 * parade : elle promet, et elle ne tient que sur le banc.
 *
 * Reste donc la regle du theme, a retirer dans le theme.
 *
 * (2) LE !important DU THEME. "#header a { text-decoration: underline
 * !important }", ou la meme chose sur "#header a span". A !important egal,
 * c'est la specificite qui tranche, et un IDENTIFIANT (1,0,1) bat n'importe
 * quel nombre de classes : notre remise a zero (0,1,3) perd. Mesure du
 * 01/10/2026 : 7 020 pixels rouges sous la ligne, un trait de 140 px, large
 * comme le mot. Meme histoire avec "border-bottom: 1px solid !important"
 * (8 460 pixels, large comme la ligne).
 * LA PARADE EXISTE, ELLE EST MESUREE, ET ELLE N'EST PAS LIVREE. Pour les
 * declarations !important, l'ordre des COUCHES est inverse : une couche gagne
 * contre ce qui n'est dans aucune. Essaye sur le banc, avec la regle du theme
 * en place :
 *     @layer mmp { .mmp-root a { text-decoration: none !important } }
 * 0 pixel rouge, sous la ligne comme sous la barre. Elle marche. Elle n'est
 * pas ecrite ici pour deux raisons mesurables : d'abord il faudrait y faire
 * entrer AUSSI les quatre decorations voulues du module - sans quoi la couche
 * les emporterait a son tour et "Liens soulignes : toujours" cesserait de
 * repondre -, ce qui donne deux cascades pour une seule question ; ensuite son
 * resultat depend de l'ORDRE des @layer entre le module et un theme qui en
 * emploie aussi, et cet ordre, le module ne le choisit pas. Le jour ou une
 * boutique en aura besoin, c'est cette ligne-la qu'il faudra ecrire, et tout
 * le bloc des decorations voulues avec elle.
 *
 * (3) LA BORDURE, L'OMBRE, LE FOND ET LE PSEUDO-ELEMENT D'UN CONTENEUR.
 * "#header li { border-bottom: 1px solid }", "#header li::after", "#header div
 * { background-image: ... 100% 1px }". Mesure du 01/10/2026 : la bordure est
 * bien posee sur le <li> de la ligne et sur celui de l'entree, le fond sur le
 * panneau, sa doublure, la colonne et le bloc. Ces quatre-la ne sont PAS
 * fermees, et c'est un choix : le trait qu'elles dessinent est large comme la
 * LIGNE (180 px) ou comme le BLOC, jamais comme le mot (140 px) - ce n'est
 * donc pas le defaut signale -, et les fermer demanderait une remise a zero de
 * la bordure, de l'ombre et du fond sur TOUS les conteneurs du menu, c'est-a-
 * dire precisement la ou le module dessine les siens : la bordure de la
 * racine, celle de la barre, la bordure ET l'ombre d'un panneau, le fond d'une
 * pastille, celui du rond d'une video. Le jour ou il faudra, la ligne est
 * ".mmp-root ul, .mmp-root ol, .mmp-root li, .mmp-root div { border-bottom: 0
 * !important; box-shadow: none !important; background-image: none !important }"
 * - et chacun de ces dessins devra reprendre son propre !important, un par un.
 *
 * Les deux reserves ecrites ici le matin du 30/09/2026 - l'OMBRE et l'IMAGE DE
 * FOND sur le lien - ont ete refermees le soir meme ; celle de l'enfant de
 * lien, le 01/10/2026 au matin ; celle de l'ancetre interieur, de la marque
 * sous le texte et de l'image de bordure, le 01/10/2026 a la
 * contre-verification.
 */

/* ------------------------------------------------------------------------- */
/* UNE VALEUR PAR LARGEUR D'ECRAN : LE SEUL ENDROIT QUI CHOISIT              */
/* ------------------------------------------------------------------------- */

/*
 * POURQUOI CE BLOC EXISTE, ET POURQUOI IL EST SEUL DE SON ESPECE.
 *
 * Toute l'apparence du module vit en variables --mmp-* posees EN LIGNE sur
 * l'element : l'allure du menu sur nav.mmp-root, l'apparence d'une entree sur
 * son <li>, celle d'une brique sur sa <div> (MegaMenuPersoRendu, allureAssainie
 * et styleElement). Un attribut style ne peut PAS contenir de media query : il
 * n'existe aucune facon d'y ecrire "20 px sur ordinateur, 16 px sur telephone".
 *
 * La seule chose qui connaisse la largeur de l'ecran, c'est CETTE FEUILLE. Le
 * rendu pose donc TROIS variables nommees differemment - la clef d'aujourd'hui
 * sans suffixe, et deux soeurs a double tiret - et c'est ici, et nulle part
 * ailleurs, que la feuille dit laquelle des trois sert :
 *
 *     --mmp-taille              1 024 px et plus (la valeur d'aujourd'hui)
 *     --mmp-taille--tablette    de 768 a 1 023 px
 *     --mmp-taille--telephone   moins de 768 px
 *
 * LES TROIS LARGEURS SONT CELLES QUE LE MODULE EMPLOIE DEJA : 768 px ouvre les
 * panneaux au survol (plus bas), 768 px est le telephone, et le reglage
 * "burger des la tablette" parle de 1 024 px. Aucun quatrieme point de bascule
 * n'est introduit.
 *
 * LE DOUBLE TIRET EST VOULU. Aucune clef existante ne se termine par "-t" ni
 * par "-m" : "--mmp-taille--tablette" ne peut donc collisionner avec rien, il
 * reste un identifiant CSS valide, et il se grep d'un coup.
 *
 * LA CASCADE, DANS CET ORDRE EXACT : telephone retombe sur tablette, qui
 * retombe sur ordinateur, qui retombe sur le defaut ecrit dans la feuille. Le
 * marchand ne regle donc que ce qui DIFFERE d'une largeur a l'autre.
 *
 * LA REGLE D'OR : LE CHOIX DE LA LARGEUR S'ECRIT UNE SEULE FOIS PAR VARIABLE -
 * les trois lignes ci-dessous - et tous ceux qui consomment la valeur lisent
 * la variable -active. Sans cette indirection, il faudrait recopier la media
 * query a chaque endroit qui lit la variable : --mmp-espace est lue 13 fois,
 * --mmp-rayon 7 fois. Le piege "un plafond se change partout a la fois, ou
 * nulle part" se rejouerait a l'identique, et avec 39 occasions de l'oublier.
 *
 * OU LA DECLARATION SE POSE, ET POURQUOI PAS PLUS HAUT. Une variable posee EN
 * LIGNE sur un element n'existe pas pour ses ANCETRES : --mmp-espace ecrite sur
 * une brique ne remonte jamais vers la colonne. La variable -active se declare
 * donc sur l'element qui PORTE les variables en ligne, et sur lui seul - la
 * racine pour l'allure, le <li> d'une entree, la <div> d'une brique. Les trois
 * la redeclarent chacune pour son compte, et c'est ce qui fait que l'apparence
 * par element continue de se superposer a l'allure du menu sans une regle de
 * plus : c'est la VARIABLE qui se superpose, comme avant.
 *
 * LE DEFAUT RESTE CHEZ LE CONSOMMATEUR, et ce n'est pas un choix de style -
 * c'est une mesure. Une propriete personnalisee dont la valeur est
 * var(--absente) SANS repli devient garantie invalide, et elle ECRASE la valeur
 * heritee du meme nom. Mesure du 05/10/2026 dans Chrome : pere a
 * "--actif: 11px", fils a "--actif: var(--jamais-posee)", fils lit
 * "font-size: var(--actif, 99px)" -> 99px, quand un fils sans declaration lit
 * bien 11px. Si le defaut vivait dans la seule declaration de la racine, le
 * <li> et la <div>, qui redeclarent la meme -active, le masqueraient. Les 43
 * consommateurs gardent donc leur repli au CARACTERE PRES - c'est ce qui rend
 * "une boutique qui n'a rien regle ne bouge pas d'un pixel" verifiable a la
 * lecture, et pas seulement a la mesure.
 *
 * LES COULEURS N'EN SONT PAS. Treize couleurs x trois largeurs alourdiraient
 * chaque menu de vingt-six variables pour un besoin que personne n'a exprime :
 * une couleur qui change avec la largeur de l'ecran ne se rencontre pas. Seules
 * les longueurs, les graisses et la police sont reglables par largeur.
 *
 * LE MENU DESSINE DE L'ATELIER N'OBEIT PAS A CES MEDIA QUERIES : elles lisent
 * le VIEWPORT, et une toile dessinee "en telephone" dans un back-office de
 * 1 366 px repondrait quand meme aux regles de l'ordinateur. canevas.css
 * redeclare donc les memes variables sous #mmp-toile[data-mmp-largeur="..."],
 * avec exactement la meme cascade. C'est la seule duplication du lot, elle est
 * assumee, et tools/tests/php/structure.php la garde variable par variable.
 */

/* --- ORDINATEUR (1 024 px et plus) : la valeur sans suffixe, celle d'avant. */

/* Les trois elements qui portent --mmp-espace et --mmp-police en ligne : le
   menu, une entree, une brique. Chacun resout la sienne pour lui-meme. */
.mmp-root,
.mmp-entree,
.mmp-brique {
    --mmp-espace-active: var(--mmp-espace);
    --mmp-police-active: var(--mmp-police);
}

/* --mmp-rayon et --mmp-colonne-min : le menu et une entree. */
.mmp-root,
.mmp-entree {
    --mmp-rayon-active: var(--mmp-rayon);
    --mmp-colonne-min-active: var(--mmp-colonne-min);
}

/* Ce qui n'appartient qu'a l'allure du menu. */
.mmp-root {
    --mmp-hauteur-barre-active: var(--mmp-hauteur-barre);
    --mmp-largeur-max-active: var(--mmp-largeur-max);
    --mmp-tiroir-largeur-active: var(--mmp-tiroir-largeur);
    --mmp-logo-hauteur-active: var(--mmp-logo-hauteur);
    --mmp-largeur-colonne-active: var(--mmp-largeur-colonne);
    --mmp-taille-active: var(--mmp-taille);
}

/* Ce qui n'appartient qu'a une entree : son nom, et le texte de son panneau. */
.mmp-entree {
    --mmp-taille-entree-active: var(--mmp-taille-entree);
    --mmp-graisse-entree-active: var(--mmp-graisse-entree);
    --mmp-taille-panneau-active: var(--mmp-taille-panneau);
    --mmp-graisse-panneau-active: var(--mmp-graisse-panneau);
}

/* Ce qui n'appartient qu'a une brique : son titre et ses lignes. */
.mmp-brique {
    --mmp-taille-titre-active: var(--mmp-taille-titre);
    --mmp-graisse-titre-active: var(--mmp-graisse-titre);
    --mmp-taille-lien-active: var(--mmp-taille-lien);
    --mmp-graisse-lien-active: var(--mmp-graisse-lien);
}

/* --- TABLETTE (de 768 a 1 023 px) : la soeur --tablette, sinon celle d'avant. */

@media (max-width: 1023px) {
    .mmp-root,
    .mmp-entree,
    .mmp-brique {
        --mmp-espace-active: var(--mmp-espace--tablette, var(--mmp-espace));
        --mmp-police-active: var(--mmp-police--tablette, var(--mmp-police));
    }

    .mmp-root,
    .mmp-entree {
        --mmp-rayon-active: var(--mmp-rayon--tablette, var(--mmp-rayon));
        --mmp-colonne-min-active: var(--mmp-colonne-min--tablette, var(--mmp-colonne-min));
    }

    .mmp-root {
        --mmp-hauteur-barre-active: var(--mmp-hauteur-barre--tablette, var(--mmp-hauteur-barre));
        --mmp-largeur-max-active: var(--mmp-largeur-max--tablette, var(--mmp-largeur-max));
        --mmp-tiroir-largeur-active: var(--mmp-tiroir-largeur--tablette, var(--mmp-tiroir-largeur));
        --mmp-logo-hauteur-active: var(--mmp-logo-hauteur--tablette, var(--mmp-logo-hauteur));
        --mmp-largeur-colonne-active: var(--mmp-largeur-colonne--tablette, var(--mmp-largeur-colonne));
        --mmp-taille-active: var(--mmp-taille--tablette, var(--mmp-taille));
    }

    .mmp-entree {
        --mmp-taille-entree-active: var(--mmp-taille-entree--tablette, var(--mmp-taille-entree));
        --mmp-graisse-entree-active: var(--mmp-graisse-entree--tablette, var(--mmp-graisse-entree));
        --mmp-taille-panneau-active: var(--mmp-taille-panneau--tablette, var(--mmp-taille-panneau));
        --mmp-graisse-panneau-active: var(--mmp-graisse-panneau--tablette, var(--mmp-graisse-panneau));
    }

    .mmp-brique {
        --mmp-taille-titre-active: var(--mmp-taille-titre--tablette, var(--mmp-taille-titre));
        --mmp-graisse-titre-active: var(--mmp-graisse-titre--tablette, var(--mmp-graisse-titre));
        --mmp-taille-lien-active: var(--mmp-taille-lien--tablette, var(--mmp-taille-lien));
        --mmp-graisse-lien-active: var(--mmp-graisse-lien--tablette, var(--mmp-graisse-lien));
    }
}

/* --- TELEPHONE (moins de 768 px) : --telephone, sinon --tablette, sinon
       celle d'avant. Les trois etages de la cascade sont ecrits ici, et ils ne
       sont ecrits qu'ici. */

@media (max-width: 767px) {
    .mmp-root,
    .mmp-entree,
    .mmp-brique {
        --mmp-espace-active: var(--mmp-espace--telephone, var(--mmp-espace--tablette, var(--mmp-espace)));
        --mmp-police-active: var(--mmp-police--telephone, var(--mmp-police--tablette, var(--mmp-police)));
    }

    .mmp-root,
    .mmp-entree {
        --mmp-rayon-active: var(--mmp-rayon--telephone, var(--mmp-rayon--tablette, var(--mmp-rayon)));
        --mmp-colonne-min-active: var(--mmp-colonne-min--telephone, var(--mmp-colonne-min--tablette, var(--mmp-colonne-min)));
    }

    .mmp-root {
        --mmp-hauteur-barre-active: var(--mmp-hauteur-barre--telephone, var(--mmp-hauteur-barre--tablette, var(--mmp-hauteur-barre)));
        --mmp-largeur-max-active: var(--mmp-largeur-max--telephone, var(--mmp-largeur-max--tablette, var(--mmp-largeur-max)));
        --mmp-tiroir-largeur-active: var(--mmp-tiroir-largeur--telephone, var(--mmp-tiroir-largeur--tablette, var(--mmp-tiroir-largeur)));
        --mmp-logo-hauteur-active: var(--mmp-logo-hauteur--telephone, var(--mmp-logo-hauteur--tablette, var(--mmp-logo-hauteur)));
        --mmp-largeur-colonne-active: var(--mmp-largeur-colonne--telephone, var(--mmp-largeur-colonne--tablette, var(--mmp-largeur-colonne)));
        --mmp-taille-active: var(--mmp-taille--telephone, var(--mmp-taille--tablette, var(--mmp-taille)));
    }

    .mmp-entree {
        --mmp-taille-entree-active: var(--mmp-taille-entree--telephone, var(--mmp-taille-entree--tablette, var(--mmp-taille-entree)));
        --mmp-graisse-entree-active: var(--mmp-graisse-entree--telephone, var(--mmp-graisse-entree--tablette, var(--mmp-graisse-entree)));
        --mmp-taille-panneau-active: var(--mmp-taille-panneau--telephone, var(--mmp-taille-panneau--tablette, var(--mmp-taille-panneau)));
        --mmp-graisse-panneau-active: var(--mmp-graisse-panneau--telephone, var(--mmp-graisse-panneau--tablette, var(--mmp-graisse-panneau)));
    }

    .mmp-brique {
        --mmp-taille-titre-active: var(--mmp-taille-titre--telephone, var(--mmp-taille-titre--tablette, var(--mmp-taille-titre)));
        --mmp-graisse-titre-active: var(--mmp-graisse-titre--telephone, var(--mmp-graisse-titre--tablette, var(--mmp-graisse-titre)));
        --mmp-taille-lien-active: var(--mmp-taille-lien--telephone, var(--mmp-taille-lien--tablette, var(--mmp-taille-lien)));
        --mmp-graisse-lien-active: var(--mmp-graisse-lien--telephone, var(--mmp-graisse-lien--tablette, var(--mmp-graisse-lien)));
    }
}

/* ------------------------------------------------------------------------- */
/* Racine                                                                     */
/* ------------------------------------------------------------------------- */

.mmp-root {
    position: relative;
    z-index: 500;
    box-sizing: border-box;
    font-family: var(--mmp-police-active, inherit);
    /*
     * LA TAILLE DU TEXTE DU MENU (L'allure), ET SON POINT DE DEPART.
     *
     * 15px etait ecrit ici EN DUR : une taille choisie dans L'allure n'avait
     * alors aucun endroit ou se poser, et le menu gardait la taille du theme
     * meme quand le marchand demandait plus grand. La valeur par defaut est
     * exactement celle d'avant - une boutique deja en ligne ne change pas
     * d'aspect le jour ou le reglage apparait.
     *
     * Tout ce qui herite en descend : une entree (var(--mmp-taille-entree-active,
     * inherit)), un titre de bloc et une ligne de bloc, dont les defauts sont
     * calcules a partir de --mmp-taille. Les tailles PAR ELEMENT continuent de
     * la surcharger la ou elles sont posees : --mmp-taille-entree sur une
     * entree, --mmp-taille-titre et --mmp-taille-lien sur une brique.
     */
    font-size: var(--mmp-taille-active, 15px);
    line-height: 1.35;
    color: var(--mmp-barre-texte, #1A1D23);
    background: var(--mmp-barre-fond, #FFFFFF);
    border-top: 1px solid var(--mmp-barre-bord, #E2E5EA);
    border-bottom: 1px solid var(--mmp-barre-bord, #E2E5EA);
}

/*
 * LE MENU SUIT LE DEFILEMENT (option de L'allure).
 *
 * position: sticky, et rien d'autre : ni script, ni mesure, ni classe posee au
 * defilement - donc rien qui saute quand la page bouge vite. Le menu se colle
 * au haut de SON conteneur ; dans un en-tete qui defile avec la page, cela
 * revient a se coller a l'ecran. Le z-index est deja celui de la racine.
 */
.mmp-root.mmp-collant-oui {
    position: sticky;
    top: 0;
}

/*
 * ...ET SA VERSION QUI MARCHE PARTOUT. sticky ne sort jamais de son conteneur :
 * dans l'en-tete d'un theme, le menu s'en allait avec l'en-tete. front.js pose
 * mmp-colle des que le menu atteint le haut de l'ecran, et met une cale de sa
 * hauteur dans le flux pour que la page ne saute pas.
 *
 * Reserve connue : si un ancetre porte transform, filter ou perspective, il
 * devient le referent des elements fixes et le menu se collera a LUI. Aucun
 * theme livre ne le fait sur l'en-tete ; un theme tiers le pourrait.
 */
.mmp-root.mmp-colle {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    max-width: none;
    margin-left: 0;
}

.mmp-collant-cale {
    display: block;
}

/* Le repere du guetteur : 1 px, invisible, jamais dans le flux visuel. */
.mmp-collant-repere {
    height: 1px;
    margin: 0;
    padding: 0;
}

/* Plusieurs menus dans une page : chaque racine cree son propre contexte
   d'empilement, et la barre d'un menu pose plus bas recouvrait les panneaux
   du menu du dessus. Le menu survole, parcouru au clavier ou dont un panneau
   est ouvert (mmp-actif, pose par le script) passe devant les autres. */
.mmp-root:hover,
.mmp-root:focus-within,
.mmp-root.mmp-actif {
    z-index: 510;
}

.mmp-root *,
.mmp-root *::before,
.mmp-root *::after {
    box-sizing: border-box;
}

/* Le back-office comme les themes repeignent listes et boutons : on redit
   tout explicitement plutot que d'esperer un heritage. */
.mmp-root ul,
.mmp-root ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mmp-root p {
    margin: 0;
}

/*
 * CETTE REMISE A ZERO PESE 0,1,1 : elle bat toute regle de composant ecrite en
 * une seule classe. Trois fois le piege en deux jours - la marge du bouton du
 * tiroir, le centrage de la barre, puis la taille ET le trait d'une entree qui
 * est un <button>. Toute regle visant un composant qui peut etre l'une de ces
 * balises redit donc .mmp-root devant sa classe.
 */
.mmp-root button {
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.mmp-root a {
    color: inherit;
}

/*
 * AUCUN TRAIT SOUS UN LIEN DU MENU, QUOI QUE DISE LE THEME.
 *
 * Ecrite sans !important, cette remise a zero pese 0,1,1 : elle perd contre le
 * "#header a { text-decoration: underline }" d'un theme (1,0,1), et elle perd
 * aussi contre une regle de meme poids chargee APRES la notre (l'ordre decide,
 * a poids egal). Les deux cas donnent la meme chose a l'ecran : des rayons
 * soulignes au repos, sans que rien dans le module ne l'ait demande.
 *
 * Le <button> est du lot : une entree de la barre qui ouvre un panneau est un
 * bouton, pas un lien, et la facade d'une video aussi.
 *
 * Ce qui DOIT etre souligne se declare plus bas, avec son propre !important :
 * le trait permanent d'un bloc (--mmp-lien-trait), le survol d'un titre de
 * bloc et celui d'un bouton de banniere. Sans cela, cette seule ligne les
 * emporterait tous les trois. Le survol d'un NOM DE PRODUIT, lui, n'en a pas
 * besoin : il se pose sur le <span> du nom, que ni cette regle ni celle du
 * theme ne visent - et le lien qui l'entoure sortant desormais sans trait, il
 * n'a plus rien a lui transmettre.
 */
/*
 * LA SEPTIEME VOIE, ET C'EST POURQUOI CETTE REGLE NE VISE PLUS LE LIEN MAIS
 * TOUT CE QUI VIT DANS LE MENU (01/10/2026, contre-verification de la 1.5.4).
 *
 * Les six voies du dessus visent le <a>, le <button> et leurs ENFANTS. Aucune
 * ne regardait les ELEMENTS ENTRE LES DEUX - et c'est la que passait le trait
 * du marchand. CSS propage une decoration posee sur un conteneur A TRAVERS ses
 * descendants en flux : la poser sur le <ul>, sur le <li> ou sur le <div> qui
 * entourent la ligne la dessine sous le mot, et aucune declaration posee plus
 * bas ne l'efface - ni sur le lien, ni sur le <span> du mot.
 *     #header ul, #header li, #header div { text-decoration: underline }
 * Trois ecritures qu'un theme emploie couramment pour "les listes de l'en-tete
 * n'ont pas de puces et sont soulignees", et qui passaient les six portes.
 *
 * ELLE NE SE MESURE PAS EN VALEUR CALCULEE : getComputedStyle du mot repond
 * 'none' alors que le trait est dessine. Il se compte en pixels. Mesure du
 * 01/10/2026, trait du banc en rouge, ligne "T-SHIRTS STYLISES" d'un bloc
 * Rayons agrandie six fois, sur les deux bancs :
 *
 *     regle du theme (et d'elle seule)      AVANT        APRES
 *     #header ul { text-decoration }        5 028 px     0
 *     #header li { text-decoration }        5 028 px     0
 *     #header div { text-decoration }       7 032 px     0
 *     #header * { text-decoration }         7 032 px     0
 *     #header nav (notre racine), barre     2 100 px     0
 *
 * ET LA LARGEUR DU TRAIT DIT QUE C'EST BIEN CELLE-LA. Le lien fait 180 px, le
 * mot 140 : le trait mesure AVANT faisait 140 px. "Sur le Oversize et
 * Classique j'ai un trait en bas par defaut" - large comme le mot, pas comme
 * la ligne, exactement ce qu'il decrit. Un <li> borde, lui, donne un trait de
 * 180 px : ce n'est pas le meme defaut, et il est nomme plus bas.
 *
 * LA RACINE EST DANS LA LISTE, et elle y est pour une raison mesuree. Notre
 * racine est un <nav> : "#header nav { text-decoration: underline }" se posait
 * SUR elle. Les panneaux, en position absolue, sont hors flux et n'en
 * recevaient rien - mais la BARRE, elle, est en flux : les noms des entrees
 * sortaient soulignes et les panneaux non. Un defaut qui ne se voit qu'a
 * moitie est le plus long a reconnaitre.
 *
 * LES TROIS BALISES EXCLUES SONT UN TRAIT A ELLES SEULES, et leur trait vient
 * du navigateur, pas d'une regle a nous : <s> (le prix barre d'un produit, et
 * ce qu'un marchand barre dans un bloc Texte), <u> (ce qu'il souligne) et
 * <abbr title> (le trait pointille d'une abreviation). Sans l'exclusion, un
 * prix barre cesserait d'etre barre.
 *
 * ELLE REMPLACE DEUX REGLES, et ne laisse donc pas deux endroits pour une
 * seule question : ".mmp-root a, .mmp-root button" (1.5.2) et
 * ".mmp-root a *:not(s):not(u), ..." (1.5.4) disaient la meme chose sur une
 * partie du menu. Les deux inertes - la ligne sans adresse et l'entree sans
 * panneau, qui ne sont ni des liens ni l'enfant d'un lien - sont couvertes du
 * meme coup, puisqu'elles vivent dans la racine.
 *
 * CE QU'ELLE N'EMPORTE PAS, et c'est la specificite qui le decide, a
 * !important egal : cette remise a zero pese 0,1,3 ; le trait permanent d'un
 * bloc ".mmp-root .mmp-l" pese 0,2,0, le survol d'un titre 0,3,1, celui d'un
 * nom de produit 0,4,0, celui d'un bouton de banniere 0,3,0. Les quatre
 * passent devant. tools/tests/php/structure.php le verifie autrement, et
 * mieux : toute regle de cette feuille qui ecrit text-decoration sans
 * !important est signalee comme morte.
 *
 * LA MARQUE SOUS LE TEXTE est du meme lot, et c'est la huitieme voie :
 * "text-emphasis: '_'; text-emphasis-position: under" dessine un tiret sous
 * CHAQUE caractere - un trait large comme le mot, lui aussi, et une propriete
 * HERITEE, donc propagee comme la decoration. Mesure AVANT : 1 470 pixels
 * rouges sous la ligne, 900 sous le nom d'une entree ; APRES : 0 et 0. Le
 * module ne s'en sert nulle part.
 */
.mmp-root,
.mmp-root *:not(s):not(u):not(abbr) {
    text-decoration: none !important;
    text-emphasis: none !important;
}

/*
 * ... ET AUCUNE BORDURE NON PLUS, sur les liens qui n'en ont jamais.
 *
 * Certains themes soulignent par "border-bottom: 1px solid" plutot que par
 * text-decoration : le resultat se voit pareil, et notre remise a zero de la
 * decoration ne le touche pas. Ces onze-la n'ont de bordure nulle part dans
 * cette feuille - ils sortent donc nus. L'entree de la barre, elle, a son
 * propre trait de 2 px : il est protege a sa place, plus bas.
 *
 * LA LISTE EST L'INVENTAIRE DU GABARIT, pas une selection. Elle nomme TOUS
 * les <a> et tous les <button> de menu.tpl sauf l'entree de la barre : c'est
 * le seul moyen d'etre complet et de le rester. Quatre y manquaient, trouves
 * a la contre-verification du 30/09/2026 en posant la regle du theme sur les
 * liens PUIS sur les boutons :
 *   - .mmp-texte a, le lien qu'un marchand ecrit dans un bloc Texte : mesure
 *     1px solid #888 alors que tout le reste du menu sortait nu ;
 *   - .mmp-video-facade, .mmp-bascule et .mmp-fleche, trois <button>, sous un
 *     "#header button { border-bottom: 1px solid }" - la remise a zero des
 *     balises (".mmp-root button { border: 0 }") ne pese que 0,1,1 et perd.
 * Tout <a> ou <button> ajoute au gabarit vient ici, ou il sortira decore chez
 * qui a ce theme-la et nulle part ailleurs.
 */
.mmp-root .mmp-l,
.mmp-root .mmp-brique-titre a,
.mmp-root .mmp-produit-lien,
.mmp-root .mmp-image-lien,
.mmp-root .mmp-banniere-bouton,
.mmp-root .mmp-video-secours,
.mmp-root .mmp-video-facade,
.mmp-root .mmp-bascule,
.mmp-root .mmp-fleche,
.mmp-root .mmp-texte a,
.mmp-root .mmp-logo {
    border-bottom: 0 !important;
}

/*
 * ... NI OMBRE, NI IMAGE DE FOND : LES DEUX DERNIERES FACONS DE SOULIGNER.
 *
 * Elles etaient mesurees depuis le 30/09/2026 et laissees ouvertes, avec pour
 * seul motif "aucune boutique connue n'en a besoin". La boutique qui en avait
 * besoin, c'etait la sienne : apres la 1.5.2, qui ferme text-decoration et
 * border-bottom, il a redit dans la journee "la ils sont souligner je ne veux
 * pas". Un trait qui survit aux deux corrections precedentes ne pouvait plus
 * venir que de la.
 *
 * Reproduit le 30/09/2026 sur les deux bancs, avec ces seules regles ajoutees
 * au THEME - jamais au module - dans son custom.css :
 *     #header a, #header button { box-shadow: inset 0 -1px 0 0 #888 }
 *     #header a, #header button { background-image: linear-gradient(#888,#888);
 *                                 background-repeat: no-repeat;
 *                                 background-size: 100% 1px;
 *                                 background-position: 0 100% }
 * Mesure AVANT, valeurs CALCULEES : les 93 <a> et <button> du menu du banc
 * portent l'ombre, et les 93 portent l'image de fond - tout le menu souligne
 * au repos, exactement la capture du marchand. APRES : 0 et 0, sur les deux.
 *
 * CE QUE CETTE LIGNE NE CASSE PAS, verifie element par element :
 *   - le TRAIT ANIME du survol d'une ligne EST un degrade de fond, mais il est
 *     pose sur .mmp-l-mot, le <span> du mot, jamais sur le <a> qui l'entoure.
 *     Mesure apres correction : au repos "0px 1px", au survol "100% 1px" ;
 *   - le fond du BOUTON D'UNE BANNIERE s'ecrit "background: var(--mmp-accent)",
 *     un raccourci qui met deja background-image a none : rien ne change ;
 *   - aucune variable du menu ne peut valoir un degrade - couleur() n'accepte
 *     que #RGB ou #RRGGBB, longueur() qu'une longueur (MegaMenuPersoRendu).
 *     Un marchand ne peut donc pas poser d'image de fond sur un lien, et cette
 *     porte-la n'en ferme aucune autre ;
 *   - aucun <a> ni <button> de menu.tpl ne porte d'ombre dans cette feuille :
 *     les box-shadow du module sont sur .mmp-panneau, sur le tiroir et sur la
 *     surcouche d'apercu, et .mmp-video-mot porte un text-shadow, sur un
 *     <span>.
 * Le jour ou un composant du menu voudra une ombre ou un degrade, il le dira
 * sur SA classe et avec son propre !important - comme le survol d'un titre de
 * bloc le fait deja pour le trait, quelques centaines de lignes plus bas.
 */
.mmp-root a,
.mmp-root button {
    box-shadow: none !important;
    background-image: none !important;
}

/*
 * ... NI TRAIT DESSINE PAR UN PSEUDO-ELEMENT, LA CINQUIEME ET DERNIERE FACON.
 *
 * Trouvee le 30/09/2026 en cherchant ce qu'il restait apres les quatre autres,
 * et c'est la plus repandue des cinq : c'est ainsi que se fait un soulignement
 * ANIME dans un theme moderne ou un constructeur de page.
 *     #header a::after { content: ""; position: absolute; left: 0; right: 0;
 *                        bottom: 0; height: 1px; background: #888 }
 * Mesure du 30/09/2026, banc 8 : les 93 <a> et <button> du menu sortent avec
 * ce trait, et rien de ce qui precede ne l'atteint - ce n'est pas une
 * propriete de notre lien, c'est une BOITE que le theme fabrique dessus.
 * Aucune remise a zero propriete par propriete ne peut donc l'effacer : il n'y
 * a que "content: none", qui empeche la boite de naitre.
 *
 * Au passage, deux autres ecritures ont ete mesurees dans la meme passe, et
 * les deux sont deja encaissees, a 0 sur 93 :
 *   - "border-block-end: 1px solid", le nom LOGIQUE de la bordure du bas. Les
 *     proprietes physiques et logiques se disputent dans la meme cascade, et
 *     notre "border-bottom: 0 !important" gagne contre une declaration qui ne
 *     l'est pas, quelle que soit sa specificite ;
 *   - "background: linear-gradient(...) no-repeat 0 100% / 100% 1px", le
 *     RACCOURCI plutot que background-image : le raccourci pose la meme
 *     longhand, que notre "background-image: none !important" reprend.
 *
 * CE QUE CETTE LIGNE NE CASSE PAS : aucun <a> ni <button> du module n'a de
 * pseudo-element a lui. La croix du tiroir et les trois barres du bouton sont
 * dessinees par .mmp-bascule-trait::before et ::after - sur le <span> INTERNE
 * du bouton, pas sur le bouton -, le rond de lecture d'une video par
 * .mmp-video-rond::after, sur un <span> lui aussi, et le chevron d'une entree
 * est un <span> borde, sans pseudo-element. Verifie a l'ecran apres coup.
 */
.mmp-root a::before,
.mmp-root a::after,
.mmp-root button::before,
.mmp-root button::after {
    content: none !important;
}

/*
 * ... ET RIEN NON PLUS SUR CE QU'IL Y A DEDANS : LA SIXIEME VOIE (1.5.4).
 *
 * Les cinq remises a zero du dessus visent le <a> et le <button>. Aucune ne
 * vise leurs ENFANTS - et le mot d'une ligne de menu est un <span> :
 *     <a class="mmp-l"><span class="mmp-l-mot">Oversize</span></a>
 * Un theme ou un constructeur de page qui ecrit "#header a span",
 * "#header a > span", "#header a *" ou "#header span" peint donc sur le mot,
 * et les cinq portes de la 1.5.3 le laissent passer sans le voir.
 *
 * C'EST CE QUE LE MARCHAND DECRIT LE 01/10/2026, apres la 1.5.3 : "sur le
 * Oversize et Classique j'ai un trait en bas par defaut". Son trait est large
 * comme le MOT, pas comme la ligne - et c'est la largeur qui DESIGNE le
 * coupable : une ligne de menu fait toute la colonne (282 px sur le banc), le
 * mot ne fait que son texte (88 px). Une decoration posee sur le <a> est large
 * comme la ligne ; une decoration posee sur le <span> est large comme le mot.
 *
 * Reproduit le 01/10/2026 sur les deux bancs, avec ces seules regles ajoutees
 * au THEME - jamais au module - dans son custom.css :
 *     #header a span, #wrapper a span { text-decoration: underline }
 * Mesure AVANT, valeurs CALCULEES : 124 des 144 enfants de lien du menu
 * d'essai sortent souligne au repos, dont les 48 .mmp-l-mot ; avec les cinq
 * voies posees a la fois sur l'enfant, 144 sur 144. APRES : 0 sur 144, les
 * liens du theme portant toujours les leurs (temoin).
 *
 * LE PIEGE DE CETTE REMISE A ZERO, ET IL EST GROS : NOTRE PROPRE TRAIT ANIME
 * EST UN FOND POSE SUR CE MEME <span>. Un "background-image: none" sur les
 * enfants d'un lien le tuerait. Ses quatre declarations de fond portent donc
 * desormais !important, et celle du survol aussi (plus bas, "LE TRAIT SE
 * DESSINE"). A !important egal, c'est la specificite qui tranche, et
 * ".mmp-root .mmp-l .mmp-l-mot" (0,3,0) bat ".mmp-root a *" (0,1,1) : le
 * trait anime passe devant la remise a zero, le theme passe derriere.
 * Cela ferme au passage une porte que rien d'autre ne fermait, et c'est
 * peut-etre LA sienne : avec "#header a span { background-size: 100% 1px }",
 * la mesure du 01/10/2026 donnait un trait de 100 % AU REPOS et une animation
 * morte (repos 100% 1px -> survol 100% 1px). Le trait du marchand, trait pour
 * trait - large comme le mot, present sans qu'on survole.
 *
 * LES TROIS DESSINS DU MODULE qui vivent sur un enfant de lien passent sous le
 * meme !important, pour la meme raison :
 *   - le CHEVRON d'une entree, deux bordures sur un <span> (mesure AVANT avec
 *     la regle du theme : 1px solid rouge au lieu de 2px de la couleur du
 *     texte - le theme remplacait deja notre dessin) ;
 *   - la CROIX DU TIROIR, deux pseudo-elements sur le <span> interne du bouton
 *     (mesure AVANT : ::before content "_" au lieu de "") ;
 *   - le TRIANGLE DE LECTURE d'une video, un pseudo-element sur un <span>.
 * Le fond d'une PASTILLE, celui du rond d'une video et celui des trois barres
 * du bouton n'en ont pas besoin : ce sont des background-COLOR, ecrits par le
 * raccourci background, et "background-image: none" ne les touche pas.
 * Verifie element par element apres correction.
 *
 * <s> ET <u> SONT EXCLUS PAR LEUR NOM. Ces deux balises SONT un trait, et leur
 * trait vient du navigateur, pas d'une regle a nous : le <s> du prix barre
 * d'un produit (.mmp-produit-avant, dans le lien du produit) et le <u> ou le
 * <s> qu'un marchand ecrit dans un bloc Texte - MegaMenuPersoSanitizer
 * autorise les deux. Une remise a zero sans exclusion l'emporterait, et un
 * prix barre cesserait d'etre barre.
 *
 * LES DEUX ELEMENTS INERTES SONT DU LOT, bien qu'ils ne soient l'enfant de
 * personne et qu'ils ne soient pas des liens. Le gabarit a deux endroits ou un
 * element se lit comme un lien sans en etre un :
 *   - la LIGNE SANS ADRESSE d'une sous-liste, <span class="mmp-l
 *     mmp-l-inerte"> ;
 *   - l'ENTREE sans adresse ET sans panneau, <span class="mmp-entree-lien
 *     mmp-entree-inerte"> - un intertitre, avec sa pastille et sa petite
 *     phrase dedans.
 * Aucune des regles du dessus ne les vise par leur balise. La capture du
 * tiroir ouvert du 01/10/2026 l'a dit sans un mot : avec "#header span" au
 * theme, "MMPD Entree A" et "MMPD Entree B" sortaient nues et "MMPD Entree C",
 * la seule inerte, portait son trait rouge. C'est la CAPTURE qui a trouve ce
 * trou-la, pas la mesure : les deux inertes ne sont ni des <a> ni des
 * <button>, et le compte des enfants de lien ne les voyait pas.
 *
 * Deux details de cascade, voulus, et qui tiennent a l'ORDRE d'ecriture - a
 * !important egal et a specificite egale, c'est la derniere regle qui gagne :
 *   - .mmp-l-inerte porte aussi la classe mmp-l : son trait reste celui que la
 *     brique a choisi (--mmp-lien-trait, plus bas), comme ses voisines. Seuls
 *     l'ombre, le fond et les pseudo-elements se ferment ici ;
 *   - .mmp-entree-inerte porte aussi mmp-entree-lien : le trait de 2 px
 *     transparent, la PLACE de l'indicateur de page courante, lui revient plus
 *     bas. L'entree inerte garde donc son aplomb avec ses voisines.
 */
/* La remise a zero du TRAIT de ces memes elements n'est plus ici : elle a
   grandi d'un etage et vit au-dessus, sur ".mmp-root" et sur tout ce qui
   vit dedans - la decoration d'un ANCETRE se propage, et il fallait aller
   la chercher la ou elle se pose. Ce qui suit ne concerne donc plus que les
   quatre dessins qu'une declaration posee sur l'element lui-meme produit. */
.mmp-root a *,
.mmp-root button *,
.mmp-root .mmp-l-inerte,
.mmp-root .mmp-entree-inerte,
.mmp-root .mmp-entree-inerte * {
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

/*
 * ... NI TRAIT DESSINE PAR UNE IMAGE DE BORDURE, et celle-la survit a notre
 * remise a zero de la bordure - mesure, pas suppose (01/10/2026).
 *
 *     #header a { border-bottom: 1px solid transparent;
 *                 border-image: linear-gradient(#888,#888) 1 / 0 0 1px 0 }
 *
 * "border-bottom: 0 !important" gagne bien contre la premiere declaration :
 * la bordure calculee passe a "0px none". Et le trait est dessine quand meme,
 * 8 460 pixels rouges sous la ligne, large comme elle (180 px) : l'image de
 * bordure a sa propre largeur (border-image-width, le "/ 0 0 1px 0"), et le
 * moteur la peint sans regarder border-style. Il n'y a que "border-image:
 * none" pour l'empecher. APRES : 0 pixel.
 *
 * Le module n'a pas une seule image de bordure - la ligne ne retire donc rien
 * a personne. Les enfants sont du lot : la meme regle posee sur "#header a
 * span" dessinerait le trait large comme le mot.
 */
.mmp-root a,
.mmp-root button,
.mmp-root a *,
.mmp-root button * {
    border-image: none !important;
}

.mmp-root a *::before,
.mmp-root a *::after,
.mmp-root button *::before,
.mmp-root button *::after,
.mmp-root .mmp-l-inerte::before,
.mmp-root .mmp-l-inerte::after,
.mmp-root .mmp-entree-inerte::before,
.mmp-root .mmp-entree-inerte::after,
.mmp-root .mmp-entree-inerte *::before,
.mmp-root .mmp-entree-inerte *::after {
    content: none !important;
}

.mmp-root img {
    max-width: 100%;
    height: auto;
}

/* L'anneau de focus n'est JAMAIS retire. Le double selecteur couvre les
   moteurs sans :focus-visible, ou la regle entiere serait invalide si elle
   etait groupee avec la premiere. */
.mmp-root :focus {
    outline: 2px solid var(--mmp-accent, #2F4FD8);
    outline-offset: 2px;
}

.mmp-root :focus:not(:focus-visible) {
    outline: none;
}

.mmp-root :focus-visible {
    outline: 2px solid var(--mmp-accent, #2F4FD8);
    outline-offset: 2px;
}

/* Texte reserve aux lecteurs d'ecran. .sr-only n'existe pas sur hummingbird
   et .visually-hidden n'existe pas sur classic : on emporte la notre. */
.mmp-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * Pleine largeur : le hook choisi peut etre enferme dans un .container qui
 * plafonne a 1140 px (classic) ou 1320 px (hummingbird). Le decalage a 50%
 * fait sortir la barre de son conteneur.
 * Reserve : 100vw compte la barre de defilement verticale, ce qui peut ajouter
 * quelques pixels de debordement horizontal sur certains navigateurs de bureau.
 * C'est le prix connu de ce procede, et c'est pourquoi il est une OPTION.
 */
.mmp-root.mmp-large {
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
}

/*
 * .mmp-root DEVANT LA CLASSE, comme pour le bouton : la remise a zero
 * ".mmp-root ul" pese 0,1,1 et ecrasait le "margin: 0 auto" comme le padding.
 * La barre n'etait donc NI centree NI en retrait des bords - invisible tant
 * que le menu vivait dans un conteneur deja centre, evident des qu'il prend
 * toute la largeur (mesure le 23/09/2026 : barre a gauche a 0 px, contenu du
 * theme a 135 px).
 */
.mmp-root .mmp-barre {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    max-width: var(--mmp-largeur-max-active, 1280px);
    margin: 0 auto;
    padding: 0 var(--mmp-espace-active, 16px);
}

.mmp-align-centre .mmp-barre {
    justify-content: center;
}

.mmp-align-droite .mmp-barre {
    justify-content: flex-end;
}

/* ------------------------------------------------------------------------- */
/* Entrees de la barre                                                        */
/* ------------------------------------------------------------------------- */

/*
 * LA POLICE DE CETTE ENTREE, ET DE TOUT CE QU'ELLE CONTIENT (01/10/2026).
 *
 * Elle se lit ICI, sur le <li>, et nulle part ailleurs : font-family s'herite,
 * donc une seule lecture habille le NOM de l'entree - dans la barre comme dans
 * le tiroir - ET son PANNEAU tout entier, qui est son enfant. Y compris en
 * panneau pleine largeur : le panneau reste dans le <li>, il ne fait que se
 * positionner sur la racine.
 *
 * LE REPLI 'inherit' EST ECRIT DANS LA FEUILLE, et c'est ce qui le rend
 * valable. Sur une propriete personnalisee, 'inherit' voudrait dire "reprends
 * --mmp-police de mon parent" ; en repli de var(), sur font-family, il reprend
 * la police du parent - donc celle du menu (.mmp-root), donc celle de la page
 * quand le menu n'en a choisi aucune. Sans variable posee, la valeur calculee
 * ne change pas d'un caractere (mesure du 01/10/2026, les deux bancs).
 *
 * UNE ENTREE N'ATTEINT PAS SES VOISINES. La variable est posee EN LIGNE sur
 * son propre <li> par L'apparence, et une variable ne descend que vers ses
 * descendants : l'entree d'a cote lit celle de la racine, jamais celle de sa
 * voisine. Mesure du 01/10/2026 : Georgia sur la premiere entree, la seconde
 * reste a la police du theme.
 */
.mmp-entree {
    position: relative;
    display: flex;
    align-items: stretch;
    font-family: var(--mmp-police-active, inherit);
}

/* Un panneau pleine largeur se positionne sur la racine, pas sur son entree :
   l'entree passe donc en position statique le temps de le laisser sortir. */
.mmp-entree.mmp-panneau-pleine {
    position: static;
}

.mmp-root .mmp-entree-lien {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--mmp-hauteur-barre-active, 48px);
    padding: 0 14px;
    font-size: var(--mmp-taille-entree-active, inherit);
    /* L'EPAISSEUR DU NOM (L'apparence de ce panneau). 600 etait ecrit en dur
       ici : c'est exactement ce que le repli redit, et une boutique qui n'a
       rien regle ne bouge pas. ".mmp-root" devant la classe est deja la pour
       une autre raison, et elle sert aussi a celle-ci : une entree qui ouvre
       un panneau est un <button>, et ".mmp-root button { font: inherit }"
       (0,1,1) emporterait une regle ecrite en une seule classe. */
    font-weight: var(--mmp-graisse-entree-active, 600);
    color: var(--mmp-barre-texte, #1A1D23) !important;
    white-space: nowrap;
    /* Le trait de 2 px est la PLACE de l'indicateur de page courante : il est
       transparent tant qu'on n'y est pas, et il evite que l'entree saute d'un
       cran en arrivant sur la page. !important parce qu'un "#header a
       { border-bottom: 1px solid }" du theme (1,0,1) le remplacait par le sien
       - mesure du 30/09/2026 : 1px solid la ou le module en veut 2. */
    border-bottom: 2px solid transparent !important;
}

.mmp-root .mmp-entree-lien:hover,
.mmp-root .mmp-entree-lien:focus {
    color: var(--mmp-barre-texte-actif, #2F4FD8) !important;
}

/*
 * LE TRAIT SE DESSINE, il n'apparait pas - ET IL S'ARRETE AU MOT.
 *
 * text-decoration s'allume d'un bloc : on le remplace par un degre plat pose
 * en fond, large de 0 % au repos et de 100 % au survol. Le trait part donc de
 * la gauche en 220 ms. Aucun deplacement du texte - contrairement a une
 * bordure, qui pousserait la ligne suivante.
 *
 * DEUX CORRECTIONS DU 29/09/2026, signalees a l'usage :
 *
 * 1. Le trait ne visait pas le bon element. Pose sur .mmp-l - qui est une
 *    boite flexible large de toute la colonne, parce que c'est elle la cible
 *    du doigt - il allait jusqu'au bord : 373 px de trait sous un mot de
 *    148 px (mesure du banc 8, tiroir ouvert). Il est maintenant pose sur
 *    .mmp-l-mot, l'element flexible qui n'est large QUE de son texte. La zone
 *    cliquable ne bouge pas d'un pixel : c'est toujours .mmp-l tout entier
 *    qui recoit le clic, et c'est toujours son survol qui allume le trait.
 *
 * 2. Il ne concernait pas les entrees. Un nom d'entree (T-SHIRTS, SWEATS)
 *    n'est pas un lien de liste : il ne se souligne plus. Le trait reste aux
 *    LIGNES DE BLOC - ce qu'un bloc Rayons ou un bloc Liens affiche.
 *
 * currentColor : le trait prend la couleur du texte survole, y compris celle
 * qu'une entree ou une brique s'est choisie.
 *
 * LES QUATRE DECLARATIONS PORTENT !important DEPUIS LA 1.5.4, et ce n'est pas
 * un durcissement de plus : c'est la condition pour que la remise a zero des
 * ENFANTS DE LIEN (haut de la feuille) ne tue pas notre propre trait. Le mot
 * est un <span> dans un <a> : ".mmp-root a * { background-image: none
 * !important }" l'atteint. A !important egal, la specificite tranche, et
 * (0,3,0) bat (0,1,1) - le trait anime passe devant la remise a zero.
 * Chaque declaration ferme en plus une porte mesuree le 01/10/2026 avec
 * "#header a span" dans le theme du banc :
 *   - background-image : sans lui, le degrade du theme remplacait le notre ;
 *   - background-size  : sans lui, le "100% 1px" du theme donnait un trait
 *     plein AU REPOS et une animation morte - le trait du marchand ;
 *   - background-repeat : un "repeat" du theme empilerait le trait de 1 px sur
 *     toute la hauteur du mot, qui sortirait surligne ;
 *   - background-position : un "0 0" du theme mettrait le trait AU-DESSUS du
 *     mot.
 */
.mmp-root .mmp-l .mmp-l-mot {
    background-image: linear-gradient(currentColor, currentColor) !important;
    background-repeat: no-repeat !important;
    /* 100 % : le bas de la boite du mot, soit trois pixels sous la ligne de
       base pour une hauteur de ligne de 1,35. Sur .mmp-l, il fallait remonter
       de 2 px (calc) parce que la boite etait plus haute que le texte. */
    background-position: 0 100% !important;
    background-size: 0 1px !important;
    transition: background-size 220ms cubic-bezier(.2, .7, .3, 1);
}

.mmp-root .mmp-l:hover .mmp-l-mot,
.mmp-root .mmp-l:focus-visible .mmp-l-mot {
    background-size: 100% 1px !important;
}

/*
 * LE TRAIT PERMANENT, QUAND LA BRIQUE LE DEMANDE (L'apparence).
 *
 * La valeur reste une VARIABLE - "Liens soulignes : toujours / jamais /
 * seulement au survol", posee en ligne sur la brique par l'atelier. Le
 * !important ne fige rien : il ne sert qu'a passer devant la remise a zero
 * ".mmp-root a" du haut de la feuille, qui est elle-meme !important pour
 * passer devant le theme. Sans lui, choisir "toujours souligne" n'aurait plus
 * aucun effet.
 */
.mmp-root .mmp-l {
    text-decoration: var(--mmp-lien-trait, none) !important;
}

/* Qui a demande moins d'animation n'en recoit aucune : le trait est alors
   simplement la, ou pas. */
@media (prefers-reduced-motion: reduce) {
    .mmp-root .mmp-l .mmp-l-mot {
        transition: none;
    }
}

/* La couleur du trait allume l'indicateur. !important a son tour : la regle
   du dessus l'est devenue, et un !important ne se bat qu'avec un autre. */
.mmp-root .mmp-entree-lien[aria-current="page"] {
    color: var(--mmp-barre-texte-actif, #2F4FD8) !important;
    border-bottom-color: var(--mmp-accent, #2F4FD8) !important;
}

/*
 * LA PETITE PHRASE EST A COTE DU NOM, PAS DESSOUS (29/09/2026).
 *
 * Elle passait a la ligne : "flex: 1 0 100%" - une base de 100 %, qui dans un
 * conteneur flexible qui enroule force le passage a la ligne. C'etait voulu
 * en 1.3.x, ce ne l'est plus : le marchand veut lire "SWEATS  Bientot" sur
 * une seule ligne, et une entree haute de deux lignes cassait le rythme du
 * tiroir.
 *
 * Elle redevient donc un element flexible ordinaire, pose a la suite du nom.
 * L'ecart franc entre les deux est le "gap: 6px" du lien lui-meme : rien a
 * ajouter, rien a desaccorder.
 *
 * max-width : une phrase longue se coupe aux points de suspension au lieu de
 * pousser l'entree hors du tiroir. Elle ne grossit pas le nom, qui garde sa
 * taille propre (--mmp-taille-entree) ; elle ne le pousse pas non plus, le
 * nom etant pose avant elle et sans retrecissement utile.
 */
.mmp-root .mmp-entree-accroche {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 14em;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .04em;
    color: var(--mmp-panneau-texte-doux, #5A6270);
}

/* nowrap, et non plus wrap : l'enroulement n'existait que pour laisser la
   petite phrase descendre a la ligne. Il ne doit plus rien descendre - avec
   wrap, une phrase un peu longue repartait dessous au lieu de se couper. */
.mmp-root .mmp-entree-lien,
.mmp-root .mmp-entree-bouton {
    flex-wrap: nowrap;
}

.mmp-entree-inerte {
    color: var(--mmp-panneau-texte-doux, #5A6270);
    cursor: default;
}

.mmp-badge {
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    color: #FFFFFF;
    /* --mmp-badge-fond est pose EN LIGNE sur l'entree quand le marchand a
       choisi une couleur de pastille ; sinon c'est l'accent du menu. Les deux
       ont ete verifies en contraste avec du blanc dans le tableau de bord. */
    background: var(--mmp-badge-fond, var(--mmp-accent, #2F4FD8));
    border-radius: 999px;
}

/* Une entree peut porter SES couleurs : le tableau de bord ne les accepte
   qu'apres le meme controle AA que l'ecran L'allure, contre le fond de la
   barre. Sans couleur choisie, la variable n'existe pas et l'entree garde
   celles du menu. */
.mmp-entree-teintee > .mmp-entree-lien {
    color: var(--mmp-entree-texte, var(--mmp-barre-texte, #1A1D23)) !important;
}

.mmp-entree-teintee > .mmp-entree-lien:hover,
.mmp-entree-teintee > .mmp-entree-lien:focus {
    color: var(--mmp-entree-texte, var(--mmp-barre-texte-actif, #2F4FD8));
    background: var(--mmp-entree-survol, transparent);
}

/* L'icone d'une entree : meme taille que le texte qui la suit, et le meme
   trait que partout ailleurs. */
.mmp-ic-entree {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

/* Le chevron du bouton : dessine en CSS, sans aucune icone tierce ni police
   distante. C'est un <span> DANS un <button> : la remise a zero des enfants de
   lien (haut de la feuille) lui retire sa bordure du bas, donc la moitie du
   dessin. Elle la reprend ici sous le meme !important. ".mmp-root" devant la
   classe pour la meme raison qu'ailleurs : sans lui, la regle pese (0,1,0) et
   perd contre (0,1,1) le jour ou l'on retirerait le !important.
   Mesure du 01/10/2026 AVANT correction, avec "#header a span { border-bottom:
   1px solid }" au theme : chevron a 1px rouge au lieu de 2px de la couleur du
   texte - le theme remplacait deja notre dessin. */
.mmp-root .mmp-chevron {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg) translate(-2px, -2px);
}

.mmp-root .mmp-fleche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: var(--mmp-hauteur-barre-active, 48px);
    color: var(--mmp-barre-texte, #1A1D23);
}

.mmp-entree.mmp-ouvert > .mmp-fleche .mmp-chevron,
.mmp-entree.mmp-ouvert > .mmp-entree-bouton .mmp-chevron {
    transform: rotate(-135deg) translate(-2px, -2px);
}

/* ------------------------------------------------------------------------- */
/* Panneaux                                                                   */
/* ------------------------------------------------------------------------- */

/*
 * visibility:hidden plutot que display:none : un element en display:none ne
 * peut pas etre atteint par :focus-within, donc le menu deviendrait
 * inaccessible au clavier des que le script manque. visibility:hidden le
 * retire bien de l'ordre de tabulation tant qu'il est ferme.
 */
.mmp-panneau {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    width: max-content;
    max-width: min(92vw, var(--mmp-largeur-max-active, 1280px));
    /*
     * LA TAILLE ET L'EPAISSEUR DU TEXTE DE CE PANNEAU (01/10/2026).
     *
     * Les deux variables sont posees sur l'ENTREE par L'apparence et lues ici,
     * sur son panneau : tout ce que le panneau contient en herite.
     *
     * LE REPLI DE LA TAILLE EST CELLE DU MENU, mot pour mot ce que la racine
     * calcule : sans variable, le panneau fait 15 px comme avant. Aucune
     * longueur du menu n'est ecrite en em dans un panneau - les trois seuls em
     * de la feuille sont dans la barre (la petite phrase, l'interlettrage d'un
     * titre de colonne) : changer l'origine de la taille du panneau ne deplace
     * donc rien d'autre.
     *
     * CELUI DE L'EPAISSEUR EST 'inherit', ET NON 400, pour deux raisons
     * mesurees. D'abord le panneau n'a JAMAIS porte de font-weight : il prend
     * celle de ce qui l'entoure, et 400 l'aurait figee - sur les deux bancs
     * elle vaut bien 400, mais une boutique dont l'en-tete est ecrit en 300
     * aurait change d'aspect le jour ou le champ parait. Ensuite c'est
     * 'inherit' qui fait DESCENDRE l'epaisseur du panneau jusqu'aux lignes de
     * bloc : le repli de --mmp-graisse-lien est 'inherit' a son tour (voir
     * .mmp-l), donc une epaisseur choisie sur le panneau les atteint, et une
     * epaisseur choisie sur la brique passe devant. Avec 400 des deux cotes,
     * le reglage du panneau n'aurait touche aucune ligne : un reglage sans
     * effet sur la partie du panneau qui en compte le plus.
     */
    font-size: var(--mmp-taille-panneau-active, var(--mmp-taille-active, 15px));
    font-weight: var(--mmp-graisse-panneau-active, inherit);
    color: var(--mmp-panneau-texte, #1A1D23);
    background: var(--mmp-panneau-fond, #FFFFFF);
    border: 1px solid var(--mmp-panneau-bord, #E2E5EA);
    border-radius: var(--mmp-rayon-active, 10px);
    box-shadow: 0 8px 24px rgba(16, 20, 30, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 160ms cubic-bezier(.2, .7, .3, 1),
                transform 160ms cubic-bezier(.2, .7, .3, 1),
                visibility 0s linear 160ms;
}

.mmp-panneau-entree > .mmp-panneau {
    min-width: 100%;
}

.mmp-panneau-pleine > .mmp-panneau {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

.mmp-panneau-dedans {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mmp-espace-active, 16px);
    max-width: var(--mmp-largeur-max-active, 1280px);
    margin: 0 auto;
    padding: var(--mmp-espace-active, 16px);
}

.mmp-panneau-liste .mmp-panneau-dedans {
    display: block;
    min-width: 220px;
    padding: 8px;
}

.mmp-colonne {
    flex: 1 1 0;
    min-width: var(--mmp-colonne-min-active, 180px);
}

/* Les largeurs sont des PARTS, pas des douziemes : le tableau de bord parle
   en mots ("un tiers", "la moitie") et la feuille fait le partage. */
.mmp-part-2 {
    flex-grow: 2;
}

.mmp-part-3 {
    flex-grow: 3;
}

.mmp-part-4 {
    flex-grow: 4;
}

.mmp-colonne-titre {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--mmp-titre, #1A1D23);
}

/*
 * LA POLICE DE CETTE BRIQUE (01/10/2026). Meme mecanique que l'entree, un
 * etage plus bas : lue une seule fois sur la brique, elle habille son titre et
 * ses lignes par heritage. Une brique sans police lit celle de son entree, et
 * a defaut celle du menu - les trois se superposent dans cet ordre sans
 * qu'une seule regle de plus soit ecrite, puisque c'est la VARIABLE qui se
 * superpose, pas la regle.
 */
.mmp-brique {
    font-family: var(--mmp-police-active, inherit);
}

.mmp-brique + .mmp-brique {
    margin-top: var(--mmp-espace-active, 16px);
}

.mmp-brique-titre {
    margin-bottom: 6px;
    /* Les deux tailles sont des VARIABLES : l'atelier les pose sur la brique
       elle-meme, et elles ne valent que pour celle-la (1.3.4). Le DEFAUT, lui,
       suit desormais la taille du menu : 14 px tant que le menu est a 15,
       mais un menu ecrit en grand n'a plus ses titres de bloc figes a 14.
       ET IL PASSE PAR LA TAILLE DU PANNEAU (01/10/2026) : sans ce maillon, une
       taille choisie sur le panneau ne serait jamais arrivee jusqu'aux titres
       de bloc, qui ont leur propre font-size - un reglage a moitie mort. Les
       trois etages se lisent ici de droite a gauche : menu, puis panneau, puis
       brique, le dernier pose gagnant.
       ET LA LARGEUR SE RESOUT AVANT L'ETAGE D'ELEMENT. Chaque -active a deja
       choisi SA largeur, chacune pour son compte : la chaine qui suit ne
       superpose plus que des etages d'element. C'est ce qui permet de regler la
       taille des titres de bloc en telephone sans que la taille du panneau en
       ordinateur ne la recouvre - l'inverse (la largeur en dernier) aurait fait
       qu'un panneau regle en ordinateur battait un titre regle en telephone. */
    font-size: var(--mmp-taille-titre-active, calc(var(--mmp-taille-panneau-active, var(--mmp-taille-active, 15px)) - 1px));
    /* 700 est exactement ce qui etait ecrit ici. */
    font-weight: var(--mmp-graisse-titre-active, 700);
    color: var(--mmp-titre, #1A1D23) !important;
}

/* Le titre d'un bloc qui mene quelque part se souligne au survol : c'est une
   decoration VOULUE, elle passe donc sous le meme !important que la remise a
   zero. Mesure du 30/09/2026, AVANT : dans l'en-tete, classic ecrit
   "#header a:hover { text-decoration: none }" (1,0,1) et ce survol-la ne
   marchait deja pas - le trait se voyait dans le corps de page et nulle part
   dans l'en-tete, ou vit le menu. */
.mmp-root .mmp-brique-titre a:hover {
    color: var(--mmp-lien-survol, #2F4FD8) !important;
    text-decoration: underline !important;
}

/* ------------------------------------------------------------------------- */
/* Listes de liens dans un panneau                                            */
/* ------------------------------------------------------------------------- */

.mmp-root .mmp-l {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 3px 0;
    /* Meme regle que le titre de bloc : le choix de la brique gagne, et a
       defaut la ligne fait la taille du PANNEAU, et a defaut celle du menu.
       Ecrit "15px" en dur, il rendait le reglage de L'allure sans effet sur
       les liens - la partie du menu qui en compte le plus ; sans le maillon
       du panneau (01/10/2026), c'est le reglage du panneau qui ne les aurait
       pas atteintes. */
    font-size: var(--mmp-taille-lien-active, var(--mmp-taille-panneau-active, var(--mmp-taille-active, 15px)));
    /* L'EPAISSEUR DES LIGNES (L'apparence de cette brique), et son repli est
       'inherit' parce que la ligne n'a jamais porte de font-weight : elle
       prenait celle du panneau, qui prend celle du theme. 'inherit' garde donc
       la boutique au pixel ET laisse passer l'epaisseur choisie sur le
       panneau, que --mmp-graisse-lien recouvre quand la brique en demande une.
       Deux voisines restent plus fortes que cette declaration, et c'est voulu :
       la ligne de la page courante (0,2,1) et la ligne inerte, dont la regle
       porte ".mmp-root" juste pour ca. */
    font-weight: var(--mmp-graisse-lien-active, inherit);
    color: var(--mmp-lien, #1A1D23) !important;
}

.mmp-root .mmp-l:hover,
.mmp-root .mmp-l:focus {
    color: var(--mmp-lien-survol, #2F4FD8) !important;
}

.mmp-root .mmp-l[aria-current="page"] {
    font-weight: 700;
    color: var(--mmp-lien-survol, #2F4FD8);
}

/*
 * ".mmp-root" DEVANT LA CLASSE, ET CE N'EST PAS UN ORNEMENT (01/10/2026).
 *
 * .mmp-l-inerte est une ligne sans adresse - un <span> qui porte AUSSI la
 * classe mmp-l. Du jour ou ".mmp-root .mmp-l" (0,2,0) a recu un font-weight,
 * celui de --mmp-graisse-lien, cette regle ecrite en une seule classe (0,1,0)
 * a perdu : l'intertitre d'une sous-liste redevenait maigre comme les lignes
 * qu'il annonce. Mesure du 01/10/2026 sur les deux bancs, temoin pose dans la
 * page : 700 avant la nouvelle declaration, 400 avec elle et sans ce
 * selecteur-ci, 700 de nouveau avec. A poids egal, c'est l'ordre qui tranche,
 * et cette regle est ecrite APRES celle de .mmp-l.
 */
.mmp-root .mmp-l-inerte {
    font-weight: 700;
    cursor: default;
}

.mmp-root .mmp-vignette {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.mmp-compte {
    font-size: 12px;
    color: var(--mmp-panneau-texte-doux, #5A6270);
}

/*
 * TOUT niveau imbrique, et non plus les seuls 2 et 3. La regle s'ecrit par
 * imbrication (.mmp-liste .mmp-liste) plutot que par une classe de niveau :
 * une brique Rayons reglee sur "tous les niveaux" sort des mmp-liste-4 et
 * au-dela, qui n'avaient aucun style et se lisaient comme un premier niveau -
 * ni retrait, ni trait, ni texte adouci.
 */
.mmp-liste .mmp-liste,
.mmp-sous-liste-3 {
    padding-left: 12px;
    border-left: 1px solid var(--mmp-panneau-bord, #E2E5EA);
}

/* Un niveau imbrique reste un cran plus petit que son parent, quelle que soit
   la taille choisie : le calc suit la variable au lieu de la contredire. */
.mmp-liste .mmp-liste .mmp-l {
    font-size: calc(var(--mmp-taille-lien-active, var(--mmp-taille-panneau-active, var(--mmp-taille-active, 15px))) - 1px);
    color: var(--mmp-panneau-texte-doux, #5A6270) !important;
}

/* Disposition "colonnes" d'une brique : le texte coule sur deux colonnes.
   column-count ne coupe jamais un <li> en deux et ne demande aucun calcul. */
.mmp-disposition-colonnes > .mmp-liste-1 {
    column-count: 2;
    column-gap: var(--mmp-espace-active, 16px);
}

.mmp-disposition-colonnes > .mmp-liste-1 > .mmp-item {
    break-inside: avoid;
}

/* Disposition "grille" : des cases qui se rangent d'elles-memes, autant par
   rangee que la largeur en permet. Pour une liste de logos de marques, c'est
   la seule disposition qui ne laisse pas la moitie du panneau vide.

   Le mot 'grille' etait accepte par le rendu depuis le debut (Briques::rendre)
   et n'avait AUCUNE regle ici : le marchand l'aurait choisi, publie, et vu sa
   liste inchangee. Un reglage sans effet est exactement ce que ce module
   s'interdit - d'ou ces regles, ecrites en meme temps que le champ. */
.mmp-disposition-grille > .mmp-liste-1 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 4px var(--mmp-espace-active, 16px);
}

/* Une sous-liste garde sa pile verticale : la grille ne vaut que pour le
   premier niveau, sinon les sous-rayons se detachent de leur rayon. */
.mmp-disposition-grille > .mmp-liste-1 > .mmp-item > .mmp-liste {
    display: block;
}

/* ------------------------------------------------------------------------- */
/* Produits                                                                   */
/* ------------------------------------------------------------------------- */

.mmp-produits {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.mmp-root .mmp-produit-lien {
    display: block;
    color: var(--mmp-panneau-texte, #1A1D23);
}

/* Le nom d'un produit se souligne au survol : une decoration VOULUE, et la
   seule du module qui se pose sur un ENFANT de lien - un <span> dans le <a> du
   produit. Elle passe donc sous le meme !important que la remise a zero des
   enfants, qui l'emporterait sinon. Jusqu'a la 1.5.3 elle n'en avait pas
   besoin : rien ne visait encore les enfants. */
.mmp-root .mmp-produit-lien:hover .mmp-produit-nom {
    text-decoration: underline !important;
}

.mmp-root .mmp-produit-image {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 6px;
    border-radius: var(--mmp-rayon-active, 10px);
}

.mmp-produit-nom {
    display: block;
    font-size: 13px;
}

.mmp-produit-prix {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mmp-accent, #2F4FD8);
}

.mmp-produit-avant {
    margin-left: 4px;
    font-weight: 400;
    color: var(--mmp-panneau-texte-doux, #5A6270);
}

.mmp-image {
    display: block;
    border-radius: var(--mmp-rayon-active, 10px);
}

.mmp-texte {
    font-size: 14px;
    color: var(--mmp-panneau-texte, #1A1D23);
}

/* ------------------------------------------------------------------------- */
/* Icone d'une ligne                                                          */
/* ------------------------------------------------------------------------- */

/* Le trait suit la couleur du texte : une icone qui garderait sa couleur
   jurerait avec l'allure choisie par le marchand, et deviendrait illisible
   sur un panneau sombre. */
.mmp-ic {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: inherit;
}

/* ------------------------------------------------------------------------- */
/* Banniere                                                                   */
/* ------------------------------------------------------------------------- */

.mmp-banniere {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--mmp-rayon-active, 10px);
}

.mmp-root .mmp-banniere-image {
    display: block;
    width: 100%;
    height: auto;
}

.mmp-banniere-mots {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.mmp-banniere-dessous .mmp-banniere-mots {
    padding: 10px 2px 2px;
    color: var(--mmp-panneau-texte, #1A1D23);
}

/* TEXTE SUR L'IMAGE : le voile est ce qui rend la promesse tenable. La photo
   est inconnue - claire, sombre, chargee - et aucune couleur de texte ne
   passerait le contraste AA sur toutes. Un voile sombre pose ENTRE la photo et
   les mots, et du blanc par-dessus : le rapport est alors celui du blanc sur
   le voile, qu'on maitrise (au moins 7:1), quelle que soit l'image. */
.mmp-banniere-sur .mmp-banniere-mots {
    position: absolute;
    inset: auto 0 0 0;
    padding: 28px 12px 12px;
    color: #FFFFFF;
    background: linear-gradient(to top, rgba(17, 20, 26, 0.86), rgba(17, 20, 26, 0.62) 55%, rgba(17, 20, 26, 0));
}

.mmp-root .mmp-banniere-titre {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.mmp-root .mmp-banniere-texte {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
}

/* Le "text-decoration: none" qui vivait ici a ete retire le 30/09/2026 : la
   remise a zero du haut de la feuille le dit deja, et pour tous les liens a la
   fois. Deux endroits qui disent la meme chose, c'est un endroit qu'on oublie
   de corriger. */
.mmp-root .mmp-banniere-bouton {
    display: inline-block;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--mmp-rayon-active, 10px);
    color: #FFFFFF;
    background: var(--mmp-accent, #2F4FD8);
}

.mmp-banniere-sur .mmp-banniere-bouton {
    color: #11141A;
    background: #FFFFFF;
}

/* Decoration VOULUE, comme le titre de bloc : elle doit passer devant la
   remise a zero !important du haut de la feuille. */
.mmp-root .mmp-banniere-bouton:hover,
.mmp-root .mmp-banniere-bouton:focus-visible {
    text-decoration: underline !important;
}

/* ------------------------------------------------------------------------- */
/* Video : la facade, et rien d'autre avant le clic                           */
/* ------------------------------------------------------------------------- */

.mmp-video {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--mmp-rayon-active, 10px);
    background: #11141A;
}

/* Repli pour les navigateurs sans aspect-ratio : une hauteur plutot qu'une
   boite plate. */
@supports not (aspect-ratio: 16 / 9) {
    .mmp-video {
        min-height: 160px;
    }
}

.mmp-root .mmp-video-facade {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    font: inherit;
    color: #FFFFFF;
    text-align: center;
    background: none;
    border: 0;
    cursor: pointer;
}

.mmp-root .mmp-video-vignette {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Assombrie : le bouton de lecture et le titre doivent rester lisibles
       sur une vignette claire. */
    filter: brightness(0.62);
}

.mmp-video-rond {
    position: relative;
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
}

/* Le triangle de lecture, en bordures : aucune image, aucun fichier. Il vit
   sur un <span> DANS un <button> : "content: none !important" sur les
   pseudo-elements des enfants de lien l'empecherait de naitre, comme il
   empeche celui du theme. Il reprend donc la main sous le meme !important,
   avec sa specificite (0,2,0) contre (0,1,1). */
.mmp-root .mmp-video-rond::after {
    content: "" !important;
    position: absolute;
    top: 50%;
    left: 54%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent #11141A;
}

.mmp-video-mot {
    position: relative;
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.mmp-root .mmp-video-facade:hover .mmp-video-rond,
.mmp-root .mmp-video-facade:focus-visible .mmp-video-rond {
    background: #FFFFFF;
    transform: scale(1.06);
}

.mmp-video-cadre {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.mmp-root .mmp-video-secours {
    position: absolute;
    inset: auto 0 8px 0;
    color: #FFFFFF;
    font-size: 13px;
}

/* ------------------------------------------------------------------------- */
/* Bouton du tiroir                                                           */
/* ------------------------------------------------------------------------- */

/*
 * Cache tant que le script n'a pas pose mmp-js : un bouton qui n'ouvre rien
 * est pire que pas de bouton du tout. Sans script, la barre est deja depliee.
 */
/*
 * .mmp-root DEVANT LA CLASSE, ici et pour toute regle portant sur un <button>.
 * La remise a zero du haut de cette feuille, ".mmp-root button", pese 0,1,1 :
 * elle ecrase une regle de composant ecrite en une seule classe. La marge de ce
 * bouton etait donc morte, et le mot "Menu" collait au bord de l'ecran (mesure
 * le 22/09/2026 : padding calcule a 0). Meme piege que ":where(#mmp-app) button"
 * dans admin.css, de l'autre cote du module.
 */
.mmp-root .mmp-bascule {
    display: none;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 var(--mmp-espace-active, 16px);
    font-weight: 600;
    color: var(--mmp-barre-texte, #1A1D23);
}

.mmp-bascule-trait,
.mmp-bascule-trait::before,
.mmp-bascule-trait::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
}

.mmp-bascule-trait {
    position: relative;
}

/* Les deux barres du haut et du bas sont des pseudo-elements d'un <span> pose
   DANS le <button> du tiroir : "content: none !important" sur les
   pseudo-elements des enfants de lien les effacerait, et le bouton n'aurait
   plus qu'une barre. Elles reprennent la main sous le meme !important, avec
   leur specificite (0,2,0) contre (0,1,1). Mesure du 01/10/2026 AVANT
   correction, avec "#header button span::before { content: '_' }" au theme :
   le ::before du bouton valait "_". */
.mmp-root .mmp-bascule-trait::before,
.mmp-root .mmp-bascule-trait::after {
    position: absolute;
    left: 0;
    content: "" !important;
}

.mmp-bascule-trait::before {
    top: -6px;
}

.mmp-bascule-trait::after {
    top: 6px;
}

/* ------------------------------------------------------------------------- */
/* Ouverture SANS script : survol et focus, a toutes les largeurs             */
/* ------------------------------------------------------------------------- */

.mmp-root:not(.mmp-js) .mmp-entree:hover > .mmp-panneau,
.mmp-root:not(.mmp-js) .mmp-entree:focus-within > .mmp-panneau {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

/* ------------------------------------------------------------------------- */
/* Ordinateur (768 px et plus) : le meme point de bascule que les themes      */
/* ------------------------------------------------------------------------- */

@media (min-width: 768px) {
    .mmp-root.mmp-js .mmp-entree:hover > .mmp-panneau,
    .mmp-root.mmp-js .mmp-entree:focus-within > .mmp-panneau,
    .mmp-root.mmp-js .mmp-entree.mmp-ouvert > .mmp-panneau {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0s;
    }

    /* Menu vertical : les entrees s'empilent et les panneaux s'ouvrent sur le
       cote, cales en haut du menu et au moins aussi hauts que lui. Les
       entrees passent en position statique : le panneau se place alors sur la
       racine, quelle que soit la hauteur de l'entree survolee. */
    /* Les panneaux s'ouvrent a droite de la RACINE (les entrees passent en
       position statique) : sans plafond, un menu pose dans une colonne large
       les enverrait hors de l'ecran. */
    .mmp-root.mmp-verticale {
        max-width: var(--mmp-largeur-colonne-active, 300px);
    }

    .mmp-root.mmp-verticale .mmp-barre {
        flex-direction: column;
        flex-wrap: nowrap;
        max-width: none;
        padding: 0;
    }

    .mmp-root.mmp-verticale .mmp-entree,
    .mmp-root.mmp-verticale .mmp-entree.mmp-panneau-pleine {
        position: static;
    }

    /* En colonne, l'indicateur passe du bas au COTE : le trait du bas s'en va.
       !important parce que celui qu'il retire l'est devenu - un !important ne
       se bat qu'avec un autre, si precis soit le selecteur qui lui repond. */
    .mmp-root.mmp-verticale .mmp-entree-lien {
        flex: 1 1 auto;
        padding: 0 var(--mmp-espace-active, 16px);
        border-bottom: 0 !important;
        border-left: 2px solid transparent;
    }

    .mmp-root.mmp-verticale .mmp-entree-lien[aria-current="page"] {
        border-left-color: var(--mmp-accent, #2F4FD8);
    }

    .mmp-root.mmp-verticale .mmp-panneau,
    .mmp-root.mmp-verticale .mmp-panneau-entree > .mmp-panneau,
    .mmp-root.mmp-verticale .mmp-panneau-pleine > .mmp-panneau {
        top: 0;
        right: auto;
        left: 100%;
        width: max-content;
        min-width: 0;
        max-width: min(70vw, var(--mmp-largeur-max-active, 1280px));
        min-height: 100%;
        border: 1px solid var(--mmp-panneau-bord, #E2E5EA);
        border-radius: var(--mmp-rayon-active, 10px);
        transform: translateX(-4px);
    }

    .mmp-root.mmp-verticale .mmp-panneau-dedans {
        margin: 0;
    }

    /* Le chevron regarde vers le cote ou le panneau s'ouvre. */
    .mmp-root.mmp-verticale .mmp-chevron,
    .mmp-root.mmp-verticale .mmp-entree.mmp-ouvert > .mmp-fleche .mmp-chevron,
    .mmp-root.mmp-verticale .mmp-entree.mmp-ouvert > .mmp-entree-bouton .mmp-chevron {
        transform: rotate(-45deg) translate(-1px, -1px);
    }
}

/* ------------------------------------------------------------------------- */
/* Telephone et tablette etroite (moins de 768 px)                            */
/* ------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------- */
/* Le menu replie derriere un bouton                                          */
/* ------------------------------------------------------------------------- */

/*
 * UN SEUL ENDROIT DECIDE : le script pose la classe mmp-en-tiroir sur la
 * racine quand le menu doit se replier - sous 768 px comme avant, ou parce
 * que le marchand a choisi "burger des la tablette" ou "toujours en burger"
 * dans L'allure. Ces regles etaient auparavant enfermees dans
 * @media (max-width: 767px) : elles n'ont pas change, elles ne dependent plus
 * de la seule largeur.
 *
 * Sans JavaScript, aucune de ces regles ne s'applique (mmp-js est pose par le
 * script) : le menu reste une barre ou une liste ordinaire, parcourable. Un
 * bouton qui n'ouvre rien serait pire que pas de bouton.
 */

/*
 * LE BANDEAU. En barre depliee il n'existe pas : display: contents l'efface et
 * ses deux enfants - le bouton, le logo - reprennent exactement la place qu'ils
 * avaient. Une fois le menu ouvert, c'est lui qui devient l'EN-TETE DU TIROIR.
 */
.mmp-bandeau {
    display: contents;
}

/* Avec script : bouton visible, barre en tiroir. */
/* Aucun trait autour du menu replie : le bouton se suffit a lui-meme, et un
   cadre autour d'un simple bouton faisait "bloc" dans l'en-tete du theme
   (demande du 24/09/2026). */
.mmp-root.mmp-js.mmp-en-tiroir {
    border: 0;
}

.mmp-root.mmp-js.mmp-en-tiroir .mmp-bascule {
    display: inline-flex;
}

.mmp-root.mmp-js.mmp-en-tiroir .mmp-barre {
    display: none;
}

/*
 * LE TIROIR OUVERT NE FAIT QU'UN SEUL BLOC.
 *
 * C'est la RACINE qui devient le tiroir : en-tete (le bouton devenu croix, le
 * logo) et contenu dans la meme surface, de la meme largeur, sous la meme
 * ombre. Auparavant le bandeau restait dans la page, large comme elle, et le
 * contenu s'ouvrait dessous en colonne etroite : on voyait deux blocs colles
 * (dit le 24/09/2026 - "ca se voit que c'est deux blocs").
 *
 * La racine quittant le flux, front.js pose une cale de sa hauteur pour que la
 * page ne remonte pas d'un coup.
 */
.mmp-root.mmp-js.mmp-en-tiroir.mmp-tiroir {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    /* stretch ET nowrap, contre le "center" et le "wrap" de l'etat ferme :
       en colonne, un conteneur qui enroule met ses elements en plusieurs
       colonnes et ne les etire plus. L'en-tete faisait alors 124 px de large
       dans un tiroir de 420 - deux blocs a nouveau (mesure du 24/09/2026). */
    flex-wrap: nowrap;
    align-items: stretch;
    width: min(var(--mmp-tiroir-largeur-active, 420px), 100vw);
    max-width: none;
    margin: 0;
    background: var(--mmp-panneau-fond, #FFFFFF);
    box-shadow: 16px 0 60px -20px rgba(16, 20, 30, .35);
}

/* L'en-tete du tiroir : la croix a gauche, le logo a droite. */
.mmp-root.mmp-js.mmp-en-tiroir.mmp-tiroir .mmp-bandeau {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
}

.mmp-root.mmp-js.mmp-en-tiroir.mmp-tiroir .mmp-barre {
    flex: 1 1 auto;
    display: block;
    max-width: none;
    /* margin: 0, et non le "0 auto" de la barre depliee : une marge auto sur
       un element flexible l'emporte sur l'etirement, et la liste se retrouvait
       centree, large de 325 px dans un tiroir de 420. */
    margin: 0;
    padding: 0 0 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: transparent;
}

/* La cale : elle garde la place du bandeau pendant que le tiroir est ouvert. */
.mmp-tiroir-cale {
    display: block;
}

/*
 * AUCUN TRAIT ENTRE LES ENTREES DU TIROIR (29/09/2026).
 *
 * Chaque entree portait un "border-top" : le tiroir ouvert etait strie de
 * bandes grises - une entre T-shirts et Sweats, une entre Sweats et
 * Accessoires. Le marchand n'en veut pas : "je ne les veux pas".
 *
 * C'est l'ESPACEMENT qui separe maintenant, et lui seul. L'air ne disparait
 * pas avec le trait : chaque entree garde sa hauteur de barre (48 px au
 * moins) et les entrees voisines sont ecartees de 6 px de plus.
 *
 * Le trait n'est retire QUE dans le tiroir ouvert : la barre depliee et les
 * deux listes de secours (menu sans script) gardent les leurs, ils n'ont
 * jamais ete mis en cause.
 */
.mmp-root.mmp-js.mmp-en-tiroir.mmp-tiroir .mmp-entree {
    display: block;
}

.mmp-root.mmp-js.mmp-en-tiroir.mmp-tiroir .mmp-entree + .mmp-entree {
    margin-top: 6px;
}

.mmp-root.mmp-js.mmp-en-tiroir.mmp-tiroir .mmp-entree-lien {
    padding: 0 var(--mmp-espace-active, 16px);
}

/*
 * LE BANDEAU ET LE TIROIR NE FONT QU'UNE SEULE SURFACE.
 *
 * Tant que le menu est ferme, le bandeau garde ses traits : c'est ce qui le
 * detache de la page. Des qu'il s'ouvre, le trait du bas et le trait de la
 * premiere entree dessinaient une DOUBLE ligne entre le bouton et le contenu -
 * le menu avait l'air d'etre colle sous un autre bloc (signale le 24/09/2026).
 *
 * Depuis le 29/09/2026, plus aucune entree du tiroir ne porte de trait : les
 * deux regles qui rattrapaient la double ligne - un "border-bottom-color:
 * transparent" sur une racine deja sans bordure, un "border-top: 0" sur une
 * premiere entree qui n'en a plus - n'avaient plus rien a rattraper et ont
 * ete retirees. Le bandeau, lui, n'a jamais eu de trait a lui.
 */

/* Le bouton ne bouge pas : il est dans le bandeau, que le tiroir ne recouvre
   plus. Seul son dessin change - les trois traits deviennent une croix, pour
   que l'etat ouvert se lise sans avoir a essayer. */
.mmp-root.mmp-js.mmp-en-tiroir.mmp-tiroir .mmp-bascule-trait {
    background: transparent;
}

.mmp-root.mmp-js.mmp-en-tiroir.mmp-tiroir .mmp-bascule-trait::before {
    top: 0;
    transform: rotate(45deg);
}

.mmp-root.mmp-js.mmp-en-tiroir.mmp-tiroir .mmp-bascule-trait::after {
    top: 0;
    transform: rotate(-45deg);
}

/*
 * LE TIROIR DEJA DEPLIE (option de L'allure).
 *
 * Toutes les sections sont ouvertes des l'ouverture du tiroir : on descend la
 * page au lieu de cliquer rayon par rayon. Les fleches disparaissent - elles
 * ne commandent plus rien - et le script n'a rien a faire : c'est la feuille
 * qui deplie.
 */
.mmp-root.mmp-js.mmp-en-tiroir.mmp-tiroir.mmp-tiroir-oui .mmp-panneau {
    max-height: none;
    visibility: visible;
}

.mmp-root.mmp-js.mmp-en-tiroir.mmp-tiroir.mmp-tiroir-oui .mmp-fleche,
.mmp-root.mmp-js.mmp-en-tiroir.mmp-tiroir.mmp-tiroir-oui .mmp-chevron {
    display: none;
}

/* Le rythme d'un menu deplie se donne a l'air, pas au trait : un trait entre
   les sections etait pose ici jusqu'au 29/09/2026 - c'est l'une des bandes
   que le marchand voyait sur sa capture. L'ecart entre deux entrees est
   celui du tiroir ordinaire, pose plus haut ; ici, il est repris en plus
   large, une section depliee pesant plus qu'une entree fermee. */
.mmp-root.mmp-js.mmp-en-tiroir.mmp-tiroir.mmp-tiroir-oui .mmp-entree + .mmp-entree {
    margin-top: 14px;
}

/*
 * LE LOGO, A COTE DU BOUTON.
 *
 * Deux images l'une sur l'autre : celle du repos et celle du survol. Le fondu
 * est une simple transition d'opacite - pas de script, donc rien a charger ni
 * a synchroniser. Sans seconde image, il ne reste qu'une image ordinaire.
 */
.mmp-logo {
    position: relative;
    display: none;
    align-items: center;
    margin-left: auto;
    padding: 0 var(--mmp-espace-active, 16px);
}

/*
 * LE LOGO NE SE MONTRE QU'UNE FOIS LE MENU OUVERT, et se cale sur le bord
 * DROIT DU TIROIR - pas a l'autre bout de l'ecran. Mesure du 24/09/2026 sur un
 * ecran de 1424 px : le tiroir s'arretait a 420 px et le logo se posait a
 * 1368 px, a un kilometre de la croix qui lui fait face dans la maquette.
 *
 * Il est donc pose en absolu sur le bandeau, large comme le tiroir et aligne a
 * droite. Sur telephone, ou le tiroir prend toute la largeur, cela revient
 * exactement au coin haut droit de l'ecran.
 */
.mmp-root.mmp-js.mmp-en-tiroir.mmp-tiroir .mmp-logo,
.mmp-root:not(.mmp-js) .mmp-logo {
    display: inline-flex;
}

/*
 * AUTANT D'AIR EN HAUT QU'A DROITE (30/09/2026).
 *
 * "Possible d'avoir le logo qui a la meme distance en haut que celle de droite
 * stp, on trouve il est trop colle au bord la."
 *
 * Il avait raison, et pour une raison mesurable : la distance de DROITE est un
 * padding, 16 px, la meme quel que soit le logo ; la distance du HAUT, elle,
 * etait un RESTE - ce qui separe un logo centre d'un bandeau haut de 64 px.
 * Elle fondait donc a mesure que le logo grandissait. Mesure du 30/09/2026,
 * banc 8, tiroir ouvert : logo de 40 px -> 12 px en haut contre 16 a droite ;
 * logo de 64 px -> 0 px ; logo de 80 px -> 0 px, et le bandeau s'etirait.
 * Sa capture montre un logo colle au bord : c'est le cas du logo haut.
 *
 * Le logo recoit donc le meme padding sur ses QUATRE cotes, exactement comme
 * il l'avait deja sur ses deux cotes horizontaux. La distance du haut cesse
 * d'etre un reste : elle vaut --mmp-espace, comme celle de droite, pour
 * n'importe quelle hauteur de logo - image matricielle ou SVG, dont la
 * hauteur est DEFINIE par .mmp-logo-image et jamais devinee.
 *
 * Le min-height de 64 px du bandeau reste le plancher : un tiroir SANS logo
 * garde exactement le bandeau d'avant, et la croix reste centree dedans.
 * Avec un logo, le bandeau vaut la hauteur du logo plus deux fois l'espace -
 * 72 px pour le logo livre, ou la croix descend de 10 px a 14. C'est le prix,
 * arithmetique, d'un logo qui respire : il n'y a pas de facon de poser 16 px
 * au-dessus d'un logo de 40 px dans un bandeau de 64 sans que quelque chose
 * bouge. La croix, elle, ne bouge PAS d'un cote a l'autre : sa distance au
 * bord gauche est inchangee, et son dessin non plus.
 */
.mmp-root.mmp-js.mmp-en-tiroir.mmp-tiroir .mmp-logo {
    /* Plus rien a positionner a droite : le logo est le second enfant de
       l'en-tete, qui les ecarte lui-meme (justify-content: space-between). */
    margin-left: 0;
    padding: var(--mmp-espace-active, 16px);
    /* Un element flexible ne descend JAMAIS sous la largeur de son contenu
       tant qu'on ne lui a pas dit min-width: 0 - c'est le defaut "auto" de la
       specification. Sans cette ligne, la ligne du dessous n'aurait rien a
       borner : le logo pousserait le bandeau au lieu de se laisser reduire. */
    min-width: 0;
}

/*
 * ... ET UN LOGO TRES LARGE S'ARRETE AU BORD DU TIROIR.
 *
 * Le plafond du logo est "max-width: 40vw" : il borne un logo geant sur un
 * petit ecran, mais il compte en largeur d'ECRAN, et le tiroir, lui, fait
 * 420 px quelle que soit la fenetre. Sur un ecran de 1366 px, 40vw vaut
 * 546 px. Mesure du 30/09/2026, banc 9, avec un SVG de rapport 10:1 pose a
 * 64 px de haut : image large de 546,4 px, DEBORDANT le tiroir de 194,4 px -
 * et la meme mesure avec le padding d'avant donne exactement le meme
 * debordement, ce n'est donc pas l'air ajoute au-dessus du logo qui le cause.
 * Un PNG ne le montre pas : il a une largeur propre et s'arrete avant.
 */
.mmp-root.mmp-js.mmp-en-tiroir.mmp-tiroir .mmp-logo-image {
    max-width: 100%;
}

/*
 * .mmp-root DEVANT LA CLASSE, et une HAUTEUR plutot qu'un plafond.
 *
 * La remise a zero ".mmp-root img" (0,1,1) impose "height: auto" et
 * "max-width: 100%". Sur un SVG - qui n'a pas de taille propre, seulement une
 * viewBox - cela donnait une image large de ZERO pixel dans un conteneur
 * flexible : le logo etait charge, servi, present dans la page, et invisible
 * (signale le 24/09/2026, reproduit et mesure : largeur calculee 0 px).
 *
 * Une hauteur DEFINIE suffit a l'image pour deduire sa largeur de son rapport.
 * max-width borne un logo tres large sur un petit ecran ; flex l'empeche d'etre
 * comprime par ses voisins.
 */
.mmp-root .mmp-logo-image {
    display: block;
    flex: 0 0 auto;
    width: auto;
    max-width: 40vw;
    height: var(--mmp-logo-hauteur-active, 40px);
    transition: opacity 260ms cubic-bezier(.2, .7, .3, 1);
}

.mmp-logo-survol {
    position: absolute;
    top: 50%;
    right: var(--mmp-espace-active, 16px);
    opacity: 0;
    transform: translateY(-50%);
}

.mmp-logo:hover .mmp-logo-survol,
.mmp-logo:focus-visible .mmp-logo-survol {
    opacity: 1;
}

.mmp-root .mmp-logo:hover .mmp-logo-image:not(.mmp-logo-survol),
.mmp-root .mmp-logo:focus-visible .mmp-logo-image:not(.mmp-logo-survol) {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .mmp-root .mmp-logo-image {
        transition: none;
    }
}

/* Menu replie et FERME : le bouton seul, rien autour. */
.mmp-root.mmp-js.mmp-en-tiroir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* En tiroir, un panneau n'est plus une surcouche : c'est un accordeon.
   Il n'est deplie que par le script, jamais par le survol - un doigt qui
   effleure ne doit pas ouvrir six panneaux en descendant la page. */
.mmp-root.mmp-js.mmp-en-tiroir.mmp-tiroir .mmp-panneau {
    position: static;
    width: auto;
    max-width: none;
    max-height: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: hidden;
    transform: none;
    transition: none;
}

.mmp-root.mmp-js.mmp-en-tiroir.mmp-tiroir .mmp-entree.mmp-ouvert > .mmp-panneau {
    max-height: none;
    visibility: visible;
}

.mmp-root.mmp-js.mmp-en-tiroir.mmp-tiroir .mmp-panneau-dedans {
    display: block;
    padding: 0 var(--mmp-espace-active, 16px) 12px;
}

.mmp-root.mmp-js.mmp-en-tiroir.mmp-tiroir .mmp-colonne {
    min-width: 0;
}

.mmp-root.mmp-js.mmp-en-tiroir.mmp-tiroir .mmp-fleche {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 56px;
    min-height: 44px;
}

.mmp-root.mmp-js.mmp-en-tiroir.mmp-tiroir .mmp-entree {
    position: relative;
}

/* Au-dela du telephone, le tiroir ne prend pas tout l'ecran : une colonne,
   et la page reste visible autour. Un panneau blanc de 1920 px de large pour
   six entrees serait disproportionne. */


/* Sans script, un menu regle sur "toujours en burger" redevient une liste
   verticale : aucune entree n'est perdue. */
.mmp-root:not(.mmp-js).mmp-burger-toujours .mmp-barre {
    display: block;
    padding: 0;
}

.mmp-root:not(.mmp-js).mmp-burger-toujours .mmp-entree {
    display: block;
    border-top: 1px solid var(--mmp-barre-bord, #E2E5EA);
}

@media (max-width: 767px) {
    .mmp-sans-telephone {
        display: none;
    }

    /* Sans script : la barre reste une liste verticale ordinaire, et les
       panneaux gardent leur ouverture au survol et au focus. */
    .mmp-root:not(.mmp-js) .mmp-barre {
        display: block;
        padding: 0;
    }

    .mmp-root:not(.mmp-js) .mmp-entree {
        display: block;
        border-top: 1px solid var(--mmp-barre-bord, #E2E5EA);
    }

    .mmp-root:not(.mmp-js) .mmp-panneau,
    .mmp-root:not(.mmp-js) .mmp-panneau-pleine > .mmp-panneau {
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
    }

    .mmp-produits {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    }

    .mmp-disposition-colonnes > .mmp-liste-1 {
        column-count: 1;
    }

    /* Sur un telephone, une grille de 140 px donnerait deux cases etroites
       et des noms coupes : une seule colonne, comme le reste du menu. */
    .mmp-disposition-grille > .mmp-liste-1 {
        grid-template-columns: 1fr;
    }
}

/* Le verrou de defilement est pose sur <body> par le script, et retire par
   lui. La classe est a nous : aucun theme ne la definit. */
body.mmp-verrou {
    overflow: hidden;
}

/* ------------------------------------------------------------------------- */
/* Apercu du tableau de bord                                                  */
/* ------------------------------------------------------------------------- */

/* Un menu previsualise qui n'est pas encore pose sur la page est rendu en fin
   de page, et affiche ici en haut de l'ecran, avec une ligne qui dit
   pourquoi. Ce bloc n'existe jamais pour un visiteur : il faut un jeton
   d'apercu valide pour le produire. */
.mmp-apercu-force {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 99990;
    background: #FFFFFF;
    box-shadow: 0 4px 16px rgba(16, 20, 30, .18);
}

.mmp-apercu-force-note {
    margin: 0;
    padding: 6px 16px;
    font: 600 12px/16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: #FFFFFF;
    background: #2F4FD8;
}

/* ------------------------------------------------------------------------- */
/* Mouvement reduit                                                           */
/* ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .mmp-root .mmp-panneau {
        transition-duration: 1ms;
        transition-delay: 0s;
        transform: none;
    }

    .mmp-root * {
        animation-duration: 1ms !important;
        transition-duration: 1ms !important;
    }
}

/* ------------------------------------------------------------------------- */
/* Impression                                                                 */
/* ------------------------------------------------------------------------- */

@media print {
    .mmp-root {
        display: none;
    }
}