/* ── ELF Public Styles ──────────────────────────────────────── */
:root {
    --elf-salmon:  #E8927C;
    --elf-salmon-h:#d4806a;
    --elf-navy:    #0d1b4b;
    --elf-white:   #FFFFFF;
    --elf-dark:    #1a1a3e;
    --elf-gray:    #6b7280;
    --elf-border:  #d1d5db;
    --elf-light:   #f9fafb;
    --elf-radius:  8px;
}

/* ── Pleine largeur ───────────────────────────────────────────── */
body:has(#elf-app) { overflow-x: hidden; background-color: #ffffff !important; }

/* ── Cacher le titre de la page des examens ───────────────────── */
body:has(#elf-app) h1.wp-block-post-title,
body:has(#elf-app) h1.entry-title,
body:has(#elf-app) .page-title,
body:has(#elf-app) .entry-header { display: none !important; }

#elf-app {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    background-color: #ffffff !important;
    padding: 48px 20px 80px !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── Carte blanche ────────────────────────────────────────────── */
#elf-app .elf-form-card {
    background: var(--elf-white) !important;
    border-radius: 12px !important;
    padding: 44px 52px !important;
    width: 100% !important;
    max-width: 820px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 8px 32px rgba(0,0,0,.12) !important;
    border: 1px solid #e5e7eb !important;
    box-sizing: border-box !important;
}

/* ── Blocs de section ─────────────────────────────────────────── */
.elf-form-block {
    margin-bottom: 36px;
}
.elf-form-block:last-child { margin-bottom: 0; }

.elf-block-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--elf-dark);
    margin: 0 0 6px;
    padding: 0;
    border: none;
    display: inline-block;
}
.elf-block-title::after {
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background: var(--elf-salmon);
    margin-top: 5px;
    margin-bottom: 18px;
}

.elf-block-sep {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 32px 0;
}

/* ── Liste radio (motifs et examens) ──────────────────────────── */
.elf-radio-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.elf-radio-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
}
.elf-radio-item:last-child { border-bottom: none; }
.elf-radio-item label {
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    flex: 1;
    padding-right: 16px;
    line-height: 1.4;
}
.elf-radio-item input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--elf-navy);
    flex-shrink: 0;
    cursor: pointer;
}
.elf-radio-item:has(input:checked) label { color: var(--elf-dark); font-weight: 600; }
.elf-radio-item label { display: flex; flex-direction: column; gap: 3px; }
.elf-result-delay {
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
    background: var(--elf-salmon);
    border-radius: 4px;
    padding: 2px 8px;
    display: inline-block;
    width: fit-content;
}

/* ── Grille 2 colonnes ────────────────────────────────────────── */
#elf-app .elf-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
}

#elf-app .elf-field-full { display: block !important; margin-bottom: 14px !important; width: 100% !important; }
#elf-app .elf-field-full:last-child { margin-bottom: 0 !important; }

/* ── Champs texte / select ────────────────────────────────────── */
#elf-app .elf-ref-input,
#elf-app .elf-ref-select {
    display: block !important;
    width: 100% !important;
    padding: 13px 16px !important;
    border: 1.5px solid var(--elf-border) !important;
    border-radius: var(--elf-radius) !important;
    font-size: 14px !important;
    color: var(--elf-dark) !important;
    background: var(--elf-white) !important;
    box-sizing: border-box !important;
    transition: border-color .15s, box-shadow .15s;
    outline: none !important;
    margin: 0 !important;
}
#elf-app .elf-ref-input::placeholder { color: #9ca3af; }
#elf-app .elf-ref-input:focus,
#elf-app .elf-ref-select:focus {
    border-color: var(--elf-salmon) !important;
    box-shadow: 0 0 0 3px rgba(232,146,124,.12) !important;
}

#elf-app .elf-ref-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 38px !important;
    cursor: pointer !important;
}

/* ── Fix doublons : le thème client transforme les <select> via Selectize.js ──── */
/* Selectize recopie la classe du select (elf-ref-select / elf-fselect) sur ses   */
/* propres éléments → le style de champ s'applique 2 fois (double cadre).          */

/* 0. Le <select> d'origine masqué par Selectize (.selectized) doit RESTER caché.  */
/*    Sinon le display:block !important du plugin le réaffiche en boîte vide.       */
#elf-app select.selectized { display: none !important; }

/* 1. Le wrapper généré par Selectize ne doit PAS redessiner une boîte.            */
#elf-app .selectize-control.elf-ref-select,
#elf-app .selectize-control.elf-fselect {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    cursor: auto !important;
}

/* 2. On habille le vrai champ visible (.selectize-input) comme les autres champs. */
#elf-app .selectize-control .selectize-input {
    display: block !important;
    width: 100% !important;
    padding: 13px 38px 13px 16px !important;
    border: 1.5px solid var(--elf-border) !important;
    border-radius: var(--elf-radius) !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    color: var(--elf-dark) !important;
    background: var(--elf-white) !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    cursor: pointer !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
}
#elf-app .selectize-control .selectize-input.focus,
#elf-app .selectize-control .selectize-input.dropdown-active {
    border-color: var(--elf-salmon) !important;
    box-shadow: 0 0 0 3px rgba(232,146,124,.12) !important;
}
/* Le petit input interne de recherche : transparent, sans bordure.               */
/* pointer-events:none → le re-clic tombe sur le contrôle (Selectize bascule alors */
/* .dropdown-active) ce qui permet de REFERMER le menu au 2e clic.                 */
#elf-app .selectize-input > input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
    color: var(--elf-dark) !important;
    pointer-events: none !important;
}

/* 3. Le menu déroulant : une boîte propre (il hérite aussi de elf-ref-select).    */
#elf-app .selectize-dropdown.elf-ref-select,
#elf-app .selectize-dropdown.elf-fselect,
#elf-app .selectize-dropdown {
    padding: 0 !important;
    border: 1.5px solid var(--elf-border) !important;
    border-radius: var(--elf-radius) !important;
    background: var(--elf-white) !important;
    background-image: none !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
    margin-top: 4px !important;
    overflow: hidden !important;
}
#elf-app .selectize-dropdown .option {
    padding: 10px 16px !important;
    font-size: 14px !important;
    color: var(--elf-dark) !important;
    cursor: pointer !important;
    background: var(--elf-white) !important;
}
#elf-app .selectize-dropdown .option.active,
#elf-app .selectize-dropdown .active[data-selectable] {
    background: var(--elf-light) !important;
}

/* 4. FERMETURE du menu. La .selectize-dropdown hérite de la classe elf-ref-select,  */
/*    donc le #elf-app .elf-ref-select{display:block!important} du plugin la forçait  */
/*    TOUJOURS visible → impossible à refermer. On la masque par défaut et on ne      */
/*    l'affiche que quand Selectize pose la classe .dropdown-active (ouverture).      */
#elf-app .selectize-dropdown { display: none !important; }
#elf-app .selectize-control.dropdown-active .selectize-dropdown,
#elf-app .selectize-input.dropdown-active ~ .selectize-dropdown { display: block !important; }

/* Champs conditionnels masqués */
.elf-conditional { display: none !important; margin-top: 14px; }

/* ── Label bold au-dessus (pour fichiers et questions) ────────── */
.elf-field-label-bold {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--elf-dark);
    margin-bottom: 8px;
}
.elf-req { color: #ef4444; }

/* ── Hint sous un champ ───────────────────────────────────────── */
.elf-hint {
    font-size: 12px;
    color: var(--elf-gray);
    font-style: italic;
    margin-top: 4px;
    display: block;
}

/* ── Upload natif ─────────────────────────────────────────────── */
.elf-upload-wrap { margin-bottom: 20px; }
.elf-upload-wrap input[type="file"] {
    display: block;
    font-size: 14px;
    color: var(--elf-dark);
    cursor: pointer;
    margin-bottom: 4px;
}

/* ── Session select + prix ────────────────────────────────────── */
.elf-session-price-block {
    margin-top: 16px;
    padding: 16px 18px;
    background: var(--elf-light);
    border: 1px solid #e5e7eb;
    border-radius: var(--elf-radius);
}
.elf-session-price-block .elf-exam-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--elf-dark);
    margin: 0 0 6px;
}
.elf-session-price-block .elf-prix-label { font-size: 14px; color: var(--elf-gray); margin: 0 0 2px; }
.elf-session-price-block .elf-prix-value { font-size: 20px; font-weight: 700; color: var(--elf-salmon); }

/* ── Alertes ──────────────────────────────────────────────────── */
.elf-alert {
    padding: 12px 16px;
    border-radius: var(--elf-radius);
    font-size: 14px;
    line-height: 1.5;
    margin-top: 12px;
    margin-bottom: 4px;
}
.elf-alert-warning { background: #fffbf0; border: 1px solid #f6ad55; color: #7b341e; }
.elf-alert-info    { background: #eff6ff; border: 1px solid #93c5fd; color: #1e40af; }
.elf-alert a       { color: inherit; font-weight: 600; }

/* ── Checkboxes ───────────────────────────────────────────────── */
.elf-check-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    margin-bottom: 14px;
    line-height: 1.5;
}
.elf-check-label input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: var(--elf-navy);
    flex-shrink: 0;
}
.elf-check-label a { color: var(--elf-salmon); }
.elf-check-label a:hover { text-decoration: underline; }

/* ── Bloc prix total ──────────────────────────────────────────── */
.elf-total-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--elf-light);
    border: 1px solid #e5e7eb;
    border-radius: var(--elf-radius);
    padding: 16px 20px;
    margin: 20px 0;
}
.elf-total-label { font-size: 15px; font-weight: 500; color: var(--elf-dark); }
.elf-total-value { font-size: 22px; font-weight: 700; color: var(--elf-salmon); }

/* ── Bouton submit ────────────────────────────────────────────── */
.elf-btn-submit {
    width: 100%;
    padding: 16px;
    background: var(--elf-salmon) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--elf-radius);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background .15s;
    margin-top: 20px;
}
.elf-btn-submit:hover  { background: var(--elf-salmon-h) !important; }
.elf-btn-submit:disabled { opacity: .65; cursor: not-allowed; }

.elf-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: var(--elf-gray);
    margin-top: 12px;
}

/* ── Spinner ──────────────────────────────────────────────────── */
.elf-spinner {
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: elf-spin .7s linear infinite;
    display: inline-block;
}
@keyframes elf-spin { to { transform: rotate(360deg); } }

/* ── Messages erreur ──────────────────────────────────────────── */
.elf-msg-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    border-radius: var(--elf-radius);
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.7;
    margin-top: 16px;
}
.elf-msg-error ul { margin: 6px 0 0 18px; padding: 0; }
.elf-msg-error li { margin-bottom: 2px; }

/* ── Sessions loading ─────────────────────────────────────────── */
.elf-loading-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--elf-gray);
    padding: 8px 0;
}
.elf-spinner-sm {
    width: 14px; height: 14px;
    border: 2px solid #d1d5db;
    border-top-color: var(--elf-salmon);
    border-radius: 50%;
    animation: elf-spin .7s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

/* ── Page succès / remboursement ──────────────────────────────── */
.elf-payment-success {
    text-align: center;
    padding: 80px 20px;
    max-width: 480px;
    margin: 0 auto;
}
.elf-success-icon {
    width: 72px; height: 72px;
    background: var(--elf-salmon);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; color: #fff;
    margin: 0 auto 24px;
}
.elf-payment-success h2 { font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.elf-payment-success p  { color: rgba(255,255,255,.75); margin-bottom: 28px; }
.elf-btn-back {
    display: inline-block;
    padding: 12px 28px;
    background: var(--elf-salmon);
    color: #fff;
    border-radius: var(--elf-radius);
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
}
.elf-btn-back:hover { background: var(--elf-salmon-h); color: #fff; }

/* ── Récapitulatif paiement ───────────────────────────────────── */
.elf-recap-header {
    text-align: center;
    margin-bottom: 36px;
}
.elf-recap-check {
    width: 64px;
    height: 64px;
    background: #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    margin: 0 auto 16px;
}
.elf-recap-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--elf-dark);
    margin: 0 0 8px;
    padding: 0;
    border: none;
}
.elf-recap-header p {
    color: var(--elf-gray);
    font-size: 15px;
    margin: 0;
}

.elf-recap-section-title {
    font-weight: 700;
    color: var(--elf-salmon);
    font-size: 15px;
    margin: 0 0 12px;
    padding: 0;
    border: none;
}

.elf-recap-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important;
    font-size: 14px !important;
    margin-bottom: 4px !important;
}
.elf-recap-table tr {
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
}
.elf-recap-table tr:last-child {
    border-bottom: none !important;
}
.elf-recap-table td {
    padding: 11px 14px !important;
    vertical-align: top !important;
    line-height: 1.5 !important;
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: none !important;
}
.elf-recap-table tr:last-child td {
    border-bottom: none !important;
}
.elf-recap-table td:first-child {
    color: var(--elf-dark) !important;
    width: 200px !important;
    font-weight: 700 !important;
}
.elf-recap-table td:last-child {
    color: var(--elf-dark) !important;
}
.elf-recap-table .elf-recap-price {
    font-weight: 700 !important;
    color: var(--elf-salmon) !important;
    font-size: 15px !important;
}

.elf-recap-actions {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.elf-recap-btn-new {
    flex: 1;
    min-width: 160px;
    display: inline-block;
    padding: 13px 20px;
    background: var(--elf-light);
    color: #374151;
    border: 1px solid #e5e7eb;
    border-radius: var(--elf-radius);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    transition: background .15s;
}
.elf-recap-btn-new:hover { background: #e5e7eb; color: #374151; }
.elf-recap-btn-refund {
    flex: 1;
    min-width: 160px;
    display: inline-block;
    padding: 13px 20px;
    background: #fff;
    color: var(--elf-gray);
    border: 1px solid var(--elf-border);
    border-radius: var(--elf-radius);
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    transition: border-color .15s, color .15s;
}
.elf-recap-btn-refund:hover { border-color: #9ca3af; color: #374151; }
.elf-recap-btn-print {
    flex: 1;
    min-width: 160px;
    padding: 13px 20px;
    background: var(--elf-salmon);
    color: #fff;
    border: none;
    border-radius: var(--elf-radius);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    transition: background .15s;
}
.elf-recap-btn-print:hover { background: var(--elf-salmon-h); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Tablette (≤ 768px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    #elf-app {
        padding: 32px 16px 60px !important;
        align-items: flex-start !important;
    }
    #elf-app .elf-form-card {
        padding: 32px 28px !important;
        border-radius: 10px !important;
    }

    /* Titre de section */
    .elf-block-title { font-size: 15px; }

    /* Session price block */
    .elf-session-price-block .elf-prix-value { font-size: 18px; }

    /* Total block */
    .elf-total-value { font-size: 20px; }

    /* Boutons recap */
    .elf-recap-actions { flex-direction: column; gap: 10px; }
    .elf-recap-btn-new,
    .elf-recap-btn-print { min-width: 0; width: 100%; }

    /* Récap table : première colonne moins large */
    .elf-recap-table td:first-child {
        width: 160px !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤ 540px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
    #elf-app {
        padding: 20px 10px 40px !important;
    }
    #elf-app .elf-form-card {
        padding: 24px 16px !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
    }

    /* Grille → 1 colonne */
    #elf-app .elf-grid-2 {
        grid-template-columns: 1fr !important;
    }

    /* Champs inputs : taille touch-friendly */
    #elf-app .elf-ref-input,
    #elf-app .elf-ref-select {
        padding: 14px 14px !important;
        font-size: 16px !important; /* évite le zoom iOS */
    }

    /* Titre principal */
    .elf-block-title { font-size: 14px; }
    .elf-block-title::after { margin-bottom: 14px; }

    /* Séparateur */
    .elf-form-block { margin-bottom: 28px; }
    .elf-block-sep  { margin: 24px 0; }

    /* Radio items (motifs / examens) : plus grand pour le tactile */
    .elf-radio-item { padding: 12px 0; }
    .elf-radio-item label { font-size: 14px; }
    .elf-radio-item input[type="radio"] {
        width: 20px;
        height: 20px;
    }

    /* Session price block */
    .elf-session-price-block { padding: 14px 14px; }
    .elf-session-price-block .elf-prix-value { font-size: 22px; }

    /* Total block */
    .elf-total-block { padding: 14px 14px; }
    .elf-total-value { font-size: 20px; }
    .elf-total-label { font-size: 14px; }

    /* Bouton submit */
    .elf-btn-submit { font-size: 15px; padding: 14px; }

    /* Récap table : passe en mode "bloc" sur très petit écran */
    .elf-recap-table,
    .elf-recap-table tbody,
    .elf-recap-table tr,
    .elf-recap-table td {
        display: block !important;
        width: auto !important;
        border: none !important;
    }
    .elf-recap-table tr {
        border-bottom: 1px solid #e5e7eb !important;
        padding: 8px 0 !important;
    }
    .elf-recap-table tr:last-child { border-bottom: none !important; }
    .elf-recap-table td:first-child {
        width: auto !important;
        font-size: 11px !important;
        color: var(--elf-gray) !important;
        font-weight: 600 !important;
        text-transform: uppercase;
        letter-spacing: .04em;
        padding: 4px 0 2px !important;
    }
    .elf-recap-table td:last-child {
        padding: 0 0 4px !important;
        font-size: 14px !important;
    }

    /* Alertes */
    .elf-alert { font-size: 13px; padding: 10px 14px; }

    /* Récap header */
    .elf-recap-header { margin-bottom: 24px; }
    .elf-recap-header h2 { font-size: 18px; }
    .elf-recap-check { width: 52px; height: 52px; font-size: 22px; }

    /* Boutons recap */
    .elf-recap-actions { flex-direction: column; gap: 10px; }
    .elf-recap-btn-new,
    .elf-recap-btn-print { min-width: 0; width: 100%; padding: 14px 16px; }

    /* Note sécurisée */
    .elf-secure-note { font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Très petit (≤ 380px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    #elf-app {
        padding: 16px 8px 32px !important;
    }
    #elf-app .elf-form-card {
        padding: 20px 12px !important;
    }
}

/* ── Impression / PDF ─────────────────────────────────────────── */
@media print {
    /* Tout masquer via visibility (permet au fils de se ré-afficher) */
    body * { visibility: hidden !important; }

    /* Ré-afficher uniquement le récap */
    #elf-app,
    #elf-app * { visibility: visible !important; }

    /* Positionner le récap en haut de page */
    #elf-app {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        transform: none !important;
        display: block !important;
        margin: 0 !important;
    }
    #elf-app .elf-form-card {
        box-shadow: none !important;
        border: none !important;
        padding: 16px 24px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Masquer les boutons d'action */
    .elf-recap-actions,
    .elf-recap-actions * { visibility: hidden !important; }

    /* Conserver les couleurs à l'impression */
    * { print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; }
}