/* --------------------------------------------------------------------------
   CATALOGUE / FILTRES
   -------------------------------------------------------------------------- */

.bl_accueil .headerfamily {width:calc(100% - 30px);  height:auto; margin:0 auto 25px; padding:15px; background:#fff;}
.bl_accueil .headerfamily h1 {width:100%; max-width:1024px; margin:0 0 30px; padding:0 15px;}
.bl_accueil .headerfamily .present_page {width:calc(100% - 30px); height:auto; margin:0 auto; padding:0 15px;}
.bl_accueil .headerfamily .present_page .present_page_c {width:calc(100% - 30px); padding:15px; font-size:12px;}
.bl_accueil .headerfamily .present_page .present_page_c p {margin:3px 0;}
.bl_accueil .headerfamily .list_cat {width:calc(100% - 30px); margin:0 auto; padding:0 15px; display:flex; flex-flow:row wrap; align-items:center;}
.bl_accueil .headerfamily .list_cat .row_cat {width:300px; height:120px; margin:5px 10px 5px 0; display:flex; align-items:center; overflow:hidden; border:1px solid #ddd; font-size:16.5px; line-height:18px; transition:box-shadow .2s ease-out;}
.bl_accueil .headerfamily .list_cat .row_cat:hover {box-shadow:0 0 5px rgba(0,0,0,.1);}
.bl_accueil .headerfamily .list_cat .row_cat img {width:120px; height:120px; margin-right:15px;}
.bl_accueil .headerfamily .infobrand,
.bl_accueil .headerfamily .infobrand img {width:200px;}

.bl_accueil .filterselected {width:100%; height:50px; margin:10px 0; display:flex; align-items:first baseline; font-size:10px;}
.bl_accueil .filterselected .buttfilter {position:relative; height:15px; margin:0 5px 0 10px; padding:5px 25px 5px 10px; border:0; border-radius:15px; background:#d5d5d5; font-size:10px; line-height:15px;}
.bl_accueil .filterselected .buttfilter .close {position:absolute; top:4px; right:10px; height:100%; display:inline-block; color:red; font-size:16px; cursor:pointer; transform:rotate(45deg);}

/* Structure : barre de tri, filtres, puis grille produits. */
.bl_accueil {position:relative; gap:20px; padding-top:70px;}
.bl_accueil .collapseProduct.shop-filter-column {width:320px; flex:0 0 320px; display:flex; flex-direction:column; align-items:stretch;}
.bl_accueil .listprod {width:auto; min-width:0; flex:1 1 auto; max-width: calc(333px * 3);}

/* Compatibilité avec les anciennes branches catégorie / bons plans dans
   lesquelles le filtre et la grille sont tous deux enfants de collapseProduct. */
.bl_accueil .collapseProduct:not(.shop-filter-column) {width:100%; display:flex; flex-flow:row nowrap; align-items:flex-start; gap:30px;}
.bl_accueil .collapseProduct:not(.shop-filter-column) > .filter {box-sizing:border-box; width:320px; flex:0 0 320px; padding:20px; border:1px solid #e2e4e5; border-radius:18px; background:#fff;}
.bl_accueil .collapseProduct:not(.shop-filter-column) > .gridprod {width:auto; min-width:0; flex:1 1 auto; justify-content:flex-start; align-items:stretch;}

.shop-filter-toolbar { position:absolute; top:0px; left:0px; right:0px; margin: 0 auto; width:calc(var(--max-width) / 4 * 3); min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:20px; z-index:30;}
.shop-result-count {color:#60707a; font-size:14px;}
.shop-result-count strong {color:#082f43; font-size:17px;}

/* Menus déroulants : la structure historique ul > li > ul est conservée. */
.orderby {position:relative; width:100%;}
.orderby ul {width:100%; margin:0; padding:0; list-style:none;}
.orderby > ul > li {position:relative;}
.orderby .view_sort {position:relative; box-sizing:border-box; width:100%; min-height:42px; padding:10px 38px 10px 12px; display:block; border:1px solid #d9dde0; border-radius:7px; background:#fff; color:#39454b; font-size:12px; line-height:20px; cursor:pointer;}
.orderby .view_sort::after {content:''; position:absolute; top:50%; right:14px; width:7px; height:7px; border-right:1.5px solid #082f43; border-bottom:1.5px solid #082f43; transform:translateY(-70%) rotate(45deg); transition:transform .18s ease;}
.orderby .view_sort:focus-visible {outline:2px solid rgba(239,88,70,.25); outline-offset:2px;}
.orderby > ul > li.is-open > .view_sort::after {transform:translateY(-25%) rotate(225deg);}
.orderby .view_sort span {color:#082f43; font-weight:700;}
.orderby .filter-options,
.orderby li > ul {position:absolute; top:calc(100% + 5px); left:0; width:calc(100% - 12px); max-height:280px; margin:0; padding:6px; display:none; overflow-y:auto; border:1px solid #e3e5e6; border-radius:7px; background:#fff; box-shadow:0 10px 28px rgba(8,47,67,.12); z-index:950;}
.orderby > ul > li:not(.is-open) > ul {display:none !important;}
.orderby > ul > li.is-open > ul {display:block !important;}
.orderby .filter-options li,
.orderby li > ul > li {width:auto; padding:8px 10px; float:none; border:0; border-radius:5px; color:#273940; font-size:12.5px; line-height:18px; cursor:pointer;}
.orderby .filter-options li:hover,
.orderby li > ul > li:hover {background:#fffcf4; color:var(--color_theme);}
.shop-sort-control {width:245px; flex:0 0 245px;}

/* Panneau principal. */
.bl_accueil .shop-filter-panel {position:relative; box-sizing:border-box; width:100%; height:auto; padding:22px 20px; border:1px solid #e2e4e5; border-radius:18px; background:#fff; box-shadow:0 6px 20px rgba(8,47,67,.035); transition:box-shadow .25s ease-out;}
.bl_accueil .shop-filter-panel:hover {box-shadow:0 10px 28px rgba(8,47,67,.055);}
.bl_accueil .shop-filter-panel h3 {margin:0 0 22px; padding:0; color:#082f43; font-size:19px; font-weight:800; line-height:1.2;}

.shop-filter-sr-only {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.shop-filter-search {position:relative; margin:0 0 18px;}
.shop-filter-search input {box-sizing:border-box; width:100%; height:42px; padding:0 38px 0 13px; border:1px solid #d9dde0; border-radius:7px; outline:0; background:#fff; color:#273940; font-family:inherit; font-size:12.5px; transition:border-color .2s ease,box-shadow .2s ease;}
.shop-filter-search input::placeholder {color:#879198; opacity:1;}
.shop-filter-search input:focus {border-color:var(--color_theme); box-shadow:0 0 0 3px rgba(239,88,70,.1);}
.shop-filter-search input::-webkit-search-cancel-button {display:none;}
.shop-filter-search-clear {position:absolute; top:50%; right:7px; width:28px; height:28px; padding:0; display:none; border:0; border-radius:50%; background:transparent; color:#60707a; font-family:Arial,sans-serif; font-size:19px; line-height:28px; cursor:pointer; transform:translateY(-50%);}
.shop-filter-search.has-value .shop-filter-search-clear {display:block;}
.shop-filter-search-clear:hover {background:#f2f4f4; color:var(--color_theme);}

.shop-filter-group {margin:0; padding:18px 0; border:0; border-bottom:1px solid #e6e7e8;}
.shop-filter-group:first-of-type {padding-top:0;}
.shop-filter-group h4 {margin:0 0 12px; color:#1f2e35; font-size:14px; font-weight:750; line-height:1.25;}

.shop-check {position:relative; width:fit-content; margin:0 0 9px; display: flex !important; align-items:center; gap:9px; color:#58646a; font-size:13px; line-height:18px; cursor:pointer;}
.shop-check:last-child {margin-bottom:0;}
.shop-check input {position:absolute; width:1px; height:1px; opacity:0;}
.shop-check > span {position:relative; display: block; box-sizing:border-box; width:16px; height:16px; flex:0 0 16px; border:1px solid #bbc2c5; border-radius:4px; background:#fff;}
.shop-check input:checked + span {border-color:var(--color_theme); background:var(--color_theme);}
.shop-check input:checked + span::after {content:''; position:absolute; top:2px; left:5px; width:4px; height:8px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg);}
.shop-check input:focus-visible + span {outline:2px solid rgba(239,88,70,.25); outline-offset:2px;}

.shop-filter-pills {display:flex; flex-wrap:wrap; gap:7px;}
.shop-filter-pill {min-width:76px; padding:7px 11px; border:1px solid #cfd4d7; border-radius:9px; background:#fff; color:#4b585e; font-family:inherit; font-size:12px; line-height:18px; cursor:pointer; transition:border-color .2s ease,color .2s ease,background .2s ease;}
.shop-filter-pill:hover,
.shop-filter-pill.is-active {border-color:var(--color_theme); background:#fff7f4; color:var(--color_theme);}

.shop-price-range {position:relative; height:22px; margin:4px 2px 2px;}
.shop-price-range::before {content:''; position:absolute; top:9px; left:0; right:0; height:4px; border-radius:10px; background:linear-gradient(to right,#d9dde0 0%,#d9dde0 var(--price-start),var(--color_theme) var(--price-start),var(--color_theme) var(--price-end),#d9dde0 var(--price-end),#d9dde0 100%);}
.shop-price-range input[type='range'] {position:absolute; top:0; left:0; width:100%; height:22px; margin:0; padding:0; border:0; outline:0; appearance:none; -webkit-appearance:none; background:transparent; pointer-events:none;}
.shop-price-range input[type='range']::-webkit-slider-runnable-track {height:4px; background:transparent;}
.shop-price-range input[type='range']::-webkit-slider-thumb {width:14px; height:14px; margin-top:-5px; border:0; border-radius:50%; appearance:none; -webkit-appearance:none; background:var(--color_theme); box-shadow:0 0 0 3px #fff; cursor:grab; pointer-events:auto;}
.shop-price-range input[type='range']::-moz-range-track {height:4px; border:0; background:transparent;}
.shop-price-range input[type='range']::-moz-range-thumb {width:14px; height:14px; border:0; border-radius:50%; background:var(--color_theme); box-shadow:0 0 0 3px #fff; cursor:grab; pointer-events:auto;}
.shop-price-range input[type='range']:focus-visible::-webkit-slider-thumb {box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(239,88,70,.25);}
.shop-price-range input[type='range']:focus-visible::-moz-range-thumb {box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(239,88,70,.25);}
.shop-price-values {margin:0 0 12px; display:flex; justify-content:space-between; color:#4b585e; font-size:12px;}
.shop-price-values output {font:inherit;}
.shop-filter-select .view_sort {width:100%;}

.shop-filter-reset {width:100%; margin-top:15px; padding:8px 5px; border:0; background:transparent; color:#315469; font-family:inherit; font-size:12.5px; text-align:left; cursor:pointer;}
.shop-filter-reset span {margin-right:6px; color:var(--color_theme); font-size:18px; vertical-align:-1px;}
.shop-filter-reset:hover {color:var(--color_theme);}

/* Carte conseil sous les filtres. */
.shop-filter-help {position:relative; min-height:250px; margin-top:20px; display:flex; align-items:flex-end; overflow:hidden; border-radius:16px; background-image:linear-gradient(180deg,rgba(8,47,67,.14),rgba(8,47,67,.93)),url('../img/illustration/fond_shop_001.jpg'); background-position:center; background-size:cover; color:#fff;}
.shop-filter-help-content {width:100%; padding:22px 20px;}
.shop-filter-help h3 {margin:0 0 10px; color:#fff; font-size:21px; font-weight:800; line-height:1.08;}
.shop-filter-help p {margin:0 0 15px; color:rgba(255,255,255,.9); font-size:12px; line-height:1.45;}
.shop-filter-help-button {padding:9px 13px; border:1px solid var(--color_theme); border-radius:6px; background:var(--color_theme); color:#fff; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; transition:background .2s ease,transform .2s ease;}
.shop-filter-help-button:hover {background:var(--color_theme_h); transform:translateY(-2px);}

/* Filtres actifs et commande mobile. */
.shop-filter-mobile-toggle {display:none;}
.shop-active-filters {box-sizing:border-box; width:100%; min-height:34px; margin:0 0 16px; display:flex; flex-wrap:wrap; align-items:center; gap:7px;}
.shop-active-filters.is-empty {display:none;}
.shop-active-filters-title {margin-right:3px; color:#60707a; font-size:11.5px;}
.shop-active-filter {min-height:29px; padding:5px 9px 5px 11px; display:inline-flex; align-items:center; gap:7px; border:1px solid #d9dde0; border-radius:18px; background:#fff; color:#315469; font-family:inherit; font-size:11.5px; line-height:17px; cursor:pointer; transition:border-color .18s ease,color .18s ease,background .18s ease;}
.shop-active-filter b {color:var(--color_theme); font-family:Arial,sans-serif; font-size:16px; font-weight:400; line-height:14px;}
.shop-active-filter:hover {border-color:var(--color_theme); background:#fff7f4; color:var(--color_theme);}

/* Grille produits à droite. */
.bl_accueil .listprod .gridprod {position:relative; justify-content:flex-start; align-items:stretch; align-content:flex-start; transition:opacity .18s ease;}
.bl_accueil .listprod .gridprod .row_prod {width:calc(33.333% - 14px);}
.bl_accueil .listprod .gridprod.is-loading {min-height:220px; opacity:.42; pointer-events:none;}
.bl_accueil .listprod .gridprod.is-loading::after {content:''; position:absolute; top:80px; left:50%; width:32px; height:32px; margin-left:-16px; border:3px solid rgba(8,47,67,.18); border-top-color:var(--color_theme); border-radius:50%; animation:shop-filter-spin .7s linear infinite; z-index:20;}
.shop-filter-message {box-sizing:border-box; width:100%; min-height:220px; padding:60px 25px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#60707a; font-size:14px; line-height:1.5; text-align:center;}
.shop-filter-message img {width:110px; max-width:35%; height:auto; margin:0 0 18px; opacity:.7;}
.shop-filter-error {color:#a43b31;}
.shop-filter-empty-state {box-sizing:border-box; width:100%; min-height:310px; padding:45px 30px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#60707a; text-align:center;}
.shop-filter-empty-state img {width:105px; max-width:35%; height:auto; margin:0 0 18px; opacity:.72;}
.shop-filter-empty-state h3 {margin:0 0 8px; color:#082f43; font-size:20px; line-height:1.3;}
.shop-filter-empty-state p {max-width:620px; margin:0; font-size:13px; line-height:1.55;}
.shop-filter-empty-actions {margin-top:20px; display:flex; flex-wrap:wrap; justify-content:center; gap:9px;}
.shop-filter-empty-actions button {padding:9px 13px; border:1px solid #cfd4d7; border-radius:7px; background:#fff; color:#315469; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer;}
.shop-filter-empty-actions button:first-child {border-color:var(--color_theme); background:var(--color_theme); color:#fff;}
.shop-filter-empty-actions button:hover {border-color:var(--color_theme); color:var(--color_theme);}
.shop-filter-empty-actions button:first-child:hover {background:var(--color_theme_h); color:#fff;}
.shop-suggestions {box-sizing:border-box; width:100%; margin:10px 0 20px; padding:30px 0 0; border-top:1px solid #e4e6e7; text-align:center;}
.shop-suggestions-kicker {margin:0 0 5px !important; color:var(--color_theme) !important; font-size:11px !important; font-weight:800; letter-spacing:.08em; text-transform:uppercase;}
.shop-suggestions h3 {margin:0 0 7px; color:#082f43; font-size:22px; line-height:1.25;}
.shop-suggestions > p {margin:0 auto 22px; color:#60707a; font-size:12.5px; line-height:1.5;}
.shop-suggestion-grid {width:100%; display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:stretch; text-align:left;}

@keyframes shop-filter-spin {
    to {transform:rotate(360deg);}
}

/* Recherche historique. */
.bl_accueil .zone_search {position:absolute; top:70px; left:450px; width:calc(100% - 750px); min-width:150px; height:45px; border:1px solid var(--color_theme_tr); background:var(--background_search); transition:all .3s ease-out;}
.bl_accueil .zone_search .content,
.bl_accueil .zone_search .content .zinput {position:relative; width:100%; height:45px; margin:0; padding:0; display:block;}
.bl_accueil .zone_search .content .zinput input[type='text'] {position:absolute; top:0; left:0; width:calc(100% - 65px); height:45px; padding:0 15px; border:0; outline:0; background:none; color:#21251c; font-size:16px; line-height:45px;}
.bl_accueil .zone_search .content .zinput input[type='submit'] {position:absolute; top:4px; right:5px; width:30px; height:40px; border:0; outline:0; background:transparent url('../img/boutons/search.png') center/30px 30px no-repeat; cursor:pointer;}
.bl_accueil .zone_search .content .zinput input[type='submit']:hover {transform:scale(1.05);}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media screen and (max-width:1180px) {
    .bl_accueil .collapseProduct.shop-filter-column {width:250px; flex-basis:250px;}
    .bl_accueil .listprod .gridprod .row_prod {width:calc(50% - 10px);}
}

@media screen and (max-width:900px) {
    .bl_accueil {gap:22px;}
    .bl_accueil .collapseProduct.shop-filter-column {width:230px; flex-basis:230px;}
    .bl_accueil .shop-filter-panel {padding:20px 16px;}
}

@media screen and (max-width:768px) {
    .bl_accueil {padding-top:0; flex-direction:column; gap:25px;}
    .shop-filter-toolbar {position:static; width:100%; flex-wrap:wrap; order:-1;}
    .shop-sort-control {width:220px; flex-basis:220px;}
    .bl_accueil .collapseProduct.shop-filter-column,
    .bl_accueil .listprod {width:100%; flex:0 0 auto;}
    .shop-filter-mobile-toggle {box-sizing:border-box; width:100%; min-height:48px; padding:11px 15px; display:flex; align-items:center; justify-content:space-between; gap:15px; border:1px solid #d9dde0; border-radius:9px; background:#fff; color:#082f43; font-family:inherit; font-size:13.5px; font-weight:800; cursor:pointer;}
    .shop-filter-mobile-toggle::after {content:''; width:8px; height:8px; margin-left:auto; border-right:1.5px solid #082f43; border-bottom:1.5px solid #082f43; transform:translateY(-2px) rotate(45deg); transition:transform .18s ease;}
    .shop-filter-mobile-toggle[aria-expanded='true']::after {transform:translateY(2px) rotate(225deg);}
    .shop-filter-mobile-status {color:#60707a; font-size:11px; font-weight:500;}
    .bl_accueil .shop-filter-panel,
    #sideright,
    #sideright.sticky {position:static !important; width:100%; margin:0; display:none; transform:none !important;}
    .bl_accueil .shop-filter-panel.is-mobile-open,
    #sideright.is-mobile-open {display:block;}
    .shop-filter-help {min-height:210px;}
    .bl_accueil .listprod .gridprod .row_prod {width:calc(50% - 10px);}
    .shop-active-filters {margin-top:-4px;}
}

@media screen and (max-width:520px) {
    .shop-filter-toolbar {align-items:stretch; flex-direction:column; gap:10px;}
    .shop-sort-control {width:100%; flex-basis:auto;}
    .bl_accueil .listprod .gridprod {flex-direction:column;}
    .bl_accueil .listprod .gridprod .row_prod {width:100%; margin-bottom:20px;}
    .shop-filter-empty-state {min-height:260px; padding:35px 15px;}
    .shop-filter-empty-actions {flex-direction:column; width:100%;}
    .shop-filter-empty-actions button {width:100%;}
    .shop-suggestions h3 {font-size:19px;}
    .bl_accueil .headerfamily,
    .bl_accueil .headerfamily .list_cat {width:100%; padding-right:0; padding-left:0;}
    .bl_accueil .headerfamily h1 {margin:0 auto; padding:10px 0; line-height:45px;}
    .bl_accueil .headerfamily .list_cat {flex-direction:column;}
    .bl_accueil .headerfamily .list_cat .row_cat {width:95%; max-width:320px;}
}