/**
 * Page /demande - chargeur générique de formulaires Form.io.
 */

.dyna-form-root {
    --dyna-font-family: var(--site-font-sans, 'Gotham', 'Montserrat', sans-serif);
}

#ctkOffcanvas .offcanvas-body {
    background-color: white !important;
}

.celtiis-demande {
    font-family: 'Gotham', sans-serif;
}

/* Webcomponent <dyna-form> : aligne sa font-family sur celle du site. */
.celtiis-demande__formio-host,
dyna-form {
    --dyna-font-family: var(--site-font-sans, 'Gotham', 'Montserrat', sans-serif);
}

.container.celtiis-demande__inner {
    width: min(100% - 32px, 820px);
    padding: 32px 0 0;
    max-width: 820px;
    margin: 0 auto;
}

/* État vide (?render manquant) ────────────────────────────────── */
.celtiis-demande__empty {
    padding: 40px 32px;
    background: #F1F4F9;
    border: 1px dashed rgba(29, 61, 112, 0.24);
    border-radius: 14px;
    text-align: center;
    color: #64748B;
    font-size: 15px;
    line-height: 1.55;
}

/* Loader */
.celtiis-demande__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 48px 24px;
    color: #64748B;
    font-size: 14px;
}

.celtiis-demande__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(29, 61, 112, 0.14);
    border-top-color: #1D3D70;
    border-radius: 50%;
    animation: celtiis-demande-spin 0.85s linear infinite;
}

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

/* Statuts émis par <dyna-form> (info / error / success) ────────── */
.celtiis-demande__status {
    margin: 16px 0 0;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
}

.celtiis-demande__status.is-error {
    background: #FEF2F2;
    border-color: #FCA5A5;
    color: #B91C1C;
}

.celtiis-demande__status.is-success {
    background: rgba(141, 198, 63, 0.12);
    border-color: rgba(141, 198, 63, 0.35);
    color: #1D3D70;
}

.celtiis-demande__status.is-info {
    background: #F1F4F9;
    border-color: rgba(29, 61, 112, 0.14);
    color: #1D3D70;
}

.celtiis-demande__done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 32px;
    background: #ffffff;
    border: 1px solid #E5E9F0;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 12px 28px -22px rgba(15, 23, 42, 0.16);
}

.celtiis-demande__done-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 999px;
    background: rgba(141, 198, 63, 0.15);
    color: #8DC63F;
    margin-bottom: 4px;
}

.celtiis-demande__done-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #1D3D70;
    letter-spacing: -0.015em;
}

.celtiis-demande__done-msg {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #475569;
    max-width: 480px;
}

.celtiis-demande__formio-host {
    background: #ffffff;
    border: 1px solid #E5E9F0;
    border-radius: 16px;
    padding: 26px 24px;
}

/* Dans un modal / offcanvas : le conteneur porte déjà son propre visuel. */
.modal .celtiis-demande__formio-host,
.offcanvas .celtiis-demande__formio-host,
.cbk-modal .celtiis-demande__formio-host,
.cw-form-modal .celtiis-demande__formio-host {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}


.celtiis-demande__formio-host {
    --dyna-field-notch-bg: #ffffff;
}

/* Espacement généreux entre chaque composant Form.io. */
.celtiis-demande__formio-host .formio-component {
    margin-bottom: 32px;
}
.celtiis-demande__formio-host .formio-component:last-child {
    margin-bottom: 0;
}

/* Wrapper des composants avec label flottant : contexte pour l'absolute. */
.celtiis-demande__formio-host .formio-component-textfield,
.celtiis-demande__formio-host .formio-component-email,
.celtiis-demande__formio-host .formio-component-phoneNumber,
.celtiis-demande__formio-host .formio-component-number,
.celtiis-demande__formio-host .formio-component-password,
.celtiis-demande__formio-host .formio-component-url,
.celtiis-demande__formio-host .formio-component-textarea,
.celtiis-demande__formio-host .formio-component-select {
    position: relative;
}

/* Label au REPOS : positionné comme un placeholder (centre vertical). */
.celtiis-demande__formio-host .formio-component-textfield > .col-form-label,
.celtiis-demande__formio-host .formio-component-email > .col-form-label,
.celtiis-demande__formio-host .formio-component-phoneNumber > .col-form-label,
.celtiis-demande__formio-host .formio-component-number > .col-form-label,
.celtiis-demande__formio-host .formio-component-password > .col-form-label,
.celtiis-demande__formio-host .formio-component-url > .col-form-label,
.celtiis-demande__formio-host .formio-component-select > .col-form-label {
    position: absolute;
    top: 25px;
    left: 18px;
    z-index: 2;
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: 15px;
    font-weight: 400;
    color: black;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-50%);
    transition: top .22s cubic-bezier(0.16, 1, 0.3, 1),
                left .18s ease,
                padding .16s ease,
                background-color .16s ease,
                font-size .18s ease,
                font-weight .18s ease,
                color .18s ease;
}
.celtiis-demande__formio-host .formio-component-file>label.col-form-label {
    font-size: 15px;
    font-weight: 400;
    color: black;
    line-height: 1;
}
/* Textarea : label proche du haut (le champ est haut, pas de centrage). */
.celtiis-demande__formio-host .formio-component-textarea > .col-form-label {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: 15px;
    font-weight: 500;
    color: #64748B;
    line-height: 1;
    pointer-events: none;
    transition: top .22s cubic-bezier(0.16, 1, 0.3, 1),
                left .18s ease,
                padding .16s ease,
                background-color .16s ease,
                font-size .18s ease,
                font-weight .18s ease,
                color .18s ease;
}

/* Champ : bordure fine 1px, radius 12px, height 56px, padding centré vertical. */
.celtiis-demande__formio-host .form-control,
.celtiis-demande__formio-host .choices__inner {
    border: 1px solid #E5E9F0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .2s ease;
}
.celtiis-demande__formio-host .formio-component-textfield .form-control,
.celtiis-demande__formio-host .formio-component-email .form-control,
.celtiis-demande__formio-host .formio-component-phoneNumber .form-control,
.celtiis-demande__formio-host .formio-component-number .form-control,
.celtiis-demande__formio-host .formio-component-password .form-control,
.celtiis-demande__formio-host .formio-component-url .form-control {
    height: 56px;
    padding: 14px 18px;
    font-size: 15px;
    color: #1D3D70;
    line-height: 1.3;
}
.celtiis-demande__formio-host .formio-component-textarea .form-control {
    min-height: 120px;
    padding: 18px;
    font-size: 15px;
    color: #1D3D70;
    line-height: 1.5;
}
/* Placeholder invisible tant que le label sert de placeholder visuel. */
.celtiis-demande__formio-host .formio-component-textfield .form-control::placeholder,
.celtiis-demande__formio-host .formio-component-email .form-control::placeholder,
.celtiis-demande__formio-host .formio-component-phoneNumber .form-control::placeholder,
.celtiis-demande__formio-host .formio-component-number .form-control::placeholder,
.celtiis-demande__formio-host .formio-component-password .form-control::placeholder,
.celtiis-demande__formio-host .formio-component-url .form-control::placeholder,
.celtiis-demande__formio-host .formio-component-textarea .form-control::placeholder {
    color: transparent;
    transition: color .12s ease;
}

/* Focus : bordure primary Celtiis + subtile halo. */
.celtiis-demande__formio-host .form-control:focus,
.celtiis-demande__formio-host .choices__inner:focus-within {
    border-color: #8DC63F;
    box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.15);
    outline: 0;
}

/* Label MONTÉ : focus OU champ non-vide (placeholder-shown = false pour les
   inputs, `.choices__item:not(.choices__placeholder)` pour les selects).
   Requiert `:has()` (support 92%+ en 2026, tous browsers modernes). */
.celtiis-demande__formio-host .formio-component-textfield:has(.form-control:focus) > .col-form-label,
.celtiis-demande__formio-host .formio-component-textfield:has(.form-control:not(:placeholder-shown)) > .col-form-label,
.celtiis-demande__formio-host .formio-component-email:has(.form-control:focus) > .col-form-label,
.celtiis-demande__formio-host .formio-component-email:has(.form-control:not(:placeholder-shown)) > .col-form-label,
.celtiis-demande__formio-host .formio-component-phoneNumber:has(.form-control:focus) > .col-form-label,
.celtiis-demande__formio-host .formio-component-phoneNumber:has(.form-control:not(:placeholder-shown)) > .col-form-label,
.celtiis-demande__formio-host .formio-component-number:has(.form-control:focus) > .col-form-label,
.celtiis-demande__formio-host .formio-component-number:has(.form-control:not(:placeholder-shown)) > .col-form-label,
.celtiis-demande__formio-host .formio-component-password:has(.form-control:focus) > .col-form-label,
.celtiis-demande__formio-host .formio-component-password:has(.form-control:not(:placeholder-shown)) > .col-form-label,
.celtiis-demande__formio-host .formio-component-url:has(.form-control:focus) > .col-form-label,
.celtiis-demande__formio-host .formio-component-url:has(.form-control:not(:placeholder-shown)) > .col-form-label,
.celtiis-demande__formio-host .formio-component-textarea:has(.form-control:focus) > .col-form-label,
.celtiis-demande__formio-host .formio-component-textarea:has(.form-control:not(:placeholder-shown)) > .col-form-label,
.celtiis-demande__formio-host .formio-component-select:has(.choices__inner:focus-within) > .col-form-label,
.celtiis-demande__formio-host .formio-component-select:has(.choices.is-open) > .col-form-label,
.celtiis-demande__formio-host .formio-component-select:has(.choices__list--single .choices__item:not(.choices__placeholder)) > .col-form-label {
    top: 0;
    left: 14px;
    padding: 0 6px;
    background: var(--dyna-field-notch-bg);
    font-size: 12.5px;
    font-weight: 600;
    color: #1D3D70;
}

/* Focus : label prend la couleur primary Celtiis. */
.celtiis-demande__formio-host .formio-component-textfield:has(.form-control:focus) > .col-form-label,
.celtiis-demande__formio-host .formio-component-email:has(.form-control:focus) > .col-form-label,
.celtiis-demande__formio-host .formio-component-phoneNumber:has(.form-control:focus) > .col-form-label,
.celtiis-demande__formio-host .formio-component-number:has(.form-control:focus) > .col-form-label,
.celtiis-demande__formio-host .formio-component-password:has(.form-control:focus) > .col-form-label,
.celtiis-demande__formio-host .formio-component-url:has(.form-control:focus) > .col-form-label,
.celtiis-demande__formio-host .formio-component-textarea:has(.form-control:focus) > .col-form-label,
.celtiis-demande__formio-host .formio-component-select:has(.choices__inner:focus-within) > .col-form-label,
.celtiis-demande__formio-host .formio-component-select:has(.choices.is-open) > .col-form-label {
    color: #1D3D70 !important;
}

/* Choices.js (selects) : même look que les inputs, item centré verticalement. */
.celtiis-demande__formio-host .choices__inner {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 14px 40px 14px 18px;
}
.celtiis-demande__formio-host .choices__list--single {
    display: flex;
    align-items: center;
    padding: 0;
    width: 100%;
    height: 100%;
}
.celtiis-demande__formio-host .choices__list--single .choices__item {
    padding: 0;
    line-height: 1.5;
    font-size: 15px;
    color: #1D3D70;
}
/* Placeholder Choices.js masqué : le label sert de placeholder visuel. */
.celtiis-demande__formio-host .choices__list--single .choices__placeholder {
    color: transparent;
    opacity: 0;
}

/* Notch background dans les modaux (le fond du modal-body varie). */
.modal .celtiis-demande__formio-host,
.celtiis-sim-preorder-modal .celtiis-demande__formio-host {
    --dyna-field-notch-bg: #F5F7FA;
}
.offcanvas .celtiis-demande__formio-host {
    --dyna-field-notch-bg: #F5F7FA;
}
.cbk-modal .celtiis-demande__formio-host {
    --dyna-field-notch-bg: #ffffff;
}

/* Dépôt de fichiers Form.io */
.celtiis-demande__formio-host .formio-component-file .list-group-header {
    display: none !important;
}

.celtiis-demande__formio-host .formio-component-file .list-group {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
}

.celtiis-demande__formio-host .formio-component-file .list-group:empty,
.celtiis-demande__formio-host .formio-component-file .list-group:not(:has(.list-group-item:not(.list-group-header))) {
    display: none;
}

.celtiis-demande__formio-host .formio-component-file .list-group-item:not(.list-group-header) {
    margin-bottom: 8px;
    padding: 12px 14px;
    border: 1px solid #DFE5F2;
    border-radius: 12px;
    background: #F8FAFC;
    color: #1D3D70;
}

.celtiis-demande__formio-host .formio-component-file .fileSelector {
    min-height: 110px;
    padding: 18px 20px;
    border: 2px dashed #C9D3E5;
    border-radius: 16px;
    background: #F8FAFC;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-align: center;
    transition: border-color .2s ease, background-color .2s ease;
}

.celtiis-demande__formio-host .formio-component-file .fileSelector::before {
    content: "Glissez-déposez vos fichiers ici";
    color: #1D3D70;
    font-size: 15px;
    font-weight: 500;
}

.celtiis-demande__formio-host .formio-component-file .fileSelector.fileDragOver,
.celtiis-demande__formio-host .formio-component-file .fileSelector:hover {
    border-color: #8DC63F;
    background: rgba(141, 198, 63, 0.08);
}

.celtiis-demande__formio-host .formio-component-file .browse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1.5px solid #1D3D70;
    border-radius: 999px;
    background: #fff;
    color: #1D3D70;
    font-size: 0;
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 767px) {
    .container.celtiis-demande__inner {
        width: min(100% - 24px, 820px);
        padding-top: 24px;
    }

    .celtiis-demande__formio-host {
        padding: 22px 16px;
    }
}

.celtiis-demande__formio-host .formio-component-file .browse::after {
    content: "Choisir un fichier";
    font-size: 14px;
}

.celtiis-demande__formio-host .formio-component-file .browse .bi {
    font-size: 18px;
}

.card.border {
    border: 1px solid #E5E9F0 !important;
    border-radius: 16px !important;
}

.celtiis-demande__formio-host .btn-primary {
    background: #1D3D70;
    border-color: #1D3D70;
    color: white;
    border-radius: 999px;
    padding: 12px 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.celtiis-demande__formio-host .btn-primary:hover,
.celtiis-demande__formio-host .btn-primary:focus {
    background: #15305a;
    border-color: #15305a;
    color: white;
    filter: brightness(0.98);
}

.btn-wizard-nav-previous, .btn-wizard-nav-cancel {
    background: transparent !important;
    color: #1D3D70 !important;
    border: 1px solid #1D3D70 !important;
}
.celtiis-demande__formio-host .formio-wizard-nav-container {
    display: flex;
    justify-content: space-between;
}

/* Étapes des formulaires Wizard */
.celtiis-demande__formio-host nav[aria-label="Wizard navigation"] {
    margin: 0 0 28px;
}

.celtiis-demande__formio-host .pagination {
    counter-reset: demande-step;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
}

.celtiis-demande__formio-host .pagination > .page-item {
    position: relative;
    display: block;
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: center;
}

.celtiis-demande__formio-host .pagination .page-item + .page-item::before {
    content: "";
    position: absolute;
    top: 20px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: #8DC63F;
    z-index: 0;
}

.celtiis-demande__formio-host .pagination .page-item .page-link {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 6px;
    border: 0;
    border-radius: 0;
    background-color: transparent !important;
    color: #1D3D70;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
    box-shadow: none;
}

.celtiis-demande__formio-host .pagination .page-item .page-link::before {
    counter-increment: demande-step;
    content: counter(demande-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #8DC63F;
    border: 1.5px solid #8DC63F;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}

.celtiis-demande__formio-host .pagination .page-item.active .page-link {
    color: #1D3D70 !important;
    font-weight: 700;
}

.celtiis-demande__formio-host .pagination .page-item.active .page-link::before {
    background: #1D3D70;
    border-color: #1D3D70;
    box-shadow: 0 0 0 4px rgba(29, 61, 112, 0.2);
}

.celtiis-demande__formio-host .pagination .page-item.active ~ .page-item .page-link {
    color: #54627F !important;
}

.celtiis-demande__formio-host .pagination .page-item.active ~ .page-item .page-link::before {
    background: #F4F7FB;
    border-color: #DFE5F2;
    color: #54627F;
}

.celtiis-demande__formio-host .pagination .page-item.active ~ .page-item::before {
    background: #DFE5F2;
}

.formio-component-panel .card-header {
    background-color: light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
    border-radius: 16px 16px 0 0 !important;
    border-bottom: 1px solid #E5E9F0 !important;
}
.formio-component-panel .card-body {
    background: white !important;
    border-radius: 0 0 16px 16px !important;
}

.is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] {
    border-color: #E5E9F0 !important;
    border-radius: 5px !important;
}

/* Banner Assistance en bas de page */
.celtiis-demande__assistance {
    background: #ffffff;
    padding-top: 25px;
    padding-bottom: 32px;
    margin-top: 40px;
}

@media (max-width: 640px) {
    .celtiis-demande__inner { padding: 24px 16px 48px; }
    .celtiis-demande__formio-host { padding: 22px 18px; }
    .celtiis-demande__done { padding: 36px 24px; }

    .celtiis-demande__formio-host .pagination .page-item .page-link {
        font-size: 0;
        gap: 0;
    }

    .celtiis-demande__formio-host .pagination .page-item .page-link::before {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .celtiis-demande__formio-host .pagination .page-item + .page-item::before {
        top: 17px;
    }
}