/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
 a.ets_mm_url {
    text-transform: none!important;
}
 .badge{background-color:#1DBBF7}
 .badge.discount {
    background-color:#fff;
    border: 1px solid #1DBBF7;
    color:#1DBBF7;
}
.ap5-pack-product-infos.clearfix {
    display: none !important;
}
.page-product #ap5-product-list .ap5-pack-product{
	width:100%!important
}
.row.g-2.add-basket {
    margin-top: 10px;
}
.page-product.ap5-pack-page .ap5-add-to-cart-container .product-actions__quantity{
	margin:0px
}
 .ets_mm_megamenu_content .container{
	 max-width:1600px;
	 width:100%
 }
.ap5-product-footer-pack-name a span.ap5-view-pack-name {
    text-transform: none;
    color: #000;
	line-height:30px
}
.ap5-attribute-fieldset .ap5-attribute-list .form-control{
	appearance:auto;
}

span.regular-price.ap5-pack-product-original-price-value {
    text-decoration: line-through;
}
.ap5-price-container .text-primary-emphasis{
	font-size:14px
}
.ap5-product-footer-pack-name a span.ap5-view-pack-category{
	display:none
}
.carousel .carousel-inner{
	height:auto
}
.blockreassurance_product{
	overflow:hidden;
}
.productbundlespro .pbp-bundle{
	border:none;
	border-radius:20px;
	background-color:#fff
}
.productbundlespro .pbp-bundle .bundle-title {
    font-size: 24px;
    color: #0f2b46;
    width: 50%;
    margin: 0 auto 20px;
	text-align:center
}
.productbundlespro.layout-type-compact .pbp-bundle .pbp-see-details {
    border: 1px solid #1dbbf7;
    background-color: #1dbbf7;
    font-size: 20px;
    height: 45px;
    line-height: 35px;
    text-align: center;
    position: relative;
    color: #fff;
}
#product .productbundlespro .pbp-bundle .badge {
    border: 2px solid #0f2b46;
    color: #0f2b46;
    border-radius: 2px;
    padding: 3px;
    font-size: 12px;
    line-height: 35px;
    display: inline-block;
    width: 100%;
    font-weight: bold;
    background: #fff;
    font-size: 20px !important;
}
.btn-primary{
	background:#1dbbf7;
	color:#fff;
	border: 1px solid #1dbbf7;
	
}
.btn-primary:hover {
    background-color: #1dbbf7a6;
    border-color: #1dbbf7a6;
   
}
.btn-primary{
	background:#1dbbf7;
	color:#fff;
	border: 1px solid #1dbbf7;
}
#product section.product-accessories.mt-3 .wk_custom_variant{
	display:none
}
.page-product .product-comments-additional-info{
	margin-top:0px!important
}
.wk_custom_variant {
    background: #fff;
    padding: 20px;
    border-radius: 20px;
}
.wk_product_opt_container .wk_opt_val.wk_checkbox_selected, .wk_option_checkbox.wk_radio_selected{
	width:68px
}
.wk_opt_val:has(input:checked),.wk_opt_val:hover:has(input:checked) {
    background-color:#1dbbf7a6;
    color:#0f2b46;
}
.prices__wrapper.d-flex.flex-column.gap-2.mb-4{flex-direction:row!important}
button.btn.btn-outline-primary.btn-with-icon.post-product-comment {
    border: none;
    background: transparent;
    color: #1DBBF7;
}
.product-prices.js-product-prices,.product__prices.js-product-prices,.product__prices {
    padding: 20px;
    background:#F4F7FA;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
	color:#168ab6;
	font-size:40px!important
}
.page-product .product__current-price{font-size:32px}

form#post-product-comment-form button.btn.btn-primary{
	background-color: #1DBBF7;
	border-color:#1DBBF7
}
#product .product__name {
    margin-bottom: 5px!important;
	font-size:30px
}
#product .blockreassurance_product div{
	width:50%;
	float:left;
}
#product .blockreassurance_product span.block-title {
    font-weight: 700;
}
#product .green-block {
    background: #E6F9F3;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 20px;
	color:#00C48C
}
#product .detail{
	border:none;
	padding:8px 0 0;
	clear:both;
	
}
.product__additional-info.js-product-additional-info {
    float: left;
}
.page-product .product__description-short{
	clear:both
}
/* Conteneur des variantes */
.product__variants .radio-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Chaque option */
.product__variants .radio-variant {
    margin: 0;
    padding: 0;
}

/* Le label prend la forme du bouton */
.product__variants .radio-variant > label {
    display: block;
    margin: 0;
    cursor: pointer;
}

/* On masque visuellement le radio, sans le supprimer */
.product__variants .radio-variant input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

/* Le bouton */
.product__variants .radio-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid #1DBBF7;
    border-radius: 4px;
    background: #1dbbf73d;
    color: #1DBBF7;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Au survol */
.product__variants .radio-label:hover {
    border-color: #333;
}

/* Variante sélectionnée */
.product__variants input[type="radio"]:checked + .radio-label {
    background: #1DBBF7;
    border-color: #1DBBF7;
    color: #fff;
}

/* Accessibilité : focus clavier */
.product__variants input[type="radio"]:focus-visible + .radio-label {
    outline: 2px solid #333;
    outline-offset: 2px;
}




/* Conteneur des boutons */
.wk_product_opt_container .wk_opt_val {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    min-height: 40px;
    padding: 8px 18px;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #333;
    cursor: pointer;
    transition: all .2s ease;
}

/* Cache uniquement visuellement */
.wk_product_opt_container .wk_opt_val input[type="checkbox"],.wk_option_checkbox{
    position: absolute;
    opacity: 0;
	width:40px;
	height:40px;
	cursor:pointer
}

/* Etat sélectionné */
.wk_product_opt_container .wk_opt_val.wk_checkbox_selected, .wk_option_checkbox.wk_radio_selected {
    background: #333;
    border-color: #333;
    color: #fff;
}

/* Hover */
.wk_product_opt_container .wk_opt_val:hover {
    border-color: #333;
}


#product main#wrapper{
	background:#f8f8f8
}
#product section.product-accessories.mt-3 {
	margin-top:20px!important
}
.product-miniature .product-miniature__title {
    font-size: 1rem;
    margin-bottom: 0;
    margin-top: 15px;
    font-size: 22px;
    color: #0f2b46;
    font-family: 'Saira Condensed';
    font-weight: 500;
}
#product i.material-icons.me-1 {
    font-size: 0;
}
button.btn.decrement.js-decrement-button,button.btn.increment.js-increment-button {
    background: white;
}
@media (max-width: 767px){
.page-product .product__add-to-cart .product-actions__button button{display:block;font-size:12px}
#product .product-actions__quantity.quantity-button.js-quantity-button.col-md-auto  .mb-3{
	margin-bottom:0px!important
}
	#product .product-actions__quantity.quantity-button.js-quantity-button.col-md-auto {
    width: 50%;
}
	#product .row.g-2.add-basket {
    position: fixed;
    bottom: 0;
    z-index: 999;
    background: #27465b;
   width:100%;
   margin: 0px -11px;
   height:60px
}
#product section.product-accessories.mt-3 article.product-miniature{
	width:100%
}
#product section.product-accessories.mt-3 .product-miniature .card:hover{
	filter:none;
}
#product section.product-accessories.mt-3 .product-miniature .product-miniature__infos {
    width: calc(100% - 120px);
	float:left;
}
#product section.product-accessories.mt-3 .product-miniature .product-miniature__link{
	max-width:100px;
	float:left;
}
#product section.product-accessories.mt-3 .product-miniature .card{
	display:block!important
}
#product section.product-accessories.mt-3  .product-miniature .product-list-reviews{
	display:none
}
#product section.product-accessories.mt-3 .quantity-button.js-quantity-button.w-100.w-sm-auto {
    display: none;
}
#product section.product-accessories.mt-3 form.d-flex.flex-wrap.flex-md-nowrap.gap-3.align-items-center.mt-3 {
    position: absolute;
    top: 10px;
    right: 10px;
}
#product section.product-accessories.mt-3 .product-miniature .product-miniature__image{
	max-width:100px
}
}
#product .product-comments-wrapper.my-3 {
    background: #fff;
    padding: 20px;
    border-radius: 20px;
}

#product section.product-accessories.mt-3  .product-miniature .product-miniature__quickview{
	display:none;
}
#product section.product-accessories.mt-3 .product-miniature .card{
	display:block;
	border-radius:20px;
	padding:10px
}
#product .wk-product-variants{
	background:transparent!important
}
#product .wk_product_opt_container{
	padding:0!important;
	margin:0!important;
}
.productbundlespro.layout-type-compact .pbp-bundle .pbp-products-slider .pbp-bundle-product .product-image img{
	border-radius:20px
}
.pbp-details-product-image img{
	border-radius:10px
}
#product .wk-product-variants > .wk-product-variants-item .control-label {
    display: flex;
    margin-bottom: 3px;
}
#product .product-prices.js-product-prices span.current-price-value {
    font-size: 30px;
    font-weight: bold;
}
#product .wk-product-variants > .wk-product-variants-item{
	margin:15px 0
}
.wk-product-variants > .wk-product-variants-item .wk_option_title{
	font-size:16px;
	font-weight:700;
	margin-left:0
}
.ets_mm_megamenu.layout_layout5{
	background:transparent!important
}
.ets_mm_megamenu.layout_layout5 .mm_menus_li > a{text-transform:none}
.product-miniature .thumbnail-container{
	border-radius:20px
}

@media (min-width: 767px) {
	
	.mm_menu_content_title{
	min-height:40px!important
}
ul.mm_menus_ul{
	justify-content:center;
	display:flex;
}
}
@media (max-width: 767px) {
.productbundlespro .pbp-bundle .bundle-title{
		width:100%
	}
}

/* ====================================================================
   AP5 (pm_advancedpack) : fiche pack v2 calquee sur la fiche produit
   Bricoleurre, 25/08/2026
   Galerie du pack a gauche (partial standard product-cover-thumbnails)
   + vignettes des composants ; droite : H1, description, composition
   (declinaisons), economies, prix final.
   Prerequis : champ CSS personnalise du module AP5 vide (dynamic-1.css).
   ==================================================================== */

/* -- neutralisation des reglages provisoires du champ CSS du module (dynamic-1.css)
   sur les floats uniquement : les largeurs restent gerees par les colonnes Bootstrap -- */
.page-product:has(#ap5-product-list) .product__left,
.page-product:has(#ap5-product-list) .product__right{
	float:none!important;
}
/* Conteneur des boutons */
.ap5-attribute-list ul {
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Chaque élément */
.ap5-attribute-list .input-container {
    margin: 0;
}

/* On cache le radio natif */
.ap5-attribute-list .ap5-attribute-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Apparence du bouton (2026-09-04 : alignee sur .product__variants .radio-label, meme taille/couleur que la fiche produit simple) */
.ap5-attribute-list .radio-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid #1DBBF7;
    border-radius: 4px;
    background: #1dbbf73d;
    color: #1DBBF7;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Au survol */
.ap5-attribute-list .radio-label:hover {
    border-color: #333;
}

/* Bouton sélectionné */
.ap5-attribute-list .ap5-attribute-radio:checked + .radio-label {
    background: #1DBBF7;
    border-color: #1DBBF7;
    color: #fff;
}

/* Petit effet au clic */
.ap5-attribute-list .radio-label:active {
    transform: scale(0.97);
}
@media (max-width: 991.98px){
	.page-product:has(#ap5-product-list) .product__left,
	.page-product:has(#ap5-product-list) .product__right{
		width:100%!important;
	}
}

/* -- regles utiles reprises de l'ancien dynamic-1.css -- */
.page-product .pm-ap-owl-carousel.pm-ap-owl-loaded,
.page-product h2#ap5_pack_description_heading,
.page-product div#ap5-pack-content-block{
	display:none;
}

/* -- vignettes des composants sous la galerie (#ap5-product-list, re-rendu AJAX) -- */
.bl-pack-items{
	margin-top:16px;
}
.bl-pack-items__title{
	font-size:.78rem;
	text-transform:uppercase;
	letter-spacing:.5px;
	color:#6b7280;
	font-weight:600;
	margin:0 0 8px;
}
.bl-pack-items__list{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}
.bl-pack-item{
	width:92px;
	margin:0;
	text-align:center;
}
.bl-pack-item__img{
	position:relative;
	width:92px;
	height:92px;
	border-radius:10px;
	overflow:hidden;
	background:#fff;
	border:1px solid #e6e2da;
}
.bl-pack-item__img img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.bl-pack-item__qty{
	position:absolute;
	top:4px;
	right:4px;
	font-size:.7rem;
	font-weight:600;
	background:#0f2b46;
	color:#fff;
	border-radius:5px;
	padding:0 5px;
}
.bl-pack-item__name{
	font-size:.72rem;
	color:#6b7280;
	line-height:1.25;
	margin-top:4px;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

/* -- composition du pack (colonne droite, re-rendue en AJAX) -- */
.bl-pack-compo{
	margin-bottom:8px;
	background:#fff;
	padding:20px 50px;
	border-radius:20px
}
.bl-pack-compo__title{
	font-size:1.15rem;
	text-transform:uppercase;
	margin:0 0 2px;
}
.bl-pack-compo__subtitle{
	font-size:.82rem;
	color:#6b7280;
	margin:0 0 15px;
}
.bl-compo-item{
	position:relative;
	padding:8px 0;

}
.bl-compo-item__head{
	display:flex;
	justify-content:space-between;
	align-items:baseline;
	gap:12px;
}
.bl-compo-item__name{
	font-size:.9rem;
	font-weight:600;
	min-width:0;
}
.bl-compo-item__name a{
	color:#0f2b46;
}
.bl-compo-item__qty{
	font-size:.72rem;
	background:#0f2b46;
	color:#fff;
	border-radius:5px;
	padding:0 6px;
	font-weight:600;
	margin-left:6px;
}
.bl-compo-item__price{
	white-space:nowrap;
	font-size:0;
	font-weight:600;
	color:#0f2b46;
}
div#ap5-product-list {
    display: none;
}
.page-product .product__add-to-cart .product-actions__button button {
    width: 100%;
    height: 38px;
}
.bl-compo-item__price-was{
	font-weight:400;
	color:#6b7280;
	font-size:0px;
	margin-right:6px;
}
.bl-compo-item .product-actions{
	margin-top:8px;
}
.bl-compo-item .ap5-attributes{
	display:flex;
	flex-wrap:wrap;
	gap:8px 18px;
}
.bl-compo-item .product-variants-item{
	display:flex;
	flex-direction:column;
	gap:3px;
	margin:0;
	min-width:200px;
	flex:1;
}
h2.bl-pack-compo__title{
	text-transform:none;
	font-size:26px
}
.bl-compo-item .control-label{
	font-size:.7rem;
	text-transform:uppercase;
	letter-spacing:.4px;
	color:#6b7280;
	font-weight:600;
	margin:0;
	display:none
}
.bl-compo-item .ap5-attribute-select{
	width:100%;
	border-radius:8px;
}
.bl-compo-item .bl-attr-single{
	font-size:.9rem;
	font-weight:600;
	color:#0f2b46;
}
.bl-compo-item .ap5-no-option-note{
	font-size:.78rem;
	color:#6b7280;
	font-style:italic;
	margin:2px 0 0;
}
.bl-compo-item .alert{
	margin:8px 0 0;
}

/* -- economies : avant le prix final -- */
.ap5-pack-savings{
	margin:12px 0 0;
}
.ap5-pack-savings__was{
	font-size:.85rem;
	color:#6b7280;
	margin:0 0 6px;
}
.ap5-pack-savings__was s{
	font-size:.95rem;
}
.ap5-pack-savings__eco{
	display:inline-flex;
	align-items:center;
	gap:8px;
	background:#e3f7ef;
	color:#0e9f6e;
	border-radius:10px;
	padding:8px 14px;
	font-weight:700;
	font-size:.95rem;
	margin:0;
}
.ap5-pack-savings__eco:before{
	content:"\2713";
	font-weight:700;
}

/* -- prix final : style fiche produit (herite de .product__prices), sans doublon -- */
.page-product:has(#ap5-product-list) #ap5-price-container .product__prices .product__discount{
	display:none;
}
.page-product:has(#ap5-product-list) #ap5-price-container .product__prices{
	margin-top:12px;
}

/* -- bandeau vert stock/expedition : masque sur les packs (deja beaucoup d'infos) -- */
.page-product:has(#ap5-product-list) #ap5-buy-block-container .green-block{
	display:none;
}

/* -- desactivation du "suivi de scroll" du module (classe ap5-fixed + top/width
   inline par pack-17.js) -- */
@media (min-width: 768px){
	form.ap5-buy-block.ap5-fixed{
		position:static!important;
		top:auto!important;
		width:auto!important;
	}
}

/* -- descriptions : neutralise les fonds blancs inline herites de l'import
   42stores dans le contenu produit (a nettoyer aussi en BO) -- */
.page-product:has(#ap5-product-list) .product__description-short,
.page-product:has(#ap5-product-list) .product__description-short *,
.page-product:has(#ap5-product-list) .product__description,
.page-product:has(#ap5-product-list) .product__description *{
	background:transparent!important;
}

/* -- mobile : respiration laterale + barre .add-basket alignee -- */
@media (max-width: 767px){
	.bl-pack-item,
	.bl-pack-item__img{
		width:76px;
	}
	.bl-pack-item__img{
		height:76px;
	}
	/* le row bootstrap collait aux bords de l'ecran : on rend ses marges
	   negatives neutres, le padding des colonnes fait la respiration */
	.page-product:has(#ap5-product-list) .product.js-product-container{
		margin-left:0;
		margin-right:0;
	}
	/* barre d'achat fixe : quantite et bouton sur UNE ligne, barre fine */
	.page-product:has(#ap5-product-list) .add-basket{
		display:flex!important;
		align-items:center;
		gap:10px;
		left:0;
		right:0;
		width:100%!important;
		margin:0!important;
		padding:8px 12px calc(8px + env(safe-area-inset-bottom));
	}
	.page-product:has(#ap5-product-list) .add-basket > *{
		margin:0;
		padding:0;
	}
	.page-product:has(#ap5-product-list) .add-basket .product-actions__quantity{
		width:auto!important;
		flex:0 0 auto!important;
	}
	.page-product:has(#ap5-product-list) .add-basket .product-actions__button{
		width:auto!important;
		flex:1 1 auto!important;
	}
	.page-product:has(#ap5-product-list) .add-basket .product-actions__button button{
		width:100%;
		margin:0;
		padding-top:9px;
		padding-bottom:9px;
	}
}

/* ==========================================================================
   Fiche produit — vignettes de prix specifiques par quantite
   (templates/catalog/_partials/product-discounts.tpl)
   ========================================================================== */
.product__discounts .product__discounts__grid{
	display:flex;
	flex-wrap:wrap;
	gap:16px;
	margin-bottom:1.5rem;
}
.product__discounts .discount-card{
	position:relative;
	flex:1 1 150px;
	background:#fff;
	border:1px solid #e5e7eb;
	border-radius:12px;
	padding:28px 16px 20px;
	text-align:center;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:2px;
}
.product__discounts .discount-card--best{
	border:2px solid #e2492c;
}
.product__discounts .discount-card__badge{
	position:absolute;
	top:-10px;
	right:12px;
	background:#e2492c;
	color:#fff;
	font-weight:700;
	font-size:0.85rem;
	line-height:1;
	padding:6px 10px;
	border-radius:4px;
	white-space:nowrap;
}
.product__discounts .discount-card__quantity{
	color:#6c757d;
	font-size:0.9rem;
	margin-top:8px;
}
.product__discounts .discount-card__price{
	color:#0f2b46;
	font-size:1.4rem;
	font-weight:700;
	margin-top:6px;
}
.product__discounts .discount-card__regular-price{
	color:#9aa0a6;
	font-size:0.85rem;
	text-decoration:line-through;
}
.product__discounts .discount-card__save{
	color:#2e7d32;
	font-size:0.8rem;
	font-weight:600;
	margin-top:6px;
}
.thumbnails__container .thumbnail.active img{
	border:2px solid #168ab6
}
.ap5-product-footer-pack-informations {
    margin-bottom: 20px;
    border: 1px solid #d5d5d5;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0px 0px 10px #d5d5d5;
	display:flex
}
.ap5-product-footer-pack-informations .product-price.h5.has-discount {
    color: #168ab6;
    font-size: 25px;
}
.ap5-product-footer-pack-name span.btn.btn-secondary.ms-1 i,.ap5-product-footer-pack-name button.btn.btn-primary.add-to-cart i{
	display:none
}
.ap5-price-container{
	width:100%
}
@media (max-width: 767px) {
	.ap5-product-footer-pack-informations{
		display:block
	}
	.ap5-price-container {
        float: right;
    }
	
	.ap5-product-footer-pack-name a span.ap5-view-pack-name{display:block}
	#product .product__left.col-lg-6.col-xl-7{
		width:100%
	}
	body .ets_mm_megamenu.layout_layout5:not(.ybc_vertical_menu) .mm_menus_ul{
		background:#f8f8f8!important
	}
    .ets_mm_megamenu .container {
       background-color: transparent!important;
        padding: 0;
    }
	.ybc-menu-toggle.ybc-menu-btn.closed {
    font-size: 0;
	padding:0
}
}

/* Badge "Disponible en pack" sur l'image de couverture produit (2026-09-04) */
.product__pack-badge{
	position:absolute;
	top:0.5rem;
	right:0.5rem;
	z-index:2;
	background-color:#1dbbf7;
	color:#fff;
	text-decoration:none;
	box-shadow:0 1px 4px rgba(0,0,0,0.25);
}
.product__pack-badge:hover,
.product__pack-badge:focus{
	background-color:#0f2b46;
	color:#fff;
	text-decoration:none;
}

/* Vignette de couverture du pack dans la liste "Ce produit est aussi disponible en pack" (2026-09-04) */
.ap5-product-footer-pack-image{
	display:inline-block;
	vertical-align:middle;
	margin-right:0.75rem;
}
.ap5-product-footer-pack-image img{
	width:64px;
	height:64px;
	object-fit:contain;
	border:1px solid #e5e5e5;
	border-radius:4px;
	background:#fff;
}

/* Page pack (2026-09-04) : la description courte doit s'afficher, en mobile,
 * entre la galerie d'images et le bloc "Composez votre pack" -- pas avant les
 * images (bug du module : order -2, voir modules/pm_advancedpack/views/css/module-hummingbird.css)
 * et pas apres tout le reste. .product__left a order -1, on aligne dessus :
 * l'ordre source (.product__left avant .product__description-short dans le DOM)
 * les replace alors dans le bon ordre visuel. */
@media (max-width: 767.98px) {
	.bl-pack-compo{
		padding:20px
	}
	.product__additional-info.js-product-additional-info{float:none}
	.page-product.ap5-pack-page .product__description-short {
		order: -1 !important;
	}
}

/* Facade video pour les "shorts" YouTube de la page d'accueil (2026-09-04).
 * .short-container / iframe.lazy-yt existent deja (5 blocs Elementor) ; le
 * script qui les charge doit etre remplace (voir Elisabeth / MEMORY.md) par
 * une version qui affiche une miniature + bouton play generes ici, et ne
 * charge le vrai lecteur YouTube qu'au clic. */
.short-container {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	background: #000;
}
.short-container .yt-facade-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 2;
}
.short-container .yt-facade-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 48px;
	background: rgba(0, 0, 0, 0.7);
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transition: background 0.2s ease;
	z-index: 3;
}
.short-container:hover .yt-facade-play {
	background: rgba(29, 187, 247, 0.85);
}
.short-container .yt-facade-play::after {
	content: "";
	border-style: solid;
	border-width: 11px 0 11px 19px;
	border-color: transparent transparent transparent #fff;
	margin-left: 4px;
}
.short-container iframe.lazy-yt {
	width: 100%;
	height: 100%;
	border: 0;
}

/* Bricoleurre 2026-09-11 - Page pack (mode simple) : evite le doublon
   d'affichage de la composition du pack. Le hook displayProductAdditionalInfo
   (bloc #ap5-product-list, liste brute du module Advanced Pack) et le bloc
   "Composez votre pack" stylise (#ap5-buy-block-container / .bl-pack-compo,
   injecte par le mode simple du module a l'interieur du formulaire d'ajout au
   panier) affichent le meme contenu en parallele.
   Choix d'Elisabeth (confirme le 2026-09-11) : garder le bloc #ap5-product-list
   (celui qui propose "[Retirer]"/"[Ajouter]" par produit -- fonctionnalite
   absente du bloc "Composez votre pack") et masquer seulement la liste
   redondante .bl-pack-compo en double, PAS tout #ap5-buy-block-container :
   ce conteneur contient aussi le prix (#ap5-price-container) et le formulaire
   d'ajout au panier (bouton "Ajouter au panier", quantite) -- le masquer
   entierement faisait disparaitre le prix et le bouton (corrige le 2026-09-11,
   retour d'Elisabeth).
   Verifie en direct sur la fiche pack Twiesteck
   (https://bricoleurre.com/3516504-pack-twiesteck.html) :
   plus de doublon, prix et bouton "Ajouter au panier" bien affiches, pas de trou
   dans la mise en page, le bouton [Retirer] fonctionne (griser le produit +
   bascule en [Ajouter]). */
body.ap5-pack-page-simple-mode #ap5-buy-block-container .bl-pack-compo {
	display: none;
}

/* Bricoleurre 2026-09-11 (suite 2) - meme habillage visuel que "Composez votre
   pack" (.bl-pack-compo, desormais masque - cf. entree precedente), applique
   cette fois au bloc #ap5-product-list qu'on garde definitivement (Retirer +
   photo produit, absents de l'autre bloc). Carte blanche arrondie, typo
   alignee sur .bl-compo-item, + vignette photo (64x64) et lien [Retirer]/
   [Ajouter] stylise en discret plutot qu'en texte brut souligne. Le titre
   "Composez votre pack" est injecte en tete de ce bloc par JS
   (bricoleurreAddPackComposerHeading, custom.js) car #ap5-product-list est
   re-rendu par l'AJAX du module a chaque changement de declinaison -- impossible
   de le coder en dur dans un .tpl (voir CLAUDE.md : les surcharges .tpl du
   module ne sont pas prises en compte sur ce site). Teste en direct (CSS/JS
   injectes temporairement dans le navigateur) avant envoi. */
#ap5-product-list{
	margin-bottom:8px;
	background:#fff;
	padding:20px 24px;
	border-radius:20px;
}
.js-pack-composer-heading .bl-pack-compo__subtitle{
	margin-bottom:12px;
}
#ap5-product-list .ap5-pack-product{
	position:relative;
	padding:10px 0;
	border-bottom:1px solid #f0ede6;
}
#ap5-product-list .ap5-pack-product:first-child{
	padding-top:0;
}
#ap5-product-list .ap5-pack-product:last-child{
	border-bottom:none;
	padding-bottom:0;
}
#ap5-product-list .ap5-pack-product .row{
	display:flex;
	flex-wrap:nowrap;
	align-items:flex-start;
	gap:12px;
	margin:0;
}
#ap5-product-list .ap5-pack-product-image{
	flex:0 0 auto;
	width:64px;
	padding:0;
}
#ap5-product-list .ap5-pack-product-image img{
	width:64px;
	height:64px;
	object-fit:contain;
	border-radius:10px;
	border:1px solid #e6e2da;
	background:#fff;
}
#ap5-product-list .ap5-pack-product-content{
	flex:1;
	min-width:0;
	padding:0;
}
#ap5-product-list .ap5-pack-product-title{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:baseline;
	gap:4px 12px;
	font-size:.9rem;
	font-weight:600;
	margin:0 0 6px;
}
#ap5-product-list .ap5-pack-product-title a{
	color:#0f2b46;
}
/* Boutons Retirer / Ajouter du pack (2026-09-25) : crochets retires en JS
   (custom.js, bricoleurreStylePackToggleLabels), style pilule du site */
#ap5-product-list .ap5-pack-product-remove-label,
#ap5-product-list .ap5-pack-product-add-label{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:6px 16px;
	border-radius:20px;
	font-size:.85rem;
	font-weight:600;
	line-height:1.4;
	white-space:nowrap;
	cursor:pointer;
	user-select:none;
	transition:background-color .15s, color .15s, border-color .15s;
}
#ap5-product-list .ap5-pack-product-remove-label{
	background:#fff;
	color:#0f2b46;
	border:1px solid #cfd8e3;
}
#ap5-product-list .ap5-pack-product-remove-label::before{
	content:"\2212";
	font-weight:700;
}
#ap5-product-list .ap5-pack-product-remove-label:hover,
#ap5-product-list .ap5-pack-product-remove-label:focus-visible{
	background:#F4F7FA;
	border-color:#0f2b46;
	outline:none;
}
#ap5-product-list .ap5-pack-product-add-label{
	background:#1dbbf7;
	color:#fff;
	border:1px solid #1dbbf7;
}
#ap5-product-list .ap5-pack-product-add-label::before{
	content:"+";
	font-weight:700;
}
#ap5-product-list .ap5-pack-product-add-label:hover,
#ap5-product-list .ap5-pack-product-add-label:focus-visible{
	background:#1dbbf7a6;
	border-color:#1dbbf7a6;
	outline:none;
}
#ap5-product-list .attribute_label{
	font-size:.7rem;
	text-transform:uppercase;
	letter-spacing:.4px;
	color:#6b7280;
	font-weight:600;
}
#ap5-product-list .control-label{
	display:none !important; /* module-hummingbird.css a une regle plus specifique */
}
#ap5-product-list .ap5-attribute-select{
	width:100%;
	max-width:220px;
	border-radius:8px;
}
#ap5-product-list .product-variants.ap5-attributes{
	margin-top:6px;
}

/* -- petit "saut" de la page au changement de declinaison sur un pack
   (2026-09-11) -- le spinner de chargement (ajoute par pack-17.js sur
   #ap5-product-list) puis le remplacement de #ap5-product-list et
   #ap5-buy-block-container (nouvelle taille de contenu a chaque fois)
   font legerement varier leur hauteur ; le "scroll anchoring" du navigateur
   compense alors en decalant la page de quelques pixels, ce qui se voit
   comme un petit saut au niveau du prix. On desactive ce comportement sur
   ces deux blocs (aucun autre effet, c'est purement le rattrapage de scroll
   automatique du navigateur qui est coupe). */
#ap5-product-list,
#ap5-buy-block-container{
	overflow-anchor:none;
}

/* -- le bloc grandit vers le bas au changement de declinaison (2026-09-11,
   suite) -- en plus du saut ci-dessus, le spinner de chargement lui-meme
   (<div class="ap5-loader"> ajoute par pack-17.js pendant l'appel AJAX,
   visible via la classe "ap5-loader-blur" ajoutee a #ap5-product-list) reste
   dans le flux normal (position:relative dans le CSS du module) : il ajoute
   donc reellement ~25px de hauteur au bloc pendant le chargement, ce qui
   pousse le contenu en dessous vers le bas. On sort le spinner du flux en le
   passant en position absolute pendant le chargement, sans toucher a sa
   taille ni a l'animation -- il flotte alors par-dessus le contenu au lieu
   de l'agrandir. */
#ap5-product-list.ap5-loader-blur,
#ap5-buy-block-container.ap5-loader-blur{
	position:relative;
}
#ap5-product-list.ap5-loader-blur > .ap5-loader,
#ap5-buy-block-container.ap5-loader-blur > .ap5-loader{
	position:absolute !important;
	left:50%;
	transform:translateX(-50%);
	margin:0 !important;
}

/* Noms des produits du pack non cliquables (2026-09-25) -- filet de securite,
   le lien est normalement remplace par un <span> dans custom.js */
.ap5-pack-product-name a,
.ap5-pack-product-title a,
.bl-compo-item__name a {
	pointer-events: none;
	cursor: default;
	color: inherit;
	text-decoration: none;
}