/* ===== Page « Tous les produits » ===== */

/* Bandeau : photo à droite + note manuscrite */
.page-hero { background: linear-gradient(90deg, #f3f9fb 0%, #f3f9fb 40%, rgba(243, 249, 251, 0) 62%), url('../images/newsletter.jpg') right 30% / cover no-repeat, #eef6f9; }
.page-hero-grid { min-height: 250px; }
.page-hero h1 { color: var(--deep); font-weight: 800; }
.page-hero p { color: #3d6b72; }
.trust-inline { gap: 8px; }
.trust-inline li { padding-right: 22px; }
.trust-inline li:not(:last-child) { border-right: 1px solid rgba(13, 85, 96, .12); }

/* Mise en page */
.shop { grid-template-columns: 290px minmax(0, 1fr); gap: 30px; padding-block: 34px 18px; }

/* Filtres */
.filters { padding: 22px 20px; gap: 6px; border-radius: 22px; border: 1px solid #e6eef0; box-shadow: none; top: 150px; }
.filters-head { margin-bottom: 8px; }
.filters-head h2 { font-size: 1.1rem; color: var(--deep); font-weight: 800; }
.filters-head a { color: var(--deep); font-size: .72rem; text-decoration: underline; }
.f-block { border-top: 1px solid #edf3f4; padding: 14px 0 6px; }
.f-block summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 800; font-size: .9rem; color: var(--deep); margin-bottom: 10px; }
.f-block summary::-webkit-details-marker { display: none; }
.f-chev { transition: transform .2s; color: var(--deep); }
.f-block:not([open]) .f-chev { transform: rotate(-90deg); }
.f-body { display: grid; gap: 4px; padding-bottom: 8px; }
.check { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--deep); font-weight: 600; padding: 5px 0; cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex: none; border: 1.6px solid #b9cfd3; border-radius: 5px; background: #fff; display: grid; place-items: center; margin: 0; cursor: pointer; transition: background .15s, border-color .15s; }
.check input[type=radio] { border-radius: 50%; }
.check input:checked { background: var(--deep); border-color: var(--deep); }
.check input[type=checkbox]:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.check input[type=radio]:checked::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.check em { font-style: normal; font-size: .68rem; font-weight: 700; background: #eaf3f4; color: #5f8086; border-radius: 999px; padding: 2px 9px; min-width: 30px; text-align: center; }
.f-search { display: flex; align-items: center; gap: 8px; border: 1px solid #e1ecee; border-radius: 12px; padding: 8px 12px; color: #6a8a90; margin-bottom: 6px; }
.f-search input { border: 0; outline: 0; font: inherit; font-size: .78rem; flex: 1; min-width: 0; background: none; }
.brand-row.is-extra { display: none; }
[data-brand-list].open .brand-row.is-extra { display: flex; }
.brand-row[hidden] { display: none !important; }
.f-more { background: none; border: 0; color: var(--deep); font: inherit; font-size: .78rem; font-weight: 700; text-decoration: underline; display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; justify-self: start; cursor: pointer; }
input[type=range] { accent-color: var(--deep); }
.range-labels { font-size: .75rem; color: #5f8086; font-weight: 600; }
.check.rate { gap: 8px; }
.check.rate .stars { gap: 2px; margin: 0; }
.check.rate .stars .icon { color: #d6e0e2; fill: currentColor; stroke: none; }
.check.rate .stars .icon.on { color: var(--amber); }
.rate-label { flex: 1; font-size: .76rem; color: #5f8086; font-weight: 600; }

.filters-promo { display: flex; align-items: center; gap: 12px; margin-top: 10px; background: linear-gradient(135deg, #e4f3f4, #f1f9fa); border-radius: 16px; padding: 14px 16px; color: var(--deep); position: relative; overflow: hidden; }
.filters-promo .fp-ic { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; color: var(--deep); }
.filters-promo p { flex: 1; font-size: .78rem; line-height: 1.3; font-weight: 600; }
.filters-promo b { display: block; font-weight: 800; }
.filters-promo strong { display: block; font-size: 1.25rem; font-weight: 800; }

/* Barre de résultats */
.results-bar { margin-bottom: 18px; }
.results-bar p { color: var(--deep); }
.results-tools { display: flex; align-items: center; gap: 14px; }
.sort { color: var(--deep); font-weight: 700; font-size: .8rem; }
.sort select { border: 1px solid #dfeaec; border-radius: 12px; padding: 10px 14px; font-weight: 600; color: var(--deep); min-width: 150px; }
.view-toggle { display: flex; gap: 6px; }
.view-toggle button { width: 38px; height: 38px; border-radius: 11px; border: 1px solid #dfeaec; background: #fff; color: #7a979c; display: grid; place-items: center; cursor: pointer; }
.view-toggle button.on { background: var(--deep); color: #fff; border-color: var(--deep); }

/* Grille / liste */
.product-grid { gap: 20px; }
.product-grid.is-list { grid-template-columns: 1fr; gap: 14px; }
.product-grid.is-list .product { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; grid-template-areas: "img title act" "img meta act" "img stars act" "img price act"; column-gap: 20px; align-items: center; padding: 14px 18px; }
.product-grid.is-list .product-img { grid-area: img; height: 140px; aspect-ratio: auto; }
.product-grid.is-list .product h3 { grid-area: title; min-height: 0; align-self: end; }
.product-grid.is-list .product .meta { grid-area: meta; }
.product-grid.is-list .product .stars { grid-area: stars; }
.product-grid.is-list .product .price { grid-area: price; align-self: start; }
.product-grid.is-list .product form { grid-area: act; width: 220px; margin: 0; }

/* Pagination */
.pager { gap: 10px; margin-top: 30px; }
.pager a, .pager span { min-width: 40px; height: 40px; border-color: #dfeaec; color: var(--deep); font-weight: 700; }
.pager .current { background: var(--deep); border-color: var(--deep); color: #fff; }
.pager .gap { border: 0; background: none; min-width: 20px; }
.pager .disabled { opacity: .4; }

@media (max-width: 1100px) { .shop { grid-template-columns: 250px minmax(0, 1fr); gap: 20px; } }
@media (max-width: 860px) {
    .shop { grid-template-columns: 1fr; }
    .filters { position: static; }
    .results-bar { flex-direction: column; align-items: flex-start; }
    .page-hero { background: linear-gradient(90deg, #f3f9fb 35%, rgba(243, 249, 251, .55)), url('../images/newsletter.jpg') 75% center / cover no-repeat; }
    .product-grid.is-list .product { grid-template-columns: 110px minmax(0, 1fr); grid-template-areas: "img title" "img meta" "img stars" "img price" "act act"; }
    .product-grid.is-list .product form { width: 100%; }
    .view-toggle { display: none; }
}

/* Sélecteur de tri moderne */
.dropsel { position: relative; }
.dropsel-btn { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 190px; background: #fff; border: 1px solid #dfeaec; border-radius: 14px; padding: 11px 16px; font: inherit; font-size: .84rem; font-weight: 700; color: var(--deep); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.dropsel-btn:hover, .dropsel.open .dropsel-btn { border-color: var(--logo-teal); }
.dropsel.open .dropsel-btn { box-shadow: 0 0 0 4px rgba(51, 165, 168, .14); }
.dropsel-btn .icon { color: var(--deep); transition: transform .2s; }
.dropsel.open .dropsel-btn .icon { transform: rotate(180deg); }
.dropsel-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 100%; width: max-content; margin: 0; padding: 8px; list-style: none; background: #fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(11, 79, 83, .18), 0 0 0 1px #e6eef0; animation: mega-in .15s ease-out; }
.dropsel-list li { padding: 10px 14px; border-radius: 10px; font-size: .84rem; font-weight: 600; color: var(--deep); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; transition: background .12s; }
.dropsel-list li:hover { background: var(--teal-soft); }
.dropsel-list li.on { background: var(--teal-soft); font-weight: 800; }
.dropsel-list li.on::after { content: ""; width: 10px; height: 6px; border: 2px solid var(--logo-teal); border-top: 0; border-right: 0; transform: rotate(-45deg); margin-top: -3px; }
.dropsel-list[hidden] { display: none; }

/* Sélecteurs dans les formulaires */
.dropsel { min-width: 0; }
.dropsel-btn.invalid { border-color: #d9534f; }
.dropsel-btn.is-placeholder span { color: #8aa3a8; font-weight: 400; }
.contact-form .dropsel, .form-grid .dropsel { width: 100%; }
.contact-form .dropsel-btn { width: 100%; padding: 12px 14px; border-radius: 12px; font-weight: 400; font-size: .85rem; border-color: var(--line); color: var(--ink); }
.contact-form .dropsel-btn:hover, .contact-form .dropsel.open .dropsel-btn { border-color: var(--teal); }
.contact-form .dropsel-list { left: 0; right: 0; width: auto; }
.contact-form .dropsel-list li { font-weight: 600; }