/* ==========================================================================
   admin-theme.css — Thème « Vert émeraude » du back-office (Phase 1 reskin)
   --------------------------------------------------------------------------
   Chargé APRÈS css/admin.css → surcouche purement visuelle.
   RÉVERSIBLE : retirer le <link> de header.php pour revenir à l'ancien thème.
   Aucune structure HTML / logique modifiée. Cf. Doc/refonte-ux-back-office.md.
   Référence couleurs : design-system/edutools/MASTER.md (variante verte validée).
   ========================================================================== */

/* --- 0. Remap des tokens historiques (--wp-*) vers la marque verte --------- */
:root {
    /* Chrome clair (topbar + sidebar passent du sombre WordPress au blanc) */
    --wp-admin-bar:    #FFFFFF;
    --wp-sidebar:      #FFFFFF;
    --wp-sidebar-hover:#EFF7F2;

    /* Accent identité : bleu WP → vert émeraude (recolore liens, btn-primary, focus…) */
    --wp-blue:        #059669;
    --wp-blue-hover:  #047857;
    --wp-red:         #DC2626;
    --wp-green:       #15803D;

    /* Neutres */
    --wp-gray-bg:     #F3F9F6;   /* fond des pages, vert très doux */
    --wp-border-color:#E3EFE9;
    --wp-text-main:   #1F2A24;
    --color-muted:    #5C6B64;
    --color-border:   #E3EFE9;
    --focus-ring:     #059669;

    /* Tokens de marque additionnels (réutilisables) */
    --c-primary:      #059669;
    --c-primary-bright:#10B981;
    --c-primary-dark: #047857;
    --c-primary-soft: #D1FAE5;
    --c-primary-pastel:#34D399;  /* accents clairs sur fonds sombres (stats hero, barre plan) */
    --c-primary-rgb:  5,150,105; /* pour les ombres rgba(var(--c-primary-rgb), .35) */
    /* Dégradé radial des heros + eyebrow (surchargés par le thème du compte) */
    --hero-a:         #0B5B43;
    --hero-b:         #073C2C;
    --hero-c:         #052A1F;
    --hero-eyebrow:   #A7F3D0;
    --c-teal:         #14B8A6;
    --c-teal-soft:    #CCFBF1;
    --c-success-soft: #E7F6EC;
    --c-accent:       #EA580C;   /* orange : 1 action « créer » par écran */
    --c-accent-dark:  #C2410C;
    --c-ink:          #0A1A14;
    --c-muted:        #5C6B64;   /* alias attendu par de nombreux composants (recherche, plan, captions…) */
    --c-text:         #1F2A24;   /* texte courant (tableaux…) */
    --c-danger:       #DC2626;   /* rouge : logout, suppression, widget de veille */

    --font-title:'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body: 'Nunito', system-ui, sans-serif;
}

/* --- 1. Typographie de marque --------------------------------------------- */
body { font-family: var(--font-body); }

h1, h2, h3, h4,
.wp-heading-inline,
.dashboard-welcome h2,
.btn-primary, .btn-secondary, .btn-danger-outline,
.ab-left a, .ab-add-btn, .user-profile,
#admin-sidebar .sidebar-item > a,
#admin-sidebar .sidebar-section-toggle {
    font-family: var(--font-title);
}

/* --- 2. Topbar : passage au blanc ----------------------------------------- */
#wp-admin-bar {
    background: #fff !important;
    color: var(--c-ink);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(10, 26, 20, .05);
}
.ab-left a { color: var(--c-ink); }

.notification-icon { color: var(--color-muted); }
.notification-icon:hover { color: var(--c-primary); opacity: 1; }

.user-profile { color: var(--c-ink); }
.user-avatar {
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-bright));
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--color-border);
}
.logout-link { color: var(--color-muted) !important; }
.logout-link:hover { color: var(--wp-red) !important; }

/* Sélecteur de langue (était en thème foncé) → thème clair */
#wp-admin-bar .lang-switcher__current {
    background: var(--wp-gray-bg);
    border: 1px solid var(--color-border);
    color: var(--c-ink);
}
#wp-admin-bar .lang-switcher__current:hover { background: #E9F4EE; }
#wp-admin-bar .lang-switcher__caret { border-top-color: var(--color-muted); }
#wp-admin-bar .lang-flag { box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }

/* Bouton Support (défini en <style> inline dans header.php → !important requis) */
.support-trigger {
    background: var(--c-primary-soft) !important;
    border: 1px solid var(--c-primary-soft) !important;
    color: var(--c-primary-dark) !important;
}
.support-trigger:hover { background: #BBF0D5 !important; color: var(--c-primary-dark) !important; }

/* Menu rapide « + Ajouter » → accent orange (l'unique action orange par écran) */
.ab-add-btn { background: var(--c-accent) !important; }
.ab-add-btn:hover { background: var(--c-accent-dark) !important; }
.ab-add-menu a:hover { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.ab-add-menu a:hover .ab-add-ic { color: var(--c-primary); }

/* Topbar façon maquette : recherche centrale + menu compte (avatar) */
.ab-search { position: relative; flex: 1 1 auto; max-width: 440px; margin: 0 24px; display: flex; align-items: center; gap: 9px; background: var(--wp-gray-bg); border: 1px solid var(--color-border); border-radius: 11px; padding: 8px 14px; color: #8A988F; }
.ab-search:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(5, 150, 105, .12); }
/* Résultats de la recherche globale (dropdown) */
.ab-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: none; max-height: 60vh; overflow-y: auto; z-index: 100001; }
.ab-search-results.open { display: block; }
.ab-search-results .asr-group { font-family: var(--font-title); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #94A3B8; padding: 8px 12px 4px; }
.ab-search-results .asr-item { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: var(--c-ink); }
.ab-search-results .asr-item:hover, .ab-search-results .asr-item.is-active { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.ab-search-results .asr-label { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-search-results .asr-sub { margin-left: auto; font-family: ui-monospace, monospace; font-size: 12px; color: var(--c-muted); }
.ab-search-results .asr-empty { padding: 14px 12px; color: var(--c-muted); font-size: 14px; text-align: center; }
.ab-search svg { stroke: #8A988F; flex: none; }
.ab-search input { border: 0; outline: 0; background: transparent; width: 100%; font: inherit; font-size: 14px; color: var(--c-ink); }

.ab-user { position: relative; }
.ab-user-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--wp-gray-bg); border: 1px solid var(--color-border); border-radius: 30px; padding: 4px 12px 4px 4px; cursor: pointer; color: var(--c-ink); }
.ab-user-btn:hover { border-color: var(--c-primary); }
.ab-user-btn .user-avatar { width: 30px; height: 30px; font-size: 12px; }
.ab-user-name { font-family: var(--font-title); font-weight: 600; font-size: 13.5px; }
.ab-user-caret { color: var(--c-muted); font-size: 11px; }
.ab-user-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; background: #fff; border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: none; z-index: 100000; }
.ab-user.is-open .ab-user-menu { display: block; }
.ab-user-head { padding: 8px 12px; font-size: 12.5px; color: var(--c-muted); border-bottom: 1px solid var(--color-border); margin-bottom: 4px; }
.ab-user-menu a, .ab-user-logout { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; color: var(--c-ink); font-family: var(--font-body); font-size: 14px; background: transparent; border: 0; cursor: pointer; text-decoration: none; }
.ab-user-menu a:hover, .ab-user-logout:hover { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.ab-user-logout { color: var(--c-danger); font-weight: 700; }
.ab-user-review { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; }
.ab-review-pill { flex: 0 0 auto; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.ab-review-pill--pending { background: #fef3c7; color: #92400e; }
.ab-review-pill--approved { background: #dcfce7; color: #166534; }
.ab-user-lang { padding: 6px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin: 4px 0; }

@media (max-width: 980px) { .ab-search { display: none; } }
@media (max-width: 768px) { .support-trigger__label { display: none; } .ab-user-name { display: none; } }

/* --- 3. Sidebar : passage au blanc ---------------------------------------- */
#admin-sidebar {
    background: #fff;
    border-right: 1px solid var(--color-border);
}
#admin-sidebar li a,
#admin-sidebar .sidebar-item > a { color: var(--c-ink); }

/* Items en pastilles flottantes (façon maquette) */
#admin-sidebar .sidebar-item > a { border-radius: 12px; margin: 2px 8px; transition: background .15s, color .15s, box-shadow .15s; }
#admin-sidebar .sidebar-item > a:hover {
    background: var(--c-primary-soft);
    color: var(--c-primary-dark);
}
#admin-sidebar .sidebar-item > a:hover svg { opacity: 1; }

/* Item actif (1er niveau) : pastille verte GLOSSY (dégradé + reflet + ombre) */
#admin-sidebar .sidebar-item.is-active > a {
    background: linear-gradient(135deg, var(--c-primary-bright) 0%, var(--c-primary) 55%, var(--c-primary-dark) 100%);
    color: #fff;
    border-right: 0;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(var(--c-primary-rgb), .35), inset 0 1px 0 rgba(255, 255, 255, .28);
}
#admin-sidebar .sidebar-item.is-active > a svg { opacity: 1; }

#admin-sidebar .sidebar-separator { background: var(--color-border); }

/* En-têtes de section */
#admin-sidebar .sidebar-section-toggle { color: var(--color-muted); }
#admin-sidebar .sidebar-section-toggle:hover {
    background: var(--c-primary-soft);
    color: var(--c-primary-dark);
}
#admin-sidebar .sidebar-section.is-open .sidebar-section-toggle {
    color: var(--c-primary-dark);
    background: transparent;
}
/* Icône de section (désormais SVG) */
#admin-sidebar .sidebar-section-icon { display: inline-flex; align-items: center; }
#admin-sidebar .sidebar-section-icon svg { width: 17px; height: 17px; }

/* Items dans une section */
#admin-sidebar .sidebar-section-items { background: #F7FBF9; }
#admin-sidebar .sidebar-section-items .sidebar-item > a { color: var(--c-ink); }
#admin-sidebar .sidebar-section-items .sidebar-item > a:hover {
    background: var(--c-primary-soft);
    color: var(--c-primary-dark);
}
#admin-sidebar .sidebar-section-items .sidebar-item.is-active > a {
    background: var(--c-primary-soft);
    color: var(--c-primary-dark);
    border-right: 3px solid var(--c-primary);
    font-weight: 700;
}

/* Bandeau Manager */
#admin-sidebar .sidebar-manager-banner > a { background: var(--c-primary); color: #fff; }

/* Carte « Plan » en bas de la sidebar (épinglée en bas) */
#admin-sidebar { display: flex; flex-direction: column; }
#admin-sidebar .sidebar-menu { flex: 0 0 auto; }
/* Promo « 1 mois Premium offert » — juste au-dessus de la carte Plan.
   margin-top:auto = c'est elle qui pousse le bloc bas quand elle est présente
   (sinon .sidebar-plan garde son propre margin-top:auto). */
.sidebar-promo { margin: auto 12px 0; background: linear-gradient(150deg, #92400E 0%, #B45309 55%, #D97706 100%); border: 1px solid #92400E; border-radius: 14px; padding: 13px 15px; position: relative; overflow: hidden; box-shadow: 0 10px 26px rgba(217, 119, 6, .22); }
.sidebar-promo::after { content: ""; position: absolute; right: -26px; top: -32px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, rgba(253, 230, 138, .38), transparent 70%); pointer-events: none; }
.sidebar-promo__badge { position: relative; z-index: 1; display: block; font-family: var(--font-title); font-weight: 800; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: #FDE68A; }
.sidebar-promo__body { position: relative; z-index: 1; margin: 7px 0 10px; color: #FEF3C7; font-size: 12.5px; line-height: 1.45; }
.sidebar-promo__cta { position: relative; z-index: 1; display: block; width: 100%; border: 0; border-radius: 10px; padding: 9px 12px; font-family: var(--font-title); font-weight: 800; font-size: 13px; color: #78350F; background: #FDE68A; cursor: pointer; transition: transform .12s, background .15s; }
.sidebar-promo__cta:hover { background: #FEF3C7; transform: translateY(-1px); }
.sidebar-promo__cta[disabled] { opacity: .6; cursor: progress; transform: none; }
.sidebar-promo--active { background: linear-gradient(150deg, #1E3A8A 0%, #1D4ED8 60%, #2563EB 100%); border-color: #1E3A8A; box-shadow: 0 10px 26px rgba(37, 99, 235, .22); }
.sidebar-promo--active .sidebar-promo__badge { color: #BFDBFE; text-transform: none; letter-spacing: 0; }
.sidebar-promo__keep { position: relative; z-index: 1; display: inline-block; margin-top: 8px; font-family: var(--font-title); font-weight: 700; font-size: 13px; color: #fff; text-decoration: none; }
.sidebar-promo__keep:hover { color: #BFDBFE; text-decoration: underline; }

/* Modale d'activation de l'essai Premium */
.trial-modal { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(8, 25, 18, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.trial-modal.is-open { display: flex; }
.trial-modal__box { position: relative; width: 100%; max-width: 440px; background: #fff; border-radius: 20px; padding: 30px 28px 24px; text-align: center; box-shadow: 0 30px 80px rgba(6, 45, 30, .4); animation: trialPop .18s ease-out; }
@keyframes trialPop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.trial-modal__close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid #E7ECF6; background: #F7FAFC; color: #64748b; display: grid; place-items: center; cursor: pointer; }
.trial-modal__close:hover { background: #EEF1F7; color: #0f172a; }
.trial-modal__close svg { width: 16px; height: 16px; }
.trial-modal__ico { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; font-size: 30px; background: linear-gradient(135deg, #FDE68A, #F59E0B); box-shadow: 0 12px 26px rgba(217, 119, 6, .35); margin-bottom: 14px; }
.trial-modal__title { margin: 0 0 8px; font-family: var(--font-title); font-weight: 800; font-size: 1.3rem; color: #0f172a; }
.trial-modal__body { margin: 0 0 16px; color: #475569; font-size: .95rem; line-height: 1.5; }
.trial-modal__note { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: #FFFBEB; border: 1px solid #FCD34D; border-radius: 12px; padding: 11px 13px; color: #92400E; font-size: .84rem; line-height: 1.5; margin-bottom: 20px; }
.trial-modal__note svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.trial-modal__actions { display: flex; gap: 10px; }
.trial-modal__btn { flex: 1; border: 0; border-radius: 12px; padding: 13px 14px; font-family: var(--font-title); font-weight: 800; font-size: .95rem; cursor: pointer; transition: transform .12s, background .15s; }
.trial-modal__btn--ghost { background: #EEF1F7; color: #334155; }
.trial-modal__btn--ghost:hover { background: #E2E8F0; }
.trial-modal__btn--go { color: #78350F; background: linear-gradient(135deg, #FDE68A, #F59E0B); box-shadow: 0 10px 22px rgba(217, 119, 6, .32); }
.trial-modal__btn--go:hover { transform: translateY(-1px); }
.trial-modal__btn--go[disabled] { opacity: .65; cursor: progress; transform: none; }

.sidebar-plan { margin: 16px 12px 14px; margin-top: auto; background: linear-gradient(150deg, var(--hero-b) 0%, var(--c-primary-dark) 55%, var(--c-primary) 100%); border: 1px solid var(--hero-b); border-radius: 14px; padding: 14px 15px; position: relative; overflow: hidden; box-shadow: 0 10px 26px rgba(var(--c-primary-rgb), .18); }
/* ~ et non + : un <script> est intercalé entre la promo et la carte Plan */
.sidebar-promo ~ .sidebar-plan { margin-top: 10px; }
.sidebar-plan::after { content: ""; position: absolute; right: -26px; top: -32px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(52, 211, 153, .42), transparent 70%); pointer-events: none; }
.sidebar-plan__eyebrow { position: relative; z-index: 1; display: block; font-family: var(--font-title); font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #6EE7B7; }
.sidebar-plan__usage { position: relative; z-index: 1; display: block; margin-top: 6px; color: #D1FAE5; font-size: 13px; font-weight: 600; }
.sidebar-plan__bar { position: relative; z-index: 1; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .18); margin-top: 9px; overflow: hidden; }
.sidebar-plan__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-primary-pastel), var(--c-primary-soft)); transition: width .4s ease; }
.sidebar-plan__link { position: relative; z-index: 1; display: inline-block; margin-top: 11px; font-family: var(--font-title); font-weight: 700; font-size: 13px; color: #fff; text-decoration: none; }
.sidebar-plan__link:hover { color: #D1FAE5; text-decoration: underline; }

/* --- 4. Boutons ------------------------------------------------------------ */
.btn-primary {
    background: var(--c-primary);
    border: 1px solid var(--c-primary);
    color: #fff;
    border-radius: 10px;
}
.btn-primary:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: #fff; }

.btn-secondary {
    background: #fff;
    border: 1px solid var(--c-primary);
    color: var(--c-primary-dark);
    border-radius: 10px;
}
.btn-secondary:hover { background: var(--c-primary-soft); color: var(--c-primary-dark); }

.btn-danger-outline { border-radius: 10px; }

/* --- 5. Cartes, champs, en-têtes ------------------------------------------ */
.wp-card,
.dashboard-tool-card,
.grid-stack-item-content {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(5, 150, 105, .06);
}
.dashboard-tool-card:hover { box-shadow: 0 12px 30px rgba(5, 150, 105, .12); }

.dashboard-welcome {
    border-left: 4px solid var(--c-primary);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(5, 150, 105, .06);
}
.dashboard-welcome h2 { color: var(--c-ink); }

.wp-heading-inline { color: var(--c-ink); font-weight: 800; }

.wp-container input:focus,
.wp-container select:focus,
select:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, .15);
}

/* --- 6. Petites cohérences ------------------------------------------------- */
.notif-unread { background: #ECFDF3; border-left-color: var(--c-primary); }
.dot-online, .badge-count { /* gardent leurs couleurs sémantiques */ }

/* --- 6b. Dashboard : accueil épuré (greeting + raccourcis, façon maquette) -- */
.edu-greet { position: relative; margin: 4px 0 26px; }
.edu-greet__title { font-family: var(--font-title); font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; color: var(--c-ink); margin: 0 0 5px; }
.edu-greet__sub { color: var(--c-muted); margin: 6px 0 0; font-size: 1rem; }
.edu-greet__helpers { position: absolute; top: 0; right: 0; display: flex; gap: 8px; }

.section-title-2 { font-family: var(--font-title); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #94A3B8; margin: 6px 0 14px; }
.dash-shortcuts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 30px; }
.dash-sc { display: block; background: #fff; border: 1px solid var(--color-border); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-md); transition: transform .15s, box-shadow .15s, border-color .15s; text-decoration: none; color: inherit; }
.dash-sc:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--c-primary); }
.dash-sc__ico { width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.dash-sc__ico svg { width: 23px; height: 23px; }
/* Pastilles d'icônes : dégradé doux (glossy) + teintes distinctes (émeraude / teal / lime / vert vif) */
.dash-sc.i1 .dash-sc__ico { background: linear-gradient(135deg, var(--c-primary-soft), var(--c-primary-pastel)); } .dash-sc.i1 .dash-sc__ico svg { stroke: var(--c-primary); }
.dash-sc.i2 .dash-sc__ico { background: linear-gradient(135deg, #CCFBF1, #99F6E4); } .dash-sc.i2 .dash-sc__ico svg { stroke: #0D9488; }
.dash-sc.i3 .dash-sc__ico { background: linear-gradient(135deg, #ECFCCB, #D9F99D); } .dash-sc.i3 .dash-sc__ico svg { stroke: #65A30D; }
.dash-sc.i4 .dash-sc__ico { background: linear-gradient(135deg, var(--c-primary-soft), var(--c-primary-pastel)); } .dash-sc.i4 .dash-sc__ico svg { stroke: var(--c-primary-bright); }
.dash-sc b { font-family: var(--font-title); display: block; font-size: 15px; font-weight: 700; color: var(--c-ink); }
.dash-sc small { color: var(--c-muted); font-size: 13px; }
@media (max-width: 880px) { .dash-shortcuts { grid-template-columns: 1fr 1fr; } }

/* --- 7. Dashboard : panneau « Statistiques détaillées » repliable (Phase 2) - */
.stats-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0 14px; }
.stats-head__title { font-family: var(--font-title); font-size: 1.05rem; font-weight: 800; color: var(--c-ink); margin: 0; }
.stats-toggle {
    display: inline-flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
    padding: 10px 16px; font-family: var(--font-title); font-weight: 700; font-size: .92rem;
    color: var(--c-ink); cursor: pointer; box-shadow: 0 1px 2px rgba(10, 26, 20, .04);
}
.stats-toggle:hover { border-color: var(--c-primary); }
.stats-toggle > svg { stroke: var(--c-primary); flex: none; }
.stats-toggle__hint { color: var(--c-muted); font-weight: 500; }
.stats-toggle__chev { transition: transform .2s; stroke: var(--c-muted) !important; }
.stats-toggle.open .stats-toggle__chev { transform: rotate(180deg); }
@media (max-width: 600px) { .stats-toggle__hint { display: none; } }

/* --- 8. Menu « + Ajouter » : entrée « Créer une salle » + séparateur -------- */
.ab-add-sep { height: 1px; background: var(--color-border); margin: 5px 6px; }
.ab-add-room strong { font-family: var(--font-title); }

/* --- 9. Modale « Créer une salle » (Phase 4 — activation) ------------------- */
.ecr-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ecr-modal[hidden] { display: none; }
.ecr-modal__overlay { position: absolute; inset: 0; background: rgba(10, 26, 20, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ecr-modal__card { position: relative; background: #fff; color: var(--c-ink); width: 100%; max-width: 460px; border-radius: 16px; box-shadow: 0 20px 60px rgba(10, 26, 20, .35); padding: 26px 28px; font-family: var(--font-body); }
.ecr-modal__close { position: absolute; top: 10px; right: 14px; background: transparent; border: none; font-size: 1.6rem; line-height: 1; color: var(--c-muted); cursor: pointer; }
.ecr-modal__close:hover { color: var(--c-ink); }
.ecr-modal__title { font-family: var(--font-title); margin: 0 0 4px; font-size: 1.25rem; font-weight: 800; color: var(--c-ink); }
.ecr-modal__sub { margin: 0 0 18px; font-size: .9rem; color: var(--c-muted); }
.ecr-label { font-family: var(--font-title); display: block; font-weight: 700; font-size: .84rem; margin-bottom: 7px; color: var(--c-ink); }
#ecr-form input[type="text"], #ecr-form input[type="number"], #ecr-form select { width: 100%; border: 1.5px solid var(--c-edge-strong, #C8EAD9); border-radius: 11px; padding: 11px 13px; font: inherit; font-size: .98rem; outline: 0; box-sizing: border-box; background: #fff; color: var(--c-ink); }
#ecr-form input:focus, #ecr-form select:focus { border-color: var(--c-primary); box-shadow: 0 0 0 4px rgba(5, 150, 105, .14); }
.ecr-code { margin-top: 7px; width: 100%; box-sizing: border-box; background: var(--c-primary-soft); border: 1px dashed var(--c-edge-strong, #C8EAD9); border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; gap: 8px; font-family: ui-monospace, monospace; font-weight: 700; color: var(--c-primary-dark); transition: border-color .15s, box-shadow .15s; }
.ecr-code svg { stroke: var(--c-primary-dark); flex: 0 0 auto; }
#ecr-form .ecr-code input { flex: 1; width: auto; min-width: 0; border: 0; padding: 0; margin: 0; border-radius: 0; background: transparent; font: inherit; font-family: ui-monospace, monospace; font-weight: 700; color: inherit; letter-spacing: .03em; text-transform: uppercase; }
#ecr-form .ecr-code input:focus { outline: none; box-shadow: none; }
#ecr-form .ecr-code input::placeholder { color: var(--c-primary-dark); opacity: .4; }
.ecr-code:focus-within { border-style: solid; border-color: var(--c-primary); box-shadow: 0 0 0 4px rgba(5, 150, 105, .14); }
/* Suggestions de code de salle : puces cliquables au-dessus du champ.
   Le code est dicté à l'oral → on privilégie des propositions courtes. */
.ecr-sugg { display: flex; flex-wrap: wrap; gap: 7px; margin: 7px 0 0; min-height: 30px; align-items: center; }
.ecr-sugg__label { font-size: .76rem; color: var(--c-muted, #64748b); margin-right: 2px; }
.ecr-sugg__chip { font-family: ui-monospace, monospace; font-weight: 700; font-size: .8rem; letter-spacing: .03em;
    background: var(--c-primary-soft); color: var(--c-primary-dark); border: 1px solid var(--c-edge-strong, #C8EAD9);
    border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; }
.ecr-sugg__chip:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.ecr-sugg__chip:active { transform: scale(.96); }
.ecr-sugg__chip.is-on { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* Le champ code est en majuscules + interlettrage (c'est un code qu'on dicte),
   mais son PLACEHOLDER est une phrase : sans ce reset il s'affiche en capitales
   espacées (« ENTREZ VOTRE CODE… »), ce qui crie et déborde sur petit écran. */
#ecr-code-input::placeholder {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    text-align: left;
}
.ecr-code-hint { margin: 6px 2px 0; font-size: .78rem; color: var(--c-muted, #64748b); line-height: 1.45; }
.ecr-adv { display: inline-block; margin-top: 14px; background: transparent; border: 0; padding: 0; font-family: var(--font-title); font-weight: 700; font-size: .84rem; color: var(--c-primary); cursor: pointer; }
.ecr-adv:hover { text-decoration: underline; }
.ecr-adv-body { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.ecr-feedback { margin-top: 14px; padding: 9px 12px; border-radius: 9px; font-size: .88rem; line-height: 1.4; }
.ecr-feedback.is-error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.ecr-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.ecr-actions .btn-primary, .ecr-actions .btn-secondary { height: auto; padding: 11px 20px; border-radius: 11px; font-family: var(--font-title); font-weight: 700; }

/* --- 10. Navigation mobile : sidebar en tiroir (off-canvas) ---------------- */
.edu-burger { display: none; background: transparent; border: 0; color: var(--c-ink); cursor: pointer; padding: 6px; margin-right: 4px; border-radius: 8px; align-items: center; }
.edu-burger:hover { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.edu-nav-scrim { display: none; }

@media (max-width: 768px) {
    .edu-burger { display: inline-flex; }
    #admin-sidebar {
        position: fixed; top: 46px; bottom: 0; left: 0; width: 264px; max-width: 82vw;
        z-index: 9998; transform: translateX(-100%); transition: transform .25s ease;
        box-shadow: 0 12px 40px rgba(10, 26, 20, .28); overflow-y: auto;
    }
    body.edu-nav-open #admin-sidebar { transform: translateX(0); }
    .edu-nav-scrim { position: fixed; top: 46px; left: 0; right: 0; bottom: 0; background: rgba(10, 26, 20, .45); z-index: 9997; }
    body:not(.edu-nav-open) .edu-nav-scrim { display: none; }
    body.edu-nav-open .edu-nav-scrim { display: block; }
    #admin-content { padding-left: 16px; padding-right: 16px; }
}

/* --- 11. Widgets du tableau de bord (GridStack) au nouveau design ---------- */
.grid-stack-item-content, .admin-card {
    border: 1px solid var(--color-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-md) !important;
}
.widget-header { background: #fff; border-bottom: 1px solid var(--color-border); padding: 14px 16px; }
.widget-title { font-family: var(--font-title); font-weight: 700; color: var(--c-ink); font-size: .98rem; }
.widget-controls button { color: var(--c-muted); border-radius: 8px; }
.widget-controls button:hover { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.btn-close { font-size: 1.05rem; line-height: 1; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.widget-controls .btn-close:hover { background: #FEF2F2; color: var(--c-danger); }
.grid-stack-item .ui-resizable-se::after { color: var(--c-primary) !important; }
.grid-stack-item:hover .ui-resizable-se::after { color: var(--c-primary-dark) !important; }
.admin-select { border: 1px solid var(--color-border); border-radius: 10px; color: var(--c-ink); }
.admin-select:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(5, 150, 105, .15); }

/* Tableaux internes des widgets */
.data-table th { font-family: var(--font-title); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; color: var(--c-muted); border-bottom: 1px solid var(--color-border); background: transparent; }
.data-table td { border-bottom: 1px solid var(--color-border); color: var(--c-text); }
.data-table tr:hover { background: var(--wp-gray-bg); }
.data-table a { color: var(--c-primary-dark); font-weight: 600; }

/* --- Listes d'activités : skin émeraude harmonisé (pages en wp-list-table) ------
   Étend le look de .data-table aux pages de gestion (quiz, flashcards, kanbans…).
   Le cadre/rayon/ombre vient du .wp-card parent → le tableau est sans bordure. */
table.wp-list-table { border: 0; margin-top: 0; background: transparent; }
table.wp-list-table th {
    font-family: var(--font-title); font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; font-size: .72rem; color: var(--c-muted);
    background: var(--wp-gray-bg); border-bottom: 1px solid var(--color-border);
    padding: 12px 14px;
}
table.wp-list-table td {
    border-bottom: 1px solid var(--color-border); color: var(--c-text);
    padding: 12px 14px; font-size: .9rem; vertical-align: middle;
}
table.wp-list-table tbody tr:last-child td { border-bottom: 0; }
table.wp-list-table tbody tr:hover { background: var(--wp-gray-bg); }
table.wp-list-table td a:not(.btn-primary):not(.btn-secondary):not(.icon-btn):not(.btn-pill-green):not(.btn-pill-red) {
    color: var(--c-primary-dark); font-weight: 600;
}

/* Badge de comptage neutre (remplace les nombres bleus codés en dur) */
.count-badge {
    display: inline-block; min-width: 26px; padding: 2px 9px; border-radius: 999px;
    background: var(--c-primary-soft); color: var(--c-primary-dark);
    font-family: var(--font-title); font-weight: 700; font-size: .8rem; text-align: center;
}

/* Puce de salle (.tag-group) : bleu WordPress → vert émeraude */
.tag-group { background: var(--c-primary-soft) !important; color: var(--c-primary-dark) !important; font-weight: 700; }

/* ==================================================================
   COMPOSANT « LISTE » — nouveau style, pleine largeur (réutilisable)
   Toolbar (titre + recherche + créer) · surface carte · tableau moderne.
   Utilisé par les pages de gestion (quiz, flashcards, kanbans…).
   ================================================================== */
.edu-list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 0 0 22px; }
.edu-list-head__titles h1,
.edu-list-head__titles .wp-heading-inline { font-family: var(--font-title); font-weight: 800; font-size: 1.7rem; color: var(--c-ink); margin: 0; letter-spacing: -.01em; }
.edu-list-head__sub { color: var(--c-muted); font-size: .95rem; margin: 5px 0 0; }
.edu-list-head__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.edu-list-search { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 10px 14px; min-width: 230px; color: #8A988F; transition: border-color .15s, box-shadow .15s; }
.edu-list-search:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(5,150,105,.14); }
.edu-list-search svg { stroke: #8A988F; flex: none; }
.edu-list-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: .93rem; color: var(--c-ink); width: 100%; }

/* Débride la largeur de lecture sur les pages de liste : pleine largeur même
   sur écrans ≥1921px (annule le plafond .wp-container max-width:2800px du 4K). */
.wp-container.edu-wide { max-width: none; margin: 0; width: 100%; }

/* Surface pleine largeur qui porte le cadre/rayon/ombre */
.edu-surface { width: 100%; background: #fff; border: 1px solid var(--color-border); border-radius: 18px; box-shadow: 0 6px 24px rgba(5,150,105,.06); overflow: hidden; }
.edu-surface--scroll { overflow-x: auto; }

/* Tableau moderne pleine largeur */
.edu-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.edu-table thead th { position: sticky; top: 0; z-index: 2; background: var(--wp-gray-bg); font-family: var(--font-title); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; color: var(--c-muted); text-align: left; padding: 15px 22px; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.edu-table tbody td { padding: 15px 22px; border-bottom: 1px solid #EEF4F1; color: var(--c-text); font-size: .92rem; vertical-align: middle; }
.edu-table tbody tr:last-child td { border-bottom: 0; }
.edu-table tbody tr { transition: background .14s; }
.edu-table tbody tr:hover { background: var(--c-success-soft, #E7F6EC); }
.edu-table__num { text-align: center; }
.edu-table__right { text-align: right; }

/* Cellule « identité » : pastille d'icône + titre + sous-texte */
.edu-cell-id { display: flex; align-items: center; gap: 13px; }
.edu-cell-id__ico { width: 42px; height: 42px; border-radius: 12px; background: var(--c-primary-soft); color: var(--c-primary); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.edu-cell-id__ico svg { width: 22px; height: 22px; }
.edu-cell-id__main { min-width: 0; }
.edu-cell-id__title { font-family: var(--font-title); font-weight: 700; font-size: .97rem; color: var(--c-ink); line-height: 1.25; }
.edu-cell-id__sub { color: var(--c-muted); font-size: .82rem; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }

/* Statut : point coloré + libellé */
.edu-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .85rem; }
.edu-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.edu-status.is-on   { color: var(--c-primary-dark); }
.edu-status.is-off  { color: var(--c-muted); }
.edu-status.is-live { color: var(--c-primary); }
.edu-status.is-done { color: var(--c-danger); }

/* Cluster d'actions aligné à droite */
.edu-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; }
.edu-actions .icon-btn { border-color: var(--color-border); color: var(--c-muted); }
.edu-actions .icon-btn:hover { border-color: var(--c-primary); color: var(--c-primary-dark); background: var(--c-primary-soft); }
.edu-actions .icon-btn.delete:hover { border-color: var(--c-danger); color: var(--c-danger); background: #FBEAEA; }

/* Ligne vide (aucun résultat de recherche) */
.edu-table__empty td { text-align: center; color: var(--c-muted); padding: 34px 20px; }

@media (max-width: 720px) {
    .edu-list-head { align-items: stretch; }
    .edu-list-head__actions { width: 100%; }
    .edu-list-search { flex: 1; }
    .edu-cell-id__sub { max-width: 160px; }
}

/* ==================================================================
   COMPOSANT « ESPACE-LISTE » — hero + filtres matière + grille cartes
   Couleur de matière injectée par carte via --sc (couleur) / --ss (soft).
   ================================================================== */
/* Hero */
.list-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 32px 34px; margin: 0 0 22px; color: #fff;
    background: radial-gradient(130% 150% at 88% 0%, var(--hero-a) 0%, var(--hero-b) 52%, var(--hero-c) 100%); }
.list-hero__eyebrow { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.20); color: var(--hero-eyebrow); font-family: var(--font-title); font-weight: 700; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.list-hero__title { font-family: var(--font-title); font-weight: 800; font-size: 2rem; margin: 14px 0 7px; letter-spacing: -.02em; }
.list-hero__sub { color: rgba(255,255,255,.80); font-size: .98rem; max-width: 520px; line-height: 1.5; margin: 0 0 20px; }
.list-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.list-hero__actions .btn-primary { background: var(--c-primary-bright); border-color: var(--c-primary-bright); box-shadow: 0 6px 18px rgba(var(--c-primary-rgb),.3); }
.list-hero__ghost { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.24); color: #fff; border-radius: 12px; padding: 10px 18px; font-family: var(--font-title); font-weight: 700; font-size: .9rem; text-decoration: none; transition: background .15s; }
.list-hero__ghost:hover { background: rgba(255,255,255,.18); }
.list-hero__ghost svg { width: 17px; height: 17px; }
/* Actions du hero : taille IDENTIQUE pour tous les boutons (primaire, ghost, visite
   guidée). Les sélecteurs à 2 classes priment sur .btn-primary / .tour-launch-btn de base. */
.list-hero__actions .btn-primary,
.list-hero__actions .list-hero__ghost,
.list-hero__actions .tour-launch-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: auto; padding: 11px 20px; border-radius: 12px; box-sizing: border-box;
    font-family: var(--font-title); font-weight: 700; font-size: .92rem; line-height: 1.15;
}
/* Le bouton "Visite guidée" prend le look ghost translucide du hero */
.list-hero__actions .tour-launch-btn {
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.24); color: #fff;
}
.list-hero__actions .tour-launch-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
.list-hero__actions .tour-launch-btn svg { width: 17px; height: 17px; }
/* Bouton "?" (relancer l'onboarding) dans le hero : pastille ghost assortie */
.list-hero__actions .onboarding-reopen {
    width: 42px; height: 42px; padding: 0; border-radius: 12px; flex: none;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.24); color: #fff;
    font-family: var(--font-title); font-weight: 800; font-size: 1rem; cursor: pointer;
}
.list-hero__actions .onboarding-reopen:hover { background: rgba(255,255,255,.18); }
/* Puce (ex. établissement) dans le sous-titre du hero */
.list-hero__chip { display: inline-flex; align-items: center; gap: 7px; margin-left: 10px; vertical-align: middle;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #fff;
    padding: 4px 12px; border-radius: 999px; font-size: .82rem; white-space: nowrap; }
.list-hero__chip strong { color: #fff; }
.list-hero__stats { position: absolute; right: 34px; top: 50%; transform: translateY(-50%); display: flex; gap: 13px; }
.list-hero__stat { min-width: 96px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 16px 18px; }
.list-hero__stat b { display: block; font-family: var(--font-title); font-weight: 800; font-size: 1.75rem; line-height: 1; margin-bottom: 5px; }
.list-hero__stat span { color: rgba(255,255,255,.72); font-size: .8rem; }
.list-hero__stat--accent b { color: var(--c-primary-pastel); }
/* Variantes par groupe de la Bibliothèque : NEUTRALISÉES — tous les héros du
   back-office suivent désormais le thème choisi par le prof (--hero-a/b/c),
   comme le hero par défaut ci-dessus. Les classes restent dans le HTML. */
@media (max-width: 980px) { .list-hero__stats { position: static; transform: none; margin-top: 20px; } }
@media (max-width: 560px) { .list-hero { padding: 24px; } .list-hero__title { font-size: 1.6rem; } .list-hero__stat { min-width: 0; flex: 1; } }

/* Filtres par matière */
.subj-tabs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 20px; }
.subj-tab { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--color-border); color: var(--c-ink); border-radius: 999px; padding: 8px 15px; font-family: var(--font-title); font-weight: 700; font-size: .86rem; cursor: pointer; transition: all .15s; }
.subj-tab .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc, var(--c-primary)); }
.subj-tab .n { background: var(--wp-gray-bg); color: var(--c-muted); border-radius: 999px; padding: 1px 8px; font-size: .78rem; font-weight: 700; }
.subj-tab:hover { border-color: var(--c-ink); }
.subj-tab.is-on { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.subj-tab.is-on .dot { background: #fff; }
.subj-tab.is-on .n { background: rgba(255,255,255,.22); color: #fff; }
.subj-tabs__count { margin-left: auto; color: var(--c-muted); font-size: .88rem; }

/* Grille de cartes */
.quiz-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.qcard { position: relative; background: #fff; border: 1px solid var(--color-border); border-left: 4px solid var(--sc, var(--c-primary)); border-radius: 16px; padding: 18px; box-shadow: 0 4px 16px rgba(5,150,105,.05); display: flex; flex-direction: column; gap: 12px; transition: transform .15s, box-shadow .15s; }
.qcard:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(5,150,105,.12); }
.qcard[hidden] { display: none; }
.qcard__top { display: flex; align-items: center; gap: 11px; }
.qcard__ico { width: 40px; height: 40px; border-radius: 11px; background: var(--ss, var(--c-primary-soft)); color: var(--sc, var(--c-primary)); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.qcard__ico svg { width: 21px; height: 21px; }
.qcard__subj { font-family: var(--font-title); font-weight: 800; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--sc, var(--c-primary)); }
.qcard__tr { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.qcard__share { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--color-border); background: #fff; color: var(--c-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: border-color .15s, color .15s; }
.qcard__share:hover { border-color: var(--c-primary); color: var(--c-primary-dark); }
.qcard__share svg { width: 18px; height: 18px; }
.qcard__vis { display: inline-flex; align-items: center; gap: 8px; }
.qcard__vis-label { font-size: .78rem; font-weight: 600; color: var(--c-muted); }
.qcard__title { font-family: var(--font-title); font-weight: 700; font-size: 1.02rem; color: var(--c-ink); line-height: 1.3; margin: 0; }
.qcard__desc { color: var(--c-muted); font-size: .86rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qcard__room { display: inline-flex; align-items: center; gap: 6px; background: var(--ss, var(--c-primary-soft)); color: var(--sc, var(--c-primary)); border-radius: 8px; padding: 6px 11px; font-size: .8rem; font-weight: 600; align-self: flex-start; max-width: 100%; }
.qcard__room svg { width: 14px; height: 14px; flex: none; }
.qcard__room span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qcard__draft { display: inline-flex; align-items: center; gap: 6px; color: var(--c-muted); font-style: italic; font-size: .82rem; align-self: flex-start; background: var(--wp-gray-bg); border-radius: 8px; padding: 6px 11px; }
.qcard__foot { display: flex; align-items: center; gap: 13px; border-top: 1px solid #EEF4F1; padding-top: 13px; margin-top: auto; }
.qcard__count { text-align: center; line-height: 1; }
.qcard__count b { display: block; font-family: var(--font-title); font-weight: 800; color: var(--sc, var(--c-primary)); font-size: 1.05rem; }
.qcard__count span { font-size: .58rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); }
.qcard__date { color: var(--c-muted); font-size: .82rem; display: inline-flex; align-items: center; gap: 5px; }
.qcard__date svg { width: 14px; height: 14px; }
.qcard__cta { margin-left: auto; }
.qcard__cta.btn-primary { background: var(--c-ink); border-color: var(--c-ink); height: 34px; padding: 0 15px; font-size: .82rem; display: inline-flex; align-items: center; gap: 6px; }
.qcard__cta.btn-primary:hover { background: #000; }
.qcard__status { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .8rem; }
.qcard__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.qcard__status.is-live { color: var(--c-primary); }
.qcard__status.is-done { color: var(--c-danger); }
.qcard__status.is-wait { color: var(--c-muted); }
.quiz-cards__empty { grid-column: 1/-1; text-align: center; color: var(--c-muted); padding: 40px 10px; }

/* Pagination générique des pages de liste */
.edu-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 22px 0 4px; }
.edu-pager__btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 16px; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; color: var(--c-ink); font-family: var(--font-title); font-weight: 700; font-size: .85rem; text-decoration: none; transition: border-color .15s, color .15s; }
.edu-pager__btn:hover { border-color: var(--c-primary); color: var(--c-primary-dark); }
.edu-pager__btn.is-disabled { opacity: .45; pointer-events: none; }
.edu-pager__info { color: var(--c-muted); font-size: .88rem; font-weight: 600; }

/* Modale générique des pages de liste (création, assignation…) */
.edu-modal { display: none; position: fixed; inset: 0; background: rgba(10,26,20,.5); z-index: 9999; align-items: center; justify-content: center; padding: 20px; }
.edu-modal.open { display: flex; }
.edu-modal__box { background: #fff; width: 100%; max-width: 460px; border-radius: 16px; box-shadow: 0 20px 60px rgba(10,26,20,.3); padding: 24px; max-height: 90vh; overflow-y: auto; }
.edu-modal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.edu-modal__head h2 { font-family: var(--font-title); font-size: 1.15rem; margin: 0; color: var(--c-ink); }
.edu-modal__close { background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--c-muted); cursor: pointer; }
.qcard__rooms { display: flex; flex-wrap: wrap; gap: 6px; }

/* Sélecteur d'icône d'une matière (formulaires de quiz) */
.cat-icon-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-ico-opt { cursor: pointer; }
.cat-ico-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.cat-ico-opt span { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--color-border); border-radius: 10px; color: var(--c-muted); background: #fff; transition: border-color .15s, color .15s, background .15s; }
.cat-ico-opt span svg { width: 21px; height: 21px; }
.cat-ico-opt:hover span { border-color: var(--c-primary); color: var(--c-primary-dark); }
.cat-ico-opt input:checked + span { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary-dark); }
.cat-ico-opt input:focus-visible + span { box-shadow: 0 0 0 3px rgba(5,150,105,.2); }

/* Widget « Élèves à surveiller » : on garde le rouge sémantique mais adouci */
.widget-watch .widget-header, #widget-watch .widget-header { color: var(--c-danger); }

/* --- 12. Mes salles : vue cartes + onglets + recherche + pagination -------- */
.rooms-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 6px 0 18px; }
.rooms-tabs { display: inline-flex; background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 4px; gap: 3px; }
.rooms-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 9px; font-family: var(--font-title); font-weight: 700; font-size: .88rem; color: var(--c-muted); text-decoration: none; }
.rooms-tab:hover { color: var(--c-primary-dark); }
.rooms-tab.is-on { background: var(--c-primary); color: #fff; box-shadow: 0 4px 12px rgba(5, 150, 105, .28); }
.rooms-tab__count { background: rgba(255, 255, 255, .28); color: inherit; border-radius: 10px; padding: 1px 8px; font-size: .78rem; }
.rooms-tab:not(.is-on) .rooms-tab__count { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.rooms-toolbar__right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rooms-search { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--color-border); border-radius: 11px; padding: 9px 14px; min-width: 240px; color: #8A988F; }
.rooms-search svg { stroke: #8A988F; flex: none; }
.rooms-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--c-ink); width: 100%; }
.rooms-archive-expired { display: inline-flex; align-items: center; gap: 7px; height: auto; }
.rooms-archive-expired svg { width: 16px; height: 16px; stroke: currentColor; }

.room-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(390px, 1fr)); gap: 18px; }
.room-card { --rc: #10B981; --rc-soft: #D1FAE5; position: relative; background: #fff; border: 1px solid var(--color-border); border-radius: 20px; padding: 26px 22px 18px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 13px; transition: box-shadow .15s, border-color .15s, transform .15s; }
/* Liseret : coins arrondis propres (pas d'overflow:hidden, sinon le menu ⋯ est coupé) */
.room-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--rc); border-radius: 19px 19px 0 0; }
/* Carte dont le menu ⋯ est ouvert : au-dessus des cartes voisines */
.room-card:has(.kebab__menu.open) { z-index: 30; }
.room-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.room-card.is-expired { border-color: #FECACA; }
.room-card.is-expired::before { background: #EF4444; }
.room-card__head { display: flex; align-items: flex-start; gap: 12px; }
.room-card__ico { flex: none; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--rc), color-mix(in srgb, var(--rc) 72%, #000)); box-shadow: 0 8px 16px color-mix(in srgb, var(--rc) 35%, transparent); }
.room-card__ico svg { width: 24px; height: 24px; }
.room-card__title { font-family: var(--font-title); font-size: 1.15rem; font-weight: 800; color: var(--c-ink); margin: 4px 0 0; word-break: break-word; flex: 1; }
.room-card__tools { display: flex; align-items: center; gap: 7px; flex: none; }
.room-card__cog { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid var(--color-border); background: #fff; color: var(--c-muted); cursor: pointer; }
.room-card__cog:hover { border-color: var(--c-primary); color: var(--c-primary-dark); background: var(--c-primary-soft); }
.room-card__cog svg { width: 19px; height: 19px; stroke: currentColor; }
/* Bouton QR dédié : couleur primaire par défaut pour le rendre repérable
   à côté de la roue crantée (neutre). Même gabarit que .room-card__cog. */
.room-card__qr { color: var(--c-primary-dark); border-color: var(--c-primary-soft); background: var(--c-primary-soft); }
.room-card__qr:hover { border-color: var(--c-primary); background: var(--c-primary); color: #fff; }
.room-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Pastille « mode d'accès » d'une salle (cartes et liste). Reprend
   l'information que la page « Config. Salles » était seule à donner. */
.access-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    font-size: .74rem; font-weight: 600; white-space: nowrap;
}
.access-badge svg { width: 12px; height: 12px; flex: none; }
.access-badge--public            { background: #DCFCE7; color: #15803D; }
.access-badge--public_anonymous  { background: #E0E7FF; color: #4338CA; }
.access-badge--private_group     { background: #FEE2E2; color: #B91C1C; }
.access-badge--private_password  { background: #FEF3C7; color: #B45309; }

.room-card .code-badge { background: var(--rc-soft); color: var(--rc); border: 0; }
.room-card__quiz { background: #F1F5F9; color: #475569; border-radius: 999px; padding: 4px 12px; font-size: .82rem; font-weight: 600; }
.room-card__status { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--c-ink); flex-wrap: wrap; }
.room-card__status .st-dot { width: 9px; height: 9px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); flex: none; }
.room-card__status .st-dot--off { background: #CBD5E1; box-shadow: 0 0 0 3px rgba(148, 163, 184, .18); }
.room-card__status .st-muted { color: #94a3b8; }
.room-card__status .st-bad { color: #b91c1c; font-weight: 700; }
.room-card__status .st-exp { margin-left: auto; color: #94a3b8; font-size: .8rem; white-space: nowrap; }
.room-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid #EEF2F7; }
.room-card__stats { display: flex; gap: 28px; }
.rc-stat b { display: block; font-family: var(--font-title); font-weight: 800; font-size: 1.55rem; color: var(--c-ink); line-height: 1.1; }
.rc-stat span { color: var(--c-muted); font-size: .84rem; }
.room-card__actions { display: flex; align-items: center; gap: 8px; }
.room-card__actions .room-card__join--icon { width: 50px; height: 50px; border-radius: 15px; }
.room-card__actions .room-card__join--icon svg { width: 21px; height: 21px; }
/* Bouton « Rejoindre » : compact + effet glossy (dégradé + reflet). */
.room-card__join {
    height: auto; padding: 8px 18px; border-radius: 10px; text-decoration: none;
    background: linear-gradient(135deg, #10B981 0%, #059669 55%, #047857 100%);
    border: 0; color: #fff; font-weight: 700;
    box-shadow: 0 6px 14px rgba(5, 150, 105, .30), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.room-card__join:hover { background: linear-gradient(135deg, #059669 0%, #047857 60%, #065F46 100%); color: #fff; box-shadow: 0 8px 18px rgba(5, 150, 105, .38), inset 0 1px 0 rgba(255, 255, 255, .28); }
/* Variante icône seule (bouton « Rejoindre » compact). */
.room-card__join--icon { width: 42px; height: 42px; padding: 0; justify-content: center; align-items: center; }
.room-card__join--icon svg { width: 19px; height: 19px; stroke: currentColor; }

/* Sélecteur de vue cartes / liste */
.rooms-view-toggle { display: inline-flex; background: #fff; border: 1px solid var(--color-border); border-radius: 10px; padding: 3px; gap: 2px; }
.rvt-btn { width: 34px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--c-muted); border-radius: 8px; cursor: pointer; }
.rvt-btn:hover { color: var(--c-primary-dark); background: var(--c-primary-soft); }
.rvt-btn.is-on { background: var(--c-primary); color: #fff; }
.rvt-btn svg { stroke: currentColor; }

/* Vue LISTE : chaque salle = une ligne, colonnes ALIGNÉES via une grille.
   Colonnes : nom (extensible) · roue · code+quiz · expiration · actions. */
.room-cards.as-list { display: flex; flex-direction: column; gap: 8px; grid-template-columns: none; }
.room-cards.as-list .room-card {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) 90px 132px 118px 66px 150px auto;
    align-items: center;
    column-gap: 16px;
    padding: 12px 18px;
}
/* .room-card__head et .room-card__meta ne sont plus des boîtes : leurs enfants
   (titre, roue / code, quiz) deviennent des cellules → placement explicite par
   colonne, donc tout reste aligné (même une salle sans roue crantée). */
.room-cards.as-list .room-card__head { display: contents; }
.room-cards.as-list .room-card__meta { display: contents; }
.room-cards.as-list .room-card__title { grid-column: 1; font-size: 1rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-cards.as-list .room-card__tools { grid-column: 2; }
.room-cards.as-list .room-card__meta .code-badge { grid-column: 3; justify-self: start; }
.room-cards.as-list .room-card__meta .access-badge { grid-column: 4; justify-self: start; }
.room-cards.as-list .room-card__quiz { grid-column: 5; justify-self: start; white-space: nowrap; }
.room-cards.as-list .room-card__status { grid-column: 6; white-space: nowrap; }
.room-cards.as-list .room-card__foot { grid-column: 7; margin: 0; padding: 0; border-top: 0; justify-content: flex-end; }
/* Vue liste : pas de liseret, d'icône ni de stats (ligne compacte) */
.room-cards.as-list .room-card::before { display: none; }
.room-cards.as-list .room-card__ico { display: none; }
.room-cards.as-list .room-card__stats { display: none; }
.room-cards.as-list .room-card__status .st-exp { margin-left: 8px; }

@media (max-width: 860px) {
    .room-cards.as-list .room-card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
    .room-cards.as-list .room-card__head { display: flex; flex: 1 1 100%; justify-content: space-between; }
    .room-cards.as-list .room-card__meta { display: flex; align-items: center; gap: 10px; }
    .room-cards.as-list .room-card__title { white-space: normal; }
    .room-cards.as-list .room-card__tools, .room-cards.as-list .room-card__meta .code-badge,
    .room-cards.as-list .room-card__meta .access-badge,
    .room-cards.as-list .room-card__quiz, .room-cards.as-list .room-card__status,
    .room-cards.as-list .room-card__foot { grid-column: auto; }
    .room-cards.as-list .room-card__status { margin-left: auto; }
    .room-cards.as-list .room-card__foot { width: 100%; justify-content: flex-end; }
}

/* Kebab (menu ⋯) */
.kebab { position: relative; }
.kebab__btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--color-border); background: #fff; color: var(--c-muted); font-size: 1.2rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.kebab__btn:hover { border-color: var(--c-primary); color: var(--c-primary-dark); }
.kebab__menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 212px; background: #fff; border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: none; z-index: 50; }
.kebab__menu.open { display: block; }
.kebab__menu a, .kebab__menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; background: transparent; border: 0; cursor: pointer; color: var(--c-ink); font-family: var(--font-body); font-size: 14px; text-decoration: none; }
.kebab__menu a:hover, .kebab__menu button:hover { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.kebab__menu svg { width: 16px; height: 16px; stroke: currentColor; flex: none; }
.kebab__menu .kebab__danger { color: var(--c-danger); }
.kebab__menu .kebab__danger:hover { background: #FEF2F2; color: var(--c-danger); }

/* Pagination */
.rooms-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 22px 0 4px; }
.rooms-pager .rp-btn { background: #fff; border: 1px solid var(--color-border); border-radius: 10px; padding: 9px 16px; font-family: var(--font-title); font-weight: 700; font-size: .88rem; color: var(--c-ink); cursor: pointer; }
.rooms-pager .rp-btn:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary-dark); }
.rooms-pager .rp-btn:disabled { opacity: .45; cursor: default; }
.rooms-pager .rp-info { font-weight: 700; color: var(--c-muted); font-size: .9rem; }
.rooms-empty { text-align: center; color: var(--c-muted); padding: 30px 10px; }

@media (max-width: 600px) {
    .rooms-toolbar { flex-direction: column; align-items: stretch; }
    .rooms-toolbar__right { justify-content: space-between; }
    .rooms-search { min-width: 0; flex: 1; }
    .room-cards { grid-template-columns: 1fr; }
}