/**
 * Besearch — panneau de recherche plein écran.
 *
 * Le champ de recherche du thème n'est pas touché : il garde son apparence et
 * ne sert plus que de déclencheur. Seul le panneau est habillé.
 *
 * L'aspect reprend celui de Besearch Lite : cartes blanches à angles droits,
 * prix en bleu suivi d'une pastille fléchée, étiquette de promotion rouge.
 * Deux largeurs cohabitent volontairement — la barre de recherche est centrée
 * dans une colonne lisible, les résultats occupent tout l'écran.
 *
 * Sur téléphone, le panneau ne cherche pas à ressembler à sa version bureau :
 * la croix devient « Annuler », les effets de survol disparaissent au profit
 * d'un retour au toucher, et le clavier se retire dès qu'on fait défiler.
 */

.besearch-locked {
    overflow: hidden;
}

.besearch-overlay {
    position: fixed;
    inset: 0;
    /* dvh suit la barre d'outils mobile, qui se rétracte au défilement ;
       sans cela le bas du panneau passe sous elle sur iOS. */
    height: 100dvh;
    overflow: hidden;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    background: #fff;
    font-size: 15px;
    line-height: 1.45;
    color: #1f2937;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    animation: besearch-in 0.14s ease-out;
}

.besearch-overlay[hidden] {
    display: none;
}

@keyframes besearch-in {
    from {
        opacity: 0;
    }
}

/* ------------------------------------------------------------------ entête */

/* « -webkit-overflow-scrolling: touch » a ete retiree des conteneurs de
   defilement : sur iOS elle retient les elements « position: fixed », et le
   volet de filtres s'arretait sous cette barre au lieu de la couvrir. Elle est
   obsolete depuis iOS 13, ou le defilement fluide est le comportement par
   defaut. */
.besearch-head {
    position: relative;
    /* Explicite plutot qu'herite : l'ordre d'empilement de cette barre et du
       volet decide lequel couvre l'autre, et cela ne doit pas dependre de
       l'ordre du document. */
    z-index: 1;
    flex: 0 0 auto;
    padding: 20px 20px 14px;
    /* Une encoche d'écran ne doit pas rogner la barre de recherche. */
    padding-top: max(20px, env(safe-area-inset-top));
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}

/* La colonne centrée : logo, champ et fermeture restent groupés au milieu,
   quelle que soit la largeur de l'écran. */
.besearch-head-inner {
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.besearch-bar {
    display: flex;
    align-items: center;
    gap: 15px;
}

.besearch-logo {
    max-height: 40px;
    width: auto;
    flex: 0 0 auto;
}

.besearch-field {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    border-radius: 4px;
    background: #f9fafb;
}

/* Rien ne change à la mise au point : le curseur qui clignote dit déjà où
   l'on écrit, et tout cadre supplémentaire se lit comme une sélection. */

.besearch-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: #9ca3af;
}

/* Le champ ne doit rien devoir au thème.
 *
 * Une boutique charge une quinzaine de feuilles de style, dont plusieurs
 * habillent « input[type=search] » — cadre, fond blanc, ombre. Ces règles sont
 * plus spécifiques que les nôtres et l'emportaient : on voyait un rectangle
 * blanc bordé à l'intérieur de notre propre champ, une boîte dans une boîte.
 *
 * Chercher laquelle des quinze est en cause n'aurait réglé le problème que
 * pour cette boutique-ci. On neutralise donc, une fois pour toutes. C'est le
 * seul endroit du plugin où « important » se justifie : il ne s'agit pas de
 * gagner un désaccord de style, mais de garantir un point de départ neutre
 * dans un thème qu'on ne connaît pas. */
.besearch-overlay .besearch-input {
    flex: 1 1 auto;
    min-width: 0;
    height: auto !important;
    margin: 0 !important;
    padding: 16px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    font: inherit !important;
    /* 16 px minimum : en dessous, iOS agrandit la page à la mise au point. */
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: inherit !important;
    outline: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.besearch-input::placeholder {
    color: #9ca3af;
    opacity: 1;
}

.besearch-input::-webkit-search-cancel-button {
    display: none;
}

/* Comme le champ, le bouton doit tout ignorer du thème : les boutons y sont
   couramment mis en capitales, en gras et espacés. « Annuler » s'affichait
   ainsi en « ANNULER », noir et massif à côté du champ. */
.besearch-overlay .besearch-close {
    display: flex;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #000;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
}

.besearch-overlay .besearch-close:hover {
    color: #ef4444;
    transform: rotate(90deg);
}

.besearch-overlay .besearch-close:focus-visible {
    outline: 2px solid var(--besearch-accent, #3b82f6);
    outline-offset: 2px;
    border-radius: 6px;
}

.besearch-overlay .besearch-close svg {
    width: 28px;
    height: 28px;
}

/* Le mot « Annuler » ne sert qu'au téléphone. */
.besearch-cancel {
    display: none;
}

.besearch-stats {
    max-width: 1200px;
    margin: 12px auto 0;
    color: #6b7280;
    font-size: 13px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    min-height: 18px;
}

/* Fine barre de progression sous l'entête.
   Elle remplace l'assombrissement des résultats, qui donnait l'impression que
   la page s'éteignait à chaque frappe. */
.besearch-progress {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.15s;
}

.besearch-overlay.is-loading .besearch-progress {
    opacity: 1;
}

.besearch-progress::after {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    background: var(--besearch-accent, #3b82f6);
    content: '';
    animation: besearch-slide 1s ease-in-out infinite;
}

@keyframes besearch-slide {
    from {
        left: -40%;
    }
    to {
        left: 100%;
    }
}

/* -------------------------------------------------------------------- corps */

/* La colonne de filtres et les résultats se partagent la largeur.
   Le défilement quitte « body » pour aller dans chaque colonne : sans quoi
   faire défiler les résultats emporterait les filtres hors de l'écran. */
.besearch-body {
    display: flex;
    flex: 1 1 auto;
    /* Sans « min-height », un enfant qui déborde étire le conteneur au lieu
       de défiler à l'intérieur. */
    min-height: 0;
    overflow: hidden;
    background: #fff;
}

.besearch-resultats {
    display: flex;
    flex: 1 1 auto;
    /* Sans cela, une grille large repousse la colonne de filtres hors de
       l'écran au lieu de se resserrer. */
    min-width: 0;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.besearch-facettes {
    box-sizing: border-box;
    flex: 0 0 224px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 30px 16px 32px 20px;
}

.besearch-facettes[hidden] {
    display: none;
}

.besearch-facette + .besearch-facette {
    margin-top: 28px;
}

.besearch-facette h3 {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b7280;
}

.besearch-facette ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.besearch-facette label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.3;
}

.besearch-facette input {
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--besearch-accent);
}

.besearch-facette-nom {
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Les quantités forment une colonne alignée à droite.
   « margin-left: auto » plutôt que de compter sur le nom pour occuper la place :
   un nom court laissait le nombre coller au texte au lieu du bord. La largeur
   minimale et les chiffres à chasse fixe font que 7, 47 et 447 s'alignent sur
   leur unité, comme dans un tableau de comptes. */
.besearch-facette-compte {
    flex: 0 0 auto;
    min-width: 2.5em;
    margin-left: auto;
    color: #9ca3af;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.besearch-facette-plus {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--besearch-accent);
    font-size: 13px;
    cursor: pointer;
}

/* Le bloc d'accueil sert aussi de repli quand la recherche ne donne rien : il
   sépare alors le message de l'échec de ce qu'on propose à la place. */
.besearch-empty + .besearch-accueil,
.besearch-grid:has(.besearch-empty) ~ .besearch-accueil {
    border-top: 1px solid #f3f4f6;
    margin-top: 4px;
    padding-top: 24px;
}

/* ------------------------------------------------------------ accueil */

.besearch-accueil {
    display: flex;
    gap: 28px;
    box-sizing: border-box;
    width: 100%;
    padding: 30px 20px 8px;
    align-items: flex-start;
}

.besearch-populaires {
    flex: 0 0 200px;
}

.besearch-recommandes {
    flex: 1 1 auto;
    min-width: 0;
}

/* Même titre que « CATÉGORIES » ou « MARQUES » : sans cela, le titre et les
   termes avaient la même taille et l'on ne distinguait plus l'un de l'autre. */
.besearch-accueil h3 {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b7280;
}

/* La grille des recommandés reprend celle des résultats : les cartes y sont
   identiques, il n'y a que le remplissage à annuler. */
.besearch-recommandes .besearch-grid {
    padding: 0;
}

.besearch-populaires ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Le thème habille aussi les éléments de liste — c'est de là que venait
   l'essentiel de l'espacement, pas du bouton. */
.besearch-populaires li {
    margin: 0;
    padding: 0;
    line-height: normal;
}

/* Exactement le titre d'une carte produit : même taille, même graisse, même
   couleur. Les thèmes habillent les boutons — majuscules, gras, hauteur de
   ligne — et tout cela remontait jusqu'ici ; chaque propriété est donc reposée,
   y compris celles qui semblent inutiles. */
.besearch-populaires button {
    display: block;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 3px 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #000;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    cursor: pointer;
}

.besearch-populaires button:hover {
    color: var(--besearch-accent);
    text-decoration: underline;
}

/* --------------------------------------------------------------- prix */

.besearch-prix-bornes {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

/* Un seul rail visible. Les deux « input » sont transparents et superposés :
   le navigateur n'offre pas de curseur à double poignée, et les empiler l'un
   sous l'autre donnait deux barres. Seules les poignées reçoivent les clics,
   d'où « pointer-events » désactivé sur le champ lui-même. */
.besearch-prix-rail {
    position: relative;
    height: 22px;
}

.besearch-prix-piste,
.besearch-prix-active {
    position: absolute;
    top: 9px;
    height: 4px;
    border-radius: 2px;
}

.besearch-prix-piste {
    right: 0;
    left: 0;
    background: #e5e7eb;
}

.besearch-prix-active {
    background: var(--besearch-accent);
}

.besearch-prix input[type='range'] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    pointer-events: none;
}

.besearch-prix input[type='range']::-webkit-slider-runnable-track {
    background: transparent;
}

.besearch-prix input[type='range']::-moz-range-track {
    background: transparent;
}

.besearch-prix input[type='range']::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    border: 2px solid var(--besearch-accent);
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    cursor: grab;
    pointer-events: auto;
}

.besearch-prix input[type='range']::-moz-range-thumb {
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border: 2px solid var(--besearch-accent);
    border-radius: 50%;
    background: #fff;
    cursor: grab;
    pointer-events: auto;
}

/* Le bouton et le volet n'existent que sur téléphone. */
.besearch-filtrer,
.besearch-facettes-fermer,
.besearch-facettes-x {
    display: none;
}

/* Les résultats prennent tout l'écran : aucune limite de largeur. */
.besearch-grid {
    display: grid;
    box-sizing: border-box;
    width: 100%;
    padding: 30px 20px 8px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

/* -------------------------------------------------------------------- carte */

.besearch-card {
    display: flex;
    /* Sans cela, un titre sans espace impose sa largeur à la colonne et fait
       déborder toute la grille — visible sur téléphone. */
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.besearch-card:hover,
.besearch-card.is-active {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.besearch-card:focus-visible {
    outline: 2px solid var(--besearch-accent, #3b82f6);
    outline-offset: 2px;
}

.besearch-media {
    position: relative;
    display: block;
    overflow: hidden;
    /* Sans cela, la vignette s'étire pour combler la hauteur de la rangée et
       décale le titre d'une carte à l'autre. */
    flex: 0 0 auto;
    /* Rapport constant : la grille ne saute pas pendant le chargement des images. */
    aspect-ratio: 1 / 1;
    /* min-height: auto, valeur par défaut d'un élément flexible, laissait une
       image plus haute que large repousser le bas de la vignette : mesuré à
       259 px au lieu de 207, et le titre de cette carte tombait plus bas que
       celui de ses voisines. */
    min-height: 0;
    background: #fff;
}

/* Hors du flux : l'image ne peut plus imposer sa hauteur à la vignette. */
.besearch-media img,
.besearch-media--empty {
    position: absolute;
    inset: 15px;
    display: block;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    object-fit: contain;
}

.besearch-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    padding: 4px 12px;
    border-radius: 6px;
    background: #ef4444;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.besearch-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px 16px;
}

.besearch-card-meta {
    overflow: hidden;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.besearch-card-title {
    display: -webkit-box;
    overflow: hidden;
    /* Deux lignes maximum : les titres produits sont souvent interminables. */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #1f2937;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

.besearch-card-price {
    display: flex;
    margin-top: auto;
    padding-top: 10px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.besearch-price {
    min-width: 0;
    color: var(--besearch-accent, #3b82f6);
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.besearch-price s {
    margin-right: 6px;
    color: #9ca3af;
    font-size: 14px;
    font-weight: 400;
}

.besearch-arrow {
    display: flex;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--besearch-accent, #3b82f6);
    color: #fff;
    transition: background 0.3s ease, transform 0.3s ease;
}

.besearch-arrow svg {
    width: 16px;
    height: 16px;
}

.besearch-card:hover .besearch-arrow {
    filter: brightness(0.9);
    transform: translateX(4px);
}

.besearch-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 60px 20px;
    color: #6b7280;
    font-size: 18px;
    text-align: center;
}

/* ----------------------------------------------------------- gabarits d'attente */

/* Une page blanche pendant deux cents millisecondes paraît plus longue qu'une
   page déjà structurée : l'œil n'a rien à quoi se raccrocher. */
.besearch-card--ghost {
    pointer-events: none;
    animation: besearch-pulse 1.1s ease-in-out infinite;
}

.besearch-card--ghost:hover {
    transform: none;
    box-shadow: none;
}

.besearch-card--ghost .besearch-media {
    background: #f3f4f6;
}

.besearch-ghost-line {
    height: 12px;
    border-radius: 3px;
    background: #f3f4f6;
}

.besearch-ghost-line--short {
    width: 55%;
    margin-top: 4px;
}

@keyframes besearch-pulse {
    50% {
        opacity: 0.55;
    }
}

/* --------------------------------------------------- chargement progressif */

.besearch-more {
    display: flex;
    justify-content: center;
    padding: 24px 0 56px;
}

.besearch-more[hidden] {
    display: none;
}

.besearch-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e5e7eb;
    border-top-color: var(--besearch-accent, #3b82f6);
    border-radius: 50%;
    animation: besearch-spin 1s linear infinite;
}

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

/* ------------------------------------------------------------ grand écran */

@media (min-width: 1440px) {
    .besearch-grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }
}

@media (min-width: 1920px) {
    .besearch-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* ------------------------------------------------------------------ mobile */

/* ---------------------------------------------------------- suggestions --

   Les étiquettes sous le champ et la fin grise à l'intérieur. Tout est calculé
   dans le navigateur à partir d'une liste arrivée avec la page : rien ici ne
   dépend d'une réponse réseau, donc rien ne peut apparaître en retard. */

.besearch-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
}

.besearch-overlay .besearch-suggestion {
    /* Surtout pas « flex » ici : l'etiquette porte du texte marque, et flex
       ferait de « <b>coran</b> rose » deux elements dont le second perdrait son
       espace de tete. Le texte doit rester du texte. */
    display: block;
    max-width: 100%;
    margin: 0;
    padding: 7px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
    color: #6b7280;
    font: inherit;
    font-size: 14px;
    line-height: 1.2;
    /* Une suggestion longue se coupe proprement plutôt que d'étirer la ligne. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

/* La part déjà tapée, en sombre : l'œil voit d'un coup ce que l'étiquette
   ajoute à sa frappe. */
.besearch-suggestion b {
    color: #111827;
    font-weight: 500;
}

.besearch-overlay .besearch-suggestion:hover,
.besearch-overlay .besearch-suggestion:focus-visible {
    border-color: var(--besearch-accent);
    color: #111827;
}

/* La fin de la suggestion, derrière le champ.

   Positionnée sur mesure et non par la feuille de style : le champ est un
   élément de flex dont l'abscisse dépend du logo, de l'icône et de la largeur
   de l'écran. Le script relit sa position à chaque affichage. */
.besearch-fantome {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #9ca3af;
    /* Mêmes réglages que le champ, sans quoi la suite grise ne tomberait pas
       sous le curseur. */
    font-size: 16px;
    line-height: 1.4;
    white-space: pre;
    /* Le champ reste seul à recevoir clics et sélection. */
    pointer-events: none;
    user-select: none;
}

/* Reprise en transparent : invisible, mais elle occupe exactement la largeur
   de ce qui est tapé et pousse la suite au bon endroit — sans mesurer un seul
   caractère, donc sans rien à recalculer quand la police finit de charger. */
/* Le texte entier dans un seul enfant du conteneur flex : sans lui, l'espace
   qui suit la part tapee serait supprime. */
.besearch-fantome-texte {
    white-space: pre;
}

.besearch-fantome-tape {
    color: transparent;
}

/* Chercher dans une colonne de filtres.

   Chez inkcenter, la colonne des imprimantes en porte cent : « Voir plus » les
   déplie, mais personne ne parcourt cent lignes à l'œil. Le champ ne parle
   qu'aux valeurs déjà présentes dans la page — aucune requête. */

.besearch-overlay .besearch-facette-q {
    /* La règle générale des cases à cocher vise « .besearch-facette input » :
       il faut la reprendre entièrement, sans quoi le champ hériterait d'un
       « flex: 0 0 auto » qui l'écraserait. */
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0 0 10px;
    padding: 7px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
    font: inherit;
    font-size: 13px;
    line-height: 1.3;
    color: inherit;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.besearch-overlay .besearch-facette-q:focus {
    border-color: var(--besearch-accent);
}

.besearch-facette-q::-webkit-search-cancel-button {
    display: none;
}

/* Cent valeurs dépliées repousseraient le reste des filtres hors de l'écran :
   la liste défile dans son propre cadre. */
.besearch-facette--cherchable ul {
    max-height: 240px;
    overflow-y: auto;
    /* La barre de défilement ne doit pas recouvrir les compteurs alignés à
       droite. */
    padding-right: 4px;
}

@media (max-width: 768px) {
    /* Le panneau est déjà plein écran et les résultats sur deux colonnes :
       une colonne de filtres n'y tient pas. Elle devient un volet. */
    .besearch-body {
        display: block;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .besearch-resultats {
        display: block;
        overflow: visible;
    }

    .besearch-accueil {
        display: block;
        padding: 20px 12px 8px;
    }

    .besearch-populaires {
        margin-bottom: 28px;
    }

    /* Compact : il partage la ligne du compteur de résultats au lieu de
       s'offrir une rangée à lui seul, sur un écran où chaque ligne compte. */
    .besearch-filtrer {
        display: block;
        margin: 4px auto 0;
        padding: 3px 12px;
        border: 1px solid #d1d5db;
        border-radius: 999px;
        background: #fff;
        color: inherit;
        font-size: 12px;
        line-height: 1.5;
        cursor: pointer;
    }

    /* Réservé aux ordinateurs, à la demande du marchand. */
    .besearch-overlay.besearch-accueil-bureau .besearch-accueil {
        display: none;
    }

    .besearch-facettes {
        position: fixed;
        /* Au-dessus de la barre de recherche : un volet de filtres a plein
           ecran qui laisse voir la barre derriere lui n'est plus un volet. */
        z-index: 2;
        inset: 0;
        /* De la place en haut pour la croix, qui ne doit recouvrir aucun
           filtre. */
        padding: 58px 20px 96px;
        background: #fff;
        transform: translateY(100%);
        transition: transform 0.22s ease;
    }

    .besearch-overlay.is-filtres-ouverts .besearch-facettes {
        transform: none;
    }

    .besearch-facettes-x {
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: none;
        color: #4b5563;
        cursor: pointer;
        /* Assez large pour un pouce, et « manipulation » pour qu'iOS
           transmette le premier appui sans attendre un second. */
        touch-action: manipulation;
    }

    .besearch-facettes-x svg {
        width: 20px;
        height: 20px;
    }

    .besearch-facettes-fermer {
        position: fixed;
        right: 16px;
        bottom: 16px;
        bottom: max(16px, env(safe-area-inset-bottom));
        left: 16px;
        display: block;
        padding: 15px;
        border: 0;
        border-radius: 10px;
        background: var(--besearch-accent);
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }

    /* Le logo mange la moitié d'une barre déjà étroite ; le champ prime. */
    .besearch-logo {
        display: none;
    }

    .besearch-head {
        padding: 10px 12px 8px;
        padding-top: max(10px, env(safe-area-inset-top));
    }

    .besearch-bar {
        gap: 4px;
    }

    .besearch-field {
        padding: 0 14px;
        /* La pastille arrondie des recherches natives d'iOS et d'Android. */
        border-radius: 10px;
        background: #eef0f3;
    }

    .besearch-input {
        padding: 11px 0;
    }

    /* Empilées, cinq étiquettes prendraient trois lignes et repousseraient les
       résultats hors de l'écran. Elles défilent donc du doigt, comme les
       filtres d'une application native. */
    .besearch-suggestions {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-top: 10px;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .besearch-suggestions::-webkit-scrollbar {
        display: none;
    }

    .besearch-overlay .besearch-suggestion {
        flex: 0 0 auto;
    }

    /* La croix cède la place au mot : cible plus large, intention plus claire.
       Le sélecteur reprend « .besearch-overlay » : une requête de media
       n'ajoute aucune spécificité, et la règle générale l'emportait — d'où un
       « Annuler » resté noir sur téléphone. */
    .besearch-overlay .besearch-close {
        width: auto;
        height: auto;
        /* Aligné sur le champ : même graisse, même taille, même hauteur de
           ligne. Le mot doit se lire comme une action, pas comme un titre. */
        padding: 11px 2px 11px 14px !important;
        color: var(--besearch-accent, #3b82f6);
        font-size: 16px !important;
        font-weight: 400 !important;
    }

    .besearch-overlay .besearch-close:hover,
    .besearch-overlay .besearch-close:active {
        transform: none;
        color: var(--besearch-accent, #3b82f6);
    }

    .besearch-overlay .besearch-close:active {
        opacity: 0.5;
    }

    .besearch-overlay .besearch-close svg {
        display: none;
    }

    .besearch-cancel {
        display: inline;
        white-space: nowrap;
    }

    /* Une cible plus large, et « manipulation » pour qu'iOS n'attende plus un
       eventuel second appui avant de transmettre le premier. */
    .besearch-close {
        padding: 10px 6px 10px 14px;
        margin-right: -6px;
        touch-action: manipulation;
    }

    .besearch-stats {
        margin-top: 8px;
        font-size: 12px;
    }

    .besearch-grid {
        /* minmax(0, 1fr) et non 1fr : sinon le contenu peut élargir la colonne. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 12px 12px 8px;
        gap: 12px;
        /* Barre de navigation gestuelle : la dernière rangée reste atteignable. */
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Le survol n'existe pas au doigt ; ce qui compte est le retour au toucher. */
    .besearch-card:hover {
        transform: none;
        box-shadow: none;
    }

    .besearch-card:active {
        transform: scale(0.97);
        transition-duration: 0.06s;
    }

    .besearch-card:hover .besearch-arrow {
        transform: none;
        filter: none;
    }

    .besearch-media img,
    .besearch-media--empty {
        inset: 10px;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
    }

    .besearch-card-body {
        padding: 10px 12px 12px;
    }

    .besearch-card-title {
        font-size: 13px;
    }

    .besearch-price {
        font-size: 15px;
    }

    .besearch-arrow {
        width: 28px;
        height: 28px;
    }

    .besearch-arrow svg {
        width: 14px;
        height: 14px;
    }

    .besearch-badge {
        top: 8px;
        right: 8px;
        padding: 3px 9px;
        font-size: 11px;
    }

    .besearch-more {
        padding: 16px 0 40px;
    }

    .besearch-spinner {
        width: 30px;
        height: 30px;
        border-width: 3px;
    }
}

/* Au-delà du téléphone mais avant l'écran large : trois colonnes valent mieux
   que deux étirées. */
@media (min-width: 521px) and (max-width: 768px) {
    .besearch-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .besearch-overlay,
    .besearch-card,
    .besearch-arrow,
    .besearch-card--ghost {
        animation: none !important;
        transition: none !important;
    }

    .besearch-card:hover,
    .besearch-card.is-active {
        transform: none;
    }

    .besearch-progress::after {
        animation-duration: 3s;
    }

    .besearch-spinner {
        animation-duration: 2s;
    }
}