/* =====================================================================
   DSMLS — Design System
   Identité "premium automotive / mobility tech" — voir docs design.
   IMPORTANT : ce fichier ne modifie que l'apparence. Toutes les classes
   Bootstrap existantes (card, btn, table, badge, form-control, alert...)
   restent utilisées dans les vues ; ce fichier les redéfinit/étend pour
   qu'elles héritent automatiquement du nouveau style sans devoir
   réécrire chaque page.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Palette automobile premium */
    --dsmls-navy:        #0B1B33;   /* midnight navy — fond dashboard sombre, header */
    --dsmls-navy-2:      #142A4D;   /* navy élevé (cartes sur fond sombre) */
    --dsmls-blue:         #1E5EFF;  /* electric blue — CTA primaire, liens, focus */
    --dsmls-blue-dark:    #1447CC;
    --dsmls-accent:       #FF7A3D;  /* accent énergique — actions clés, badges "nouveau" */
    --dsmls-accent-2:     #17C3B2;  /* teal — succès/positif, progression */
    --dsmls-ink:          #101728;  /* texte principal */
    --dsmls-muted:        #5B6478;  /* texte secondaire */
    --dsmls-line:         #E6E9F2;  /* bordures subtiles */
    --dsmls-bg:           #F6F8FC;  /* fond général clair */
    --dsmls-surface:      #FFFFFF;
    --dsmls-radius:       14px;
    --dsmls-radius-sm:    10px;
    --dsmls-radius-lg:    22px;
    --dsmls-shadow:       0 4px 20px rgba(16, 23, 40, 0.06);
    --dsmls-shadow-md:    0 10px 30px rgba(16, 23, 40, 0.10);
    --dsmls-shadow-navy:  0 12px 32px rgba(11, 27, 51, 0.28);
}

* { box-sizing: border-box; }

html, body {
    background-color: var(--dsmls-bg);
    color: var(--dsmls-ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15.5px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .display-6, .fw-bold {
    font-family: 'Sora', 'Inter', sans-serif;
    letter-spacing: -0.01em;
}

a { text-decoration: none; }
.text-muted { color: var(--dsmls-muted) !important; }

/* ---------------------------------------------------------------------
   Navbar publique
   --------------------------------------------------------------------- */
.navbar {
    background: var(--dsmls-navy) !important;
    padding-top: .85rem;
    padding-bottom: .85rem;
    box-shadow: var(--dsmls-shadow-navy);
}
.navbar-brand {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: 0.5px;
    color: #fff !important;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.navbar-brand::before {
    content: "";
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--dsmls-blue), var(--dsmls-accent));
}
.navbar .nav-link {
    color: rgba(255,255,255,0.82) !important;
    font-weight: 500;
    font-size: .92rem;
}
.navbar .nav-link:hover { color: #fff !important; }


/* ---------------------------------------------------------------------
   Header mobile — accès permanent à la messagerie et aux notifications
   --------------------------------------------------------------------- */
.mobile-header-actions {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.mobile-header-icon {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.20);
    background: rgba(255,255,255,.07);
    border-radius: 12px;
    font-size: 1rem;
    transition: .15s ease;
}
.mobile-header-icon:active, .mobile-header-icon:hover {
    background: rgba(255,255,255,.15);
    transform: translateY(-1px);
}
.mobile-notification-dot {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    border: 2px solid var(--dsmls-navy);
    font-size: .58rem;
    font-weight: 800;
    line-height: 1;
}
.mobile-menu-button {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}
@media (max-width: 380px) {
    .navbar-brand span { display:none; }
    .mobile-header-actions { gap:.2rem; margin-right:.25rem !important; }
    .mobile-header-icon, .mobile-menu-button { width:37px; height:37px; }
}

/* ---------------------------------------------------------------------
   Boutons
   --------------------------------------------------------------------- */
.btn {
    border-radius: 10px;
    font-weight: 600;
    font-size: .92rem;
    padding: .55rem 1.15rem;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
    border-width: 1.5px;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--dsmls-blue);
    border-color: var(--dsmls-blue);
    box-shadow: 0 6px 16px rgba(30, 94, 255, 0.28);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--dsmls-blue-dark);
    border-color: var(--dsmls-blue-dark);
    box-shadow: 0 8px 20px rgba(30, 94, 255, 0.34);
}
.btn-warning {
    background: var(--dsmls-accent);
    border-color: var(--dsmls-accent);
    color: #fff;
    box-shadow: 0 6px 16px rgba(255, 122, 61, 0.30);
}
.btn-warning:hover { background: #e8662b; border-color: #e8662b; color: #fff; }
.btn-success { background: var(--dsmls-accent-2); border-color: var(--dsmls-accent-2); }
.btn-success:hover { background: #12a597; border-color: #12a597; }
.btn-outline-primary { color: var(--dsmls-blue); border-color: var(--dsmls-blue); }
.btn-outline-primary:hover { background: var(--dsmls-blue); border-color: var(--dsmls-blue); }
.btn-outline-light { border-color: rgba(255,255,255,0.5); }
.btn-outline-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

/* ---------------------------------------------------------------------
   Cartes / surfaces
   --------------------------------------------------------------------- */
.card {
    border: 1px solid var(--dsmls-line);
    border-radius: var(--dsmls-radius);
    box-shadow: var(--dsmls-shadow);
    transition: box-shadow .16s ease, transform .16s ease;
}
.card:hover { box-shadow: var(--dsmls-shadow-md); }
.card-body { padding: 1.35rem; }
.card-title { font-family: 'Sora', sans-serif; font-weight: 700; }

/* Cartes cliquables (fiches auto-école, etc.) */
a.card-link, .card-hover { display: block; }
.card-hover:hover { transform: translateY(-3px); }

/* ---------------------------------------------------------------------
   Hero (page d'accueil)
   --------------------------------------------------------------------- */
.dsmls-hero {
    position: relative;
    background: radial-gradient(120% 140% at 100% 0%, #17335F 0%, var(--dsmls-navy) 55%, #081326 100%);
    border-radius: var(--dsmls-radius-lg);
    color: #fff;
    overflow: hidden;
    padding: 3.25rem 2.25rem;
}
.dsmls-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(100deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 90px);
    opacity: .5;
    pointer-events: none;
}
.dsmls-hero h1 {
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 800;
    line-height: 1.12;
}
.dsmls-hero p.lead {
    color: rgba(255,255,255,0.78);
    font-size: 1.05rem;
    max-width: 30rem;
}
.dsmls-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    color: #fff;
    border-radius: 999px;
    padding: .35rem .85rem;
    font-size: .78rem;
    font-weight: 600;
    backdrop-filter: blur(6px);
}
.dsmls-hero-chip {
    background: rgba(255,255,255,0.94);
    color: var(--dsmls-ink);
    border-radius: 12px;
    padding: .6rem .9rem;
    font-size: .82rem;
    font-weight: 600;
    box-shadow: var(--dsmls-shadow-md);
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ---------------------------------------------------------------------
   Étapes / "how it works"
   --------------------------------------------------------------------- */
.dsmls-step-num {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--dsmls-blue);
    opacity: .55;
}

/* ---------------------------------------------------------------------
   KPI cards (dashboards)
   --------------------------------------------------------------------- */
.kpi-card {
    background: var(--dsmls-surface);
    border: 1px solid var(--dsmls-line);
    border-radius: var(--dsmls-radius);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--dsmls-shadow);
    height: 100%;
}
.kpi-card .kpi-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(30, 94, 255, 0.10);
    color: var(--dsmls-blue);
    font-size: 1.1rem;
    margin-bottom: .6rem;
}
.kpi-card .kpi-value {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 1.55rem;
    line-height: 1.1;
}
.kpi-card .kpi-label {
    color: var(--dsmls-muted);
    font-size: .82rem;
    font-weight: 500;
}

/* ---------------------------------------------------------------------
   Badges de statut
   --------------------------------------------------------------------- */
.badge { border-radius: 999px; font-weight: 600; padding: .4em .75em; letter-spacing: .01em; }
.badge.bg-success { background-color: var(--dsmls-accent-2) !important; }
.badge.bg-primary { background-color: var(--dsmls-blue) !important; }
.badge.bg-warning { background-color: var(--dsmls-accent) !important; color: #fff !important; }

/* ---------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------- */
.table { --bs-table-bg: transparent; }
.table thead th {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--dsmls-muted);
    border-bottom: 2px solid var(--dsmls-line);
    font-weight: 700;
}
.table td { vertical-align: middle; border-color: var(--dsmls-line); }
.table-hover tbody tr:hover { background-color: rgba(30, 94, 255, 0.04); }

/* ---------------------------------------------------------------------
   Formulaires
   --------------------------------------------------------------------- */
.form-control, .form-select {
    border-radius: 10px;
    border-color: var(--dsmls-line);
    padding: .6rem .85rem;
    font-size: .92rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--dsmls-blue);
    box-shadow: 0 0 0 3px rgba(30, 94, 255, 0.14);
}
.form-label { font-weight: 600; font-size: .85rem; color: var(--dsmls-ink); }

/* ---------------------------------------------------------------------
   Alertes
   --------------------------------------------------------------------- */
.alert { border: none; border-radius: var(--dsmls-radius-sm); border-left: 4px solid transparent; }
.alert-success { background: #E9FBF8; color: #0E7C6E; border-left-color: var(--dsmls-accent-2); }
.alert-warning { background: #FFF3EC; color: #B85A24; border-left-color: var(--dsmls-accent); }
.alert-danger  { background: #FDEEEE; color: #B3261E; border-left-color: #E5443C; }
.alert-info    { background: #EAF1FF; color: #1447CC; border-left-color: var(--dsmls-blue); }
.alert-secondary { background: #F1F2F6; color: var(--dsmls-muted); }

/* ---------------------------------------------------------------------
   Layout tableau de bord : sidebar + contenu (rôles authentifiés)
   --------------------------------------------------------------------- */
.dsmls-shell { display: flex; min-height: calc(100vh - 64px); }

.dsmls-sidebar {
    width: 236px;
    flex-shrink: 0;
    background: var(--dsmls-navy);
    color: rgba(255,255,255,0.85);
    padding: 1.25rem .9rem;
}
.dsmls-sidebar .side-group-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,0.38);
    font-weight: 700;
    margin: 1.1rem .6rem .35rem;
}
.dsmls-sidebar a.side-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .65rem;
    border-radius: 9px;
    color: rgba(255,255,255,0.82);
    font-size: .88rem;
    font-weight: 500;
    margin-bottom: .1rem;
}
.dsmls-sidebar a.side-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.dsmls-sidebar a.side-link.active {
    background: linear-gradient(90deg, rgba(30,94,255,0.28), rgba(30,94,255,0.05));
    color: #fff;
    box-shadow: inset 3px 0 0 var(--dsmls-blue);
}
.dsmls-content { flex: 1; padding: 1.75rem; max-width: 100%; overflow-x: hidden; }

/* Navigation mobile basse — visible uniquement < 768px pour les rôles connectés */
.dsmls-bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--dsmls-navy);
    box-shadow: 0 -6px 20px rgba(0,0,0,0.18);
    z-index: 1030;
    padding: .35rem 0 .5rem;
}
.dsmls-bottom-nav a {
    flex: 1;
    text-align: center;
    color: rgba(255,255,255,0.65);
    font-size: .65rem;
    font-weight: 600;
    display: flex; flex-direction: column; align-items: center; gap: .15rem;
}
.dsmls-bottom-nav a.active { color: #fff; }
.dsmls-bottom-nav .bn-icon { font-size: 1.15rem; }

@media (max-width: 767.98px) {
    .dsmls-sidebar { display: none; }
    .dsmls-bottom-nav { display: flex; }
    .dsmls-content { padding: 1rem 1rem 5rem; }
    .dsmls-hero { padding: 2rem 1.25rem; text-align: center; }
    .dsmls-hero p.lead { max-width: none; margin-left: auto; margin-right: auto; }
}

/* ---------------------------------------------------------------------
   États vides
   --------------------------------------------------------------------- */
.dsmls-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
    border: 1.5px dashed var(--dsmls-line);
    border-radius: var(--dsmls-radius);
    background: #FBFCFE;
}
.dsmls-empty .dsmls-empty-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: rgba(30,94,255,0.08); color: var(--dsmls-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin: 0 auto .9rem;
}
.dsmls-empty h6 { font-weight: 700; margin-bottom: .3rem; }
.dsmls-empty p { color: var(--dsmls-muted); font-size: .88rem; max-width: 26rem; margin: 0 auto; }

/* ---------------------------------------------------------------------
   Anneau de progression (dashboard élève)
   --------------------------------------------------------------------- */
.dsmls-ring {
    --pct: 0;
    width: 108px; height: 108px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: conic-gradient(var(--dsmls-blue) calc(var(--pct) * 1%), #E9EDF6 0);
    position: relative;
    flex-shrink: 0;
}
.dsmls-ring::before {
    content: "";
    position: absolute;
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--dsmls-surface);
}
.dsmls-ring span {
    position: relative;
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
footer.dsmls-footer {
    background: var(--dsmls-navy);
    color: rgba(255,255,255,0.55);
}

/* ---------------------------------------------------------------------
   Utilitaires
   --------------------------------------------------------------------- */
.dsmls-eyebrow {
    color: var(--dsmls-blue);
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.dsmls-section-title { font-weight: 800; font-size: 1.6rem; }
.dsmls-avatar {
    width: 38px; height: 38px; border-radius: 10px;
    background: linear-gradient(135deg, var(--dsmls-blue), var(--dsmls-accent));
    color: #fff; font-weight: 700; font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
}

/* =====================================================================
   DSMLS PHASE C — Premium Product UI
   Visual layer only: no business logic changes.
   ===================================================================== */
:root {
    --dsmls-blue-2:#4f86ff;
    --dsmls-orange:#ff7a3d;
    --dsmls-green:#18b89f;
    --dsmls-glass:rgba(255,255,255,.78);
}
body { background:
    radial-gradient(circle at 8% 0%, rgba(30,94,255,.055), transparent 26rem),
    radial-gradient(circle at 92% 12%, rgba(255,122,61,.045), transparent 24rem),
    var(--dsmls-bg); }
.navbar { position:sticky; top:0; z-index:1040; backdrop-filter:blur(14px); }
.navbar-brand::before { width:12px;height:12px;border-radius:4px; box-shadow:0 0 0 5px rgba(30,94,255,.12); }
.navbar .btn-warning { box-shadow:0 8px 22px rgba(255,122,61,.24); }
.card, .kpi-card { overflow:hidden; }
.card:hover { transform:translateY(-2px); }
.form-control,.form-select { border-radius:11px; border-color:#dfe4ee; min-height:44px; }
.form-control:focus,.form-select:focus { border-color:var(--dsmls-blue); box-shadow:0 0 0 .22rem rgba(30,94,255,.12); }
.btn-lg { border-radius:12px; padding:.75rem 1.25rem; }
.dsmls-shell { min-height:calc(100vh - 72px); }
.dsmls-sidebar { position:sticky; top:72px; height:calc(100vh - 72px); overflow-y:auto; }
.dsmls-content { max-width:1440px; width:100%; margin:0 auto; }
.dsmls-sidebar .side-link { transition:background .18s ease, transform .18s ease; }
.dsmls-sidebar .side-link:hover { transform:translateX(2px); }

/* Hero 2.0 */
.dsmls-hero { min-height:430px; padding:4rem clamp(1.4rem,5vw,4.5rem); border-radius:28px; isolation:isolate; box-shadow:0 22px 60px rgba(11,27,51,.20); }
.dsmls-hero::before { content:""; position:absolute; width:460px;height:460px; right:-100px; top:-150px; border-radius:50%; background:radial-gradient(circle,rgba(30,94,255,.36),transparent 68%); z-index:-1; }
.dsmls-hero::after { background-image:linear-gradient(90deg,transparent 49%,rgba(255,255,255,.07) 50%,transparent 51%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px); background-size:120px 120px,120px 120px; opacity:.35; }
.dsmls-hero h1 { max-width:760px; font-size:clamp(2.25rem,5vw,4rem); letter-spacing:-.045em; }
.dsmls-hero p.lead { max-width:650px; font-size:1.08rem; line-height:1.75; }
.dsmls-hero-visual { position:relative; min-height:300px; display:flex; align-items:center; justify-content:center; }
.dsmls-car-orbit { width:270px;height:190px; border-radius:50%; border:1px solid rgba(255,255,255,.15); transform:rotate(-10deg); position:absolute; }
.dsmls-car-orbit::before { content:""; position:absolute; inset:24px 38px; border-radius:50%; border:1px dashed rgba(255,255,255,.2); }
.dsmls-car { font-size:7.5rem; filter:drop-shadow(0 20px 22px rgba(0,0,0,.32)); transform:translateY(-8px); }
.dsmls-float-card { position:absolute; padding:.8rem 1rem; border-radius:14px; background:rgba(255,255,255,.95); color:var(--dsmls-ink); box-shadow:0 15px 35px rgba(0,0,0,.2); font-size:.78rem; font-weight:700; backdrop-filter:blur(10px); }
.dsmls-float-card.one { top:18px; right:5%; } .dsmls-float-card.two { bottom:20px; left:2%; }
.dsmls-trust-row { display:flex; flex-wrap:wrap; gap:1rem 1.5rem; color:var(--dsmls-muted); font-size:.86rem; font-weight:600; }
.dsmls-trust-row i { color:var(--dsmls-green); }

/* Marketing sections */
.dsmls-section { padding:2.5rem 0; }
.dsmls-section-title { font-size:clamp(1.65rem,3vw,2.25rem); letter-spacing:-.035em; }
.dsmls-feature { height:100%; padding:1.5rem; border:1px solid var(--dsmls-line); border-radius:20px; background:rgba(255,255,255,.82); box-shadow:var(--dsmls-shadow); }
.dsmls-feature-icon { width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(30,94,255,.12),rgba(23,195,178,.12));color:var(--dsmls-blue);font-size:1.35rem;margin-bottom:1rem; }
.dsmls-step-card { position:relative; height:100%; padding:1.5rem; border:1px solid var(--dsmls-line); border-radius:20px; background:#fff; box-shadow:var(--dsmls-shadow); }
.dsmls-step-card .num { font:800 2.4rem/1 Sora, sans-serif; color:#dfe7fb; position:absolute; right:1rem; top:1rem; }
.dsmls-step-card:hover { border-color:rgba(30,94,255,.25); transform:translateY(-4px); box-shadow:var(--dsmls-shadow-md); }
.dsmls-market-card { border:1px solid var(--dsmls-line); border-radius:20px; background:#fff; box-shadow:var(--dsmls-shadow); overflow:hidden; height:100%; }
.dsmls-market-cover { height:135px; position:relative; background:linear-gradient(135deg,#0b1b33,#1e5eff); overflow:hidden; }
.dsmls-market-cover::before { content:""; position:absolute; width:260px;height:260px;border:1px solid rgba(255,255,255,.14);border-radius:50%; right:-90px;top:-130px; }
.dsmls-market-cover::after { content:""; position:absolute; left:-30px;bottom:18px;width:160%;height:2px;background:rgba(255,255,255,.15);transform:rotate(-7deg); }
.dsmls-market-logo { position:absolute; left:1.1rem; bottom:-24px; width:56px;height:56px;border-radius:16px;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;color:var(--dsmls-blue);font-size:1.4rem;z-index:2; }
.dsmls-market-body { padding:2.2rem 1.2rem 1.2rem; }
.dsmls-pill { display:inline-flex; align-items:center; gap:.3rem; padding:.35rem .65rem; border-radius:999px; background:#f0f4ff; color:var(--dsmls-blue); font-size:.72rem; font-weight:700; }
.dsmls-dark-section { background:var(--dsmls-navy); color:#fff; border-radius:28px; padding:3rem; position:relative; overflow:hidden; }
.dsmls-dark-section::after { content:""; position:absolute; width:360px;height:360px; right:-160px;top:-160px;border-radius:50%;background:rgba(30,94,255,.2); }
.dsmls-dark-section .text-muted { color:rgba(255,255,255,.68)!important; }

/* Dashboards */
.dsmls-page-head { padding:1.35rem 1.5rem; border-radius:20px; background:linear-gradient(135deg,#fff,#f5f8ff); border:1px solid var(--dsmls-line); margin-bottom:1.4rem; }
.dsmls-page-head h1,.dsmls-page-head h2,.dsmls-page-head h3 { margin-bottom:.2rem; }
.kpi-card { position:relative; background:linear-gradient(145deg,#fff,#fbfcff); }
.kpi-card::after { content:""; position:absolute; right:-22px;bottom:-35px;width:90px;height:90px;border-radius:50%;background:rgba(30,94,255,.035); }
.kpi-card .kpi-icon { position:relative; z-index:1; }
.kpi-card .kpi-value { position:relative; z-index:1; }
.kpi-card .kpi-label { position:relative; z-index:1; }
.table-responsive { border-radius:14px; }
.table.bg-white { margin-bottom:0; }
.alert { border-radius:13px; border-width:1px; }

/* Mobile polish */
@media (max-width:767.98px){
  .navbar { padding:.7rem .75rem; }
  .navbar-brand { font-size:1.18rem; }
  .dsmls-hero { min-height:0; padding:2.4rem 1.25rem; border-radius:22px; }
  .dsmls-hero h1 { font-size:2.25rem; }
  .dsmls-hero-visual { min-height:220px; }
  .dsmls-car { font-size:5.8rem; }
  .dsmls-car-orbit { width:220px;height:150px; }
  .dsmls-float-card.one { right:0; } .dsmls-float-card.two { left:0; }
  .dsmls-dark-section { padding:2rem 1.25rem; border-radius:22px; }
  .dsmls-content { padding-top:1.1rem; }
  .kpi-card { padding:1rem; }
  .kpi-card .kpi-value { font-size:1.25rem; }
}

/* =====================================================================
   DSMLS PHASE F — Product experience refinement
   ===================================================================== */
.dsmls-page-shell { max-width: 1240px; margin-inline: auto; }
.dsmls-hero { min-height: 500px; display:flex; align-items:center; }
.dsmls-hero::before {
    content:""; position:absolute; width:420px; height:420px; right:-120px; bottom:-180px;
    border-radius:50%; background:rgba(30,94,255,.18); filter:blur(2px);
}
.dsmls-hero-visual { min-height:360px; position:relative; display:grid; place-items:center; }
.dsmls-car {
    width:210px; height:210px; display:grid; place-items:center; border-radius:50%;
    background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.2); font-size:5.5rem;
    box-shadow:0 30px 70px rgba(0,0,0,.28); backdrop-filter:blur(12px);
    transform:rotate(-2deg);
}
.dsmls-car-orbit { position:absolute; width:330px; height:170px; border:1px dashed rgba(255,255,255,.3); border-radius:50%; transform:rotate(-18deg); }
.dsmls-float-card { position:absolute; z-index:2; background:rgba(255,255,255,.96); color:var(--dsmls-ink); padding:.8rem 1rem; border-radius:14px; box-shadow:0 16px 35px rgba(0,0,0,.2); font-size:.8rem; min-width:180px; }
.dsmls-float-card.one { top:18%; right:0; }
.dsmls-float-card.two { bottom:12%; left:0; }
.dsmls-metric-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--dsmls-line); border:1px solid var(--dsmls-line); border-radius:18px; overflow:hidden; box-shadow:var(--dsmls-shadow); }
.dsmls-metric { background:var(--dsmls-surface); padding:1.2rem; text-align:center; }
.dsmls-metric strong { display:block; font-family:'Sora',sans-serif; font-size:1.35rem; }
.dsmls-metric span { color:var(--dsmls-muted); font-size:.78rem; }
.dsmls-search-panel { background:#fff; border:1px solid var(--dsmls-line); border-radius:18px; padding:1rem; box-shadow:var(--dsmls-shadow-md); }
.dsmls-section { padding-top:4.5rem; padding-bottom:4.5rem; }
.dsmls-step-card { height:100%; padding:1.4rem; border:1px solid var(--dsmls-line); border-radius:18px; background:#fff; position:relative; transition:.18s ease; }
.dsmls-step-card:hover { transform:translateY(-4px); box-shadow:var(--dsmls-shadow-md); }
.dsmls-step-card .num { position:absolute; right:1rem; top:1rem; font-family:'Sora'; font-weight:800; color:#dce4f5; font-size:2rem; }
.dsmls-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.kpi-card { height:100%; position:relative; overflow:hidden; }
.kpi-card::after { content:""; position:absolute; width:90px; height:90px; right:-30px; top:-30px; border-radius:50%; background:rgba(30,94,255,.06); }
.dsmls-next-card { background:linear-gradient(135deg,#fff,#f3f7ff); border:1px solid #dfe7fb; }
.dsmls-status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--dsmls-accent-2); box-shadow:0 0 0 4px rgba(23,195,178,.12); }
.dsmls-school-hero { background:linear-gradient(135deg,#071326,#173b72 65%,#1e5eff); color:#fff; border-radius:24px; padding:2.5rem; position:relative; overflow:hidden; }
.dsmls-school-hero::after { content:""; position:absolute; width:280px; height:280px; right:-80px; top:-120px; border-radius:50%; background:rgba(255,255,255,.08); }
.dsmls-school-meta { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1rem; }
.dsmls-school-meta span { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:999px; padding:.4rem .7rem; font-size:.78rem; }
.dsmls-feature-card { height:auto; min-height:0; border:1px solid var(--dsmls-line); border-radius:18px; background:#fff; padding:1.3rem; transition:.18s ease; }
.dsmls-feature-card:hover { transform:translateY(-3px); box-shadow:var(--dsmls-shadow-md); }
@media (max-width: 991.98px) {
    .dsmls-hero { min-height:auto; }
    .dsmls-kpi-grid { grid-template-columns:repeat(2,1fr); }
    .dsmls-metric-strip { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 575.98px) {
    .dsmls-hero { padding:2rem 1.25rem; border-radius:18px; }
    .dsmls-hero h1 { font-size:2rem; }
    .dsmls-kpi-grid { grid-template-columns:1fr 1fr; gap:.65rem; }
    .dsmls-metric { padding:.9rem .5rem; }
    .dsmls-metric strong { font-size:1.05rem; }
    .dsmls-float-card { min-width:145px; transform:scale(.88); }
}

/* =====================================================================
   ROULEO Phase G — brand + mobile navigation drawer
   ===================================================================== */
.navbar-brand .brand-mark { width:34px; height:34px; border-radius:10px; object-fit:cover; box-shadow:0 6px 18px rgba(30,94,255,.25); }
.navbar-brand span { letter-spacing:.12em; }
.dsmls-mobile-menu-backdrop { position:fixed; inset:0; background:rgba(3,10,22,.58); opacity:0; visibility:hidden; transition:.22s ease; z-index:1040; backdrop-filter:blur(2px); }
.dsmls-mobile-menu-backdrop.show { opacity:1; visibility:visible; }
.dsmls-mobile-drawer { position:fixed; top:0; left:0; bottom:0; width:min(88vw,360px); background:#071326; color:#fff; transform:translateX(-105%); transition:transform .25s cubic-bezier(.22,.61,.36,1); z-index:1050; display:flex; flex-direction:column; box-shadow:18px 0 50px rgba(0,0,0,.3); }
.dsmls-mobile-drawer.open { transform:translateX(0); }
.mobile-drawer-head { display:flex; justify-content:space-between; align-items:center; padding:1rem 1rem .85rem; border-bottom:1px solid rgba(255,255,255,.1); }
.drawer-mark { width:38px; height:38px; border-radius:11px; }
.mobile-home-link,.mobile-side-link,.mobile-logout { display:flex; align-items:center; gap:.75rem; padding:.78rem 1rem; color:rgba(255,255,255,.82); }
.mobile-home-link { margin:.75rem .75rem .35rem; border-radius:12px; background:rgba(30,94,255,.16); color:#fff; font-weight:700; }
.mobile-nav-scroll { overflow-y:auto; padding:0 .75rem 1rem; }
.mobile-group-label { color:#7f91ae; font-size:.68rem; font-weight:800; letter-spacing:.14em; padding:1rem .35rem .4rem; }
.mobile-side-link { border-radius:11px; margin:.12rem 0; }
.mobile-side-link:hover,.mobile-side-link.active { background:rgba(255,255,255,.08); color:#fff; }
.mobile-side-link.active { box-shadow:inset 3px 0 var(--dsmls-blue); }
.mobile-logout { margin:auto .75rem 1rem; border-top:1px solid rgba(255,255,255,.1); padding-top:1rem; color:#ffb39a; }
body.menu-open { overflow:hidden; }
@media (max-width:767.98px){ .dsmls-content { padding-bottom:1.25rem; } .navbar-brand .brand-mark{width:30px;height:30px}.navbar-brand{font-size:1.1rem} }

/* =====================================================================
   ROULEO CODE V1 — identité pédagogique originale
   ===================================================================== */
.rouleo-code-shell{max-width:1280px;margin:0 auto;padding:1.4rem 0 3rem}
.rouleo-code-hero{min-height:360px;border-radius:30px;padding:2.6rem clamp(1.4rem,4vw,3.8rem);display:grid;grid-template-columns:1.35fr .8fr;gap:2rem;align-items:center;color:#fff;background:radial-gradient(circle at 80% 15%,rgba(33,120,255,.34),transparent 28%),linear-gradient(135deg,#071629 0%,#0d2747 56%,#113c66 100%);box-shadow:0 25px 65px rgba(7,22,41,.22);overflow:hidden;position:relative}
.rouleo-code-hero:after{content:"";position:absolute;inset:auto -10% -75% 35%;height:280px;border-radius:50%;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 35px rgba(255,255,255,.025),0 0 0 70px rgba(255,255,255,.018)}
.rouleo-code-kicker{font-size:.75rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#7fc2ff;margin-bottom:.55rem}.rouleo-code-kicker.dark{color:#1e5eff}
.rouleo-code-hero h1{font-size:clamp(2.1rem,4vw,4rem);letter-spacing:-.05em;line-height:1.03;max-width:720px;margin:0}.rouleo-code-hero h1 span{color:#66d7ff}.rouleo-code-hero p{color:rgba(255,255,255,.75);font-size:1.02rem;line-height:1.7;max-width:650px;margin:1rem 0 0}
.rouleo-road-visual{min-height:260px;position:relative;display:flex;align-items:center;justify-content:center}.road-line{position:absolute;width:110%;height:120px;border-top:3px solid rgba(255,255,255,.18);border-radius:50%;transform:rotate(-11deg)}.road-car{position:absolute;bottom:44px;right:15%;font-size:5.8rem;color:#62d6ff;filter:drop-shadow(0 14px 18px rgba(0,0,0,.28));transform:rotate(-4deg)}.road-sign{display:flex;align-items:center;justify-content:center;position:absolute;z-index:2}.sign-danger{width:96px;height:96px;transform:rotate(-5deg)}.sign-danger:before{content:"";position:absolute;inset:4px;background:#fff;border:8px solid #ef4444;clip-path:polygon(50% 0,100% 100%,0 100%);filter:drop-shadow(0 12px 18px rgba(0,0,0,.3))}.sign-danger span{position:relative;z-index:2;color:#111827;font-size:2.4rem;font-weight:900;margin-top:1.1rem}.road-badge{position:absolute;right:0;top:20px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px);padding:.65rem .9rem;border-radius:14px;font-weight:700;font-size:.78rem}.road-badge i{color:#ffd15c}
.rouleo-code-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:-25px;position:relative;z-index:3;padding:0 1.2rem}.code-stat{background:#fff;border:1px solid #e3e9f3;border-radius:18px;padding:1rem 1.15rem;box-shadow:0 12px 32px rgba(11,27,51,.08)}.code-stat span,.code-stat small{display:block;color:#748198;font-size:.76rem}.code-stat span i{color:#1e5eff;margin-right:.25rem}.code-stat strong{display:block;font-size:1.65rem;letter-spacing:-.04em;margin:.25rem 0}.code-stat small{font-size:.72rem}
.rouleo-code-title{font-size:1.55rem;font-weight:850;letter-spacing:-.035em;margin:0}.code-progress-pill{background:#edf4ff;color:#1e5eff;padding:.4rem .7rem;border-radius:999px;font-size:.76rem;font-weight:800}.code-progress-bar{height:8px;border-radius:99px;background:#e9eef6;overflow:hidden}.code-progress-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1e5eff,#39c9ff)}.code-progress-bar.mini{height:6px}
.code-module-card{height:100%;display:flex;gap:1rem;padding:1.25rem;background:#fff;border:1px solid #e2e8f1;border-radius:20px;box-shadow:0 8px 25px rgba(11,27,51,.045)}.module-index{font-weight:900;color:#c5d5f5;font-size:1.3rem}.code-module-card h3{font-size:1.05rem;font-weight:800;margin:0 0 .65rem}.code-lesson-list{display:grid;gap:.35rem}.code-lesson-row{display:flex;align-items:center;gap:.65rem;padding:.58rem .6rem;border-radius:11px;color:#27344a;text-decoration:none;background:#f8faff;font-size:.84rem}.code-lesson-row:hover{background:#edf4ff;color:#1e5eff}.lesson-dot{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#e8eef9;color:#6980a4;font-size:.72rem}.lesson-dot.done{background:#dff8ef;color:#0f9c73}
.code-mode-card{height:100%;display:block;text-decoration:none;border-radius:20px;padding:1.35rem;color:#fff;position:relative;overflow:hidden;min-height:185px;box-shadow:0 12px 30px rgba(11,27,51,.12);transition:.18s}.code-mode-card:hover{transform:translateY(-4px);color:#fff}.code-mode-card i:first-child{font-size:1.4rem}.code-mode-card h3{font-size:1.05rem;font-weight:850;margin:1.2rem 0 .4rem}.code-mode-card p{font-size:.78rem;line-height:1.55;color:rgba(255,255,255,.74);min-height:48px}.code-mode-card span{font-size:.76rem;font-weight:800}.code-mode-card.blue{background:linear-gradient(145deg,#0f51d9,#1e8cff)}.code-mode-card.orange{background:linear-gradient(145deg,#c94e17,#ff8a3d)}.code-mode-card.teal{background:linear-gradient(145deg,#087b72,#12b89e)}.code-mode-card.dark{background:linear-gradient(145deg,#111c2e,#283a55)}
.topic-card{display:flex;align-items:center;gap:.8rem;padding:1rem;background:#fff;border:1px solid #e2e8f1;border-radius:16px;text-decoration:none;color:#27344a;transition:.18s}.topic-card:hover{border-color:#bcd1fb;transform:translateY(-2px);box-shadow:0 10px 25px rgba(11,27,51,.06);color:#1e5eff}.topic-number{font-size:.72rem;font-weight:900;color:#9aabc5}.topic-card strong,.topic-card small{display:block}.topic-card strong{font-size:.88rem}.topic-card small{font-size:.7rem;color:#8a96aa;margin-top:.2rem}.topic-card>i{margin-left:auto}
.code-panel{background:#fff;border:1px solid #e2e8f1;border-radius:20px;padding:1.35rem;box-shadow:0 8px 25px rgba(11,27,51,.045);height:100%}.code-panel-icon{width:42px;height:42px;border-radius:13px;background:#edf4ff;color:#1e5eff;display:grid;place-items:center}.topic-progress{margin-top:1.15rem}.topic-progress>div:first-child{display:flex;justify-content:space-between;font-size:.76rem;margin-bottom:.35rem}.topic-progress strong{color:#1e5eff}.history-row{display:flex;align-items:center;gap:.7rem;padding:.75rem 0;border-bottom:1px solid #edf0f5}.history-row:last-child{border-bottom:0}.history-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center}.history-icon.ok{background:#e0f8ef;color:#0d9d73}.history-icon.bad{background:#fff0ec;color:#e45b3b}.history-row div{flex:1}.history-row strong,.history-row small{display:block}.history-row strong{font-size:.78rem}.history-row small{font-size:.68rem;color:#8b96a9;margin-top:.1rem}.history-row>b{font-size:.82rem}
.code-reading-shell{max-width:950px;margin:0 auto;padding:1.4rem 0 3rem}.code-back{display:inline-flex;gap:.45rem;align-items:center;text-decoration:none;color:#53627a;font-weight:700;font-size:.82rem;margin-bottom:1.25rem}.code-back:hover{color:#1e5eff}.code-reading-head{display:flex;justify-content:space-between;gap:2rem;align-items:center;background:linear-gradient(135deg,#fff,#f5f8ff);border:1px solid #e2e8f1;border-radius:24px;padding:1.8rem;margin-bottom:1.2rem}.code-reading-head h1{font-size:clamp(2rem,4vw,3rem);letter-spacing:-.045em;margin:.2rem 0}.code-reading-head p{color:#748198;margin:0}.lesson-badge{width:68px;height:68px;border-radius:20px;display:grid;place-items:center;background:#0e2340;color:#65d8ff;font-size:1.6rem;flex-shrink:0}.code-lesson-content{background:#fff;border:1px solid #e2e8f1;border-radius:24px;padding:clamp(1.3rem,4vw,2.5rem);box-shadow:0 12px 30px rgba(11,27,51,.05)}.lesson-visual-card{display:flex;align-items:center;gap:1rem;background:#0e2340;color:#fff;border-radius:18px;padding:1rem 1.15rem;margin-bottom:2rem}.lesson-visual-card .sign-danger{position:relative;width:58px;height:58px;flex:0 0 58px}.lesson-visual-card .sign-danger:before{border-width:6px}.lesson-visual-card .sign-danger span{font-size:1.5rem;margin-top:.6rem}.lesson-visual-card p{margin:.15rem 0 0;color:rgba(255,255,255,.7);font-size:.78rem}.code-lesson-content h2{font-size:1.35rem;font-weight:850}.code-lesson-content>p{font-size:1rem;line-height:1.9;color:#42516a}.lesson-tip{display:flex;gap:.8rem;background:#f4f8ff;border:1px solid #dbe8ff;border-radius:16px;padding:1rem;margin-top:1.5rem}.lesson-tip>i{color:#f2a900;font-size:1.1rem}.lesson-tip strong,.lesson-tip span{display:block}.lesson-tip span{font-size:.8rem;color:#6c7890;margin-top:.15rem}
.code-practice-shell{max-width:1040px;margin:0 auto;padding:1.2rem 0 2rem}.practice-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;margin-bottom:.8rem}.practice-top .code-back{margin:0}.practice-mode{text-align:center;font-weight:850;font-size:.9rem}.practice-mode b{color:#1e5eff}.practice-timer{justify-self:end;background:#0e2340;color:#fff;border-radius:12px;padding:.55rem .8rem;font-weight:850;font-variant-numeric:tabular-nums}.practice-timer i{color:#65d8ff;margin-right:.25rem}.practice-progress{height:6px;background:#e7edf6;border-radius:99px;overflow:hidden;margin-bottom:1.5rem}.practice-progress span{display:block;height:100%;background:linear-gradient(90deg,#1e5eff,#4bd4ff);transition:.2s}.practice-question{display:none}.practice-question.active{display:block}.question-meta{display:flex;justify-content:space-between;gap:1rem;font-size:.7rem;font-weight:850;letter-spacing:.09em;color:#8390a5;text-transform:uppercase;margin-bottom:.7rem}.question-meta span:last-child{color:#1e5eff}.question-card{background:#fff;border:1px solid #dfe6f0;border-radius:24px;padding:clamp(1.3rem,4vw,2.5rem);box-shadow:0 18px 45px rgba(11,27,51,.06)}.question-card h1{font-size:clamp(1.35rem,3vw,2rem);line-height:1.3;letter-spacing:-.025em;margin-bottom:1.8rem}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.answer-option{display:flex;align-items:center;gap:.8rem;padding:1rem;border:1px solid #dfe6f0;border-radius:15px;cursor:pointer;transition:.15s;font-size:.9rem}.answer-option:hover{border-color:#a9c5f6;background:#f7faff}.answer-option input{position:absolute;opacity:0}.answer-option:has(input:checked){border-color:#1e5eff;background:#edf4ff;box-shadow:0 0 0 2px rgba(30,94,255,.1)}.answer-letter{width:30px;height:30px;border-radius:9px;background:#eef2f7;color:#60718d;display:grid;place-items:center;font-weight:900;flex:0 0 30px}.answer-option:has(input:checked) .answer-letter{background:#1e5eff;color:#fff}.practice-bottom{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.2rem}.practice-bottom .btn:first-child{margin-right:auto}.practice-bottom .btn:last-child{margin-left:auto}
.code-result-shell{max-width:1000px;margin:0 auto;padding:1.5rem 0 3rem}.result-hero{border-radius:26px;padding:2rem;display:flex;align-items:center;gap:1.8rem;color:#fff;margin-bottom:1rem}.result-hero.success{background:linear-gradient(135deg,#063b32,#0e9d73)}.result-hero.retry{background:linear-gradient(135deg,#3a2130,#b84757)}.result-hero h1{font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:-.045em;margin:.1rem 0 .5rem}.result-hero p{color:rgba(255,255,255,.76);margin:0}.result-orbit{width:130px;height:130px;border-radius:50%;display:grid;place-items:center;align-content:center;flex-shrink:0;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 0 0 12px rgba(255,255,255,.04)}.result-orbit strong{font-size:2.2rem;line-height:1}.result-orbit span{font-size:.75rem;margin-top:.25rem;color:rgba(255,255,255,.7)}.result-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:1rem}.result-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:1rem}.result-metrics>div{background:#f7f9fc;border-radius:14px;padding:1rem;text-align:center}.result-metrics strong,.result-metrics span{display:block}.result-metrics strong{font-size:1.45rem}.result-metrics span{font-size:.7rem;color:#7a879b;margin-top:.2rem}.code-empty{background:#fff;border:1px dashed #cdd7e6;border-radius:22px;padding:3rem 1.5rem;text-align:center}.empty-emoji{font-size:2.8rem}.code-empty h2{font-weight:850;margin:.7rem 0 .3rem}.code-empty p{color:#7b8799}.mistake-list{display:grid;gap:.75rem}.mistake-card{display:grid;grid-template-columns:55px 1fr;gap:1rem;background:#fff;border:1px solid #e1e7f0;border-radius:18px;padding:1.1rem}.mistake-num{font-size:1.1rem;font-weight:900;color:#c5d0e2}.mistake-card h3{font-size:.98rem;line-height:1.45;margin:.5rem 0}.topic-chip{display:inline-flex;padding:.3rem .55rem;background:#edf4ff;color:#1e5eff;border-radius:999px;font-size:.65rem;font-weight:800}.mistake-answer{display:flex;gap:.5rem;background:#fff9e9;border-radius:11px;padding:.65rem;color:#775d17;font-size:.75rem}.mistake-answer i{color:#e7a700}
@media(max-width:900px){.rouleo-code-hero{grid-template-columns:1fr}.rouleo-road-visual{min-height:180px}.rouleo-code-stat-grid{grid-template-columns:repeat(2,1fr)}.result-grid{grid-template-columns:1fr}}
@media(max-width:767.98px){.rouleo-code-shell,.code-reading-shell,.code-practice-shell,.code-result-shell{padding-left:.15rem;padding-right:.15rem}.rouleo-code-hero{padding:1.6rem 1.2rem;border-radius:22px}.rouleo-code-hero h1{font-size:2.2rem}.rouleo-road-visual{min-height:170px}.road-car{font-size:4.5rem;right:12%}.road-sign{transform:scale(.8)}.road-badge{top:4px;right:0}.rouleo-code-stat-grid{grid-template-columns:1fr 1fr;padding:0 .35rem;margin-top:-18px}.code-stat{padding:.8rem}.code-stat strong{font-size:1.35rem}.code-reading-head{padding:1.2rem;border-radius:19px}.lesson-badge{width:54px;height:54px}.answer-grid{grid-template-columns:1fr}.practice-top{grid-template-columns:1fr auto}.practice-mode{display:none}.practice-timer{grid-column:2;grid-row:1}.result-hero{flex-direction:column;text-align:center;padding:1.5rem}.result-metrics{grid-template-columns:1fr}.practice-bottom{gap:.45rem}.practice-bottom .btn{font-size:.78rem}.practice-bottom .btn:first-child,.practice-bottom .btn:last-child{margin:0}.mistake-card{grid-template-columns:35px 1fr}}
.rouleo-student-code-card{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.35rem 1.5rem;border-radius:20px;color:#fff;background:linear-gradient(135deg,#0b1b33,#1254aa);box-shadow:0 15px 35px rgba(11,27,51,.14)}.rouleo-student-code-card h4{font-weight:850;margin:.15rem 0 .3rem}.rouleo-student-code-card p{margin:0;color:rgba(255,255,255,.72);font-size:.8rem;max-width:650px}.rouleo-student-code-card .rouleo-code-kicker{margin:0;color:#74d9ff}@media(max-width:767.98px){.rouleo-student-code-card{align-items:flex-start;flex-direction:column}}

/* ROULEO CODE V2 */
.rouleo-code-hero{background:linear-gradient(135deg,#071b3d,#0e4db8);color:#fff;border-radius:24px;padding:28px 30px;display:flex;justify-content:space-between;gap:24px;align-items:center;box-shadow:0 16px 40px rgba(9,49,110,.18)}
.rouleo-code-hero h1{font-weight:800;margin:.25rem 0}.rouleo-code-hero p{max-width:760px;color:rgba(255,255,255,.8);margin:0}.eyebrow{font-size:.72rem;letter-spacing:.14em;font-weight:800;color:#2f80ed}.rouleo-code-hero .eyebrow{color:#9dc7ff}.sign-card{border:0;border-radius:20px;overflow:hidden;box-shadow:0 8px 26px rgba(12,31,58,.08);transition:transform .18s ease,box-shadow .18s ease}.sign-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(12,31,58,.14)}.sign-art{height:170px;background:linear-gradient(180deg,#f8fbff,#eef4fb);display:flex;align-items:center;justify-content:center;padding:22px}.sign-art img{width:120px;height:120px;object-fit:contain}.kpi{border:0;border-radius:18px;padding:18px;box-shadow:0 8px 24px rgba(12,31,58,.07)}
@media(max-width:700px){.rouleo-code-hero{padding:22px;display:block}.rouleo-code-hero .btn{margin-top:16px}.sign-art{height:130px}.sign-art img{width:92px;height:92px}}

/* ROULEO Code J.1 — compact question images */
.question-card .code-question-image{display:block;width:auto;max-width:min(100%,260px);height:auto;max-height:240px;object-fit:contain;margin:0 auto 1.25rem;padding:10px;background:#f7f9fc;border:1px solid #e1e7f0;border-radius:18px;box-sizing:border-box}
.question-card .code-question-image + .answer-grid{margin-top:.15rem}
@media(max-width:767.98px){.question-card .code-question-image{max-width:190px;max-height:180px;margin-bottom:1rem;padding:8px}}

/* ROULEO Phase K — centre de ressources */
.resource-page{max-width:1180px;margin:0 auto;padding:1.25rem 0 3rem}
.resource-hero{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:2rem;border-radius:24px;background:linear-gradient(135deg,#071a45,#1459d9);color:#fff;margin-bottom:1.25rem;box-shadow:0 18px 45px rgba(15,57,130,.16)}
.resource-hero h1{font-family:Sora,sans-serif;font-size:clamp(1.65rem,3vw,2.45rem);margin:.35rem 0}.resource-hero p{margin:0;color:rgba(255,255,255,.78);max-width:680px}.resource-kicker{font-size:.72rem;font-weight:800;letter-spacing:.13em;color:#a9c6ff}.resource-kicker.dark{color:#1760d8}.resource-hero-icon{width:76px;height:76px;border-radius:22px;background:rgba(255,255,255,.13);display:grid;place-items:center;font-size:2rem;flex:none}
.resource-filter{display:flex;gap:.65rem;padding:1rem;background:#fff;border:1px solid var(--dsmls-line);border-radius:18px;margin-bottom:2rem;box-shadow:var(--dsmls-shadow)}.resource-filter .form-select{max-width:250px}.resource-page h2{font-family:Sora,sans-serif;font-size:1.25rem}
.resource-card{display:flex;gap:1rem;padding:1.1rem;background:#fff;border:1px solid var(--dsmls-line);border-radius:20px;box-shadow:var(--dsmls-shadow);transition:.18s ease}.resource-card:hover{transform:translateY(-2px);box-shadow:var(--dsmls-shadow-md)}.resource-card h3{font-size:1rem;font-weight:800;margin:.1rem 0 .35rem}.resource-card p{font-size:.88rem;color:#69758c;margin:0}.resource-icon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:#eef4ff;color:#1760d8;font-size:1.35rem;flex:none}.resource-icon.pdf{background:#fff0f0;color:#d92d3b}.resource-icon.image{background:#ecfbf5;color:#11845b}.resource-icon.video{background:#f2edff;color:#6c4bdc}.resource-meta{display:flex;gap:.7rem;font-size:.72rem;color:#8490a4;margin-top:.7rem}.resource-meta span{background:#f4f6f9;padding:.25rem .45rem;border-radius:8px}.resource-empty{text-align:center;padding:4rem 1rem;border:1px dashed #cdd5e2;border-radius:20px;background:#fbfcff}.resource-empty i{font-size:2rem;color:#9aa7ba}.resource-empty h3{font-size:1.1rem;margin:.75rem 0 .25rem}.resource-upload-card{border:1px solid var(--dsmls-line);border-radius:20px;box-shadow:var(--dsmls-shadow)}.resource-upload-card h2{margin-bottom:.35rem}.resource-tip{height:100%;padding:1.25rem;border-radius:20px;background:#f5f8ff;border:1px solid #dbe6ff;display:flex;gap:1rem;color:#31415f}.resource-tip>i{font-size:1.5rem;color:#f5a524}.resource-tip p{margin:.4rem 0 0;color:#64728b;font-size:.9rem}.min-w-0{min-width:0}
@media(max-width:767px){.resource-page{padding:.8rem 0 2rem}.resource-hero{padding:1.3rem;border-radius:20px}.resource-hero-icon{width:54px;height:54px;border-radius:16px;font-size:1.4rem}.resource-filter{flex-direction:column}.resource-filter .form-select{max-width:none}.resource-card{padding:.9rem}.resource-card .btn{font-size:.76rem}.resource-page .table{font-size:.82rem}}

/* ROULEO Code Phase M — progression & gamification */
.code-progress-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0}.level-orb{width:96px;height:96px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#101828,#1d2939);color:#fff;box-shadow:0 12px 28px rgba(16,24,40,.18)}.level-orb span{font-size:.65rem;letter-spacing:.12em;opacity:.72}.level-orb strong{font-size:2rem;line-height:1}.xp-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:#eef4ff;color:#175cd3;font-size:1.4rem}.streak-panel{height:100%}.streak-number{font-size:3rem;font-weight:800;line-height:1.1;margin:10px 0 4px}.streak-number i{font-size:2rem}.streak-panel h3{font-size:1rem;margin:0}.streak-panel p{font-size:.88rem;color:#667085;margin:8px 0 0}.badge-card{position:relative;display:flex;align-items:center;gap:14px;min-height:92px;padding:16px;border-radius:18px;border:1px solid #eaecf0;background:#fff}.badge-card.locked{opacity:.52;filter:saturate(.3)}.badge-icon{width:48px;height:48px;flex:0 0 48px;border-radius:14px;display:grid;place-items:center;background:#f2f4f7;font-size:1.25rem}.badge-card.unlocked .badge-icon{background:#eef4ff;color:#175cd3}.badge-card strong{display:block;font-size:.96rem}.badge-card small{display:block;color:#667085;margin-top:3px;line-height:1.35}.badge-check,.badge-lock{margin-left:auto}.badge-check{color:#12b76a}.badge-lock{color:#98a2b3}.topic-progress-card{background:#fff;border:1px solid #eaecf0;border-radius:16px;padding:16px}.topic-progress-card span{font-weight:700;font-size:.9rem}.topic-progress-card .code-progress-bar{margin-bottom:0}@media(max-width:575px){.code-progress-hero{align-items:flex-start}.level-orb{width:78px;height:78px;flex:0 0 78px}.level-orb strong{font-size:1.55rem}.level-orb span{font-size:.55rem}.badge-card{min-height:82px}}


/* Phase M2 — examens avancés */
.exam-review-item{border:1px solid #e4e7ec;border-radius:18px;padding:18px;margin-bottom:14px;background:#fff}.exam-review-item.is-correct{border-left:4px solid #12b76a}.exam-review-item.is-wrong{border-left:4px solid #f04438}.exam-review-head{display:flex;justify-content:space-between;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#667085}.exam-review-head strong{color:#12b76a}.is-wrong .exam-review-head strong{color:#f04438}.exam-review-item h3{font-size:1rem;line-height:1.45;margin:10px 0 12px}.exam-review-image{display:block;max-width:220px;max-height:180px;object-fit:contain;margin:8px auto 14px}.exam-answer-list{display:grid;gap:7px}.exam-answer-row{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid #eaecf0;border-radius:11px;font-size:.88rem}.exam-answer-row.right{border-color:#abefc6;background:#ecfdf3}.exam-answer-row.selected-wrong{border-color:#fecdca;background:#fef3f2}.exam-answer-row b{margin-left:auto;font-size:.7rem}.exam-explanation{display:flex;gap:10px;margin-top:12px;padding:12px;border-radius:12px;background:#f5f8ff;color:#344054}.exam-explanation i{color:#175cd3;font-size:1.1rem}.exam-explanation p{margin:3px 0 0;font-size:.84rem}.exam-history-card{border:1px solid #eaecf0;border-radius:18px;background:#fff;padding:16px}.exam-history-row{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid #f0f2f5}.exam-history-row:last-child{border-bottom:0}.exam-history-score{font-weight:900}.exam-history-score.pass{color:#12b76a}.exam-history-score.fail{color:#f04438}.exam-time{font-size:.78rem;color:#667085}

/* =====================================================================
   ROULEO M3 — bibliothèque pédagogique des panneaux
   ===================================================================== */
.rouleo-library-shell,.sign-detail-shell{max-width:1440px;margin:0 auto;padding:0 10px 30px}.rouleo-library-hero{background:radial-gradient(100% 150% at 90% 0%,#214d9b 0%,#0b1b33 62%,#071021 100%);color:#fff;border-radius:24px;padding:34px;display:flex;justify-content:space-between;gap:25px;align-items:end;overflow:hidden;position:relative}.rouleo-library-hero:after{content:"";position:absolute;right:-70px;bottom:-130px;width:360px;height:360px;border:55px solid rgba(255,255,255,.07);border-radius:50%}.rouleo-library-hero>*{position:relative;z-index:1}.rouleo-library-hero h1{font-size:clamp(2rem,4vw,3.1rem);font-weight:800;margin:.4rem 0}.rouleo-library-hero p{max-width:700px;color:rgba(255,255,255,.76);margin:0}.library-family-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.library-family-card{background:#fff;border:1px solid var(--dsmls-line);border-radius:18px;padding:15px;display:flex;align-items:center;gap:11px;color:var(--dsmls-ink);box-shadow:var(--dsmls-shadow);min-height:92px;transition:.16s}.library-family-card:hover{transform:translateY(-3px);box-shadow:var(--dsmls-shadow-md)}.library-family-card .family-icon{width:42px;height:42px;border-radius:13px;background:#eef3ff;color:var(--dsmls-blue);display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex:0 0 auto}.library-family-card strong,.library-family-card small,.library-family-card b{display:block}.library-family-card strong{font-family:Sora;font-size:.91rem}.library-family-card small{font-size:.72rem;color:var(--dsmls-muted);line-height:1.25;margin:3px 0}.library-family-card b{font-size:.72rem;color:var(--dsmls-blue)}.library-search{display:grid;grid-template-columns:1fr 250px 150px;gap:10px;margin-bottom:30px}.search-box{background:#fff;border:1px solid var(--dsmls-line);border-radius:12px;display:flex;align-items:center;padding:0 13px}.search-box i{color:var(--dsmls-muted)}.search-box input{border:0;outline:0;width:100%;padding:.68rem .7rem}.sign-library-card{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--dsmls-line);border-radius:18px;overflow:hidden;color:inherit;box-shadow:var(--dsmls-shadow);transition:.16s}.sign-library-card:hover{transform:translateY(-4px);box-shadow:var(--dsmls-shadow-md)}.sign-library-art{height:170px;background:linear-gradient(145deg,#f8faff,#eef2f8);display:flex;align-items:center;justify-content:center;padding:18px}.sign-library-art img{width:130px;height:130px;object-fit:contain;max-width:100%;max-height:100%}.sign-library-body{padding:15px}.sign-library-body h3{font-size:1rem;margin:.35rem 0 .35rem}.sign-library-body p{font-size:.78rem;color:var(--dsmls-muted);line-height:1.45;min-height:44px;margin-bottom:10px}.sign-library-body>span{font-size:.78rem;font-weight:700;color:var(--dsmls-blue)}.empty-state{text-align:center;padding:60px 20px;background:#fff;border:1px dashed var(--dsmls-line);border-radius:18px;color:var(--dsmls-muted)}.empty-state i{font-size:2rem}.sign-detail-card{display:grid;grid-template-columns:minmax(280px,45%) 1fr;gap:30px;background:#fff;border:1px solid var(--dsmls-line);border-radius:24px;padding:28px;box-shadow:var(--dsmls-shadow-md)}.sign-detail-art{min-height:430px;border-radius:20px;background:linear-gradient(145deg,#f8faff,#eaf0f8);display:flex;align-items:center;justify-content:center;position:relative}.sign-detail-art img{width:min(70%,360px);height:360px;object-fit:contain}.sign-code-pill{position:absolute;top:16px;left:16px;background:var(--dsmls-navy);color:#fff;border-radius:999px;padding:6px 12px;font-weight:800;font-size:.8rem}.sign-detail-copy{display:flex;flex-direction:column;justify-content:center}.sign-detail-copy h1{font-size:clamp(2rem,4vw,3.2rem);margin:.65rem 0}.remember-box{display:flex;gap:12px;background:#f4f8ff;border:1px solid #dbe7ff;border-radius:16px;padding:15px;margin:12px 0 18px}.remember-box>span{width:38px;height:38px;background:#fff1d8;color:#f29a1f;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.remember-box small,.remember-box strong{display:block}.remember-box small{font-size:.68rem;font-weight:800;color:var(--dsmls-muted);letter-spacing:.08em}.remember-box strong{font-size:.95rem;margin-top:3px}.source-note{display:flex;gap:9px;color:var(--dsmls-muted);font-size:.78rem}.back-link{font-weight:700;color:var(--dsmls-blue)}.related-question{background:#fff;border:1px solid var(--dsmls-line);border-radius:16px;padding:18px;margin-bottom:10px}.related-question h3{font-size:1rem;margin:.5rem 0}.related-question p{font-size:.8rem;color:var(--dsmls-muted);margin:0}.question-tag{font-size:.68rem;text-transform:uppercase;font-weight:800;color:var(--dsmls-blue);letter-spacing:.08em}
@media(max-width:1100px){.library-family-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:768px){.rouleo-library-hero{padding:24px;align-items:flex-start;flex-direction:column}.library-family-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.library-search{grid-template-columns:1fr}.sign-detail-card{grid-template-columns:1fr;padding:15px}.sign-detail-art{min-height:300px}.sign-detail-art img{height:260px}.sign-library-art{height:145px}.sign-library-art img{width:105px;height:105px}}

/* ROULEO Code M3.1 — bibliothèque enrichie */
.library-hero-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.library-hero-stats span{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);border-radius:999px;font-size:.72rem;color:rgba(255,255,255,.82)}
.library-hero-stats strong{color:#fff}
.library-section{scroll-margin-top:90px}
.library-section-heading{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:16px}
.library-section-heading p{margin:5px 0 0;color:var(--dsmls-muted);font-size:.82rem}
.library-see-all{font-size:.8rem;font-weight:800;color:var(--dsmls-blue);white-space:nowrap}
.sign-library-art{height:190px;position:relative;background:linear-gradient(145deg,#fbfcfe,#edf2f8);padding:20px}
.sign-library-art img{width:142px;height:142px;object-fit:contain}
.sign-code-mini{position:absolute;top:10px;left:10px;background:#fff;border:1px solid var(--dsmls-line);border-radius:999px;padding:4px 8px;font-size:.64rem;font-weight:800;color:var(--dsmls-ink);z-index:2}
.sign-library-body h3{min-height:42px}
@media(max-width:768px){.library-section-heading{align-items:flex-start;flex-direction:column}.library-see-all{display:none}.sign-library-art{height:155px}.sign-library-art img{width:112px;height:112px}}
:root{--rouleo-radius-sm:8px;--rouleo-radius-md:12px;--rouleo-radius-lg:18px;--rouleo-shadow-sm:0 4px 14px rgba(11,27,51,.07);--rouleo-shadow-md:0 10px 28px rgba(11,27,51,.11)}
.card,.kpi-card,.dsmls-feature-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.card:hover,.kpi-card:hover,.dsmls-feature-card:hover{transform:translateY(-2px);box-shadow:var(--rouleo-shadow-md)}.sidebar-nav a,.mobile-side-link,.btn{transition:transform .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease}.sidebar-nav a:hover,.mobile-side-link:hover{transform:translateX(2px)}.empty-state{padding:3.5rem 1.5rem;text-align:center;border:1px dashed var(--dsmls-line,#dfe4ee);border-radius:var(--rouleo-radius-lg);background:rgba(255,255,255,.75)}.empty-state-icon{width:64px;height:64px;border-radius:18px;display:inline-flex;align-items:center;justify-content:center;background:rgba(30,94,255,.09);color:var(--dsmls-blue,#1e5eff);font-size:1.6rem;margin-bottom:1rem}


/* =====================================================================
   ROULEO DESIGN V1 — BLUE FIRST + YELLOW ACCENT
   ---------------------------------------------------------------------
   Visual-only layer. No routes, controllers, database logic, auth,
   SMTP, roles, permissions or business rules are changed.
   Blue remains the dominant ROULEO color; yellow is used sparingly
   for identity, emphasis and primary actions.
   ===================================================================== */

:root {
    --rouleo-yellow: #F5B400;
    --rouleo-yellow-dark: #D99A00;
    --rouleo-yellow-soft: #FFF7D6;
    --rouleo-blue-soft: #EEF4FF;
    --rouleo-blue-line: #D8E5FF;
    --rouleo-surface-soft: #F8FAFD;
}

/* --- Brand ---------------------------------------------------------- */
.navbar-brand .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 4px 14px rgba(11,27,51,.22);
    border: 2px solid rgba(245,180,0,.45);
}
.drawer-mark {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 2px solid rgba(245,180,0,.45);
}
.navbar-brand span { letter-spacing: .14em; }

/* --- Navbar / navigation ------------------------------------------- */
.navbar {
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.navbar .nav-link {
    transition: color .15s ease, background-color .15s ease;
    border-radius: 10px;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #fff !important;
    background: rgba(255,255,255,.06);
}

/* Blue stays the primary CTA. Yellow is reserved for emphasis. */
.btn-primary {
    background: var(--dsmls-blue);
    border-color: var(--dsmls-blue);
    box-shadow: 0 7px 18px rgba(30,94,255,.22);
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--dsmls-blue-dark);
    border-color: var(--dsmls-blue-dark);
}
.btn-warning {
    background: var(--rouleo-yellow);
    border-color: var(--rouleo-yellow);
    color: #0B1B33;
    box-shadow: 0 7px 18px rgba(245,180,0,.22);
}
.btn-warning:hover,
.btn-warning:focus {
    background: var(--rouleo-yellow-dark);
    border-color: var(--rouleo-yellow-dark);
    color: #0B1B33;
}
.btn-outline-warning {
    color: #9A6B00;
    border-color: #E5B52F;
}
.btn-outline-warning:hover {
    background: var(--rouleo-yellow-soft);
    color: #6F4C00;
    border-color: var(--rouleo-yellow);
}

/* --- Sidebar ------------------------------------------------------- */
.dsmls-sidebar a.side-link {
    border: 1px solid transparent;
}
.dsmls-sidebar a.side-link:hover {
    background: rgba(30,94,255,.12);
    border-color: rgba(30,94,255,.18);
}
.dsmls-sidebar a.side-link.active {
    background: linear-gradient(90deg, rgba(30,94,255,.30), rgba(30,94,255,.08));
    box-shadow: inset 3px 0 0 var(--dsmls-blue), inset -2px 0 0 rgba(245,180,0,.75);
}

/* --- Page headings ------------------------------------------------- */
.section-title {
    position: relative;
    padding-left: .9rem;
    margin-bottom: 1rem;
}
.section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: .15rem;
    bottom: .15rem;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--dsmls-blue), var(--rouleo-yellow));
}
.section-title h1,
.section-title h2,
.section-title h3 {
    margin-bottom: .2rem;
}
.page-title {
    font-weight: 800;
    color: var(--dsmls-ink);
}

/* --- Cards / panels ------------------------------------------------ */
.card,
.kpi-card,
.dsmls-feature-card {
    border-color: #E0E7F2;
    box-shadow: 0 5px 18px rgba(16,23,40,.055);
}
.card-header {
    background: linear-gradient(180deg, #FFFFFF, #F9FBFE);
    border-bottom-color: #E3E9F3;
    font-weight: 700;
}
.kpi-card {
    position: relative;
    overflow: hidden;
}
.kpi-card::after {
    content: "";
    position: absolute;
    right: -26px;
    top: -26px;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: rgba(245,180,0,.07);
    pointer-events: none;
}
.kpi-card .kpi-icon {
    background: var(--rouleo-blue-soft);
    color: var(--dsmls-blue);
}

/* --- Tables: clearer hierarchy, softer grid, better scanning -------- */
.table-responsive {
    background: #fff;
    border: 1px solid #DDE5F0;
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(16,23,40,.045);
    overflow-x: auto;
    overflow-y: hidden;
}
.table-responsive > .table {
    margin-bottom: 0;
}
.table {
    --bs-table-bg: transparent;
    color: var(--dsmls-ink);
}
.table thead th {
    background: #F4F7FC;
    color: #52617A;
    border-bottom: 1px solid #D9E2EF;
    padding: .85rem .9rem;
    font-size: .72rem;
    letter-spacing: .055em;
}
.table tbody td {
    padding: .82rem .9rem;
    border-color: #E8EDF4;
}
.table tbody tr {
    transition: background-color .14s ease;
}
.table-hover tbody tr:hover {
    background: #F7FAFF;
}
.table tbody tr:nth-child(even) {
    background-color: rgba(248,250,253,.58);
}
.table tbody tr:nth-child(even):hover {
    background-color: #F7FAFF;
}
.table .btn {
    box-shadow: none;
}
.table .badge.bg-warning {
    color: #684900 !important;
}

/* --- Forms: cleaner fields and stronger focus --------------------- */
.form-label {
    margin-bottom: .42rem;
    font-weight: 650;
}
.form-control,
.form-select {
    min-height: 43px;
    background: #fff;
    border: 1px solid #D5DFEC;
    border-radius: 11px;
    box-shadow: inset 0 1px 2px rgba(16,23,40,.025);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control::placeholder {
    color: #98A2B3;
}
.form-control:hover,
.form-select:hover {
    border-color: #B8C7DD;
}
.form-control:focus,
.form-select:focus {
    background: #fff;
    border-color: var(--dsmls-blue);
    box-shadow: 0 0 0 3px rgba(30,94,255,.12);
}
textarea.form-control {
    min-height: 110px;
}
.form-check-input {
    border-color: #B8C7DD;
}
.form-check-input:checked {
    background-color: var(--dsmls-blue);
    border-color: var(--dsmls-blue);
}
.input-group .form-control:focus {
    z-index: 3;
}

/* --- Alerts / notices --------------------------------------------- */
.alert {
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(16,23,40,.035);
}
.alert-warning {
    background: #FFF8DE;
    color: #6E5000;
    border-left-color: var(--rouleo-yellow);
}
.alert-info {
    background: var(--rouleo-blue-soft);
    color: #1447CC;
    border-left-color: var(--dsmls-blue);
}

/* --- Badges -------------------------------------------------------- */
.badge.bg-warning {
    background-color: var(--rouleo-yellow) !important;
    color: #624500 !important;
}
.badge.bg-primary {
    background-color: var(--dsmls-blue) !important;
}

/* --- Search / filter surfaces ------------------------------------- */
.search-box,
.filter-bar,
.filter-card {
    background: #fff;
    border: 1px solid #DDE5F0;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(16,23,40,.035);
}
.search-box:focus-within {
    border-color: var(--dsmls-blue);
    box-shadow: 0 0 0 3px rgba(30,94,255,.10);
}

/* --- Empty states -------------------------------------------------- */
.empty-state {
    background: linear-gradient(180deg, #FFFFFF, #FAFCFF);
    border-color: #D7E1EF;
}
.empty-state-icon {
    background: var(--rouleo-blue-soft);
    color: var(--dsmls-blue);
    box-shadow: inset 0 0 0 1px var(--rouleo-blue-line);
}

/* --- Primary action emphasis -------------------------------------- */
.btn-primary i,
.btn-warning i {
    margin-right: .15rem;
}

/* --- Mobile: keep the same hierarchy without making the UI heavy --- */
@media (max-width: 767.98px) {
    .table-responsive {
        border-radius: 13px;
    }
    .table thead th,
    .table tbody td {
        padding: .72rem .7rem;
    }
    .card-body {
        padding: 1.1rem;
    }
    .navbar-brand .brand-mark {
        width: 34px;
        height: 34px;
    }
}

/* ROULEO — profils publics enrichis */
.marketplace-school-cover{height:140px;background:linear-gradient(135deg,var(--dsmls-navy),var(--dsmls-blue));border-radius:var(--dsmls-radius) var(--dsmls-radius) 0 0;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.marketplace-school-cover:after{content:"";position:absolute;right:-25px;bottom:-35px;width:150px;height:150px;border-radius:50%;background:rgba(245,180,0,.16)}
.marketplace-school-cover img{width:82px;height:82px;object-fit:cover;border-radius:20px;background:#fff;padding:5px;box-shadow:0 10px 25px rgba(0,0,0,.2);position:relative;z-index:1}
.marketplace-school-cover i{font-size:2.6rem;color:#fff;opacity:.9;position:relative;z-index:1}
.school-public-hero{border-radius:22px;overflow:hidden;color:#fff;background:linear-gradient(120deg,var(--dsmls-navy) 0%,#12376f 60%,var(--dsmls-blue) 100%);box-shadow:0 14px 32px rgba(8,29,62,.16);position:relative}
.school-public-hero:after{content:"";position:absolute;width:250px;height:250px;border-radius:50%;right:-70px;top:-90px;background:rgba(245,180,0,.12)}
.school-public-hero-content{position:relative;z-index:1;padding:2rem}
.school-public-brand-row{display:flex;gap:1rem;align-items:center}
.school-public-brand-row h1{font-weight:850;margin:0 0 .35rem;font-size:clamp(1.8rem,4vw,2.8rem)}
.school-public-brand-row .lead{opacity:.9}
.school-public-logo{width:86px;height:86px;object-fit:cover;border-radius:20px;background:#fff;padding:5px;box-shadow:0 10px 25px rgba(0,0,0,.2);flex:0 0 auto}
.school-public-logo-fallback{display:flex;align-items:center;justify-content:center;color:var(--dsmls-blue);font-size:2rem}
.school-public-actions{margin-top:1.35rem;display:flex;flex-wrap:wrap;gap:.65rem}
.school-public-actions .form-select{min-width:210px}
.school-public-section{background:#fff;border:1px solid #e0e7f2;border-radius:18px;padding:1.35rem;margin-bottom:1.25rem;box-shadow:0 5px 18px rgba(16,23,40,.045)}
.school-public-section-title{display:flex;gap:.75rem;align-items:center;margin-bottom:1rem}
.school-public-section-title .icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--rouleo-blue-soft);color:var(--dsmls-blue);font-size:1.1rem;flex:0 0 auto}
.school-public-section-title h2{font-size:1.2rem;margin:0;font-weight:800}
.school-public-copy{line-height:1.8;color:#44516a}
.school-person-card{display:flex;gap:.85rem;align-items:flex-start;padding:1rem;border:1px solid #e3e9f3;border-radius:15px;background:linear-gradient(180deg,#fff,#fbfcff)}
.school-person-card img,.school-person-avatar{width:64px;height:64px;border-radius:16px;object-fit:cover;flex:0 0 auto}
.school-person-avatar{display:flex;align-items:center;justify-content:center;background:var(--rouleo-blue-soft);color:var(--dsmls-blue);font-size:1.45rem}
.school-person-card h5{margin:0 0 .25rem;font-weight:800}
.school-public-table{border-radius:14px}
.school-public-table .table thead th{background:#f4f7fc}
.school-vehicle-card{border:1px solid #e0e7f2;border-radius:16px;overflow:hidden;height:100%;background:#fff}
.school-vehicle-card>img,.school-vehicle-placeholder{width:100%;height:170px;object-fit:cover}
.school-vehicle-placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eef4ff,#f8fafc);font-size:3rem;color:var(--dsmls-blue)}
.school-gallery-item{margin:0;border-radius:15px;overflow:hidden;background:#f5f7fb;position:relative}
.school-gallery-item img{display:block;width:100%;height:180px;object-fit:cover;transition:transform .2s ease}
.school-gallery-item:hover img{transform:scale(1.03)}
.school-gallery-item figcaption{padding:.6rem .75rem;font-size:.8rem;color:#52617a;background:#fff}
.school-public-side-card{background:#fff;border:1px solid #e0e7f2;border-radius:18px;box-shadow:0 8px 24px rgba(16,23,40,.06);overflow:hidden}
.school-public-side-card .card-body{padding:1.35rem}
.school-public-side-card h3{font-weight:850;margin:.25rem 0 .5rem}
.profile-completion-card{background:linear-gradient(135deg,#fff,#f8fbff)}
.public-editor-row{border:1px solid #e2e8f1;border-radius:15px;padding:1rem;margin-bottom:.8rem;background:#fff}
.public-editor-row:last-child{margin-bottom:0}
.school-profile-logo-preview{width:72px;height:72px;object-fit:cover;border-radius:14px;border:1px solid #e1e7f0;padding:3px;background:#fff}
.gallery-admin-card{border:1px solid #e0e7f2;border-radius:14px;overflow:hidden;background:#fff}
.gallery-admin-card img{width:100%;height:150px;object-fit:cover}
@media(max-width:767.98px){.school-public-hero-content{padding:1.25rem}.school-public-brand-row{align-items:flex-start}.school-public-logo{width:66px;height:66px;border-radius:16px}.school-public-actions{display:grid}.school-public-actions>*{width:100%}.school-gallery-item img{height:140px}.public-editor-row{padding:.8rem}}

/* ROULEO School Public Profile V2 — manager photo */
.school-profile-manager-preview {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 16px;
    border: 2px solid #DDE5F0;
    background: #F3F6FB;
    display: block;
}

/* ROULEO V3 — dedicated public manager photo */
.school-person-photo {
    width: 92px;
    height: 92px;
    min-width: 92px;
    border-radius: 18px;
    object-fit: cover;
    display: block;
    border: 1px solid #DDE5F0;
    background: #F3F6FB;
}


/* ================================================================
   ROULEO — DESKTOP POLISH & QA
   Conservative visual pass: no business logic or routes changed.
   ================================================================ */
:root {
    --rouleo-yellow: #F4C542;
    --rouleo-yellow-soft: #FFF7D6;
}
.table > :not(caption) > * > * { vertical-align: middle; padding: .78rem .85rem; }
.table thead th {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .035em;
    color: var(--dsmls-muted); font-weight: 700; white-space: nowrap;
}
.table tbody tr { transition: background-color .15s ease; }
.table tbody tr:hover { background: rgba(30, 94, 255, .035); }
.form-label { font-weight: 600; color: var(--dsmls-ink); margin-bottom: .42rem; }
.form-control, .form-select { min-height: 42px; border-radius: 10px; border-color: var(--dsmls-line); }
.form-control:focus, .form-select:focus {
    border-color: var(--dsmls-blue); box-shadow: 0 0 0 .2rem rgba(30, 94, 255, .10);
}
.btn-toolbar, .d-flex.gap-2, .d-flex.gap-3 { flex-wrap: wrap; }
.badge.bg-warning, .badge.text-bg-warning { color: #4A3900 !important; }
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, .form-select:focus-visible {
    outline: 3px solid rgba(244, 197, 66, .55); outline-offset: 2px;
}
.table-responsive { scrollbar-width: thin; }
@media (min-width: 992px) {
    .page-header, .content-header { margin-bottom: 1.25rem; }
    .kpi-card { min-height: 132px; }
    .sidebar .nav-link, .school-sidebar .nav-link {
        border-radius: 10px; margin: 2px 8px;
    }
}

/* ---------------------------------------------------------------------
   ROULEO — KPI compactes sur mobile
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .kpi-grid {
        --bs-gutter-x: .65rem;
        --bs-gutter-y: .65rem;
    }

    .kpi-card {
        min-height: 112px;
        padding: .8rem .75rem;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        overflow: hidden;
        background:
            linear-gradient(145deg, rgba(30,94,255,.045), rgba(255,255,255,.98));
    }

    .kpi-card::after {
        content: "";
        position: absolute;
        width: 42px;
        height: 42px;
        right: -15px;
        bottom: -15px;
        border-radius: 50%;
        background: rgba(247, 190, 0, .14);
        pointer-events: none;
    }

    .kpi-card .kpi-icon {
        width: 32px;
        height: 32px;
        margin-bottom: .42rem;
        border-radius: 9px;
        font-size: .92rem;
    }

    .kpi-card .kpi-value {
        font-size: 1.15rem;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .kpi-card .kpi-label {
        font-size: .70rem;
        line-height: 1.2;
        margin-top: .22rem;
    }
}


/* ---------------------------------------------------------------------
   ROULEO — Super Admin mobile dashboard refinement
   Keep desktop hierarchy intact; compact statistics into a clean 2-column
   grid on phones and prevent oversized cards/labels.
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .super-admin-dashboard .kpi-card,
    .kpi-card {
        min-width: 0;
    }

    /* Bootstrap rows containing KPI cards should remain visually balanced. */
    .row.g-3 > [class*="col-6"] > .kpi-card {
        min-height: 118px;
    }

    .kpi-card .kpi-label {
        max-width: 100%;
        word-break: normal;
        overflow-wrap: anywhere;
    }
}

/* A little more breathing room for the main mobile page without changing
   the established ROULEO desktop spacing. */
@media (max-width: 575.98px) {
    main.container,
    .container {
        --bs-gutter-x: 1rem;
    }

    .kpi-card {
        box-shadow: 0 6px 18px rgba(16, 35, 64, .08);
    }
}

/* ROULEO Code V7 — adaptive learning */
.code-study-plan { min-height: 100%; border: 1px solid rgba(16,32,58,.08); }
.code-study-plan strong { color: #10203a; }
/* ================= MINT PORTAL ================= */
.mint-hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:1.2rem;padding:1.65rem 1.8rem;border-radius:22px;color:#fff;background:linear-gradient(135deg,#071b2d 0%,#0b3447 55%,#0a6b52 100%);box-shadow:0 18px 45px rgba(5,28,45,.18)}
.mint-hero:after{content:"";position:absolute;right:-80px;top:-100px;width:280px;height:280px;border-radius:50%;background:linear-gradient(90deg,rgba(0,122,94,.25) 0 33%,rgba(206,17,38,.25) 33% 66%,rgba(252,209,22,.25) 66%);filter:blur(1px)}
.mint-hero.compact{padding:1.35rem 1.55rem}.mint-hero h1,.mint-hero h2{font-family:'Sora',sans-serif;font-weight:800;margin:.15rem 0 .35rem}.mint-hero p{margin:0;color:rgba(255,255,255,.78);max-width:850px}.mint-kicker,.mint-section-label{font-size:.68rem;letter-spacing:.14em;font-weight:800}.mint-kicker{color:#fcd116}.mint-flag{position:relative;z-index:1;width:56px;height:56px;flex:0 0 56px;padding:7px;border-radius:16px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2)}.mint-flag img{width:100%;height:100%;object-fit:cover;border-radius:8px}.mint-status{position:relative;z-index:1;margin-left:auto;white-space:nowrap;padding:.5rem .8rem;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.08);font-size:.78rem}.mint-status span{display:inline-block;width:7px;height:7px;border-radius:50%;background:#52d48b;margin-right:5px}.mint-kpi,.mint-mini-kpi{height:100%;background:#fff;border:1px solid #e6ebf0;border-radius:17px;padding:1rem;box-shadow:0 8px 25px rgba(20,35,50,.06)}.mint-kpi-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#eef7f3;color:#087c60;margin-bottom:.7rem}.mint-kpi-value{font-size:1.55rem;font-weight:800;color:#092235}.mint-kpi-label{font-size:.78rem;color:#6d7884}.mint-panel{background:#fff;border:1px solid #e5ebef;border-radius:19px;box-shadow:0 8px 28px rgba(15,34,48,.055);padding:1.15rem}.mint-panel-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}.mint-panel-head h4{margin:.15rem 0 0;font-weight:800}.mint-program-row,.mint-news-row{display:flex;align-items:center;gap:.75rem;padding:.75rem 0;border-bottom:1px solid #edf0f2}.mint-program-row:last-child,.mint-news-row:last-child{border-bottom:0}.mint-program-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#f1f6ff;color:#1e5eff}.mint-program-row strong,.mint-news-row strong{display:block;font-size:.9rem}.mint-program-row small,.mint-news-row small{display:block;color:#7b8792;margin-top:2px}.mint-trust{background:linear-gradient(135deg,#f7fbf9,#fff);border-color:#d7ebe3}.mint-badge{background:#e9f5ef;color:#096b53;border:1px solid #cce6da}.mint-priority{width:4px;min-height:36px;border-radius:8px;background:#a7b0b8}.mint-priority.important{background:#f4b740}.mint-priority.urgent{background:#ce1126}.mint-priority.normal{background:#0a8a6a}.mint-mini-flag{width:42px;height:28px;object-fit:cover;border-radius:5px;border:1px solid #ddd}.mint-level-basic{background:#f1f3f5;color:#59636d}.mint-level-aggregated{background:#e8f5ef;color:#087c60}.mint-level-full{background:#e8f0ff;color:#1e5eff}.mint-school-detail{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.75rem;background:#f8fafb;border-radius:12px}.mint-course-card{height:100%;padding:1.15rem;border-radius:18px;background:#fff;border:1px solid #e4e9ed;box-shadow:0 8px 24px rgba(20,35,50,.05)}.mint-course-top{display:flex;justify-content:space-between;align-items:center}.mint-course-number{font-weight:900;color:#0a8061;font-size:.82rem}.mint-course-card h5{font-weight:800;margin-top:.9rem}.mint-course-card p{color:#68747e;font-size:.88rem;min-height:66px}.mint-question-summary{padding:.7rem 1rem;border-radius:14px;background:#eaf6f1;border:1px solid #cfe9dd;text-align:right}.mint-question-summary strong{font-size:1.5rem;display:block;color:#087c60;line-height:1}.mint-question-summary span{font-size:.7rem;color:#567}.mint-mini-kpi{text-align:center;padding:.8rem}.mint-mini-kpi i{display:block;color:#087c60;font-size:1.1rem;margin-bottom:.35rem}.mint-mini-kpi strong{display:block;font-size:1.35rem}.mint-mini-kpi span{font-size:.7rem;color:#6d7884}.mint-announcement{display:flex;gap:.85rem;padding:1rem 0;border-bottom:1px solid #edf0f2}.mint-announcement:last-child{border-bottom:0}.mint-public-news{height:100%;background:#fff;border:1px solid #e3e9ed;border-radius:18px;padding:1.25rem;box-shadow:0 8px 25px rgba(20,35,50,.05)}.mint-public-news h4{font-weight:800}.mint-public-news p{color:#58656f;white-space:pre-line}.mint-hero+.row .table{--bs-table-bg:transparent}
.mint-share-option{display:flex;gap:.9rem;align-items:flex-start;padding:1rem;border:1px solid #e3e9ed;border-radius:14px;cursor:pointer;background:#fff}.mint-share-option:has(input:checked){border-color:#0a8061;background:#f4fbf8;box-shadow:0 0 0 2px rgba(10,128,97,.08)}.mint-share-option input{margin-top:.25rem}.mint-share-option strong{display:block}.mint-share-option small{display:block;color:#68747e;margin-top:.2rem}

/* ================================================================
   ROULEO V16 — Institutional MINT + Learner visual polish
   The Cameroon identity is used as an accent system, not as a full-page flag.
   ================================================================ */
.mint-page{--mint-green:#007a5e;--mint-red:#ce1126;--mint-yellow:#fcd116;--mint-ink:#10212f;--mint-muted:#667784;--mint-line:#e5ebef;--mint-soft:#f5f8f9;color:var(--mint-ink)}
.mint-page .mint-hero-pro{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"brand body status";gap:1.25rem;align-items:center;padding:1.35rem 1.5rem;border-radius:24px;background:linear-gradient(135deg,#071c2b 0%,#0a3543 58%,#075c49 100%);box-shadow:0 20px 55px rgba(6,32,47,.18);color:#fff;min-height:190px}
.mint-hero-pro__accent{position:absolute;left:0;top:0;bottom:0;width:7px;display:flex;flex-direction:column}.mint-hero-pro__accent span{flex:1}.mint-hero-pro__accent span:nth-child(1){background:var(--mint-green)}.mint-hero-pro__accent span:nth-child(2){background:var(--mint-red)}.mint-hero-pro__accent span:nth-child(3){background:var(--mint-yellow)}
.mint-hero-pro__brand{grid-area:brand;align-self:start;display:flex;align-items:center;gap:.75rem;padding-top:.15rem}.mint-seal{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 0 0 5px rgba(255,255,255,.035);font-weight:900;letter-spacing:.08em}.mint-kicker-pro{font-size:.63rem;letter-spacing:.14em;font-weight:800;color:#fcd116}.mint-ministry{font-family:'Sora',sans-serif;font-size:.78rem;font-weight:800;margin-top:.2rem}.mint-hero-pro__body{grid-area:body;position:relative;z-index:2}.mint-chip-pro{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .65rem;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.07);font-size:.64rem;font-weight:800;letter-spacing:.09em}.mint-hero-pro h1{font-size:clamp(1.9rem,3vw,2.65rem);margin:.6rem 0 .3rem;font-weight:850;letter-spacing:-.04em}.mint-hero-pro p{max-width:680px;margin:0;color:rgba(255,255,255,.75);font-size:.92rem;line-height:1.55}.mint-hero-pro__status{grid-area:status;display:flex;align-items:center;gap:.6rem;padding:.65rem .8rem;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);border-radius:14px;min-width:190px}.mint-hero-pro__status strong{display:block;font-size:.78rem}.mint-hero-pro__status small{display:block;color:rgba(255,255,255,.58);font-size:.65rem;margin-top:.12rem}.mint-live-dot{width:9px;height:9px;border-radius:50%;background:#45d483;box-shadow:0 0 0 5px rgba(69,212,131,.12);flex:0 0 9px}.mint-watermark{position:absolute;right:-15px;bottom:-24px;font-size:5.5rem;font-weight:900;letter-spacing:-.08em;color:rgba(255,255,255,.035);pointer-events:none}
.mint-welcome-row{display:flex;align-items:end;justify-content:space-between;gap:1rem}.mint-eyebrow{font-size:.64rem;letter-spacing:.14em;font-weight:900;color:var(--mint-green)}.mint-welcome-row h2{font-size:1.3rem;margin:.25rem 0 .2rem;font-weight:850}.mint-welcome-row p{margin:0;color:var(--mint-muted);font-size:.82rem}.mint-date-card{display:flex;align-items:center;gap:.55rem;padding:.55rem .75rem;background:#fff;border:1px solid var(--mint-line);border-radius:13px;box-shadow:0 7px 20px rgba(17,37,51,.05)}.mint-date-card i{color:var(--mint-green);font-size:1.1rem}.mint-date-card small,.mint-date-card strong{display:block}.mint-date-card small{font-size:.61rem;color:#84919a}.mint-date-card strong{font-size:.76rem}
.mint-kpi-pro{position:relative;overflow:hidden;height:100%;padding:1rem 1rem .85rem;background:#fff;border:1px solid var(--mint-line);border-radius:17px;box-shadow:0 8px 25px rgba(20,35,50,.055);transition:.18s ease}.mint-kpi-pro:hover{transform:translateY(-3px);box-shadow:0 15px 35px rgba(20,35,50,.1)}.mint-kpi-pro__top{display:flex;justify-content:space-between;align-items:center}.mint-kpi-pro__icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:1rem}.mint-kpi-green .mint-kpi-pro__icon{background:#e8f6f0;color:var(--mint-green)}.mint-kpi-yellow .mint-kpi-pro__icon{background:#fff8db;color:#a67c00}.mint-kpi-red .mint-kpi-pro__icon{background:#fff0f1;color:var(--mint-red)}.mint-kpi-pro__dot{width:7px;height:7px;border-radius:50%;background:#d9e2e5}.mint-kpi-green .mint-kpi-pro__dot{background:var(--mint-green)}.mint-kpi-yellow .mint-kpi-pro__dot{background:var(--mint-yellow)}.mint-kpi-red .mint-kpi-pro__dot{background:var(--mint-red)}.mint-kpi-pro__value{font-family:'Sora',sans-serif;font-size:1.65rem;font-weight:850;margin-top:.7rem;letter-spacing:-.03em}.mint-kpi-pro__label{font-size:.7rem;color:#71808a;margin-top:.1rem}.mint-kpi-pro__line{height:3px;width:34px;border-radius:99px;margin-top:.75rem}.mint-kpi-green .mint-kpi-pro__line{background:var(--mint-green)}.mint-kpi-yellow .mint-kpi-pro__line{background:var(--mint-yellow)}.mint-kpi-red .mint-kpi-pro__line{background:var(--mint-red)}
.mint-panel-pro{position:relative;background:#fff;border:1px solid var(--mint-line);border-radius:20px;box-shadow:0 9px 30px rgba(15,34,48,.055);padding:1.25rem}.mint-panel-pro__head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem}.mint-panel-pro__head h3{font-size:1.05rem;font-weight:850;margin:.2rem 0 .2rem}.mint-panel-pro__head p{font-size:.75rem;color:#77858e;margin:0}.mint-btn-outline{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;padding:.5rem .7rem;border:1px solid #cfdde0;border-radius:10px;color:var(--mint-green);font-size:.72rem;font-weight:800;background:#fff}.mint-btn-outline:hover{background:#eff8f5;border-color:#a9d6c7;color:#075d49}.mint-icon-btn{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#edf7f3;color:var(--mint-green)}.mint-panel-accent{background:linear-gradient(145deg,#fff,#f7fbf9)}
.mint-region-list{display:grid;gap:.15rem}.mint-region-row{display:grid;grid-template-columns:minmax(150px,1.1fr) 180px minmax(100px,.8fr) 45px;align-items:center;gap:.75rem;padding:.72rem .15rem;border-bottom:1px solid #eef2f3}.mint-region-row:last-child{border-bottom:0}.mint-region-name{display:flex;align-items:center;gap:.55rem;font-size:.78rem}.mint-region-mark{width:9px;height:24px;border-radius:5px;background:linear-gradient(to bottom,var(--mint-green) 0 33%,var(--mint-red) 33% 66%,var(--mint-yellow) 66%)}.mint-region-numbers{display:flex;gap:.8rem;color:#8a969d;font-size:.63rem}.mint-region-numbers b{color:#263b46;font-size:.74rem}.mint-region-bar{height:7px;background:#edf1f2;border-radius:99px;overflow:hidden}.mint-region-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--mint-green),#26b18a)}.mint-region-row>small{font-size:.63rem;color:#71808a;text-align:right}
.mint-program-pro{display:flex;align-items:center;gap:.65rem;padding:.72rem 0;border-bottom:1px solid #edf1f2}.mint-program-pro:last-child{border-bottom:0}.mint-program-pro__icon{width:35px;height:35px;display:grid;place-items:center;border-radius:11px;background:#edf6ff;color:#1e5eff}.mint-program-pro strong{display:block;font-size:.76rem}.mint-program-pro small{display:block;color:#84919a;font-size:.63rem;margin-top:.12rem}.mint-program-num{margin-left:auto;font-size:.63rem;font-weight:900;color:#b2bdc2}
.mint-news-pro{display:flex;align-items:center;gap:.7rem;padding:.72rem 0;border-bottom:1px solid #edf1f2}.mint-news-pro:last-child{border-bottom:0}.mint-news-icon{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;background:#eef7f3;color:var(--mint-green)}.mint-news-icon.important{background:#fff8df;color:#a67c00}.mint-news-icon.urgent{background:#fff0f1;color:var(--mint-red)}.mint-news-pro strong{display:block;font-size:.76rem}.mint-news-pro small{display:block;color:#84919a;font-size:.62rem;margin-top:.12rem}.mint-status-badge{margin-left:auto;font-size:.58rem;font-weight:800;padding:.3rem .5rem;border-radius:999px;background:#f2f4f5;color:#65727a}.mint-status-badge.published{background:#e8f6f0;color:#087c60}.mint-status-badge.draft{background:#fff8df;color:#8a6900}.mint-empty-pro{display:flex;align-items:center;gap:.65rem;padding:1rem;color:#87939a;font-size:.75rem}.mint-empty-pro i{font-size:1.2rem}
.mint-governance{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;background:linear-gradient(145deg,#f5fbf8,#fff);border-color:#cfe7dc}.mint-governance-seal{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#e5f5ee;color:var(--mint-green);font-size:1.2rem}.mint-governance h3{font-size:1rem;margin:.2rem 0 .3rem}.mint-governance p{font-size:.74rem;line-height:1.55;color:#697780;margin:0}.mint-sharing-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.15rem}.mint-sharing-grid span{padding:.6rem;border-radius:11px;background:#fff;border:1px solid #dfece6}.mint-sharing-grid b{display:block;font-size:.67rem}.mint-sharing-grid small{display:block;color:#7e8c94;font-size:.57rem;margin-top:.15rem}
.mint-quick-actions{padding:1.1rem 0 0}.mint-quick-actions h3{font-size:1rem;margin:.2rem 0 .8rem}.mint-action-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}.mint-action-grid a{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:.65rem;align-items:center;padding:.8rem;border-radius:15px;background:#fff;border:1px solid var(--mint-line);box-shadow:0 6px 18px rgba(20,35,50,.04);color:var(--mint-ink);transition:.16s}.mint-action-grid a:hover{transform:translateY(-2px);border-color:#b9d9cf}.mint-action-grid i{grid-row:1/3;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#edf7f3;color:var(--mint-green)}.mint-action-grid span{font-size:.72rem;font-weight:850}.mint-action-grid small{font-size:.59rem;color:#7d8b93}.mint-action-grid a>i:last-child{width:auto;height:auto;background:none;color:#a1adb2}
.mint-page .mint-course-card{border:1px solid var(--mint-line);box-shadow:0 9px 25px rgba(20,35,50,.05);position:relative;overflow:hidden}.mint-page .mint-course-card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--mint-green) 0 33%,var(--mint-red) 33% 66%,var(--mint-yellow) 66%)}.mint-mini-seal{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,var(--mint-green),#07513f);color:#fff;font-weight:900;font-size:.72rem;letter-spacing:.08em;box-shadow:0 8px 18px rgba(0,122,94,.18)}.mint-page .table{font-size:.76rem}.mint-page .table thead th{font-size:.63rem;text-transform:uppercase;letter-spacing:.08em;color:#71808a;background:#f7f9fa;border-bottom-color:#dfe7e9}.mint-page .table tbody td{border-color:#eef2f3}.mint-page .table tbody tr:hover{background:#f8fbfa}.mint-page .form-control,.mint-page .form-select{border-color:#d9e3e5;border-radius:10px;font-size:.78rem}.mint-page .form-control:focus,.mint-page .form-select:focus{border-color:#80bbaa;box-shadow:0 0 0 .2rem rgba(0,122,94,.09)}

/* Learner feature cards — visual treatment for the V14 additions. */
.learner-hub-hero{position:relative;overflow:hidden;padding:1.5rem 1.6rem;border-radius:22px;background:linear-gradient(135deg,#0b1b33,#1451a1);color:#fff;box-shadow:0 16px 38px rgba(11,27,51,.14)}.learner-hub-hero:after{content:"";position:absolute;right:-35px;top:-60px;width:180px;height:180px;border-radius:50%;border:28px solid rgba(255,255,255,.06)}.learner-hub-hero .dsmls-eyebrow{color:#7ddcff}.learner-hub-hero h3{font-weight:850}.learner-hub-hero p{color:rgba(255,255,255,.7)}.learner-hub-hero>.badge{background:rgba(255,255,255,.1)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18);padding:.55rem .7rem}
.learner-feature-card{position:relative;display:flex;align-items:center;gap:.85rem;height:100%;padding:1rem;border-radius:18px;background:#fff;border:1px solid #e2e8ef;box-shadow:0 7px 22px rgba(11,27,51,.055);color:#14233a;transition:.17s}.learner-feature-card:hover{transform:translateY(-3px);box-shadow:0 15px 32px rgba(11,27,51,.1);border-color:#cbd9ea}.learner-feature-icon{width:45px;height:45px;flex:0 0 45px;display:grid;place-items:center;border-radius:14px;background:#edf4ff;color:#1e5eff;font-size:1.1rem}.learner-feature-body{min-width:0}.learner-feature-body strong{display:block;font-size:.84rem}.learner-feature-body small{display:block;color:#748196;font-size:.67rem;line-height:1.45;margin-top:.15rem}.learner-feature-arrow{margin-left:auto;color:#9aa8b9}.learner-page-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}.learner-page-head h3{font-weight:850}.learner-head-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#edf4ff;color:#1e5eff;font-size:1.2rem}.learner-table-card{background:#fff;border:1px solid #e2e8ef;border-radius:18px;overflow:hidden;box-shadow:0 8px 25px rgba(11,27,51,.05)}
@media(max-width:991.98px){.mint-hero-pro{grid-template-columns:auto 1fr;grid-template-areas:"brand status" "body body"}.mint-hero-pro__status{justify-self:end}.mint-region-row{grid-template-columns:1fr 160px 110px 38px}.mint-action-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575.98px){.mint-page .mint-hero-pro{grid-template-columns:1fr;grid-template-areas:"brand" "body" "status";padding:1.15rem;min-height:0}.mint-hero-pro__status{justify-self:stretch}.mint-watermark{font-size:3.5rem}.mint-welcome-row{align-items:flex-start;flex-direction:column}.mint-date-card{width:100%}.mint-region-row{grid-template-columns:1fr auto;gap:.35rem}.mint-region-numbers{grid-column:1/-1}.mint-region-bar{grid-column:1/2}.mint-region-row>small{grid-column:2}.mint-sharing-grid{grid-template-columns:1fr}.mint-action-grid{grid-template-columns:1fr}.mint-panel-pro{padding:1rem}.mint-panel-pro__head{flex-direction:column}.mint-btn-outline{align-self:flex-start}.learner-feature-card{min-height:86px}}

/* ROULEO V28 — centre de pratique vidéo */
.practical-page{max-width:1240px;margin:0 auto;padding:1.1rem 0 3.5rem}.practical-hero{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:2.5rem;border-radius:28px;margin-bottom:1.35rem;color:#fff;background:linear-gradient(135deg,#071c49 0%,#0b4ca2 55%,#08784d 100%);box-shadow:0 20px 50px rgba(6,40,88,.18)}.practical-hero:after{content:"";position:absolute;right:-90px;bottom:-120px;width:330px;height:330px;border:55px solid rgba(255,193,7,.12);border-radius:50%}.practical-hero h1{position:relative;z-index:1;font-family:Sora,sans-serif;font-size:clamp(1.75rem,3.6vw,3rem);line-height:1.08;margin:.45rem 0 .75rem;max-width:760px}.practical-hero p{position:relative;z-index:1;max-width:720px;color:rgba(255,255,255,.78);font-size:1rem;margin:0}.practical-kicker{display:inline-flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:900;letter-spacing:.14em;color:#d9edff}.practical-kicker.dark{color:#0c5dcd}.practical-stat{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .75rem;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.08);font-size:.78rem}.practical-hero-art{position:relative;z-index:1;width:150px;height:150px;display:grid;place-items:center;border-radius:36px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font-size:4.2rem;flex:none}.practical-hero-art span{position:absolute;bottom:16px;font-size:.65rem;font-weight:900;letter-spacing:.2em;color:#ffd34d}.practical-toolbar{padding:1rem;background:#fff;border:1px solid var(--dsmls-line);border-radius:20px;box-shadow:var(--dsmls-shadow);margin-bottom:1.6rem}.practical-card{overflow:hidden;background:#fff;border:1px solid var(--dsmls-line);border-radius:22px;box-shadow:var(--dsmls-shadow);transition:transform .18s ease,box-shadow .18s ease}.practical-card:hover{transform:translateY(-3px);box-shadow:var(--dsmls-shadow-md)}.practical-thumb{position:relative;min-height:190px;background:linear-gradient(135deg,#081b40,#1556a8);overflow:hidden}.practical-thumb.is-link{background:linear-gradient(135deg,#5a2bbd,#1760d8)}.practical-thumb .ratio{background:#07152d}.practical-thumb iframe{border:0}.practical-thumb-icon{height:190px;display:grid;place-items:center;font-size:4rem;color:#fff;background:radial-gradient(circle at center,rgba(255,255,255,.18),transparent 55%)}.thumb-label{position:absolute;left:14px;bottom:12px;padding:.35rem .55rem;border-radius:999px;background:rgba(0,0,0,.32);color:#fff;font-size:.65rem;font-weight:900;letter-spacing:.1em}.practical-source{display:inline-flex;align-items:center;gap:.35rem;padding:.32rem .55rem;border-radius:999px;font-size:.68rem;font-weight:800}.practical-source.national{background:#eaf3ff;color:#075ac7}.practical-source.school{background:#eaf9f1;color:#087848}.practical-card h2{font-family:Sora,sans-serif;font-size:1.08rem;margin:.85rem 0 .45rem}.practical-card p{font-size:.86rem;color:#66758c;min-height:2.5rem;margin-bottom:.65rem}.practical-tags{display:flex;flex-wrap:wrap;gap:.35rem}.practical-tags span{font-size:.68rem;color:#53627a;background:#f4f6f9;border:1px solid #e6eaf0;border-radius:8px;padding:.28rem .45rem}.practical-empty{padding:4rem 1rem;text-align:center;background:#fbfcff;border:1px dashed #cbd6e5;border-radius:24px}.practical-empty i{font-size:2.8rem;color:#7891ad}.practical-empty h2{font-family:Sora,sans-serif;font-size:1.25rem;margin:.8rem 0 .3rem}.practical-publisher{border:1px solid var(--dsmls-line);border-radius:24px;box-shadow:var(--dsmls-shadow)}.practical-publisher-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#eaf3ff;color:#0b5dcc;font-size:1.4rem}.practical-publisher h2{font-family:Sora,sans-serif;font-size:1.35rem}.practical-source-box{padding:1rem;border:1px solid #dce4ef;border-radius:18px;background:#f8fbff}.source-tabs{display:flex;gap:.5rem;margin-bottom:1rem}.source-tab{border:1px solid #d8e1ee;background:#fff;color:#52627a;padding:.65rem .8rem;border-radius:12px;font-weight:800;font-size:.8rem}.source-tab.active{background:#0b5dcc;color:#fff;border-color:#0b5dcc}.practical-publisher-side{padding:1.5rem;border-radius:24px;background:linear-gradient(160deg,#fff9e8,#f2f8ff);border:1px solid #e4e9f1}.practical-side-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#fff0b8;color:#a56b00;font-size:1.3rem}.practical-publisher-side h3{font-family:Sora,sans-serif;font-size:1.25rem;margin:1rem 0 .5rem}.practical-publisher-side p{color:#637189}.practical-side-list{display:grid;gap:.8rem;margin-top:1.2rem}.practical-side-list div{display:flex;gap:.65rem;align-items:flex-start;font-size:.86rem;color:#43526b}.practical-side-list i{color:#087b4d}.practical-admin-badge{display:inline-flex;gap:.45rem;align-items:center;padding:.6rem .8rem;border:1px solid #dce6f3;border-radius:999px;background:#fff;color:#52627a;font-size:.75rem;font-weight:800}.practical-table{border:1px solid var(--dsmls-line);border-radius:18px;overflow:hidden}.practical-back{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;color:#245b9f;font-weight:800;font-size:.85rem}.practical-player{border:1px solid var(--dsmls-line);border-radius:24px;background:#06152d;box-shadow:var(--dsmls-shadow-md)}.practical-video-player{display:block;max-height:680px;background:#000}.tiktok-wrap{display:flex;justify-content:center;align-items:center;min-height:520px;background:#f8f9fb;padding:1rem}.external-video-placeholder{min-height:420px;display:grid;place-items:center;text-align:center;padding:3rem;color:#fff;background:linear-gradient(135deg,#0a1d42,#1459d9)}.external-video-placeholder i{font-size:3rem}.practical-watch-info{position:sticky;top:1rem;padding:1.6rem;border:1px solid var(--dsmls-line);border-radius:24px;background:#fff;box-shadow:var(--dsmls-shadow)}.practical-watch-info h1{font-family:Sora,sans-serif;font-size:1.55rem;line-height:1.15;margin:1rem 0 .7rem}.practical-watch-info p{color:#627089;line-height:1.7}.practical-watch-meta{display:grid;gap:.65rem;margin-top:1.25rem;padding-top:1rem;border-top:1px solid #edf0f4}.practical-watch-meta span{font-size:.8rem;color:#53617a}.practical-watch-meta i{width:18px;color:#0b62ce}.min-w-0{min-width:0}@media(max-width:767px){.practical-page{padding:.7rem 0 2.2rem}.practical-hero{padding:1.35rem;border-radius:22px}.practical-hero-art{display:none}.practical-toolbar{padding:.75rem}.practical-thumb,.practical-thumb-icon{min-height:170px}.practical-watch-info{position:static}.source-tabs{flex-direction:column}.practical-publisher-side{padding:1.2rem}}

/* ROULEO V28 — centre de pratique vidéo */
.practical-page{max-width:1240px;margin:0 auto;padding:1.1rem 0 3.5rem}.practical-hero{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:2.5rem;border-radius:28px;margin-bottom:1.35rem;color:#fff;background:linear-gradient(135deg,#071c49 0%,#0b4ca2 55%,#08784d 100%);box-shadow:0 20px 50px rgba(6,40,88,.18)}.practical-hero:after{content:"";position:absolute;right:-90px;bottom:-120px;width:330px;height:330px;border:55px solid rgba(255,193,7,.12);border-radius:50%}.practical-hero h1{position:relative;z-index:1;font-family:Sora,sans-serif;font-size:clamp(1.75rem,3.6vw,3rem);line-height:1.08;margin:.45rem 0 .75rem;max-width:760px}.practical-hero p{position:relative;z-index:1;max-width:720px;color:rgba(255,255,255,.78);font-size:1rem;margin:0}.practical-kicker{display:inline-flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:900;letter-spacing:.14em;color:#d9edff}.practical-kicker.dark{color:#0c5dcd}.practical-stat{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .75rem;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.08);font-size:.78rem}.practical-hero-art{position:relative;z-index:1;width:150px;height:150px;display:grid;place-items:center;border-radius:36px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font-size:4.2rem;flex:none}.practical-hero-art span{position:absolute;bottom:16px;font-size:.65rem;font-weight:900;letter-spacing:.2em;color:#ffd34d}.practical-toolbar{padding:1rem;background:#fff;border:1px solid var(--dsmls-line);border-radius:20px;box-shadow:var(--dsmls-shadow);margin-bottom:1.6rem}.practical-card{overflow:hidden;background:#fff;border:1px solid var(--dsmls-line);border-radius:22px;box-shadow:var(--dsmls-shadow);transition:transform .18s ease,box-shadow .18s ease}.practical-card:hover{transform:translateY(-3px);box-shadow:var(--dsmls-shadow-md)}.practical-thumb{position:relative;min-height:190px;background:linear-gradient(135deg,#081b40,#1556a8);overflow:hidden}.practical-thumb.is-link{background:linear-gradient(135deg,#5a2bbd,#1760d8)}.practical-thumb .ratio{background:#07152d}.practical-thumb iframe{border:0}.practical-thumb-icon{height:190px;display:grid;place-items:center;font-size:4rem;color:#fff;background:radial-gradient(circle at center,rgba(255,255,255,.18),transparent 55%)}.thumb-label{position:absolute;left:14px;bottom:12px;padding:.35rem .55rem;border-radius:999px;background:rgba(0,0,0,.32);color:#fff;font-size:.65rem;font-weight:900;letter-spacing:.1em}.practical-source{display:inline-flex;align-items:center;gap:.35rem;padding:.32rem .55rem;border-radius:999px;font-size:.68rem;font-weight:800}.practical-source.national{background:#eaf3ff;color:#075ac7}.practical-source.school{background:#eaf9f1;color:#087848}.practical-card h2{font-family:Sora,sans-serif;font-size:1.08rem;margin:.85rem 0 .45rem}.practical-card p{font-size:.86rem;color:#66758c;min-height:2.5rem;margin-bottom:.65rem}.practical-tags{display:flex;flex-wrap:wrap;gap:.35rem}.practical-tags span{font-size:.68rem;color:#53627a;background:#f4f6f9;border:1px solid #e6eaf0;border-radius:8px;padding:.28rem .45rem}.practical-empty{padding:4rem 1rem;text-align:center;background:#fbfcff;border:1px dashed #cbd6e5;border-radius:24px}.practical-empty i{font-size:2.8rem;color:#7891ad}.practical-empty h2{font-family:Sora,sans-serif;font-size:1.25rem;margin:.8rem 0 .3rem}.practical-publisher{border:1px solid var(--dsmls-line);border-radius:24px;box-shadow:var(--dsmls-shadow)}.practical-publisher-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#eaf3ff;color:#0b5dcc;font-size:1.4rem}.practical-publisher h2{font-family:Sora,sans-serif;font-size:1.35rem}.practical-source-box{padding:1rem;border:1px solid #dce4ef;border-radius:18px;background:#f8fbff}.source-tabs{display:flex;gap:.5rem;margin-bottom:1rem}.source-tab{border:1px solid #d8e1ee;background:#fff;color:#52627a;padding:.65rem .8rem;border-radius:12px;font-weight:800;font-size:.8rem}.source-tab.active{background:#0b5dcc;color:#fff;border-color:#0b5dcc}.practical-publisher-side{padding:1.5rem;border-radius:24px;background:linear-gradient(160deg,#fff9e8,#f2f8ff);border:1px solid #e4e9f1}.practical-side-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#fff0b8;color:#a56b00;font-size:1.3rem}.practical-publisher-side h3{font-family:Sora,sans-serif;font-size:1.25rem;margin:1rem 0 .5rem}.practical-publisher-side p{color:#637189}.practical-side-list{display:grid;gap:.8rem;margin-top:1.2rem}.practical-side-list div{display:flex;gap:.65rem;align-items:flex-start;font-size:.86rem;color:#43526b}.practical-side-list i{color:#087b4d}.practical-admin-badge{display:inline-flex;gap:.45rem;align-items:center;padding:.6rem .8rem;border:1px solid #dce6f3;border-radius:999px;background:#fff;color:#52627a;font-size:.75rem;font-weight:800}.practical-table{border:1px solid var(--dsmls-line);border-radius:18px;overflow:hidden}.practical-back{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;color:#245b9f;font-weight:800;font-size:.85rem}.practical-player{border:1px solid var(--dsmls-line);border-radius:24px;background:#06152d;box-shadow:var(--dsmls-shadow-md)}.practical-video-player{display:block;max-height:680px;background:#000}.tiktok-wrap{display:flex;justify-content:center;align-items:center;min-height:520px;background:#f8f9fb;padding:1rem}.external-video-placeholder{min-height:420px;display:grid;place-items:center;text-align:center;padding:3rem;color:#fff;background:linear-gradient(135deg,#0a1d42,#1459d9)}.external-video-placeholder i{font-size:3rem}.practical-watch-info{position:sticky;top:1rem;padding:1.6rem;border:1px solid var(--dsmls-line);border-radius:24px;background:#fff;box-shadow:var(--dsmls-shadow)}.practical-watch-info h1{font-family:Sora,sans-serif;font-size:1.55rem;line-height:1.15;margin:1rem 0 .7rem}.practical-watch-info p{color:#627089;line-height:1.7}.practical-watch-meta{display:grid;gap:.65rem;margin-top:1.25rem;padding-top:1rem;border-top:1px solid #edf0f4}.practical-watch-meta span{font-size:.8rem;color:#53617a}.practical-watch-meta i{width:18px;color:#0b62ce}.min-w-0{min-width:0}@media(max-width:767px){.practical-page{padding:.7rem 0 2.2rem}.practical-hero{padding:1.35rem;border-radius:22px}.practical-hero-art{display:none}.practical-toolbar{padding:.75rem}.practical-thumb,.practical-thumb-icon{min-height:170px}.practical-watch-info{position:static}.source-tabs{flex-direction:column}.practical-publisher-side{padding:1.2rem}}