/**
 * ==============================================================================
 * JADOX UNIVERSAL RESPONSIVE & ACCESSIBILITY SYSTEM
 * Socle universel : Responsivité, Accessibilité, Neurodiversité, Skeletons & UX
 * ==============================================================================
 */

/* 0. DÉCLARATION DES COUCHES DE CASCADE CSS (@layer) */
@layer reset, base, design-tokens, accessibility, components, views, utilities;

/* POLICES D'ACCESSIBILITÉ (OPENDYSLEXIC & HYPERLEGIBLE) */
@import url('https://fonts.cdnfonts.com/css/opendyslexic');
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap');

/* 1. RESET FLUIDE & PRÉVENTION DU DÉBORDEMENT HORIZONTAL */
*, *::before, *::after {
    box-sizing: border-box;
    min-width: 0;
}

html, body {
    max-width: 100vw;
    overflow-x: clip;
    -webkit-overflow-scrolling: touch;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* 2. CONTENEURS & GRILLES AUTO-ADAPTATIVES */
.responsive-container, .main-container, .dashboard-container, .page-wrapper {
    width: 100%;
    max-width: 100%;
    padding-left: clamp(12px, 3vw, 24px);
    padding-right: clamp(12px, 3vw, 24px);
}

.responsive-grid, .cards-grid, .modules-grid, .stats-grid, .games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)) !important;
    gap: clamp(12px, 2.5vw, 24px) !important;
    width: 100% !important;
}

/* 3. TABLEAUX SCROLLABLES TACTILES SANS CASSER LA PAGE */
.table-responsive, .table-wrapper, .logs-table-container, .members-table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: clamp(8px, 2vw, 14px);
}

.table-responsive table {
    width: 100%;
    min-width: min(100%, 650px);
}

/* 4. MODALES & DIALOGUES FLUIDES */
.modal-dialog, .modal-content, .popup-box, .swal2-popup {
    width: min(94vw, 620px) !important;
    max-width: 94vw !important;
    margin: auto !important;
}

/* 5. BOUTONS & CIBLES TACTILES TOUCH-FRIENDLY */
button, .btn, .nav-item, .custom-select, input[type="button"], input[type="submit"] {
    min-height: 38px;
    touch-action: manipulation;
}

/* 6. NEURODIVERSITÉ : POLICES OPENDYSLEXIC & HYPERLEGIBLE */
html.font-opendyslexic,
html.font-opendyslexic body,
html.font-opendyslexic p,
html.font-opendyslexic a,
html.font-opendyslexic span:not([class*="fa"]):not([class*="icon"]),
html.font-opendyslexic div:not([class*="fa"]):not([class*="icon"]),
html.font-opendyslexic label,
html.font-opendyslexic li,
html.font-opendyslexic td,
html.font-opendyslexic th,
html.font-opendyslexic h1,
html.font-opendyslexic h2,
html.font-opendyslexic h3,
html.font-opendyslexic h4,
html.font-opendyslexic h5,
html.font-opendyslexic h6,
html.font-opendyslexic input,
html.font-opendyslexic button,
html.font-opendyslexic select,
html.font-opendyslexic textarea {
    font-family: 'OpenDyslexic', 'Outfit', sans-serif !important;
    letter-spacing: 0.04em !important;
    line-height: 1.65 !important;
}

html.font-hyperlegible,
html.font-hyperlegible body,
html.font-hyperlegible p,
html.font-hyperlegible a,
html.font-hyperlegible span:not([class*="fa"]):not([class*="icon"]),
html.font-hyperlegible div:not([class*="fa"]):not([class*="icon"]),
html.font-hyperlegible label,
html.font-hyperlegible li,
html.font-hyperlegible td,
html.font-hyperlegible th,
html.font-hyperlegible h1,
html.font-hyperlegible h2,
html.font-hyperlegible h3,
html.font-hyperlegible h4,
html.font-hyperlegible h5,
html.font-hyperlegible h6,
html.font-hyperlegible input,
html.font-hyperlegible button,
html.font-hyperlegible select,
html.font-hyperlegible textarea {
    font-family: 'Atkinson Hyperlegible', sans-serif !important;
    letter-spacing: 0.02em !important;
}

/* PRÉSERVATION STRICTE DES ICÔNES FONTAWESOME & SYMBOLES DU MENU */
html.font-opendyslexic i,
html.font-opendyslexic .fa,
html.font-opendyslexic .fas,
html.font-opendyslexic .far,
html.font-opendyslexic .fab,
html.font-opendyslexic .fad,
html.font-opendyslexic .fal,
html.font-opendyslexic [class*="fa-"],
html.font-opendyslexic [class*="fa-"]::before,
html.font-opendyslexic [class*="fa-"]::after,
html.font-hyperlegible i,
html.font-hyperlegible .fa,
html.font-hyperlegible .fas,
html.font-hyperlegible .far,
html.font-hyperlegible .fab,
html.font-hyperlegible .fad,
html.font-hyperlegible .fal,
html.font-hyperlegible [class*="fa-"],
html.font-hyperlegible [class*="fa-"]::before,
html.font-hyperlegible [class*="fa-"]::after {
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "FontAwesome" !important;
    letter-spacing: normal !important;
    line-height: inherit !important;
}

/* 7. NEURODIVERSITÉ : MODE ZEN SENSORIEL (ANTI-SURCHARGE) */
html.mode-zen .ambient-aurora,
html.mode-zen .aurora-sphere,
html.mode-zen .floating-sparkles {
    display: none !important;
}

html.mode-zen * {
    animation: none !important;
    transition-duration: 0.05s !important;
}

html.mode-zen .dashboard-card,
html.mode-zen .member-card,
html.mode-zen .panel-card {
    backdrop-filter: none !important;
    background: #141419 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

/* 8. ACCESSIBILITÉ VISUELLE : FILTRES DALTONISME */
html.colorblind-protanopia {
    filter: url('#jadox-filter-protanopia') grayscale(15%);
}

html.colorblind-deuteranopia {
    filter: url('#jadox-filter-deuteranopia') grayscale(15%);
}

html.colorblind-tritanopia {
    filter: url('#jadox-filter-tritanopia');
}

html.colorblind-monochrome {
    filter: grayscale(100%) contrast(125%);
}

/* 9. SKELETON LOADERS UNIVERSELS (SHIMMER EFFECT) */
@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton-shimmer, .skeleton-card, .skeleton-avatar, .skeleton-text, .skeleton-badge {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.03) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.8s infinite ease-in-out;
    border-radius: var(--radius-sm, 8px);
    display: inline-block;
}

.skeleton-avatar { width: 44px; height: 44px; border-radius: 50%; }
.skeleton-text { width: 100%; height: 14px; margin-bottom: 6px; border-radius: 4px; }
.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 70%; }
.skeleton-card { width: 100%; height: 180px; border-radius: var(--radius-md, 14px); }

/* 10. ACCESSIBILITÉ : FOCUS-VISIBLE & CONTOURS CLAVIER */
:focus-visible {
    outline: 2px solid var(--color-primary, #6366f1) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5) !important;
}

/* 11. RESPECT DES PRÉFÉRENCES UTILISATEUR (REDUCED MOTION) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* 12. ADAPTATIONS SMARTPHONES (< 768px) */
@media (max-width: 768px) {
    h1, .page-title, .section-title {
        font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
        line-height: 1.25 !important;
    }
    
    h2 { font-size: clamp(1.1rem, 4vw, 1.4rem) !important; }
    
    .flex-row-mobile-col, .d-flex:not(.keep-row) {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .filter-bar, .actions-bar, .header-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .filter-bar input, .filter-bar select, .actions-bar .btn { width: 100% !important; }
    .modal-dialog { width: calc(100vw - 20px) !important; padding: 16px !important; }
    .responsive-grid, .cards-grid { grid-template-columns: 1fr !important; }
}

/* 13. ADAPTATIONS ULTRA-COMPACTES (< 380px) */
@media (max-width: 380px) {
    .responsive-container, .main-container { padding-left: 8px !important; padding-right: 8px !important; }
    .btn, button { padding-left: 10px !important; padding-right: 10px !important; font-size: 0.82rem !important; }
}