/* cybele-questionnaire.css — Compatibilité Divi, priorité 99 */

/* ── Masquer sidebar sur page formulaire ─────────────────────── */
body:has(.cybele-questionnaire) .et_pb_column_1_4,
body:has(.cybele-questionnaire) .widget-area,
body:has(.cybele-questionnaire) #sidebar {
    display: none !important;
}
body:has(.cybele-questionnaire) .et_pb_column_3_4 {
    width: 100% !important;
    margin: 0 !important;
}

/* ── VARIABLES ─────────────────────────────────────────────── */
.cybele-questionnaire {
    --cq-teal:       #2AACBB;
    --cq-teal-light: #D9F3F7;
    --cq-dark:       #1A2B3C;
    --cq-gray:       #6B7280;
    --cq-radius:     10px;
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 1rem 1rem 3rem !important;
    font-family: inherit !important;
}

/* ── STEPS NAV ──────────────────────────────────────────────── */
.cybele-steps-nav {
    display: flex !important;
    gap: 0 !important;
    margin-bottom: 1.75rem !important;
    border-radius: var(--cq-radius) !important;
    overflow: hidden !important;
    border: 1px solid #dde1e7 !important;
}

.cybele-step-indicator {
    flex: 1 !important;
    padding: .6rem .4rem !important;
    text-align: center !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
    color: var(--cq-gray) !important;
    background: #f8fafc !important;
    border-right: 1px solid #dde1e7 !important;
    cursor: default !important;
    line-height: 1.3 !important;
}

.cybele-step-indicator:last-child {
    border-right: none !important;
}

.cybele-step-indicator.active {
    background: var(--cq-teal) !important;
    color: #fff !important;
}

.cybele-step-indicator.done {
    background: var(--cq-teal-light) !important;
    color: var(--cq-teal) !important;
}

.cybele-step-num {
    display: block !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    margin-bottom: .1rem !important;
}

/* ── STEP PANEL ─────────────────────────────────────────────── */
.cybele-form-step {
    background: #fff !important;
    border-radius: var(--cq-radius) !important;
    box-shadow: 0 2px 16px rgba(42,172,187,.10) !important;
    padding: 1.75rem !important;
    border: 1px solid #e8ecf0 !important;
    margin-bottom: 1rem !important;
}

.cybele-form-step[hidden] { display: none !important; }

.cybele-step-title {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--cq-teal) !important;
    margin: 0 0 1.25rem !important;
    padding-bottom: .65rem !important;
    border-bottom: 2px solid var(--cq-teal-light) !important;
}

/* ── FIELDS ─────────────────────────────────────────────────── */
.cybele-form-field {
    margin-bottom: 1rem !important;
}

.cybele-field-label {
    display: block !important;
    font-size: .825rem !important;
    font-weight: 700 !important;
    color: var(--cq-dark) !important;
    margin-bottom: .35rem !important;
}

.cybele-questionnaire input[type="text"],
.cybele-questionnaire input[type="email"],
.cybele-questionnaire input[type="url"],
.cybele-questionnaire input[type="tel"],
.cybele-questionnaire select,
.cybele-questionnaire textarea {
    width: 100% !important;
    padding: .65rem .9rem !important;
    border: 1.5px solid #dde1e7 !important;
    border-radius: 8px !important;
    font-size: .9rem !important;
    font-family: inherit !important;
    background: #fff !important;
    color: var(--cq-dark) !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 200ms !important;
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.cybele-questionnaire select {
    -webkit-appearance: auto !important;
    appearance: auto !important;
}

.cybele-questionnaire input:focus,
.cybele-questionnaire select:focus,
.cybele-questionnaire textarea:focus {
    border-color: var(--cq-teal) !important;
    box-shadow: 0 0 0 3px rgba(42,172,187,.12) !important;
}

/* ── GRID ROWS ──────────────────────────────────────────────── */
.cybele-form-row--2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
}

/* ── CHECKBOXES ─────────────────────────────────────────────── */
.cybele-checkbox-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .4rem !important;
    margin-top: .35rem !important;
}

.cybele-checkbox-group label,
.cybele-radio-group label {
    display: inline-flex !important;
    align-items: center !important;
    gap: .4rem !important;
    padding: .35rem .7rem !important;
    border: 1.5px solid #dde1e7 !important;
    border-radius: 20px !important;
    font-size: .82rem !important;
    font-weight: 500 !important;
    color: var(--cq-dark) !important;
    background: #fff !important;
    cursor: pointer !important;
    transition: all 150ms !important;
    margin: 0 !important;
}

.cybele-checkbox-group label:hover,
.cybele-radio-group label:hover {
    border-color: var(--cq-teal) !important;
    background: var(--cq-teal-light) !important;
    color: var(--cq-teal) !important;
}

.cybele-checkbox-group input[type="checkbox"],
.cybele-radio-group input[type="radio"] {
    width: 14px !important;
    height: 14px !important;
    accent-color: var(--cq-teal) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    flex-shrink: 0 !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
    box-shadow: none !important;
}

/* ── SECTION TITLE ──────────────────────────────────────────── */
.cybele-form-section-title {
    font-size: .8rem !important;
    font-weight: 700 !important;
    color: var(--cq-gray) !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    margin: 1rem 0 .5rem !important;
    padding-bottom: .3rem !important;
    border-bottom: 1px solid #e8ecf0 !important;
}

/* ── NAVIGATION ─────────────────────────────────────────────── */
.cybele-form-nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 1.25rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid #e8ecf0 !important;
}

.cybele-btn-next,
.cybele-btn-submit {
    padding: .7rem 1.75rem !important;
    background: var(--cq-teal) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: background 200ms !important;
}

.cybele-btn-next:hover,
.cybele-btn-submit:hover {
    background: #1e95a3 !important;
}

.cybele-btn-prev {
    padding: .65rem 1.4rem !important;
    background: transparent !important;
    color: var(--cq-gray) !important;
    border: 1.5px solid #dde1e7 !important;
    border-radius: 8px !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: inherit !important;
}

.cybele-btn-prev:hover {
    border-color: var(--cq-teal) !important;
    color: var(--cq-teal) !important;
}

/* ── SERVICES SECTION ────────────────────────────────────────── */
.cybele-metier-services-section[hidden] { display: none !important; }

.cybele-services-empty {
    text-align: center !important;
    padding: 2rem 1rem !important;
    color: var(--cq-gray) !important;
}
.cybele-services-empty[hidden] { display: none !important; }

/* ── VIDEO ──────────────────────────────────────────────────── */
.cybele-video-preview { margin-top: .75rem !important; }
.cybele-video-preview[hidden] { display: none !important; }
.cybele-video-error {
    font-size: .82rem !important;
    color: #DC2626 !important;
    padding: .5rem .75rem !important;
    background: #FEE2E2 !important;
    border-radius: 6px !important;
}

/* ── PHOTO UPLOAD ────────────────────────────────────────────── */
.cybele-upload-zone {
    border: 2px dashed #dde1e7 !important;
    border-radius: var(--cq-radius) !important;
    padding: 1.5rem !important;
    text-align: center !important;
    cursor: pointer !important;
    background: #f8fafc !important;
    transition: all 200ms !important;
}

.cybele-upload-zone:hover { border-color: var(--cq-teal) !important; }

/* ── STATUS ─────────────────────────────────────────────────── */
.cybele-form-status { padding: .85rem 1rem !important; border-radius: 8px !important; margin-top: 1rem !important; }
.cybele-form-status[hidden] { display: none !important; }
.cybele-form-status.success { background: #D1FAE5 !important; color: #065F46 !important; }
.cybele-form-status.error   { background: #FEE2E2 !important; color: #991B1B !important; }

/* ── CONSENT ─────────────────────────────────────────────────── */
.cybele-consent-block {
    display: flex !important;
    align-items: flex-start !important;
    gap: .6rem !important;
    padding: .85rem 1rem !important;
    background: var(--cq-teal-light) !important;
    border-radius: 8px !important;
    margin-bottom: .75rem !important;
    font-size: .85rem !important;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .cybele-form-step { padding: 1.1rem !important; }
    .cybele-form-row--2col { grid-template-columns: 1fr !important; }
    .cybele-step-indicator { font-size: .65rem !important; padding: .5rem .25rem !important; }
}

/* ── DIVI NEUTRALISE ─────────────────────────────────────────── */
.cybele-questionnaire .et_pb_text_inner { all: unset !important; }
.cybele-questionnaire p { margin: 0 !important; }
.cybele-questionnaire ul, .cybele-questionnaire ol { list-style: none !important; padding: 0 !important; margin: 0 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   QUESTIONNAIRE — étape 2 étudiant / URLs titrées / métiers libres (v1.2)
   ══════════════════════════════════════════════════════════════════════════ */

.cybele-pro-notice {
    background: #FEF3C7;
    border-left: 4px solid #F59E0B;
    padding: .75rem 1rem;
    border-radius: 0 8px 8px 0;
    font-size: .875rem;
    margin-bottom: 1rem;
}
.cybele-field-inline { display: flex; gap: .5rem; align-items: center; }
.cybele-field-inline + .cybele-field-inline { margin-top: .4rem; }
.cybele-field-inline .cybele-input--short { max-width: 160px; }
.cybele-check-inline {
    display: flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
    font-size: .82rem;
    cursor: pointer;
}
.cybele-link-btn {
    font-size: .82rem;
    color: #2AACBB;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-weight: 600;
}
.cybele-link-btn:hover { text-decoration: underline; }
.cybele-field-optional { font-weight: 400; color: #9CA3AF; font-size: .75rem; }

/* ── Message du formulaire de lien de connexion ─────────────────────────── */
.cybele-magic-link-status {
    margin-top: .9rem; padding: .7rem .9rem; border-radius: 8px;
    font-size: .9rem; line-height: 1.45; border-left: 3px solid transparent;
}
.cybele-magic-link-status.success { background:#ECFDF5; color:#065F46; border-left-color:#10B981; }
.cybele-magic-link-status.error   { background:#FEF2F2; color:#991B1B; border-left-color:#DC2626; }