/* ═══════════════════════════════════════════════════════════
   🎟️ JOURNÉE HOMMAGE — RÉSERVATION
   Même langage visuel que les autres pages du site
   (cartes à bordure dégradée, titres en dégradé, cta-btn).
   Fichier indépendant — n'ajoute rien à styles.css.
   ═══════════════════════════════════════════════════════════ */

:root{
  --jh-gold:#ffd700;
  --jh-gold-2:#ffed4e;
  --jh-red:#dc143c;
  --jh-red-2:#8b0000;
}

/* ---------- structure générale ---------- */
.jh-section{ padding:70px 0; }
.jh-section-header{ text-align:center; margin-bottom:50px; }
.jh-section-header h2{
  font-size:2.3rem;
  background:linear-gradient(135deg, var(--jh-red), var(--jh-gold));
  background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  font-weight:800; margin-bottom:16px;
  filter:drop-shadow(0 2px 4px rgba(220,20,60,.3));
  text-transform:uppercase; letter-spacing:.5px;
}
.jh-section-header p{ color:#cccccc; font-size:1.05rem; max-width:600px; margin:0 auto; }

.jh-note{
  display:inline-flex; align-items:flex-start; gap:10px; text-align:left;
  max-width:560px; margin:22px auto 0; padding:14px 18px;
  background:rgba(255,215,0,.07); border:1px solid rgba(255,215,0,.25); border-radius:10px;
  color:#e6c068; font-size:13px; line-height:1.6;
}
.jh-note i{ color:var(--jh-gold); margin-top:2px; flex-shrink:0; }
.jh-note b{ color:#fff; }

.jh-subhead{
  font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--jh-gold); margin:0 0 16px; font-weight:700; text-align:center;
}

/* ---------- carte à bordure dégradée (même recette que .advantage-card) ---------- */
.jh-card{
  background:rgba(26,26,26,0.8);
  border:2px solid transparent;
  background-image:
    linear-gradient(rgba(26,26,26,0.8), rgba(26,26,26,0.8)),
    linear-gradient(135deg, rgba(220,20,60,0.25), rgba(255,215,0,0.15));
  background-origin:border-box;
  background-clip:padding-box, border-box;
  border-radius:20px;
  transition:all .3s ease;
}

/* ---------- carte affiche (façon membership-card) ---------- */
.jh-flyer-card{
  max-width:420px; margin:0 auto 10px; padding:30px;
  text-align:center; position:relative; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.8), 0 0 40px rgba(220,20,60,.15);
}
.jh-flyer-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 16px; border-radius:999px;
  background:rgba(220,20,60,.15); border:1px solid rgba(220,20,60,.5);
  color:#ff5470; font-size:11px; font-weight:800; letter-spacing:1.5px;
  text-transform:uppercase; margin-bottom:18px;
}
.jh-flyer-badge i{ color:var(--jh-gold); }
.jh-flyer-meta{ color:#e6c068; font-size:14px; margin-bottom:22px; }
.jh-flyer-meta i{ color:var(--jh-gold); margin-right:6px; }
.jh-flyer-meta span + i{ margin-left:16px; }

.jh-flyer-btn{
  position:relative; display:block; width:100%; max-width:280px; margin:0 auto;
  border:none; padding:0; background:none; cursor:zoom-in; border-radius:14px; overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.55); transition:transform .25s ease, box-shadow .25s ease;
}
.jh-flyer-btn:hover, .jh-flyer-btn:focus-visible{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(255,215,0,.2); }
.jh-flyer-btn img{ width:100%; border-radius:14px; }
.jh-flyer-hint{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:7px; padding:7px 14px;
  background:rgba(0,0,0,.72); border:1px solid rgba(255,215,0,.35); border-radius:999px;
  color:var(--jh-gold); font-size:11px; font-weight:700;
}

.jh-program-strip{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:26px; }
.jh-program-pill{
  background:rgba(0,0,0,.4); border:1px solid rgba(255,215,0,.15); border-radius:12px;
  padding:13px 18px; font-size:13px; color:#e6c068; max-width:280px; text-align:left;
}
.jh-program-pill b{ color:#fff; display:block; font-size:13.5px; margin-bottom:3px; }

/* ---------- sélecteur de menu (plat + boisson) ---------- */
.jh-configurator{ padding:36px 32px; max-width:900px; margin:0 auto; }

.jh-step-block{ margin-bottom:6px; }
.jh-step-label{
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
  font-size:15px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.3px;
}
.jh-step-num{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--jh-red), var(--jh-gold));
  color:#0a0a0a; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:900;
}

.jh-step-divider{
  display:flex; align-items:center; justify-content:center; margin:26px 0;
  color:var(--jh-gold); font-size:14px; opacity:.6;
}
.jh-step-divider::before, .jh-step-divider::after{
  content:''; flex:1; height:1px; background:rgba(255,215,0,.15);
}
.jh-step-divider i{ margin:0 16px; }

.jh-choice-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.jh-choice-grid-drinks{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); max-width:480px; margin:0 auto; }

.jh-choice-card{
  cursor:pointer; padding:24px 18px; text-align:center; position:relative;
  border-radius:16px;
}
.jh-choice-card:hover{ transform:translateY(-5px); }
.jh-choice-card.selected{
  background-image:
    linear-gradient(rgba(26,26,26,0.9), rgba(26,26,26,0.9)),
    linear-gradient(135deg, var(--jh-red), var(--jh-gold));
  box-shadow:0 12px 30px rgba(255,215,0,.2);
  transform:translateY(-3px);
}
.jh-choice-tag{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg, var(--jh-red), var(--jh-gold));
  color:#0a0a0a; font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 12px; border-radius:999px; white-space:nowrap; box-shadow:0 4px 10px rgba(0,0,0,.4);
}
.jh-choice-icon{
  width:60px; height:60px; margin:0 auto 14px; border-radius:16px;
  display:flex; align-items:center; justify-content:center; font-size:24px; color:#0a0a0a;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.jh-choice-card h4{ font-size:15.5px; color:#fff; font-weight:700; margin-bottom:6px; }
.jh-choice-card p{ font-size:12px; color:#999; line-height:1.4; }
.jh-choice-check{
  position:absolute; top:12px; right:12px; width:24px; height:24px; border-radius:50%;
  background:linear-gradient(135deg, var(--jh-red), var(--jh-gold));
  color:#0a0a0a; font-size:12px; display:none; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
}
.jh-choice-card.selected .jh-choice-check{ display:flex; }

/* ---------- aperçu de la sélection ---------- */
.jh-preview{ min-height:110px; display:flex; align-items:center; justify-content:center; }
.jh-preview-empty{
  display:flex; align-items:center; gap:12px; color:#777; font-size:14px; text-align:center;
  padding:20px; justify-content:center;
}
.jh-preview-empty i{ font-size:22px; color:rgba(255,215,0,.35); }

.jh-preview-filled{ width:100%; }
.jh-preview-combo{
  display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; margin-bottom:22px;
}
.jh-preview-item{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.jh-preview-item span{ font-size:13px; font-weight:700; color:#fff; max-width:130px; }
.jh-preview-icon{
  width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#0a0a0a; box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.jh-preview-plus{ color:var(--jh-gold); font-size:16px; opacity:.7; }

.jh-preview-guest{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:420px; margin:0 auto 20px;
}
.jh-preview-guest .jh-field{ margin-bottom:0; text-align:left; }
@media (max-width:480px){ .jh-preview-guest{ grid-template-columns:1fr; } }

.jh-preview-actions{
  display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
}
.jh-btn-reset{
  background:none; border:none; color:#999; font-size:12.5px; text-decoration:underline;
  cursor:pointer; padding:8px 4px; font-family:'Inter',sans-serif;
}
.jh-btn-reset:hover{ color:var(--jh-gold); }

/* ---------- stepper & panier ---------- */
.jh-stepper button{ width:38px; height:42px; background:rgba(255,255,255,.05); color:#fff; border:none; font-size:19px; cursor:pointer; }
.jh-stepper button:hover{ background:var(--jh-red); }
.jh-stepper span{ width:42px; text-align:center; font-weight:700; font-size:15px; color:#fff; }

/* ---------- panier ---------- */
.jh-cart{ max-width:640px; margin:0 auto; padding:26px 28px; }
.jh-entry-only{ max-width:480px; margin:30px auto 0; padding:26px 28px; text-align:center; }
.jh-cart-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.jh-cart-head b{ font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:#fff; }
.jh-cart-head span{ font-size:12.5px; color:var(--jh-gold); }
.jh-cart-line{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px dashed rgba(255,255,255,.12); font-size:14px;
}
.jh-cart-line .jh-l-name{ color:#fff; font-weight:600; }
.jh-cart-line .jh-l-sub{ color:#999; font-size:12px; }
.jh-cart-line .jh-l-amt{ color:var(--jh-gold); font-weight:800; }
.jh-cart-remove{
  background:none; border:none; color:#ff6b6b; cursor:pointer; font-size:16px; padding:0 4px;
}
.jh-cart-empty{ color:#777; font-size:13.5px; text-align:center; padding:16px 0; }
.jh-cart-total{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-top:18px; margin-top:8px; border-top:2px solid rgba(255,255,255,.15);
}
.jh-cart-total b{ font-size:14px; letter-spacing:.05em; text-transform:uppercase; color:#fff; }
.jh-cart-total .jh-amt{ font-size:28px; font-weight:900; color:var(--jh-gold); }

/* ---------- boutons ---------- */
.jh-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:linear-gradient(135deg, var(--jh-gold), var(--jh-gold-2));
  color:#000000; padding:16px 34px; border-radius:30px; border:none; cursor:pointer;
  text-decoration:none; font-weight:800; font-size:1rem; text-transform:uppercase; letter-spacing:.6px;
  box-shadow:0 6px 20px rgba(255,215,0,.4), 0 3px 10px rgba(0,0,0,.3);
  transition:all .3s ease;
}
.jh-btn:hover{ transform:translateY(-3px); box-shadow:0 10px 30px rgba(255,215,0,.55), 0 5px 15px rgba(0,0,0,.4); }
.jh-btn:disabled{ background:#4a4426; color:#8a8472; box-shadow:none; cursor:not-allowed; transform:none; }
.jh-btn-block{ width:100%; }
.jh-btn-outline{
  background:transparent; color:var(--jh-gold); border:2px solid rgba(255,215,0,.4); box-shadow:none;
}
.jh-btn-outline:hover{ border-color:var(--jh-gold); box-shadow:0 6px 20px rgba(255,215,0,.2); }

/* ---------- formulaire & paiement ---------- */
.jh-panel{ max-width:600px; margin:0 auto; padding:34px; }
.jh-field{ margin-bottom:16px; }
.jh-field label{
  display:block; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:#e6c068; margin-bottom:6px; font-weight:700;
}
.jh-field input{
  width:100%; padding:13px 14px; background:rgba(0,0,0,.4); border:1px solid rgba(255,215,0,.2);
  border-radius:8px; color:#fff; font-size:15px; font-family:'Inter',sans-serif;
}
.jh-field input:focus{ outline:none; border-color:var(--jh-gold); box-shadow:0 0 0 3px rgba(255,215,0,.12); }
.jh-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:480px){ .jh-field-row{ grid-template-columns:1fr; } }

/* ---------- don libre ---------- */
.jh-donation{
  margin:24px 0; padding:20px; border-radius:14px;
  background:rgba(220,20,60,.06); border:1px solid rgba(220,20,60,.2);
}
.jh-donation-text{ color:#bbb; font-size:13px; margin:0 0 16px; text-align:left; }
.jh-donation-options{ display:flex; flex-wrap:wrap; gap:10px; }
.jh-donation-btn{
  flex:1 1 auto; min-width:90px; padding:12px 10px; border-radius:10px;
  border:1.5px solid rgba(255,215,0,.2); background:rgba(0,0,0,.3); color:#ccc;
  font-family:'Inter',sans-serif; font-weight:700; font-size:13px; cursor:pointer;
  transition:all .2s ease;
}
.jh-donation-btn:hover{ border-color:rgba(255,215,0,.5); color:#fff; }
.jh-donation-btn.active{
  border-color:var(--jh-gold); color:#0a0a0a;
  background:linear-gradient(135deg, var(--jh-gold), var(--jh-gold-2));
}
.jh-donation-custom-wrap{ margin-top:14px; }
.jh-donation-custom-wrap input{
  width:100%; padding:13px 14px; background:rgba(0,0,0,.4); border:1px solid rgba(255,215,0,.2);
  border-radius:8px; color:#fff; font-size:15px; font-family:'Inter',sans-serif;
}
.jh-donation-custom-wrap input:focus{ outline:none; border-color:var(--jh-gold); box-shadow:0 0 0 3px rgba(255,215,0,.12); }

/* ---------- adhésion association ---------- */
.jh-membership{ margin-top:16px; }
.jh-membership-toggle-row{ display:flex; gap:10px; flex-wrap:wrap; }
.jh-membership-btn{
  flex:1 1 auto; min-width:140px; padding:14px 16px; border-radius:10px;
  border:1.5px solid rgba(255,215,0,.2); background:rgba(0,0,0,.3); color:#ccc;
  font-family:'Inter',sans-serif; font-weight:700; font-size:13.5px; cursor:pointer;
  transition:all .2s ease;
}
.jh-membership-btn:hover{ border-color:rgba(255,215,0,.5); color:#fff; }
.jh-membership-btn.active{
  border-color:var(--jh-gold); color:#0a0a0a;
  background:linear-gradient(135deg, var(--jh-gold), var(--jh-gold-2));
}

.jh-pay-tabs{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:26px 0 20px; }
.jh-pay-tab{
  border:1.5px solid rgba(255,215,0,.15); background:rgba(0,0,0,.3); border-radius:10px;
  padding:14px 8px; text-align:center; cursor:pointer; color:#999;
  font-size:12.5px; font-weight:700; transition:all .2s ease;
}
.jh-pay-tab i{ display:block; margin-bottom:6px; font-size:16px; }
.jh-pay-tab.active{
  border-color:var(--jh-gold); color:#fff;
  background:linear-gradient(135deg, rgba(220,20,60,.12), rgba(255,215,0,.1));
}
.jh-pay-panel{ display:none; }
.jh-pay-panel.active{ display:block; }
#card-element{ background:rgba(0,0,0,.4); border:1px solid rgba(255,215,0,.2); border-radius:8px; padding:14px; }
#card-errors{ color:#ff8686; font-size:12.5px; margin-top:8px; min-height:16px; }
.jh-virement-box{
  background:rgba(220,20,60,.08); border:1px solid rgba(220,20,60,.35); border-radius:10px;
  padding:16px; font-size:13.5px; line-height:1.7; color:#fff;
}
.jh-virement-box b{ color:var(--jh-gold); }
#paypal-button-container{ min-height:45px; }

.jh-msg{ border-radius:10px; padding:14px 16px; font-size:13.5px; margin-bottom:16px; display:none; }
.jh-msg.error{ background:rgba(220,20,60,.15); border:1px solid var(--jh-red); color:#ffb3b3; display:block; }
.jh-msg.info{ background:rgba(255,215,0,.12); border:1px solid var(--jh-gold); color:#e6c068; display:block; }

/* ---------- confirmation ---------- */
.jh-confirm{ display:none; text-align:center; }
.jh-confirm .jh-check{ font-size:56px; color:var(--jh-gold); }
.jh-confirm-ref{
  display:inline-block; margin:18px 0; background:rgba(255,215,0,.1); border:1px solid var(--jh-gold);
  color:#fff; padding:14px 26px; border-radius:10px; font-size:22px; letter-spacing:.1em; font-weight:800;
}

/* ---------- lightbox ---------- */
.jh-lightbox{
  display:none; position:fixed; inset:0; z-index:10000; align-items:center; justify-content:center;
  padding:28px; background:rgba(0,0,0,.92); backdrop-filter:blur(6px); opacity:0; transition:opacity .25s ease;
}
.jh-lightbox.active{ display:flex; opacity:1; }
.jh-lightbox img{
  max-width:min(92vw,620px); max-height:88vh; width:auto; border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.7); animation:jhLightboxIn .25s ease;
}
@keyframes jhLightboxIn{ from{ transform:scale(.94); opacity:0; } to{ transform:scale(1); opacity:1; } }
.jh-lightbox-close{
  position:absolute; top:22px; right:22px; width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,215,0,.35); border-radius:50%; background:rgba(0,0,0,.6); color:var(--jh-gold);
  font-size:18px; cursor:pointer; transition:background .2s ease, transform .2s ease;
}
.jh-lightbox-close:hover{ background:rgba(255,215,0,.15); transform:rotate(90deg); }

@media (max-width:480px){
  .jh-lightbox{ padding:16px; }
  .jh-lightbox-close{ top:14px; right:14px; width:38px; height:38px; }
  .jh-panel, .jh-cart{ padding:24px 20px; }
  .jh-configurator{ padding:26px 18px; }
  .jh-choice-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
  .jh-choice-card{ padding:18px 12px; }
  .jh-preview-combo{ gap:14px; }
}