/* =====================================================
   Accréditations POP — CSS Public v2.0.1
   ===================================================== */

:root {
    --ap-primary:  #1a1a2e;
    --ap-accent:   #e63946;
    --ap-success:  #10b981;
    --ap-warning:  #f59e0b;
    --ap-danger:   #ef4444;
    --ap-light:    #f8f9fa;
    --ap-border:   #dee2e6;
    --ap-text:     #212529;
    --ap-muted:    #6c757d;
    --ap-radius:   8px;
    --ap-shadow:   0 2px 12px rgba(0,0,0,0.08);
    --ap-error-bg: #fff5f5;
    --ap-error-border: #fc8181;
    --ap-error-text:   #c53030;

    /* Police : héritée du thème via PHP, Inter en fallback.
       Peut être surchargée dans l'éditeur de thème ou via wp_add_inline_style. */
    --ap-font: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── Wrapper ── */
.ap-form-wrapper {
    max-width: 860px;
    margin: 0 auto;
    padding: 20px;
    /* Utilise la police du thème (injectée via --ap-font), Inter en fallback */
    font-family: var(--ap-font, inherit);
    color: var(--ap-text);
}

/* ── Bannière ── */
.ap-form-banniere {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    border-radius: var(--ap-radius) var(--ap-radius) 0 0;
    position: relative;
}
.ap-form-banniere-logo {
    position: absolute;
    bottom: 12px;
    left: 20px;
}
.ap-form-banniere-logo img {
    height: 50px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}

/* ── En-tête formulaire ── */
.ap-form-header {
    background: var(--ap-primary);
    color: #fff;
    padding: 28px 30px 24px;
    border-radius: var(--ap-radius);
    margin-bottom: 24px;
    text-align: center;
}
.ap-form-banniere + .ap-form-header {
    border-radius: 0 0 var(--ap-radius) var(--ap-radius);
}
.ap-form-event-name {
    font-size: .8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: 6px;
}
.ap-form-title {
    font-size: 1.7rem;
    margin: 0 0 8px;
    font-weight: 700;
}
.ap-form-subtitle {
    margin: 0;
    opacity: .8;
    font-size: .95rem;
}
.ap-form-date {
    font-size: .85rem;
    opacity: .75;
    margin: 8px 0 0;
}

/* ── Alertes ── */
.ap-alert {
    padding: 14px 18px;
    border-radius: var(--ap-radius);
    margin-bottom: 20px;
    font-size: .95rem;
    line-height: 1.5;
}
.ap-alert-error   { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; }
.ap-alert-success {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
    padding: 20px 24px;
    font-size: 1rem;
    text-align: center;
}
.ap-alert-success code {
    background: rgba(22,101,52,.12);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: .95rem;
}

/* ── Fieldsets ── */
.ap-fieldset {
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    padding: 24px;
    margin-bottom: 20px;
    background: #fff;
    box-shadow: var(--ap-shadow);
}
.ap-fieldset legend {
    font-weight: 700;
    font-size: 1rem;
    color: var(--ap-primary);
    padding: 0 10px;
    letter-spacing: .02em;
}
.ap-fieldset--conditions {
    background: #fffbeb;
    border-color: #fcd34d;
}

/* ── Grille ── */
.ap-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

/* ── Champs ── */
.ap-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative; /* pour le message d'erreur absolu */
}
.ap-field--small { max-width: 200px; }
.ap-field--full  { grid-column: 1 / -1; }

.ap-field label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--ap-primary);
}

.ap-field input,
.ap-field select,
.ap-field textarea {
    border: 1.5px solid var(--ap-border);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: .95rem;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s, background .2s;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    color: var(--ap-text);
    -webkit-appearance: none;
    appearance: none;
}
.ap-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}
.ap-field input:focus,
.ap-field select:focus,
.ap-field textarea:focus {
    outline: none;
    border-color: var(--ap-primary);
    box-shadow: 0 0 0 3px rgba(26,26,46,.1);
}

/* ── État d'erreur sur un champ ── */
.ap-field.ap-field-error input,
.ap-field.ap-field-error select,
.ap-field.ap-field-error textarea {
    border-color: var(--ap-error-border) !important;
    background-color: var(--ap-error-bg) !important;
    box-shadow: 0 0 0 3px rgba(252,129,129,.2) !important;
}
.ap-field.ap-field-error label {
    color: var(--ap-error-text);
}
.ap-field-error-msg {
    display: block;
    font-size: .8rem;
    color: var(--ap-error-text);
    font-weight: 600;
    margin-top: 4px;
    padding: 0 2px;
}
.ap-field-error-msg::before {
    content: '⚠ ';
}
/* Erreur sur la ligne conditions */
.ap-field-error-inline {
    outline: 2px dashed var(--ap-error-border);
    border-radius: 4px;
    padding: 4px 6px;
}
.ap-field-error-msg-cond {
    display: block;
    font-size: .82rem;
    color: var(--ap-error-text);
    font-weight: 600;
    margin-top: 6px;
}
.ap-field-error-msg-cond::before { content: '⚠ '; }

/* ── Textes d'aide ── */
.ap-required { color: var(--ap-accent); margin-left: 2px; }
.ap-optional  { color: var(--ap-muted); font-size: .8rem; font-weight: 400; margin-left: 4px; }

/* ── Zone upload justificatif ── */
.ap-upload-zone {
    position: relative;
    border: 2px dashed var(--ap-border);
    border-radius: var(--ap-radius);
    background: var(--ap-light);
    transition: border-color .2s, background .2s;
    overflow: hidden;
    min-height: 90px;
}
.ap-upload-zone:hover,
.ap-upload-zone.dragover {
    border-color: var(--ap-primary);
    background: #f0f4ff;
}
.ap-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border: none !important;
    z-index: 2;
    margin: 0 !important;
}
.ap-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px;
    cursor: pointer;
    gap: 5px;
    text-align: center;
    pointer-events: none;
}
.ap-upload-icon { font-size: 1.8rem; line-height: 1; }
.ap-upload-text { font-weight: 600; color: var(--ap-primary); font-size: .9rem; }
.ap-upload-hint { font-size: .78rem; color: var(--ap-muted); }
.ap-upload-preview {
    padding: 10px 16px;
    background: #f0fdf4;
    border-top: 1px solid #a7f3d0;
    font-size: .88rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #065f46;
    font-weight: 600;
    position: relative;
    z-index: 3;
}

/* ── Membres équipe ── */
.ap-team-intro { color: var(--ap-muted); font-size: .88rem; margin: 0 0 10px; }
.ap-membre-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}
.ap-membre-row input,
.ap-membre-row select {
    border: 1.5px solid var(--ap-border);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: .88rem;
    font-family: inherit;
    box-sizing: border-box;
    background: #fff;
    -webkit-appearance: none;
    appearance: none;
}
.ap-remove-membre {
    background: none;
    border: 1px solid var(--ap-danger);
    color: var(--ap-danger);
    border-radius: 6px;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: background .2s, color .2s;
}
.ap-remove-membre:hover { background: var(--ap-danger); color: #fff; }

/* ── Conditions générales — NOUVELLE IMPLÉMENTATION ── */
/*
 * On utilise un vrai <input type="checkbox"> visible mais stylisé via CSS moderne.
 * Cela évite le problème de double affichage causé par les thèmes WP qui
 * remettent display:block sur les inputs cachés.
 */
.ap-conditions-text {
    background: rgba(26,26,46,.04);
    border-radius: 6px;
    padding: 12px 16px;
    font-size: .88rem;
    color: var(--ap-muted);
    margin-bottom: 14px;
    line-height: 1.6;
}
.ap-checkbox-wrap {
    display: flex;
    align-items: flex-start;
}
.ap-cgu-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    line-height: 1.5;
}

/* La vraie checkbox — on la garde dans le flux mais on la stylise */
.ap-cgu-checkbox {
    /* Reset complet de toutes les surcharges de thème */
    -webkit-appearance: none !important;
    -moz-appearance:    none !important;
    appearance:         none !important;
    /* Dimensions fixes */
    width:  22px !important;
    height: 22px !important;
    min-width:  22px !important;
    min-height: 22px !important;
    max-width:  22px !important;
    max-height: 22px !important;
    /* Style */
    border: 2px solid var(--ap-primary) !important;
    border-radius: 5px !important;
    background: #fff !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    position: relative !important;
    transition: background .15s, border-color .15s !important;
    /* On cache le span .ap-cgu-box si JS désactivé */
    top: 1px;
}
.ap-cgu-checkbox:checked {
    background: var(--ap-primary) !important;
    border-color: var(--ap-primary) !important;
}
.ap-cgu-checkbox:checked::after {
    content: '';
    display: block !important;
    position: absolute !important;
    left: 5px !important;
    top: 2px !important;
    width: 7px !important;
    height: 11px !important;
    border: 2px solid #fff !important;
    border-top: none !important;
    border-left: none !important;
    transform: rotate(45deg) !important;
}
.ap-cgu-checkbox:focus {
    outline: 3px solid rgba(26,26,46,.25) !important;
    outline-offset: 2px !important;
}

/* Cacher le span décoratif — il n'est plus utilisé dans cette version */
.ap-cgu-box { display: none !important; }

.ap-cgu-text {
    font-size: .92rem;
    color: var(--ap-text);
    padding-top: 1px;
}

/* ── Boutons ── */
.ap-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: .95rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    transition: all .2s;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
}
.ap-btn--primary {
    background: var(--ap-primary);
    color: #fff;
}
.ap-btn--primary:hover:not(:disabled) {
    background: #2d2d4e;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(26,26,46,.28);
}
.ap-btn--primary:disabled {
    opacity: .65;
    cursor: not-allowed;
}
.ap-btn--outline {
    background: transparent;
    border: 2px solid var(--ap-primary);
    color: var(--ap-primary);
}
.ap-btn--outline:hover { background: var(--ap-primary); color: #fff; }

.ap-submit-row { text-align: center; margin-top: 8px; }
.ap-submit-row .ap-btn {
    min-width: 220px;
    justify-content: center;
    padding: 14px 32px;
    font-size: 1rem;
}

/* ── Pagination ── */
.ap-pagination { display: flex; gap: 5px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.ap-page-btn {
    display: inline-block;
    padding: 7px 13px;
    border: 1px solid var(--ap-border);
    border-radius: 5px;
    color: var(--ap-text);
    text-decoration: none;
    font-size: .88rem;
    transition: all .15s;
}
.ap-page-btn:hover  { border-color: var(--ap-primary); color: var(--ap-primary); }
.ap-page-btn.active { background: var(--ap-primary); color: #fff; border-color: var(--ap-primary); }
.ap-page-dots { padding: 7px 4px; color: var(--ap-muted); font-size: .9rem; }

/* ── Responsive mobile ── */
@media (max-width: 640px) {
    .ap-form-wrapper    { padding: 12px; }
    .ap-form-header     { padding: 20px 16px; }
    .ap-form-title      { font-size: 1.4rem; }
    .ap-fieldset        { padding: 16px; }
    .ap-row             { grid-template-columns: 1fr; }
    .ap-field--small    { max-width: 100%; }
    .ap-membre-row      { grid-template-columns: 1fr 1fr; }
    .ap-membre-row select { grid-column: 1 / -1; }
    .ap-submit-row .ap-btn { width: 100%; }
    .ap-form-banniere   { height: 130px; }
}