/**
 * Formulaire Projet – Styles
 * Fichier : child-theme/includes/formulaire-projet/formulaire-projet.css
 */

/* ─── Variables ─────────────────────────────────────────────────────────────── */
#fp-wizard {
    --fp-primary       : #00437e;
    --fp-accent        : #f48b2e;
    --fp-text          : #1a1a2e;
    --fp-text-light    : #5a6070;
    --fp-border        : #dde3ec;
    --fp-bg            : #ffffff;
    --fp-bg-soft       : #f7f9fc;
    --fp-success       : #2e8b57;
    --fp-error-color   : #c0392b;
    --fp-radius        : 10px;
    --fp-radius-sm     : 6px;
    --fp-shadow        : 0 4px 24px rgba(0, 67, 126, 0.08);
    --fp-transition    : 0.22s ease;
    --fp-font          : inherit;
    --fp-max-width     : 640px;
}

/* ─── Conteneur principal ───────────────────────────────────────────────────── */
#fp-wizard {
    font-family     : var(--fp-font);
    max-width       : var(--fp-max-width);
    margin          : 0 auto;
    padding         : 40px 36px;
    background      : var(--fp-bg);
    border-radius   : var(--fp-radius);
    box-shadow      : var(--fp-shadow);
    color           : var(--fp-text);
    border          : 1px solid var(--fp-border);
}

/* ─── Barre de progression ──────────────────────────────────────────────────── */
.fp-progress {
    margin-bottom : 36px;
}

.fp-progress-bar {
    height           : 4px;
    background       : var(--fp-border);
    border-radius    : 2px;
    overflow         : hidden;
    margin-bottom    : 14px;
}

.fp-progress-fill {
    height           : 100%;
    background       : var(--fp-primary);
    border-radius    : 2px;
    transition       : width 0.4s ease;
    width            : 0%;
}

.fp-steps-labels {
    display          : flex;
    justify-content  : space-between;
}

.fp-step-label {
    font-size        : 12px;
    color            : var(--fp-text-light);
    font-weight      : 500;
    transition       : color var(--fp-transition);
    letter-spacing   : 0.02em;
}

.fp-step-label.active {
    color            : var(--fp-primary);
    font-weight      : 700;
}

.fp-step-label.done {
    color            : var(--fp-success);
}

/* ─── Étapes ────────────────────────────────────────────────────────────────── */
.fp-step {
    display          : none;
    animation        : fp-fade-in 0.28s ease;
}

.fp-step.active {
    display          : block;
}

@keyframes fp-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Titres ─────────────────────────────────────────────────────────────────── */
.fp-step-title {
    font-size        : 22px;
    font-weight      : 700;
    color            : var(--fp-primary);
    margin           : 0 0 6px;
    line-height      : 1.3;
}

.fp-step-subtitle {
    font-size        : 14px;
    color            : var(--fp-text-light);
    margin           : 0 0 28px;
}

/* ─── Champs ─────────────────────────────────────────────────────────────────── */
.fp-field {
    margin-bottom    : 22px;
}

.fp-label {
    display          : block;
    font-size        : 14px;
    font-weight      : 600;
    color            : var(--fp-text);
    margin-bottom    : 10px;
}

.fp-optional {
    font-weight      : 400;
    color            : var(--fp-text-light);
    font-size        : 12px;
}

.fp-input,
.fp-textarea {
    width            : 100%;
    padding          : 12px 14px;
    border           : 1.5px solid var(--fp-border);
    border-radius    : var(--fp-radius-sm);
    font-size        : 15px;
    font-family      : inherit;
    color            : var(--fp-text);
    background       : var(--fp-bg-soft);
    transition       : border-color var(--fp-transition), box-shadow var(--fp-transition);
    box-sizing       : border-box;
    outline          : none;
    -webkit-appearance: none;
}

.fp-input:focus,
.fp-textarea:focus {
    border-color     : var(--fp-primary);
    box-shadow       : 0 0 0 3px rgba(0, 67, 126, 0.10);
    background       : var(--fp-bg);
}

.fp-textarea {
    resize           : vertical;
    min-height       : 120px;
}

.fp-char-count {
    display          : block;
    text-align       : right;
    font-size        : 11px;
    color            : var(--fp-text-light);
    margin-top       : 5px;
}

.fp-hint {
    display          : block;
    font-size        : 12px;
    color            : var(--fp-text-light);
    margin-top       : 6px;
}

/* ─── Boutons de choix ──────────────────────────────────────────────────────── */
.fp-btn-group {
    display          : flex;
    flex-wrap        : wrap;
    gap              : 8px;
}

.fp-btn-choice {
    padding          : 9px 16px;
    border           : 1.5px solid var(--fp-border);
    border-radius    : 20px;
    background       : var(--fp-bg-soft);
    color            : var(--fp-text);
    font-size        : 14px;
    font-family      : inherit;
    cursor           : pointer;
    transition       : all var(--fp-transition);
    font-weight      : 500;
    line-height      : 1;
}

.fp-btn-choice:hover {
    border-color     : var(--fp-primary);
    color            : var(--fp-primary);
    background       : rgba(0, 67, 126, 0.05);
}

.fp-btn-choice.selected {
    border-color     : var(--fp-primary);
    background       : var(--fp-primary);
    color            : #fff;
}

/* ─── Checkboxes ─────────────────────────────────────────────────────────────── */
.fp-checkbox-group {
    display          : flex;
    flex-direction   : column;
    gap              : 10px;
}

.fp-checkbox-label {
    display          : flex;
    align-items      : center;
    gap              : 10px;
    font-size        : 14px;
    color            : var(--fp-text);
    cursor           : pointer;
    font-weight      : 400;
    user-select      : none;
}

.fp-checkbox {
    width            : 18px;
    height           : 18px;
    accent-color     : var(--fp-primary);
    cursor           : pointer;
    flex-shrink      : 0;
}

/* ─── Navigation ────────────────────────────────────────────────────────────── */
.fp-nav {
    display          : flex;
    justify-content  : flex-end;
    margin-top       : 32px;
}

.fp-nav--between {
    justify-content  : space-between;
    align-items      : center;
}

.fp-btn-next,
.fp-btn-submit {
    display          : inline-flex;
    align-items      : center;
    gap              : 8px;
    padding          : 12px 28px;
    background       : var(--fp-accent);
    color            : #fff;
    border           : none;
    border-radius    : var(--fp-radius-sm);
    font-size        : 15px;
    font-weight      : 700;
    font-family      : inherit;
    cursor           : pointer;
    transition       : background var(--fp-transition), transform var(--fp-transition);
    line-height      : 1;
}

.fp-btn-next:hover,
.fp-btn-submit:hover {
    background       : #d97820;
    transform        : translateY(-1px);
}

.fp-btn-next:active,
.fp-btn-submit:active {
    transform        : translateY(0);
}

.fp-btn-submit:disabled {
    cursor           : not-allowed;
    opacity          : 0.7;
    transform        : none;
}

.fp-arrow {
    font-size        : 16px;
    transition       : transform var(--fp-transition);
}

.fp-btn-next:hover .fp-arrow {
    transform        : translateX(3px);
}

.fp-btn-back {
    background       : transparent;
    border           : none;
    color            : var(--fp-text-light);
    font-size        : 14px;
    font-family      : inherit;
    cursor           : pointer;
    padding          : 8px 0;
    transition       : color var(--fp-transition);
    font-weight      : 500;
}

.fp-btn-back:hover {
    color            : var(--fp-primary);
}

/* ─── Spinner ────────────────────────────────────────────────────────────────── */
.fp-spinner {
    display          : none;
    width            : 16px;
    height           : 16px;
    border           : 2px solid rgba(255,255,255,0.4);
    border-top-color : #fff;
    border-radius    : 50%;
    animation        : fp-spin 0.7s linear infinite;
    flex-shrink      : 0;
}

@keyframes fp-spin {
    to { transform: rotate(360deg); }
}

/* ─── Message d'erreur ──────────────────────────────────────────────────────── */
.fp-error {
    display          : none;
    font-size        : 13px;
    color            : var(--fp-error-color);
    margin-top       : 14px;
    padding          : 10px 14px;
    background       : rgba(192, 57, 43, 0.08);
    border-radius    : var(--fp-radius-sm);
    border-left      : 3px solid var(--fp-error-color);
}

.fp-error.visible {
    display          : block;
    animation        : fp-fade-in 0.2s ease;
}

/* ─── Confirmation ───────────────────────────────────────────────────────────── */
.fp-step--confirm {
    text-align       : center;
    padding          : 20px 0;
}

.fp-confirm-icon {
    width            : 64px;
    height           : 64px;
    background       : var(--fp-success);
    color            : #fff;
    border-radius    : 50%;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    font-size        : 28px;
    font-weight      : 700;
    margin           : 0 auto 24px;
    animation        : fp-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fp-pop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.fp-confirm-text {
    font-size        : 16px;
    color            : var(--fp-text);
    line-height      : 1.7;
    margin           : 0 0 10px;
}

.fp-confirm-delay {
    font-size        : 13px;
    color            : var(--fp-text-light);
    margin           : 0 0 16px;
}

.fp-confirm-explore {
    font-size        : 14px;
    color            : var(--fp-text-light);
    margin           : 0;
}

.fp-confirm-link {
    color            : var(--fp-primary);
    font-weight      : 600;
    text-decoration  : underline;
    text-underline-offset: 2px;
    transition       : color var(--fp-transition);
}

.fp-confirm-link:hover {
    color            : var(--fp-accent);
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    #fp-wizard {
        padding      : 28px 20px;
    }

    .fp-btn-group {
        flex-direction: column;
    }

    .fp-btn-choice {
        border-radius: var(--fp-radius-sm);
        text-align   : left;
    }

    .fp-step-title {
        font-size    : 19px;
    }
}