/*
 * Styles du widget "Tableau de bord Client" (fam-client-dashboard).
 * Extrait tel quel depuis le <style> inline de widgets/widget-client-dashboard.php
 * lors du refactoring de découpage (v2.4.3) — aucune règle modifiée.
 */

            /* Filet de sécurité : .fam-dashboard-shell et .fam-dashboard-topbar
               remplissent désormais 100% de leur conteneur parent (déjà en
               pleine largeur côté Elementor) au lieu d'utiliser des calculs
               en vw, donc cette règle n'a normalement plus d'effet. On la
               garde par prudence — elle ne coûte rien et protège contre un
               éventuel débordement horizontal résiduel d'un autre élément
               de l'espace client, scopée uniquement à ce contexte via la
               classe body ajoutée par formation-agora-manager.php quand
               fam_current_page_has_dashboard_widget() est vrai. */
            body.fam-dashboard-active,
            html:has(body.fam-dashboard-active) {
                overflow-x: hidden;
            }

            .fam-dashboard-shell {
                display: flex;
                align-items: flex-start;
                gap: 0;
                background: #f7f8fa;
                overflow: hidden;
                border: 1px solid rgba(0, 0, 0, 0.06);
                box-sizing: border-box;
                /* width: 100% au lieu de 100vw : évite d'inclure la largeur
                   de la scrollbar verticale dans le calcul (contrairement
                   à vw), suffisant car la section Elementor parente est
                   déjà en pleine largeur. */
                position: relative;
                width: 100%;
                margin-left: 0;
                margin-right: 0;
                min-height: 100vh;
                border-radius: 0;
            }

            .fam-dashboard-sidebar {
                width: 240px;
                flex: 0 0 240px;
                background: #ffffff;
                border-right: 1px solid rgba(0, 0, 0, 0.08);
                display: flex;
                flex-direction: column;
                align-self: stretch;
                padding: 20px 0;
            }

            /* ===================================================
               Topbar horizontale (templates/dashboard/topbar.php)
               =================================================== */

            .fam-dashboard-topbar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 20px;
                background: #ffffff;
                border: 1px solid rgba(0, 0, 0, 0.06);
                border-bottom: none;
                box-sizing: border-box;
                /* 72px = 48px (nouvelle hauteur max du logo) + 12px de
                   padding haut/bas. */
                height: 72px;
                /* CORRECTIF (régression du correctif précédent) : mettre
                   overflow-x: hidden seul, sans overflow-y déclaré,
                   fait que les navigateurs calculent automatiquement
                   overflow-y: auto pour l'axe non précisé (spec CSS
                   Overflow) — d'où la scrollbar apparue sur la topbar, et
                   le menu déroulant du profil rendu À L'INTÉRIEUR de cette
                   zone scrollable au lieu de flotter par-dessus. On
                   supprime donc toute règle overflow ici : la protection
                   contre un logo trop large n'était qu'un filet de
                   sécurité théorique (le logo est déjà contraint par
                   max-height !important sur .fam-dashboard-topbar-brand
                   img) ; si une protection horizontale s'avère vraiment
                   nécessaire, elle doit être scopée sur
                   .fam-dashboard-topbar-brand (simple sibling de
                   .fam-dashboard-topbar-profile, donc sans jamais couper
                   le menu déroulant), pas sur .fam-dashboard-topbar. */
                padding: 12px 24px;
                /* width: 100% au lieu de 100vw : évite d'inclure la largeur
                   de la scrollbar verticale dans le calcul (contrairement
                   à vw), suffisant car la section Elementor parente est
                   déjà en pleine largeur. */
                position: relative;
                width: 100%;
                margin-left: 0;
                margin-right: 0;
            }

            .fam-dashboard-topbar-brand {
                display: flex;
                align-items: center;
                height: 100%;
                font-family: "Poppins", "Open Sans", sans-serif;
                font-weight: 700;
                font-size: 16px;
                color: #2d2d2d;
                text-decoration: none;
            }

            .fam-dashboard-topbar-brand img {
                max-height: 48px !important;
                width: auto !important;
                object-fit: contain;
            }

            .fam-dashboard-topbar-profile {
                position: relative;
                cursor: pointer;
                outline: none;
            }

            .fam-dashboard-topbar-profile-trigger {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 4px 6px;
                border-radius: 50px;
                transition: background 0.15s ease;
            }

            .fam-dashboard-topbar-profile:hover .fam-dashboard-topbar-profile-trigger,
            .fam-dashboard-topbar-profile:focus-within .fam-dashboard-topbar-profile-trigger,
            .fam-dashboard-topbar-profile.is-open .fam-dashboard-topbar-profile-trigger {
                background: #f7f8fa;
            }

            .fam-dashboard-topbar-profile-caret {
                font-size: 11px;
                color: #999;
                transition: transform 0.15s ease;
            }

            .fam-dashboard-topbar-profile:hover .fam-dashboard-topbar-profile-caret,
            .fam-dashboard-topbar-profile:focus-within .fam-dashboard-topbar-profile-caret,
            .fam-dashboard-topbar-profile.is-open .fam-dashboard-topbar-profile-caret {
                transform: rotate(180deg);
            }

            .fam-dashboard-topbar-menu {
                display: none;
                position: absolute;
                top: calc(100% + 8px);
                right: 0;
                min-width: 200px;
                background: #ffffff;
                border: 1px solid rgba(0, 0, 0, 0.08);
                border-radius: 10px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
                padding: 6px;
                z-index: 20;
            }

            /* Hover en CSS pur pour desktop (souris) */
            .fam-dashboard-topbar-profile:hover .fam-dashboard-topbar-menu,
            .fam-dashboard-topbar-profile:focus-within .fam-dashboard-topbar-menu {
                display: block;
            }

            /* Fallback au clic pour le tactile/mobile, piloté par
               assets/js/client-dashboard.js (classe .is-open ajoutée sur
               .fam-dashboard-topbar-profile). */
            .fam-dashboard-topbar-profile.is-open .fam-dashboard-topbar-menu {
                display: block;
            }

            .fam-dashboard-topbar-menu-item {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 10px 12px;
                border-radius: 6px;
                font-size: 14px;
                font-weight: 600;
                color: #4A5568;
                text-decoration: none;
                transition: background 0.15s ease, color 0.15s ease;
            }

            .fam-dashboard-topbar-menu-item:hover {
                background: rgba(58, 181, 74, 0.1);
                color: #2d8a3a;
            }

            .fam-dashboard-topbar-menu-item i {
                width: 16px;
                text-align: center;
                color: #3ab54a;
            }

            .fam-dashboard-topbar-menu-logout {
                color: #dc2626;
            }

            .fam-dashboard-topbar-menu-logout i {
                color: #dc2626;
            }

            .fam-dashboard-topbar-menu-logout:hover {
                background: rgba(220, 38, 38, 0.08);
                color: #dc2626;
            }

            .fam-dashboard-avatar {
                flex: 0 0 44px;
                width: 44px;
                height: 44px;
                border-radius: 50%;
                background: #3ab54a;
                color: #fff;
                font-weight: 700;
                font-size: 17px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .fam-dashboard-user-info {
                min-width: 0;
            }

            .fam-dashboard-user-name {
                margin: 0 0 4px 0;
                font-weight: 700;
                font-size: 14px;
                color: #2d2d2d;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .fam-dashboard-badge {
                display: inline-block;
                font-size: 11px;
                font-weight: 600;
                padding: 2px 9px;
                border-radius: 50px;
            }

            .fam-dashboard-badge-particulier {
                background: rgba(58, 181, 74, 0.12);
                color: #2d8a3a;
            }

            .fam-dashboard-badge-entreprise {
                background: rgba(59, 130, 246, 0.12);
                color: #2563eb;
            }

            .fam-dashboard-nav {
                display: flex;
                flex-direction: column;
                gap: 2px;
                padding: 12px 12px;
                flex: 1;
            }

            .fam-dashboard-nav-item {
                display: flex;
                align-items: center;
                gap: 12px;
                width: 100%;
                background: transparent;
                border: none;
                text-align: left;
                padding: 11px 14px;
                border-radius: 8px;
                font-size: 14px;
                font-weight: 600;
                color: #4A5568;
                cursor: pointer;
                text-decoration: none;
                transition: background 0.15s ease, color 0.15s ease;
            }

            /*
             * NE PAS SUPPRIMER — même si elle semble redondante avec la règle
             * générique .fam-dashboard-nav-item ci-dessus.
             *
             * Contexte : fam_dashboard_render_nav_item() (templates/dashboard/
             * sidebar.php) rend "Vue d'ensemble" et "Salariés" en <button
             * class="fam-dashboard-nav-item"> uniquement sur le widget
             * Tableau de bord ($current_page === 'dashboard'), alors que ces
             * mêmes items (et tous les autres : Mes formations, Catalogue,
             * Documents, Mon profil) sont des <a class="fam-dashboard-nav-item">
             * partout ailleurs. Un reset global de bouton (thème WordPress ou
             * Elementor, appliqué à tous les <button> du site, généralement
             * avec !important sur display/padding/margin) écrase display:flex
             * et/ou gap spécifiquement sur ces deux items, sans jamais
             * affecter les <a> (jamais ciblés par ce type de reset) — d'où
             * l'icône et le texte collés (pas de gap) uniquement sur "Vue
             * d'ensemble"/"Salariés" du widget Tableau de bord.
             *
             * On réaffirme donc ici le layout avec une sélectivité plus
             * élevée (élément + classe) et !important pour battre ce reset
             * externe, sans toucher au markup PHP ni aux styles des <a>.
             */
            button.fam-dashboard-nav-item {
                display: flex !important;
                align-items: center !important;
                gap: 12px !important;
            }

            .fam-dashboard-nav-item i {
                width: 18px;
                text-align: center;
                color: #9aa1ab;
                transition: color 0.15s ease;
            }

            .fam-dashboard-nav-item:hover {
                background: rgba(58, 181, 74, 0.08);
                color: #2d2d2d;
            }

            .fam-dashboard-nav-item.is-active {
                background: #3ab54a;
                color: #fff;
            }

            .fam-dashboard-nav-item.is-active i {
                color: #fff;
            }

            .fam-dashboard-main {
                flex: 1;
                min-width: 0;
                padding: 28px 32px;
            }

            .fam-dashboard-panel {
                display: none;
            }

            .fam-dashboard-panel.is-active {
                display: block;
            }

            .fam-dashboard-panel-header {
                margin-bottom: 20px;
            }

            .fam-dashboard-title {
                margin: 0;
                font-size: 22px;
                font-weight: 700;
                color: #2d2d2d;
            }

            .fam-dashboard-subtitle {
                margin: 6px 0 0 0;
                color: #666;
                font-size: 14px;
            }

            .fam-datatable-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
                gap: 12px;
                padding-bottom: 18px;
                margin-bottom: 18px;
            }

            .fam-datatable-header-left {
                display: flex;
                align-items: center;
                gap: 10px;
                font-size: 16px;
                font-weight: 700;
                color: #2d2d2d;
            }

            .fam-datatable-count {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 22px;
                height: 22px;
                padding: 0 7px;
                border-radius: 50px;
                background: #f0f0f0;
                color: #2d2d2d;
                font-size: 12px;
                font-weight: 700;
            }

            .fam-datatable-status-filter {
                padding: 8px 12px;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                font-size: 14px;
                font-family: inherit;
                background: #fff;
                color: #2d2d2d;
                cursor: pointer;
            }

            .fam-dashboard-subsection-title {
                font-size: 15px;
                font-weight: 700;
                color: #2d2d2d;
                margin: 4px 0 12px 0;
            }

            .fam-dashboard-subsection-title-muted {
                color: #999;
                margin-top: 24px;
            }

            .fam-dashboard-upcoming-list {
                list-style: none;
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            .fam-dashboard-upcoming-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                padding: 12px 14px;
                border: 1px solid rgba(0, 0, 0, 0.07);
                border-radius: 8px;
                flex-wrap: wrap;
            }

            .fam-dashboard-upcoming-info {
                display: flex;
                flex-direction: column;
                gap: 2px;
            }

            .fam-dashboard-upcoming-info a {
                font-weight: 600;
                color: #2d2d2d;
                text-decoration: none;
            }

            .fam-dashboard-upcoming-info a:hover {
                color: #3ab54a;
            }

            .fam-dashboard-upcoming-date {
                font-size: 12px;
                color: #999;
            }

            .fam-dashboard-catalogue-item-registered {
                opacity: 0.6;
                background: #f7f8fa;
            }

            .fam-dashboard-stats {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
                gap: 16px;
                margin-bottom: 24px;
            }

            .fam-dashboard-stat {
                background: #fff;
                padding: 16px 20px;
                border-radius: 8px;
                border: 1px solid rgba(0, 0, 0, 0.07);
                text-align: center;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            }

            .fam-dashboard-stat-number {
                display: block;
                font-size: 28px;
                font-weight: 700;
                color: #3ab54a;
            }

            .fam-dashboard-stat-label {
                font-size: 13px;
                color: #666;
            }

            .fam-dashboard-card {
                background: #fff;
                border: 1px solid rgba(0, 0, 0, 0.07);
                border-radius: 10px;
                padding: 24px;
                margin-bottom: 20px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
                transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
            }

            /* Mise en surbrillance temporaire d'une carte "Mes documents"
               ciblée depuis /espace-client/documents/?registration=ID (lien
               "Documents" d'une ligne de widgets/widget-client-formations.php)
               — voir assets/js/client-dashboard.js pour le scrollIntoView()
               et le retrait de cette classe après ~2s ou au 1er scroll/clic. */
            .fam-doc-card--highlight {
                background: rgba(58, 181, 74, 0.08);
                border-color: #3ab54a;
                box-shadow: 0 0 0 3px rgba(58, 181, 74, 0.15);
            }

            .fam-dashboard-card-danger {
                border-color: #fecaca;
                background: #fef2f2;
            }

            .fam-dashboard-card-title {
                margin: 0 0 16px 0;
                font-size: 18px;
                font-weight: 700;
                color: #2d2d2d;
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .fam-dashboard-card-title i {
                color: #3ab54a;
            }

            .fam-dashboard-empty {
                color: #999;
                font-style: italic;
            }

            .fam-dashboard-text {
                color: #4A5568;
                line-height: 1.6;
                margin-bottom: 12px;
            }

            .fam-dashboard-table-wrap {
                overflow-x: auto;
                border-top: 1px solid #e0e0e0;
                border-left: 1px solid #e0e0e0;
                border-right: 1px solid #e0e0e0;
            }

            /* .fam-dashboard-table.fam-dashboard-table (double classe) : le
               plugin lui-même ne définit aucune bordure verticale sur ce
               tableau (border-collapse + border-bottom uniquement, cf.
               règles th/td ci-dessous) — les lignes verticales visibles
               entre les colonnes viennent donc d'un style externe (thème ou
               style global "Table" d'Elementor) qui cible par défaut toute
               balise <table>/<th>/<td>. On neutralise explicitement ces
               bordures externes avec !important ; si un style externe
               gagne malgré tout (poids CSS très élevé, cf. panneau
               "Inspecter" du navigateur), le doublement de la classe ici
               (.fam-dashboard-table.fam-dashboard-table) augmente la
               spécificité de ce sélecteur sans dépendre du thème. */
            .fam-dashboard-table.fam-dashboard-table {
                width: 100%;
                border-collapse: collapse;
                border: none !important;
                margin-block-end: 0 !important;
                margin-bottom: 0 !important;
                font-size: 14px;
            }

            /* Neutralise toute bordure imposée par le thème (règle globale
               "table th, table td") avant de ne réappliquer que la bordure
               horizontale voulue ci-dessous. */
            .fam-dashboard-table.fam-dashboard-table th,
            .fam-dashboard-table.fam-dashboard-table td {
                border: 0 !important;
            }

            .fam-dashboard-table.fam-dashboard-table th {
                text-align: left;
                padding: 16px 20px;
                background: #f5f5f5;
                font-weight: 600;
                color: #2d2d2d;
                border-bottom: 1px solid #e0e0e0 !important;
            }

            .fam-dashboard-table.fam-dashboard-table td {
                padding: 16px 20px;
                border-bottom: 1px solid #e0e0e0 !important;
                vertical-align: middle;
            }

            .fam-dashboard-status {
                display: inline-block;
                padding: 3px 12px;
                border-radius: 50px;
                font-size: 12px;
                font-weight: 600;
                color: #fff;
            }

            .fam-dashboard-btn-small {
                display: inline-block;
                padding: 6px 14px;
                border-radius: 4px;
                font-size: 13px;
                font-weight: 600;
                text-decoration: none;
                cursor: pointer;
                border: none;
                transition: all 0.2s ease;
                background: #3ab54a;
                color: #fff;
            }

            .fam-dashboard-btn-small:hover {
                background: #2d8a3a;
                color: #fff;
                text-decoration: none;
            }

            .fam-dashboard-btn-cancel {
                background: #ef4444;
            }

            /*
             * Liste des documents téléchargeables d'une formation
             * (livrables), utilisée par le widget "Documents Client"
             * (fam-client-documents) sur /espace-client/documents/.
             */
            .fam-documents-list {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            .fam-documents-item {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 14px 16px;
                border: 1px solid rgba(0, 0, 0, 0.08);
                border-radius: 8px;
                background: #fafafa;
                text-decoration: none;
                color: #2d2d2d;
                transition: background 0.15s ease, border-color 0.15s ease;
            }

            .fam-documents-item:hover {
                background: rgba(58, 181, 74, 0.08);
                border-color: rgba(58, 181, 74, 0.3);
                color: #2d2d2d;
                text-decoration: none;
            }

            .fam-documents-item>i:first-child {
                width: 20px;
                text-align: center;
                font-size: 18px;
                color: #3ab54a;
                flex: 0 0 20px;
            }

            .fam-documents-item-title {
                flex: 1;
                font-weight: 600;
                font-size: 14px;
            }

            .fam-documents-item-download {
                color: #9aa1ab;
                font-size: 14px;
            }

            .fam-dashboard-btn-cancel:hover {
                background: #dc2626;
            }

            .fam-dashboard-btn-doc {
                background: #3b82f6;
            }

            .fam-dashboard-btn-doc:hover {
                background: #2563eb;
            }

            .fam-dashboard-btn-danger {
                background: #dc2626;
                color: #fff;
            }

            .fam-dashboard-btn-danger:hover {
                background: #b91c1c;
            }

            .fam-dashboard-icon-btn {
                width: 34px;
                height: 34px;
                border-radius: 50%;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border: none;
                cursor: pointer;
                text-decoration: none;
                transition: background-color 0.15s ease;
            }

            .fam-dashboard-icon-btn:hover {
                text-decoration: none;
            }

            .fam-dashboard-icon-btn:disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }

            .fam-dashboard-icon-btn--danger {
                background-color: rgba(239, 68, 68, 0.12);
                color: #ef4444;
            }

            .fam-dashboard-icon-btn--danger:hover {
                background-color: rgba(239, 68, 68, 0.2);
                color: #ef4444;
            }

            .fam-dashboard-icon-btn--primary {
                background-color: rgba(58, 181, 74, 0.12);
                color: #3ab54a;
            }

            .fam-dashboard-icon-btn--primary:hover {
                background-color: rgba(58, 181, 74, 0.2);
                color: #3ab54a;
            }

            .fam-dashboard-btn-add-employee {
                background: #3ab54a;
                color: #fff;
                margin-top: 8px;
            }

            .fam-dashboard-btn-add-employee:hover {
                background: #2d8a3a;
            }

            .fam-dashboard-catalogue-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                gap: 16px;
                margin-top: 12px;
            }

            .fam-dashboard-catalogue-item {
                border: 1px solid rgba(0, 0, 0, 0.07);
                border-radius: 6px;
                padding: 16px;
                text-align: center;
                display: flex;
                flex-direction: column;
                gap: 10px;
                align-items: center;
            }

            .fam-dashboard-catalogue-item h4 {
                margin: 0;
                font-size: 14px;
                font-weight: 600;
                color: #2d2d2d;
            }

            .fam-dashboard-badge-registered {
                color: #16a34a;
                font-weight: 600;
                font-size: 13px;
            }

            .fam-dashboard-profile {
                display: flex;
                flex-wrap: wrap;
                gap: 24px;
                justify-content: space-between;
                align-items: flex-start;
            }

            .fam-dashboard-profile-info p {
                margin: 6px 0;
                font-size: 14px;
            }

            .fam-dashboard-profile-actions {
                display: flex;
                gap: 10px;
                flex-wrap: wrap;
            }

            /*
             * Styles de base pour les classes .fam-register-* réutilisées
             * en dehors du widget "Inscription Client" (fam-client-register) :
             * formulaire "Ajouter un salarié" (panel-salaries.php) et,
             * désormais, les formulaires "Mes informations" et "Changer mon
             * mot de passe" de la page /tableau-de-bord/profil/ (voir
             * widgets/widget-client-profil.php). Dans widget-client-register.php,
             * ces classes ne sont stylées que via les contrôles Elementor
             * (sélecteurs {{WRAPPER}}), donc uniquement quand ce widget est
             * réellement présent sur la page — ce qui n'est pas le cas ici.
             */
            .fam-register-form-inner {
                display: flex;
                flex-direction: column;
                gap: 0;
            }

            .fam-register-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 14px;
                margin-bottom: 16px;
            }

            .fam-register-field.full-width {
                grid-column: 1 / -1;
            }

            .fam-register-field label {
                display: block;
                margin-bottom: 6px;
                font-size: 13px;
                font-weight: 600;
                color: #2d2d2d;
            }

            .fam-register-input {
                width: 100%;
                border: 1px solid rgba(0, 0, 0, 0.15);
                border-radius: 6px;
                padding: 10px 12px;
                font-size: 14px;
                font-family: inherit;
                color: #2d2d2d;
                background: #fff;
                box-sizing: border-box;
                transition: border-color 0.2s ease;
            }

            /*
             * CORRECTIF : les styles globaux input/select/textarea du thème
             * WordPress (souvent chargés après ce fichier ou avec une
             * spécificité équivalente/supérieure) écrasent le fond blanc et
             * le texte gris ci-dessus, ce qui fait apparaître les champs en
             * noir. On réaffirme donc ici fond/texte/bordure avec !important
             * pour que .fam-register-input gagne systématiquement, quel que
             * soit ce que le thème applique. Ne pas retirer ces !important
             * sans revérifier le rendu réel dans le thème actif.
             */
            .fam-register-input,
            select.fam-register-input,
            textarea.fam-register-input {
                background: #fff !important;
                color: #2d2d2d !important;
                border: 1px solid rgba(0, 0, 0, 0.15) !important;
            }

            .fam-register-input:focus {
                outline: none;
                border-color: #3ab54a !important;
            }

            textarea.fam-register-input {
                resize: vertical;
            }

            .fam-register-checkbox {
                display: flex;
                align-items: flex-start;
                gap: 10px;
                cursor: pointer;
                line-height: 1.5;
                font-size: 14px;
                color: #4a5568;
            }

            /*
             * Même conflit de spécificité avec le thème que .fam-register-input
             * ci-dessus : on force l'apparence de la case à cocher (accent-color
             * = vert de marque) pour qu'elle ne soit pas re-stylée en noir/gris
             * par défaut par le thème.
             */
            .fam-register-checkbox input[type="checkbox"] {
                margin-top: 3px;
                flex-shrink: 0;
                accent-color: #3ab54a !important;
            }

            .fam-register-error,
            .fam-register-success {
                margin-top: 12px;
                padding: 10px 14px;
                border-radius: 6px;
                border: 1px solid;
                font-size: 13px;
            }

            .fam-register-error {
                background: #fef2f2;
                color: #dc2626;
                border-color: #fecaca;
            }

            .fam-register-success {
                background: #f0fdf4;
                color: #16a34a;
                border-color: #bbf7d0;
            }

            @media (max-width: 600px) {
                .fam-register-grid {
                    grid-template-columns: 1fr;
                }
            }

            .fam-dashboard-employees-form-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 12px;
                margin: 12px 0;
            }

            .fam-dashboard-employees-form-grid .fam-register-input {
                font-size: 14px;
                padding: 8px 10px;
            }

            /*
             * Page "Mes formations" (fam-client-formations,
             * /tableau-de-bord/formations/) : datatable (recherche + tri +
             * pagination), remplace l'ancien affichage en cartes.
             */
            .fam-datatable thead th[data-sort-key] {
                cursor: pointer;
                user-select: none;
                white-space: nowrap;
            }

            .fam-datatable thead th[data-sort-key]::after {
                content: '\2195';
                display: inline-block;
                margin-left: 6px;
                color: #bbb;
                font-size: 12px;
            }

            .fam-datatable thead th.is-sorted-asc::after {
                content: '\2191';
                color: #3ab54a;
            }

            .fam-datatable thead th.is-sorted-desc::after {
                content: '\2193';
                color: #3ab54a;
            }

            .fam-datatable-actions-inner {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
                align-items: center;
            }

            .fam-formations-cancelled-note {
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: 13px;
                font-weight: 600;
                color: #ef4444;
            }

            .fam-datatable-pagination {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
                margin-top: 16px;
            }

            .fam-datatable-page-btn {
                min-width: 32px;
                height: 32px;
                padding: 0 8px;
                border: 1px solid #e0e0e0;
                border-radius: 6px;
                background: #fff;
                color: #2d2d2d;
                font-size: 13px;
                font-weight: 600;
                cursor: pointer;
            }

            .fam-datatable-page-btn:hover {
                border-color: #3ab54a;
            }

            .fam-datatable-page-btn.is-active {
                background: #3ab54a;
                border-color: #3ab54a;
                color: #fff;
            }

            .fam-datatable-page-btn:disabled {
                opacity: 0.4;
                cursor: not-allowed;
            }

            .fam-datatable-page-btn:disabled:hover {
                border-color: #e0e0e0;
            }

            .fam-datatable-footer {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
                gap: 12px;
                margin-top: 16px;
            }

            .fam-datatable-showing {
                font-size: 13px;
                color: #666;
            }

            .fam-datatable-footer .fam-datatable-pagination {
                margin-top: 0;
            }

            @media (max-width: 768px) {
                .fam-dashboard-topbar {
                    padding: 10px 16px;
                }

                .fam-dashboard-topbar-brand span {
                    font-size: 14px;
                }

                .fam-dashboard-user-info {
                    max-width: 110px;
                }

                .fam-dashboard-shell {
                    flex-direction: column;
                }

                .fam-dashboard-sidebar {
                    width: 100%;
                    flex: 1 1 auto;
                    border-right: none;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
                    padding: 12px 0;
                }

                .fam-dashboard-nav {
                    flex-direction: row;
                    overflow-x: auto;
                    -webkit-overflow-scrolling: touch;
                    padding: 8px 12px;
                    gap: 6px;
                }

                .fam-dashboard-nav-item {
                    flex: 0 0 auto;
                    white-space: nowrap;
                    padding: 9px 12px;
                }

                .fam-dashboard-nav-item span {
                    display: inline;
                }

                .fam-dashboard-main {
                    padding: 18px 16px;
                }

                .fam-dashboard-stats {
                    grid-template-columns: 1fr 1fr;
                }

                .fam-dashboard-employees-form-grid {
                    grid-template-columns: 1fr;
                }

                .fam-dashboard-profile {
                    flex-direction: column;
                }

                .fam-dashboard-catalogue-grid {
                    grid-template-columns: 1fr;
                }

                .fam-dashboard-card {
                    padding: 16px;
                }

                .fam-dashboard-table {
                    font-size: 13px;
                }

                .fam-dashboard-table th,
                .fam-dashboard-table td {
                    padding: 6px 8px;
                }
            }

            @media (max-width: 480px) {
                .fam-dashboard-stats {
                    grid-template-columns: 1fr;
                }

                .fam-dashboard-stat-number {
                    font-size: 22px;
                }
            }

            /* ===================================================
               Page /tableau-de-bord/catalogue/ (FAM_Widget_Client_Catalogue)
               =================================================== */

            .fam-catalogue-grid-wrapper .fam-catalogue-grid,
            .fam-catalogue-client-registered .fam-catalogue-grid {
                margin-bottom: 8px;
            }

            .fam-catalogue-client-registered {
                margin-top: 32px;
            }

            /* Cartes "Formations suivies" : mêmes cartes que le catalogue
               public (FAM_Catalogue_Query::render_single_card()),
               légèrement atténuées pour les distinguer visuellement des
               formations encore disponibles à l'inscription. */
            .fam-card.fam-card--registered {
                opacity: 0.7;
                background: #f7f8fa;
            }

            .fam-card.fam-card--registered:hover {
                opacity: 0.9;
            }

            .fam-catalogue-client-pagination {
                margin-top: 8px;
            }

            /* Bouton "S'inscrire" désactivé sur les cartes déjà suivies
               (section "Formations suivies") — le badge "Déjà suivi" est
               stylé juste au-dessus (voir .fam-dashboard-badge-registered). */
            .fam-btn--primary.is-disabled,
            .fam-btn--primary:disabled {
                opacity: 0.5;
                cursor: not-allowed;
                pointer-events: none;
            }