:root {
      --primary:#e85d04;
      --ink:#222;
      --bg:#fff;
      --muted:#666;

      --card:#fff;
      --line:#eee;
      --shadow: 0 6px 24px rgba(0,0,0,.06);

      --danger:#ef4444;
      --ok:#22c55e;
      --warn:#f59e0b;

      --focus: rgba(232,93,4,.22);
    }
    *{ box-sizing:border-box; }
    body {
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial;
      color: var(--ink);
      background: var(--bg);
      margin:0;
    }
    .container { max-width: 980px; margin: 0 auto; padding: 24px 16px 140px; }
    h1 { font-size: clamp(1.6rem, 2.2vw, 2.2rem); margin: 0 0 16px; }
    h2 { font-size: 1.2rem; margin: 0 0 12px; }
    .card {
      background:var(--card);
      border:1px solid var(--line);
      border-radius: 14px;
      padding: 18px;
      box-shadow: var(--shadow);
      margin-bottom: 16px;
    }
    .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .row-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .field { display:flex; flex-direction:column; gap:6px; }
    label { font-weight: 800; font-size: .95rem; }
    .muted { color: var(--muted); font-size: .9rem; }
    input[type="text"], input[type="email"], input[type="tel"], select, input[type="file"]{
      border:1px solid #ddd;
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 1rem;
      background:#fff;
      outline: none;
    }
    input:focus, select:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 4px var(--focus);
    }

    .actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
    .btn {
      appearance:none; border:none; border-radius: 999px;
      padding: 10px 16px; font-weight:900; cursor:pointer;
      transition: transform .06s ease, opacity .2s ease, background .2s ease;
    }
    .btn:active { transform: scale(.99); }
    .btn-primary { background: var(--primary); color:#fff; }
    .btn-outline { background:#fff; border:1px solid #ddd; }
    .btn[disabled] { opacity:.6; cursor:not-allowed; }
    .participant-header { display:flex; justify-content: space-between; align-items:center; margin-bottom: 8px; }
    .participant-index { font-weight:950; }
    .required::after { content:" *"; color:var(--danger); }
    .subsection { border:1px solid #eee; border-radius:12px; padding:12px; margin-top:10px; }
    .subsection h3 { margin:0 0 8px; font-size:1rem; font-weight:950; }
    .workshop-card { border:1px dashed #e5e5e5; border-radius: 12px; padding: 10px; }
    .workshop-title { font-weight: 950; }
    .workshop-meta { color: var(--muted); font-size: .9rem; }
    .summary-item { border-top:1px solid #eee; padding-top:12px; margin-top:12px; }
    .pill { display:inline-block; padding: 4px 10px; border:1px solid #ddd; border-radius:999px; font-size:.85rem; font-weight:800; }
    .stack { display:flex; flex-direction:column; gap:8px; }
    .right { text-align:right; }
    .totals { display:flex; flex-direction:column; gap:6px; }
    .totals .line { display:flex; justify-content:space-between; gap:16px; }
    .totals .line strong { font-size:1.15rem; }
    .divider { margin:16px 0; border:none; border-top:1px solid #eee; }

    [hidden] { display:none !important; }

    /* Barre total fixe en bas */
    #total-bar {
      position: fixed; left: 0; right: 0; bottom: 0;
      background: #111; color:#fff; padding: 14px 16px;
      z-index: 50; box-shadow: 0 -8px 24px rgba(0,0,0,.2);
    }
    #total-bar .wrap {
      max-width: 980px; margin:0 auto;
      display:flex; align-items:center; justify-content: space-between; gap: 16px;
    }
    #total-amount { font-size: 1.25rem; font-weight: 950; }
    #bottom-status { font-size:.95rem; opacity:.85; }

    /* Bloc "inscriptions fermées" */
    .closed {
      padding: 22px;
      border-radius: 16px;
      border: 1px solid #eee;
      background: #fff7ed;
      box-shadow: 0 10px 28px rgba(0,0,0,.08);
    }
    .closed h2 { margin:0 0 10px; font-size: 1.4rem; }
    .closed p { margin:0; font-size: 1.1rem; line-height: 1.4; }

    /* Bloc info "liste d'attente" */
    .waitlist-info {
      margin-top: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid #dbeafe;
      background: #eff6ff;
      color: #0f172a;
      font-size: .92rem;
    }

    /* Bloc info "rôles complets" */
    .roles-closed-info {
      margin-top: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid #fee2e2;
      background: #fff1f2;
      color: #111827;
      font-size: .92rem;
    }

    /* =========================
       TOASTER (centre bas)
       ========================= */
    #toast-root {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 92px;
      z-index: 9999;
      display:flex;
      flex-direction:column;
      gap: 10px;
      width: min(720px, calc(100vw - 24px));
      pointer-events: none;
    }
    .toast {
      pointer-events: auto;
      border-radius: 16px;
      padding: 14px 14px 14px 16px;
      box-shadow: 0 16px 36px rgba(0,0,0,.22);
      color: #0b0b0b;
      background: #fff;
      border: 2px solid rgba(0,0,0,.08);
      display:flex;
      gap: 12px;
      align-items:flex-start;
    }
    .toast .badge {
      width: 14px; height: 14px; border-radius: 999px; margin-top: 4px; flex: 0 0 auto;
      background: #999;
    }
    .toast .content { flex:1; min-width: 0; }
    .toast .title { font-weight: 950; margin:0 0 2px; font-size: 1.02rem; }
    .toast .msg { margin:0; color:#151515; font-size: 1rem; line-height: 1.3; }
    .toast .close {
      border:none; background: rgba(0,0,0,.06); cursor:pointer;
      font-weight:950; font-size: 1.1rem; line-height: 1;
      padding: 8px 10px; border-radius: 12px;
    }
    .toast .close:hover { background: rgba(0,0,0,.10); }

    .toast.success .badge { background: var(--ok); }
    .toast.error .badge { background: var(--danger); }
    .toast.warn .badge { background: var(--warn); }

    /* =========================
       TOGGLE (segmented buttons)
       ========================= */
    .seg {
      display:inline-flex;
      gap: 6px;
      padding: 6px;
      border-radius: 999px;
      border: 1px solid #ddd;
      background: #fafafa;
      width: fit-content;
    }
    .seg button {
      border: 1px solid transparent;
      background: transparent;
      padding: 8px 12px;
      border-radius: 999px;
      font-weight: 950;
      cursor:pointer;
      color:#111;
      transition: transform .06s ease, background .2s ease, box-shadow .2s ease;
      min-width: 84px;
    }
    .seg button:active { transform: scale(.99); }
    .seg button[aria-pressed="true"]{
      background: rgba(232,93,4,.10);
      border-color: rgba(232,93,4,.35);
      box-shadow: 0 0 0 4px var(--focus);
    }
    .seg .hint {
      font-weight: 800;
      color: var(--muted);
      font-size: .9rem;
      margin-left: 8px;
      align-self: center;
    }

    /* Upload justificatif */
    .upload-box{
      margin-top: 8px;
      border:1px solid #e5e7eb;
      border-radius: 12px;
      padding: 10px 12px;
      background:#fff;
    }
    .upload-box .title{ font-weight: 950; margin-bottom: 6px; }
    .upload-box .mini{ font-size:.9rem; color:var(--muted); margin: 0 0 8px; }

/* =========================
   MODAL (pop-in bloquante)
   ========================= */
#modal-root {
  position: fixed;
  inset: 0;
  z-index: 10000;
}

/* overlay */
#modal-root .modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

/* centre la carte */
#modal-root .modal-dialog {
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 18px;
}

/* la carte */
#modal-root .modal-card {
  width: min(720px, 100%);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(0,0,0,.35);
  border: 1px solid rgba(0,0,0,.10);
  overflow: hidden;
  padding: 0;
}

/* titre / contenu / actions */
#modal-root .modal-title {
  padding: 16px 16px 12px;
  background: linear-gradient(90deg, rgba(232,93,4,.12), rgba(232,93,4,.02));
  border-bottom: 1px solid #eee;
  font-size: 1.15rem;
  font-weight: 950;
}

#modal-root .modal-body {
  padding: 14px 16px 0;
  color: #111;
  line-height: 1.4;
}

#modal-root .modal-body p { margin: 0 0 10px; }

#modal-root .modal-actions {
  padding: 14px 16px 16px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}


    @media (max-width: 720px) {
      .row, .row-3 { grid-template-columns: 1fr; }
      .right { text-align:left; }
      #total-bar .wrap { flex-direction: column; align-items:flex-start; gap: 6px; }
      .seg button { min-width: 98px; }
    }