/*
 * Panier de l'en-tête.
 *
 * La barre occupe la sixième zone : l'emplacement d'extension à gauche, le
 * panier à droite. Les deux se répartissent l'espace disponible, et se
 * placent l'un sous l'autre quand la fenêtre ne suffit plus.
 *
 * Toutes les valeurs passent par les variables du thème : le mode de
 * contraste renforcé redéfinit celles-ci, et une valeur écrite en dur y
 * échapperait.
 */

.discovery-panier-barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--discovery-space-2) var(--discovery-space-4);
    inline-size: 100%;
}

/*
 * L'emplacement d'extension ne réserve aucune place lorsqu'il est vide : le
 * panier se placerait sinon au centre plutôt qu'au bord.
 */
.discovery-panier-extension {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--discovery-space-3);
    min-width: 0;
}

.discovery-panier-extension:empty {
    display: none;
}

.discovery-panier {
    margin-inline-start: auto;
}

/*
 * Le lien forme un bloc entier, et non son seul intitulé : une cible réduite
 * au texte serait plus difficile à atteindre, au pointeur comme au doigt. Sa
 * hauteur minimale suit celle des boutons du thème.
 */
.discovery-panier-lien {
    display: inline-flex;
    align-items: center;
    gap: var(--discovery-space-2);
    min-block-size: var(--discovery-cible-min, 2.75rem);
    padding: var(--discovery-space-2) var(--discovery-space-4);
    color: var(--discovery-color-text);
    text-decoration: none;
    background-color: var(--discovery-color-surface);
    border: 1px solid var(--discovery-color-muted);
    border-radius: var(--discovery-radius-sm);
}

.discovery-panier-lien:hover,
.discovery-panier-lien:focus-visible {
    border-color: var(--discovery-color-text);
    text-decoration: underline;
}

/*
 * Le symbole suit la taille du texte : une image ne serait ni redimensionnable
 * par la personne, ni reprise par le mode de contraste renforcé.
 */
.discovery-panier-symbole {
    font-size: var(--discovery-text-lg);
    line-height: 1;
}

.discovery-panier-intitule {
    white-space: nowrap;
}

/*
 * Le nombre est présenté dans une pastille, distincte de l'intitulé. Il est
 * masqué aux techniques d'assistance : le nom accessible du lien le porte
 * déjà, et l'entendre deux fois n'apprendrait rien.
 */
.discovery-panier-nombre {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.75rem;
    padding-inline: var(--discovery-space-2);
    color: var(--discovery-color-background);
    font-size: var(--discovery-text-sm);
    font-weight: var(--discovery-weight-semibold);
    line-height: 1.75;
    background-color: var(--discovery-color-link);
    border-radius: 1rem;
}