/* === Background pattern sport/betting (global) === */
html, body {
  height: 100%;
  background-color: #ffffff;
  background-image:
    radial-gradient(rgba(30, 58, 138, 0.045) 1px, transparent 1.2px),
    repeating-linear-gradient(
      135deg,
      rgba(22, 163, 74, 0.045) 0px,
      rgba(22, 163, 74, 0.045) 1px,
      transparent 1px,
      transparent 26px
    );
  background-size: 22px 22px, auto;
  background-position: 0 0, 0 0;
  background-attachment: fixed;
  overflow-x: hidden;
}
/* Les sections ne recouvrent pas le pattern */
.section { background: transparent !important; }

/* Les cartes restent bien blanches et lisibles */
.card,
.show,
.price,
.quote,
details {
  background: #fff !important;
}

/* --- Sécurité anti-débordement / largeur --- */
.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.show { position: relative; overflow: visible; }  /* le tel peut dépasser en bas sans créer de scroll */

/* --- Téléphone (S24 Ultra) par défaut (desktop) ---
   (garde tes styles existants dans index.html si tu les as, ceux-ci sont complémentaires)
*/
.show .pane { position: relative; height: 120px; background: transparent; }
.show .phone {
  position: absolute;
  right: 6%;
  bottom: -120px;              /* descendu pour ne pas chevaucher la section au-dessus */
  width: 200px;
  transform: rotate(-6deg);
  box-shadow: 0 18px 36px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.04);
}

/* --- Responsive tablette --- */
@media (max-width: 960px) {
  .show .pane { height: 200px; }
  .show .phone {
    right: auto;
    left: 50%;
    bottom: -60px;             /* un peu moins bas pour garder du souffle sur mobile */
    transform: translateX(-50%) rotate(-6deg);
  }
}

/* --- Responsive mobile --- */
@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .show { grid-template-columns: 1fr !important; }
  .show .pane { height: 220px; }          /* espace suffisant pour le tel centré */
  .show .phone {
    width: 180px;                          /* un poil plus petit */
    right: auto;
    left: 50%;
    bottom: -50px;
    transform: translateX(-50%) rotate(-6deg);
  }
}
/* --- Mobile-only fix: keep phone below the text, no overlap --- */
@media (max-width: 640px) {
  /* Give the right column (pane) enough height so the phone fits entirely */
  .show .pane {
    height: 360px;             /* was 200–220px; increase so the phone starts below the text */
  }

  .show .phone {
    width: 180px;
    left: 50%;
    transform: translateX(-50%) rotate(-6deg);

    /* Place it by TOP instead of BOTTOM so it can't float up into the text */
    top: 16px;                 /* start a bit below the pane top */
    bottom: auto;              /* disable bottom positioning */
  }
}
.plan .cta{
  padding:18px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;   /* centre les boutons */
  width:100%;
}
@media (max-width: 640px){
  .plan .cta{
    flex-direction:column;
  }
}
/* Changer uniquement la bulle Week-End */
.plan.weekend .badge {
  background: rgba(30, 58, 138, 0.15); /* bleu royal clair */
  border-color: rgba(30, 58, 138, 0.35);
  color: #1e3a8a; /* texte bleu royal */
}
/* Badge Week-End (ne change que la bulle du plan week-end) */
article.plan.weekend .head .badge {
    background: rgb(138 30 30 / 15%);
    border-color: rgb(138 30 30 / 35%) !important;
    color: #0f172a !important;
}
/* Forcer tous les boutons verts en bleu royal */
.btn.primary,
button.btn-primary,
a.btn-primary,
button.bg-green-500,
a.bg-green-500,
button.bg-\[\#16a34a\],
a.bg-\[\#16a34a\] {
  background-color: #0a4e6e !important; /* Bleu royal */
  color: #fff !important;
  border-color: #1e3a8a !important;
}

/* Effet hover */
.btn.primary:hover,
button.btn-primary:hover,
a.btn-primary:hover,
button.bg-green-500:hover,
a.bg-green-500:hover,
button.bg-\[\#16a34a\]:hover,
a.bg-\[\#16a34a\]:hover {
  background-color: #153e75 !important; /* Bleu royal foncé */
  color: #fff !important;
}