/* ═══ PANNEAU BURGER ═══════════════════════════════════════════════════════
   ⚠️ ARBITRAGE DE JÉRÉMY DU 16/08 — IL A DEMANDÉ L'INVERSE DE LA VEILLE, et
   pour une raison mesurable : le sous-menu était déplié en permanence, la liste
   dépassait l'écran, et on ne voyait plus le menu principal. Ses mots :
     « je voudrais que "ce que je fabrique" se déplie pour tout voir à
       l'ouverture (sauf les sous menus) car là la liste est très grande et on
       ne vois pas. »
   Donc : à l'ouverture on voit TOUT le premier niveau, et le sous-menu est
   REPLIÉ. Il s'ouvre au doigt (cf. JS_MENU).

   ⚠️ On ne se repose toujours PAS sur le script d'Astra : on écrit le nôtre,
   court et lisible. Le sien existe, mais c'est du JavaScript minifié capturé
   d'un thème, que rien ici ne peut éprouver avant la mise en ligne. */
/* ⚠️ REPLI PAR `max-height`, ET SÛREMENT PAS PAR `grid-template-rows:0fr`.
   La première version employait la ruse `0fr → 1fr`, qui est élégante… et qui
   ne marche que si la grille n'a QU'UNE ligne, donc un seul enfant enveloppe.
   Ici le `<ul class="sub-menu">` a SIX `<li>` en enfants directs : la grille en
   fabrique six lignes, `0fr` n'en écrase qu'une, et le sous-menu restait ouvert
   à 257 px de haut. Mesuré au banc. On ne peut pas ajouter d'enveloppe : un
   `<ul>` n'accepte que des `<li>`. `max-height` s'anime avec n'importe quel
   nombre d'enfants, et c'est tout ce qu'on lui demande. */
/* ⚠️⚠️ L'ENTRÉE PASSE EN `block`, ET C'EST CE QUI RÉPARE LA MISE EN PAGE.
   Mesuré le 16/08 sur le téléphone de Jérémy : le `<li>` du burger est en
   `display:flex`. Le lien ET le sous-menu deviennent donc deux ÉLÉMENTS DE FLEX
   POSÉS CÔTE À CÔTE, au lieu de s'empiler — d'où le grand vide sous « Ce que je
   fabrique », le sous-menu qui commence beaucoup plus bas, et les entrées
   coupées. Ce n'était pas un problème de hauteur ni de marge : c'était un
   problème d'AXE. En `block`, le lien et sa liste redeviennent l'un au-dessus
   de l'autre, ce qu'ils n'auraient jamais dû cesser d'être. */
.ast-header-break-point .jb-menu-fabrique{
	display:block !important;
}
/* ═══ LE TIROIR PREND LES TROIS QUARTS DE L'ÉCRAN (Jérémy, 16/08) ══════════
   « je te propose d'augmenter la largeur du menu burger, ça permettra de mettre
     "Conseil et blog" et peut-être "ce que je fabrique" sur une ligne, il
     faudrait régler à 3/4 de la largeur de l'écran »

   Il a raison, et c'est la vraie cause du reste : à 260 px de tiroir, aucune
   indentation n'était visible parce qu'il n'y avait pas de place à céder — tout
   pixel donné au décalage était repris au texte, qui repassait sur deux lignes.
   On élargit d'abord, on décale ensuite.

   MESURÉ : le tiroir est `.ast-mobile-header-content`, en `position:fixed`, et
   sa largeur ne vient PAS d'un `width` mais d'un `left:115px` combiné à
   `right:0` (375 − 115 = 260). On reprend donc la main sur les trois à la fois,
   sinon le `left` d'origine continue de commander.
   ⚠️ Un plafond est nécessaire : le point de rupture du burger est à 1024 px,
   donc une tablette en portrait (768) l'ouvre aussi, et 75 % y feraient 576 px
   de tiroir pour huit entrées. 420 px est la largeur au-delà de laquelle une
   colonne de menu cesse d'être une colonne.

   ⚠️⚠️ LA SÉLECTION EST VOLONTAIREMENT LOURDE, et ce n'est pas de la
   superstition : `.ast-header-break-point #ast-mobile-header
   .ast-mobile-header-content` (1 identifiant, 2 classes, `!important`) A ÉTÉ
   MESURÉE PERDANTE — largeur inchangée à 260 px. Une règle plus forte existe
   quelque part dans les 29 feuilles capturées ; la chercher aurait coûté plus
   que de passer devant. Le banc a tranché : avec `html body…` et la classe du
   conteneur, la valeur s'applique (299 px demandés, 299 px obtenus).
   ⚠️ Ne pas « simplifier » ce sélecteur : il redeviendrait inopérant, en
   silence, et le tiroir reviendrait à 69 % sans que rien ne le signale. */
html body.ast-header-break-point #ast-mobile-header.ast-mobile-header-wrap .ast-mobile-header-content{
	width:75vw !important;
	max-width:420px !important;
	left:auto !important;
	right:0 !important;
}

/* Le tiroir doit pouvoir DÉFILER : sous-menu ouvert, la liste dépasse l'écran,
   et sans ça les dernières entrées sont inatteignables (« on ne vois pas tous
   les sous menus et ne pouvons pas naviguer dedans »). */
.ast-header-break-point .ast-mobile-header-content,
.ast-header-break-point .ast-mobile-popup-content,
.ast-header-break-point #ast-mobile-site-navigation{
	overflow-y:auto !important;
	-webkit-overflow-scrolling:touch;
	overscroll-behavior:contain;
}
.ast-header-break-point .main-header-menu .sub-menu{
	position:static !important; width:auto !important; left:auto !important;
	visibility:visible !important; z-index:auto !important; box-shadow:none !important;
	display:block !important;
	/* ⚠️ PAS de `!important` sur max-height : c'est le SCRIPT qui la pilote, et
	   il doit pouvoir écrire dessus. Voir JS_MENU. */
	max-height:0;
	opacity:0;
	overflow:hidden !important;
	/* ⚠️⚠️ ON N'ANIME PAS `max-height`, ET C'EST UNE MESURE, PAS UN GOÛT.
	   Avec `transition:max-height .26s` la valeur calculée RESTAIT à 0px pour
	   toujours : le sous-menu ne s'ouvrait jamais. Vérifié jusqu'au bout — même
	   un `style` EN LIGNE avec `!important` n'y changeait rien, ce qui est
	   impossible dans une cascade normale ; en posant `transition:none`, tout
	   fonctionnait immédiatement (max-height 568 px, opacité 1, hauteur 208 px).
	   L'animation de hauteur est un confort ; l'ouverture est la fonction. On
	   garde le fondu, qui lui marche, et la hauteur bascule d'un coup.

	   ⚠️⚠️ CETTE CONCLUSION ÉTAIT FAUSSE, ET IL FAUT LE DIRE ICI PLUTÔT QUE DE
	   L'EFFACER. Le banc qui l'a « prouvée » posait `transition:none` ET
	   `max-height:70vh` DANS LE MÊME GESTE : deux variables changées d'un coup,
	   donc rien d'isolé. Ce qui débloquait n'était pas le retrait de la
	   transition, c'était la valeur écrite en ligne — la règle d'ouverture, elle,
	   ne gagnait pas encore la cascade à ce moment-là. J'en ai tiré une règle
	   générale à partir d'une mesure qui n'en était pas une, et Jérémy a hérité
	   d'un menu qui « saute ».

	   ➡️ CE QUI EST FAIT MAINTENANT : la hauteur est animée pour de bon, et elle
	   est pilotée par le SCRIPT sur la hauteur RÉELLE du contenu
	   (`scrollHeight`), pas sur un `70vh` arbitraire. C'est ce qui donne une
	   animation juste : avec un plafond fixe, l'ouverture s'arrête d'un coup dès
	   que le contenu est atteint et la fermeture met un temps mort avant de
	   bouger. Avec la hauteur réelle, la durée correspond à la distance
	   parcourue, dans les deux sens. */
	transition:max-height .3s cubic-bezier(.4,0,.2,1), opacity .24s ease;
	/* ⚠️ UN BANDEAU, PAS UNE BOÎTE — corrigé le 16/08 sur retour de Jérémy :
	   « il y a un rectangle arrondi dans le rectangle du burger ». Il a raison,
	   et le défaut est de forme, pas de couleur : un cadre arrondi POSÉ dans un
	   panneau lui-même arrondi fabrique une poupée russe, et l'œil lit deux
	   objets au lieu d'un niveau. Dans une liste verticale, un niveau imbriqué
	   se dit par un BANDEAU qui va d'un bord à l'autre — pas de coins, donc pas
	   de second objet. Le fond descend à .035 : il ne doit que TEINTER, pas
	   délimiter ; ce sont les deux filets et le retrait qui délimitent. */
	/* ⚠️⚠️ AUCUNE SURFACE, AUCUN CADRE — troisième et dernière passe du 16/08.
	   J'ai d'abord remplacé la boîte arrondie par un bandeau teinté à bords
	   droits. Mesuré : plus aucune bordure gauche/droite, largeur alignée au
	   pixel sur les autres entrées… et le rectangle se voyait encore à l'écran.
	   Parce qu'un FOND dessine ses propres limites : une surface, même à 3,5 %,
	   EST un rectangle. Le cadre n'était que la moitié du problème.
	   ➡️ On enlève donc la surface. La hiérarchie ne se dit plus par un objet
	   mais par ce qui est déjà là : un corps plus petit, une graisse plus
	   légère, un retrait, et un filet vertical le long des entrées. Rien à
	   délimiter, donc rien qui fasse boîte dans la boîte.
	   ⚠️ Astra pose `.submenu-with-border .sub-menu{border-width:1px}` sur les
	   QUATRE côtés : il faut un `border:0` franc, pas une redéfinition partielle. */
	background:transparent !important;
	border:0 !important;
	border-radius:0 !important;
	margin:0 !important;
}
/* ⚠️ CETTE RÈGLE NE TOUCHE PLUS À LA HAUTEUR — c'est le script qui l'écrit, en
   ligne, sur la valeur réelle du contenu. Elle ne garde que le fondu. */
.ast-header-break-point .jb-menu-fabrique[data-jb-ouvert="1"] .sub-menu{
	opacity:1;
}

/* Un seul mouvement, pas deux : la hauteur qui grandit SUFFIT à raconter
   l'ouverture. Une cascade d'entrées par-dessus ferait deux gestes concurrents
   sur la même demi-seconde, et c'est ce qui donne l'impression de « ça
   s'agite » plutôt que « ça s'ouvre ». */
@media (prefers-reduced-motion: reduce){
	.ast-header-break-point .main-header-menu .sub-menu{ transition:none !important; }
}

/* ── LA DISTINCTION MENU / SOUS-MENU, deuxième demande du 16/08 ────────────
   « il faudrait faire une distinction entre menu et sous menu car là c'est
     tout le même visuel et on s'y perd. »
   Quatre marqueurs, pas un seul : retrait, taille, graisse et un filet à
   gauche. Un seul suffirait rarement — sur un téléphone, à bout de bras, c'est
   la SOMME qui se lit.

   ⚠️⚠️ LA SPÉCIFICITÉ EST LE SUJET, PAS LA DÉCORATION. La première version
   s'écrivait en cinq classes et ne s'appliquait PAS : elle perdait contre
   `#ast-mobile-header .ast-mobile-header-content .menu-item > a`, qui porte un
   identifiant ET un `!important` (mesuré : padding-left 0.2rem gagnait, graisse
   700 aussi, donc parent et enfant restaient identiques — exactement le défaut
   que Jérémy signalait). Entre deux `!important`, c'est la spécificité qui
   tranche : on repart donc du MÊME identifiant, avec une classe de plus.

   ⚠️⚠️ ET LE RETRAIT VA À DROITE, PAS À GAUCHE. Mesuré au banc : ce panneau
   est un tiroir ÉTROIT (195 px) dont le texte est aligné à DROITE
   (`text-align:right` hérité). Un retrait à gauche y fait deux dégâts : il ne
   se lit pas comme une hiérarchie (le texte reste collé au bord droit), et il
   vole 42 px de largeur — assez pour faire passer « Cuisines sur mesure » sur
   deux lignes. Dans un texte aligné à droite, le décalage hiérarchique se
   marque du côté où le texte commence, c'est-à-dire à droite. */
#ast-mobile-header .ast-mobile-header-content .main-header-menu .sub-menu .menu-item > a,
#ast-mobile-popup .ast-mobile-popup-content .main-header-menu .sub-menu .menu-item > a{
	/* ⚠️ L'INDENTATION EST LE MARQUEUR PRINCIPAL — renforcée le 16/08 à la
	   demande de Jérémy : « il faudrait faire une petite indentation (décaler le
	   texte par rapport aux autres lignes) pour parfaitement bien les
	   distinguer ». Le décalage était de 24 px au total (16 + 8) : lisible à la
	   mesure, invisible à l'œil sur un téléphone. Il passe à 38 px (28 + 10).
	   ⚠️ ET IL VA À DROITE, parce que le tiroir est aligné à droite : un texte
	   aligné à droite s'indente du côté où il COMMENCE, sinon on ne décale rien
	   du tout — on ne fait que rogner la largeur.
	   Le `padding-left` tombe à 0 : chaque pixel repris à gauche est un pixel
	   rendu au texte, sur un tiroir qui n'en a que 195. */
	/* ⚠️ L'INDENTATION SEULE, SANS BARRE — Jérémy, 16/08 : « tu pourras accentuer
	   l'indentation et supprimer la barre verte à droite du sous menu ».
	   Le filet servait de béquille tant que le tiroir était trop étroit pour
	   qu'un décalage se voie. À 75 % de l'écran, le décalage se suffit : 44 px,
	   c'est-à-dire plus du double de ce qui tenait avant. Et un trait de moins,
	   c'est un objet de moins — même raison que pour la boîte supprimée. */
	padding-right:44px !important;
	padding-left:0 !important;
	font-size:.88em !important;
	font-weight:400 !important;
	border-right:0 !important;
	margin-right:0 !important;
	opacity:.94;
}
/* Le parent s'affirme : c'est la tête de section, pas une entrée comme une autre.
   ⚠️ `gap` court et chevron étroit : sur 195 px de tiroir, un chevron de 34 px
   suffit à faire passer « Ce que je fabrique » sur deux lignes. */
#ast-mobile-header .ast-mobile-header-content .main-header-menu .jb-menu-fabrique > .menu-link,
#ast-mobile-popup .ast-mobile-popup-content .main-header-menu .jb-menu-fabrique > .menu-link{
	font-weight:800 !important;
	display:flex !important; align-items:center !important;
	justify-content:flex-end !important;
	gap:6px !important;
	/* ⚠️⚠️ LA HAUTEUR LIBRE EST OBLIGATOIRE — c'est ELLE, le « grand vide » du
	   screen de Jérémy. Mesuré : ce lien faisait **570 px** de haut pour un
	   contenu de 20 px, sans qu'AUCUNE règle ne le lui demande : devenu
	   conteneur flex dans une liste elle-même en flex, il s'étirait sur toute la
	   place disponible, et le sous-menu était repoussé tout en bas. Le défaut
	   n'était ni une marge ni un `padding` : c'était un étirement. */
	height:auto !important;
	min-height:44px !important;
	flex:0 0 auto !important;
	align-self:flex-start !important;
}
/* Reste d'un positionnement absolu que le mode statique n'utilise plus, mais
   qui redevient actif au moindre `position` réintroduit plus tard. */
.ast-header-break-point .jb-menu-fabrique > .sub-menu{
	top:auto !important; left:auto !important; right:auto !important;
}
/* La flèche redevient utile puisque quelque chose se replie. */
.ast-header-break-point .jb-menu-fabrique > .menu-link .dropdown-menu-toggle{
	display:inline-flex !important; align-items:center;
	width:20px; height:20px; margin:0;
	justify-content:center; flex:0 0 auto;
	transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.ast-header-break-point .jb-menu-fabrique > .menu-link .dropdown-menu-toggle::after{
	content:""; width:8px; height:8px; display:block;
	border-right:2px solid currentColor; border-bottom:2px solid currentColor;
	transform:rotate(45deg) translate(-2px,-2px);
}
.ast-header-break-point .jb-menu-fabrique[data-jb-ouvert="1"] > .menu-link .dropdown-menu-toggle{
	transform:rotate(-180deg);
}

/* ═══ ORDINATEUR : REMETTRE LA BARRE D'APLOMB ═══════════════════════════════
   ⚠️ CE BLOC N'EST PAS DÉCORATIF, il répare une casse que notre propre
   changement provoque, et qui ne se voit qu'à l'œil.

   La barre est un flex qui passe à la ligne, large de 562 px pour 844 px
   d'entrées (mesuré au navigateur le 15/08) : DEUX RANGÉES SONT INÉVITABLES,
   ce n'est pas un défaut. Le saut est fabriqué exprès par l'entrée « Accueil »
   (`menu-item-307`), masquée mais présente, à qui une règle d'origine donne
   `flex:0 0 100%` et `height:0` — un saut de ligne invisible.

   CE QUI CASSE SANS CE BLOC : les entrées portaient des `order:` ÉPINGLÉS À LA
   MAIN pour l'ancien jeu (308=1 309=2 358=3, séparateur 307=4, 311=5 312=6
   1766=7 313=8). La gravure (309) et la FAQ sont sorties du premier niveau, la
   numérotation a donc des trous, et notre nouvelle entrée — qui n'a aucun
   `order` — se retrouve à 0, donc DEVANT tout. Rendu obtenu au banc : une
   première rangée de 2 entrées et une seconde de 5, en escalier.

   LE CHOIX : on cesse d'épingler par identifiant WordPress et on ordonne par
   POSITION, parce que l'ordre du document est déjà l'ordre voulu (c'est notre
   fonction qui l'écrit, juste au-dessus). Un identifiant `menu-item-1766` ne
   dit rien à personne et ne survit pas au prochain arbitrage ; une position, si.

   LA COUPE 3 + 4 vient des largeurs mesurées, pas d'un goût :
     rangée 1  153 + 160 + 103 = 416 px
     rangée 2   92 + 154 +  72 + 110 = 428 px      (place disponible : 562 px)
   ⚠️ Si un libellé s'allonge beaucoup, ces sommes bougent. La garde compte les
   entrées ; elle ne mesure PAS des pixels, et elle ne le prétend pas. */
#masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li:nth-child(2),
#masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li:nth-child(3),
#masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li:nth-child(4){
	order:1 !important;
}
/* Le séparateur : il garde son rôle (flex:0 0 100%, hauteur 0), il change juste
   de place — il tombe désormais APRÈS la 3ᵉ entrée visible. */
#masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-307{
	order:2 !important;
}
#masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li:nth-child(n+5){
	order:3 !important;
}

/* Le panneau déroulant se règle sur son contenu.
   ⚠️ Astra le fige à 240 px. Mesuré au navigateur le 15/08 : deux libellés y
   débordent EN PEINTURE — « Escaliers, claustras & garde-corps » de 30 px et
   « Gravure & découpe numérique » de 11 px. Le rectangle de l'élément, lui, ne
   déborde PAS (les <a> font tous 240 px pile) : c'est le texte seul qui sort.
   Donc AUCUN contrôle automatique ne le voit — ni une mesure de largeur, ni un
   débordement horizontal de la page. Ça ne se trouve qu'en regardant. C'est
   pour ça que la garde, plus bas, ne prétend rien savoir des pixels. */
#masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu .sub-menu{
	width:max-content !important;
	min-width:240px !important;
	max-width:min(92vw,360px) !important;
}

/* ═══ LE PANNEAU EN VERRE DÉPOLI (demande de Jérémy, 16/08) ═════════════════
   « met des bords arrondis et de la transparence avec Blur, même réglage que
     le héro pour avoir une très bonne lisibilité »

   Les valeurs ne sont pas inventées : ce sont celles du verre dépoli déjà
   utilisé par les cartes du site (.jb-card, .jb-avis-card, .jb4wood-presta-card)
   — `var(--jb-blur-20)`, liseré blanc à .3, rayon 14 px. On reprend le système
   existant au lieu d'en créer un deuxième.

   ⚠️⚠️ UN SEUL ÉCART, ET IL EST DÉLIBÉRÉ : le fond est à **.88** et non .55.
   Les cartes se posent sur une texture claire ; ce panneau-ci se pose sur la
   VIDÉO du héro, c'est-à-dire sur des images qui bougent et dont on ne connaît
   ni la couleur ni le contraste. À .55, le texte vert passe par-dessus un plan
   sombre et devient illisible une image sur deux. Jérémy a demandé « une très
   bonne lisibilité » : c'est ce chiffre-là qui la porte, pas le flou.

   ⚠️ Ce bloc ne s'applique QU'À L'ORDINATEUR, et ce n'est pas un oubli : le
   site coupe `backdrop-filter` sous 768 px et en paysage court
   (`*,*::before,*::after{backdrop-filter:none !important}`), décision existante
   qu'on ne rouvre pas ici. Sur téléphone le sous-menu n'est de toute façon plus
   un panneau flottant mais une liste dans le burger, avec son propre fond. */
#masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu .sub-menu{
	/* ⚠️ CRÈME, PAS BLANC — corrigé le 16/08 sur retour de Jérémy (« la couleur
	   blanche choque un peu »). Le défaut n'était pas la clarté, c'était un
	   DÉSACCORD : les liens du sous-menu portent déjà `rgba(248,245,240,.88)`,
	   le crème du site, et le panneau était en blanc pur. Deux blancs voisins
	   mais différents, l'un sur l'autre : c'est ce contraste-là qui pique, pas
	   la luminosité. On aligne le panneau sur le crème maison (#F8F5F0, le
	   « fond béton » relevé dans la charte réelle du site). */
	/* ⚠️ DU VERRE, PLUS UNE CARTE — deuxième passe, 16/08 : « trouve quelque
	   chose de plus harmonieux pour le fond blanc du menu ordi ». Ce qui gênait
	   n'était pas la teinte mais la LECTURE D'OBJET : un rectangle opaque, avec
	   un bord dessiné et une ombre courte, se lit comme une carte POSÉE sur la
	   texture. Trois changements, tous dans le même sens :
	     · le flou passe à 24, celui de l'en-tête (`#masthead.jb-scrolled::before`)
	       — le panneau appartient au même verre que la barre d'où il sort ;
	     · le fond descend à .86, assez pour lire, assez peu pour que la texture
	       transparaisse et rattache le panneau au fond ;
	     · le liseré dessiné disparaît. À la place un REFLET intérieur en haut :
	       ça donne l'épaisseur du verre sans tracer de contour. Un bord tracé,
	       c'est ce qui fait « carte » ; un reflet, c'est ce qui fait « vitre ».
	   L'ombre devient plus large et plus diffuse (24/60 au lieu de 18/44) : une
	   ombre courte colle l'objet au fond, une ombre longue le fait flotter. */
	/* ⚠️ LA TEINTE DU BANDEAU D'EN-TÊTE, PLUS AUCUN BLANC — demande de Jérémy
	   du 16/08 : « remplacer la couleur blanche du sous menu par la même
	   couleur + effets (transparence, blur, etc.) que le bandeau héro ».

	   Mesuré : ce bandeau (`#masthead.jb-scrolled::before`) n'a AUCUN fond. Il
	   ne porte que `backdrop-filter: var(--jb-blur-24)` et laisse transparaître
	   le béton, `--jb-beton: #e8e4e0`. Sa « couleur » EST donc le béton.
	   On reprend ce ton exact — et on abandonne le crème, qui était encore un
	   blanc cassé et ne venait de nulle part dans la charte.

	   ⚠️⚠️ MAIS ON NE PEUT PAS COPIER LA TRANSPARENCE TOTALE, et il faut le dire.
	   Le bandeau, lui, n'a que du béton clair derrière : il peut se permettre
	   d'être un pur filtre. Ce panneau-ci PEND SOUS l'en-tête et sa moitié basse
	   tombe sur la VIDÉO du héro, qui est sombre. À transparence pure, le texte
	   brun y disparaît une image sur deux. .78 est le point où la teinte reste
	   celle du bandeau tout en gardant le texte lisible sur n'importe quelle
	   image. C'est le seul écart, il est mesuré, et il est délibéré. */
	background:rgba(232,228,224,.78) !important;
	-webkit-backdrop-filter:var(--jb-blur-24);
	backdrop-filter:var(--jb-blur-24);
	border:0 !important;
	border-radius:16px !important;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.5),
	           0 24px 60px rgba(73,56,40,.17),
	           0 2px 10px rgba(73,56,40,.06) !important;
	padding:7px !important;
	overflow:hidden;
}
/* Les entrées suivent le rayon du panneau, sinon le survol déborde des coins.
   Et elles deviennent TRANSPARENTES : elles avaient leur propre fond crème, ce
   qui fabriquait un empilement de deux surfaces presque identiques. Une seule
   surface, celle du panneau. */
#masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu .sub-menu .menu-item > .menu-link,
#masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu .sub-menu a{
	border-radius:9px !important;
	background:transparent !important;
}

/* ═══ CE QU'ON RETIRE AU SURVOL, ET CE QU'ON GARDE (Jérémy, 16/08) ══════════
   « enlève la bande annimé en dessous du texte et l'ombre au survol de la
     souris, ne garde que le mouvement de texte »

   Les trois effets viennent de la MÊME règle d'origine, appliquée à tous les
   `.menu-item > a` de la barre — donc aussi aux entrées du sous-menu :
     · la bande  = `::after` + `animation:jb-underline-shine 2.4s infinite`
     · l'ombre   = `text-shadow:0 0 14px rgba(124,97,69,.55)`
     · le geste  = `transform:translateY(-3px) scale(1.06)`   ← À GARDER
   On ne neutralise donc QUE les deux premiers, et surtout PAS `transform` :
   c'est lui, le « mouvement de texte » qu'il veut conserver.

   ⚠️ Portée limitée au SOUS-MENU de l'ordinateur. Les entrées de premier
   niveau gardent leur bande animée : elle n'a jamais été en cause, et la
   retirer partout serait un changement qu'il n'a pas demandé. */
#masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu .sub-menu .menu-item > a::after,
#masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu .sub-menu .menu-item > a:hover::after,
#masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu .sub-menu .menu-item > a:focus-visible::after{
	content:none !important;
	animation:none !important;
	background:none !important;
	width:0 !important;
}
#masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu .sub-menu .menu-item > a:hover,
#masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu .sub-menu .menu-item > a:focus-visible{
	text-shadow:none !important;
	box-shadow:none !important;
	/* ⚠️ AUCUN FOND AU SURVOL — Jérémy, 16/08 : « on enlève le fond gris au
	   survol de la souris ». Le site en posait un (`rgba(255,255,255,.96)`, un
	   éclair blanc) ; j'avais remplacé ce blanc par un brun dilué, ce qui restait
	   une surface qui s'allume. Il n'en veut aucune : sur un panneau qui est
	   déjà du verre, une pastille de fond derrière chaque entrée fait un
	   deuxième calque, et on retombe sur le défaut d'objets empilés.
	   Ce qui signale le survol : la couleur du texte, et son mouvement. */
	background:transparent !important;
	color:var(--jb-vert) !important;
}