/* ==========================================================================
   Icône panier YITH — Menu principal desktop + mobile
   ========================================================================== */

/* -----------------------------------------------------------------------
   Desktop : icône injectée comme <li> dans ul#menu-menu-principal
   ----------------------------------------------------------------------- */

/* Le li hérite du display inline-block géré par Bootstrap/thème */
li.panier-nav-item .panier-icone-lien {
    /* Reprend exactement le padding des autres <a> du menu principal (voir _nav.scss) */
    padding: 18px 0 47px 0;
    display: block;
    position: relative;
    text-decoration: none;
    cursor: pointer;
    /* line-height = hauteur de l'icône → icône centrée dans la zone de contenu */
    line-height: 28px;
}

li.panier-nav-item .panier-svg {
    width: 32px;
    height: 32px;
    filter: brightness(0) invert(1);
    display: inline-block;
    vertical-align: middle;
    transition: opacity 0.2s ease;
    margin-top: -11px;
}

li.panier-nav-item .panier-icone-lien:hover .panier-svg {
    opacity: 0.75;
}

/* Désactive la barre rouge au hover — cohérent avec .icone-search/.icone-cart du thème */
li.panier-nav-item .panier-icone-lien:hover::before {
    height: 0 !important;
}

/* -----------------------------------------------------------------------
   Badge / bulle de comptage — partagé desktop + mobile
   ----------------------------------------------------------------------- */

.panier-count {
    display: none;
    position: absolute;
    top: 4px;
    right: -12px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background-color: #d32f2f;
    color: #ffffff;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
    animation: panier-pop 0.25s ease;
}

.panier-count.has-items {
    display: block;
}

@keyframes panier-pop {
    0%   { transform: scale(0.5); opacity: 0; }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1);   opacity: 1; }
}

/* -----------------------------------------------------------------------
   Mobile : .panier-mobile.icone-cart
   Le CSS compilé a display:none partout — on le rend visible sur mobile.
   Position héritée du SCSS : absolute, top:28px, right:100px (à gauche du burger).
   ----------------------------------------------------------------------- */

@media (max-width: 991px) {
    .panier-mobile.icone-cart {
        display: block;
        top: 20px;
        right: 80px;
    }
}

.panier-mobile.icone-cart a {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.panier-mobile.icone-cart img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
    display: block;
}

/* Badge mobile — légèrement plus grand pour touch */
.panier-mobile .panier-count {
    top: -8px;
    right: -10px;
    min-width: 19px;
    height: 19px;
    font-size: 11px;
    line-height: 19px;
    border-radius: 10px;
}

/* -----------------------------------------------------------------------
   Fix menu mobile — l’inverse de translateX(100%) est maintenant aussi dans _nav.scss.
   Ici : #top-header + !important pour gagner contre Customizer / cache / anciens bundles.
   ----------------------------------------------------------------------- */
@media (max-width: 991px) {
	#top-header.ouvert #mySidenav {
		-webkit-transform: translateX(0) !important;
		transform: translateX(0) !important;
	}

	/* Même valeur que dans _nav.scss : le header entier doit dominer les calques du contenu. */
	#top-header.ouvert {
		z-index: 100000022 !important;
	}
}
/*
   Accueil mobile : le CSS WPBakery (uploads/js_composer/custom.css) met
   body { padding-top: 160px } pour un header estimé à 150px. Le header
   réel fait ~61px, et le hero a déjà margin-top: 60px. Le sélecteur
   « body body body body » (mai 2026) ne correspond à aucun élément.
   html body.home gagne sur body grâce à la spécificité, même avec !important.
*/
@media (max-width: 768px) {
	html body.home {
		padding-top: 0 !important;
	}
}

/* -----------------------------------------------------------------------
   Menu desktop (#mySidenav) — espacement des <li>
   > 1600px : 25px. ≤1600px : 10px, sinon le logo de 337px recouvre
   le premier item (vers 1450–1500px).
   ----------------------------------------------------------------------- */
@media (max-width: 1600px) {
	header#top-header #mySidenav #menu-menu-principal > li,
	header#top-header #mySidenav #menu-menu-principal-en > li {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

/* Mega menu ouvert au tap (tablette) : garder la barre rouge sans :hover */
@media (min-width: 992px) {
	header #mySidenav #menu-menu-principal > li > a.ouvert::before,
	header #mySidenav #menu-menu-principal-en > li > a.ouvert::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 8px;
		background-color: #E02726;
	}
}