/* ══════════════════════════════════════════════════════════════════════
   Le bandeau de découverte des autres marchés — habillage
   ──────────────────────────────────────────────────────────────────────
   Discret par construction. Ce bandeau propose au visiteur de QUITTER la
   page : s'il attire plus l'œil que les produits, il fait perdre une vente
   au lieu d'en sauver une. Il doit se trouver quand on le cherche, et se
   faire oublier sinon — d'où l'absence de couleur vive, de fond plein et
   d'animation.
   ══════════════════════════════════════════════════════════════════════ */

.mdWrap {
  --md-bord: rgba(127, 127, 127, 0.3);
  --md-fond: rgba(127, 127, 127, 0.07);
  display: block;
  margin: 2rem 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.mdWrap.mdSombre { color: #f4f4f5; --md-bord: rgba(255,255,255,0.18); --md-fond: rgba(255,255,255,0.05); }
.mdWrap.mdClair  { color: #18181b; --md-bord: rgba(0,0,0,0.14);       --md-fond: rgba(0,0,0,0.035); }

.mdTitre {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.65;
  text-transform: uppercase;
}

/* Une grille qui s'adapte seule : deux colonnes dès qu'il y a la place, une
   seule en dessous. `auto-fit` + `minmax` évite d'écrire un point de rupture
   de plus — et notamment d'en manquer un, comme le format Android de 412 px
   qui était déjà tombé entre deux media queries sur les grilles produits. */
.mdCartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.6rem;
}

.mdCarte {
  position: relative;
  display: block;
  padding: 0.85rem 2.2rem 0.85rem 0.95rem;
  border: 1px solid var(--md-bord);
  border-radius: 12px;
  background: var(--md-fond);
  color: inherit;
  text-decoration: none;
  /* Cible tactile confortable : c'est un lien qu'on vise au pouce. */
  min-height: 44px;
  transition: border-color 0.18s ease;
}
.mdCarte:hover, .mdCarte:focus-visible { border-color: currentColor; }

.mdNom { display: block; font-weight: 700; font-size: 0.95rem; }
.mdAccroche { display: block; font-size: 0.8rem; opacity: 0.75; margin-top: 0.1rem; }
.mdPourquoi { display: block; font-size: 0.78rem; opacity: 0.55; margin-top: 0.3rem; }

.mdFleche {
  position: absolute;
  top: 50%;
  right: 0.9rem;
  transform: translateY(-50%);
  font-size: 1.1rem;
  opacity: 0.45;
}

/* ══════════════════════════════════════════════════════════════════════
   Le bandeau flottant — « Découvrez le marché … »
   ──────────────────────────────────────────────────────────────────────
   Il propose de QUITTER la page. Toute sa conception tient dans cet
   équilibre : assez présent pour être vu, assez retenu pour ne pas voler
   l'attention aux produits.

   Posé en BAS et non en haut : en haut il recouvrirait la recherche et le
   panier, les deux choses dont le visiteur a besoin. En bas, il occupe la
   bande que le pouce balaie déjà sans rien y chercher.
   ══════════════════════════════════════════════════════════════════════ */

.mdFlottant {
  position: fixed;
  left: 50%;
  /* ⚠️ REMONTÉ AU-DESSUS DES BOUTONS FLOTTANTS, et ce n'est pas cosmétique.
     Ces sites ont déjà, en bas, le bouton du panier (à gauche) et la bulle du
     chatbot (à droite). Posé à 1 rem du bas, ce bandeau passait PAR-DESSUS les
     deux : on ne pouvait plus ouvrir son panier, et le compteur d'articles
     disparaissait derrière. Constaté en capture, pas en théorie.
     5,8 rem = la hauteur du bouton panier (54 px) plus sa marge, plus un
     intervalle. `env(safe-area-inset-bottom)` ajoute la barre de geste des
     iPhone, sans quoi tout l'empilement descend d'un cran. */
  bottom: calc(5.8rem + env(safe-area-inset-bottom, 0px));
  z-index: 9990;
  display: flex;
  align-items: stretch;
  /* La croix de fermeture débordait à droite : la marge doit tenir compte du
     centrage par translation, donc être comptée DES DEUX CÔTÉS. */
  width: min(400px, calc(100vw - 2.5rem));
  border-radius: 16px;
  overflow: hidden;
  background: rgba(22, 22, 32, 0.93);
  color: #fff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.09) inset;
  backdrop-filter: blur(10px);
  /* Entrée depuis le bas, et non en apparition brutale : un élément qui
     surgit sans mouvement se lit comme une erreur d'affichage. */
  transform: translate(-50%, calc(100% + 2rem));
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.mdFlottantVisible { transform: translate(-50%, 0); opacity: 1; }

.mdFlottantLien {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* 60 px de haut : c'est une cible qu'on vise en marchant, d'un pouce. */
  min-height: 60px;
  padding: 0.7rem 0.4rem 0.7rem 0.85rem;
  color: inherit;
  text-decoration: none;
}

/* La pastille porte l'initiale du marché. Un dégradé plutôt qu'un aplat :
   sur un fond sombre translucide, un aplat paraît éteint. */
/* La pastille porte le LOGO AMKA — pas l'initiale du marché. Une lettre dans
   un rond ressemble à l'avatar d'un inconnu ; le logo dit que c'est la même
   maison qui tient les deux marchés, ce qui est l'argument même du bandeau. */
.mdFlottantPastille {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(145deg, #2563eb, #7c3aed);
  overflow: hidden;
}
.mdFlottantPastille img {
  width: 30px;
  height: 30px;
  max-width: none;
  object-fit: contain;
}

.mdFlottantTexte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mdFlottantTitre {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  /* Une seule ligne, coupée proprement : un nom long ne doit pas pousser la
     flèche hors du bandeau sur un écran de 412 px. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mdFlottantSous {
  font-size: 0.76rem;
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mdFlottantFleche { flex: 0 0 auto; padding-right: 0.5rem; font-size: 1.15rem; opacity: 0.55; }

/* La croix est volontairement discrète MAIS large : discrète pour ne pas
   inviter à fermer, large pour que celui qui veut fermer y arrive du premier
   coup — un bandeau qu'on rate en voulant le chasser devient une nuisance. */
.mdFlottantFermer {
  flex: 0 0 auto;
  width: 44px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease;
}
.mdFlottantFermer:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }

/* Le visiteur qui a demandé moins d'animation ne doit pas voir le bandeau
   glisser : il apparaît simplement, à sa place. */
@media (prefers-reduced-motion: reduce) {
  .mdFlottant { transition: opacity 0.2s ease; transform: translate(-50%, 0); }
}