/* ===============================
   PRODUIT — DESKTOP (≥981px)
   Scope: .ebp-* uniquement
   =============================== */

.ebp-product{
  --brand:#2E8BC0; --brand-2:#49a6db; --ink:#0f172a; --muted:#667085;
  --border:rgba(16,24,40,.12); --ring:rgba(46,139,192,.22);
  --ok:#16a34a; --err:#b42318;

  /* léger recul global & centrage */
  padding-inline: 180px;
  box-sizing: border-box;
}

/* Conteneurs internes centrés + largeur max */
.ebp-hero, .ebp-packs, .ebp-pricebox, .ebp-form{
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: border-box;
}

/* ---- Hero ---- */
.ebp-hero{ margin-bottom:3rem; }
.ebp-title{
  margin:0 0 .25rem; font-weight:900; letter-spacing:.2px;
  color:var(--ink); font-size:2rem; line-height:1.15; text-align:center;
}
.ebp-title::after{
  content:""; display:block; width:72px; height:4px; margin:.60rem auto 0;
  border-radius:999px; background:linear-gradient(90deg,var(--brand),var(--brand-2));
  box-shadow:0 8px 22px rgba(46,139,192,.35);
}
.ebp-subtitle{ margin:.45rem 0 1.1rem; color:var(--muted); font-size:1.05rem; text-align:center; }

/* ---- Packs ---- */
.ebp-packs{ 
    margin: 1.1rem 0 1.4rem; 
    background:linear-gradient(180deg,#fbfdff,#f7f9fc); 
    border-radius:12px; 
    padding-block:12px; }
.ebp-packs-title{ 
    margin:0 0 14px; 
    font-weight:800; 
    letter-spacing:.2px; 
    font-size:1.7rem; 
    color:#0f172a; 
    text-align:center; }

.ebp-packs-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.ebp-pack{ position:relative; display:block; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ebp-pack-media{ aspect-ratio:16/10; background:linear-gradient(180deg,#eef6ff,#e6eef8); overflow:hidden; }
.ebp-pack-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .35s ease; }
.ebp-pack:hover .ebp-pack-media img{ transform:scale(1.06); }

.ebp-pack-body{
  background:#fff; border:1px solid var(--border); border-top:0; border-radius:0 0 16px 16px;
  box-shadow:0 10px 24px rgba(16,24,40,.06), 0 1px 0 rgba(255,255,255,.6) inset;
  padding:1rem 1rem 1.1rem; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ebp-pack:hover .ebp-pack-body{ transform:translateY(-2px); border-color:rgba(46,139,192,.28); box-shadow:0 16px 34px rgba(16,24,40,.12), 0 0 0 3px var(--ring); }

.ebp-pack-name{ margin:.2rem 0 .55rem; font-size:1.25rem; font-weight:900; color:#0f172a; }
.ebp-pack-points{ margin:0 0 .8rem; padding:0; list-style:none; color:var(--muted); line-height:1.4; }
.ebp-pack-points li{ position:relative; padding-left:24px; margin-bottom:.4rem; }
.ebp-pack-points li::before{ content:"✓"; position:absolute; left:0; top:0; line-height:1; color:var(--brand); font-weight:900; }
.ebp-pack-price{ display:flex; align-items:baseline; gap:.55rem; }
.ebp-amount{ font-size:1.4rem; font-weight:900; background:linear-gradient(90deg,#0f172a,#334155); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ebp-note{ font-size:.95rem; color:var(--muted); }

/* Badge sur le pack 9 (via HTML .ebp-badge) */
.ebp-pack .ebp-badge{
  position:absolute; top:.6rem; right:.6rem; z-index:2;
  font-size:.72rem; font-weight:800; letter-spacing:.2px; color:#0b1620;
  background:linear-gradient(90deg,#9be3ff,#d5f0ff);
  padding:.35rem .6rem; border-radius:999px; box-shadow:0 8px 20px rgba(73,166,219,.35);
}

/* Boutons (auto largeur sur desktop) */
.ebp-btn{
  display:inline-block; margin-top:.8rem; padding:.7rem .95rem; border-radius:12px; font-weight:900;
  text-decoration:none; border:0; cursor:pointer; transition:transform .12s ease, box-shadow .18s ease;
}
.ebp-btn--primary{ background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#06121b; box-shadow:0 10px 26px rgba(46,139,192,.35); }
.ebp-btn--primary:hover{ transform:translateY(-1px); }
.ebp-btn--primary:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; box-shadow:0 0 0 4px rgba(46,139,192,.16); }
.ebp-btn--whatsapp{ border:1px solid rgba(22,163,74,.32); background:rgba(22,163,74,.06); color:#086d3b; font-weight:800; }

/* ---- Price box ---- */
.ebp-pricebox{ margin:16px 0 18px; background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px 16px; box-shadow:0 8px 22px rgba(16,24,40,.06); }
.ebp-pricebox[hidden]{ display:none !important; }
.ebp-price-row{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.ebp-price-label{ color:#334155; font-weight:700; }
.ebp-price-value{ font-size:1.2rem; font-weight:900; color:#0b1324; }
.ebp-price-badge{ display:inline-block; padding:.28rem .55rem; border-radius:999px; background:rgba(46,139,192,.1); color:#0b2a3a; font-weight:700; font-size:.9rem; }
.ebp-price-savings{ color:#067647; font-weight:700; }

/* ---- Formulaire (12 colonnes) ---- */
.ebp-form{
  margin-top:14px; background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:16px; box-shadow:0 12px 26px rgba(16,24,40,.06);
  display:grid; grid-template-columns:repeat(12,1fr); gap:1rem;
}
.ebp-label{ font-weight:700; color:#1f2937; margin-bottom:.25rem; display:block; }
.ebp-input, .ebp-select, .ebp-textarea{
  width:100%; border:1px solid rgba(16,24,40,.16); border-radius:12px; padding:.78rem .9rem;
  background:#fff; color:#0f172a; font-weight:600; transition:border-color .15s, box-shadow .15s, background .15s;
}
.ebp-input::placeholder, .ebp-textarea::placeholder{ color:#9aa7b4; font-weight:500; }
.ebp-input:focus, .ebp-select:focus, .ebp-textarea:focus{ outline:none; border-color:rgba(46,139,192,.55); box-shadow:0 0 0 4px rgba(46,139,192,.16); background:#fbfeff; }
.ebp-error{ margin-top:.25rem; min-height:1.1em; font-size:.9rem; color:var(--err); font-weight:700; }

/* Placement des champs (2 colonnes) */
.ebp-form .ebp-field:nth-of-type(1){ grid-column:1 / span 6; }  /* Nom        */
.ebp-form .ebp-field:nth-of-type(2){ grid-column:7 / span 6; }  /* Téléphone  */
.ebp-form .ebp-field:nth-of-type(3){ grid-column:1 / span 6; }  /* Quartier   */
.ebp-form .ebp-field:nth-of-type(4){ grid-column:7 / span 6; }  /* Cotons     */
.ebp-field--full{ grid-column:1 / -1; }                         /* Remarques  */

.ebp-actions{ grid-template-columns:repeat(2,1fr); display:grid; gap:.9rem; grid-column:1 / -1; }

/* surlignage doux en cas d'erreur sur le select */
.ebp-select--invalid{
  border-color:#b42318 !important;
  box-shadow:0 0 0 4px rgba(180,35,24,.16) !important;
}