/* ----------------------------------------------------
   SECTION INSCRIPTION & FINANCEMENT
   (tabs + notices + listes)
---------------------------------------------------- */

/* Tabs */
#inscription .tabs{
  display:flex;
  gap:10px;
  margin: 12px 0 14px;
  flex-wrap: wrap;
}

#inscription .tab{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
}

#inscription .tab[aria-selected="true"]{
  border-color: var(--brand-border);
  background: var(--brand-soft);
}

#inscription .tab-panels{ margin-top: 6px; }
#inscription .tab-panel[hidden]{ display:none; }

/* Petit layout “stack” pour annonces / listes */
#inscription .stack{ display:grid; gap:10px; }

#inscription .notice{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,.9);
}

#inscription .notice .meta{
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}


/* ---------------- Inscription (parcours + statuts) ---------------- */

#inscription .reg-banner .muted{ margin-top: 6px; }

#inscription .reg-steps{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 820px){
  #inscription .reg-steps{ grid-template-columns: 1fr; }
}

#inscription .reg-units{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 980px){
  #inscription .reg-units{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  #inscription .reg-units{ grid-template-columns: 1fr; }
}

#inscription .reg-unit-head{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
#inscription .reg-unit h4{ margin: 0; }

#inscription .pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  background: rgba(255,255,255,.92);
  color: var(--text);
}
#inscription .pill.open{
  background: rgba(16,185,129,.10);
  border-color: rgba(16,185,129,.30);
}
#inscription .pill.full{
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.35);
}
#inscription .pill.closed{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.35);
}

#inscription .reg-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

#inscription select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.95);
  color: var(--text);
  outline: none;
}
#inscription select:focus{ border-color: var(--brand-border); }

#inscription .btn.disabled{
  pointer-events: none;
  opacity: .55;
  filter: grayscale(0.2);
}

#inscription .reg-forms{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px){
  #inscription .reg-forms{ grid-template-columns: 1fr; }
}

#inscription .reg-status{
  margin: 10px 0 0;
  font-size: 0.95rem;
}
#inscription .reg-status.ok{ color: #065f46; font-weight: 700; }
#inscription .reg-status.err{ color: #991b1b; font-weight: 700; }

#inscription label.check{
  font-size: 0.95rem;
  color: var(--text);
}


/* ----------------------------------------------------
   MODAL INSCRIPTION (popup central)
---------------------------------------------------- */
#regModal.reg-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 99995;
}
#regModal.reg-modal.is-open{ display: block; }

#regModal .reg-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,.40);
  backdrop-filter: blur(4px);
}

#regModal .reg-panel{
  position: relative;
  width: min(980px, calc(100% - 28px));
  margin: 6vh auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;

  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

#regModal .reg-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  cursor: pointer;
  z-index: 2;
}

#regModal .reg-panel-head{
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.92);
}

#regModal .reg-panel-title{
  margin: 0;
  font-size: 1.15rem;
}

#regModal .reg-panel-body{
  padding: 16px;
  overflow-y: auto;
  flex: 1 1 auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Bouton "liste d’attente" affiché dans l’en-tête des étapes */
#regModal .reg-steps .btn{
  margin-top: 8px;
}
#regModal .reg-steps > button.btn{ grid-column: 1 / -1; }

/* Boutons désactivés (gris, non cliquables) */
#inscription .btn.disabled,
#regModal .btn.disabled,
#inscription a.disabled,
#regModal a.disabled{
  opacity: .45;
  filter: grayscale(.15);
  pointer-events: none;
  cursor: not-allowed;
  text-decoration: none;
}

/* Carte d'ouverture dans l’onglet Inscription */
#inscription .reg-open-card{
  max-width: 720px;
}

@media (max-width: 820px){
  #regModal .reg-panel{ margin: 3vh auto; max-height: 92vh; }
}

/* ------------------ PREMIUM: modal inscription (alignement) ------------------ */
#regModal .reg-panel{
  width: min(860px, calc(100% - 28px));
}

#regModal .reg-panel-body{
  padding: 18px;
}

/* Réduit la largeur des blocs internes pour éviter les champs trop longs */
#regModal .reg-panel-body > *{
  max-width: 760px;
  margin-inline: auto;
}

/* 2 colonnes pour les 2 cartes (confirmation / liste d'attente) */
#regModal .reg-forms{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  margin-top: 14px;
}

/* Cartes plus "premium" */
#regModal .reg-forms .card{
  padding: 14px 14px 16px;
  border-radius: 16px;
}

/* Formulaires: grille 2 colonnes */
#regModal #reg-form,
#regModal #wait-form{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px 14px;
  margin-top: 10px;
}

/* Champ */
#regModal #reg-form .field,
#regModal #wait-form .field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Libellé */
#regModal #reg-form .field > span,
#regModal #wait-form .field > span{
  font-size: .85rem;
  opacity: .80;
}

/* Champs pleine largeur */
#regModal #reg-form .field.full,
#regModal #wait-form .field.full{
  grid-column: 1 / -1;
}

/* Boutons pleine largeur, alignés proprement */
#regModal #reg-form button,
#regModal #wait-form button{
  grid-column: 1 / -1;
  justify-self: start;
}

/* Zone status sous le bouton */
#regModal .reg-status{
  margin-top: 10px;
}

/* Responsive */
@media (max-width: 820px){
  #regModal .reg-forms{ grid-template-columns: 1fr; }
  #regModal #reg-form,
  #regModal #wait-form{ grid-template-columns: 1fr; }
}

/* ------------------ INSCRIPTION GUIDÉE: stepper ------------------ */
#regModal .reg-stepper{ padding: 14px 14px 12px; }
#regModal .reg-steps{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
#regModal .reg-step{
  display:flex;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.72);
  border-radius: 14px;
  padding: 10px 10px;
}
#regModal .reg-step-dot{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  background: rgba(255,255,255,.9);
}
#regModal .reg-step.is-active{
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}
#regModal .reg-step.is-done{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.06);
}
#regModal .reg-step.is-done .reg-step-dot{
  border-color: rgba(34,197,94,.45);
  background: rgba(34,197,94,.12);
}
#regModal .reg-step-txt strong{ display:block; line-height: 1.1; }
#regModal .reg-hint{ opacity: .85; }

@media (max-width: 820px){
  #regModal .reg-steps{ grid-template-columns: 1fr; }
}

/* ------------------ CHECKLIST ALIGN (PDF / ASC) ------------------ */
#regModal #reg-form .field.checklist{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 12px;

  padding: 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.75);
}

#regModal #reg-form .field.checklist > span{
  grid-column: 1 / -1;
  margin: 0;
}

#regModal #reg-form .field.checklist .check{
  width: 100%;
  padding: 10px 10px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.85);
  margin-right: 0; /* annule l'ancien margin-right */
  align-items: flex-start;
}

#regModal #reg-form .field.checklist .check input[type="checkbox"]{
  margin-top: 2px;
}

#regModal #reg-form .field.checklist .note{
  grid-column: 1 / -1;
  margin-top: 2px;
}

/* Mobile: 1 colonne compacte */
@media (max-width: 520px){
  #regModal #reg-form .field.checklist{
    grid-template-columns: 1fr;
  }
}

/* =========================
   MODAL SIZE FIX (premium)
   Ensure the modal panel is centered and not full-screen
========================= */

/* Overlay root already fixed; this clamps the inner panel */
.reg-modal .reg-panel{
  width: min(860px, calc(100% - 28px));
  margin: clamp(12px, 6vh, 48px) auto;

  max-height: calc(100dvh - 24px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);

  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Fallback for browsers without dvh */
@supports not (height: 100dvh){
  .reg-modal .reg-panel{
    max-height: calc(100vh - 24px);
  }
}

.reg-modal .reg-panel-head{
  padding: 16px 18px 0;
  flex: 0 0 auto;
}

.reg-modal .reg-panel-body{
  padding: 18px;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Close button stays in corner */
.reg-modal .reg-close{
  position: absolute;
  top: 10px; right: 10px;
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  cursor: pointer;
  z-index: 2;
}

/* Mobile spacing */
@media (max-width: 820px){
  .reg-modal .reg-panel{
    width: min(860px, calc(100% - 18px));
    margin: 3vh auto;
  }
  .reg-modal .reg-panel-body{
    padding: 14px;
  }
}

/* =========================
   MODAL FOOTER + CLOSE (X)
========================= */
.reg-modal .reg-footer{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
}

.reg-modal .reg-close{
  z-index: 5; /* ensure above everything */
}

/* =========================
   FIX: Close (X) should be inside the panel, not at viewport corner
========================= */
.reg-modal .reg-panel{
  position: relative !important;
}

.reg-modal .reg-close{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
}

/* ------------------ Waitlist: Retour beside Envoyer ------------------ */
#waitModal .reg-footer{ display: none; }

#waitModal #wait-form .form-actions[data-actions="wait"]{
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

/* Mobile: stack buttons if needed */
@media (max-width: 520px){
  #waitModal #wait-form .form-actions[data-actions="wait"]{
    flex-direction: column;
    align-items: stretch;
  }
}
/* =========================
   ASC Gate — version WOW
   ========================= */

.asc-gate{ margin: 10px 0 8px; }

.asc-gate-box{
  display:grid;
    grid-template-columns: 26px 1fr auto;
  align-items:center;
  gap:12px;

  padding:14px 14px;
  border:2px solid rgba(0,0,0,.14);
  border-radius:16px;
  background: rgba(255,255,255,.78);

  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.asc-gate-box:hover{
  border-color: rgba(0,0,0,.22);
  transform: translateY(-1px);
}

.asc-gate-box input[type="checkbox"]{
  width:22px;
  height:22px;
  accent-color: var(--brand2);
  cursor:pointer;
}

.asc-gate-icon{
  font-size:20px;
  line-height:1;
  opacity:.95;
}

.asc-gate-text{
  font-weight:800;
  line-height:1.25;
}

.asc-gate-badge{
  font-size:12px;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.08);
}

/* texte d’aide sous la case */
.asc-gate-sub{
  margin-top:8px;
  font-size: 0.95rem;
}

/* Highlight quand coché (sans :has() pour compatibilité) */
.asc-gate-box.is-checked{
  border-color: rgba(0,0,0,.35);
  background: rgba(255,255,255,.92);
}
.btn.primary{
  position: relative;
  background: rgba(255,255,255,.70);
  border-color: rgba(0,0,0,.18);
  padding-left: 16px;
}

.btn.primary::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  border-radius: 12px 0 0 12px;
  background: var(--brand2);
  opacity: .65;
}
/* Micro animation (pro, discret) */
.btn{
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  transform: translateZ(0);
}

.btn:hover{
  transform: scale(1.02);
}

.btn:active{
  transform: scale(0.99);
}
.btn:focus-visible{
  outline: 3px solid rgba(0,0,0,.20);
  outline-offset: 3px;
  transform: scale(1.02);
}     
@media (prefers-reduced-motion: reduce){
  .btn{ transition: none !important; }
  .btn:hover, .btn:active{ transform: none !important; }
}
/* Checkbox fratrie — harmonisé avec le style inscription */
/* Checkbox fratrie — harmonisé + carré visible */
.sib-gate{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:12px;

  padding:12px 14px;
  border:1px solid rgba(0,0,0,.14);
  border-radius:14px;
  background:rgba(255,255,255,.68);

  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.sib-gate:hover{
  transform: scale(1.01);
  border-color: rgba(0,0,0,.22);
  background: rgba(255,255,255,.80);
}

.sib-gate-text{
  font-weight:700;
  line-height:1.3;
}

.sib-gate-side{
  display:flex;
  align-items:center;
  gap:10px;
}

.sib-gate-badge{
  font-size:12px;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.08);
}

.sib-gate input[type="checkbox"]{
  width:20px;
  height:20px;
  margin:0;
  accent-color: var(--brand2);
  cursor:pointer;
}

/* état coché */
.sib-gate:has(input[type="checkbox"]:checked){
  border-color: rgba(0,0,0,.28);
  background: rgba(255,255,255,.92);
}

.sib-gate:has(input[type="checkbox"]:checked) .sib-gate-badge{
  background: rgba(0,0,0,.12);
}

.sib-gate:has(input[type="checkbox"]:focus-visible){
  outline: 3px solid rgba(0,0,0,.18);
  outline-offset: 3px;
}