@import '/css/apply.css';

/* Variables CSS pour faciliter la maintenance */
:root {
    --formio-font-family: TWKLausanne, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --formio-primary-color: #7931f5;
    --formio-primary-light: #f4edff;
    --formio-border-color: #d1d5db;
    --formio-border-radius: 10px;
    --formio-input-height: 48px;
    --formio-padding: 14px;
    --formio-spacing: 1.25rem;
    --formio-spacing-sm: 0.75rem;
}

/* ============================================
   FORCE GLOBALE DE LA POLICE
   ============================================ */
#formio-container,
#formio-container *,
.formio-component,
.formio-component * {
    font-family: var(--formio-font-family) !important;
}

/* ============================================
   INPUTS, SELECT, TEXTAREA
   ============================================ */
.formio-component input[type="text"],
.formio-component input[type="email"],
.formio-component input[type="tel"],
.formio-component input[type="url"],
.formio-component input[type="password"],
.formio-component input[type="number"],
.formio-component input[type="date"],
.formio-component .form-control,
.formio-component select,
.formio-component textarea,
input.form-control,
select.form-control,
textarea.form-control,
.choices__input,
.choices__inner {
    font-family: var(--formio-font-family) !important;
    font-size: 16px !important;
    padding: var(--formio-padding) !important;
    border: 1px solid var(--formio-border-color) !important;
    border-radius: var(--formio-border-radius) !important;
    background: #FFFFFF !important;
    min-height: var(--formio-input-height) !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    line-height: 1.5 !important;
}

/* Textarea spécifique */
.formio-component textarea,
textarea.form-control {
    min-height: 120px !important;
    resize: vertical !important;
    line-height: 1.6 !important;
}

/* Focus state */
.formio-component input:focus,
.formio-component select:focus,
.formio-component textarea:focus,
.form-control:focus,
.choices__inner:focus,
.choices.is-focused .choices__inner {
    border-color: var(--formio-primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(68, 0, 162, 0.15) !important;
    outline: none !important;
}

@media (min-width: 992px) {
    #formio-container {
        max-width: 1400px;
        margin: 0 auto;
    }
}

/* ============================================
   LABELS
   ============================================ */
.formio-component label,
.formio-component .control-label,
.formio-component legend,
label.form-label,
.formio-component-label {
    font-family: var(--formio-font-family) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 145% !important;
    color: #000000 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Asterisk for required fields */
.formio-component label .field-required {
    color: #dc3545 !important;
    margin-left: 4px !important;
}

/* ============================================
   SELECT AVEC CHOICES.JS
   ============================================ */
.choices__list--dropdown,
.choices__list--single,
.choices__item {
    font-family: var(--formio-font-family) !important;
    font-size: 16px !important;
}

.choices__list--dropdown .choices__item {
    padding: 12px 16px !important;
}

.choices[data-type*="select-one"]::after {
    border-color: #333 transparent transparent transparent !important;
}

/* ============================================
   RADIO BUTTONS - STYLE CARTE AMÉLIORÉ
   ============================================ */

/* Container des options radio - affichage en flex */
.formio-component-radio .form-radio,
.formio-component-radio .radio-wrapper {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-top: 8px !important;
}

/* Chaque option radio individuelle */
.formio-component-radio .form-radio .form-check,
.formio-component-radio .form-radio .radio {
    display: inline-flex !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
}

/* Masquer le radio natif mais le garder accessible */
.formio-component-radio input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Label principal du groupe (titre) - NE PAS styliser comme une carte */
.formio-component-radio > label,
.formio-component-radio > .control-label,
.formio-component-radio > .col-form-label {
    font-family: var(--formio-font-family) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 145% !important;
    color: #000000 !important;
    margin-bottom: 8px !important;
    display: block !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    cursor: default !important;
}

/* Supprimer le pseudo-élément du label principal */
.formio-component-radio > label::before,
.formio-component-radio > .control-label::before,
.formio-component-radio > .col-form-label::before {
    display: none !important;
    content: none !important;
}

/* Style de base des labels d'options radio (les cartes cliquables) */
.formio-component-radio .form-radio label,
.formio-component-radio .form-radio .form-check-label,
.formio-component-radio .form-check label,
.formio-component-radio .radio label {
    font-family: var(--formio-font-family) !important;
    border: 2px solid var(--formio-border-color) !important;
    padding: 10px 18px !important;
    border-radius: var(--formio-border-radius) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    background: #fff !important;
    transition: all 0.2s ease !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    min-height: auto !important;
    margin-bottom: 0 !important;
    position: relative !important;
}

/* Indicateur de radio personnalisé - uniquement pour les options */
.formio-component-radio .form-radio label::before,
.formio-component-radio .form-radio .form-check-label::before,
.formio-component-radio .form-check label::before,
.formio-component-radio .radio label::before {
    content: '' !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid var(--formio-border-color) !important;
    border-radius: 50% !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
    background: #fff !important;
}

/* État hover des labels d'options radio */
.formio-component-radio .form-radio label:hover,
.formio-component-radio .form-check label:hover,
.formio-component-radio .radio label:hover {
    border-color: var(--formio-primary-color) !important;
    background: var(--formio-primary-light) !important;
}

.formio-component-radio .form-radio label:hover::before,
.formio-component-radio .form-check label:hover::before,
.formio-component-radio .radio label:hover::before {
    border-color: var(--formio-primary-color) !important;
}

/* État sélectionné - cibler le label après input checked */
.formio-component-radio .form-check input[type="radio"]:checked + label,
.formio-component-radio .radio input[type="radio"]:checked + label {
    border-color: var(--formio-primary-color) !important;
    background: var(--formio-primary-light) !important;
    font-weight: 500 !important;
    box-shadow: 0 0 0 3px rgba(121, 49, 245, 0.12) !important;
}

.formio-component-radio .form-check input[type="radio"]:checked + label::before,
.formio-component-radio .radio input[type="radio"]:checked + label::before {
    border-color: var(--formio-primary-color) !important;
    background: var(--formio-primary-color) !important;
    box-shadow: inset 0 0 0 3px #fff !important;
}

/* Pour les structures où le label contient l'input (alternative) */
.formio-component-radio .form-check:has(input:checked) label,
.formio-component-radio .radio:has(input:checked) label {
    border-color: var(--formio-primary-color) !important;
    background: var(--formio-primary-light) !important;
    font-weight: 500 !important;
    box-shadow: 0 0 0 3px rgba(121, 49, 245, 0.12) !important;
}

.formio-component-radio .form-check:has(input:checked) label::before,
.formio-component-radio .radio:has(input:checked) label::before {
    border-color: var(--formio-primary-color) !important;
    background: var(--formio-primary-color) !important;
    box-shadow: inset 0 0 0 3px #fff !important;
}

/* S'assurer qu'un seul radio peut être sélectionné - reset des non-sélectionnés */
.formio-component-radio .form-check:not(:has(input:checked)) label,
.formio-component-radio .radio:not(:has(input:checked)) label {
    border-color: var(--formio-border-color) !important;
    background: #fff !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}

.formio-component-radio .form-check:not(:has(input:checked)) label::before,
.formio-component-radio .radio:not(:has(input:checked)) label::before {
    border-color: var(--formio-border-color) !important;
    background: #fff !important;
    box-shadow: none !important;
}

/* ============================================
   CHECKBOXES
   ============================================ */
.formio-component-checkbox input[type="checkbox"],
.formio-component-selectboxes input[type="checkbox"],
.form-check-input {
    width: 20px !important;
    height: 20px !important;
    margin-right: 8px !important;
    cursor: pointer !important;
    border: 2px solid var(--formio-border-color) !important;
    border-radius: 4px !important;
}

.formio-component-checkbox label,
.formio-component-selectboxes label,
.form-check-label {
    font-family: var(--formio-font-family) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    font-weight: 400 !important;
    font-size: 16px !important;
}

.formio-component-checkbox input[type="checkbox"]:checked,
.formio-component-selectboxes input[type="checkbox"]:checked {
    background-color: var(--formio-primary-color) !important;
    border-color: var(--formio-primary-color) !important;
}

/* ============================================
   DATAGRID / EDITGRID
   ============================================ */
.formio-component-datagrid,
.formio-component-editgrid {
    background: #F9F7F4 !important;
    border-radius: 10px !important;
    padding: 20px !important;
    margin-top: 10px !important;
    margin-bottom: 20px !important;
}

.formio-component-datagrid h4,
.formio-component-editgrid h4 {
    font-family: var(--formio-font-family) !important;
    font-weight: 350 !important;
    font-size: 18px !important;
    line-height: 145% !important;
    color: #282828 !important;
    margin-bottom: 14px !important;
}

.formio-component-datagrid .formio-component,
.formio-component-editgrid .formio-component {
    margin-bottom: 16px !important;
}

/* Bouton "Ajouter" dans les grilles */
.formio-button-add-row,
button[ref="addButton"] {
    font-family: 'MDIO', monospace, var(--formio-font-family) !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 8px 16px !important;
    gap: 8px !important;
    min-width: 223px !important;
    height: 40px !important;
    background: #F9F7F4 !important;
    border: 1px solid #282828 !important;
    border-radius: 10px !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 150% !important;
    letter-spacing: -1px !important;
    text-transform: uppercase !important;
    color: #282828 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.formio-button-add-row:hover,
button[ref="addButton"]:hover {
    background: #f0ede8 !important;
}

/* ============================================
   FILE UPLOAD
   ============================================ */
.formio-component-file .file-drop-area {
    border: 2px dashed #5d90e6 !important;
    border-radius: var(--formio-border-radius) !important;
    padding: 40px 20px !important;
    text-align: center !important;
    background: #fafafa !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.formio-component-file .file-drop-area:hover {
    border-color: var(--formio-primary-color) !important;
    background: #f4edff !important;
}

.formio-component-file .file-drop-area .file-text {
    font-family: var(--formio-font-family) !important;
    font-size: 14px !important;
    color: #7c3aed !important;
    font-weight: 500 !important;
}

/* ============================================
   HELP TEXT & DESCRIPTIONS
   ============================================ */
.formio-component .form-text,
.formio-component .help-block,
.formio-component .field-description,
.form-text {
    font-family: var(--formio-font-family) !important;
    font-size: 14px !important;
    color: #6c757d !important;
    margin-top: 4px !important;
    line-height: 1.5 !important;
}

/* ============================================
   ERROR MESSAGES
   ============================================ */
.formio-component .formio-errors,
.formio-component .error,
.formio-component .has-error .form-control,
.invalid-feedback {
    font-family: var(--formio-font-family) !important;
    color: #dc3545 !important;
    font-size: 14px !important;
    margin-top: 4px !important;
}

.formio-component.has-error input,
.formio-component.has-error select,
.formio-component.has-error textarea {
    border-color: #dc3545 !important;
}

/* ============================================
   BUTTONS (NAVIGATION)
   ============================================ */
.btn-wizard-nav-next,
.btn-wizard-nav-previous,
.btn-wizard-nav-submit {
    font-family: 'MDIO', monospace, var(--formio-font-family) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.btn-wizard-nav-next .fa-angle-right::before {
    content: '' !important;
    display: inline-block;
    width: 20px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='14' viewBox='0 0 20 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.28516 12.6L15.7137 1.40002M15.7137 1.40002H4.28516M15.7137 1.40002V12.6' stroke='%23F9F7F4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 8px;
}

.btn-wizard-nav-previous .fa-angle-left::before {
    content: '' !important;
    display: inline-block;
    width: 20px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='14' viewBox='0 0 20 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7148 12.6L4.28627 1.40002M4.28627 1.40002H15.7148M4.28627 1.40002V12.6' stroke='%23282828' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 8px;
}

.btn-wizard-nav-next .fa-angle-right {
    font-family: inherit !important;
}
.btn-wizard-nav-precious .fa-angle-left {
    font-family: inherit !important;
}

/* ============================================
   WIZARD PAGES
   ============================================ */
.wizard-page {
    padding: 24px 0 !important;
}

.wizard-page h4 {
    font-family: var(--formio-font-family) !important;
    font-weight: 850 !important;
    font-size: 20px !important;
    line-height: 135% !important;
    color: #282828 !important;
    margin-bottom: 24px !important;
}

/* ============================================
   MASQUER BOUTONS PAR DÉFAUT
   ============================================ */
nav[aria-label="navigation"],
nav[aria-label="Wizard navigation"],
.wizard-nav-button:not(.btn-wizard-nav-next):not(.btn-wizard-nav-previous):not(.btn-wizard-nav-submit) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ============================================
   RESPONSIVE - MOBILE AMÉLIORÉ
   ============================================ */
@media (max-width: 768px) {
    :root {
        --formio-input-height: 44px;
        --formio-padding: 12px;
        --formio-spacing: 1rem;
        --formio-spacing-sm: 0.5rem;
    }

    .formio-component input,
    .formio-component select,
    .formio-component textarea {
        font-size: 16px !important; /* Évite le zoom auto sur iOS */
        padding: 12px !important;
    }

    .formio-component label,
    .formio-component .control-label {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }

    /* Radio buttons plus compacts en mobile - uniquement les options */
    .formio-component-radio .form-radio label,
    .formio-component-radio .form-check label,
    .formio-component-radio .radio label {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    .formio-component-radio .form-radio label::before,
    .formio-component-radio .form-check label::before,
    .formio-component-radio .radio label::before {
        width: 16px !important;
        height: 16px !important;
    }

    /* Label principal du groupe en mobile */
    .formio-component-radio > label,
    .formio-component-radio > .control-label {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }

    /* Cacher le stepper vertical en mobile */
    #vertical-stepper,
    .vertical-stepper,
    [id*="stepper"],
    #form-wrapper > aside,
    #form-wrapper > div:first-child:not(.wizard-page) {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
    }

    /* Layout mobile - formulaire pleine largeur */
    #form-wrapper {
        flex-direction: column !important;
        gap: 0 !important;
    }

    #form-wrapper > .wizard-page,
    #form-wrapper > div:last-child {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Réduire le conteneur sur mobile */
    #formio-container {
        padding: 0 !important;
    }

    /* Colonnes en stack sur mobile */
    .formio-component-columns > .row > [class*="col"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Boutons full width sur mobile */
    .formio-component-button button {
        width: 100% !important;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 991px) {
    .formio-component-columns > .row > [class*="col-md-6"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* ============================================
   PLACEHOLDER
   ============================================ */
.formio-component input::placeholder,
.formio-component textarea::placeholder,
.formio-component select::placeholder {
    font-family: var(--formio-font-family) !important;
    color: #999 !important;
    opacity: 1 !important;
}

/* ============================================
   ANIMATIONS SMOOTH
   ============================================ */
.formio-component input,
.formio-component select,
.formio-component textarea,
.formio-component button {
    transition: all 0.2s ease !important;
}

/* ============================================
   CORRECTIONS ESPACEMENTS & HARMONISATION
   ============================================ */

/* Réduire les marges excessives entre composants */
.formio-component {
    margin-bottom: var(--formio-spacing) !important;
}

.formio-component:last-child {
    margin-bottom: 0 !important;
}

/* Harmoniser les inputs, selects et textareas */
.formio-component input.form-control,
.formio-component select.form-control,
.formio-component textarea.form-control,
.formio-component .choices__inner {
    height: auto !important;
    min-height: var(--formio-input-height) !important;
    padding: var(--formio-padding) !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    border: 1px solid var(--formio-border-color) !important;
    border-radius: var(--formio-border-radius) !important;
    background: #fff !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Corriger les conteneurs de colonnes */
.formio-component-columns {
    margin-bottom: var(--formio-spacing) !important;
}

.formio-component-columns > .row {
    margin-left: -0.5rem !important;
    margin-right: -0.5rem !important;
    gap: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

.formio-component-columns > .row > [class*="col"] {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    margin-bottom: var(--formio-spacing-sm) !important;
}

/* Corriger les panels et fieldsets */
.formio-component-panel,
.formio-component-fieldset {
    margin-bottom: var(--formio-spacing) !important;
    padding: 0 !important;
}

.formio-component-panel > .card,
.formio-component-panel .card-body {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.formio-component-panel .card-header {
    padding: 0 0 var(--formio-spacing-sm) 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Supprimer les espaces vides des conteneurs */
.formio-component-content:empty,
.formio-component-htmlelement:empty {
    display: none !important;
}

/* Corriger l'alignement des boutons de navigation personnalisés */
.formio-component-button {
    margin-top: var(--formio-spacing) !important;
    margin-bottom: var(--formio-spacing-sm) !important;
}

/* Container de boutons - flexbox correct */
.formio-component-columns .formio-component-button {
    margin-top: 0 !important;
}

/* Fix pour les rangées de boutons */
.formio-component-columns:has(.formio-component-button) {
    margin-top: 1.5rem !important;
}

/* Corriger textarea qui déborde */
.formio-component textarea.form-control {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 100px !important;
    resize: vertical !important;
}

/* Uniformiser les selects (choices.js) */
.formio-component .choices,
.formio-component .choices__inner {
    min-height: var(--formio-input-height) !important;
}

.formio-component .choices__list--single .choices__item {
    padding: 0 !important;
    line-height: 1.4 !important;
}

.formio-component .choices[data-type*="select-one"] .choices__inner {
    padding-bottom: var(--formio-padding) !important;
}

/* Cacher la navigation par défaut de Formio (plus robuste) */
.formio-form > nav,
.formio-wizard > nav,
nav[aria-label="navigation"],
nav[aria-label="Wizard navigation"],
.formio-wizard-nav-container,
.btn-wizard-nav-cancel {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Cacher les boutons par défaut bleus de Formio */
.formio-form button.btn-primary.btn-wizard-nav-next,
.formio-form button.btn-primary.btn-wizard-nav-previous,
.formio-form button.btn-primary.btn-wizard-nav-submit,
button[ref="wizardNext"],
button[ref="wizardPrev"],
button[ref="wizardSubmit"] {
    display: none !important;
    visibility: hidden !important;
}

/* S'assurer que les boutons personnalisés sont visibles */
.formio-form button[name="data[next]"],
.formio-form button[name="data[precedent]"],
.formio-form button[name="data[previous]"],
.formio-form button[name="data[submit14]"] {
    display: inline-flex !important;
    visibility: visible !important;
}

/* ============================================
   STEPPER MOBILE HIDE (Renforcement)
   ============================================ */
@media (max-width: 991px) {
    /* Stepper vertical custom */
    #vertical-stepper,
    .vertical-stepper,
    .stepper-container,
    .stepper-sidebar,
    aside.stepper,
    [class*="stepper"]:not(.wizard-page) {
        display: none !important;
    }

    /* Form wrapper layout mobile */
    #form-wrapper,
    .form-wrapper {
        display: block !important;
    }

    #form-wrapper > *:not(.wizard-page):not([class*="content"]):first-child {
        display: none !important;
    }
}