/* ============================================================
   VPSA × Next Player — formulaire & paiement (landing pages)
   ============================================================ */
.enrol-shell{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); }
.enrol-head{ padding:clamp(24px,3vw,36px) clamp(24px,3vw,40px) 0; }
.enrol-progress{ height:5px; background:var(--line-soft); border-radius:99px; overflow:hidden; margin-top:1.4rem; }
.enrol-progress i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold-2),var(--gold)); transition:width .4s ease; }
.step-dots{ display:flex; gap:.5rem; margin-top:1.1rem; flex-wrap:wrap; }
.step-dots .sd{ display:flex; align-items:center; gap:.5em; font-family:var(--display); text-transform:uppercase; letter-spacing:.08em;
  font-size:.74rem; color:var(--faint); }
.step-dots .sd .n{ width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; font-size:.72rem; transition:.2s; }
.step-dots .sd.active{ color:var(--text); }
.step-dots .sd.active .n{ border-color:var(--gold); color:var(--gold); }
.step-dots .sd.done .n{ background:var(--gold); border-color:var(--gold); color:oklch(0.99 0.01 240); }

.enrol-body{ padding:clamp(24px,3vw,40px); }
.fstep h3{ font-size:1.5rem; margin-bottom:.4rem; }
.fstep > p.muted{ color:var(--muted); margin-bottom:1.6rem; font-size:.95rem; }

.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.2rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:.82rem; color:var(--muted); font-weight:500; letter-spacing:.01em; }
.field label .req{ color:var(--gold); }
.field input, .field select{
  background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:.8em .9em; color:var(--text);
  font:inherit; font-size:.98rem; transition:border-color .18s, box-shadow .18s; width:100%;
}
.field input::placeholder{ color:var(--faint); }
.field input:focus, .field select:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .9em center; padding-right:2.4em; }

.minor-toggle{ display:flex; align-items:center; gap:.8rem; padding:1rem 1.1rem; border:1px dashed var(--line); border-radius:12px; margin:1.4rem 0; background:var(--bg-2); }
.minor-toggle input{ width:20px; height:20px; accent-color:var(--gold); }
.minor-toggle label{ font-size:.95rem; color:var(--text); cursor:pointer; }
[data-minor-block]{ border-top:1px solid var(--line-soft); margin-top:1.4rem; padding-top:1.4rem; }
[data-minor-block] .sub-h{ font-family:var(--display); text-transform:uppercase; letter-spacing:.1em; font-size:.82rem; color:var(--gold); margin-bottom:1rem; }

.fstep-actions{ display:flex; justify-content:space-between; gap:1rem; margin-top:2rem; }
.fstep-actions .btn-ghost.solo{ margin-left:auto; }

/* recap & payment */
.recap{ display:grid; gap:.7rem; background:var(--bg-2); border:1px solid var(--line-soft); border-radius:14px; padding:1.3rem 1.4rem; margin-bottom:1.6rem; }
.recap .rr{ display:flex; justify-content:space-between; gap:1rem; font-size:.95rem; }
.recap .rr span{ color:var(--muted); }
.recap .rr b{ font-weight:600; text-align:right; }
.price-row{ display:flex; justify-content:space-between; align-items:center; padding-top:1rem; margin-top:.4rem; border-top:1px solid var(--line); }
.price-row .tot{ font-family:var(--display); font-size:1.7rem; font-weight:700; color:var(--gold); }

.pay-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.2rem; margin-top:.4rem; }
.pay-badges{ display:flex; gap:.5rem; align-items:center; color:var(--faint); font-size:.78rem; margin-top:1.2rem; }
.pay-badges .lock{ display:inline-flex; align-items:center; gap:.4em; }
.pay-badges svg{ width:14px; height:14px; }
.cardbrands{ display:flex; gap:.4rem; margin-left:auto; }
.cardbrands span{ font-family:var(--display); font-size:.62rem; letter-spacing:.06em; border:1px solid var(--line); border-radius:5px; padding:.25em .5em; color:var(--muted); }

.spin{ width:15px; height:15px; border:2px solid oklch(1 0 0 / .35); border-top-color:#fff; border-radius:50%; display:inline-block; animation:spin .7s linear infinite; vertical-align:-2px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.success-panel{ text-align:center; padding:clamp(36px,5vw,64px); }
.success-panel .check{ width:78px; height:78px; border-radius:50%; background:var(--green); display:grid; place-items:center; margin:0 auto 1.6rem; }
.success-panel .check svg{ width:38px; height:38px; stroke:#0a1f12; stroke-width:3; }
.success-panel h3{ font-size:2rem; }
.success-panel p{ color:var(--muted); max-width:44ch; margin:.8rem auto 0; }
.success-panel .ref{ font-family:ui-monospace,monospace; margin-top:1.4rem; display:inline-block; border:1px dashed var(--line); border-radius:8px; padding:.6em 1em; color:var(--gold); letter-spacing:.06em; }

@media (max-width:680px){
  .field-grid{ grid-template-columns:1fr; }
  .pay-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   Packs (choix de catégorie) + infos pratiques
   ============================================================ */
.gender-toggle{ display:inline-flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:99px; background:var(--bg-2); margin:0 auto clamp(18px,2.4vw,26px); }
.packs-grid + .pack-info .gender-toggle, .sec-head + .gender-toggle{ }
[data-gender-toggle]{ display:flex; width:max-content; margin-left:auto; margin-right:auto; }
.gender-toggle.sm{ display:flex; width:100%; max-width:300px; margin:0; }
.gt-btn{ flex:1; padding:.55em 1.4em; border:0; border-radius:99px; background:transparent; color:var(--muted);
  font-family:var(--display); text-transform:uppercase; letter-spacing:.06em; font-size:.82rem; cursor:pointer; transition:.18s; white-space:nowrap; }
.gt-btn:hover{ color:var(--text); }
.gt-btn.is-active{ background:linear-gradient(180deg,var(--gold),var(--gold-2)); color:oklch(0.99 0.01 240); box-shadow:var(--shadow-gold); }

.packs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,18px); }
.pack-card{
  display:flex; flex-direction:column; align-items:center; gap:.3rem; text-align:center;
  padding:clamp(16px,2.2vw,26px) clamp(8px,1.2vw,18px);
  border:1.5px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  color:var(--text); cursor:pointer; transition:transform .2s, border-color .2s, background .2s;
}
.pack-card:hover{ transform:translateY(-3px); border-color:oklch(0.6 0.13 235 / .6); }
.pack-card.is-active{ border-color:var(--gold); background:radial-gradient(120% 120% at 50% 0%, var(--surface-2), var(--surface)); box-shadow:0 0 0 3px var(--gold-soft); }
.pack-cat{ font-family:var(--display); font-weight:700; font-size:clamp(1.7rem,6vw,2.8rem); line-height:1; letter-spacing:-.01em; }
.pack-card.is-active .pack-cat{ color:var(--gold); }
.pack-years{ font-size:clamp(.62rem,1.6vw,.78rem); color:var(--faint); text-transform:uppercase; letter-spacing:.08em; }
.pack-dates{ font-family:var(--display); font-size:clamp(.72rem,1.8vw,.92rem); text-transform:uppercase; letter-spacing:.04em; margin-top:.2rem; }
.pack-go{ font-size:.7rem; color:var(--gold); text-transform:uppercase; letter-spacing:.1em; margin-top:.5rem; opacity:.85; }

.pack-info{ margin-top:clamp(22px,3vw,34px); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); padding:clamp(22px,3vw,40px); }
.pack-info-head{ display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.pack-cta-group{ display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; }
.pack-price{ font-family:var(--display); font-weight:700; font-size:1.5rem; color:var(--gold); line-height:1; }
.pack-price small{ display:block; font-weight:400; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-top:.25rem; }
.info-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(14px,2vw,22px); }
.info-block{ border:1px solid var(--line-soft); border-radius:var(--r); padding:18px 20px; background:var(--bg-2); }
.info-block .ib-h{ font-family:var(--display); text-transform:uppercase; letter-spacing:.06em; font-size:.86rem; color:var(--gold); margin-bottom:.6rem; }
.info-block p{ font-size:.94rem; line-height:1.55; }
.info-limit{ margin-top:clamp(16px,2vw,22px); border:1px dashed var(--line); border-radius:var(--r); padding:16px 20px; font-size:.92rem; color:var(--text); background:var(--bg-2); }
.info-more{ margin-top:.85rem; display:inline-flex; align-items:center; gap:.4rem; background:none; border:0; padding:0;
  color:var(--gold); font-family:var(--display); text-transform:uppercase; letter-spacing:.06em; font-size:.8rem; cursor:pointer; }
.info-more svg{ width:15px; height:15px; transition:transform .2s; }
.info-more:hover svg{ transform:translateX(3px); }

/* Modal experts (cartes swipeables) */
.experts-modal{ width:min(440px,100%); position:relative; }
.modal-close{ position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--text); display:grid; place-items:center; cursor:pointer; z-index:2; }
.modal-close:hover{ border-color:var(--gold); color:var(--gold); }
.modal-close svg{ width:18px; height:18px; }
.experts-track{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-top:.5rem; }
.experts-track::-webkit-scrollbar{ display:none; }
.expert-slide{ flex:0 0 100%; scroll-snap-align:center; display:flex; flex-direction:column; align-items:center; gap:1.2rem; }
.expert-meta{ text-align:center; max-width:34ch; }
.expert-meta h4{ font-family:var(--display); font-size:1.2rem; text-transform:uppercase; }
.expert-meta p{ color:var(--muted); font-size:.92rem; margin-top:.4rem; }
.experts-dots{ display:flex; justify-content:center; gap:.5rem; margin-top:1.2rem; }
.experts-dots .ed{ width:9px; height:9px; border-radius:50%; background:var(--line); transition:.2s; }
.experts-dots .ed.active{ background:var(--gold); transform:scale(1.15); }

/* Boutons "dossier exemple" / "experts" dans les blocs infos (restent dans leur carte) */
.btn.dossier-btn{ display:flex; width:100%; margin-top:1rem; font-size:.8rem; padding:.8em 1.1em; white-space:normal; text-align:center; line-height:1.2; }
@keyframes ctaShake{
  0%,100%{ transform:translateX(0) rotate(0); }
  12%{ transform:translateX(-3px) rotate(-1.2deg); }
  24%{ transform:translateX(3px) rotate(1.2deg); }
  36%{ transform:translateX(-3px) rotate(-1deg); }
  48%{ transform:translateX(3px) rotate(1deg); }
  60%{ transform:translateX(-2px); }
  72%{ transform:translateX(2px); }
}
.cta-vibe.in-view{ animation:ctaShake .6s ease-in-out 2; }
@media (prefers-reduced-motion:reduce){ .cta-vibe.in-view{ animation:none; } }

/* Modal dossier joueur (exemple) */
.dossier-modal{ width:min(700px,100%); position:relative; text-align:left; }
.dossier-hd{ display:flex; gap:clamp(16px,3vw,28px); align-items:center; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:1.4rem; }
.dossier-id{ flex:1; min-width:180px; }
.dossier-id .dtag{ display:inline-block; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:oklch(0.78 0.13 70); border:1px solid oklch(0.7 0.13 70); border-radius:99px; padding:.2em .7em; margin-bottom:.7rem; }
.dossier-id h3{ font-size:clamp(1.5rem,4vw,2.1rem); line-height:1; }
.dossier-id .drole{ color:var(--gold); font-family:var(--display); text-transform:uppercase; letter-spacing:.1em; font-size:.82rem; margin:.4rem 0 .9rem; }
.dossier-bio{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem .9rem; font-size:.86rem; }
.dossier-bio span{ color:var(--faint); }
.dossier-bio b{ color:var(--text); }
.dr-section{ margin-top:1.5rem; }
.dr-h{ font-family:var(--display); text-transform:uppercase; letter-spacing:.06em; font-size:.86rem; color:var(--gold); margin-bottom:.9rem; display:flex; align-items:center; gap:.5rem; }
.dr-h small{ color:var(--faint); font-weight:400; letter-spacing:.04em; text-transform:none; font-family:var(--body); }
.dr-row{ margin-bottom:.8rem; }
.dr-top{ display:flex; justify-content:space-between; align-items:baseline; font-size:.86rem; margin-bottom:.3rem; }
.dr-top span{ color:var(--muted); }
.dr-top b{ color:var(--text); font-family:var(--display); }
.dr-top .avg-v{ color:var(--faint); font-family:var(--body); font-size:.78rem; }
.dr-track{ height:7px; border-radius:99px; background:var(--line); overflow:visible; position:relative; }
.dr-track i{ display:block; height:100%; background:linear-gradient(90deg,var(--gold-2),var(--gold)); border-radius:99px; }
.dr-track .avg{ position:absolute; top:-3px; width:2px; height:13px; background:var(--faint); border-radius:2px; }
.dossier-analyse .ablock{ border:1px solid var(--line-soft); border-radius:12px; padding:14px 16px; background:var(--bg-2); margin-bottom:.7rem; }
.dossier-analyse .ablock b{ display:block; font-family:var(--display); text-transform:uppercase; letter-spacing:.04em; font-size:.82rem; color:var(--text); margin-bottom:.3rem; }
.dossier-analyse .ablock p{ color:var(--muted); font-size:.9rem; line-height:1.55; margin:0; }
.dossier-foot{ margin-top:1.4rem; border:1px dashed var(--line); border-radius:12px; padding:14px 16px; font-size:.9rem; color:var(--text); background:var(--bg-2); }
.dossier-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.6rem; }
@media (max-width:540px){ .dossier-grid2{ grid-template-columns:1fr; } }

/* ============================================================
   Sélecteurs d'options (catégorie / date / session / poste)
   ============================================================ */
.choice-chips{ display:flex; gap:.6rem; flex-wrap:wrap; }
.chip{ padding:.55em 1.1em; border:1.5px solid var(--line); border-radius:99px; background:var(--bg); color:var(--muted);
  font-family:var(--display); text-transform:uppercase; letter-spacing:.05em; font-size:.82rem; cursor:pointer; transition:.18s; }
.chip:hover{ border-color:var(--gold); color:var(--text); }
.chip.is-active{ border-color:var(--gold); background:var(--gold-soft); color:var(--text); }

.opt-cards{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.opt-cards.opt-2{ grid-template-columns:1fr 1fr; }
.opt-card{ position:relative; display:flex; flex-direction:column; gap:.25rem; padding:.95em 1em;
  border:1.5px solid var(--line); border-radius:12px; background:var(--bg); cursor:pointer; transition:.18s; }
.opt-card:hover{ border-color:var(--gold); }
.opt-card input{ position:absolute; opacity:0; pointer-events:none; }
.opt-card .oc-title{ font-family:var(--display); text-transform:uppercase; letter-spacing:.03em; font-size:.95rem; color:var(--text); }
.opt-card .oc-sub{ font-size:.8rem; color:var(--muted); }
.opt-card:has(input:checked){ border-color:var(--gold); background:var(--gold-soft); box-shadow:0 0 0 2px var(--gold-soft); }
.opt-card.is-full{ opacity:.45; cursor:not-allowed; }
.opt-card.is-full:hover{ border-color:var(--line); }
.opt-card .oc-tag{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); }
.opt-card.is-full .oc-tag{ color:var(--faint); }

/* ============================================================
   Paiement par virement
   ============================================================ */
.bank-box{ border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2); padding:clamp(18px,2.4vw,26px); margin:1.4rem 0; }
.bank-h{ display:flex; align-items:center; gap:.6rem; font-family:var(--display); text-transform:uppercase; letter-spacing:.05em; font-size:.95rem; color:var(--text); }
.bank-h svg{ width:22px; height:22px; color:var(--gold); }
.bank-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.bank-grid .bk{ display:flex; flex-direction:column; gap:.2rem; border:1px solid var(--line-soft); border-radius:10px; padding:.7em .9em; background:var(--surface); }
.bank-grid .bk span{ font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); }
.bank-grid .bk b{ font-size:.95rem; word-break:break-word; }
.form-error{ color:oklch(0.7 0.17 25); font-size:.9rem; margin-top:.8rem; }

/* Confirmation / commande reçue */
.confirm-box{ max-width:520px; margin:1.6rem auto 0; text-align:left; border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2); padding:.4rem 1.2rem; }
.confirm-box .cb-row{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; padding:.85rem 0; border-bottom:1px solid var(--line-soft); }
.confirm-box .cb-row:last-child{ border-bottom:0; }
.confirm-box .cb-row span{ color:var(--muted); font-size:.9rem; }
.confirm-box .cb-row b{ text-align:right; }
.confirm-box .cb-row.total b{ color:var(--gold); font-family:var(--display); font-size:1.2rem; }
.success-panel .bank-box{ max-width:520px; margin-left:auto; margin-right:auto; }
.why-transfer{ max-width:520px; margin:1.4rem auto 0; text-align:left; border:1px dashed var(--line); border-radius:var(--r); background:var(--bg-2); padding:16px 20px; }
.why-transfer b{ display:block; margin-bottom:.4rem; font-family:var(--display); text-transform:uppercase; letter-spacing:.04em; font-size:.9rem; }
.why-transfer p{ color:var(--muted); font-size:.92rem; line-height:1.6; margin:0; }

@media (max-width:760px){
  .hide-mobile{ display:none; }
}
@media (max-width:560px){
  .bank-grid{ grid-template-columns:1fr; }
  .pack-cta-group{ width:100%; align-items:center; }
  .pack-info-head .btn{ width:100%; justify-content:center; }
  .experts-modal{ padding:48px 14px 18px; }
  .expert-slide .fifa-card{ width:min(232px,66vw); }
}