/* ── GCS Adhésion — Formulaire Front-End ─────────────────────────────────── */
:root {
  --gcs-primary:   #2c3e50;
  --gcs-accent:    #3498db;
  --gcs-success:   #27ae60;
  --gcs-danger:    #e74c3c;
  --gcs-warn:      #f39c12;
  --gcs-light:     #f8f9fa;
  --gcs-border:    #dee2e6;
  --gcs-radius:    8px;
  --gcs-shadow:    0 2px 8px rgba(0,0,0,.08);
}

#gcs-inscription-wrap {
  max-width: 820px;
  margin: 0 auto;
  font-family: 'Segoe UI', sans-serif;
  font-size: 15px;
  color: #333;
}

/* ── Barre de progression ── */
.gcs-steps-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 0;
}
.gcs-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: default;
  min-width: 70px;
}
.gcs-step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--gcs-border);
  color: #999;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  transition: all .3s;
}
.gcs-step-item.active .gcs-step-num,
.gcs-step-item.done   .gcs-step-num {
  background: var(--gcs-accent);
  color: white;
}
.gcs-step-item.done .gcs-step-num::before { content: '✓'; }
.gcs-step-item.done .gcs-step-num span { display: none; }
.gcs-step-label {
  font-size: 11px;
  color: #aaa;
  text-align: center;
}
.gcs-step-item.active .gcs-step-label { color: var(--gcs-accent); font-weight: 600; }
.gcs-step-sep {
  flex: 1; height: 2px;
  background: var(--gcs-border);
  min-width: 20px;
  margin-bottom: 16px;
}

/* ── Panneaux d'étape ── */
.gcs-step-panel { display: none; }
.gcs-step-panel.active { display: block; animation: gcsFadeIn .3s ease; }

@keyframes gcsFadeIn {
  from { opacity: 0; transform: translateX(15px); }
  to   { opacity: 1; transform: translateX(0); }
}

.gcs-step-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--gcs-primary);
  margin: 0 0 6px;
  border-bottom: 2px solid var(--gcs-accent);
  padding-bottom: 10px;
}
.gcs-step-sub { color: #777; margin: 0 0 20px; font-size: 13px; }
.gcs-section-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--gcs-primary);
  margin: 22px 0 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
  border-bottom: 1px solid var(--gcs-border);
  padding-bottom: 6px;
}
.gcs-hint { color: #888; font-size: 13px; margin: 0 0 14px; }

/* ── Grille ── */
.gcs-row {
  display: flex;
  gap: 15px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.gcs-col { flex: 1; min-width: 160px; }
.gcs-col-full { flex: 0 0 100%; }
.gcs-col-sm { flex: 0 0 120px; min-width: 100px; }

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=number], select, textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--gcs-border);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 14px;
  transition: border .2s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gcs-accent);
  box-shadow: 0 0 0 3px rgba(52,152,219,.15);
}
input[readonly] { background: #f0f0f0; cursor: default; }

.req { color: var(--gcs-danger); }

/* ── Cards de choix ── */
.gcs-card-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.gcs-card-option { cursor: pointer; flex: 1; min-width: 160px; }
.gcs-card-option input[type=radio] { display: none; }
.gcs-card-inner {
  border: 2px solid var(--gcs-border);
  border-radius: var(--gcs-radius);
  padding: 16px;
  text-align: center;
  transition: all .2s;
  background: white;
}
.gcs-card-icon { font-size: 28px; margin-bottom: 8px; }
.gcs-card-txt strong { display: block; font-size: 14px; color: var(--gcs-primary); }
.gcs-card-txt span { display: block; font-size: 12px; color: #888; margin-top: 3px; }
.gcs-card-option input[type=radio]:checked + .gcs-card-inner {
  border-color: var(--gcs-accent);
  background: rgba(52,152,219,.06);
  box-shadow: 0 0 0 3px rgba(52,152,219,.18);
}
.gcs-card-option:hover .gcs-card-inner { border-color: #aad; }
.gcs-card-sm { min-width: 110px; max-width: 160px; flex: 0 1 auto; }
.gcs-card-sm .gcs-card-inner { padding: 12px; }
.gcs-card-sm .gcs-card-icon { font-size: 22px; margin-bottom: 5px; }

/* ── Checkbox ── */
.gcs-check-label { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
.gcs-check-label input[type=checkbox] { width: auto; margin: 0; }
.gcs-radio-inline { display: inline-flex; align-items: center; gap: 6px; margin-right: 20px; cursor: pointer; font-weight: 400; }
.gcs-radio-inline input { width: auto; }

/* ── Planning list ── */
.gcs-planning-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px solid var(--gcs-border);
  border-radius: var(--gcs-radius);
  padding: 12px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all .2s;
  background: white;
}
.gcs-planning-item:hover { border-color: var(--gcs-accent); background: rgba(52,152,219,.04); }
.gcs-planning-item.selected {
  border-color: var(--gcs-accent);
  background: rgba(52,152,219,.08);
}
.gcs-planning-item.full { opacity: .5; cursor: not-allowed; }
.gcs-planning-left .gcs-planning-title { font-weight: 700; font-size: 15px; color: var(--gcs-primary); }
.gcs-planning-left .gcs-planning-sub { font-size: 12px; color: #777; margin-top: 2px; }
.gcs-planning-right { text-align: right; }
.gcs-planning-dispo { font-size: 12px; }
.gcs-planning-dispo.ok { color: var(--gcs-success); }
.gcs-planning-dispo.warn { color: var(--gcs-warn); }
.gcs-planning-dispo.full { color: var(--gcs-danger); }

/* ── Cotisations ── */
.gcs-cotis-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px solid var(--gcs-border);
  border-radius: var(--gcs-radius);
  padding: 12px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all .2s;
  background: white;
}
.gcs-cotis-item:hover { border-color: var(--gcs-accent); }
.gcs-cotis-item.selected {
  border-color: var(--gcs-accent);
  background: rgba(52,152,219,.07);
}
.gcs-cotis-item input[type=checkbox] { display: none; }
.gcs-cotis-libelle { font-weight: 600; }
.gcs-cotis-desc { font-size: 12px; color: #888; }
.gcs-cotis-price { font-size: 18px; font-weight: 700; color: var(--gcs-success); white-space: nowrap; }

/* Total box */
.gcs-total-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--gcs-primary);
  color: white;
  border-radius: var(--gcs-radius);
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 600;
  margin-top: 20px;
}
#gcs-total-amount { font-size: 24px; font-weight: 800; }

/* ── Récap paiement ── */
.gcs-recap-box {
  background: var(--gcs-light);
  border: 1px solid var(--gcs-border);
  border-radius: var(--gcs-radius);
  padding: 20px;
  margin-top: 25px;
}
.gcs-recap-title { font-weight: 700; color: var(--gcs-primary); margin-bottom: 12px; font-size: 15px; }
.gcs-recap-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dotted #ddd; font-size: 14px; }
.gcs-recap-total { font-weight: 700; font-size: 16px; color: var(--gcs-primary); border-bottom: none; padding-top: 10px; margin-top: 5px; }

/* ── Boutons navigation ── */
.gcs-nav-btns {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  gap: 12px;
}
.gcs-btn-primary, .gcs-btn-secondary, .gcs-btn-submit {
  padding: 11px 28px;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.gcs-btn-primary  { background: var(--gcs-accent); color: white; margin-left: auto; }
.gcs-btn-secondary { background: #ecf0f1; color: var(--gcs-primary); }
.gcs-btn-submit   { background: var(--gcs-success); color: white; margin-left: auto; }
.gcs-btn-primary:hover  { background: #2980b9; }
.gcs-btn-secondary:hover { background: #dfe6e9; }
.gcs-btn-submit:hover   { background: #219a52; }
.gcs-btn-primary:disabled, .gcs-btn-submit:disabled { opacity: .6; cursor: not-allowed; }

/* ── Messages ── */
.gcs-msg { padding: 12px 16px; border-radius: 6px; margin-bottom: 15px; font-size: 14px; }
.gcs-msg-error   { background: #fdecea; border-left: 4px solid var(--gcs-danger); color: #c0392b; }
.gcs-msg-success { background: #eafaf1; border-left: 4px solid var(--gcs-success); color: #1e8449; }
.gcs-loading { color: #888; font-style: italic; padding: 10px 0; }

/* ── Recherche adhérent ── */
.gcs-adh-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px solid var(--gcs-border);
  border-radius: var(--gcs-radius);
  padding: 12px 16px;
  margin-bottom: 10px;
  transition: border .2s;
}
.gcs-adh-card:hover { border-color: var(--gcs-accent); }
.gcs-adh-name { font-weight: 700; }
.gcs-adh-info { font-size: 12px; color: #777; margin-top: 2px; }
.gcs-btn-select-adh { background: var(--gcs-accent); color: white; border: none; border-radius: 5px; padding: 7px 16px; cursor: pointer; font-size: 13px; }

/* ── Confirmation ── */
.gcs-confirm-wrap { text-align: center; padding: 40px 20px; }
.gcs-confirm-icon { font-size: 64px; margin-bottom: 16px; }
.gcs-confirm-wrap h2 { font-size: 26px; color: var(--gcs-primary); margin-bottom: 12px; }
.gcs-confirm-ref {
  background: var(--gcs-light);
  border: 2px dashed var(--gcs-accent);
  border-radius: 10px;
  padding: 20px;
  margin: 24px auto;
  max-width: 400px;
}
.gcs-confirm-ref-label { font-size: 13px; color: #777; margin-bottom: 8px; }
.gcs-confirm-ref-val { font-size: 24px; font-weight: 800; color: var(--gcs-primary); letter-spacing: 3px; }
.gcs-confirm-details { display: inline-block; text-align: left; background: white; border: 1px solid var(--gcs-border); border-radius: var(--gcs-radius); padding: 16px 24px; margin: 16px auto; }
.gcs-confirm-details div { padding: 5px 0; font-size: 14px; }
.gcs-confirm-notice { background: #fff9e6; border-left: 4px solid var(--gcs-warn); border-radius: var(--gcs-radius); padding: 16px 20px; text-align: left; max-width: 500px; margin: 20px auto 0; font-size: 13px; }
.gcs-confirm-notice ul { margin: 8px 0 0 18px; }
.gcs-confirm-notice li { margin-bottom: 4px; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .gcs-row { flex-direction: column; gap: 10px; }
  .gcs-col, .gcs-col-sm { min-width: 100%; }
  .gcs-card-row { flex-direction: column; }
  .gcs-card-option { max-width: 100%; }
  .gcs-steps-bar { gap: 0; }
  .gcs-step-label { display: none; }
  .gcs-step-sep { min-width: 10px; }
}


/* ── Planning table (step 4) ──────────────────────────────────────────── */
.gcs-planning-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.gcs-planning-table th {
    background: var(--gcs-primary, #1a237e);
    color: #fff;
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
}
.gcs-planning-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #eef;
    vertical-align: middle;
}
.gcs-planning-table tr:hover td { background: #f5f7ff; }
.gcs-planning-table tr.row-full td { opacity: .5; }

.slot-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
}
.slot-dispo {
    font-weight: 700;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
}
.slot-dispo.slot-ok  { background: #e8f5e9; color: #2e7d32; }
.slot-dispo.slot-low { background: #fff8e1; color: #f57c00; }
.slot-dispo.slot-full{ background: #ffebee; color: #c62828; }

.slot-tag {
    display: inline-block;
    background: #e8eaf6;
    color: #3949ab;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

/* Info boxes */
.gcs-info-box {
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 4px solid #1976d2;
    background: #e3f2fd;
    font-size: 13px;
    color: #1a237e;
}
.gcs-info-gold {
    background: #fff8e1;
    border-color: #f9a825;
    color: #5d4037;
}
.gcs-info-blue {
    background: #e3f2fd;
    border-color: #1976d2;
    color: #1a237e;
}

/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }