/* ── Jurible Aide Personnalisée — Front-end CSS ────────────────────────── */
/* Design system: jurible-design-system.css — Dark mode: html.dark          */

:root {
    --ap-primary: var(--jurible-primary, #B0001D);
    --ap-primary-hover: var(--jurible-primary-hover, #DC2626);
    --ap-secondary: var(--jurible-secondary, #7C3AED);
    --ap-success: var(--wp--preset--color--success, #10B981);
    --ap-warning: var(--wp--preset--color--warning, #F59E0B);
    --ap-error: var(--wp--preset--color--error, #EF4444);

    --ap-bg: #FFFFFF;
    --ap-bg-muted: var(--jurible-muted, #F3F4F6);
    --ap-bg-alt: var(--jurible-background, #F9FAFB);
    --ap-border: var(--jurible-border, #E5E7EB);
    --ap-border-strong: var(--jurible-border-muted, #D1D5DB);
    --ap-text: var(--jurible-text-dark, #111827);
    --ap-text-secondary: #374151;
    --ap-text-light: #6B7280;
    --ap-text-muted: var(--jurible-text-muted, #9CA3AF);

    --ap-radius: var(--wp--custom--border-radius--lg, 12px);
    --ap-radius-sm: var(--wp--custom--border-radius--md, 8px);
    --ap-gradient: var(--wp--preset--gradient--cta-gradient, linear-gradient(135deg, #B0001D 0%, #DC2626 50%, #7C3AED 100%));
    --ap-shadow: var(--wp--preset--shadow--sm, 0 1px 3px rgba(0, 0, 0, 0.1));
    --ap-font: var(--jurible-font-family, 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);

    /* Status backgrounds (light) */
    --ap-success-bg: #F0FDF4;
    --ap-success-border: #BBF7D0;
    --ap-success-text: #15803D;
    --ap-warning-bg: #FFFBEB;
    --ap-warning-border: #FDE68A;
    --ap-warning-text: #92400E;
    --ap-error-bg: #FEF2F2;
    --ap-error-border: #FECACA;
    --ap-error-text: #991B1B;

    /* Badges */
    --ap-badge-secondary-bg: #EDE9FE;
    --ap-badge-secondary-text: #7C3AED;
    --ap-badge-warning-bg: #FEF3C7;
    --ap-badge-warning-text: #D97706;
    --ap-badge-info-bg: #DBEAFE;
    --ap-badge-info-text: #2563EB;
    --ap-badge-success-bg: #D1FAE5;
    --ap-badge-success-text: #059669;
}

/* ── Dark mode ──────────────────────────────────────────────────────── */

html.dark {
    --ap-bg: var(--el-bg-color, #141414);
    --ap-bg-muted: var(--el-bg-color-overlay, #1d1e1f);
    --ap-bg-alt: var(--el-bg-color-overlay, #1d1e1f);
    --ap-border: #2d2d2f;
    --ap-border-strong: #3d3d3f;
    --ap-text: #F3F4F6;
    --ap-text-secondary: #E5E7EB;
    --ap-text-light: #9CA3AF;
    --ap-text-muted: #9CA3AF;

    --ap-success-bg: rgba(16, 185, 129, 0.15);
    --ap-success-border: rgba(16, 185, 129, 0.3);
    --ap-success-text: #34D399;
    --ap-warning-bg: rgba(245, 158, 11, 0.15);
    --ap-warning-border: rgba(245, 158, 11, 0.3);
    --ap-warning-text: #FBBF24;
    --ap-error-bg: rgba(239, 68, 68, 0.15);
    --ap-error-border: rgba(239, 68, 68, 0.3);
    --ap-error-text: #FCA5A5;

    --ap-badge-secondary-bg: rgba(124, 58, 237, 0.2);
    --ap-badge-secondary-text: #A78BFA;
    --ap-badge-warning-bg: rgba(245, 158, 11, 0.2);
    --ap-badge-warning-text: #FBBF24;
    --ap-badge-info-bg: rgba(59, 130, 246, 0.2);
    --ap-badge-info-text: #60A5FA;
    --ap-badge-success-bg: rgba(16, 185, 129, 0.2);
    --ap-badge-success-text: #34D399;
}

/* ── Container ───────────────────────────────────────────────────────── */

.aide-perso,
.aide-perso *,
.fcom_wp_content .aide-perso,
.fcom_wp_content .aide-perso * {
    font-family: var(--ap-font);
}

.aide-perso {
    max-width: 720px;
    margin: 0 auto;
    color: var(--ap-text);
    line-height: 1.6;
}

/* ── Header ──────────────────────────────────────────────────────────── */

.aide-perso__header {
    text-align: center;
    margin-bottom: 32px;
}

.aide-perso__badge {
    display: inline-block;
    padding: 4px 14px;
    background: var(--ap-badge-secondary-bg);
    color: var(--ap-badge-secondary-text);
    font-size: 13px;
    font-weight: 600;
    border-radius: 99px;
    margin-bottom: 12px;
}

.aide-perso__title {
    font-size: 28px;
    font-weight: 700;
    color: var(--ap-text);
    margin: 0 0 8px;
}

.aide-perso__subtitle {
    font-size: 16px;
    color: var(--ap-text-light);
    margin: 0;
}

/* ── Tabs ─────────────────────────────────────────────────────────────── */

.aide-perso__tabs {
    display: flex;
    gap: 4px;
    background: var(--ap-bg-muted);
    border-radius: var(--ap-radius);
    padding: 4px;
    margin-bottom: 24px;
}

.aide-perso__tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: none;
    background: transparent;
    border-radius: var(--ap-radius-sm);
    font-size: 15px;
    font-weight: 500;
    color: var(--ap-text-light);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.aide-perso__tab:hover {
    color: var(--ap-text-secondary);
}

.aide-perso__tab--active {
    background: var(--ap-bg);
    color: var(--ap-secondary);
    box-shadow: var(--ap-shadow);
}

.aide-perso__tab svg {
    flex-shrink: 0;
}

.aide-perso__tab-counter {
    background: var(--ap-secondary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 99px;
}

/* ── Panels ───────────────────────────────────────────────────────────── */

.aide-perso__panel {
    display: none;
}

.aide-perso__panel--active {
    display: block;
}

/* ── Credits counter ─────────────────────────────────────────────────── */

.aide-perso__credits {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: var(--ap-radius-sm);
    margin-bottom: 20px;
}

.aide-perso__credits-number {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.aide-perso__credits-text {
    font-size: 14px;
    font-weight: 500;
}

.aide-perso__credits--ok {
    background: var(--ap-success-bg);
    border: 1px solid var(--ap-success-border);
    color: var(--ap-success-text);
}

.aide-perso__credits--low {
    background: var(--ap-warning-bg);
    border: 1px solid var(--ap-warning-border);
    color: var(--ap-warning-text);
}

.aide-perso__credits--empty {
    background: var(--ap-error-bg);
    border: 1px solid var(--ap-error-border);
    color: var(--ap-error-text);
}

/* ── Form ─────────────────────────────────────────────────────────────── */

.aide-perso__form {
    background: var(--ap-bg);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    padding: 28px;
}

.aide-perso__field {
    margin-bottom: 20px;
}

.aide-perso__field:last-child {
    margin-bottom: 0;
}

.aide-perso__field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.aide-perso__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ap-text-secondary);
    margin-bottom: 6px;
}

.aide-perso__required {
    color: var(--ap-error);
}

.aide-perso__optional {
    font-weight: 400;
    color: var(--ap-text-muted);
    font-size: 13px;
}

.aide-perso .aide-perso__input,
.aide-perso .aide-perso__input[type="text"],
.aide-perso .aide-perso__input[type="email"],
.aide-perso .aide-perso__select,
.aide-perso .aide-perso__textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--ap-border-strong);
    border-radius: var(--ap-radius-sm);
    font-size: 15px;
    font-family: inherit;
    color: var(--ap-text);
    background: var(--ap-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.aide-perso .aide-perso__input:focus,
.aide-perso .aide-perso__select:focus,
.aide-perso .aide-perso__textarea:focus {
    outline: none;
    border-color: var(--ap-secondary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.aide-perso .aide-perso__input.aide-perso__input--error,
.aide-perso .aide-perso__select.aide-perso__select--error,
.aide-perso .aide-perso__textarea.aide-perso__textarea--error {
    border-color: var(--ap-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.aide-perso__textarea {
    resize: vertical;
    min-height: 100px;
}

.aide-perso__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

html.dark .aide-perso .aide-perso__input,
html.dark .aide-perso .aide-perso__input[type="text"],
html.dark .aide-perso .aide-perso__input[type="email"],
html.dark .aide-perso .aide-perso__select,
html.dark .aide-perso .aide-perso__textarea {
    background: var(--ap-bg);
    color: var(--ap-text);
    border-color: var(--ap-border-strong);
}

html.dark .aide-perso .aide-perso__select {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

html.dark .aide-perso .aide-perso__input::placeholder,
html.dark .aide-perso .aide-perso__textarea::placeholder {
    color: var(--ap-text-muted);
}

/* ── Submit button ───────────────────────────────────────────────────── */

.aide-perso__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 24px;
    background: var(--ap-gradient);
    color: #fff;
    border: none;
    border-radius: var(--ap-radius-sm);
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    margin-top: 24px;
}

.aide-perso__submit:hover {
    opacity: 0.9;
}

.aide-perso__submit:active {
    transform: scale(0.99);
}

.aide-perso__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Spinner ─────────────────────────────────────────────────────────── */

.aide-perso__spinner {
    animation: jaide-spin 1s linear infinite;
    margin-right: 8px;
}

@keyframes jaide-spin {
    100% { transform: rotate(360deg); }
}

.aide-perso__submit-loading {
    display: flex;
    align-items: center;
}

/* ── Dropzone ────────────────────────────────────────────────────────── */

.aide-perso__dropzone {
    position: relative;
    border: 2px dashed var(--ap-border-strong);
    border-radius: var(--ap-radius-sm);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.aide-perso__dropzone:hover,
.aide-perso__dropzone--dragover {
    border-color: var(--ap-secondary);
    background: rgba(124, 58, 237, 0.03);
}

.aide-perso__dropzone--success {
    border-color: var(--ap-success);
    border-style: solid;
    background: rgba(16, 185, 129, 0.03);
}

.aide-perso__dropzone--error {
    border-color: var(--ap-error);
}

.aide-perso__dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.aide-perso__dropzone-content {
    pointer-events: none;
}

.aide-perso__dropzone-content svg {
    color: var(--ap-text-muted);
    margin-bottom: 8px;
}

.aide-perso__dropzone-content p {
    margin: 0;
    font-size: 14px;
    color: var(--ap-text-light);
}

.aide-perso__dropzone-link {
    color: var(--ap-secondary);
    font-weight: 600;
}

.aide-perso__dropzone-hint {
    font-size: 12px !important;
    color: var(--ap-text-muted) !important;
    margin-top: 4px !important;
}

/* ── File chip ───────────────────────────────────────────────────────── */

.aide-perso__file-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--ap-bg-alt);
    border: 1px solid var(--ap-border);
    border-radius: 99px;
    font-size: 13px;
    color: var(--ap-text-secondary);
    margin-top: 12px;
}

.aide-perso__file-chip svg {
    color: var(--ap-secondary);
    flex-shrink: 0;
}

.aide-perso__file-chip-name {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aide-perso__file-chip-remove {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--ap-text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.aide-perso__file-chip-remove:hover {
    color: var(--ap-error);
}

/* ── Accordion (conseils) ────────────────────────────────────────────── */

.aide-perso__accordion {
    margin-bottom: 20px;
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    overflow: hidden;
}

.aide-perso__accordion-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 14px 16px;
    background: var(--ap-bg-alt);
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--ap-text-secondary);
    cursor: pointer;
    font-family: inherit;
}

.aide-perso__accordion-arrow {
    margin-left: auto;
    transition: transform 0.2s;
}

.aide-perso__accordion--open .aide-perso__accordion-arrow {
    transform: rotate(180deg);
}

.aide-perso__accordion-content {
    display: none;
    padding: 0 16px 16px;
    background: var(--ap-bg-alt);
}

.aide-perso__accordion--open .aide-perso__accordion-content {
    display: block;
}

.aide-perso__accordion-content ul {
    margin: 0;
    padding-left: 20px;
}

.aide-perso__accordion-content li {
    font-size: 14px;
    color: var(--ap-text-light);
    margin-bottom: 6px;
}

/* ── Alert ────────────────────────────────────────────────────────────── */

.aide-perso__alert {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-radius: var(--ap-radius-sm);
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.6;
}

.aide-perso__alert svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.aide-perso__alert strong {
    display: block;
    margin-bottom: 4px;
}

.aide-perso__alert ul {
    margin: 4px 0 0;
    padding-left: 18px;
}

.aide-perso__alert li {
    margin-bottom: 2px;
}

.aide-perso__alert--warning {
    background: var(--ap-warning-bg);
    border: 1px solid var(--ap-warning-border);
    color: var(--ap-warning-text);
}

.aide-perso__alert--warning svg {
    color: var(--ap-warning);
}

.aide-perso__alert--error {
    background: var(--ap-error-bg);
    border: 1px solid var(--ap-error-border);
    color: var(--ap-error-text);
}

.aide-perso__alert--error svg {
    color: var(--ap-error);
}

/* ── Modal ────────────────────────────────────────────────────────────── */

.aide-perso__modal {
    position: fixed;
    inset: 0;
    z-index: var(--wp--custom--z-index--modal, 100000);
    display: flex;
    align-items: center;
    justify-content: center;
}

.aide-perso__modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

html.dark .aide-perso__modal-backdrop {
    background: rgba(0, 0, 0, 0.7);
}

.aide-perso__modal-content {
    position: relative;
    background: var(--ap-bg);
    border-radius: var(--ap-radius);
    padding: 40px 32px;
    max-width: 720px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    max-height: 85vh;
    overflow-y: auto;
}

html.dark .aide-perso__modal-content {
    border: 1px solid var(--ap-border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.aide-perso__modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--ap-text-muted);
    cursor: pointer;
}

.aide-perso__modal-icon {
    margin-bottom: 16px;
}

.aide-perso__modal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--ap-text);
    margin: 0 0 8px;
}

.aide-perso__modal-text {
    font-size: 15px;
    color: var(--ap-text-light);
    margin: 0 0 24px;
    line-height: 1.6;
}

.aide-perso__modal-btn {
    display: inline-block;
    padding: 12px 32px;
    background: var(--ap-gradient);
    color: #fff;
    border: none;
    border-radius: var(--ap-radius-sm);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

/* ── Detail (in modal) ───────────────────────────────────────────────── */

.aide-perso__detail-section {
    text-align: left;
    padding: 16px;
    background: var(--ap-bg-alt);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    margin-bottom: 12px;
}

.aide-perso__detail-section--response {
    background: var(--ap-success-bg);
    border-color: var(--ap-success-border);
}

.aide-perso__detail-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ap-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px;
}

.aide-perso__detail-section--response .aide-perso__detail-label {
    color: var(--ap-success-text);
}

.aide-perso__detail-text {
    font-size: 14px;
    color: var(--ap-text-secondary);
    line-height: 1.7;
    margin: 0;
    white-space: pre-line;
}

.aide-perso__detail-file {
    margin: 0 0 12px;
    font-size: 14px;
}

.aide-perso__detail-file a {
    color: var(--ap-secondary);
    font-weight: 600;
    text-decoration: none;
}

.aide-perso__detail-file a:hover {
    text-decoration: underline;
}

.aide-perso__detail-date {
    font-size: 13px;
    color: var(--ap-text-muted);
    margin: 0 0 16px;
}

/* ── Limit card (credits exhausted) ─────────────────────────────────── */

.aide-perso__limit-card {
    background: var(--ap-bg);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2rem);
    text-align: center;
    box-shadow: var(--ap-shadow);
    max-width: 420px;
    margin: 0 auto;
}

.aide-perso__limit-icon {
    width: clamp(48px, 10vw, 64px);
    height: clamp(48px, 10vw, 64px);
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(176, 0, 29, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);
    border-radius: 50%;
    color: var(--ap-secondary);
}

html.dark .aide-perso__limit-icon {
    background: linear-gradient(135deg, rgba(176, 0, 29, 0.2) 0%, rgba(124, 58, 237, 0.2) 100%);
}

.aide-perso__limit-card h3 {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 700;
    color: var(--ap-text);
    margin: 0 0 8px;
}

.aide-perso__limit-highlight {
    color: var(--ap-secondary);
}

html.dark .aide-perso__limit-highlight {
    color: #A78BFA;
}

.aide-perso__limit-card > p {
    font-size: 15px;
    color: var(--ap-text-light);
    margin: 0;
    line-height: 1.6;
}

/* ── Locked states ───────────────────────────────────────────────────── */

.aide-perso--locked {
    text-align: center;
    padding: 60px 20px;
    background: var(--ap-bg-alt);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
}

.aide-perso--locked h3 {
    font-size: 20px;
    color: var(--ap-text);
    margin: 16px 0 8px;
}

.aide-perso--locked p {
    font-size: 15px;
    color: var(--ap-text-light);
    margin: 0 0 24px;
}

.aide-perso__btn {
    display: inline-block;
    padding: 12px 28px;
    background: var(--ap-gradient);
    color: #fff;
    border-radius: var(--ap-radius-sm);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.aide-perso__locked-icon {
    margin-bottom: 8px;
}

/* ── History ─────────────────────────────────────────────────────────── */

.aide-perso__history {
    margin-bottom: 28px;
}

.aide-perso__history-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ap-text);
    margin: 0 0 16px;
}

.aide-perso__history-loading {
    color: var(--ap-text-muted);
    font-size: 14px;
}

.aide-perso__history-empty {
    color: var(--ap-text-muted);
    font-size: 14px;
    font-style: italic;
}

.aide-perso__history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--ap-bg);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.aide-perso__history-item--clickable {
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.aide-perso__history-item--clickable:hover {
    border-color: var(--ap-secondary);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.1);
}

.aide-perso__history-view {
    font-size: 13px;
    font-weight: 600;
    color: var(--ap-secondary);
}

html.dark .aide-perso__history-view {
    color: #A78BFA;
}

.aide-perso__history-type {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.aide-perso__history-type--question {
    background: var(--ap-badge-secondary-bg);
    color: var(--ap-badge-secondary-text);
}

.aide-perso__history-type--copie {
    background: var(--ap-badge-warning-bg);
    color: var(--ap-badge-warning-text);
}

.aide-perso__history-info {
    flex: 1;
    font-size: 14px;
    color: var(--ap-text-secondary);
}

.aide-perso__history-date {
    font-size: 13px;
    color: var(--ap-text-muted);
}

.aide-perso__history-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.aide-perso__history-status--pending {
    background: var(--ap-badge-warning-bg);
    color: var(--ap-badge-warning-text);
}

.aide-perso__history-status--in_progress {
    background: var(--ap-badge-info-bg);
    color: var(--ap-badge-info-text);
}

.aide-perso__history-status--completed {
    background: var(--ap-badge-success-bg);
    color: var(--ap-badge-success-text);
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .aide-perso__field-row {
        grid-template-columns: 1fr;
    }

    .aide-perso__title {
        font-size: 22px;
    }

    .aide-perso__subtitle {
        font-size: 14px;
    }

    .aide-perso__tabs {
        flex-direction: column;
        gap: 4px;
    }

    .aide-perso__tab {
        font-size: 14px;
        padding: 10px 14px;
        justify-content: flex-start;
    }

    .aide-perso__form {
        padding: 20px 16px;
    }

    .aide-perso__credits {
        padding: 12px 16px;
    }

    .aide-perso__credits-number {
        font-size: 20px;
    }

    .aide-perso__alert {
        flex-direction: column;
        gap: 8px;
    }

    .aide-perso__dropzone {
        padding: 24px 16px;
    }

    .aide-perso__modal-content {
        padding: 28px 20px;
        max-width: 95%;
        max-height: 90vh;
    }

    .aide-perso__modal-title {
        font-size: 18px;
    }

    .aide-perso__history-item {
        padding: 12px;
        gap: 8px;
    }

    .aide-perso__history-info {
        width: 100%;
        order: 10;
        font-size: 13px;
    }

    .aide-perso__history-date {
        font-size: 12px;
    }

    .aide-perso__history-view {
        width: 100%;
        order: 20;
    }

    .aide-perso--locked {
        padding: 40px 16px;
    }

    .aide-perso__limit-card {
        max-width: 100%;
    }
}