/* ── Congrès Spéléo 2027 – Styles publics ─────────────────────────────────── */
/* Charte graphique : congres2027.speleo-doubs.com */
:root {
    --csp-primary:   #0e8fa0;
    --csp-secondary: #0a707e;
    --csp-dark:      #1a1a2e;
    --csp-accent:    #0e8fa0;
    --csp-success:   #27ae60;
    --csp-danger:    #c0392b;
    --csp-bg:        #f4f8f9;
    --csp-border:    #c8e6ea;
    --csp-radius:    8px;
}

/* Formulaire */
.csp-form-wrap { max-width: 820px; margin: 0 auto; font-family: inherit; }

/* Barre de progression */
.csp-progress-steps { display: flex; align-items: center; margin-bottom: 32px; padding: 0 8px; }
.csp-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.csp-step-num { width: 36px; height: 36px; border-radius: 50%; background: #ddd; color: #999; font-weight: 700; font-size: 1em; display: flex; align-items: center; justify-content: center; transition: all .3s; }
.csp-step-label { font-size: .78em; color: #999; white-space: nowrap; }
.csp-step.active .csp-step-num { background: var(--csp-primary); color: #fff; }
.csp-step.active .csp-step-label { color: var(--csp-primary); font-weight: 700; }
.csp-step.done .csp-step-num { background: var(--csp-dark); color: #fff; }
.csp-step.done .csp-step-label { color: var(--csp-dark); }
.csp-step-line { flex: 1; height: 2px; background: #ddd; margin: 0 6px; margin-bottom: 18px; }

/* Titre étape */
.csp-etape-titre { color: var(--csp-dark); border-bottom: 2px solid var(--csp-primary); padding-bottom: 8px; margin-bottom: 20px; }

/* Cartes mode */
.csp-mode-cards { display: flex; gap: 16px; flex-wrap: wrap; }
.csp-mode-card { flex: 1; min-width: 160px; border: 2px solid var(--csp-border); border-radius: var(--csp-radius); padding: 16px; text-align: center; cursor: pointer; transition: all .2s; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.csp-mode-card input[type="radio"] { display: none; }
.csp-mode-card:hover { border-color: var(--csp-primary); }
.csp-mode-active { border-color: var(--csp-primary) !important; background: #e8f7f9; }
.csp-mode-icon { font-size: 2em; }
.csp-mode-title { font-weight: 700; color: var(--csp-dark); }
.csp-mode-desc { font-size: .85em; color: #666; }

/* Carte membre */
.csp-membre-card { border: 1px solid var(--csp-border); border-radius: var(--csp-radius); padding: 16px 20px; margin-bottom: 16px; background: #fff; border-left: 4px solid var(--csp-primary); }
.csp-membre-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.csp-membre-titre { font-weight: 700; color: var(--csp-dark); font-size: 1em; }
.csp-btn-remove-membre { background: none; border: 1px solid #ccc; border-radius: 4px; padding: 2px 8px; cursor: pointer; color: #c0392b; }
.csp-btn-remove-membre:hover { background: #c0392b; color: #fff; }

/* Section membre hébergement/repas */
.csp-membre-section { border: 1px solid var(--csp-border); border-radius: var(--csp-radius); padding: 16px 20px; margin-bottom: 16px; }
.csp-membre-nom { color: var(--csp-primary); margin: 0 0 12px; font-size: 1em; border-bottom: 1px solid var(--csp-border); padding-bottom: 8px; }

/* Repas par journée */
.csp-repas-jour { margin-bottom: 16px; border-left: 3px solid var(--csp-primary); padding-left: 14px; }
.csp-repas-jour-titre { margin: 0 0 8px; font-size: .95em; color: var(--csp-dark); font-weight: 700; }
.csp-checkbox-label { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; cursor: pointer; }
.csp-repas-nom { flex: 1; }
.csp-repas-prix { font-weight: 700; color: var(--csp-primary); white-space: nowrap; }

/* Tableau récapitulatif */
.csp-recap-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.csp-recap-table th { background: var(--csp-dark); color: #fff; padding: 10px 12px; text-align: left; font-size: .9em; }
.csp-recap-table td { padding: 10px 12px; border-bottom: 1px solid var(--csp-border); font-size: .9em; vertical-align: top; }
.csp-recap-table tfoot td { background: #f4f8f9; border-top: 2px solid var(--csp-primary); }
.csp-recap-mini { background: var(--csp-bg); border-left: 4px solid var(--csp-primary); padding: 10px 16px; border-radius: 0 4px 4px 0; font-size: 1em; }

/* Champs */
.csp-fieldset { border: 1px solid var(--csp-border); border-radius: var(--csp-radius); padding: 20px 24px; margin-bottom: 24px; background: #fff; }
.csp-fieldset legend { font-weight: 700; font-size: 1.05em; padding: 0 8px; color: var(--csp-primary); }
.csp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 580px) { .csp-grid-2 { grid-template-columns: 1fr; } }
.csp-field { display: flex; flex-direction: column; gap: 4px; }
.csp-field label { font-weight: 600; font-size: .9em; color: #444; }
.csp-field input, .csp-field select, .csp-field textarea { border: 1px solid var(--csp-border); border-radius: 4px; padding: 8px 12px; font-size: 1em; width: 100%; box-sizing: border-box; transition: border-color .2s; }
.csp-field input:focus, .csp-field select:focus, .csp-field textarea:focus { border-color: var(--csp-secondary); outline: none; }
.required { color: var(--csp-danger); }
.csp-radio-group { display: flex; flex-wrap: wrap; gap: 12px; }
.csp-radio-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.description { font-size: .85em; color: #666; margin: 4px 0 0; }

/* Boutons */
.csp-btn { display: inline-block; padding: 12px 28px; border: 2px solid #ccc; border-radius: var(--csp-radius); font-size: 1em; font-weight: 700; cursor: pointer; transition: background .2s; background: #fff; color: #333; }
.csp-btn-primary { background: var(--csp-dark); color: #fff; border-color: var(--csp-primary); }
.csp-btn-primary:hover { background: var(--csp-primary); }
.csp-btn-primary:disabled { background: #aaa; cursor: not-allowed; }
.csp-btn-secondary { background: #fff; color: var(--csp-dark); border-color: var(--csp-dark); }

/* Notices */
.csp-notice { padding: 14px 18px; border-radius: var(--csp-radius); margin-bottom: 20px; font-size: .95em; }
.csp-notice-info    { background: #d6eaf8; border-left: 4px solid var(--csp-secondary); }
.csp-notice-success { background: #d5f5e3; border-left: 4px solid var(--csp-success); }
.csp-notice-error   { background: #fadbd8; border-left: 4px solid var(--csp-danger); }

/* Compteur */
.csp-compteur { display: inline-flex; flex-direction: column; align-items: center; background: var(--csp-dark); color: #fff; padding: 20px 40px; border-radius: 12px; text-align: center; border-top: 4px solid var(--csp-primary); }
.csp-compteur-number { font-size: 3em; font-weight: 900; line-height: 1; }
.csp-compteur-label  { font-size: .9em; opacity: .85; margin-top: 4px; }

/* Badges */
.csp-badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: .8em; font-weight: 600; }
.csp-statut-confirme   { background: #d5f5e3; color: #1e8449; }
.csp-statut-en_attente { background: #fef9e7; color: #9a7d0a; }
.csp-statut-annule     { background: #fadbd8; color: #922b21; }

/* Espace perso */
.csp-espace-perso { max-width: 700px; margin: 0 auto; }
.csp-espace-perso h2 { color: var(--csp-primary); border-bottom: 2px solid var(--csp-primary); padding-bottom: 8px; }
.csp-espace-perso h3 { color: var(--csp-secondary); margin-top: 24px; }

/* Cartes type d'inscription */
.csp-types-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 8px; }
.csp-type-card { border: 2px solid var(--csp-border); border-radius: var(--csp-radius); padding: 12px; cursor: pointer; transition: all .2s; display: flex; flex-direction: column; gap: 3px; }
.csp-type-card input[type="radio"] { display: none; }
.csp-type-card:hover { border-color: var(--csp-primary); background: #f4fafb; }
.csp-type-selected { border-color: var(--csp-primary) !important; background: #e8f7f9 !important; }
.csp-type-libelle { font-weight: 700; color: var(--csp-dark); font-size: .95em; }
.csp-type-prix { color: var(--csp-primary); font-weight: 700; font-size: 1.05em; }
.csp-type-desc { font-size: .78em; color: #777; line-height: 1.3; }

/* ── Boutique ─────────────────────────────────────────────────────────────── */
.csp-produit-ligne {
    display: flex; align-items: flex-start; gap: 16px;
    border: 1px solid var(--csp-border); border-radius: var(--csp-radius);
    padding: 14px; margin-bottom: 12px; background: #fff;
    flex-wrap: wrap;
}
.csp-prod-img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.csp-prod-info { flex: 1; min-width: 160px; }
.csp-prod-nom  { font-weight: 700; color: var(--csp-dark); margin-bottom: 4px; }
.csp-prod-desc { font-size: .85em; color: #666; margin-bottom: 6px; }
.csp-prod-prix { color: var(--csp-primary); font-weight: 700; font-size: 1.1em; }
.csp-prod-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.csp-var-select { padding: 6px 10px; border: 1px solid var(--csp-border); border-radius: 4px; font-size: .9em; }
.csp-qte-ctrl { display: flex; align-items: center; gap: 8px; }
.csp-qte-btn {
    width: 32px; height: 32px; border: 2px solid var(--csp-primary);
    border-radius: 50%; background: #fff; color: var(--csp-primary);
    font-size: 1.2em; font-weight: 700; cursor: pointer; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s;
}
.csp-qte-btn:hover { background: var(--csp-primary); color: #fff; }
.csp-qte-val { font-size: 1.2em; font-weight: 700; min-width: 24px; text-align: center; }

/* ── Unités hébergement ───────────────────────────────────────────────────── */
.csp-heberg-groupe { margin-bottom: 20px; border: 1px solid var(--csp-border); border-radius: var(--csp-radius); overflow: hidden; }
.csp-heberg-nom { background: var(--csp-dark); color: #fff; padding: 10px 14px; font-weight: 700; }
.csp-heberg-type { font-size: .8em; opacity: .7; font-weight: 400; }
.csp-unites-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1px; background: var(--csp-border); }
.csp-unite-card { background: #fff; padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: background .2s; }
.csp-unite-card input { display: none; }
.csp-unite-card:hover { background: #f4fafb; }
.csp-unite-selected { background: #e8f7f9 !important; border-left: 3px solid var(--csp-primary); }
.csp-unite-ref { font-weight: 700; color: var(--csp-dark); }
.csp-unite-desc { font-size: .85em; color: #666; }
.csp-unite-cap { font-size: .8em; color: #888; }
.csp-unite-prix { font-weight: 700; color: var(--csp-primary); margin-top: 4px; }
.csp-heberg-dates { padding: 12px 14px; background: #f9f9f9; border-top: 1px solid var(--csp-border); }