/* ================================================================
   VoluMind 3D Filtres — filters.css v3.0.0
   Changements v3.0.0 :
   - Suppression complète bouton ATC + toast + is-added/is-loading
   - FIX #5 : Compteur résultats dans la barre de tri
   - FIX #7 : Animations fade-in séquentielles
   - FIX #8 : Empty state avec boutons de retrait par filtre
   ================================================================ */

/* ── Variables & panneau ─────────────────────────────────── */
.y3df-panel {
    --y3df-accent:        #0F766E;
    --y3df-bg:            #FFFFFF;
    --y3df-text:          rgba(30,41,59,0.75);
    --y3df-text-dim:      rgba(100,116,139,0.6);
    --y3df-border:        rgba(15,118,110,0.2);
    --y3df-hover:         rgba(15,118,110,0.08);
    --y3df-cb-active:     #0F766E;
    --y3df-cb-border:     rgba(100,116,139,0.5);
    --y3df-lbl-active:    #0F766E;
    --y3df-slider-accent: #0F766E;
    font-family: 'Inter','Poppins',sans-serif;
    background-color: var(--y3df-bg);
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 20px;
    position: sticky;
    top: 24px;
    box-sizing: border-box;
    box-shadow: 0 4px 14px rgba(14,59,59,0.06);
}

/* ── Titre + badge ───────────────────────────────────────── */
.y3df-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--y3df-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 14px;
    line-height: 1;
}
.y3df-count {
    margin-left: auto;
    background-color: var(--y3df-accent);
    color: #1E293B;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    line-height: 1.5;
    white-space: nowrap;
    transition: background-color 0.3s, transform 0.2s;
}

/* ── Tags actifs ─────────────────────────────────────────── */
.y3df-active-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.y3df-active-tags:not(:empty) { margin-bottom: 12px; }
.y3df-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: rgba(15,118,110,0.12);
    border: 1px solid rgba(15,118,110,0.35);
    color: var(--y3df-accent);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-family: 'Inter','Poppins',sans-serif;
}
.y3df-tag:hover { background-color: rgba(15,118,110,0.25); }
.y3df-tag__x { font-size: 15px; line-height: 1; opacity: 0.65; }

/* ── Tri ─────────────────────────────────────────────────── */
.y3df-sort-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--y3df-border);
}
.y3df-sort-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(30,41,59,0.55);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.y3df-sort-select {
    width: 100%;
    background: rgba(244,246,245,1);
    border: 1px solid rgba(226,232,240,0.9);
    border-radius: 7px;
    color: #1E293B;
    font-size: 13px;
    font-family: 'Inter','Poppins',sans-serif;
    padding: 8px 30px 8px 12px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='rgba(30,41,59,0.45)' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.y3df-sort-select:focus { border-color: var(--y3df-accent); }
.y3df-sort-select option { background: #FFFFFF; color: #1E293B; }

/* ── Recherche live ──────────────────────────────────────── */
.y3df-live-search-wrap {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--y3df-border);
}
.y3df-live-search {
    width: 100%;
    box-sizing: border-box;
    background: rgba(244,246,245,1);
    border: 1px solid rgba(226,232,240,0.9);
    border-radius: 8px;
    color: #1E293B;
    font-size: 13px;
    font-family: 'Inter','Poppins',sans-serif;
    padding: 10px 14px 10px 36px;
    outline: none;
    transition: border-color 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='rgba(30,41,59,0.40)' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
}
.y3df-live-search::placeholder { color: var(--y3df-text-dim); }
.y3df-live-search:focus { border-color: var(--y3df-accent); }

/* ── Accordéon groupes ───────────────────────────────────── */
.y3df-group { border-bottom: 1px solid var(--y3df-border); }
.y3df-group:last-of-type { border-bottom: none; }

.y3df-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.y3df-group__header span {
    color: #1E293B;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: color 0.2s;
}
.y3df-group__header:hover span { color: var(--y3df-accent); }

.y3df-arrow {
    color: rgba(30,41,59,0.45);
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), color 0.2s;
}
.y3df-group.is-open .y3df-arrow { transform: rotate(180deg); color: var(--y3df-accent); }

.y3df-group__body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1), opacity 0.28s ease;
}
.y3df-group.is-open .y3df-group__body { max-height: 600px; opacity: 1; }

/* ── Recherche dans listes ───────────────────────────────── */
.y3df-search {
    width: 100%;
    box-sizing: border-box;
    background: rgba(244,246,245,1);
    border: 1px solid rgba(226,232,240,0.8);
    border-radius: 7px;
    color: #1E293B;
    font-size: 12px;
    font-family: 'Inter','Poppins',sans-serif;
    padding: 8px 12px;
    margin-bottom: 8px;
    outline: none;
    transition: border-color 0.2s;
}
.y3df-search::placeholder { color: var(--y3df-text-dim); }
.y3df-search:focus { border-color: var(--y3df-accent); }

/* ── Scroll ──────────────────────────────────────────────── */
.y3df-scroll {
    max-height: 230px;
    overflow-y: auto;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--y3df-accent) rgba(244,246,245,1);
}
.y3df-scroll::-webkit-scrollbar { width: 3px; }
.y3df-scroll::-webkit-scrollbar-track { background: rgba(244,246,245,1); border-radius: 3px; }
.y3df-scroll::-webkit-scrollbar-thumb { background: var(--y3df-accent); border-radius: 3px; }

/* ── Items checkbox ──────────────────────────────────────── */
.y3df-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 0.18s, opacity 0.25s;
    margin-bottom: 1px;
}
.y3df-item:hover:not(.is-disabled) { background-color: var(--y3df-hover); }

/* Verrouillage strict — aucun clic possible */
.y3df-item.is-disabled {
    opacity: 0.28;
    cursor: not-allowed;
    pointer-events: none;
}
.y3df-item.is-disabled .y3df-cb { pointer-events: none; }

.y3df-cb {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.y3df-checkmark {
    width: 16px;
    height: 16px;
    border: 2px solid var(--y3df-cb-border);
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
    transition: background-color 0.2s, border-color 0.2s;
    background: transparent;
    box-sizing: border-box;
}
.y3df-cb:checked ~ .y3df-checkmark {
    background-color: var(--y3df-cb-active);
    border-color: var(--y3df-cb-active);
}
.y3df-cb:checked ~ .y3df-checkmark::after {
    content: '';
    position: absolute;
    left: 3px; top: 0;
    width: 5px; height: 9px;
    border: 2px solid #1E293B;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}
.y3df-item__label {
    color: var(--y3df-text);
    font-size: 13px;
    flex: 1;
    transition: color 0.2s;
    line-height: 1.35;
}
.y3df-item:has(.y3df-cb:checked) .y3df-item__label { color: var(--y3df-lbl-active); font-weight: 600; }
.y3df-item__count {
    color: var(--y3df-text-dim);
    font-size: 11px;
    min-width: 16px;
    text-align: right;
    transition: color 0.25s;
}

/* ── Items catégories : parent en gras, enfants indentés ── */
.y3df-item--parent { font-weight: 600; }
.y3df-item--child { padding-left: 22px !important; position: relative; }
.y3df-item--child::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 1px;
    background: rgba(226,232,240,1);
}

/* ══════════════════════════════════════════════════════════
   RANGE SLIDER DOUBLE POIGNÉE
   Architecture : deux <input[range]> superposés
   sur une track commune avec .y3df-range-fill
══════════════════════════════════════════════════════════ */
.y3df-range-wrap { padding: 4px 0 14px; }

.y3df-range-display {
    color: var(--y3df-text-dim);
    font-size: 12px;
    margin-bottom: 14px;
    font-family: 'Inter','Poppins',sans-serif;
}
.y3df-range-min-val,
.y3df-range-max-val { color: var(--y3df-accent); font-weight: 700; }

/* Track relative pour superposer les deux inputs */
.y3df-range-track {
    position: relative;
    height: 4px;
    background: rgba(226,232,240,0.9);
    border-radius: 4px;
    margin: 16px 0 6px;
}

/* Zone colorée entre les deux poignées */
.y3df-range-fill {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--y3df-slider-accent);
    border-radius: 4px;
    pointer-events: none;
    transition: left 0.05s, width 0.05s;
}

/* Les deux inputs superposés sur la track */
.y3df-range-input {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    height: 4px;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    pointer-events: none;
    margin: 0;
}

/* On active les events uniquement sur le thumb */
.y3df-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: all;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--y3df-slider-accent);
    border: 3px solid #1E293B;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15,118,110,0.45);
    transition: transform 0.15s;
    position: relative;
    z-index: 2;
}
.y3df-range-input::-webkit-slider-thumb:hover { transform: scale(1.15); }

.y3df-range-input::-moz-range-thumb {
    pointer-events: all;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--y3df-slider-accent);
    border: 3px solid #1E293B;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15,118,110,0.45);
}

/* S'assurer que le thumb --max est au-dessus de --min */
.y3df-range-input--max { z-index: 2; }
.y3df-range-input--min { z-index: 1; }

/* ── Toggle Stock ────────────────────────────────────────── */
.y3df-stock-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 0 10px;
    cursor: pointer;
    border-top: 1px solid var(--y3df-border);
    margin-top: 4px;
}
.y3df-toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.y3df-stock-cb { position: absolute; opacity: 0; width: 0; height: 0; }
.y3df-toggle__track {
    position: absolute; inset: 0;
    background: rgba(226,232,240,0.9);
    border-radius: 22px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.y3df-toggle__track::before {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #1E293B;
    top: 3px; left: 3px;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
.y3df-stock-cb:checked + .y3df-toggle__track { background-color: var(--y3df-accent); }
.y3df-stock-cb:checked + .y3df-toggle__track::before { transform: translateX(18px); }

/* ── Bouton Reset ────────────────────────────────────────── */
.y3df-reset {
    width: 100%;
    padding: 11px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter','Poppins',sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    letter-spacing: 0.4px;
    border: 1px solid #0F766E;
    background-color: transparent;
    color: #0F766E;
    margin-top: 16px;
    transition: background-color 0.22s, color 0.22s, box-shadow 0.22s;
}
.y3df-reset:hover { background-color: #1E293B; color: #0F766E; box-shadow: 0 0 14px rgba(100,116,139,0.6); }

/* ══════════════════════════════════════════════════════════
   SORTING BAR — barre de tri au-dessus de la grille
   Discrète, alignée à droite, fond semi-transparent
══════════════════════════════════════════════════════════ */
.y3df-grid-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 16px;
    font-family: 'Inter','Poppins',sans-serif;
}
.y3df-grid-tools__label {
    color: rgba(30,41,59,0.50);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.y3df-grid-tools .y3df-sort-select {
    background: rgba(244,246,245,1);
    border: 1px solid rgba(226,232,240,0.8);
    border-radius: 8px;
    color: #1E293B;
    font-size: 13px;
    font-family: 'Inter','Poppins',sans-serif;
    padding: 7px 30px 7px 12px;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' fill='none' stroke='rgba(30,41,59,0.40)' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    transition: border-color 0.2s, background-color 0.2s;
    min-width: 160px;
}
.y3df-grid-tools .y3df-sort-select:focus,
.y3df-grid-tools .y3df-sort-select:hover {
    border-color: rgba(15,118,110,0.5);
    background-color: rgba(226,232,240,0.7);
}
.y3df-grid-tools .y3df-sort-select option { background: #FFFFFF; color: #1E293B; }

@media (max-width: 480px) {
    .y3df-grid-tools {
        justify-content: stretch;
    }
    .y3df-grid-tools .y3df-sort-select {
        flex: 1;
        min-width: 0;
    }
}

/* ══════════════════════════════════════════════════════════
   GRILLE PRODUITS
══════════════════════════════════════════════════════════ */
.y3df-grid-wrap {
    position: relative;
    min-height: 200px;
}

/* Loading overlay léger — uniquement fond pendant skeleton */
.y3df-grid-wrap.y3df-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(14,59,59,0.35);
    z-index: 5;
    border-radius: 12px;
    pointer-events: none;
}
/* PLUS de ::before spinner — remplacé par skeleton */

.y3df-grid {
    gap: 20px;
    width: 100%;
}
.y3df-grid__heading { font-family: 'Inter','Poppins',sans-serif; margin: 0 0 24px; }
.y3df-grid__heading.pos-center { text-align: center; }
.y3df-grid__heading.pos-right  { text-align: right;  }
.y3df-grid__heading.pos-left   { text-align: left;   }

/* ── Carte produit ───────────────────────────────────────── */
.y3df-card {
    height: 100%;
    background: transparent;
    border: 1px solid rgba(15,118,110,0.2);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    will-change: opacity, transform;
}
.y3df-card:hover {
    border-color: #0F766E;
    box-shadow: 0 0 20px rgba(15,118,110,0.25);
    transform: translateY(-2px);
}
.y3df-card__img-wrap {
    display: block;
    background: rgba(244,246,245,1);
    border-bottom: 1px solid rgba(15,118,110,0.1);
    aspect-ratio: 1;
    overflow: hidden;
}
.y3df-card__img-wrap img {
    width: 100%; height: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
}
.y3df-card:hover .y3df-card__img-wrap img { transform: scale(1.05); }

.y3df-card__body { padding: 14px; display: flex !important; flex-direction: column !important; gap: 8px; flex: 1 !important; height: 100% !important; min-height: 0; }
.y3df-card__stock { font-size: 11px; font-weight: 700; font-family: 'Inter','Poppins',sans-serif; letter-spacing: 0.5px; text-transform: uppercase; }
.y3df-card__stock.in  { color: #0F766E; }
.y3df-card__stock.out { color: rgba(30,41,59,0.40); }

/* .y3df-card__btn générique — réinitialisé, styles réels dans le bloc boutons ci-dessous */
.y3df-card__btn {
    box-sizing: border-box;
    text-decoration: none !important;
    cursor: pointer;
    font-family: 'Inter','Poppins',sans-serif;
    transition: all 0.3s ease;
    border-style: solid;
}

.y3df-card__price { font-family: 'Inter','Poppins',sans-serif; }
.y3df-card__price .price { color: #1E293B; font-size: 15px; font-weight: 700; }
.y3df-card__price .price del { color: rgba(30,41,59,0.50); font-size: 12px; font-weight: 400; margin-right: 6px; }
.y3df-card__price .price ins { text-decoration: none; color: #1E293B; }

.y3df-card__title { margin: 0; font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.y3df-card__title a { color: #0F766E; text-decoration: none; font-family: 'Inter','Poppins',sans-serif; font-weight: 600; }
.y3df-card__title a:hover { color: #1E293B; }

.y3df-card__attrs { display: table; width: 100%; border-spacing: 0 3px; font-family: 'Inter','Poppins',sans-serif; }
.y3df-card__attr  { display: table-row; }
.y3df-card__attr-key { display: table-cell; color: rgba(30,41,59,0.45); font-size: 11px; padding-right: 8px; white-space: nowrap; vertical-align: top; }
.y3df-card__attr-val { display: table-cell; color: rgba(30,41,59,0.85); font-size: 11px; font-weight: 600; vertical-align: top; }

.y3df-card__desc { font-size: 11px; color: rgba(30,41,59,0.50); font-family: 'Inter','Poppins',sans-serif; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }

.y3df-grid__empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: rgba(30,41,59,0.45); font-family: 'Inter','Poppins',sans-serif; }
.y3df-grid__empty p    { margin: 0 0 8px; font-size: 15px; }
.y3df-grid__empty small { font-size: 12px; opacity: 0.6; }

/* ══════════════════════════════════════════════════════════
   SKELETON LOADING
   Blocs animés qui imitent la structure d'une carte
   → remplace le spinner central
══════════════════════════════════════════════════════════ */
@keyframes y3df-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

.y3df-skeleton {
    border: 1px solid rgba(15,118,110,0.1);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: rgba(14,59,59,0.6);
}

.y3df-skeleton__img {
    aspect-ratio: 1;
    background: linear-gradient(90deg,
        rgba(244,246,245,1) 25%,
        rgba(226,232,240,0.7) 50%,
        rgba(244,246,245,1) 75%);
    background-size: 800px 100%;
    animation: y3df-shimmer 1.4s ease-in-out infinite;
}

.y3df-skeleton__body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.y3df-skeleton__line {
    height: 11px;
    border-radius: 6px;
    background: linear-gradient(90deg,
        rgba(244,246,245,1) 25%,
        rgba(226,232,240,0.8) 50%,
        rgba(244,246,245,1) 75%);
    background-size: 800px 100%;
    animation: y3df-shimmer 1.4s ease-in-out infinite;
    width: 90%;
}
.y3df-skeleton__line--title { height: 14px; width: 75%; animation-delay: 0.1s; }
.y3df-skeleton__line--price { height: 16px; width: 45%; animation-delay: 0.15s; }
.y3df-skeleton__line--short { width: 60%; animation-delay: 0.2s; }

.y3df-skeleton__btn {
    height: 36px;
    border-radius: 30px;
    background: linear-gradient(90deg,
        rgba(15,118,110,0.08) 25%,
        rgba(15,118,110,0.15) 50%,
        rgba(15,118,110,0.08) 75%);
    background-size: 800px 100%;
    animation: y3df-shimmer 1.4s ease-in-out infinite;
    animation-delay: 0.25s;
    margin-top: auto;
}

/* ── Pagination ──────────────────────────────────────────── */
.y3df-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 28px;
    font-family: 'Inter','Poppins',sans-serif;
}
.y3df-page-btn {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(15,118,110,0.25);
    background: transparent;
    color: rgba(30,41,59,0.70);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter','Poppins',sans-serif;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.y3df-page-btn:hover { background: rgba(15,118,110,0.12); border-color: #0F766E; color: #0F766E; }
.y3df-page-btn.active { background: #0F766E; border-color: #0F766E; color: #1E293B; pointer-events: none; }
.y3df-page-prev,
.y3df-page-next { padding: 0 14px; font-size: 12px; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE COMPLET
══════════════════════════════════════════════════════════ */

/* ── Tablette paysage : 3 colonnes ──────────────────────── */
@media (max-width: 1024px) {
    .y3df-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE / TABLETTE PORTRAIT ≤ 768px
   Le panneau filtre devient un DRAWER LEFT plein écran
   Apparaît depuis la gauche au tap sur le bouton flottant
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Grille : pleine largeur ────────────────────────── */
    .y3df-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* ── Panneau : drawer left plein écran ──────────────── */
    .y3df-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        right: auto !important;
        width: 88vw !important;
        max-width: 360px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        border-radius: 0 16px 16px 0 !important;
        z-index: 99999 !important;
        padding: 0 0 32px !important;
        box-shadow: 6px 0 32px rgba(14,59,59,0.15) !important;
        /* Fermé par défaut — hors écran à gauche */
        transform: translateX(-110%) !important;
        transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1) !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(15,118,110,0.4) transparent;
        display: flex !important;
        flex-direction: column !important;
    }
    .y3df-panel::-webkit-scrollbar { width: 3px; }
    .y3df-panel::-webkit-scrollbar-thumb { background: rgba(15,118,110,0.4); border-radius: 3px; }

    /* Supprimer la poignée bottom — inutile en drawer left */
    .y3df-panel::before { display: none !important; }

    /* État ouvert — slide in */
    .y3df-panel.is-drawer-open {
        transform: translateX(0) !important;
    }

    /* ── Overlay sombre derrière le drawer ──────────────── */
    .y3df-drawer-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(14,59,59,0.15);
        z-index: 99998;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        animation: y3df-fade-in 0.25s ease;
    }
    .y3df-drawer-overlay.is-visible { display: block; }
    @keyframes y3df-fade-in { from { opacity: 0; } to { opacity: 1; } }

    /* ── Bouton déclencheur — fixe bas droite ───────────── */
    .y3df-mobile-trigger {
        display: flex !important;
        align-items: center;
        gap: 7px;
        position: fixed;
        bottom: 24px;
        right: 16px;
        left: auto !important;
        z-index: 9997;
        background: #0F766E;
        color: #1E293B;
        border: none;
        border-radius: 28px;
        padding: 12px 20px;
        font-size: 13px;
        font-weight: 700;
        font-family: 'Inter','Poppins',sans-serif;
        cursor: pointer;
        box-shadow: 0 4px 20px rgba(15,118,110,0.5);
        transition: all 0.2s ease;
        white-space: nowrap;
        writing-mode: horizontal-tb;
        letter-spacing: 0.5px;
    }
    .y3df-mobile-trigger:hover {
        background: #0E3B3B;
        box-shadow: 0 6px 24px rgba(15,118,110,0.65);
        transform: translateY(-1px);
    }
    .y3df-mobile-trigger:active { transform: scale(0.96); }

    /* Badge filtres actifs */
    .y3df-mobile-trigger__badge {
        background: #1E293B;
        color: #0F766E;
        font-size: 11px;
        font-weight: 800;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        line-height: 20px;
        text-align: center;
        writing-mode: horizontal-tb;
        display: none;
        flex-shrink: 0;
    }
    .y3df-mobile-trigger__badge.has-filters { display: block; }

    /* Cacher le bouton quand drawer ouvert */
    .y3df-mobile-trigger.is-hidden { display: none !important; }

    /* ── Bouton fermeture en haut du drawer ─────────────── */
    .y3df-drawer-close {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: #F4F6F5;
        border: none;
        border-bottom: 1px solid rgba(15,118,110,0.2);
        color: #1E293B;
        font-size: 13px;
        font-family: 'Inter','Poppins',sans-serif;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
        padding: 18px 20px;
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 2;
    }
    .y3df-drawer-close svg { color: rgba(30,41,59,0.55); transition: color 0.2s; }
    .y3df-drawer-close:hover svg { color: #0F766E; }

    /* Contenu du panel scrollable sous le header */
    .y3df-panel .y3df-title,
    .y3df-panel .y3df-active-tags,
    .y3df-panel .y3df-sort-wrap,
    .y3df-panel .y3df-live-search-wrap,
    .y3df-panel .y3df-group,
    .y3df-panel .y3df-stock-row,
    .y3df-panel .y3df-reset {
        padding-left: 20px;
        padding-right: 20px;
    }
    .y3df-panel .y3df-title { margin-top: 16px; }

    /* ── Range slider : plus grand thumb sur touch ──────── */
    .y3df-range-input::-webkit-slider-thumb {
        width: 26px !important;
        height: 26px !important;
    }
    .y3df-range-input::-moz-range-thumb {
        width: 26px !important;
        height: 26px !important;
    }
    .y3df-range-track { height: 6px !important; }

    /* ── Pagination : plus compact ──────────────────────── */
    .y3df-pagination { gap: 4px; }
    .y3df-page-btn { min-width: 34px; height: 34px; font-size: 12px; padding: 0 8px; }
    .y3df-page-num:not(.active):not(.y3df-page-prev):not(.y3df-page-next) { display: none; }
    .y3df-page-num.active,
    .y3df-page-num:first-of-type,
    .y3df-page-num:last-of-type { display: inline-flex; align-items: center; justify-content: center; }

    /* ── Tags actifs ────────────────────────────────────── */
    .y3df-active-tags { gap: 4px; }
    .y3df-tag { font-size: 10px; padding: 3px 8px; }

    /* ── Skeleton ───────────────────────────────────────── */
    .y3df-skeleton { min-height: 220px; }
}

/* ── Petit mobile ≤ 480px ───────────────────────────────── */
@media (max-width: 480px) {
    .y3df-grid { grid-template-columns: 1fr !important; }

    .y3df-panel {
        width: 92vw !important;
        max-width: 100vw !important;
    }

    .y3df-mobile-trigger {
        bottom: 16px;
        right: 12px;
        font-size: 12px;
        padding: 10px 16px;
    }

    .y3df-skeleton { min-height: 280px; }
    .y3df-page-btn { min-width: 30px; height: 30px; padding: 0 6px; font-size: 11px; }
}

/* ── Desktop : cacher les éléments mobile ───────────────── */
@media (min-width: 769px) {
    .y3df-mobile-trigger { display: none !important; }
    .y3df-drawer-close   { display: none !important; }
    .y3df-drawer-overlay { display: none !important; }
}

/* ══════════════════════════════════════════════
   CASCADE — Spinner + état de chargement
   v2.7.1
══════════════════════════════════════════════ */

/* Groupe en cours de recalcul */
.y3df-group.y3df-cascade-loading .y3df-group__header::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(15,118,110,0.3);
    border-top-color: #0F766E;
    border-radius: 50%;
    animation: y3df-spin 0.6s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

.y3df-group.y3df-cascade-loading .y3df-scroll {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

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

/* Message vide cascade */
.y3df-cascade-empty {
    color: rgba(30,41,59,0.40);
    font-size: 12px;
    padding: 6px 0;
    margin: 0;
    font-style: italic;
}

/* Catégories enfants : indentation visuelle */
.y3df-item--parent {
    font-weight: 600;
}
.y3df-item--child {
    padding-left: 20px !important;
}
.y3df-item--child .y3df-item__label::before {
    content: '›';
    margin-right: 5px;
    color: rgba(15,118,110,0.5);
}

/* ══════════════════════════════════════════════
   ENTONNOIR STRICT — masquage termes à 0
   v2.7.1
══════════════════════════════════════════════ */
.y3df-item.y3df-hidden {
    display: none !important;
}

/* ══════════════════════════════════════════════
   BADGE PROMO carte grille
   v2.7.1
══════════════════════════════════════════════ */
.y3df-card__img-wrap {
    position: relative;
    display: block;
    overflow: hidden;
}

.y3df-card__promo-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #0F766E;
    color: #1E293B;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Inter','Poppins',sans-serif;
    padding: 3px 8px;
    border-radius: 4px;
    line-height: 1.4;
    pointer-events: none;
    z-index: 2;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(15,118,110,0.45);
}

/* Compatibilité : ins/del prix WooCommerce */
.y3df-card__price ins {
    text-decoration: none !important;
    font-style: normal;
}
.y3df-card__price del {
    opacity: 0.55;
}

/* ══════════════════════════════════════════════════════════
   BOUTONS CARTE — v3.0.0
   Structure : .y3df-card__btns > .y3df-card__btn--view/quote
══════════════════════════════════════════════════════════ */

/* ── Wrapper boutons — bas de carte garanti ─────── */
.y3df-card .y3df-card__btns {
    margin-top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px; /* valeur par défaut, surchargée par Elementor */
    flex-shrink: 0;
}

/* ── Tous les boutons dans le wrapper ─────────────── */
.y3df-card .y3df-card__btns > .y3df-card__btn,
.y3df-card .y3df-card__btns > a.y3df-card__btn,
.y3df-card .y3df-card__btns > button.y3df-card__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px !important;
    text-align: center !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-family: 'Inter','Poppins',sans-serif !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border-style: solid !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* ── "Voir le produit" — orange plein par défaut ─── */
.y3df-card .y3df-card__btn--view {
    background-color: #0F766E !important;
    color: #1E293B !important;
    border-color: #0F766E !important;
    border-width: 0 !important;
    border-radius: 30px !important;
    box-shadow: none;
}
.y3df-card .y3df-card__btn--view:hover {
    background-color: #1E293B !important;
    color: #0F766E !important;
}

/* ── "Demander un devis" — discret ────────────────── */
.y3df-card .y3df-card__btn--quote {
    background-color: transparent !important;
    color: rgba(30,41,59,0.70) !important;
    border-color: rgba(100,116,139,0.5) !important;
    border-width: 1px !important;
    border-radius: 30px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-shadow: none;
}
.y3df-card .y3df-card__btn--quote:hover {
    background-color: rgba(244,246,245,1) !important;
    color: #1E293B !important;
    border-color: rgba(30,41,59,0.55) !important;
}

/* ══════════════════════════════════════════════
   FIX #5 — COMPTEUR RÉSULTATS BARRE DE TRI
   v2.9.0
══════════════════════════════════════════════ */
.y3df-grid-tools__count {
    color: rgba(30,41,59,0.55);
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter','Poppins',sans-serif;
    white-space: nowrap;
    letter-spacing: 0.2px;
    margin-right: auto;
    transition: color 0.25s;
}
.y3df-grid-tools__count:not(:empty) {
    padding-right: 8px;
}

/* ══════════════════════════════════════════════
   FIX #7 — ANIMATIONS FADE-IN SÉQUENTIELLES
   Appliquées au rendu initial PHP.
   Le JS animateCards() gère les rechargements AJAX.
   v2.9.0
══════════════════════════════════════════════ */
.y3df-card {
    animation: y3df-card-fadein 0.35s ease both;
}
.y3df-card:nth-child(1)  { animation-delay: 0.04s; }
.y3df-card:nth-child(2)  { animation-delay: 0.09s; }
.y3df-card:nth-child(3)  { animation-delay: 0.14s; }
.y3df-card:nth-child(4)  { animation-delay: 0.19s; }
.y3df-card:nth-child(5)  { animation-delay: 0.24s; }
.y3df-card:nth-child(6)  { animation-delay: 0.29s; }
.y3df-card:nth-child(7)  { animation-delay: 0.34s; }
.y3df-card:nth-child(8)  { animation-delay: 0.39s; }
.y3df-card:nth-child(n+9) { animation-delay: 0.44s; }

@keyframes y3df-card-fadein {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Désactiver l'animation CSS quand le JS prend le relais (après AJAX) */
.y3df-grid-wrap.y3df-js-animated .y3df-card {
    animation: none;
}

/* ══════════════════════════════════════════════
   FIX #8 — EMPTY STATE AMÉLIORÉ
   Boutons de retrait de filtres individuels
   + bouton "Tout réinitialiser"
   v2.9.0
══════════════════════════════════════════════ */
.y3df-empty-enhanced {
    padding: 50px 20px !important;
}

.y3df-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.y3df-empty-remove-filter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(15,118,110,0.1);
    border: 1px solid rgba(15,118,110,0.3);
    color: #0F766E;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter','Poppins',sans-serif;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    white-space: nowrap;
}
.y3df-empty-remove-filter:hover {
    background: rgba(15,118,110,0.2);
    border-color: #0F766E;
    color: #1E293B;
}

.y3df-empty-reset-all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid rgba(226,232,240,1);
    color: rgba(30,41,59,0.60);
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter','Poppins',sans-serif;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    white-space: nowrap;
}
.y3df-empty-reset-all:hover {
    background: rgba(244,246,245,1);
    border-color: rgba(30,41,59,0.45);
    color: #1E293B;
}

/* Mobile : stack les boutons empty state */
@media (max-width: 480px) {
    .y3df-empty-actions {
        flex-direction: column;
        align-items: center;
    }
    .y3df-grid-tools__count {
        display: none;
    }
}

/* ================================================================
   CASCADE À 3 ÉTAPES (VoluMind)
   Étape 1 : parentes seules
   Étape 2 : clic parente -> ses sous-catégories
   Étape 3 : clic sous-catégorie -> ses attributs
   ================================================================ */
.y3df-cascade-hidden {
    display: none !important;
}
/* transition douce quand un élément se révèle */
.y3df-item--child,
.y3df-group[data-owner-cat] {
    transition: opacity .2s ease;
}