/* BunsBet Casino - styles propres a la page Paiements */

/* Bandeau d'illustration des moyens de paiement (haut de page). */
.bb-payhero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;
  align-items:center;
  margin:6px 0 30px;
  padding:24px 26px;
  border:1px solid var(--bb-line-strong);
  border-radius:var(--bb-r-lg);
  background:var(--bb-grad-deep);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}

.bb-payhero__main{min-width:0}
.bb-payhero__head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.bb-payhero__art{
  flex:0 0 96px;width:96px;height:auto;
  filter:drop-shadow(0 6px 16px rgba(245,158,11,.35));
}
.bb-payhero__kicker{
  margin:0 0 6px;
  font-family:"Inter",sans-serif;font-weight:800;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bb-orange);
}
/* Le plafond de mesure ne vaut que sur deux colonnes, quand la grille de logos
   occupe reellement la colonne de droite. Il saute des que le bandeau s'empile. */
.bb-payhero__lede{
  margin:0;
  color:var(--bb-cream);font-size:1.02rem;line-height:1.6;max-width:46ch;
}

/* Chiffres cles */
.bb-payhero__stats{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
}
.bb-payhero__stat{
  min-width:0;
  padding:12px 14px;border-radius:var(--bb-r-sm);
  background:rgba(9,7,7,.55);border:1px solid var(--bb-line);
  text-align:center;
}
.bb-payhero__stat b{
  display:block;
  font-family:"Lilita One","Inter",sans-serif;font-weight:400;
  font-size:clamp(1.1rem,2.1vw,1.45rem);line-height:1.1;
  color:var(--bb-cheese);
}
.bb-payhero__stat span{
  display:block;margin-top:4px;
  font-size:.74rem;line-height:1.35;color:var(--bb-ink-mute);
  letter-spacing:.04em;
}

/* Grille de pastilles logos */
.bb-payhero__logos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
}
.bb-payhero__logo{
  display:grid;place-items:center;
  min-width:0;height:84px;padding:12px;
  border-radius:var(--bb-r-sm);
  background:var(--bb-surface-2);border:1px solid var(--bb-line);
  transition:border-color .18s ease,transform .18s ease;
}
.bb-payhero__logo:hover{border-color:var(--bb-line-strong);transform:translateY(-3px)}
/* max-width:100% est deja pose sur toutes les images par core.css. */
.bb-payhero__logo img{
  max-height:38px;width:auto;
  filter:brightness(0) invert(1);opacity:.95;
  transition:opacity .18s ease;
}
.bb-payhero__logo:hover img{opacity:1}

/* ---------- Contenu editorial ---------- */

/* Filet de securite : une reference longue (adresse, identifiant) se coupe au lieu
   d'elargir le bloc et de faire deborder la page sur les petits ecrans. */
.bb-prose{overflow-wrap:break-word}

/* Les deux tableaux defilent dans leur cadre. overscroll-behavior evite que le
   geste horizontal se propage a la page (ou au geste retour du navigateur), et le
   cadre est rendu focusable en HTML donc il lui faut un anneau de focus visible. */
.bb-grid-scroll{overscroll-behavior-x:contain}
.bb-grid-scroll:focus-visible{outline:2px solid var(--bb-line-strong);outline-offset:3px}

/* La rangee de logos de paiement n'a aucune marge dans core.css : elle collait au
   paragraphe suivant, tres visible en mobile ou elle s'etale sur trois lignes. */
.bb-prose .bb-pays{margin:2px 0 20px}

/* Sous 1180 px, le rail laisse trop peu de place : la colonne de texte tombait a
   environ 210 px face a une colonne de logos bien plus courte. On empile, le texte
   reprend toute la largeur et les pastilles se repartissent sur la ligne. */
@media (max-width:1180px){
  .bb-payhero{grid-template-columns:1fr;gap:20px;padding:20px}
  .bb-payhero__lede{max-width:none}
  /* Bandeau empile : les neuf pastilles tiennent sur une seule ligne. Un nombre de
     colonnes fixe evite la derniere ligne orpheline que produisait auto-fit
     (six pastilles puis trois vers 768 px). minmax(0,1fr) ne deborde jamais. */
  .bb-payhero__logos{grid-template-columns:repeat(9,minmax(0,1fr))}
}

@media (max-width:720px){
  /* Sous 720 px, neuf colonnes reduiraient chaque logo a moins de 45 px de large :
     on repasse a trois lignes de trois, rythme identique a la version bureau. */
  .bb-payhero__logos{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:640px){
  .bb-payhero{padding:16px;margin-bottom:24px;border-radius:var(--bb-r)}
  .bb-payhero__head{gap:12px;margin-bottom:14px}
  .bb-payhero__art{flex:0 0 64px;width:64px}
  .bb-payhero__lede{font-size:.95rem}
  .bb-payhero__stats{grid-template-columns:1fr;gap:8px}
  .bb-payhero__stat{
    display:flex;align-items:baseline;justify-content:space-between;gap:10px;
    text-align:left;padding:10px 12px;
  }
  .bb-payhero__stat span{margin-top:0;text-align:right}
  .bb-payhero__logos{gap:8px}
  .bb-payhero__logo{height:72px;padding:10px}
  .bb-payhero__logo img{max-height:32px}

  /* Fil d'ariane : le lien tenait sur 21 px de haut, sous le seuil tactile.
     22 px de ligne + 9 px de marge interne haut et bas = 40 px cliquables. */
  .bb-crumb{margin:14px 0 10px}
  .bb-crumb a{display:inline-block;padding:9px 0;line-height:22px}

  /* Listes de la page : les puces se touchaient presque une fois le texte replie. */
  .bb-prose li{margin-bottom:.7em}
}

@media (max-width:400px){
  /* Le logo laissait moins de 220 px au texte, soit une dizaine de lignes de deux
     mots. La tete du bandeau s'empile : le paragraphe reprend toute la largeur. */
  .bb-payhero{padding:14px}
  .bb-payhero__head{flex-direction:column;align-items:flex-start;gap:10px}
  .bb-payhero__art{flex:0 0 auto;width:60px}
  .bb-payhero__stat{padding:9px 11px}
  .bb-payhero__logo{height:64px;padding:8px}
}