/*!
 * AIFORYA Shell — Design System unique
 * Source unique de vérité pour TOUTES les extensions WP AIFORYA.
 * Doctrine v36 — 27/04/2026 (refactor propre).
 *
 * 20 classes au total. Aucune extension ne doit redéfinir ces styles.
 * Si un besoin nouveau émerge, l'AJOUTER ici, pas dans un CSS plugin.
 *
 * Documentation : docs/strategie/aiforya-shell-design-system.md
 *
 * Sections :
 *   1. Variables (palette + tokens)
 *   2. Page wrap (body, container WP admin)
 *   3. Shell layout (header / nav / content / footer)
 *   4. Titres (H1 du shell, H2/H3/H4 internes, .aiforya-lead)
 *   5. Containers (.aiforya-card, .aiforya-section, .aiforya-grid-*)
 *   6. Boutons (.aiforya-btn-primary/secondary/danger + compat WP .button)
 *   7. Champs auto (input/select/textarea/checkbox/radio)
 *   8. Forms (.aiforya-form, .aiforya-form-section/row/group/actions)
 *   9. KPI (.aiforya-kpi*)
 *   10. Badges (.aiforya-badge-success/warning/danger/info)
 *   11. Tables (.aiforya-table + wp-list-table auto)
 *   12. Compat WP (notices, tablenav, bulkactions, pagination)
 *   13. Responsive
 */

/* ============================================================================
   1. VARIABLES — palette dark AIFORYA (alignée doctrine WooBoost V3)
   ============================================================================ */
:root,
body[class*="aiforya"],
body.toplevel_page_aiforya-hub,
.aiforya-shell {
    --aiforya-primary: #6366f1;
    --aiforya-primary-hover: #4f46e5;
    --aiforya-primary-soft: rgba(255, 255, 255, 0.06);
    --aiforya-primary-strong: rgba(255, 255, 255, 0.12);

    --aiforya-bg: #0a0a0f;
    --aiforya-bg-elevated: #0f172a;
    --aiforya-bg-card: #1e293b;
    --aiforya-bg-input: #0f0f23;

    --aiforya-text: #e5e7eb;
    --aiforya-text-strong: #ffffff;
    --aiforya-text-muted: #cbd5e1;
    --aiforya-text-light: #94a3b8;

    --aiforya-success: #22c55e;
    --aiforya-warning: #f59e0b;
    --aiforya-danger: #ef4444;
    --aiforya-info: #0ea5e9;

    --aiforya-radius-sm: 6px;
    --aiforya-radius: 10px;
    --aiforya-radius-lg: 14px;

    --aiforya-shadow: 0 1px 3px rgba(0,0,0,0.4);
    --aiforya-transition: all 0.18s ease;
}

/* ============================================================================
   2. PAGE WRAP — background dark global pour les pages admin AIFORYA
   ============================================================================ */
body[class*="aiforya"] #wpcontent,
body[class*="aiforya"] #wpbody-content,
body.toplevel_page_aiforya-hub #wpcontent,
body.toplevel_page_aiforya-hub #wpbody-content {
    background: var(--aiforya-bg) !important;
    color: var(--aiforya-text);
}

body[class*="aiforya"] .wrap,
body.toplevel_page_aiforya-hub .wrap {
    margin: 0;
}

body[class*="aiforya"],
body.toplevel_page_aiforya-hub {
    overflow-x: hidden;
}

/* ============================================================================
   3. SHELL LAYOUT — header / nav-tabs / content / footer
   ============================================================================ */
body[class*="aiforya"] .aiforya-shell,
body.toplevel_page_aiforya-hub .aiforya-shell,
.aiforya-shell {
    box-sizing: border-box;
    padding: 16px 48px 32px 32px;
    max-width: 100% !important;
    margin: 0 !important;
    color: var(--aiforya-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.aiforya-shell *,
.aiforya-shell *::before,
.aiforya-shell *::after {
    box-sizing: border-box;
}

/* Enfants directs centrés sur 1400px */
body[class*="aiforya"] .aiforya-shell > .aiforya-shell__header,
body[class*="aiforya"] .aiforya-shell > .aiforya-shell__tabs,
body[class*="aiforya"] .aiforya-shell > .aiforya-shell__content,
body[class*="aiforya"] .aiforya-shell > .aiforya-shell__footer {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.aiforya-shell__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--aiforya-primary-soft);
}
.aiforya-shell__header-left { flex: 1; min-width: 0; }
.aiforya-shell__header-right { flex-shrink: 0; }

.aiforya-shell__logo {
    width: auto;
    height: 56px;
    max-width: 56px;
    object-fit: contain;
    object-position: right center;
    display: block;
    margin-left: auto;
    opacity: 0.85;
}

/* Nav onglets — style1 nested (skeleton) */
.aiforya-shell__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 24px;
    padding: 6px;
    background: #0a1020;
    border: 1px solid rgba(59, 130, 246, 0.35);
    border-radius: 10px;
}
.aiforya-shell__tab {
    display: inline-block;
    padding: 9px 16px;
    color: var(--aiforya-text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    border-radius: 6px;
    transition: var(--aiforya-transition);
}
.aiforya-shell__tab:hover {
    color: var(--aiforya-text);
    background: rgba(59, 130, 246, 0.08);
}
.aiforya-shell__tab.is-active {
    color: var(--aiforya-text-strong);
    background: rgba(59, 130, 246, 0.14);
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.18);
    font-weight: 600;
}
.aiforya-shell__tab:focus { outline: 2px solid var(--aiforya-primary); outline-offset: 2px; }

.aiforya-shell__content {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 24px;
}

.aiforya-shell__footer {
    text-align: center;
    color: var(--aiforya-text-light);
    font-size: 12px;
    padding: 16px 0;
    border-top: 1px solid var(--aiforya-primary-soft);
}
.aiforya-shell__footer-sep { margin: 0 8px; opacity: 0.5; }

/* ============================================================================
   4. TITRES — H1 du shell + H2/H3/H4 internes + .aiforya-lead
   ============================================================================
   Pattern Support = titre gros bold + description légère.
   Tous les onglets suivent ça automatiquement. */
body[class*="aiforya"] .aiforya-shell__title,
.aiforya-shell .aiforya-shell__title {
    margin: 0 0 6px 0 !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--aiforya-text-strong) !important;
    line-height: 1.2 !important;
    padding: 0 !important;
}
.aiforya-shell__description {
    margin: 0;
    color: var(--aiforya-text-muted);
    font-size: 14px;
}

.aiforya-shell__content h2,
.aiforya-shell__content > div > h2,
.aiforya-shell__content .aiforya-card > h2,
.aiforya-shell__content .aiforya-cr-header > h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--aiforya-text-strong) !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.25 !important;
    padding: 0 !important;
}
.aiforya-shell__content h3,
.aiforya-shell__content .aiforya-card > h3,
.aiforya-shell__content .aiforya-cr-header > h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--aiforya-text-strong) !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
    padding: 0 !important;
}
.aiforya-shell__content h4 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--aiforya-text) !important;
    margin: 12px 0 4px 0 !important;
    line-height: 1.3 !important;
    padding: 0 !important;
}

.aiforya-shell__content .aiforya-lead,
.aiforya-shell__content h2 + p,
.aiforya-shell__content h3 + p,
.aiforya-shell__content h2 + p.description,
.aiforya-shell__content h3 + p.description,
.aiforya-shell__content .aiforya-cr-header > p,
.aiforya-shell__content .description {
    color: var(--aiforya-text-muted) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 0 16px 0 !important;
    font-style: normal !important;
}

/* ============================================================================
   5. CONTAINERS — .aiforya-card, .aiforya-section, .aiforya-grid-*
   ============================================================================ */
.aiforya-shell .aiforya-card,
body[class*="aiforya"] .aiforya-card {
    background: var(--aiforya-bg-card);
    border: 1px solid var(--aiforya-primary-soft);
    border-radius: var(--aiforya-radius);
    padding: 24px;
    margin-bottom: 16px;
    color: var(--aiforya-text);
}

.aiforya-section {
    margin-bottom: 32px;
}

.aiforya-grid-2,
.aiforya-grid-3,
.aiforya-grid-4 {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
}
.aiforya-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.aiforya-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.aiforya-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

/* ============================================================================
   6. BOUTONS — .aiforya-btn-primary/secondary/danger + compat WP
   ============================================================================ */
.aiforya-btn-primary,
body[class*="aiforya"] .button-primary,
body[class*="aiforya"] .page-title-action {
    background: var(--aiforya-primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--aiforya-primary) !important;
    border-radius: var(--aiforya-radius-sm) !important;
    padding: 8px 18px !important;
    text-shadow: none !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block;
    cursor: pointer;
    transition: var(--aiforya-transition);
    min-height: 40px;
    line-height: 1.4;
}
.aiforya-btn-primary:hover,
body[class*="aiforya"] .button-primary:hover,
body[class*="aiforya"] .page-title-action:hover {
    background: var(--aiforya-primary-hover) !important;
    border-color: var(--aiforya-primary-hover) !important;
}

.aiforya-btn-secondary,
body[class*="aiforya"] .button:not(.button-primary):not(.page-title-action),
body[class*="aiforya"] .button-secondary {
    background: var(--aiforya-bg-card) !important;
    color: var(--aiforya-text) !important;
    border: 1px solid var(--aiforya-primary-strong) !important;
    border-radius: var(--aiforya-radius-sm) !important;
    padding: 8px 18px !important;
    text-shadow: none !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-block;
    cursor: pointer;
    transition: var(--aiforya-transition);
    min-height: 40px;
    line-height: 1.4;
}
.aiforya-btn-secondary:hover,
body[class*="aiforya"] .button:not(.button-primary):not(.page-title-action):hover,
body[class*="aiforya"] .button-secondary:hover {
    background: rgba(99, 102, 241, 0.12) !important;
    border-color: var(--aiforya-primary) !important;
    color: var(--aiforya-text-strong) !important;
}

.aiforya-btn-danger {
    background: var(--aiforya-danger) !important;
    color: #ffffff !important;
    border: 1px solid var(--aiforya-danger) !important;
    border-radius: var(--aiforya-radius-sm) !important;
    padding: 8px 18px !important;
    text-shadow: none !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block;
    cursor: pointer;
    transition: var(--aiforya-transition);
    min-height: 40px;
    line-height: 1.4;
}
.aiforya-btn-danger:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}

body[class*="aiforya"] .button:focus,
body[class*="aiforya"] .button-primary:focus,
.aiforya-btn-primary:focus,
.aiforya-btn-secondary:focus,
.aiforya-btn-danger:focus {
    outline: 2px solid var(--aiforya-primary);
    outline-offset: 2px;
}

/* ============================================================================
   7. CHAMPS AUTO — input/textarea/select/checkbox/radio
   ============================================================================ */
body[class*="aiforya"] input[type="text"],
body[class*="aiforya"] input[type="email"],
body[class*="aiforya"] input[type="password"],
body[class*="aiforya"] input[type="search"],
body[class*="aiforya"] input[type="url"],
body[class*="aiforya"] input[type="tel"],
body[class*="aiforya"] input[type="number"],
body[class*="aiforya"] textarea,
body[class*="aiforya"] select {
    background: var(--aiforya-bg-input) !important;
    color: var(--aiforya-text) !important;
    border: 1px solid var(--aiforya-primary-soft) !important;
    border-radius: var(--aiforya-radius-sm) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    box-shadow: none !important;
    min-height: 40px !important;
    box-sizing: border-box;
}

/* Width 100% UNIQUEMENT dans les forms applicatifs */
body[class*="aiforya"] .aiforya-form input[type="text"],
body[class*="aiforya"] .aiforya-form input[type="email"],
body[class*="aiforya"] .aiforya-form input[type="password"],
body[class*="aiforya"] .aiforya-form input[type="url"],
body[class*="aiforya"] .aiforya-form input[type="tel"],
body[class*="aiforya"] .aiforya-form input[type="number"],
body[class*="aiforya"] .aiforya-form textarea,
body[class*="aiforya"] .aiforya-form select,
body[class*="aiforya"] .form-table input[type="text"],
body[class*="aiforya"] .form-table input[type="email"],
body[class*="aiforya"] .form-table input[type="password"],
body[class*="aiforya"] .form-table input[type="url"],
body[class*="aiforya"] .form-table input[type="tel"],
body[class*="aiforya"] .form-table textarea,
body[class*="aiforya"] .form-table select {
    width: 100%;
}

body[class*="aiforya"] input:focus,
body[class*="aiforya"] textarea:focus,
body[class*="aiforya"] select:focus {
    border-color: var(--aiforya-primary) !important;
    box-shadow: 0 0 0 3px var(--aiforya-primary-soft) !important;
    outline: none !important;
}

body[class*="aiforya"] input:-webkit-autofill,
body[class*="aiforya"] input:-webkit-autofill:hover,
body[class*="aiforya"] input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--aiforya-bg-input) inset !important;
    -webkit-text-fill-color: var(--aiforya-text) !important;
    caret-color: var(--aiforya-text);
    transition: background-color 5000s ease-in-out 0s;
}

/* Select avec flèche custom */
body[class*="aiforya"] select {
    padding-right: 32px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: linear-gradient(45deg, transparent 50%, var(--aiforya-text-muted) 50%), linear-gradient(135deg, var(--aiforya-text-muted) 50%, transparent 50%) !important;
    background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px) !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
}

/* Checkbox / Radio custom */
body[class*="aiforya"] input[type="checkbox"],
body[class*="aiforya"] input[type="radio"] {
    accent-color: var(--aiforya-primary);
    width: 18px;
    height: 18px;
    min-height: auto !important;
}

/* ============================================================================
   8. FORMS — .aiforya-form, .aiforya-form-section/row/group/actions
   ============================================================================ */
.aiforya-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.aiforya-form-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.aiforya-form-section > h3,
.aiforya-form-section > h2 {
    margin-bottom: 4px !important;
}
.aiforya-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.aiforya-form-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.aiforya-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--aiforya-primary-soft);
}

.aiforya-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.aiforya-field label,
.aiforya-form label {
    color: var(--aiforya-text-muted);
    font-size: 13px;
    font-weight: 500;
}
.aiforya-help {
    color: var(--aiforya-text-light);
    font-size: 12px;
    line-height: 1.4;
    margin-top: 2px;
}

/* Form table (Settings API WP) */
body[class*="aiforya"] .form-table { color: var(--aiforya-text); }
body[class*="aiforya"] .form-table th,
body[class*="aiforya"] .form-table td {
    color: var(--aiforya-text);
    border: none;
    padding: 12px 0;
}
body[class*="aiforya"] .form-table th {
    color: var(--aiforya-text-muted);
    font-weight: 500;
    font-size: 13px;
    width: 240px;
}

/* ============================================================================
   9. KPI — .aiforya-kpi, .aiforya-kpi-value, .aiforya-kpi-label
   ============================================================================ */
.aiforya-kpi,
body[class*="aiforya"] .kpi-card {
    background: var(--aiforya-bg-card);
    border: 1px solid var(--aiforya-primary-soft);
    border-radius: var(--aiforya-radius);
    padding: 24px 20px;
    text-align: center;
    color: var(--aiforya-text);
    min-height: 110px;
    position: relative;
}
.aiforya-kpi-value,
.aiforya-kpi h3,
body[class*="aiforya"] .kpi-card h3 {
    margin: 0 !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--aiforya-text-strong) !important;
}
.aiforya-kpi-label,
.aiforya-kpi p,
body[class*="aiforya"] .kpi-card p {
    margin: 8px 0 0 0 !important;
    font-size: 13px !important;
    color: var(--aiforya-text-muted) !important;
}

/* Chart container */
body[class*="aiforya"] .chart-container {
    background: var(--aiforya-bg-card);
    border: 1px solid var(--aiforya-primary-soft);
    border-radius: var(--aiforya-radius);
    padding: 20px;
    margin-bottom: 16px;
}
body[class*="aiforya"] .chart-container canvas {
    max-height: 280px;
    width: 100%;
}

body[class*="aiforya"] .placeholder-text {
    color: var(--aiforya-text-light);
    text-align: center;
    padding: 16px;
    border: 1px dashed var(--aiforya-primary-strong);
    border-radius: var(--aiforya-radius-sm);
    background: rgba(15, 15, 35, 0.4);
    margin: 8px 0;
    font-size: 13px;
}

/* ============================================================================
   10. BADGES — .aiforya-badge-success/warning/danger/info
   ============================================================================ */
.aiforya-badge-success,
.aiforya-badge-warning,
.aiforya-badge-danger,
.aiforya-badge-info,
body[class*="aiforya"] [class*="aiforya-cr-status"],
body[class*="aiforya"] [class^="status-"] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}
.aiforya-badge-success,
body[class*="aiforya"] .status-active,
body[class*="aiforya"] .status-recovered,
body[class*="aiforya"] .status-success { background: rgba(34, 197, 94, 0.18); color: var(--aiforya-success); }

.aiforya-badge-warning,
body[class*="aiforya"] .status-in-progress,
body[class*="aiforya"] .status-pending,
body[class*="aiforya"] .status-warning  { background: rgba(245, 158, 11, 0.18); color: var(--aiforya-warning); }

.aiforya-badge-danger,
body[class*="aiforya"] .status-abandoned,
body[class*="aiforya"] .status-failed,
body[class*="aiforya"] .status-danger   { background: rgba(239, 68, 68, 0.18); color: var(--aiforya-danger); }

.aiforya-badge-info,
body[class*="aiforya"] .status-info     { background: rgba(14, 165, 233, 0.18); color: var(--aiforya-info); }

/* ============================================================================
   11. TABLES — .aiforya-table + wp-list-table auto
   ============================================================================ */
.aiforya-table,
body[class*="aiforya"] table.wp-list-table {
    background: var(--aiforya-bg-card) !important;
    border: 1px solid var(--aiforya-primary-soft) !important;
    border-radius: var(--aiforya-radius) !important;
    color: var(--aiforya-text) !important;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

body[class*="aiforya"] table.wp-list-table thead,
body[class*="aiforya"] table.wp-list-table tbody,
body[class*="aiforya"] table.wp-list-table tfoot,
body[class*="aiforya"] table.wp-list-table tr {
    background: var(--aiforya-bg-card) !important;
}

.aiforya-table thead th,
body[class*="aiforya"] table.wp-list-table thead th,
body[class*="aiforya"] table.wp-list-table tfoot th {
    background: var(--aiforya-bg-card) !important;
    color: var(--aiforya-text-strong) !important;
    border-bottom: 1px solid var(--aiforya-primary-soft) !important;
    padding: 14px 16px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

.aiforya-table tbody td,
body[class*="aiforya"] table.wp-list-table tbody td {
    background: var(--aiforya-bg-card) !important;
    color: var(--aiforya-text) !important;
    border-bottom: 1px solid var(--aiforya-primary-soft) !important;
    padding: 14px 16px !important;
}

body[class*="aiforya"] table.wp-list-table tbody tr:hover td {
    background: rgba(99, 102, 241, 0.06) !important;
}
body[class*="aiforya"] table.wp-list-table tbody tr:last-child td {
    border-bottom: none !important;
}

body[class*="aiforya"] table.wp-list-table.striped > tbody > :nth-child(odd),
body[class*="aiforya"] table.wp-list-table > tbody.striped > :nth-child(odd),
body[class*="aiforya"] table.wp-list-table > tbody > tr.alternate {
    background: var(--aiforya-bg-card) !important;
}

body[class*="aiforya"] table.wp-list-table .row-actions span a,
body[class*="aiforya"] table.wp-list-table a {
    color: #a5b4fc !important;
}

/* ============================================================================
   12. COMPAT WP — notices + tablenav + bulkactions + pagination
   ============================================================================ */
body[class*="aiforya"] .tablenav,
body[class*="aiforya"] .tablenav.top,
body[class*="aiforya"] .tablenav.bottom,
body[class*="aiforya"] .tablenav .actions,
body[class*="aiforya"] .tablenav .tablenav-pages,
body[class*="aiforya"] .tablenav .alignleft,
body[class*="aiforya"] .tablenav .alignright,
body[class*="aiforya"] .bulkactions,
body[class*="aiforya"] .search-box,
body[class*="aiforya"] .subsubsub,
body[class*="aiforya"] .views,
body[class*="aiforya"] form#posts-filter,
body[class*="aiforya"] .aiforya-card form,
body[class*="aiforya"] .aiforya-card .form-wrap {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
    margin: 0 !important;
}

body[class*="aiforya"] .tablenav-pages .paging-input,
body[class*="aiforya"] .tablenav-pages input.current-page {
    width: auto !important;
    min-width: 50px !important;
    max-width: 80px !important;
    text-align: center !important;
    padding: 6px 10px !important;
    min-height: auto !important;
}

body[class*="aiforya"] .tablenav-pages a,
body[class*="aiforya"] .tablenav-pages-navspan,
body[class*="aiforya"] .tablenav .current-page,
body[class*="aiforya"] .tablenav-pages .paging-input,
body[class*="aiforya"] .tablenav .actions {
    background: var(--aiforya-bg-card) !important;
    color: var(--aiforya-text) !important;
    border: 1px solid var(--aiforya-primary-strong) !important;
    border-radius: var(--aiforya-radius-sm) !important;
}

body[class*="aiforya"] .bulkactions select,
body[class*="aiforya"] .tablenav select,
body[class*="aiforya"] .actions select {
    min-width: 180px !important;
}

body[class*="aiforya"] .button.action,
body[class*="aiforya"] input.button.action,
body[class*="aiforya"] .tablenav .button:not(.button-primary):not(.page-title-action),
body[class*="aiforya"] .bulkactions .button:not(.button-primary) {
    background: var(--aiforya-bg-card) !important;
    color: var(--aiforya-text) !important;
    border: 1px solid var(--aiforya-primary-strong) !important;
    border-radius: var(--aiforya-radius-sm) !important;
    text-shadow: none !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    min-height: 40px !important;
}

/* Notices WP — skeleton : bleu bouton transparent uniforme + accent gauche "avertissement"
   Note : variantes notice-success/warning/error/info gardent même look bleu (uniformité AIFORYA).
   Si différenciation sémantique souhaitée plus tard, modifier border-left-color par variante. */
body[class*="aiforya"] .notice,
body[class*="aiforya"] .updated,
body[class*="aiforya"] .error {
    background: #0f1729 !important;
    background-color: #0f1729 !important;
    background-image: none !important;
    border: 1.5px solid #3b82f6 !important;
    border-left: 1.5px solid #3b82f6 !important;
    border-radius: 12px !important;
    color: #e5e7eb !important;
    padding: 1rem 1.25rem !important;
    margin: 0.5rem 0 !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px -12px rgba(59, 130, 246, 0.25) !important;
}

.aiforya-shell__content [class*="-wrap"]:not(.aiforya-shell):not(.aiforya-admin-wrap):not(.aiforya-hub-wrap):not(.aiforya-cr-wrap),
.aiforya-shell__content [class*="-area"],
.aiforya-shell__content [class*="-list"]:not(.wp-list-table):not(ul):not(ol) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Spinners override */
body[class*="aiforya"] .spinner.is-active {
    background-image: none;
    width: 24px;
    height: 24px;
    border: 3px solid var(--aiforya-primary-soft);
    border-top-color: var(--aiforya-primary);
    border-radius: 50%;
    animation: aiforya-spin 0.8s linear infinite;
    visibility: visible;
    opacity: 1;
}
@keyframes aiforya-spin { to { transform: rotate(360deg); } }

/* Sequence steps */
body[class*="aiforya"] .sequence-step,
body[class*="aiforya"] [class*="sequence-step"] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--aiforya-bg-elevated);
    border: 1px solid var(--aiforya-primary-soft);
    border-radius: var(--aiforya-radius-sm);
    margin-bottom: 8px;
}
body[class*="aiforya"] .step-handle {
    cursor: move;
    color: var(--aiforya-text-light);
}

/* Support+Avis grid */
.aiforya-page__intro { margin-bottom: 20px; }
.aiforya-page__title { color: var(--aiforya-text-strong); margin: 0 0 8px 0; }
.aiforya-page__lead  { color: var(--aiforya-text-muted); margin: 0; }
.aiforya-support-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* ============================================================================
   13. RESPONSIVE
   ============================================================================ */
@media (max-width: 900px) {
    .aiforya-form-row { grid-template-columns: 1fr; }
    .aiforya-support-grid { grid-template-columns: 1fr; }
}

@media (max-width: 782px) {
    .aiforya-shell { padding: 24px 32px 24px 16px; }
    .aiforya-shell__header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .aiforya-shell__logo { height: 48px; max-width: 48px; }
    /* Mobile : la nav classique disparaît au profit d'un <select> natif (cf
       __mobile-nav ci-dessous), pour un rendu pro sans scrollbar horizontale. */
    .aiforya-shell .aiforya-shell__tabs,
    body[class*="aiforya"] .aiforya-shell__tabs { display: none !important; }
    .aiforya-form-actions { flex-direction: column-reverse; align-items: stretch; }
    .aiforya-form-actions > * { width: 100%; }
}

/* ============================================================================
   13b. MOBILE NAV — <select> natif injecté en JS, visible uniquement < 782px
   Solution alternative à l'overflow-x scroll pour une UX premium responsive.
   ============================================================================ */
.aiforya-shell__mobile-nav {
    display: none;
    width: 100%;
    padding: 14px 44px 14px 48px;
    background-color: var(--aiforya-bg-card);
    color: var(--aiforya-text);
    border: 1px solid var(--aiforya-primary-soft);
    border-radius: var(--aiforya-radius);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 18px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* 2 SVG : burger ☰ à gauche (indique "menu") + chevron ▾ à droite. */
    background-image:
        url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393c5fd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E"),
        url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2393c5fd'%3E%3Cpath d='M3.204 6.2a.5.5 0 0 1 .708 0L8 10.293l4.088-4.092a.5.5 0 1 1 .707.708l-4.443 4.444a.5.5 0 0 1-.707 0L3.204 6.908a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-position: left 14px center, right 14px center;
    background-repeat: no-repeat, no-repeat;
    background-size: 20px, 16px;
    transition: var(--aiforya-transition);
}
.aiforya-shell__mobile-nav:hover {
    border-color: var(--aiforya-primary);
}
.aiforya-shell__mobile-nav:focus {
    outline: none;
    border-color: var(--aiforya-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22);
}
.aiforya-shell__mobile-nav option {
    background-color: var(--aiforya-bg-card);
    color: var(--aiforya-text);
    padding: 6px 8px;
}
@media (max-width: 782px) {
    .aiforya-shell__mobile-nav { display: block; }
}

/* ============================================================================
   14. RESET WP NATIVE WIDGETS — Préserve l'apparence WP standard pour les
   modales media library, color picker et autres widgets natifs WordPress
   qui pourraient être contaminés par notre cascade body[class*="aiforya"].
   ============================================================================ */

/* Modale Media Library : restaure l'apparence WP native (les visiteurs
   WP sont habitués à ces couleurs claires/boutons standards). */
body[class*="aiforya"] .media-modal,
body[class*="aiforya"] .media-modal *,
body[class*="aiforya"] .media-modal-backdrop,
body[class*="aiforya"] .media-modal-backdrop * {
    color-scheme: light;
}
body[class*="aiforya"] .media-modal {
    background: #fff;
}
body[class*="aiforya"] .media-modal .button.button-primary,
body[class*="aiforya"] .media-modal-backdrop .button.button-primary,
body[class*="aiforya"] .media-toolbar .button-primary,
body[class*="aiforya"] .media-frame .button-primary,
body[class*="aiforya"] .media-modal .media-button-primary,
body[class*="aiforya"] .media-modal .media-button-select {
    background: #2271b1 !important;
    color: #fff !important;
    border: 1px solid #2271b1 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    padding: 0 12px !important;
    height: 30px !important;
    min-height: 30px !important;
    line-height: 28px !important;
    font-weight: 400 !important;
    font-size: 13px !important;
}
body[class*="aiforya"] .media-modal .button:not(.button-primary):not(.media-modal-close),
body[class*="aiforya"] .media-modal .button-secondary {
    background: #f6f7f7 !important;
    color: #2271b1 !important;
    border: 1px solid #2271b1 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    padding: 0 12px !important;
    height: 30px !important;
    min-height: 30px !important;
    line-height: 28px !important;
    font-weight: 400 !important;
    font-size: 13px !important;
}
body[class*="aiforya"] .media-modal input[type="text"],
body[class*="aiforya"] .media-modal input[type="search"],
body[class*="aiforya"] .media-modal input[type="url"],
body[class*="aiforya"] .media-modal input[type="email"],
body[class*="aiforya"] .media-modal textarea,
body[class*="aiforya"] .media-modal select {
    background: #fff !important;
    color: #1d2327 !important;
    border: 1px solid #8c8f94 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07) !important;
    padding: 4px 8px !important;
    border-radius: 3px !important;
    min-height: 30px !important;
}
/* Quand la modale est ouverte, masquer le shell admin AIFORYA derrière
   pour qu'aucun bouton/menu ne déborde par-dessus. */
body.modal-open #wpwrap > * { /* nothing — laisse WP gérer ses z-index */ }

/* ============================================================================
   15. NOTICES INFO INLINE (.aiforya-mmp-help-text et compatibles)
   ============================================================================ */
body[class*="aiforya"] .aiforya-mmp-help-text,
body[class*="aiforya"] .aiforya-help-text {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(59, 130, 246, 0.08);
    border-left: 3px solid var(--aiforya-primary);
    color: var(--aiforya-text);
    padding: 12px 14px;
    border-radius: 4px;
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
}
body[class*="aiforya"] .aiforya-mmp-help-text .dashicons,
body[class*="aiforya"] .aiforya-help-text .dashicons {
    color: var(--aiforya-primary);
    flex-shrink: 0;
    margin-top: 2px;
}
body[class*="aiforya"] .aiforya-mmp-help-text code {
    background: rgba(0, 0, 0, 0.25);
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--aiforya-text-strong);
    font-size: 12px;
}

/* Compat : ancienne classe summary-box utilisée dans tab-access. */
body[class*="aiforya"] .aiforya-mmp-summary-box {
    background: rgba(59, 130, 246, 0.06);
}
body[class*="aiforya"] .aiforya-mmp-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
body[class*="aiforya"] .aiforya-mmp-summary-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body[class*="aiforya"] .aiforya-mmp-summary-list li:last-child { border-bottom: none; }
body[class*="aiforya"] .aiforya-mmp-count-badge {
    display: inline-block;
    min-width: 28px;
    padding: 2px 10px;
    background: var(--aiforya-primary);
    color: #fff;
    border-radius: 12px;
    font-weight: 600;
    text-align: center;
}

/* ============================================================================
   16. WIDTH UNIFORME — tous les onglets ont la même largeur de contenu pour
   un rendu produit homogène (gamme haut de gamme).
   ============================================================================ */
.aiforya-shell__content,
body[class*="aiforya"] .aiforya-shell__content {
    max-width: none;
}

/* ============================================================================
   PATCHES V18.4 (4 mai 2026) — fix transverses détectés sur Alt Text V1 + MMP V1
   À appliquer DANS LE SHELL VENDOR uniquement (pas par extension).
   ============================================================================ */

/* V18.5 — Champs date/time/datetime-local : style CHARTE AIFORYA (fond bleu foncé,
   bord bleu, texte blanc) au lieu de l'apparence WP brute. color-scheme: dark
   pour que le calendrier natif Chromium s'affiche aussi en mode sombre. */
body[class*="aiforya"] input[type="date"],
body[class*="aiforya"] input[type="time"],
body[class*="aiforya"] input[type="datetime-local"],
body[class*="aiforya"] input[type="month"],
body[class*="aiforya"] input[type="week"] {
    background-color: #0f1729 !important;
    color: #ffffff !important;
    border: 1.5px solid #3b82f6 !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    color-scheme: dark !important;
    min-height: 36px;
    line-height: 1.4;
    font-family: inherit;
}

body[class*="aiforya"] input[type="date"]:focus,
body[class*="aiforya"] input[type="time"]:focus,
body[class*="aiforya"] input[type="datetime-local"]:focus,
body[class*="aiforya"] input[type="month"]:focus,
body[class*="aiforya"] input[type="week"]:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    outline: none !important;
}

/* Picker indicator (icône calendrier) : blanc inversé pour fond sombre. */
body[class*="aiforya"] input[type="date"]::-webkit-calendar-picker-indicator,
body[class*="aiforya"] input[type="time"]::-webkit-calendar-picker-indicator,
body[class*="aiforya"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.85;
    cursor: pointer;
}

/* V18.5 — Media Modal WP : assurer que la modale ET son backdrop ont le BON ordre
   z-index (modal AU-DESSUS du backdrop, sinon clics impossibles). On ne touche au
   z-index QUE si nécessaire (backdrop reste sous, modal ré-élevée juste au-dessus). */
.media-modal {
    z-index: 999999 !important;
}
.media-modal-backdrop {
    z-index: 999998 !important; /* TOUJOURS sous .media-modal pour ne pas bloquer les clics */
}
/* V18.5 — Quand modal-open, neutraliser tout z-index/position concurrents AIFORYA. */
body.modal-open .aiforya-shell-mobile-nav,
body.modal-open .aiforya-page__nav,
body.modal-open .aiforya-page-header,
body.modal-open .aiforya-card,
body.modal-open .aiforya-section {
    z-index: auto !important;
}

/* V18.7 (4 mai capture #2) — La VRAIE classe BEM du burger mobile est
   `.aiforya-shell__mobile-nav` (DOUBLE underscore), pas `aiforya-shell-mobile-nav`
   (mon V18.6 ratait le sélecteur). On force z-index très bas + on masque carrément
   le burger quand une modale Media WP est ouverte (détection par .media-modal
   sibling présent dans le DOM via :has() — fallback sur abaissement z-index pour
   navigateurs sans :has()). */
.aiforya-shell__mobile-nav,
select.aiforya-shell__mobile-nav,
.aiforya-page .aiforya-shell__mobile-nav {
    z-index: 50 !important;
    position: relative !important;
}

/* Si le navigateur supporte :has() (Chrome 105+, Safari 15.4+, FF 121+),
   masque carrément le burger quand la modale Media est visible. */
body:has(.media-modal:not([style*="display: none"])) .aiforya-shell__mobile-nav,
html:has(.media-modal:not([style*="display: none"])) .aiforya-shell__mobile-nav {
    visibility: hidden !important;
}

/* Bonus défensif : tout élément AIFORYA fixed/sticky est plafonné à z-index 100. */
.aiforya-page [style*="position: fixed"],
.aiforya-page [style*="position:fixed"] {
    z-index: 100 !important;
}

/* ============================================================================
   V18.8 (4 mai PM, newsletter PIVOT capture) — fond blanc résiduel sur :
   - <code> blocks (display shortcode)
   - inputs/textarea du form preview frontend rendered en admin
   - inputs WP standard (form-table, .regular-text) qui échappent au scope existant
   Force charte AIFORYA bleu foncé + bord bleu + texte blanc partout sur body[class*="aiforya"].
   ============================================================================ */

/* CODE BLOCKS — display shortcode + snippets */
body[class*="aiforya"] code,
body[class*="aiforya"] pre {
    background-color: var(--aiforya-bg-input, #0f0f23) !important;
    color: var(--aiforya-text, #e5e7eb) !important;
    border: 1px solid var(--aiforya-primary-soft, rgba(59, 130, 246, 0.4)) !important;
    border-radius: var(--aiforya-radius-sm, 8px) !important;
    padding: 8px 12px !important;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
    font-size: 13px !important;
}

/* SHORTCODE BOX wrapper — flex row code + bouton Copier */
body[class*="aiforya"] .aiforya-ns-shortcode-box,
body[class*="aiforya"] .aiforya-shortcode-box,
body[class*="aiforya"] [class*="shortcode-box"] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
}
body[class*="aiforya"] .aiforya-ns-shortcode-box code,
body[class*="aiforya"] .aiforya-shortcode-box code,
body[class*="aiforya"] [class*="shortcode-box"] code {
    flex: 1;
    min-height: 40px;
    display: flex;
    align-items: center;
}

/* FORM PREVIEW frontend rendered en admin — force charte AIFORYA */
body[class*="aiforya"] .aiforya-ns-form-preview input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="hidden"]),
body[class*="aiforya"] .aiforya-ns-form-preview textarea,
body[class*="aiforya"] .aiforya-ns-form-preview select,
body[class*="aiforya"] .aiforya-ns-subscription-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="hidden"]),
body[class*="aiforya"] .aiforya-ns-subscription-form textarea,
body[class*="aiforya"] .aiforya-ns-subscription-form select {
    background-color: var(--aiforya-bg-input, #0f0f23) !important;
    color: var(--aiforya-text, #e5e7eb) !important;
    border: 1px solid var(--aiforya-primary-soft, rgba(59, 130, 246, 0.4)) !important;
    border-radius: var(--aiforya-radius-sm, 8px) !important;
    padding: 10px 14px !important;
    box-shadow: none !important;
    min-height: 40px !important;
    box-sizing: border-box;
    width: 100%;
}
body[class*="aiforya"] .aiforya-ns-form-preview input::placeholder,
body[class*="aiforya"] .aiforya-ns-form-preview textarea::placeholder,
body[class*="aiforya"] .aiforya-ns-subscription-form input::placeholder,
body[class*="aiforya"] .aiforya-ns-subscription-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Couvrir aussi les form WP admin standard (regular-text, large-text, code) */
body[class*="aiforya"] input.regular-text,
body[class*="aiforya"] input.large-text,
body[class*="aiforya"] input.small-text,
body[class*="aiforya"] input.code,
body[class*="aiforya"] textarea.regular-text,
body[class*="aiforya"] textarea.large-text,
body[class*="aiforya"] textarea.code {
    background-color: var(--aiforya-bg-input, #0f0f23) !important;
    color: var(--aiforya-text, #e5e7eb) !important;
    border: 1px solid var(--aiforya-primary-soft, rgba(59, 130, 246, 0.4)) !important;
    border-radius: var(--aiforya-radius-sm, 8px) !important;
    padding: 10px 14px !important;
}

/* ============================================================================
   FIN aiforya-shell.css — Design System v36 (27/04/2026) + patches V18.4-V18.8 (04/05/2026)
   ============================================================================ */