/* MENU DES RAYONS « L'ÉTAL » (21/09/2026), planche A retenue par le gérant.
   Chargée APRÈS bio-widget-menu-rayons.css et limitée à .bio-menu-b : le menu d'origine n'est pas touché, et
   l'interrupteur (bio_menu_rayons_v2) suffit à revenir en arrière.
   Les jetons sont ceux de la charte (bio-panier-b.css) : crème, sable, anis, brun, arrondis de 26 et 22 px.
   Les « !important » ne répondent qu'aux règles de la feuille d'origine, qui en pose beaucoup. */

.bio-menu-b {
    --m-brun: var(--bio-brown, #422E2D);
    --m-anis: var(--bio-green, #A8C400);
    --m-creme: var(--bio-cream, #F9F7F2);
    --m-teinte: rgba(var(--bio-green-rgb, 168, 196, 0), .14);
    --m-gris: #6f6660;
    --m-bord: var(--bio-border-warm, #e8e3dc);
    --m-ombre: 0 18px 44px rgba(66, 46, 45, .16), 0 1px 0 rgba(66, 46, 45, .05);
}

/* ================= ORDINATEUR ================= */
@media (min-width: 901px) {

    /* 1. Le panneau ne fait plus 500 px de haut quoi qu'il contienne : il suit son contenu.
          C'était la cause du grand vide blanc sous les rayons qui n'ont que trois sous-rayons,
          et de l'ascenseur dans la première colonne (quatorze rayons dans 500 px). */
    .bio-menu-b .bio-desktop-dropdown { height: auto !important; }
    .bio-menu-b .bio-3cols-container {
        height: auto !important;
        align-items: stretch;
        background: #fff;
        border: 1px solid var(--m-bord);
        border-top: 3px solid var(--m-anis);
        border-radius: 22px;
        box-shadow: var(--m-ombre);
        overflow: hidden;
    }
    .bio-menu-b .bio-col {
        /* Quatorze rayons à 44 px tiennent dans 620 px : plus d'ascenseur dans la première colonne. */
        max-height: min(78vh, 760px);
        overflow-y: auto;
        border-right: 1px solid var(--m-bord);
        padding: 8px 0;
    }
    .bio-menu-b .bio-col-1 { background: var(--m-creme); }

    /* 2. Les lignes : le dessin, le nom, le nombre de produits. */
    .bio-menu-b .bio-col-link {
        display: flex !important;
        align-items: center;
        gap: 11px;
        padding: 5px 14px !important;
        color: var(--m-brun) !important;
        text-decoration: none !important;
        line-height: 1.25;
    }
    .bio-menu-b .bio-col-label {
        display: flex;
        align-items: center;
        gap: 11px;
        min-width: 0;
        flex: 1;
    }
    .bio-menu-b .bio-col-label > span,
    .bio-menu-b .bio-col-link > span { font-size: 14px; font-weight: 700; }
    .bio-menu-b img.bio-d-thumb {
        width: 32px !important;
        height: 32px !important;
        flex: 0 0 32px;
        border-radius: 12px !important;
        background: #fff;
        box-shadow: 0 2px 8px rgba(66, 46, 45, .06);
        padding: 4px;
        object-fit: contain;
        margin: 0 !important;
    }
    .bio-menu-b .bio-b-n {
        margin-left: auto;
        font-size: 11px;
        font-weight: 600;
        color: var(--m-gris);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
    .bio-menu-b .bio-col1-item.active .bio-col-link,
    .bio-menu-b .bio-col2-item.active .bio-col-link { background: #fff; }
    .bio-menu-b .bio-col-1 .bio-col1-item.active .bio-col-link { box-shadow: inset 3px 0 0 var(--m-anis); }
    .bio-menu-b .bio-col-item:hover > .bio-col-link { background: var(--m-teinte); }

    /* 3. L'en-tête de chaque colonne : le rayon, et « Tout voir » en pilule. */
    .bio-menu-b .bio-panel-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 14px 12px !important;
        margin-bottom: 4px;
        border-bottom: 1px dashed var(--m-bord);
    }
    .bio-menu-b .bio-panel-header-title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 15.5px;
        font-weight: 700;
        color: var(--m-brun);
        min-width: 0;
    }
    .bio-menu-b a.bio-tout-voir {
        margin-left: auto;
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        background: #fff !important;
        border: 1px solid var(--m-bord) !important;
        border-radius: 999px !important;
        padding: 6px 13px !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        color: var(--m-brun) !important;
        box-shadow: 0 2px 8px rgba(66, 46, 45, .06);
        white-space: nowrap;
    }
    .bio-menu-b a.bio-tout-voir:hover { background: var(--m-teinte) !important; }

    /* 4. Les pilules de rayons sous la barre. */
    .bio-menu-b img.bio-rayon-icon {
        width: 22px !important;
        height: 22px !important;
        border-radius: 0 !important;
        object-fit: contain;
    }
}

/* ================= TÉLÉPHONE ================= */
@media (max-width: 900px) {

    /* 5. Le rond avec l'initiale disparaît : chaque rayon a son dessin.
          « Epicerie Salée » et « Epicerie Sucrée » ne portent plus le même « E ». */
    .bio-menu-b .bio-panel-root .bio-item::before { display: none !important; content: none !important; }
    .bio-menu-b .bio-panel-root .bio-item {
        padding: 0 !important;
        min-height: 0 !important;
        background: transparent !important;
    }
    .bio-menu-b .bio-link-wrapper { padding: 8px 14px !important; min-height: 0 !important; }
    .bio-menu-b .bio-panel-root .bio-list-reset > .bio-item { border-bottom: 1px solid var(--m-bord); }
    .bio-menu-b .bio-panel-root .bio-list-reset > .bio-item:last-child { border-bottom: 0; }
    .bio-menu-b .bio-left-content {
        display: flex !important;
        align-items: center;
        gap: 12px;
        min-width: 0;
        /* 54 px étaient réservés au rond de l'initiale, qui n'existe plus : le dessin revient à gauche. */
        padding-left: 0 !important;
    }
    .bio-menu-b img.bio-b-ic {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px;
        border-radius: 13px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(66, 46, 45, .06);
        padding: 5px;
        object-fit: contain;
        margin: 0 !important;
    }
    .bio-menu-b .bio-text {
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        color: var(--m-brun) !important;
    }
    .bio-menu-b .bio-b-n {
        margin-left: auto;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--m-gris);
        font-variant-numeric: tabular-nums;
    }
    /* La flèche reprend sa place après le nombre. */
    .bio-menu-b .bio-arrow { fill: var(--m-gris) !important; flex: 0 0 18px; }

    /* 5 bis. Le bandeau des sélections se coupe net à droite : un fondu dit qu'il continue. */
    .bio-menu-b .bio-collections-mobile-pills { position: relative; }
    .bio-menu-b .bio-collections-mobile::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 42px;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 78%);
    }
    .bio-menu-b .bio-collections-mobile { position: relative; }
}

/* 6. Le mouvement ne dit rien d'utile ici : on le coupe pour qui le demande. */
@media (prefers-reduced-motion: reduce) {
    .bio-menu-b .bio-3cols-container,
    .bio-menu-b .bio-desktop-dropdown { transition: none !important; }
}