/* ------------------------------------------------------------------
   Panier du groupe — pastille latérale, bord droit.

   Première version (14-08-2026, matin) : une barre noire collée en bas
   d'écran. Rejetée par Otman le soir même — elle recouvrait le bas de la
   page et pesait beaucoup pour une information de rappel.

   Version actuelle : une pastille discrète au bord droit, comme celle de
   WhatsApp, avec le NOMBRE de voyageurs en pastille de notification. On
   la déplie pour voir la liste, retirer quelqu'un ou en ajouter.

   Toujours un <details> natif : aucun JavaScript, clavier compris.
   ------------------------------------------------------------------ */
.panier {
    position: fixed;
    right: 0;
    /* Juste AU-DESSUS de la pastille WhatsApp (`.pf-wa`, top:50%, h≈54px).
       Les deux vivent sur le même bord : sans ce décalage elles se
       recouvrent. Si la hauteur de `.pf-wa` change, ajuster ici. */
    top: 50%;
    transform: translateY(calc(-50% - 66px));
    z-index: 45;
}

/* ---- La pastille repliée ---- */
.panier__pastille {
    position: relative;
    display: flex;
    max-width: 54px;
    align-items: center;
    gap: 10px;
    padding: 8px;
    overflow: hidden;
    border: 1px solid #f3ddc0;
    border-right: 0;
    border-radius: 999px 0 0 999px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(44, 32, 16, .17);
    cursor: pointer;
    list-style: none;
    transition: max-width .28s ease;
}
.panier__pastille::-webkit-details-marker { display: none; }
.panier__pastille:hover,
.panier__pastille:focus-visible { max-width: 290px; }
.panier__pastille:focus-visible { outline: 2px solid var(--gold, #f0a34a); outline-offset: -2px; }

.panier__icone {
    display: grid;
    flex: 0 0 auto;
    width: 36px; height: 36px;
    place-items: center;
    border-radius: 50%;
    background: #14140f;
    color: var(--gold, #f0a34a);
}

/* La « notif » : le nombre d'ajouts, lisible sans rien déplier. */
.panier__badge {
    position: absolute;
    top: 3px; left: 30px;
    min-width: 19px; height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--gold, #f0a34a);
    color: #14140f;
    font-size: .72rem;
    font-weight: 800;
    line-height: 19px;
    text-align: center;
}

.panier__resume { display: flex; flex-direction: column; line-height: 1.3; white-space: nowrap; }
.panier__resume b { font-size: .88rem; color: #1b1b20; }
.panier__resume small { font-size: .76rem; color: #6c6c76; }

/* ---- Le panneau déplié ---- */
.panier__corps {
    position: absolute;
    right: 12px;
    bottom: calc(100% + 10px);
    width: 320px;
    max-height: 62vh;
    overflow-y: auto;
    padding: 14px 16px;
    border: 1px solid #eadfcd;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(44, 32, 16, .22);
}
.panier[open] .panier__pastille { max-width: 290px; }

.panier__entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid #efe7da;
}
.panier__entete b { font-size: .95rem; color: #1b1b20; }
.panier__entete span { font-size: 1.05rem; font-weight: 700; color: var(--gold, #f0a34a); }

.panier__liste { margin: 0; padding: 0; list-style: none; }
.panier__liste li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f2ece1;
}
.panier__qui { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.panier__qui b { font-size: .87rem; color: #1b1b20; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panier__qui small { font-size: .75rem; color: #6c6c76; }
.panier__prix { margin-left: auto; font-size: .87rem; font-weight: 600; white-space: nowrap; }
.panier__chef { font-size: .72rem; color: #8a8a92; white-space: nowrap; }

.panier__retirer {
    padding: 0; border: 0; background: none;
    color: #b3453f; font-size: .78rem;
    text-decoration: underline; cursor: pointer; white-space: nowrap;
}
.panier__retirer:hover { color: #8d2f2a; }

.panier__actions { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
.panier__ajouter {
    padding: 9px 14px;
    border: 1px solid rgba(27, 27, 32, .2);
    border-radius: 999px;
    background: none;
    color: #1b1b20;
    font-size: .85rem; font-weight: 600;
    cursor: pointer; width: 100%;
}
.panier__ajouter:hover { border-color: var(--gold, #f0a34a); }
.panier__voir {
    padding: 10px 14px;
    border-radius: 999px;
    background: #14140f;
    color: #fff;
    font-size: .87rem; font-weight: 700;
    text-align: center; text-decoration: none;
}
.panier__voir:hover { background: #26261d; }

/* Petits écrans : le panneau déborderait. Il devient une feuille presque
   pleine largeur, ancrée au même bord. */
@media (max-width: 460px) {
    .panier { transform: translateY(calc(-50% - 62px)); }
    .panier__corps {
        position: fixed;
        right: 10px; left: 10px;
        bottom: auto; top: 50%;
        width: auto;
        transform: translateY(-58%);
        max-height: 66vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .panier__pastille { transition: none; }
}