/* ═══════════════════════════════════════════════════════════════
   TeachMeMore Dashboard v4.0 — Architecture BEM
   
   Convention :
     .tmm-{block}              → composant autonome
     .tmm-{block}__{element}   → sous-partie du block
     .tmm-{block}--{modifier}  → variante
     .is-{state}               → état dynamique (JS)
     .js-{hook}                → crochet JS (pas de style)
   
   Table des matières :
     0. VARIABLES & RESET
     1. LAYOUT (tmm-layout, tmm-main)
     2. LOADER
     3. SIDEBAR
     4. SECTIONS (squelette commun)
     5. TOOLBAR (filtres, tabs, recherche)
     6. CARDS
     7. STATS
     8. PROGRESS BAR
     9. BUTTONS
    10. BADGES & TAGS
    11. GRIDS
    12. WELCOME BANNER
    13. COURSES
    14. CERTIFICATES
    15. ACTIVITY LIST
    16. SUGGESTIONS LIST
    17. FORMS
    18. SWITCH
    19. MEMBERSHIP / META
    20. EMPTY STATE
    21. MESSAGES & TOASTS
    22. SCROLLBAR & SELECTION
    23. ANIMATIONS
    24. ACCESSIBILITY
    25. RESPONSIVE
    26. PARCOURS
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════
   0. VARIABLES & RESET
   ═══════════════════════════════════════════ */
:root {
    /* Palette */
    --tmm-primary: #8B5CF6;
    --tmm-primary-dark: #7C3AED;
    --tmm-primary-light: #A78BFA;
    --tmm-accent: #6366F1;
    --tmm-accent-light: #818CF8;
    --tmm-accent-glow: rgba(139, 92, 246, 0.3);

    /* Gradients */
    --tmm-gradient: linear-gradient(135deg, #8B5CF6 0%, #6366F1 50%, #3B82F6 100%);
    --tmm-gradient-hover: linear-gradient(135deg, #7C3AED 0%, #4F46E5 50%, #2563EB 100%);
    --tmm-gradient-soft: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(99, 102, 241, 0.1) 100%);

    /* Surfaces — fond légèrement teinté violet/bleu plutôt que noir pur, avec
       des paliers d'élévation plus marqués pour que les cartes se détachent
       clairement du fond (l'ancien palier 0D0D0D → 1A1A1A → 1F1F1F était trop
       resserré, tout se confondait). */
    --tmm-bg-base: #100E17;
    --tmm-bg-card: #1C1A27;
    --tmm-bg-sidebar: #17151F;
    --tmm-bg-hover: #292534;
    --tmm-bg-elevated: #211F2C;
    /* Fond des champs de formulaire : plus sombre que la carte (effet "creusé"),
       pour se distinguer sans avoir besoin d'une bordure visible. */
    --tmm-bg-input: #17151F;

    /* Text — blanc cassé plutôt que blanc pur, moins agressif sur fond sombre */
    --tmm-text: #F3F1F8;
    --tmm-text-muted: #9995AB;
    --tmm-text-secondary: #B7B3C6;

    /* Borders — plus visibles qu'avant (8% → 14%) pour que les champs et
       cartes se lisent comme des formes distinctes, pas des blocs flottants */
    --tmm-border: rgba(255, 255, 255, 0.14);
    --tmm-border-hover: rgba(255, 255, 255, 0.24);

    /* Semantic */
    --tmm-success: #4ADE80;
    --tmm-danger: #F87171;
    --tmm-warning: #FBBF24;
    --tmm-info: #60A5FA;

    /* Radii */
    --tmm-radius: 12px;
    --tmm-radius-sm: 8px;
    --tmm-radius-lg: 16px;
    --tmm-radius-full: 9999px;

    /* Shadows */
    --tmm-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    --tmm-shadow-glow: 0 0 30px var(--tmm-accent-glow);
    --tmm-shadow-violet: 0 4px 20px rgba(139, 92, 246, 0.25);

    /* Motion */
    --tmm-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --tmm-transition: all 0.2s var(--tmm-ease);
    --tmm-transition-fast: all 0.15s ease;
    --tmm-transition-slow: all 0.3s var(--tmm-ease);
}

#tmm-dashboard[data-theme="light"] {
    --tmm-bg-base: #F5F7FB;
    --tmm-bg-card: #FFFFFF;
    --tmm-bg-sidebar: #FFFFFF;
    --tmm-bg-hover: #EEF2FF;
    --tmm-bg-elevated: #F8FAFC;
    --tmm-bg-input: #F1F4F9;
    --tmm-text: #0F172A;
    --tmm-text-muted: #64748B;
    --tmm-text-secondary: #475569;
    --tmm-border: rgba(15, 23, 42, 0.08);
    --tmm-border-hover: rgba(15, 23, 42, 0.16);
    --tmm-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    --tmm-shadow-violet: 0 10px 25px rgba(99, 102, 241, 0.2);
}

#tmm-dashboard[data-theme="light"] .tmm-progress {
    background: rgba(15, 23, 42, 0.08);
}

.tmm-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tmm-layout *,
.tmm-layout *::before,
.tmm-layout *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.tmm-widget-scope {
    color: var(--tmm-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.tmm-widget-scope h1,
.tmm-widget-scope h2,
.tmm-widget-scope h3,
.tmm-widget-scope h4,
.tmm-widget-scope p {
    color: inherit;
}

/* ═══════════════════════════════════════════
   0. ANTI-THEME SHIELD
   WordPress themes override native HTML elements
   (header, section, h1-h4, button, a, p…).
   
   Strategy:
   - #ID + !important for header & section (nuclear, these MUST be transparent)
   - .tmm-layout prefix for text elements (specificity 0,1,1 beats theme)
   - Component classes (.tmm-btn, .tmm-stat, etc.) override these naturally
   ═══════════════════════════════════════════ */

/* --- NUCLEAR: header & section backgrounds --- */
#tmm-dashboard header {
    display: flex !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    float: none !important;
    box-shadow: none !important;
    color: var(--tmm-text) !important;
}

#tmm-dashboard section {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    box-shadow: none !important;
    color: var(--tmm-text) !important;
}

#tmm-dashboard aside {
    background: var(--tmm-bg-sidebar) !important;
    color: var(--tmm-text) !important;
    float: none !important;
}

#tmm-dashboard main {
    background: var(--tmm-bg-base) !important;
    color: var(--tmm-text) !important;
    float: none !important;
}

#tmm-dashboard nav {
    background: transparent !important;
    border: none !important;
}

#tmm-dashboard form {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- Text elements: #ID specificity beats WordPress theme ---
   Themes commonly set h1-h4, p, span to dark colors (#333, #000).
   On our dark background, this makes text invisible.
   #ID beats any class-based theme selector. */
#tmm-dashboard h1,
#tmm-dashboard h2,
#tmm-dashboard h3,
#tmm-dashboard h4 {
    color: var(--tmm-text) !important;
    font-family: inherit;
    line-height: 1.3;
    background: none !important;
    border: none;
    padding: 0;
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
}

#tmm-dashboard p,
#tmm-dashboard span,
#tmm-dashboard label,
#tmm-dashboard li {
    color: inherit;
    font-family: inherit;
}

#tmm-dashboard a {
    color: inherit;
    text-decoration: none;
}

/* --- Interactive elements: :where() keeps 0 specificity ---
   Component classes (.tmm-btn, .tmm-toolbar__tab-btn, .tmm-form__input)
   MUST be able to override these defaults. */
:where(#tmm-dashboard) button {
    background: none;
    border: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    padding: 0;
    line-height: inherit;
}

:where(#tmm-dashboard) input,
:where(#tmm-dashboard) select,
:where(#tmm-dashboard) textarea {
    font-family: inherit;
    color: var(--tmm-text);
}

/* --- Structural: reset lists, images --- */
#tmm-dashboard ul,
#tmm-dashboard ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

:where(#tmm-dashboard) img {
    max-width: 100%;
    height: auto;
}

:where(#tmm-dashboard) canvas {
    display: block;
    max-width: 100%;
}

/* --- TARGETED text visibility ---
   Theme may set h1-h4 and p to dark colors (#333, #000…)
   which becomes invisible on our dark background.
   Use #ID to force white text where it matters. */
#tmm-dashboard .tmm-section__title,
#tmm-dashboard .tmm-card__title,
#tmm-dashboard .tmm-empty h3,
#tmm-dashboard .tmm-cert__title,
#tmm-dashboard .tmm-form__section-title {
    color: var(--tmm-text) !important;
}

/* Le thème du site définit ses propres tailles/marges globales pour h1-h4
   (souvent bien plus grandes que celles du plugin) qui gagnent sinon sur la
   simple règle .tmm-section__title { font-size: 24px } plus bas dans ce
   fichier — d'où un titre de section démesuré une fois le CSS du thème chargé. */
#tmm-dashboard .tmm-section__title {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}

#tmm-dashboard .tmm-empty p,
#tmm-dashboard .tmm-cert__detail,
#tmm-dashboard .tmm-text--muted,
#tmm-dashboard .tmm-form__label,
#tmm-dashboard .tmm-stat__label,
#tmm-dashboard .tmm-meta__label {
    color: var(--tmm-text-muted) !important;
}

#tmm-dashboard .tmm-stat__value,
#tmm-dashboard .tmm-meta__value {
    color: var(--tmm-text) !important;
}

#tmm-dashboard .tmm-form__input {
    background: var(--tmm-bg-input) !important;
    /* Pas de bordure visible par défaut : le champ se distingue de la carte
       par sa couleur de fond (recessed), pas par un contour — un contour
       blanc, même discret, "brille" trop fort sur un fond très sombre et
       donne un rendu wireframe/non fini. La bordure n'apparaît qu'au survol
       et au focus, pour rester une confirmation d'interaction plutôt qu'un
       trait dessiné en permanence autour de chaque champ. */
    border: 1px solid transparent !important;
    color: var(--tmm-text) !important;
    /* Le thème du site réinitialise souvent border-radius/padding sur les champs
       (form reset générique) : sans !important ici, les inputs perdent leurs coins
       arrondis et leur confort de frappe et ressemblent à des <input> non stylés. */
    border-radius: var(--tmm-radius-sm) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    box-shadow: none !important;
    transition: var(--tmm-transition-fast);
}

#tmm-dashboard .tmm-form__input:hover {
    border-color: var(--tmm-border) !important;
}

#tmm-dashboard .tmm-form__input:focus {
    border-color: var(--tmm-primary) !important;
    background: var(--tmm-bg-input) !important;
    box-shadow: 0 0 0 3px var(--tmm-accent-glow) !important;
}

#tmm-dashboard .tmm-form__input::placeholder {
    color: var(--tmm-text-muted) !important;
    opacity: 1 !important;
}

/* Champ fichier natif : sans style, le bouton "Choisir un fichier" reste rendu
   par le navigateur (bloc blanc anguleux) et détonne complètement en mode sombre. */
#tmm-dashboard input[type="file"].tmm-form__input {
    padding: 8px !important;
    cursor: pointer;
}

#tmm-dashboard input[type="file"].tmm-form__input::file-selector-button,
#tmm-dashboard input[type="file"].tmm-form__input::-webkit-file-upload-button {
    background: var(--tmm-bg-hover) !important;
    color: var(--tmm-text) !important;
    border: 1px solid var(--tmm-border) !important;
    border-radius: var(--tmm-radius-sm) !important;
    padding: 8px 14px !important;
    margin-right: 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    cursor: pointer;
    transition: var(--tmm-transition);
}

#tmm-dashboard input[type="file"].tmm-form__input:hover::file-selector-button,
#tmm-dashboard input[type="file"].tmm-form__input:hover::-webkit-file-upload-button {
    background: var(--tmm-bg-elevated) !important;
    border-color: var(--tmm-border-hover) !important;
}

/* Chevron personnalisé sur les <select> — la flèche par défaut du navigateur
   rend différemment selon l'OS/navigateur et casse la cohérence visuelle. */
#tmm-dashboard select.tmm-form__input,
#tmm-dashboard select#tmm-course-sort,
#tmm-dashboard select.tmm-card__select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239995AB' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
    padding-right: 36px !important;
    cursor: pointer;
}

#tmm-dashboard .tmm-card {
    background: var(--tmm-bg-card) !important;
    border: 1px solid var(--tmm-border) !important;
    border-radius: var(--tmm-radius) !important;
    box-shadow: var(--tmm-shadow) !important;
}

#tmm-dashboard .tmm-stat {
    background: var(--tmm-bg-card) !important;
    border: 1px solid var(--tmm-border) !important;
    border-radius: var(--tmm-radius) !important;
}


/* ═══════════════════════════════════════════
   1. LAYOUT
   ═══════════════════════════════════════════ */
.tmm-layout {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--tmm-bg-base);
    color: var(--tmm-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* #ID specificity to beat WordPress theme wrappers */
#tmm-dashboard {
    background: var(--tmm-bg-base) !important;
    color: var(--tmm-text) !important;
}

#tmm-dashboard .tmm-main {
    background: var(--tmm-bg-base) !important;
    color: var(--tmm-text);
}

.tmm-main {
    flex: 1;
    margin-left: 260px;
    padding: 24px;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--tmm-bg-base);
}


/* ═══════════════════════════════════════════
   2. LOADER
   ═══════════════════════════════════════════ */
.tmm-loader {
    position: fixed;
    inset: 0;
    background: var(--tmm-bg-base);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.tmm-loader__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--tmm-border);
    border-top-color: var(--tmm-primary);
    border-radius: 50%;
    animation: tmm-spin 0.8s linear infinite;
}


/* ═══════════════════════════════════════════
   3. SIDEBAR
   ═══════════════════════════════════════════ */
.tmm-sidebar {
    width: 260px;
    background: var(--tmm-bg-sidebar);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    height: 100dvh;
    z-index: 100;
    border-right: 1px solid var(--tmm-border);
    transition: var(--tmm-transition-slow);
}

/* Header */
.tmm-sidebar__header {
    padding: 20px 16px;
    border-bottom: 1px solid var(--tmm-border);
}

.tmm-sidebar__logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: var(--tmm-transition);
}
.tmm-sidebar__logo:hover { opacity: 0.8; }

.tmm-sidebar__logo img {
    width: 40px;
    height: 40px;
    border-radius: var(--tmm-radius-sm);
}

.tmm-sidebar__brand {
    font-size: 18px;
    font-weight: 700;
    color: var(--tmm-text);
    letter-spacing: -0.02em;
    line-height: 1;
}

/* User */
.tmm-sidebar__user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--tmm-border);
    cursor: pointer;
    transition: var(--tmm-transition);
}
.tmm-sidebar__user:hover { background: var(--tmm-bg-hover); }

.tmm-sidebar__avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    border: 2px solid var(--tmm-border);
    transition: var(--tmm-transition);
}
.tmm-sidebar__user:hover .tmm-sidebar__avatar img {
    border-color: var(--tmm-primary);
}

.tmm-sidebar__user-name {
    font-weight: 600;
    font-size: 14px;
    display: block;
    color: var(--tmm-text);
}

.tmm-sidebar__user-level {
    font-size: 11px;
    color: var(--tmm-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
.tmm-sidebar__user-level::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--tmm-gradient);
    border-radius: 50%;
}

/* Nav */
.tmm-sidebar__nav {
    /* Ne remplit plus l'espace disponible : "Applications" et "Déconnexion"
       suivaient sinon la nav principale collée tout en bas de la sidebar,
       loin des autres items, sur les écrans hauts. */
    padding: 12px 0;
    overflow-y: auto;
}

.tmm-sidebar__nav-list { list-style: none; }

.tmm-sidebar__nav-item { margin: 2px 8px; }

.tmm-sidebar__nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
    padding: 8px 14px;
    border-radius: var(--tmm-radius-sm);
    color: var(--tmm-text-muted);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: var(--tmm-transition);
    position: relative;
}
.tmm-sidebar__nav-link:hover {
    color: var(--tmm-text);
    background: var(--tmm-bg-hover);
}
.tmm-sidebar__nav-link:hover i {
    color: var(--tmm-primary);
}

.tmm-sidebar__nav-link i {
    width: 20px;
    text-align: center;
    font-size: 16px;
    margin: 0;
    transition: var(--tmm-transition-fast);
}

/* Active nav — fond en dégradé doux (au lieu d'un simple gris plat) + icône
   teintée de l'accent, pour un repère plus net que le seul liseré latéral. */
.tmm-sidebar__nav-item.is-active .tmm-sidebar__nav-link {
    color: var(--tmm-text);
    background: var(--tmm-gradient-soft);
}
.tmm-sidebar__nav-item.is-active .tmm-sidebar__nav-link i {
    color: var(--tmm-primary);
}
.tmm-sidebar__nav-item.is-active .tmm-sidebar__nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--tmm-gradient);
    border-radius: 0 2px 2px 0;
}

/* Footer */
/* Navigation secondaire (ex: Applications) — même mécanique de lien que la nav
   principale, mais délibérément plus discrète : ce n'est pas une section
   de premier plan (audit UX). */
.tmm-sidebar__nav-secondary {
    padding: 8px 0;
    border-top: 1px solid var(--tmm-border);
}
.tmm-sidebar__nav-secondary .tmm-sidebar__nav-link {
    font-size: 13px;
    color: var(--tmm-text-muted);
}
.tmm-sidebar__nav-secondary .tmm-sidebar__nav-link i {
    font-size: 13px;
}

.tmm-sidebar__footer {
    padding: 12px;
    border-top: 1px solid var(--tmm-border);
}

.tmm-sidebar__logout {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--tmm-radius-sm);
    /* Rouge par défaut, pas seulement au survol : une déconnexion est une
       action qu'on doit reconnaître avant même d'interagir avec elle. */
    color: var(--tmm-danger);
    background: rgba(248, 113, 113, 0.1);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: var(--tmm-transition);
}
.tmm-sidebar__logout:hover {
    color: #fff;
    background: var(--tmm-danger);
}

/* Le thème du site écrase souvent la couleur des liens <a> génériques :
   on verrouille le rouge pour être sûr qu'il tienne dans tous les cas. */
#tmm-dashboard .tmm-sidebar__logout {
    color: var(--tmm-danger) !important;
    background: rgba(248, 113, 113, 0.1) !important;
}
#tmm-dashboard .tmm-sidebar__logout:hover {
    color: #fff !important;
    background: var(--tmm-danger) !important;
}


/* ═══════════════════════════════════════════
   4. SECTIONS — squelette commun à TOUTES
   ═══════════════════════════════════════════ */
.tmm-section {
    display: none;
}
.tmm-section.is-active {
    display: block !important;
    animation: tmm-fadeSlideIn 0.4s ease;
}

/* Section Header — identique partout */
.tmm-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    background: none !important;
}

/* Beat any theme that targets header elements */
#tmm-dashboard .tmm-section__header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 24px !important;
}

.tmm-section__header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tmm-section__header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tmm-section__title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.tmm-section__mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--tmm-text);
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--tmm-radius-sm);
    transition: var(--tmm-transition);
}
.tmm-section__mobile-toggle:hover { background: var(--tmm-bg-hover); }

/* Section Body — contient tout le contenu */
.tmm-section__body {
    /* pas de style spécifique, c'est un wrapper logique */
}

/* Force body visibility (themes may hide or style divs inside sections) */
#tmm-dashboard .tmm-section__body {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--tmm-text);
    background: transparent !important;
}

/* Section Toolbar — filtres, tabs, recherche */
.tmm-section__toolbar {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}


/* ═══════════════════════════════════════════
   5. TOOLBAR — filtres, tabs, recherche
   ═══════════════════════════════════════════ */
/* Filters (courses) */
.tmm-toolbar__filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tmm-toolbar__filter-btn {
    background: var(--tmm-bg-card);
    border: 1px solid var(--tmm-border);
    border-radius: var(--tmm-radius-full);
    padding: 8px 16px;
    color: var(--tmm-text-muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: var(--tmm-transition);
}
.tmm-toolbar__filter-btn:hover {
    border-color: var(--tmm-border-hover);
    color: var(--tmm-text);
}
.tmm-toolbar__filter-btn.is-active {
    background: var(--tmm-gradient);
    border-color: transparent;
    color: #fff;
}

/* Tabs (settings) — même style que filtres */
.tmm-toolbar__tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tmm-toolbar__tab-btn {
    background: var(--tmm-bg-card);
    border: 1px solid var(--tmm-border);
    border-radius: var(--tmm-radius-full);
    padding: 10px 18px;
    color: var(--tmm-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    transition: var(--tmm-transition);
}
.tmm-toolbar__tab-btn:hover {
    border-color: var(--tmm-border-hover);
    color: var(--tmm-text);
}
.tmm-toolbar__tab-btn.is-active {
    background: var(--tmm-gradient);
    border-color: transparent;
    color: #fff;
}

/* Boost specificity to beat WordPress theme button overrides */
#tmm-dashboard .tmm-toolbar__tab-btn.is-active,
#tmm-dashboard .tmm-toolbar__filter-btn.is-active {
    background: var(--tmm-gradient) !important;
    background-image: var(--tmm-gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* État inactif — sans ce durcissement, le style bouton générique du thème
   (vert par défaut sur ce site) écrase le neutre attendu du plugin et fait
   passer des filtres/onglets inactifs pour "actifs/validés". */
#tmm-dashboard .tmm-toolbar__tab-btn:not(.is-active),
#tmm-dashboard .tmm-toolbar__filter-btn:not(.is-active) {
    background: var(--tmm-bg-card) !important;
    background-image: none !important;
    /* Pas de bordure, ni au repos ni au survol (cf. règle suivante) : la
       distinction se fait par la couleur de fond et l'ombre uniquement,
       jamais par un liseré clair. */
    border-color: transparent !important;
    color: var(--tmm-text-muted) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

#tmm-dashboard .tmm-toolbar__tab-btn:not(.is-active):hover,
#tmm-dashboard .tmm-toolbar__filter-btn:not(.is-active):hover {
    border-color: transparent !important;
    background: var(--tmm-bg-hover) !important;
    color: var(--tmm-text) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18) !important;
}

#tmm-dashboard .tmm-btn--primary {
    background: var(--tmm-gradient) !important;
    color: #fff !important;
    border: none !important;
    padding-top:0.2rem;
    padding-bottom:0.2rem;
}
#tmm-dashboard .tmm-btn--primary:hover {
    background: var(--tmm-gradient-hover) !important;
}

#tmm-dashboard .tmm-btn--ghost {
    background: transparent !important;
    color: var(--tmm-text) !important;
    border: 1px solid var(--tmm-border) !important;
}

#tmm-dashboard .tmm-btn--danger {
    background: rgba(248, 113, 113, 0.1) !important;
    color: var(--tmm-danger) !important;
    border: 1px solid rgba(248, 113, 113, 0.2) !important;
}

/* Search */
.tmm-toolbar__search {
    position: relative;
    flex: 0 1 360px;
}

.tmm-toolbar__search-input {
    width: 100%;
    background: var(--tmm-bg-card);
    border: 1px solid var(--tmm-border);
    border-radius: var(--tmm-radius-full);
    padding: 10px 40px 10px 16px;
    color: var(--tmm-text);
    font-size: 14px;
    transition: var(--tmm-transition);
}
.tmm-toolbar__search-input::placeholder { color: var(--tmm-text-muted); }
.tmm-toolbar__search-input:focus {
    outline: none;
    border-color: var(--tmm-primary);
    background: var(--tmm-bg-elevated);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.tmm-toolbar__search-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tmm-text-muted);
    font-size: 14px;
    pointer-events: none;
}

/* Tab Panels */
.tmm-tab-panel {
    display: none;
}
.tmm-tab-panel.is-active {
    display: block;
    animation: tmm-fadeSlideIn 0.3s ease;
}


/* ═══════════════════════════════════════════
   6. CARDS — composant réutilisable
   ═══════════════════════════════════════════ */
.tmm-card {
    background: var(--tmm-bg-card);
    border-radius: var(--tmm-radius);
    margin-bottom: 24px;
    border: 1px solid var(--tmm-border);
    transition: var(--tmm-transition);
}
.tmm-card:hover { border-color: var(--tmm-border-hover); }

.tmm-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--tmm-border);
}

.tmm-card__title {
    font-size: 15px;
    font-weight: 600;
}

.tmm-card__select {
    background: var(--tmm-bg-base);
    border: 1px solid var(--tmm-border);
    border-radius: var(--tmm-radius-full);
    padding: 6px 12px;
    color: var(--tmm-text);
    font-size: 12px;
    cursor: pointer;
    transition: var(--tmm-transition);
}
.tmm-card__select:hover { border-color: var(--tmm-border-hover); }
.tmm-card__select:focus {
    outline: none;
    border-color: var(--tmm-primary);
}

.tmm-card__body {
    padding: 20px;
}

.tmm-chart-wrap {
    position: relative;
    min-height: 320px;
}

.tmm-chart-wrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.tmm-card__footer {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--tmm-border);
}


/* ═══════════════════════════════════════════
   7. STATS — grille de stat-cards
   ═══════════════════════════════════════════ */
.tmm-stat {
    background: var(--tmm-bg-card);
    border-radius: var(--tmm-radius);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--tmm-border);
    transition: var(--tmm-transition);
    cursor: default;
}
.tmm-stat:hover {
    border-color: var(--tmm-border-hover);
    transform: translateY(-2px);
    box-shadow: var(--tmm-shadow);
}

.tmm-stat__icon {
    width: 44px;
    height: 44px;
    background: var(--tmm-gradient-soft);
    border-radius: var(--tmm-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tmm-primary);
    font-size: 18px;
    flex-shrink: 0;
    transition: var(--tmm-transition);
}
.tmm-stat:hover .tmm-stat__icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(99, 102, 241, 0.15) 100%);
    transform: scale(1.05);
}

.tmm-stat__value {
    font-size: 24px;
    font-weight: 700;
    display: block;
    color: var(--tmm-text);
    letter-spacing: -0.02em;
}

.tmm-stat__label {
    font-size: 12px;
    color: var(--tmm-text-muted);
    display: block;
}

/* Variante flat (comparaisons analytics) */
.tmm-stat--flat {
    flex-direction: column;
    text-align: center;
    gap: 6px;
    padding: 18px;
}
.tmm-stat--flat:hover { transform: none; box-shadow: none; }

.tmm-stat__value--positive { color: var(--tmm-success); }
.tmm-stat__value--negative { color: var(--tmm-danger); }


/* ═══════════════════════════════════════════
   8. PROGRESS BAR
   ═══════════════════════════════════════════ */
.tmm-progress {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--tmm-radius-full);
    height: 6px;
    overflow: hidden;
    flex: 1;
    margin-top: 15px;
}

.tmm-progress__fill {
    background: var(--tmm-gradient);
    height: 100%;
    border-radius: var(--tmm-radius-full);
    transition: width 0.5s var(--tmm-ease);
    position: relative;
}
.tmm-progress__fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: tmm-shimmer 2s infinite;
}

.tmm-progress--lg { height: 8px; }
.tmm-progress--sm { height: 4px; }


/* ═══════════════════════════════════════════
   9. BUTTONS
   ═══════════════════════════════════════════ */
.tmm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 16px;
    width: fit-content;
    flex: 0 0 auto;
    border-radius: var(--tmm-radius-full);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    max-width: 100%;
    transition: background 0.25s ease, border 0.25s ease, transform 0.15s ease;
}

/* Ripple */
.tmm-btn::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    background: rgba(139, 92, 246, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.45s ease, height 0.45s ease;
}
.tmm-btn:active::after { width: 180px; height: 180px; }

.tmm-btn:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
}
.tmm-btn:active { transform: scale(0.96); }
.tmm-btn i { font-size: 12px; opacity: 0.8; }

/* Primary */
.tmm-btn--primary {
    background: var(--tmm-gradient);
    color: #ffffff;
    border: none;
    box-shadow: var(--tmm-shadow-violet);
}
.tmm-btn--primary:hover {
    background: var(--tmm-gradient-hover);
    box-shadow: 0 6px 25px rgba(139, 92, 246, 0.35);
    transform: translateY(-1px);
}
.tmm-btn--primary:active { transform: scale(0.96) translateY(0); }

/* Ghost */
.tmm-btn--ghost {
    background: transparent;
    border: 1px solid var(--tmm-border);
    color: var(--tmm-text);
}
.tmm-btn--ghost:hover {
    background: var(--tmm-bg-hover);
    border-color: var(--tmm-border-hover);
}

/* Danger */
.tmm-btn--danger {
    background: rgba(248, 113, 113, 0.1);
    color: var(--tmm-danger);
    border: 1px solid transparent;
}
.tmm-btn--danger:hover {
    background: var(--tmm-danger);
    color: #fff;
}

/* Sizes */
.tmm-btn--sm { padding: 6px 14px; font-size: 12px; }
.tmm-btn--lg { padding: 14px 28px; font-size: 15px; color: #fff; }


/* ═══════════════════════════════════════════
   10. BADGES & TAGS
   ═══════════════════════════════════════════ */
.tmm-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--tmm-radius-full);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

/* Badges de statut — fond plein et texte blanc, pas de teinte translucide
   à 12-15% : un statut est une donnée, il doit se voir de loin, comme sur
   les badges "Confirmée / INTRA / À distance" pris comme référence. */
.tmm-badge--success,
.tmm-badge--active,
.tmm-badge--lifetime {
    background: #16A34A;
    color: #fff;
}

.tmm-badge--progress,
.tmm-badge--expiring_soon {
    background: #D97706;
    color: #fff;
}

.tmm-badge--neutral {
    /* Seul statut volontairement neutre : "pas encore commencé" ne porte
       pas d'information urgente, contrairement aux autres. */
    background: rgba(148, 163, 184, 0.16);
    color: var(--tmm-text-muted);
}

.tmm-badge--new {
    background: var(--tmm-gradient);
    color: #fff;
    animation: tmm-pulse 2s ease-in-out infinite;
}

.tmm-badge--popular {
    background: #2563EB;
    color: #fff;
}

.tmm-badge--expired {
    background: #DC2626;
    color: #fff;
}

.tmm-tag {
    display: inline-block;
    background: var(--tmm-gradient-soft);
    color: var(--tmm-primary);
    padding: 4px 10px;
    border-radius: var(--tmm-radius-full);
    font-size: 10px;
    font-weight: 500;
}


/* ═══════════════════════════════════════════
   11. GRIDS
   ═══════════════════════════════════════════ */
.tmm-grid--stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.tmm-grid--4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.tmm-grid--cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.tmm-grid--meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 16px;
}


/* ═══════════════════════════════════════════
   12. WELCOME BANNER
   ═══════════════════════════════════════════ */
.tmm-welcome {
    background: linear-gradient(135deg, var(--tmm-bg-card) 0%, var(--tmm-bg-elevated) 100%);
    border-radius: var(--tmm-radius-lg);
    padding: 28px;
    margin-bottom: 24px;
    border: 1px solid var(--tmm-border);
    position: relative;
    overflow: hidden;
}
.tmm-welcome::before {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 400px; height: 400px;
    background: radial-gradient(circle, var(--tmm-accent-glow), transparent 70%);
    pointer-events: none;
    opacity: 0.5;
}
.tmm-welcome::after {
    content: '';
    position: absolute;
    bottom: -30%; left: -10%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.2), transparent 70%);
    pointer-events: none;
    opacity: 0.4;
}

.tmm-welcome__content { position: relative; z-index: 1; }

.tmm-welcome__title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.tmm-welcome__text {
    color: var(--tmm-text-muted);
    margin-bottom: 20px;
    font-size: 14px;
}

.tmm-welcome__action { margin-top: 16px; }

.tmm-welcome__progress {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.tmm-welcome__progress .tmm-progress { min-width: 0; }

.tmm-welcome__progress-text {
    font-size: 12px;
    color: var(--tmm-text-muted);
}


/* ═══════════════════════════════════════════
   13. COURSES
   ═══════════════════════════════════════════ */
/* Course list layout */
.tmm-course-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Individual course card */
.tmm-course {
    background: var(--tmm-bg-card);
    border-radius: var(--tmm-radius);
    border: 1px solid var(--tmm-border);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 14px 18px;
    gap: 16px;
    transition: var(--tmm-transition);
    position: relative;
}
.tmm-course:hover {
    border-color: var(--tmm-border-hover);
    background: var(--tmm-bg-elevated);
}

.tmm-course__thumb {
    width: 64px;
    height: 64px;
    min-width: 64px;
    background: var(--tmm-bg-base);
    border-radius: var(--tmm-radius-sm);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.tmm-course__thumb img {
    width: 100%; height: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
    border-radius: var(--tmm-radius-sm);
}

.tmm-course__play-icon {
    width: 32px; height: 32px;
    background: var(--tmm-gradient-soft);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tmm-primary-light);
    font-size: 12px;
    position: relative;
    z-index: 1;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.tmm-course__pct {
    position: absolute;
    bottom: 4px; right: 4px;
    background: rgba(0, 0, 0, 0.8);
    padding: 2px 6px;
    border-radius: var(--tmm-radius-sm);
    font-size: 9px;
    font-weight: 600;
    color: var(--tmm-primary);
}

.tmm-course__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tmm-course__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tmm-course__meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--tmm-text-muted);
}
.tmm-course__meta i {
    color: var(--tmm-text-muted);
    margin-right: 4px;
    font-size: 11px;
}

.tmm-course__tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tmm-course__progress {
    max-width: 180px;
}

.tmm-course__action {
    display: flex;
    align-items: center;
    margin-left: auto;
}

/* Course Mini (dashboard recommendations) */
.tmm-course-mini {
    background: var(--tmm-bg-elevated);
    border-radius: var(--tmm-radius);
    overflow: hidden;
    border: 1px solid var(--tmm-border);
    transition: var(--tmm-transition);
}
.tmm-course-mini:hover {
    border-color: var(--tmm-border-hover);
    transform: translateY(-2px);
}

.tmm-course-mini__thumb {
    height: 90px;
    background: var(--tmm-bg-base);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tmm-course-mini__thumb img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
}

.tmm-course-mini__play {
    width: 36px; height: 36px;
    background: var(--tmm-gradient-soft);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tmm-primary);
    position: relative;
    z-index: 1;
    transition: var(--tmm-transition);
}
.tmm-course-mini:hover .tmm-course-mini__play {
    background: var(--tmm-gradient);
    color: #fff;
    transform: scale(1.1);
}

.tmm-course-mini__body { padding: 14px; }

.tmm-course-mini__title {
    font-size: 13px;
    margin-bottom: 8px;
    line-height: 1.3;
    font-weight: 600;
}

.tmm-course-mini__meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--tmm-text-muted);
    margin-bottom: 10px;
}


/* ═══════════════════════════════════════════
   14. CERTIFICATES (inside cards)
   ═══════════════════════════════════════════ */
.tmm-card--cert .tmm-card__body {
    padding: 20px;
}

.tmm-cert__icon {
    width: 52px; height: 52px;
    background: var(--tmm-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    margin-bottom: 14px;
}

.tmm-cert__title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.tmm-cert__detail {
    font-size: 12px;
    color: var(--tmm-text-muted);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tmm-cert__skills {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}


/* ═══════════════════════════════════════════
   15. ACTIVITY LIST
   ═══════════════════════════════════════════ */
.tmm-activity { list-style: none; }

.tmm-activity__item {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--tmm-border);
    transition: var(--tmm-transition);
}
.tmm-activity__item:last-child { border-bottom: none; }
.tmm-activity__item:hover {
    background: var(--tmm-bg-hover);
    margin: 0 -20px;
    padding: 14px 20px;
    border-radius: var(--tmm-radius-sm);
}

.tmm-activity__icon {
    width: 36px; height: 36px;
    background: var(--tmm-gradient-soft);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tmm-primary);
    font-size: 14px;
    flex-shrink: 0;
}

.tmm-activity__body { flex: 1; }
.tmm-activity__text { margin-bottom: 4px; font-size: 14px; }
.tmm-activity__time { font-size: 11px; color: var(--tmm-text-muted); }


/* ═══════════════════════════════════════════
   16. LISTS (suggestions, etc.)
   ═══════════════════════════════════════════ */
.tmm-list { list-style: none; }

.tmm-list__item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--tmm-border);
    font-size: 14px;
    align-items: flex-start;
}
.tmm-list__item:last-child { border-bottom: none; }

.tmm-list__icon {
    color: var(--tmm-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.tmm-list__text { flex: 1; }


/* ═══════════════════════════════════════════
   17. FORMS
   ═══════════════════════════════════════════ */
.tmm-form { max-width: 560px; }

.tmm-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.tmm-form__group { margin-bottom: 16px; }

.tmm-form__group--switch {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tmm-form__label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 13px;
    color: var(--tmm-text-secondary);
}

.tmm-form__switch-label {
    font-size: 14px;
    color: var(--tmm-text-secondary);
}

.tmm-form__input {
    width: 100%;
    background: var(--tmm-bg-base);
    border: 1px solid var(--tmm-border);
    border-radius: var(--tmm-radius-sm);
    padding: 10px 14px;
    color: var(--tmm-text);
    font-size: 14px;
    transition: var(--tmm-transition);
}
.tmm-form__input:focus {
    outline: none;
    border-color: var(--tmm-primary);
    background: var(--tmm-bg-elevated);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.tmm-form__section-title {
    margin: 20px 0 14px;
    font-size: 15px;
    font-weight: 600;
}

.tmm-form__actions {
    margin-top: 20px;
}

.tmm-card--stacked { margin-top: 20px; }

.tmm-card__actions-top { margin-top: 12px; }


/* ═══════════════════════════════════════════
   18. SWITCH
   ═══════════════════════════════════════════ */
.tmm-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.tmm-switch input { opacity: 0; width: 0; height: 0; }

.tmm-switch__slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--tmm-bg-base);
    border: 1px solid var(--tmm-border);
    border-radius: var(--tmm-radius-full);
    transition: var(--tmm-transition);
}
.tmm-switch__slider::before {
    content: '';
    position: absolute;
    height: 18px; width: 18px;
    left: 2px; bottom: 2px;
    background: var(--tmm-text-muted);
    border-radius: 50%;
    transition: var(--tmm-transition);
}

.tmm-switch input:checked + .tmm-switch__slider {
    background: var(--tmm-gradient);
    border-color: transparent;
}
.tmm-switch input:checked + .tmm-switch__slider::before {
    transform: translateX(20px);
    background: #fff;
}


/* ═══════════════════════════════════════════
   19. MEMBERSHIP / META
   ═══════════════════════════════════════════ */
.tmm-meta {
    padding: 12px;
    background: var(--tmm-bg-base);
    border-radius: var(--tmm-radius-sm);
}

.tmm-meta__label {
    display: block;
    font-size: 11px;
    color: var(--tmm-text-muted);
    margin-bottom: 4px;
}

.tmm-meta__value { font-size: 14px; font-weight: 600; }

.tmm-text--muted {
    color: var(--tmm-text-muted);
    font-size: 14px;
}


/* ═══════════════════════════════════════════
   20. EMPTY STATE
   ═══════════════════════════════════════════ */
.tmm-empty {
    text-align: center;
    padding: 48px 20px;
}
.tmm-empty i {
    font-size: 40px;
    color: #fff;
    margin-bottom: 16px;
    opacity: 0.5;
    display: block;
}
.tmm-empty h3 {
    font-size: 18px;
    margin-bottom: 8px;
}
.tmm-empty p {
    color: var(--tmm-text-muted);
    margin-bottom: 20px;
    font-size: 14px;
}
.tmm-empty--sm { padding: 32px 16px; }


/* ═══════════════════════════════════════════
   21. MESSAGES & TOASTS
   ═══════════════════════════════════════════ */
.tmm-message {
    display: none;
    padding: 12px 16px;
    border-radius: var(--tmm-radius-sm);
    margin-bottom: 16px;
    font-size: 14px;
}
.tmm-message--success {
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: var(--tmm-success);
}
.tmm-message--error {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: var(--tmm-danger);
}

.tmm-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 12px 24px;
    background: var(--tmm-bg-card);
    border: 1px solid var(--tmm-border);
    border-radius: var(--tmm-radius);
    font-size: 14px;
    color: var(--tmm-text);
    z-index: 10000;
    opacity: 0;
    transition: var(--tmm-transition-slow);
    box-shadow: var(--tmm-shadow);
}
.tmm-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.tmm-toast--success { border-color: var(--tmm-success); }
.tmm-toast--error { border-color: var(--tmm-danger); }


/* ═══════════════════════════════════════════
   22. SCROLLBAR & SELECTION
   ═══════════════════════════════════════════ */
.tmm-layout ::-webkit-scrollbar { width: 6px; height: 6px; }
.tmm-layout ::-webkit-scrollbar-track { background: transparent; }
.tmm-layout ::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.2); border-radius: 3px; }
.tmm-layout ::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.4); }

.tmm-layout ::selection {
    background: rgba(139, 92, 246, 0.3);
    color: var(--tmm-text);
}


/* ═══════════════════════════════════════════
   23. ANIMATIONS
   ═══════════════════════════════════════════ */
@keyframes tmm-spin {
    to { transform: rotate(360deg); }
}

@keyframes tmm-fadeSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes tmm-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes tmm-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
    .tmm-layout *,
    .tmm-layout *::before,
    .tmm-layout *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}


/* ═══════════════════════════════════════════
   24. ACCESSIBILITY
   ═══════════════════════════════════════════ */
.tmm-btn:focus-visible,
.tmm-sidebar__nav-link:focus-visible,
.tmm-toolbar__tab-btn:focus-visible,
.tmm-toolbar__filter-btn:focus-visible {
    outline: 2px solid var(--tmm-primary);
    outline-offset: 2px;
}

/* Body overlay when nav is open */
body.tmm-nav-open { overflow: hidden; }
body.tmm-nav-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99;
    backdrop-filter: blur(4px);
}


/* ═══════════════════════════════════════════
   25. RESPONSIVE
   ═══════════════════════════════════════════ */

/* Tablette large */
@media (max-width: 1200px) {
    .tmm-grid--stats,
    .tmm-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablette / Mobile */
@media (max-width: 768px) {
    /* Sidebar mobile */
    .tmm-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    .tmm-sidebar.is-mobile-open { transform: translateX(0); }

    .tmm-main {
        margin-left: 0;
        padding: 16px;
    }

    .tmm-section__mobile-toggle { display: flex; }
    .tmm-section__header { gap: 12px; }
    .tmm-section__header-actions { width: 100%; }
    .tmm-section__header-actions .tmm-btn { width: 100%; }

    /* Grids → 1 colonne */
    .tmm-grid--stats,
    .tmm-grid--4,
    .tmm-grid--cards,
    .tmm-grid--meta {
        grid-template-columns: 1fr;
    }

    /* Forms */
    .tmm-form__row { grid-template-columns: 1fr; }

    /* Courses → colonne */
    .tmm-course {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px;
    }
    .tmm-course__thumb {
        width: 100%;
        height: 100px;
    }
    .tmm-course__body { width: 100%; }
    .tmm-course__title { white-space: normal; }
    .tmm-course__progress { max-width: 100%; }
    .tmm-course__action {
        width: 100%;
        margin-left: 0;
        margin-top: 12px;
    }
    .tmm-course__action .tmm-btn {
        flex: 1;
        justify-content: center;
    }

    /* Toolbar */
    .tmm-section__toolbar { flex-direction: column; align-items: stretch; }
    .tmm-toolbar__search { flex: 1 1 100%; }
    .tmm-toolbar__tabs { flex-direction: column; }

    /* Cards footer */
    .tmm-card__footer { flex-direction: column; }
    .tmm-card__footer .tmm-btn { width: 100%; }
    .tmm-chart-wrap { min-height: 240px; }

    /* Parcours */
    .tmm-parcours-header-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .tmm-parcours-quick-actions { width: 100%; }
    .tmm-quick-action-btn { flex: 1; justify-content: center; }

    .tmm-month-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .tmm-month-focus { margin-left: 0; }

    .tmm-welcome::before {
        width: 260px;
        height: 260px;
        top: -30%;
        right: -25%;
    }

    .tmm-welcome::after {
        width: 180px;
        height: 180px;
        bottom: -20%;
        left: -20%;
    }
}

/* Petit mobile */
@media (max-width: 480px) {
    .tmm-welcome { padding: 20px; }
    .tmm-welcome__title { font-size: 18px; }
    .tmm-welcome__progress {
        flex-direction: column;
        align-items: stretch;
    }
}


/* ═══════════════════════════════════════════
   26. PARCOURS
   Classes générées par TMMDashboardParcours::renderParcours()
   et les shortcodes standalone
   ═══════════════════════════════════════════ */

/* Parcours header row */
.tmm-parcours-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}
.tmm-parcours-header-row h2 { margin-bottom: 0; }

/* Quick Actions */
.tmm-parcours-quick-actions {
    display: flex;
    gap: 10px;
}

.tmm-quick-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--tmm-bg-card);
    border: 1px solid var(--tmm-border);
    border-radius: var(--tmm-radius-full);
    color: var(--tmm-text);
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    transition: var(--tmm-transition);
}
.tmm-quick-action-btn i {
    font-size: 14px;
    color: var(--tmm-primary);
}
.tmm-quick-action-btn:hover {
    background: var(--tmm-bg-hover);
    border-color: var(--tmm-primary);
    transform: translateY(-1px);
}

/* Parcours Container */
.tmm-parcours {
    background: var(--tmm-bg-card);
    border-radius: var(--tmm-radius);
    padding: 24px;
    border: 1px solid var(--tmm-border);
}

.tmm-parcours-header { margin-bottom: 28px; }
.tmm-parcours-header h2 { font-size: 20px; margin-bottom: 8px; }
.tmm-parcours-desc { color: var(--tmm-text-muted); margin-bottom: 16px; font-size: 14px; }

.tmm-parcours-progress-overview { max-width: 400px; }
.tmm-parcours-progress-overview .tmm-progress-text {
    margin-top: 8px;
    font-size: 12px;
    color: var(--tmm-text-muted);
}

/* Month Blocks */
.tmm-month-block {
    background: var(--tmm-bg-elevated);
    border-radius: var(--tmm-radius);
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--tmm-border);
    transition: var(--tmm-transition);
}
.tmm-month-block:hover { border-color: var(--tmm-border-hover); }

.tmm-month-header {
    background: var(--tmm-bg-base);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    transition: var(--tmm-transition);
}
.tmm-month-header:hover { background: var(--tmm-bg-hover); }
.tmm-month-header h3 {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}
.tmm-month-header h3 i { color: var(--tmm-primary); font-size: 14px; }

/* Accordéon des mois — un parcours de 12 mois affiché intégralement à plat
   est illisible ; seul le mois en cours reste ouvert par défaut. */
.tmm-month-header__left,
.tmm-month-header__right {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.tmm-month-header__right { flex-shrink: 0; }

.tmm-month-current-badge { flex-shrink: 0; }

.tmm-month-toggle-icon {
    color: var(--tmm-text-muted);
    font-size: 13px;
    transition: transform 0.2s ease;
}
.tmm-month-block.is-collapsed .tmm-month-toggle-icon {
    transform: rotate(-90deg);
}

.tmm-month-block.is-collapsed .tmm-month-content {
    display: none;
}

.tmm-month-content { padding: 18px; }
.tmm-month-courses { margin-bottom: 16px; }

.tmm-course-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--tmm-border);
}
.tmm-course-item:last-child { border-bottom: none; }
.tmm-course-item .tmm-course-status { color: var(--tmm-text-muted); font-size: 14px; }
.tmm-course-item.completed .tmm-course-status { color: var(--tmm-success); }

.tmm-course-title {
    color: var(--tmm-text);
    text-decoration: none;
    font-size: 14px;
    transition: var(--tmm-transition);
}
.tmm-course-title:hover { color: var(--tmm-primary); }

.tmm-course-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Parcours buttons compact */
.tmm-parcours .tmm-btn--primary,
.tmm-month-block .tmm-btn--primary,
.tmm-course-item .tmm-btn--primary {
    padding: 6px 14px;
    font-size: 12px;
}

/* Weeks */
.tmm-month-weeks {
    background: var(--tmm-bg-base);
    padding: 14px;
    border-radius: var(--tmm-radius-sm);
}
.tmm-weeks-label { font-size: 12px; color: var(--tmm-text-muted); margin-bottom: 10px; }
.tmm-weeks-checkboxes { display: flex; gap: 14px; flex-wrap: wrap; }
.tmm-week-checkbox {
    display: flex; align-items: center; gap: 6px;
    cursor: pointer; font-size: 13px;
}
.tmm-week-checkbox input {
    width: 16px; height: 16px;
    accent-color: var(--tmm-primary);
    cursor: pointer;
}

/* Parcours Complete */
.tmm-parcours-complete {
    text-align: center;
    padding: 32px;
    background: var(--tmm-gradient-soft);
    border-radius: var(--tmm-radius);
    margin-top: 24px;
    border: 1px solid rgba(139, 92, 246, 0.2);
}
.tmm-parcours-complete i {
    font-size: 40px;
    color: var(--tmm-primary);
    margin-bottom: 12px;
}

/* No Parcours */
.tmm-no-parcours .tmm-empty {
    background: var(--tmm-bg-elevated);
    border-radius: var(--tmm-radius);
    border: 1px solid var(--tmm-border);
}

/* Month Focus */
.tmm-month-focus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--tmm-text-muted);
    background: var(--tmm-bg-hover);
    padding: 4px 10px;
    border-radius: var(--tmm-radius-full);
    margin-left: auto;
}
.tmm-month-focus i { color: var(--tmm-warning); font-size: 11px; }

/* Parcours Notes */
.tmm-parcours-note,
.tmm-month-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--tmm-bg-elevated);
    border-radius: var(--tmm-radius-sm);
    margin-bottom: 12px;
    border-left: 3px solid var(--tmm-primary);
    font-size: 14px;
    line-height: 1.5;
    color: var(--tmm-text);
}
.tmm-parcours-note i,
.tmm-month-note i {
    color: var(--tmm-primary);
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.tmm-parcours-note.tmm-note-info { border-left-color: var(--tmm-info); }
.tmm-parcours-note.tmm-note-info i { color: var(--tmm-info); }

.tmm-parcours-note.tmm-note-context,
.tmm-month-note.tmm-note-choice {
    border-left-color: var(--tmm-warning);
    background: rgba(251, 191, 36, 0.08);
}
.tmm-parcours-note.tmm-note-context i,
.tmm-month-note.tmm-note-choice i { color: var(--tmm-warning); }

.tmm-month-note.tmm-note-cloud {
    border-left-color: var(--tmm-info);
    background: rgba(96, 165, 250, 0.05);
}
.tmm-month-note.tmm-note-cloud i { color: var(--tmm-info); }

.tmm-month-note.tmm-note-wazuh {
    border-left-color: var(--tmm-success);
    background: rgba(74, 222, 128, 0.05);
}
.tmm-month-note.tmm-note-wazuh i { color: var(--tmm-success); }

/* Section titles inside months */
.tmm-month-courses > h4,
.tmm-alternative-courses > h4,
.tmm-external-resources > h4,
.tmm-project-actions > h4,
.tmm-skills-acquired > h4,
.tmm-network-architecture > h4,
.tmm-cluster-architecture > h4,
.tmm-monitoring-architecture > h4,
.tmm-observability-stack > h4,
.tmm-month-deliverables > h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tmm-text);
}

.tmm-month-courses > h4 i,
.tmm-alternative-courses > h4 i,
.tmm-external-resources > h4 i,
.tmm-project-actions > h4 i,
.tmm-skills-acquired > h4 i,
.tmm-network-architecture > h4 i,
.tmm-cluster-architecture > h4 i,
.tmm-monitoring-architecture > h4 i,
.tmm-observability-stack > h4 i,
.tmm-month-deliverables > h4 i {
    color: var(--tmm-primary);
    font-size: 14px;
}

/* Skills tags */
.tmm-skills-tags,
.tmm-skills-acquired { display: flex; flex-wrap: wrap; gap: 8px; }

.tmm-skills-acquired .tmm-skill-tag {
    display: inline-block;
    background: var(--tmm-gradient-soft);
    color: var(--tmm-primary);
    padding: 4px 10px;
    border-radius: var(--tmm-radius-full);
    font-size: 10px;
}

/* Resources, Hardware, Deliverables, Alternatives, etc. */
.tmm-external-resources,
.tmm-hardware-requirements,
.tmm-deliverables-timeline {
    background: var(--tmm-bg-elevated);
    border-radius: var(--tmm-radius);
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid var(--tmm-border);
}

.tmm-external-resources > h3,
.tmm-hardware-requirements > h3,
.tmm-deliverables-timeline > h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--tmm-text);
}
.tmm-external-resources > h3 i,
.tmm-hardware-requirements > h3 i,
.tmm-deliverables-timeline > h3 i {
    color: var(--tmm-primary);
}

.tmm-resources-grid,
.tmm-hardware-grid,
.tmm-deliverables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.tmm-resource-card,
.tmm-hardware-card,
.tmm-deliverable-card {
    background: var(--tmm-bg-card);
    border-radius: var(--tmm-radius-sm);
    padding: 16px;
    border: 1px solid var(--tmm-border);
    transition: var(--tmm-transition);
}
.tmm-resource-card:hover,
.tmm-hardware-card:hover,
.tmm-deliverable-card:hover {
    border-color: var(--tmm-border-hover);
}

.tmm-resource-card h4,
.tmm-hardware-card h4,
.tmm-deliverable-card h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--tmm-text);
}

.tmm-resource-card p,
.tmm-hardware-card p,
.tmm-deliverable-card p {
    font-size: 13px;
    color: var(--tmm-text-muted);
    line-height: 1.5;
}

.tmm-specs-list {
    list-style: none;
}
.tmm-specs-list li {
    font-size: 14px;
    padding: 6px 0;
    border-bottom: 1px solid var(--tmm-border);
    color: var(--tmm-text-muted);
}
.tmm-specs-list li:last-child { border-bottom: none; }
.tmm-specs-list li strong { color: var(--tmm-text); }

.tmm-spec-note {
    font-size: 12px;
    color: var(--tmm-text-muted);
    margin-top: 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.tmm-spec-note i { color: var(--tmm-warning); margin-top: 2px; }

/* Alternative Courses */
.tmm-alternative-courses {
    margin-bottom: 16px;
    padding: 14px;
    background: var(--tmm-bg-base);
    border-radius: var(--tmm-radius-sm);
    border: 1px dashed var(--tmm-border);
}

.tmm-alt-courses-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tmm-alt-course-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--tmm-bg-card);
    border: 1px solid var(--tmm-border);
    border-radius: var(--tmm-radius-full);
    color: var(--tmm-text);
    text-decoration: none;
    font-size: 12px;
    transition: var(--tmm-transition);
}
.tmm-alt-course-link:hover {
    border-color: var(--tmm-primary);
    color: var(--tmm-primary);
}

/* Deadlines & Badges */
.tmm-deadline-badge {
    background: var(--tmm-gradient);
    color: #fff;
    padding: 4px 10px;
    border-radius: var(--tmm-radius-full);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.tmm-evaluation-badge {
    background: rgba(74, 222, 128, 0.15);
    color: var(--tmm-success);
    padding: 4px 10px;
    border-radius: var(--tmm-radius-full);
    font-size: 11px;
    font-weight: 600;
}

.tmm-deliverable-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}

.tmm-format {
    font-size: 12px;
    color: var(--tmm-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.tmm-format i { color: var(--tmm-primary); }

/* Alternatives Grid */
.tmm-alternatives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.tmm-alternative-card {
    background: var(--tmm-bg-card);
    border-radius: var(--tmm-radius-sm);
    padding: 16px;
    border: 1px solid var(--tmm-border);
}
.tmm-alternative-card h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--tmm-text);
    text-transform: capitalize;
}
.tmm-alternative-card .tmm-recommended {
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--tmm-text-muted);
}
.tmm-alternative-card .tmm-recommended strong { color: var(--tmm-success); }
.tmm-alternative-card .tmm-alt-options {
    font-size: 13px;
    color: var(--tmm-text-muted);
    margin-bottom: 6px;
}
.tmm-alternative-card .tmm-alt-note {
    font-size: 12px;
    color: var(--tmm-text-muted);
    font-style: italic;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--tmm-border);
}
.tmm-alternative-card .tmm-alt-note i { color: var(--tmm-info); margin-top: 2px; }

/* Budget */
.tmm-budget-section,
.tmm-hardware-budget-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--tmm-border);
}
.tmm-budget-section > h3,
.tmm-hardware-budget-section > h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--tmm-text);
}
.tmm-budget-section > h3 i,
.tmm-hardware-budget-section > h3 i { color: var(--tmm-success); }

.tmm-budget-grid,
.tmm-hardware-budget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.tmm-budget-card,
.tmm-hardware-budget-card {
    background: var(--tmm-bg-elevated);
    border-radius: var(--tmm-radius-sm);
    padding: 16px;
    border: 1px solid var(--tmm-border);
    text-align: center;
}
.tmm-budget-card h4,
.tmm-hardware-budget-card h4 {
    font-size: 13px;
    color: var(--tmm-text-muted);
    margin-bottom: 8px;
    font-weight: 500;
}
.tmm-budget-cost {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--tmm-success);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}
.tmm-budget-card p,
.tmm-hardware-budget-card p {
    font-size: 12px;
    color: var(--tmm-text-muted);
    line-height: 1.4;
}

.tmm-budget-tips {
    background: var(--tmm-bg-elevated);
    border-radius: var(--tmm-radius-sm);
    padding: 16px;
    border: 1px solid var(--tmm-border);
}
.tmm-budget-tips h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tmm-text);
}
.tmm-budget-tips h4 i { color: var(--tmm-warning); }
.tmm-budget-tips ul { list-style: none; }
.tmm-budget-tips ul li {
    font-size: 13px;
    color: var(--tmm-text-muted);
    padding: 6px 0 6px 20px;
    position: relative;
}
.tmm-budget-tips ul li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--tmm-primary);
}

/* On-Premise Info */
.tmm-onpremise-info {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--tmm-border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.tmm-advantages,
.tmm-challenges {
    background: var(--tmm-bg-elevated);
    border-radius: var(--tmm-radius-sm);
    padding: 16px;
    border: 1px solid var(--tmm-border);
}
.tmm-advantages { border-left: 3px solid var(--tmm-success); }
.tmm-challenges { border-left: 3px solid var(--tmm-warning); }

.tmm-advantages h4,
.tmm-challenges h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tmm-text);
}
.tmm-advantages h4 i { color: var(--tmm-success); }
.tmm-challenges h4 i { color: var(--tmm-warning); }

.tmm-advantages ul,
.tmm-challenges ul { list-style: none; }
.tmm-advantages ul li,
.tmm-challenges ul li {
    font-size: 13px;
    color: var(--tmm-text-muted);
    padding: 6px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.tmm-advantages ul li i { color: var(--tmm-success); font-size: 11px; margin-top: 4px; }
.tmm-challenges ul li i { color: var(--tmm-warning); font-size: 11px; margin-top: 4px; }

/* Architecture */
.tmm-architecture-overview {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--tmm-border);
}
.tmm-architecture-overview > h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--tmm-text);
}
.tmm-architecture-overview > h3 i { color: var(--tmm-primary); }

.tmm-architecture-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.tmm-architecture-layer {
    background: var(--tmm-bg-elevated);
    border-radius: var(--tmm-radius-sm);
    padding: 14px;
    border: 1px solid var(--tmm-border);
}
.tmm-architecture-layer h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--tmm-primary);
    text-transform: capitalize;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--tmm-border);
}
.tmm-architecture-layer ul { list-style: none; }
.tmm-architecture-layer ul li {
    font-size: 12px;
    color: var(--tmm-text-muted);
    padding: 4px 0;
}
.tmm-architecture-layer ul li strong { color: var(--tmm-text); font-weight: 500; }
.tmm-architecture-layer p { font-size: 13px; color: var(--tmm-text-muted); }

/* Monitoring / Network / Cluster grids */
.tmm-monitoring-grid,
.tmm-observability-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.tmm-network-row,
.tmm-cluster-row {
    border-bottom: 1px solid var(--tmm-border);
}
.tmm-network-row:last-child,
.tmm-cluster-row:last-child { border-bottom: none; }

.tmm-network-table,
.tmm-cluster-table {
    width: 100%;
    border-collapse: collapse;
}

.tmm-network-table th,
.tmm-network-table td,
.tmm-cluster-table th,
.tmm-cluster-table td {
    padding: 10px 0;
    text-align: left;
    vertical-align: top;
}

.tmm-net-name,
.tmm-node-name {
    min-width: 120px;
    font-weight: 600;
    font-size: 13px;
}

/* Parcours responsive addons */
@media (max-width: 1024px) {
    .tmm-resources-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .tmm-alternatives-grid,
    .tmm-architecture-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

@media (max-width: 768px) {
    .tmm-hardware-grid,
    .tmm-deliverables-grid,
    .tmm-resources-grid,
    .tmm-alternatives-grid,
    .tmm-budget-grid,
    .tmm-hardware-budget-grid,
    .tmm-architecture-grid { grid-template-columns: 1fr; }
    
    .tmm-onpremise-info { grid-template-columns: 1fr; }
    
    .tmm-monitoring-grid,
    .tmm-observability-grid { grid-template-columns: 1fr 1fr; }
    
    .tmm-net-name,
    .tmm-node-name { min-width: auto; }

    .tmm-network-table th,
    .tmm-network-table td,
    .tmm-cluster-table th,
    .tmm-cluster-table td {
        display: block;
        width: 100%;
        padding: 6px 0;
    }
}

@media (max-width: 480px) {
    .tmm-monitoring-grid,
    .tmm-observability-grid { grid-template-columns: 1fr; }
    
    .tmm-skills-acquired .tmm-skill-tag { font-size: 11px; padding: 5px 10px; }
}

/* ═══════════════════════════════════════════
   27. SHORTCODE WIDGETS
   Styles pour les shortcodes standalone
   [tmm_progress], [tmm_certificates], [tmm_courses]
   ═══════════════════════════════════════════ */

/* Progress Widget [tmm_progress] */
.tmm-progress-widget {
    background: var(--tmm-bg-card);
    border-radius: var(--tmm-radius);
    padding: 24px;
    border: 1px solid var(--tmm-border);
}

.tmm-progress-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}

/* Certificates Widget [tmm_certificates] */
.tmm-certificates-widget {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tmm-certificate-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--tmm-bg-card);
    border-radius: var(--tmm-radius);
    padding: 16px;
    border: 1px solid var(--tmm-border);
    transition: var(--tmm-transition);
}
.tmm-certificate-item:hover { border-color: var(--tmm-border-hover); }

.tmm-certificate-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--tmm-radius-sm);
    background: var(--tmm-gradient-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tmm-certificate-icon i { font-size: 18px; color: var(--tmm-primary); }

.tmm-certificate-info { flex: 1; min-width: 0; }
.tmm-certificate-info h4 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.tmm-certificate-info p { font-size: 12px; color: var(--tmm-text-muted); margin-bottom: 4px; }

.tmm-cert-number {
    font-size: 11px;
    color: var(--tmm-text-muted);
    font-family: monospace;
}

.tmm-certificate-actions { flex-shrink: 0; }

/* Course Progress Overlay (shortcode) */
.tmm-course-list--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.tmm-course-list--grid .tmm-course {
    flex-direction: column;
    background: var(--tmm-bg-card);
    border-radius: var(--tmm-radius);
    border: 1px solid var(--tmm-border);
    overflow: hidden;
    padding: 0;
}
.tmm-course-list--grid .tmm-course__thumb {
    width: 100%;
    height: 140px;
    border-radius: 0;
    position: relative;
}
.tmm-course-list--grid .tmm-course__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tmm-course-list--grid .tmm-course__body h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--tmm-text);
}

.tmm-course-progress-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    padding: 6px;
    text-align: center;
}
.tmm-course-progress-overlay span {
    font-size: 12px;
    font-weight: 600;
    color: var(--tmm-primary);
}

/* Login Required */
.tmm-login-required {
    text-align: center;
    padding: 48px 20px;
    background: var(--tmm-bg-card);
    border-radius: var(--tmm-radius);
    border: 1px solid var(--tmm-border);
}
.tmm-login-required i {
    font-size: 40px;
    color: var(--tmm-text-muted);
    margin-bottom: 16px;
    opacity: 0.5;
    display: block;
}
.tmm-login-required p {
    color: var(--tmm-text-muted);
    margin-bottom: 20px;
    font-size: 14px;
}

/* Shortcode responsive */
@media (max-width: 768px) {
    .tmm-progress-stats { grid-template-columns: 1fr 1fr; }
    .tmm-certificate-item { flex-direction: column; text-align: center; }
    .tmm-certificate-actions { width: 100%; }
    .tmm-certificate-actions .tmm-btn { width: 100%; }
}

@media (max-width: 480px) {
    .tmm-progress-stats { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════
   SECTION : DOWNLOADS
   ══════════════════════════════════════════ */

.tmm-card--download {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.tmm-card--download .tmm-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.tmm-card--download .tmm-card__footer {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding-top: var(--tmm-space-md);
    border-top: 1px solid var(--tmm-border);
    width: 100%;
}

.tmm-download__icon {
    font-size: 3.5rem;
    margin-bottom: var(--tmm-space-md);
    color: var(--tmm-primary);
}

.tmm-download__title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 var(--tmm-space-xs);
}

.tmm-download__subtitle {
    font-size: 0.85rem;
    color: var(--tmm-text-muted);
    margin-bottom: var(--tmm-space-md);
}

.tmm-download__specs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.tmm-download__specs li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    font-size: 0.9rem;
}

.tmm-download__specs .fa-check-circle {
    color: var(--tmm-success);
    flex-shrink: 0;
}

/* Bouton affiné */
.tmm-card--download .tmm-btn,
.tmm-card--download .tmm-btn--lg {
    width: auto !important;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem
}

/* ═══════════════════════════════════════════
   AJOUTS v2.1.0 — UX navigation & accessibilité
   ═══════════════════════════════════════════ */

/* Stat cards cliquables (dashboard → navigation directe vers la section liée) */
a.tmm-stat.tmm-stat--link {
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

a.tmm-stat.tmm-stat--link:hover,
a.tmm-stat.tmm-stat--link:focus-visible {
    transform: translateY(-2px);
    border-color: var(--tmm-accent) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

a.tmm-stat.tmm-stat--link:focus-visible {
    outline: 2px solid var(--tmm-accent);
    outline-offset: 2px;
}

/* Focus visible sur le titre de section (déplacement du focus au changement de page,
   pour l'accessibilité lecteur d'écran) — pas de contour disgracieux au clic normal */
.tmm-section__title:focus-visible {
    outline: 2px solid var(--tmm-accent);
    outline-offset: 4px;
    border-radius: 4px;
}
.tmm-section__title:focus:not(:focus-visible) {
    outline: none;
}

/* Aperçu avatar dans le formulaire de profil */
.tmm-avatar-upload {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.tmm-avatar-upload__preview {
    width: 60px;
    height: 60px;
    border-radius: var(--tmm-radius-full);
    object-fit: cover;
    border: 2px solid var(--tmm-border);
    flex-shrink: 0;
}

.tmm-form__hint {
    font-size: 0.8rem;
    color: var(--tmm-text-muted);
    margin: 6px 0 0;
}

/* Toast avec plusieurs lignes / emoji (certificat obtenu) */
.tmm-toast {
    max-width: min(420px, calc(100vw - 32px));
    line-height: 1.4;
}

/* Etat désactivé du sélecteur de période pendant le chargement AJAX */
#tmm-chart-period:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ═══════════════════════════════════════════
   Catalogue "Mes cours" — grille + filtres catégorie + tri
   (audit UX : liste à 1 colonne illisible sur un grand catalogue)
   ═══════════════════════════════════════════ */
.tmm-section__toolbar--catalog {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.tmm-toolbar__filters--categories {
    padding-top: 4px;
    border-top: 1px dashed var(--tmm-border);
}

.tmm-toolbar__search-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.tmm-toolbar__sort {
    width: auto;
    min-width: 200px;
    flex: 0 0 auto;
}

.tmm-toolbar__search-row .tmm-toolbar__search {
    flex: 1 1 240px;
}

/* Grille de cartes du catalogue "Mes cours" — retravaillée suite retour utilisateur :
   trop de vide mort avant le bouton, deux icônes "play" superposées sur les
   vignettes déjà illustrées, badge en pilule blanche peu lisible sur images
   colorées. Ce bloc réécrit entièrement l'habillage carte pour ce contexte
   sans toucher au variant grille du shortcode [tmm_courses]. */
.tmm-course-list--catalog.tmm-course-list--grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    /* Ne pas étirer les cartes à la hauteur de la plus grande de la ligne :
       sans ça, un titre plus long sur une carte voisine crée un vide forcé
       avant le bouton sur toutes les autres cartes de la même ligne. */
    align-items: start;
}

.tmm-course-list--catalog .tmm-course {
    position: relative;
}

/* ─── Réglages spécifiques au mode grille uniquement (pas la liste) ─── */

.tmm-course-list--catalog.tmm-course-list--grid .tmm-course {
    box-shadow: var(--tmm-shadow);
}

/* Badge de statut en superposition (verre dépoli) : uniquement pertinent en
   grille, où le badge doit se lire par-dessus une vignette potentiellement
   très colorée. En liste, il reste un élément normal du flux, avant la
   vignette, comme à l'origine — pas la place pour un badge en overlay sur
   une vignette de 64px. */
.tmm-course-list--catalog.tmm-course-list--grid .tmm-course__status-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: rgba(16, 14, 23, 0.72) !important;
    color: #fff !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 11px;
    font-weight: 600;
}
.tmm-course-list--catalog.tmm-course-list--grid .tmm-course:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

/* Vignette 16:9 cohérente quelle que soit l'image source */
.tmm-course-list--catalog.tmm-course-list--grid .tmm-course__thumb {
    aspect-ratio: 16 / 9;
    height: auto;
}

/* L'icône "play" du plugin faisait doublon avec les vignettes déjà
   illustrées : elle ne s'affiche plus qu'au survol, comme un aperçu,
   au lieu d'encombrer la vignette en permanence. Réservé à la grille : en
   liste la vignette est trop petite pour porter ce même effet. */
.tmm-course-list--catalog.tmm-course-list--grid .tmm-course__play-icon {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    background: rgba(16, 14, 23, 0.4);
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1;
}
.tmm-course-list--catalog.tmm-course-list--grid .tmm-course:hover .tmm-course__play-icon,
.tmm-course-list--catalog.tmm-course-list--grid .tmm-course:focus-within .tmm-course__play-icon {
    opacity: 1;
    transform: scale(1);
}
.tmm-course-list--catalog.tmm-course-list--grid .tmm-course__play-icon i {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--tmm-primary-dark);
    border-radius: 50%;
    font-size: 15px;
}

.tmm-course-list--catalog.tmm-course-list--grid .tmm-course__body {
    flex: 1;
    padding: 14px 16px 0;
    gap: 8px;
}

/* Titre borné à 2 lignes : évite qu'un titre long fasse varier fortement la
   hauteur d'une carte par rapport à ses voisines (grille uniquement — en
   liste le titre reste tronqué sur une ligne, plus compact). */
.tmm-course-list--catalog.tmm-course-list--grid .tmm-course__title {
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.8em;
}

.tmm-course-list--catalog.tmm-course-list--grid .tmm-course__tags {
    margin-top: -2px;
}

.tmm-course-list--catalog.tmm-course-list--grid .tmm-course__action {
    margin-left: 0;
    margin-top: 14px;
    padding: 0 16px 16px;
}

.tmm-course-list--catalog .tmm-course__action .tmm-btn {
    width: 100%;
    justify-content: center;
}

@media (max-width: 600px) {
    .tmm-course-list--catalog.tmm-course-list--grid {
        grid-template-columns: 1fr;
    }
    .tmm-toolbar__sort {
        min-width: 0;
        width: 100%;
    }
}

/* ═══════════════════════════════════════════
   Modale de confirmation générique
   (remplace window.confirm() pour les actions à conséquence, ex: annulation d'abonnement)
   ═══════════════════════════════════════════ */
.tmm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
}
.tmm-modal-overlay[hidden] { display: none; }

.tmm-modal {
    background: var(--tmm-bg-card);
    border: 1px solid var(--tmm-border);
    border-radius: var(--tmm-radius-lg);
    padding: 28px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.tmm-modal__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(248, 113, 113, 0.12);
    color: var(--tmm-danger);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.tmm-modal h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--tmm-text);
}

.tmm-modal p {
    font-size: 14px;
    color: var(--tmm-text);
    margin: 0 0 12px;
    line-height: 1.5;
}

.tmm-modal__actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.tmm-modal__actions .tmm-btn {
    flex: 1;
    justify-content: center;
}

@media (max-width: 480px) {
    .tmm-modal__actions { flex-direction: column; }
}

/* ═══════════════════════════════════════════
   Mode sombre — bordures claires remplacées par du relief (ombre)
   Retour explicite : aucun liseré blanc/clair visible, même discret, sur
   les cartes, cours et pilules de filtre. La distinction entre surfaces se
   fait uniquement par la couleur de fond et l'ombre portée.
   ═══════════════════════════════════════════ */
#tmm-dashboard[data-theme="dark"] .tmm-card,
#tmm-dashboard[data-theme="dark"] .tmm-stat,
#tmm-dashboard[data-theme="dark"] .tmm-course,
#tmm-dashboard[data-theme="dark"] .tmm-course-mini {
    border-color: transparent !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

#tmm-dashboard[data-theme="dark"] .tmm-card:hover,
#tmm-dashboard[data-theme="dark"] .tmm-stat:hover,
#tmm-dashboard[data-theme="dark"] .tmm-course:hover,
#tmm-dashboard[data-theme="dark"] .tmm-course-mini:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

/* Pilules de filtre/onglet : la bordure est déjà neutralisée pour les deux
   thèmes à la source (règle .tmm-toolbar__filter-btn:not(.is-active) plus
   haut dans ce fichier) — ici on ne fait qu'accentuer l'ombre en mode sombre. */
#tmm-dashboard[data-theme="dark"] .tmm-toolbar__filter-btn.is-active,
#tmm-dashboard[data-theme="dark"] .tmm-toolbar__tab-btn.is-active {
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.35) !important;
}

/* Le catalogue de cours applique sa propre ombre en mode grille (déjà sans
   bordure) : on désactive juste le doublon pour ne pas cumuler deux ombres. */
#tmm-dashboard[data-theme="dark"] .tmm-course-list--catalog.tmm-course-list--grid .tmm-course {
    box-shadow: var(--tmm-shadow) !important;
}
#tmm-dashboard[data-theme="dark"] .tmm-course-list--catalog.tmm-course-list--grid .tmm-course:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}

/* ═══════════════════════════════════════════
   Badge de niveau — code couleur (au lieu du texte gris uniforme) :
   difficulté perceptible d'un coup d'œil, répété sur chaque ligne de cours.
   ═══════════════════════════════════════════ */
.tmm-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: var(--tmm-radius-full);
    font-size: 11px;
    font-weight: 600;
}
.tmm-level-badge i { font-size: 10px; }

.tmm-level-badge--beginner {
    background: rgba(74, 222, 128, 0.14);
    color: var(--tmm-success);
}
.tmm-level-badge--intermediate {
    background: rgba(251, 191, 36, 0.14);
    color: var(--tmm-warning);
}
.tmm-level-badge--advanced {
    background: rgba(248, 113, 113, 0.14);
    color: var(--tmm-danger);
}

/* Vignettes par défaut (SVG) : occuper tout le cadre, cohérent quel que soit
   le mode d'affichage (liste ou grille) */
.js-course-thumb {
    background: var(--tmm-bg-base);
}