@charset "UTF-8";
/* ==========================================================================
   INFSS Scolarité — Design system premium
   Référence contractuelle : /maquette/png/*.png (1672 × 941)
   Palette relevée au pixel sur les maquettes.
   Accessibilité WCAG 2.2 AA · Responsive 320 → 1920 px
   ========================================================================== */

/* ------------------------------------------------------------- 1. Jetons */
:root {
    /* Encres */
    --ink: #0c283c;
    --ink-2: #1b3a52;
    --body: #41586a;
    --muted: #6b8393;
    --muted-2: #90a4b2;

    /* Surfaces */
    --bg: #f9fafb;
    --surface: #ffffff;
    --surface-2: #f6f9fb;
    --line: #e7edf2;
    --line-2: #eff3f6;

    /* Marque — dégradé de la barre latérale et bleus d'action */
    --brand-900: #012f49;
    --brand-800: #013a57;
    --brand-700: #014c71;
    --brand-600: #01628d;
    --brand-500: #01719d;
    --brand-450: #0176cd;
    --brand-400: #1d92d4;
    --brand-300: #58b3e4;
    --brand-100: #dcf0fa;
    --brand-50: #eef7fb;

    /* Accents de la charte INFSS */
    --cyan: #08a9df;
    --orange: #f7901e;
    --orange-600: #ee7112;
    --orange-50: #fef2e7;
    --pink: #ed0584;
    --pink-600: #ea216c;
    --pink-50: #fee8ef;
    --green: #66b33e;
    --green-600: #4e9a2f;
    --green-700: #2f7a49;
    --green-50: #edf6e7;
    --purple: #7c5cd6;
    --purple-50: #f0ecfd;
    --teal: #0d9488;
    --teal-50: #e6f6f4;
    --red: #e5484d;
    --red-700: #b42318;
    --red-50: #fee8ea;
    --amber-700: #a3620c;

    /* Rayons */
    --r-xs: 6px;
    --r-sm: 8px;
    --r: 10px;
    --r-md: 12px;
    --r-lg: 14px;
    --r-xl: 18px;
    --r-2xl: 24px;
    --r-full: 999px;

    /* Ombres */
    --sh-xs: 0 1px 2px rgba(12, 40, 60, .05);
    --sh-sm: 0 1px 3px rgba(12, 40, 60, .06), 0 1px 2px rgba(12, 40, 60, .04);
    --sh: 0 4px 14px rgba(12, 40, 60, .07);
    --sh-md: 0 8px 26px rgba(12, 40, 60, .09);
    --sh-lg: 0 20px 50px rgba(12, 40, 60, .16);

    /* Structure */
    --sidebar-w: 265px;
    --sidebar-w-sm: 76px;
    --topbar-h: 82px;
    --rail-w: 390px;
    --shell-pad: 35px;
    --shell-pad-r: 40px;

    --font: 'Manrope', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    --font-title: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

    --ease: cubic-bezier(.4, 0, .2, 1);
    --tap: 44px;
}

/* Environnement Formation : identité visuelle distincte et permanente. */
[data-env="formation"] {
    --brand-900: #4a2405;
    --brand-800: #5c2d06;
    --brand-700: #7a3d05;
    --brand-600: #97500b;
    --brand-500: #b06010;
    --brand-450: #d97b0f;
    --brand-400: #ef8f18;
    --brand-300: #f6ad55;
    --brand-100: #fdecd6;
    --brand-50: #fff6ec;
}

/* --------------------------------------------------------------- 2. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--body);
    font: 400 14px/1.5 var(--font);
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
}

h1, h2, h3, h4, h5 { font-family: var(--font-title); color: var(--ink); margin: 0; line-height: 1.22; }
h1 { font-size: 31px; font-weight: 800; letter-spacing: -.6px; }
h2 { font-size: 21px; font-weight: 800; letter-spacing: -.3px; }
h3 { font-size: 16px; font-weight: 700; }
h4 { font-size: 14px; font-weight: 700; }
p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-450); text-decoration: none; transition: color .14s var(--ease); }
a:hover { color: var(--brand-600); text-decoration: underline; }

img, svg, video { max-width: 100%; }
img, video { height: auto; }
table { border-collapse: collapse; width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0 0 10px; padding-left: 20px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
strong, b { font-weight: 700; color: var(--ink-2); }

.ic { flex: 0 0 auto; display: block; }

:focus-visible { outline: 2px solid var(--brand-450); outline-offset: 2px; border-radius: 4px; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: fixed; left: 14px; top: -70px; z-index: 999; background: var(--surface);
    color: var(--brand-700); font-weight: 700; padding: 12px 18px;
    border-radius: var(--r-md); box-shadow: var(--sh-lg); transition: top .18s var(--ease);
}
.skip-link:focus { top: 14px; text-decoration: none; }

/* ---------------------------------------------------------- 3. Coquille */
.shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

/* Barre latérale ------------------------------------------------------- */
.sidebar {
    background: linear-gradient(180deg, #02324c 0%, #01314a 55%, #01344f 100%);
    color: #dbe8ef;
    display: flex; flex-direction: column;
    position: sticky; top: 0;
    height: 100vh; height: 100dvh;
    overflow: hidden auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 5px; }

.sidebar-brand {
    background: var(--surface);
    border-bottom-right-radius: 24px;
    padding: 22px 12px 18px;
    min-height: 108px;
    display: flex; align-items: center;
    flex: 0 0 auto;
    box-shadow: 0 1px 0 rgba(1, 49, 74, .35);
}
.sidebar-brand img { width: 100%; max-width: 208px; height: auto; display: block; }

.sidebar-nav { padding: 17px 14px 0; flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.sidebar-group {
    font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
    color: rgba(255, 255, 255, .42); padding: 16px 12px 7px;
}

.nav-item {
    display: flex; align-items: center; gap: 16px;
    padding: 0 12px; min-height: 42px; border-radius: 10px;
    color: #dbe8ef; font-size: 14px; font-weight: 500;
    position: relative; width: 100%; text-align: left;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.nav-item .ic { opacity: .92; width: 18px; height: 18px; }
.nav-item.is-active {
    background: #014b6f;
    color: #fff; font-weight: 700;
}
.nav-item.is-active .ic { opacity: 1; }
.nav-item.is-active::after {
    content: ''; position: absolute; right: -2px; top: 4px; bottom: 4px;
    width: 3px; border-radius: 3px; background: #ff6c36;
}
.nav-item .nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .nav-badge {
    background: var(--pink-600); color: #fff; font-size: 10.5px; font-weight: 800;
    border-radius: var(--r-full); padding: 2px 7px; min-width: 20px; text-align: center;
}

.nav-sub { list-style: none; margin: 2px 0 6px; padding: 0; }
.nav-sub .nav-item { min-height: 40px; font-size: 13px; padding-left: 47px; }
.nav-sub .nav-item::before {
    content: ''; position: absolute; left: 27px; width: 5px; height: 5px;
    border-radius: 50%; background: currentColor; opacity: .45;
}
.nav-sub .nav-item.is-active::before { opacity: 1; }

.sidebar-foot { padding: 10px 14px 24px; flex: 0 0 auto; }
.sidebar-foot::before {
    content: ''; display: block; height: 1px; background: rgba(255, 255, 255, .12); margin-bottom: 16px;
}
.env-card {
    border: 1px solid rgba(255, 255, 255, .13); border-radius: 10px;
    background: #023953; padding: 14px 16px 12px;
}
.env-card .env-title {
    display: flex; align-items: center; gap: 9px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: #fff;
}
.env-card .env-dot {
    width: 9px; height: 9px; border-radius: 50%; background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, .22); flex: 0 0 auto;
}
[data-env="formation"] .env-card .env-dot { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, .25); }
.env-card .env-sub { font-size: 12.5px; color: rgba(255, 255, 255, .66); margin-top: 6px; }
.env-card .env-link {
    display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 12.5px; color: var(--brand-300); font-weight: 600;
}
.env-card .env-link:hover { color: #fff; text-decoration: none; }

/* Zone principale ------------------------------------------------------ */
.main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.topbar {
    height: var(--topbar-h); flex: 0 0 auto;
    background: var(--bg); border-bottom: 1px solid #e9eef1;
    display: flex; align-items: center; gap: 20px;
    padding: 0 var(--shell-pad-r) 0 var(--shell-pad);
    position: sticky; top: 0; z-index: 60;
}

.breadcrumb { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-2); flex: 0 1 auto; min-width: 0; white-space: nowrap; }
.breadcrumb > * { flex: 0 0 auto; }
.breadcrumb [aria-current] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb a { color: var(--ink-2); }
.breadcrumb a:hover { color: var(--brand-450); }
.breadcrumb .sep { color: var(--muted-2); }
.breadcrumb [aria-current] { color: #0065c7; font-weight: 500; }

.topbar-search { flex: 1 1 320px; min-width: 0; max-width: 455px; margin: 0 auto; position: relative; }
@media (min-width: 1500px) {
    .topbar .topbar-search.dropdown { position: absolute; left: 411px; top: 18px; width: 455px; max-width: none; margin: 0; flex: none; }
}
.search-box {
    display: flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 14px 0 24px;
    background: var(--surface); border: 1px solid #eceff3;
    border-radius: 12px; color: var(--muted);
    transition: border-color .15s var(--ease), background .15s var(--ease);
}
.search-box:focus-within { border-color: var(--brand-300); background: var(--surface); box-shadow: 0 0 0 3px var(--brand-50); }
.search-box input {
    flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
    font-size: 14px; color: var(--ink);
}
.search-box input::placeholder { color: #7d8598; }
.search-box input { font-size: 13.5px; }
.kbd {
    font-size: 11px; font-weight: 600; color: var(--muted);
    background: #f8f9fb; border: 1px solid #e5e9ed;
    border-radius: var(--r-xs); padding: 3px 6px; white-space: nowrap;
}

.topbar-actions { display: flex; align-items: center; gap: 14px; flex: 0 1 auto; min-width: 0; margin-left: auto; }
.topbar-actions > .dropdown { min-width: 0; }

.icon-btn {
    width: 42px; height: 42px; border-radius: var(--r-md);
    display: grid; place-items: center; color: var(--muted); position: relative;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--brand-500); text-decoration: none; }
.icon-btn .dot-count {
    position: absolute; top: 3px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: var(--r-full); background: var(--pink-600); color: #fff;
    font-size: 10.5px; font-weight: 800; display: grid; place-items: center;
    border: 2px solid var(--surface);
}

.user-chip { display: flex; align-items: center; gap: 12px; padding: 0 2px 0 0; margin-left: 14px; border-radius: var(--r-md); min-width: 0; max-width: 100%; }
.user-chip:hover { background: var(--surface-2); text-decoration: none; }
.user-chip .user-meta { line-height: 1.3; text-align: left; min-width: 0; }
.user-chip .user-name, .user-chip .user-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1499px) { .user-chip .user-meta { max-width: 150px; } .topbar { gap: 14px; } }
@media (max-width: 1240px) { .user-chip .user-meta { display: none; } .user-chip { margin-left: 4px; } }
.user-chip .user-name { font-size: 14px; font-weight: 700; color: var(--ink); display: block; }
.user-chip .user-role { font-size: 12px; color: var(--muted); display: block; }

.avatar {
    width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
    background: #03324b; color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: 15px;
    font-family: var(--font-title); overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 34px; height: 34px; font-size: 12px; }
.avatar.xs { width: 28px; height: 28px; font-size: 10.5px; }
.avatar.lg { width: 96px; height: 96px; font-size: 30px; }
.avatar.b1 { background: #1d6fb8; } .avatar.b2 { background: #0e7f70; }
.avatar.b3 { background: #8a4fd3; } .avatar.b4 { background: #c2410c; }
.avatar.b5 { background: #be185d; } .avatar.b6 { background: #15803d; }

.content { padding: 23px var(--shell-pad-r) 26px var(--shell-pad); flex: 1 1 auto; min-width: 0; }

.page-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 20px var(--shell-pad-r) 24px var(--shell-pad); border-top: 1px solid #eef1f4;
    font-size: 12.5px; color: #2e476c; flex-wrap: wrap;
}
.page-foot-links { display: flex; gap: 30px; flex-wrap: wrap; }
.page-foot-links a { display: flex; align-items: center; gap: 8px; color: #52637f; }
.page-foot-links a:hover { color: var(--brand-500); text-decoration: none; }

/* Bandeau Formation ---------------------------------------------------- */
.env-banner {
    background: repeating-linear-gradient(135deg, #ef8f18 0 16px, #d97b0f 16px 32px);
    color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .6px;
    padding: 9px 20px; display: flex; align-items: center; justify-content: center; gap: 12px;
    position: sticky; top: 0; z-index: 90; text-align: center;
}

/* --------------------------------------------------------- 4. En-têtes */
.page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; margin-bottom: 22px; flex-wrap: wrap;
}
.page-head-text { min-width: 0; flex: 1 1 320px; }
.page-head h1 { margin-bottom: 6px; }
.page-head .page-sub { font-size: 14.5px; color: var(--muted); }
.page-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* --------------------------------------------------------- 5. Boutons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    height: 44px; padding: 0 18px; border-radius: var(--r-md);
    font-size: 14px; font-weight: 600; font-family: var(--font);
    white-space: nowrap; cursor: pointer; border: 1px solid transparent;
    transition: background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), color .15s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn.is-disabled { opacity: .5; pointer-events: none; }

.btn-primary { background: var(--brand-450); color: #fff; box-shadow: 0 1px 2px rgba(1, 118, 205, .3); }
.btn-primary:hover { background: #0166b4; color: #fff; }

.btn-deep { background: var(--brand-500); color: #fff; }
.btn-deep:hover { background: var(--brand-600); color: #fff; }

.btn-dark { background: var(--brand-900); color: #fff; }
.btn-dark:hover { background: #01243a; color: #fff; }

.btn-outline { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
.btn-outline:hover { border-color: var(--brand-300); color: var(--brand-500); background: var(--brand-50); }

.btn-outline-primary { background: var(--surface); border-color: var(--brand-300); color: var(--brand-450); }
.btn-outline-primary:hover { background: var(--brand-50); color: var(--brand-600); }

.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }

.btn-success { background: var(--green-600); color: #fff; }
.btn-success:hover { background: #43862a; color: #fff; }

.btn-warning { background: var(--surface); border-color: #f5c98a; color: var(--amber-700); }
.btn-warning:hover { background: var(--orange-50); }

.btn-danger { background: var(--surface); border-color: #f3b9bb; color: var(--red-700); }
.btn-danger:hover { background: var(--red-50); }

.btn-sm { height: 36px; padding: 0 13px; font-size: 13px; border-radius: var(--r); gap: 7px; }
.btn-lg { height: 52px; padding: 0 24px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-icon { width: 44px; padding: 0; }
.btn-sm.btn-icon { width: 36px; }

.btn-group { display: inline-flex; gap: 10px; flex-wrap: wrap; }

/* Actions de ligne de tableau */
.row-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.row-action {
    width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center;
    color: var(--muted-2); transition: background .14s var(--ease), color .14s var(--ease);
}
.row-action:hover { background: var(--surface-2); color: var(--brand-450); text-decoration: none; }
.row-action.danger:hover { background: var(--red-50); color: var(--red-700); }

/* ---------------------------------------------------------- 6. Cartes */
.card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.card-pad { padding: 20px 22px; }
.card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 18px 22px; border-bottom: 1px solid var(--line-2);
}
.card-head.plain { border-bottom: 0; padding-bottom: 6px; }
.card-title { display: flex; align-items: center; gap: 10px; font: 700 15.5px/1.3 var(--font-title); color: var(--ink); }
.card-title .ic { color: var(--brand-450); }
.card-title .count-pill {
    background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
    font: 600 11.5px var(--font); border-radius: var(--r-full); padding: 3px 9px;
}
.card-body { padding: 18px 22px; }
.card-foot {
    padding: 14px 22px; border-top: 1px solid var(--line-2);
    display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
}
.card-link { font-size: 13px; font-weight: 600; color: var(--brand-450); display: inline-flex; align-items: center; gap: 5px; }

/* --------------------------------------------------------- 7. Grilles */
/* Colonne unique par défaut avec un minimum nul : un tableau large dans une sous-grille ne
   force plus la colonne parente à s'élargir (chevauchement du rail, barre horizontale). */
.grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.grid > * { min-width: 0; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.g-main-rail { grid-template-columns: minmax(0, 1fr) var(--rail-w); align-items: start; }
.g-rail-main { grid-template-columns: var(--rail-w) minmax(0, 1fr); align-items: start; }
.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-1-2 { grid-template-columns: minmax(0, 1fr) 2fr; }
.g-3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.gap-sm { gap: 12px; }
.gap-lg { gap: 20px; }
.mt { margin-top: 16px; }
.mt-lg { margin-top: 22px; }
.mb { margin-bottom: 16px; }
.mb-lg { margin-bottom: 22px; }

/* ------------------------------------------------------------ 8. KPI */
.kpi {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--sh-xs); padding: 18px 20px;
    display: flex; align-items: center; gap: 16px; min-width: 0;
}
.kpi-badge {
    width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto;
    display: grid; place-items: center;
}
.kpi-badge.sq { border-radius: var(--r-md); width: 46px; height: 46px; }
.kpi-body { min-width: 0; }
.kpi-value { font: 800 26px/1.15 var(--font-title); color: var(--ink); letter-spacing: -.5px; }
.kpi-value .unit { font-size: 15px; color: var(--muted); font-weight: 600; }
.kpi-label { font-size: 13px; color: var(--muted); margin-top: 3px; }
.kpi-label-top { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.kpi-trend { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; margin-top: 7px; flex-wrap: wrap; }
.kpi-trend .vs { color: var(--muted-2); font-weight: 500; white-space: nowrap; }
.kpi-trend.up { color: var(--green-700); }
.kpi-trend.down { color: var(--red-700); }
.kpi-trend.flat { color: var(--muted); }
.kpi-note { font-size: 12px; color: var(--muted-2); margin-top: 7px; }
.kpi.stack { flex-direction: column; align-items: flex-start; gap: 10px; }


/* Les composants ci-dessous utilisent des <span> imbriqués dans des liens :
   la mise en page verticale doit donc être explicite. */
.kpi-body, .kpi-value, .kpi-label, .kpi-label-top, .kpi-note,
.quick-body, .quick-title, .quick-desc,
.list-body, .list-title, .list-sub,
.action-title, .action-desc,
.person-name, .person-sub,
.env-name, .env-desc,
.doc-name, .doc-meta,
.meter-label { display: block; }
.kpi-trend, .kpi-badge, .tint { display: flex; }
.tint { align-items: center; justify-content: center; }
.kpi-trend { align-items: center; }

/* Pastilles colorées réutilisables */
.tint { display: grid; place-items: center; border-radius: var(--r-md); flex: 0 0 auto; }
.tint-blue { background: var(--brand-50); color: var(--brand-450); }
.tint-green { background: var(--green-50); color: var(--green-600); }
.tint-orange { background: var(--orange-50); color: var(--orange-600); }
.tint-pink { background: var(--pink-50); color: var(--pink-600); }
.tint-purple { background: var(--purple-50); color: var(--purple); }
.tint-teal { background: var(--teal-50); color: var(--teal); }
.tint-red { background: var(--red-50); color: var(--red-700); }
.tint-slate { background: var(--surface-2); color: var(--muted); }
.tint-round { border-radius: 50%; }

/* --------------------------------------------------------- 9. Badges */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: var(--r-full); padding: 4px 11px;
    font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap;
    background: var(--surface-2); color: var(--muted);
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.badge.no-dot::before { display: none; }
.badge-green { background: var(--green-50); color: var(--green-700); }
.badge-blue { background: var(--brand-50); color: var(--brand-600); }
.badge-orange { background: var(--orange-50); color: var(--amber-700); }
.badge-red { background: var(--red-50); color: var(--red-700); }
.badge-pink { background: var(--pink-50); color: var(--pink-600); }
.badge-purple { background: var(--purple-50); color: #5b3fa8; }
.badge-teal { background: var(--teal-50); color: #0f766e; }
.badge-slate { background: var(--surface-2); color: var(--muted); }
.badge-solid { background: var(--brand-450); color: #fff; }
.badge-sq { border-radius: var(--r-xs); }

.tag {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: var(--r-xs); padding: 4px 9px;
    font-size: 12px; font-weight: 600; background: var(--brand-50); color: var(--brand-600);
}
.tag-pink { background: var(--pink-50); color: var(--pink-600); }
.tag-orange { background: var(--orange-50); color: var(--amber-700); }
.tag-green { background: var(--green-50); color: var(--green-700); }
.tag-purple { background: var(--purple-50); color: #5b3fa8; }
.tag-slate { background: var(--surface-2); color: var(--muted); }

/* ---------------------------------------------------- 10. Formulaires */
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 20px; }
.form-grid.c1 { grid-template-columns: 1fr; }
.form-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.c5 { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
.field { min-width: 0; }
.field.span-2 { grid-column: span 2; }
.field.span-full { grid-column: 1 / -1; }

.field label, .form-label {
    display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px;
}
.field .req { color: var(--pink-600); }

.control, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
    width: 100%; height: 44px; padding: 0 13px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    color: var(--ink); font-size: 14px; outline: 0;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { height: auto; min-height: 104px; padding: 11px 13px; line-height: 1.55; resize: vertical; }
.field select {
    appearance: none; cursor: pointer; padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b8393' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}
.field input:focus, .field select:focus, .field textarea:focus, .control:focus {
    border-color: var(--brand-300); box-shadow: 0 0 0 3px var(--brand-50);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field input:disabled, .field select:disabled, .field textarea:disabled {
    background: var(--surface-2); color: var(--muted); cursor: not-allowed;
}
.field .hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.field .field-error { font-size: 12.5px; color: var(--red-700); margin-top: 6px; display: flex; gap: 6px; align-items: center; font-weight: 600; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #f3b9bb; background: #fffafa; }

.input-icon { position: relative; }
.input-icon .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted-2); pointer-events: none; }
.input-icon input, .input-icon .control { padding-left: 44px; }
.input-icon .trailing {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--muted-2);
}
.input-icon .trailing:hover { background: var(--surface-2); color: var(--brand-450); }
.input-icon:has(.trailing) input { padding-right: 46px; }

.check {
    display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
    font-size: 13.5px; color: var(--ink-2); min-height: 34px;
}
.check input[type="checkbox"], .check input[type="radio"], .cbx {
    width: 18px; height: 18px; margin: 0; flex: 0 0 auto;
    accent-color: var(--brand-450); cursor: pointer;
}
.fieldset { border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; margin: 0 0 18px; }
.fieldset > legend { font: 700 13px var(--font-title); color: var(--brand-600); padding: 0 8px; }

.form-actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.form-actions .spacer { flex: 1 1 auto; }

.switch { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; min-height: var(--tap); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
    width: 42px; height: 24px; border-radius: var(--r-full); background: #cbd8e0;
    transition: background .18s var(--ease); flex: 0 0 auto;
}
.switch .track::after {
    content: ''; display: block; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; margin: 3px; transition: transform .18s var(--ease); box-shadow: var(--sh-xs);
}
.switch input:checked + .track { background: var(--green); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 2px solid var(--brand-450); outline-offset: 2px; }

/* Barre de filtres ----------------------------------------------------- */
.filter-bar { padding: 20px 22px; }
.filter-bar .form-grid { align-items: end; }
.filter-reset { display: flex; align-items: flex-end; }

.select-inline {
    display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 13px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    font-size: 13.5px; color: var(--ink-2); cursor: pointer; position: relative;
}
.select-inline:hover { border-color: var(--brand-300); }
.select-inline .ic:first-child { color: var(--muted); }
.select-inline select {
    appearance: none; border: 0; background: transparent; outline: 0; cursor: pointer;
    font-size: 13.5px; color: var(--ink-2); font-weight: 500; padding-right: 20px;
}
.select-inline::after {
    content: ''; position: absolute; right: 13px; width: 8px; height: 8px;
    border-right: 1.75px solid var(--muted); border-bottom: 1.75px solid var(--muted);
    transform: rotate(45deg) translateY(-2px); pointer-events: none;
}

/* --------------------------------------------------------- 11. Onglets */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 0 18px; height: 48px; white-space: nowrap;
    font-size: 14px; font-weight: 600; color: var(--muted);
    border-bottom: 2.5px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--brand-450); text-decoration: none; }
.tab.is-active { color: var(--brand-450); border-bottom-color: var(--brand-450); }
.tab .ic { opacity: .85; }
.tab .count-pill {
    background: var(--brand-450); color: #fff; border-radius: var(--r-full);
    font-size: 11px; font-weight: 800; padding: 2px 7px; min-width: 20px; text-align: center;
}

/* Onglets segmentés */
.segmented {
    display: inline-flex; gap: 4px; padding: 4px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
}
.segmented a, .segmented button {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px;
    border-radius: var(--r-sm); font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.segmented a:hover, .segmented button:hover { color: var(--ink); text-decoration: none; }
.segmented .is-active { background: var(--surface); color: var(--brand-450); box-shadow: var(--sh-xs); }
.segmented .count-pill {
    background: var(--pink-50); color: var(--pink-600); border-radius: var(--r-full);
    padding: 1px 7px; font-size: 11px; font-weight: 800;
}

/* -------------------------------------------------------- 12. Tableaux */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; max-width: 100%; }
.table { width: 100%; min-width: 720px; }
.table thead th {
    text-align: left; padding: 13px 16px; white-space: nowrap;
    font-size: 12px; font-weight: 700; color: var(--muted);
    background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.table thead th:first-child { padding-left: 22px; }
.table thead th:last-child { padding-right: 22px; }
.table th .sort { display: inline-flex; align-items: center; gap: 5px; color: inherit; }
.table th .sort:hover { color: var(--brand-450); text-decoration: none; }
.table th .sort .ic { opacity: .5; }
.table th[aria-sort] .sort .ic { opacity: 1; color: var(--brand-450); }
.table tbody td {
    padding: 14px 16px; border-bottom: 1px solid var(--line-2);
    font-size: 13.5px; color: var(--ink-2); vertical-align: middle;
}
.table tbody td:first-child { padding-left: 22px; }
.table tbody td:last-child { padding-right: 22px; }
.table tbody tr:last-child td { border-bottom: 0; }
/* Écrans ≤ 1600 px : les tableaux denses gardent toute la largeur (rail en dessous),
   cellules resserrées et en-têtes repliables ; aucun défilement horizontal interne. */
@media (min-width: 761px) and (max-width: 1600px) {
    .g-main-rail:has(.table-wrap), .g-2-1:has(.table-wrap), .g-2-1:has(.planner), .g-3-2:has(.table-wrap) { grid-template-columns: minmax(0, 1fr); }
    .table { min-width: 0; }
    .table thead th { white-space: normal; padding-left: 10px; padding-right: 10px; }
    .table tbody td { padding-left: 10px; padding-right: 10px; }
    .table thead th:first-child, .table tbody td:first-child { padding-left: 16px; }
    .table thead th:last-child, .table tbody td:last-child { padding-right: 16px; }
}
.table tbody tr { transition: background .12s var(--ease); }
.table tbody tr:hover { background: #fbfcfd; }
.table tbody tr.is-selected { background: var(--brand-50); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .center { text-align: center; }
.table .actions-col { width: 1%; white-space: nowrap; }
.table .check-col { width: 44px; }
.table .mono { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
.table .muted { color: var(--muted); }
.table-fixed .table { min-width: 0; }

.cell-person { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cell-person .person-name { font-weight: 600; color: var(--ink); }
.cell-person .person-sub { font-size: 12px; color: var(--muted); }

.table-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 22px; border-top: 1px solid var(--line-2); flex-wrap: wrap;
}
.table-foot .count { font-size: 13px; color: var(--muted); }

/* Tableau croisé */
.pivot thead th { background: var(--surface-2); }
.pivot tbody td { font-variant-numeric: tabular-nums; }
.pivot tbody tr:nth-child(even) { background: #fcfdfe; }
.pivot tfoot td { font-weight: 700; background: var(--surface-2); border-top: 2px solid var(--line); color: var(--ink); }

/* ------------------------------------------------------ 13. Pagination */
.pagination { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pagination a, .pagination span {
    min-width: 36px; height: 36px; padding: 0 9px; border-radius: var(--r-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; color: var(--ink-2);
    border: 1px solid var(--line); background: var(--surface);
}
.pagination a:hover { border-color: var(--brand-300); color: var(--brand-450); text-decoration: none; }
.pagination .is-current { background: var(--brand-450); border-color: var(--brand-450); color: #fff; }
.pagination .gap { border-color: transparent; background: transparent; color: var(--muted-2); }
.pagination .disabled { color: var(--muted-2); pointer-events: none; opacity: .55; }

/* ------------------------------------------------------ 14. Graphiques */
.chart { width: 100%; height: auto; display: block; }
.chart-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.chart-legend .lg { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend .sw { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.chart-legend .sw.line { width: 16px; height: 3px; border-radius: 3px; }

.legend-list { display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; }
.legend-list li { display: flex; align-items: center; gap: 9px; list-style: none; }
.legend-list .sw { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.legend-list .lg-label { flex: 1 1 auto; min-width: 0; color: var(--body); }
.legend-list .lg-value { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; flex: 0 0 auto; white-space: nowrap; }

/* Barres de progression libellées */
.meter-list { display: flex; flex-direction: column; gap: 15px; }
.meter { min-width: 0; }
.meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; font-size: 13px; }
.meter-head .meter-label { color: var(--ink-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meter-head .meter-value { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.meter-head .meter-sub { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.bar { height: 7px; border-radius: var(--r-full); background: var(--line-2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: var(--r-full); background: var(--brand-450); transition: width .5s var(--ease); }
.bar.lg { height: 10px; }
.bar.sm { height: 5px; }
.bar > i.green { background: var(--green); }
.bar > i.orange { background: var(--orange); }
.bar > i.pink { background: var(--pink); }
.bar > i.purple { background: var(--purple); }
.bar > i.teal { background: var(--teal); }
.bar > i.red { background: var(--red); }

/* --------------------------------------------- 15. Listes d'éléments */
.list { display: flex; flex-direction: column; }
.list-row {
    display: flex; align-items: center; gap: 13px;
    padding: 13px 0; border-bottom: 1px solid var(--line-2); min-width: 0;
}
.list-row:last-child { border-bottom: 0; }
.list-row .list-body { flex: 1 1 auto; min-width: 0; }
.list-row .list-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.list-card .list-title { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.list-row .list-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.list-row .list-meta { font-size: 12.5px; color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
.list-row .chev { color: var(--muted-2); flex: 0 0 auto; }
.list-row:hover .chev { color: var(--brand-450); }

.list-cards { display: flex; flex-direction: column; gap: 10px; }
.list-card {
    display: flex; align-items: center; gap: 13px; padding: 13px 15px;
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
    color: inherit; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.list-card:hover { border-color: var(--brand-300); box-shadow: var(--sh-xs); text-decoration: none; }
.list-card .list-body { flex: 1 1 auto; min-width: 0; }

/* Chronologie ---------------------------------------------------------- */
.timeline { display: flex; flex-direction: column; gap: 17px; }
.tl-item { display: flex; gap: 13px; align-items: flex-start; min-width: 0; }
.tl-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; background: var(--brand-450); }
.tl-dot.green { background: var(--green); } .tl-dot.orange { background: var(--orange); }
.tl-dot.purple { background: var(--purple); } .tl-dot.teal { background: var(--teal); }
.tl-dot.pink { background: var(--pink); } .tl-dot.red { background: var(--red); }
.tl-body { min-width: 0; flex: 1 1 auto; }
.tl-title { font-size: 13.5px; color: var(--ink-2); font-weight: 500; }
.tl-time { font-size: 12px; color: var(--muted); margin-top: 3px; }
.timeline.aligned .tl-item { justify-content: space-between; align-items: baseline; }
.timeline.aligned .tl-time { margin-top: 0; white-space: nowrap; }

/* -------------------------------------------------- 16. Fil d'étapes */
.stepper { display: flex; align-items: center; gap: 0; padding: 18px 22px; flex-wrap: nowrap; overflow-x: auto; }
.step { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.step-mark {
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
    display: grid; place-items: center; font-size: 13px; font-weight: 700;
    background: var(--surface-2); color: var(--muted); border: 1.5px solid var(--line);
}
.step-label { font-size: 13.5px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.step-num { font-size: 11.5px; color: var(--muted-2); display: block; }
.step.is-done .step-mark { background: var(--green); border-color: var(--green); color: #fff; }
.step.is-done .step-label { color: var(--ink-2); }
.step.is-current .step-mark { background: var(--brand-450); border-color: var(--brand-450); color: #fff; }
.step.is-current .step-label { color: var(--brand-450); font-weight: 700; }
.step-line { flex: 1 1 auto; height: 2px; background: var(--line); margin: 0 14px; min-width: 26px; }
.step-line.is-done { background: var(--green); }

/* Étapes de progression académique (S1…S6) */
.semester-track { display: flex; align-items: flex-start; gap: 0; padding: 6px 0; overflow-x: auto; }
.sem { display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 0 0 auto; min-width: 92px; }
.sem-mark {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    font: 700 14px var(--font-title); position: relative;
    border: 2px solid var(--line); background: var(--surface); color: var(--muted);
}
.sem.is-done .sem-mark { border-color: var(--green); color: var(--green-700); }
.sem.is-done .sem-mark::after {
    content: ''; position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px;
    border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat;
    border: 2px solid var(--surface);
}
.sem.is-current .sem-mark { border-color: var(--brand-450); color: var(--brand-450); box-shadow: 0 0 0 4px var(--brand-50); }
.sem.is-future .sem-mark { border-style: dashed; color: var(--muted-2); }
.sem-meta { text-align: center; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.sem-meta b { display: block; color: var(--ink-2); font-weight: 600; font-size: 12px; }
.sem-link { flex: 1 1 auto; height: 2px; background: var(--line); margin-top: 21px; min-width: 18px; }
.sem-link.is-done { background: var(--green); }

/* ------------------------------------------------- 17. Panneaux d'état */
.panel {
    border-radius: var(--r-md); padding: 15px 17px;
    display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px;
    border: 1px solid transparent;
}
.panel .ic { flex: 0 0 auto; margin-top: 1px; }
.panel-body { min-width: 0; flex: 1 1 auto; }
.panel b { display: block; margin-bottom: 3px; }
.panel-info { background: var(--brand-50); border-color: #bfe3f5; color: var(--brand-600); }
.panel-ok { background: var(--green-50); border-color: #cbe7ba; color: var(--green-700); }
.panel-warn { background: #fffbf0; border-color: #f6dfae; color: var(--amber-700); }
.panel-danger { background: #fff6f6; border-color: #f6cdcd; color: var(--red-700); }

.empty { text-align: center; padding: 52px 24px; }
.empty .empty-glyph {
    width: 68px; height: 68px; border-radius: var(--r-xl); background: var(--brand-50);
    display: grid; place-items: center; margin: 0 auto 16px; color: var(--brand-400);
}
.empty h3 { margin-bottom: 7px; }
.empty p { color: var(--muted); max-width: 440px; margin: 0 auto 18px; font-size: 13.5px; }

.skeleton { background: linear-gradient(90deg, #eef2f5 25%, #f7f9fb 50%, #eef2f5 75%); background-size: 200% 100%; animation: sk 1.3s linear infinite; border-radius: var(--r-sm); height: 14px; }
@keyframes sk { from { background-position: 200% 0 } to { background-position: -200% 0 } }
.skeleton.row { height: 48px; margin-bottom: 8px; }
.skeleton.block { height: 96px; border-radius: var(--r-lg); }

/* -------------------------------------------- 18. Superpositions */
.dropdown { position: relative; }
.dropdown-menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; min-width: 250px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--sh-lg); padding: 6px; display: none;
}
.dropdown.is-open > .dropdown-menu { display: block; }
.dropdown-menu.left { right: auto; left: 0; }
.dropdown-menu a, .dropdown-menu button {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 10px 12px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--ink-2); min-height: 40px;
}
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--surface-2); text-decoration: none; }
.dropdown-menu .sep { height: 1px; background: var(--line-2); margin: 5px 0; }
.dropdown-menu .head { padding: 9px 12px 5px; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--muted-2); }
.dropdown-menu .danger { color: var(--red-700); }

.modal-backdrop {
    position: fixed; inset: 0; z-index: 150; background: rgba(6, 30, 45, .5);
    backdrop-filter: blur(2px); display: grid; place-items: center; padding: 24px;
    animation: fade .16s var(--ease);
}
@keyframes fade { from { opacity: 0 } }
.modal {
    background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-lg);
    width: min(660px, 100%); max-height: min(88vh, 880px); display: flex; flex-direction: column;
    animation: pop .18s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98) } }
.modal.wide { width: min(980px, 100%); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 0; }
.modal-body { padding: 18px 24px; overflow-y: auto; flex: 1 1 auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px 22px; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.modal-close { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--muted); background: var(--surface-2); }
.modal-close:hover { color: var(--ink); }

.drawer-backdrop { position: fixed; inset: 0; z-index: 150; background: rgba(6, 30, 45, .45); animation: fade .16s var(--ease); }
.drawer {
    position: fixed; inset: 0 0 0 auto; z-index: 151; width: min(440px, 94vw);
    background: var(--surface); box-shadow: var(--sh-lg); display: flex; flex-direction: column;
    animation: slide .2s var(--ease);
}
@keyframes slide { from { transform: translateX(100%) } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--line-2); }
.drawer-body { padding: 20px 22px; overflow-y: auto; flex: 1 1 auto; }
.drawer-foot { padding: 16px 22px; border-top: 1px solid var(--line-2); display: flex; gap: 10px; }

.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: min(400px, calc(100vw - 40px)); }
.toast {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
    background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brand-450);
    border-radius: var(--r-md); box-shadow: var(--sh-lg); font-size: 13.5px; color: var(--ink-2);
    animation: toastIn .22s var(--ease);
}
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) } }
.toast.ok { border-left-color: var(--green); } .toast.ok > .ic { color: var(--green-600); }
.toast.warn { border-left-color: var(--orange); } .toast.warn > .ic { color: var(--orange-600); }
.toast.error { border-left-color: var(--red); } .toast.error > .ic { color: var(--red-700); }
.toast > .ic { color: var(--brand-450); }
.toast .close { margin-left: auto; color: var(--muted-2); }

/* ------------------------------------------------------- 19. Connexion */
/* Référence : maquette 01 (1672 × 941). Colonne visuelle 955 px, panneau 717 px.
   Contrat d'affichage : la page tient dans l'écran (aucune barre horizontale,
   pas de défilement vertical à partir de ~630 px de hauteur utile). Les
   dimensions sont celles de la maquette à partir de 941 px de hauteur, puis
   trois paliers de compaction (≤ 940, ≤ 800, ≤ 700 px de hauteur de fenêtre). */
.auth {
    min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 57.1% minmax(0, 1fr);
    background: #f5f8f8; position: relative; overflow-x: clip;
}
/* Bandeau Formation collant au-dessus du contenu : la grille lui cède sa hauteur (36 px). */
body:has(> .env-banner) .auth { min-height: calc(100vh - 36px); min-height: calc(100dvh - 36px); }
.auth-visual {
    position: relative; overflow: hidden; isolation: isolate; min-width: 0;
    background: linear-gradient(180deg, #073246 0%, #0d3f56 16%, #13698b 50%, #0b7aa5 75%, #0476a6 100%);
}
.auth-photo {
    position: absolute; inset: 0; z-index: 1;
    clip-path: url(#auth-photo-clip);
    background: #062334;
}
.auth-photo img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.auth-photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(97deg, rgba(4, 44, 63, .94) 0%, rgba(5, 43, 62, .82) 34%, rgba(6, 48, 70, .42) 68%, rgba(6, 52, 76, .12) 100%);
}
.auth-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.auth-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.auth-visual-inner {
    position: relative; z-index: 3; color: #fff; min-width: 0;
    padding: clamp(48px, 12.5vh, 118px) clamp(40px, 4.7vw, 90px) 40px clamp(40px, 4.3vw, 82px);
    display: flex; flex-direction: column; align-items: flex-start;
}
.auth-visual h1 { color: #fff; font-size: clamp(34px, 3vw, 50px); font-weight: 800; line-height: 1.24; letter-spacing: -1.3px; max-width: 100%; }
.auth-visual .auth-lead { color: #dbe8ef; font-size: 17px; line-height: 1.95; max-width: 480px; margin: 22px 0 0; }
.auth-rule { width: 148px; height: 3px; border-radius: 3px; margin: 22px 0 30px; background: linear-gradient(90deg, #ed0584 0%, #f7901e 40%, #66b33e 100%); }
.auth-chips { display: flex; gap: 16px; flex-wrap: wrap; max-width: 100%; }
.auth-chip {
    display: inline-flex; align-items: center; gap: 9px; height: 41px; padding: 0 15px 0 14px;
    border: 1px solid rgba(94, 178, 214, .55); border-radius: var(--r-full);
    background: rgba(9, 52, 72, .74); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .1px;
    backdrop-filter: blur(4px); white-space: nowrap;
}
.auth-chip .ic { color: #9cd6ee; }

.auth-panel {
    --auth-pad: clamp(28px, 2.9vw, 56px);
    position: relative; background: #f5f8f8; display: flex; flex-direction: column;
    padding: 28px var(--auth-pad) 28px; min-width: 0;
    /* Pas de conteneur de défilement : c'est lui qui affichait une barre horizontale interne. */
    overflow: clip;
}
.auth-panel::before {
    content: ''; position: absolute; top: 0; right: 0; width: 140px; height: 44%; pointer-events: none;
    background-image: radial-gradient(circle, #dfe8eb 1.3px, transparent 1.8px);
    background-size: 26px 26px; background-position: 13px 13px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
    mask-image: linear-gradient(90deg, transparent, #000 70%);
    opacity: .9;
}
.auth-brand { position: relative; text-align: center; flex: 0 0 auto; }
.auth-brand img { width: 366px; max-width: 90%; height: auto; display: block; margin: -20px auto 0; }
.auth-brand .auth-kicker {
    margin-top: 20px; font-size: 12.5px; font-weight: 800; letter-spacing: 2.3px; line-height: 18px;
    text-transform: uppercase; color: #0b2a4c;
}
.auth-card {
    position: relative; background: #fdfefe; border: 1px solid #eef2f4; border-radius: 22px;
    box-shadow: 0 14px 40px rgba(12, 40, 60, .07), 0 2px 6px rgba(12, 40, 60, .04);
    padding: 22px clamp(18px, 5.2%, 30px) 37px; width: 100%; max-width: 576px; margin: 24px auto 32px;
    min-width: 0; container-type: inline-size;
}
.auth-card h2 { text-align: center; font-size: 30px; font-weight: 800; line-height: 36px; letter-spacing: -.5px; color: #0a1a2e; }
.auth-card .auth-sub { text-align: center; color: #45607a; font-size: 14.5px; line-height: 22px; margin: 3px 0 18px; }

.env-switch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 0 0 21px; min-width: 0; }
.env-option {
    display: flex; align-items: center; gap: 14px; min-height: 74px; padding: 10px 18px; min-width: 0;
    border: 1.5px solid #e1e6ea; border-radius: 12px; background: #fdfefe;
    cursor: pointer; text-align: left; transition: border-color .15s var(--ease), background .15s var(--ease);
}
.env-option > span { min-width: 0; }
.env-option:hover { border-color: #b9d9ee; text-decoration: none; }
.env-option .ic { color: #526279; }
.env-option .env-name { font-size: 15.5px; font-weight: 700; line-height: 20px; color: #526279; display: block; letter-spacing: -.1px; }
.env-option .env-desc { font-size: 13px; line-height: 17px; color: #607386; display: block; margin-top: 2px; }
.env-option.is-active { border-color: #a0cef3; background: #f1f8fc; }
.env-option.is-active .ic, .env-option.is-active .env-name { color: #005c9c; }
.env-option.is-active .env-desc { color: #46637b; }
.env-option:has(input:focus-visible) { outline: 2px solid var(--brand-450); outline-offset: 2px; }

.auth-card .field + .field { margin-top: 19px; }
.auth-card .field label { font-size: 13.5px; font-weight: 600; line-height: 20px; color: #0d223b; margin-bottom: 6px; }
.auth-card .field input:not([type="checkbox"]):not([type="radio"]) {
    height: 48px; border: 1px solid #d5dce2; border-radius: 10px; font-size: 15px; color: var(--ink); background: #fff;
}
.auth-card .field input::placeholder { color: #5f7484; opacity: 1; }
.auth-card .input-icon > .ic { left: 17px; color: #728096; z-index: 2; }
.auth-card .input-icon input, .auth-card .input-icon .sf-control > input:not([type="checkbox"]) { padding-left: 48px; }
.auth-card .input-icon .trailing { right: 8px; color: #728096; }
.auth-card .field .field-error:empty { display: none; }

.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; margin: 12px 0 20px; flex-wrap: wrap; }
.auth-row .check { font-size: 13.5px; color: #17324d; gap: 11px; min-height: 34px; }
.auth-row .check input[type="checkbox"] { width: 18px; height: 18px; accent-color: #098dce; border-radius: 4px; }
.auth-forgot { font-size: 13.5px; color: #0b71d3; white-space: nowrap; }
.auth-forgot:hover { color: #0a5db0; }

.btn-auth-primary {
    width: 100%; height: 50px; border-radius: 8px; background: #01729e; color: #fff;
    font-size: 16px; font-weight: 700; gap: 10px; letter-spacing: -.1px; padding: 0 14px;
    box-shadow: 0 1px 2px rgba(1, 114, 158, .25);
}
.btn-auth-primary:hover { background: #016189; color: #fff; }
.btn-auth-primary .ic { color: #fff; }
.auth-alt { margin-top: 15px; }
.btn-auth-secondary {
    width: 100%; height: 50px; border-radius: 8px; background: #fdfefe; border: 1.5px solid #6fa9c9; color: #0b5c8f;
    font-size: 16px; font-weight: 700; gap: 11px; letter-spacing: -.1px; padding: 0 14px;
}
.btn-auth-secondary:hover { background: #f1f8fc; border-color: #4d98b7; color: #00467a; }
.btn-auth-secondary .ic { color: #0b5c8f; }

.auth-trust { display: flex; align-items: center; justify-content: center; gap: 8px 0; margin-top: 38px; flex-wrap: wrap; }
.auth-trust span { display: inline-flex; align-items: center; gap: 9px; height: 22px; font-size: 13.5px; color: #34495c; padding: 0 clamp(8px, 3.3cqi, 19px); white-space: nowrap; }
.auth-card input[type="password"]::placeholder { font-size: 11px; letter-spacing: .6px; color: #2d4356; }
.auth-trust span .ic { color: #34495c; }
.auth-trust span + span { border-left: 1px solid #d4dee3; }

/* Le pied est ancré en bas du panneau ; la carte garde au moins 32 px de marge au-dessus. */
.auth-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: nowrap;
    margin: auto calc(var(--auth-pad) * -1) 0; padding: 20px max(16px, calc(var(--auth-pad) - 10px)) 0 8px;
    border-top: 1px solid #eaeff1;
    font-size: 12px; line-height: 18px; color: #3a536b; letter-spacing: -.05px;
}
.auth-foot > span { white-space: nowrap; min-width: 0; }
.auth-foot > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.auth-foot-links { display: inline-flex; gap: 22px; flex: 0 0 auto; }
.auth-foot a { color: #236c94; }
.auth-foot a:hover { color: var(--brand-450); }

/* Carte étroite (fenêtre réduite, zoom navigateur) : le contenu se replie au lieu de déborder. */
@container (max-width: 500px) {
    .env-switch { gap: 12px; }
    .env-option { gap: 11px; padding: 8px 13px; }
    .env-option .ic { width: 22px; height: 22px; }
    .env-option .env-name { font-size: 14px; line-height: 19px; }
    .env-option .env-desc { font-size: 12.5px; }
    .auth-trust { gap: 6px 14px; }
    .auth-trust span { padding: 0; }
    .auth-trust span + span { border-left: 0; }
}
@container (max-width: 400px) {
    .env-switch { grid-template-columns: minmax(0, 1fr); }
    .auth-foot-links { gap: 14px; }
}

/* Paliers de hauteur (bureau) : tout tient dans l'écran sans défilement. */
@media (max-height: 940px) and (min-width: 861px) {
    .auth-panel { padding-top: 18px; padding-bottom: 22px; }
    .auth-brand img { width: 280px; margin-top: -12px; }
    .auth-brand .auth-kicker { margin-top: 12px; }
    .auth-card { margin-top: 16px; margin-bottom: 22px; padding-top: 18px; padding-bottom: 28px; }
    .auth-card h2 { font-size: 28px; line-height: 34px; }
    .auth-card .auth-sub { margin: 2px 0 14px; }
    .env-option { min-height: 66px; padding-top: 6px; padding-bottom: 6px; }
    .env-switch { margin-bottom: 16px; }
    .auth-card .field + .field { margin-top: 15px; }
    .auth-card .field label { margin-bottom: 5px; }
    .auth-card .field input:not([type="checkbox"]):not([type="radio"]) { height: 46px; }
    .auth-row { margin: 10px 0 14px; }
    .btn-auth-primary, .btn-auth-secondary { height: 48px; }
    .auth-alt { margin-top: 12px; }
    .auth-trust { margin-top: 22px; }
    .auth-foot { padding-top: 16px; }
}
@media (max-height: 800px) and (min-width: 861px) {
    .auth-panel { padding-top: 14px; padding-bottom: 16px; }
    .auth-brand img { width: 230px; margin-top: -8px; }
    .auth-brand .auth-kicker { margin-top: 8px; font-size: 11.5px; line-height: 16px; letter-spacing: 2px; }
    .auth-card { margin-top: 12px; margin-bottom: 12px; padding-top: 14px; padding-bottom: 18px; border-radius: 18px; }
    .auth-card h2 { font-size: 26px; line-height: 32px; }
    .auth-card .auth-sub { font-size: 14px; margin: 2px 0 12px; }
    .env-option { min-height: 60px; padding-top: 4px; padding-bottom: 4px; }
    .env-switch { margin-bottom: 14px; }
    .auth-card .field + .field { margin-top: 12px; }
    .auth-card .field label { line-height: 19px; margin-bottom: 4px; }
    .auth-card .field input:not([type="checkbox"]):not([type="radio"]) { height: 44px; }
    .auth-row { margin: 8px 0 12px; }
    .auth-row .check { min-height: 32px; }
    .btn-auth-primary, .btn-auth-secondary { height: 46px; font-size: 15px; }
    .auth-alt { margin-top: 10px; }
    .auth-trust { margin-top: 16px; }
    .auth-foot { padding-top: 12px; }
}
@media (max-height: 700px) and (min-width: 861px) {
    .auth-panel { padding-top: 10px; padding-bottom: 12px; }
    .auth-brand img { width: 190px; margin-top: -4px; }
    .auth-brand .auth-kicker { margin-top: 6px; font-size: 11px; line-height: 15px; }
    .auth-card { margin-top: 10px; margin-bottom: 10px; padding-top: 10px; padding-bottom: 16px; }
    .auth-card h2 { font-size: 24px; line-height: 30px; }
    .auth-card .auth-sub { font-size: 13.5px; line-height: 20px; margin: 1px 0 10px; }
    .env-option { min-height: 54px; }
    .env-option .env-desc { margin-top: 0; }
    .env-switch { margin-bottom: 12px; }
    .auth-card .field + .field { margin-top: 10px; }
    .auth-card .field label { line-height: 18px; }
    .auth-card .field input:not([type="checkbox"]):not([type="radio"]) { height: 42px; }
    .auth-row { margin: 6px 0 10px; }
    .auth-row .check { min-height: 30px; }
    .btn-auth-primary, .btn-auth-secondary { height: 44px; }
    .auth-alt { margin-top: 8px; }
    .auth-trust { margin-top: 14px; }
    .auth-trust span { height: 20px; }
    .auth-foot { padding-top: 10px; line-height: 16px; }
    .auth-visual-inner { padding-top: clamp(40px, 9vh, 80px); }
    .auth-visual .auth-lead { line-height: 1.7; margin-top: 16px; }
    .auth-rule { margin: 18px 0 22px; }
}

/* Bandeau Formation (36 px) : les paliers s'appliquent 36 px plus tôt. */
@media (max-height: 976px) and (min-width: 861px) {
    body:has(> .env-banner) .auth-panel { padding-top: 18px; padding-bottom: 22px; }
    body:has(> .env-banner) .auth-brand img { width: 280px; margin-top: -12px; }
    body:has(> .env-banner) .auth-brand .auth-kicker { margin-top: 12px; }
    body:has(> .env-banner) .auth-card { margin-top: 16px; margin-bottom: 22px; padding-top: 18px; padding-bottom: 28px; }
    body:has(> .env-banner) .auth-card h2 { font-size: 28px; line-height: 34px; }
    body:has(> .env-banner) .auth-card .auth-sub { margin: 2px 0 14px; }
    body:has(> .env-banner) .env-option { min-height: 66px; padding-top: 6px; padding-bottom: 6px; }
    body:has(> .env-banner) .env-switch { margin-bottom: 16px; }
    body:has(> .env-banner) .auth-card .field + .field { margin-top: 15px; }
    body:has(> .env-banner) .auth-card .field label { margin-bottom: 5px; }
    body:has(> .env-banner) .auth-card .field input:not([type="checkbox"]):not([type="radio"]) { height: 46px; }
    body:has(> .env-banner) .auth-row { margin: 10px 0 14px; }
    body:has(> .env-banner) .btn-auth-primary, body:has(> .env-banner) .btn-auth-secondary { height: 48px; }
    body:has(> .env-banner) .auth-alt { margin-top: 12px; }
    body:has(> .env-banner) .auth-trust { margin-top: 22px; }
    body:has(> .env-banner) .auth-foot { padding-top: 16px; }
}
@media (max-height: 836px) and (min-width: 861px) {
    body:has(> .env-banner) .auth-panel { padding-top: 14px; padding-bottom: 16px; }
    body:has(> .env-banner) .auth-brand img { width: 230px; margin-top: -8px; }
    body:has(> .env-banner) .auth-brand .auth-kicker { margin-top: 8px; font-size: 11.5px; line-height: 16px; letter-spacing: 2px; }
    body:has(> .env-banner) .auth-card { margin-top: 12px; margin-bottom: 12px; padding-top: 14px; padding-bottom: 18px; border-radius: 18px; }
    body:has(> .env-banner) .auth-card h2 { font-size: 26px; line-height: 32px; }
    body:has(> .env-banner) .auth-card .auth-sub { font-size: 14px; margin: 2px 0 12px; }
    body:has(> .env-banner) .env-option { min-height: 60px; padding-top: 4px; padding-bottom: 4px; }
    body:has(> .env-banner) .env-switch { margin-bottom: 14px; }
    body:has(> .env-banner) .auth-card .field + .field { margin-top: 12px; }
    body:has(> .env-banner) .auth-card .field label { line-height: 19px; margin-bottom: 4px; }
    body:has(> .env-banner) .auth-card .field input:not([type="checkbox"]):not([type="radio"]) { height: 44px; }
    body:has(> .env-banner) .auth-row { margin: 8px 0 12px; }
    body:has(> .env-banner) .auth-row .check { min-height: 32px; }
    body:has(> .env-banner) .btn-auth-primary, body:has(> .env-banner) .btn-auth-secondary { height: 46px; font-size: 15px; }
    body:has(> .env-banner) .auth-alt { margin-top: 10px; }
    body:has(> .env-banner) .auth-trust { margin-top: 16px; }
    body:has(> .env-banner) .auth-foot { padding-top: 12px; }
}
@media (max-height: 736px) and (min-width: 861px) {
    body:has(> .env-banner) .auth-panel { padding-top: 10px; padding-bottom: 12px; }
    body:has(> .env-banner) .auth-brand img { width: 190px; margin-top: -4px; }
    body:has(> .env-banner) .auth-brand .auth-kicker { margin-top: 6px; font-size: 11px; line-height: 15px; }
    body:has(> .env-banner) .auth-card { margin-top: 10px; margin-bottom: 10px; padding-top: 10px; padding-bottom: 16px; }
    body:has(> .env-banner) .auth-card h2 { font-size: 24px; line-height: 30px; }
    body:has(> .env-banner) .auth-card .auth-sub { font-size: 13.5px; line-height: 20px; margin: 1px 0 10px; }
    body:has(> .env-banner) .env-option { min-height: 54px; }
    body:has(> .env-banner) .env-option .env-desc { margin-top: 0; }
    body:has(> .env-banner) .env-switch { margin-bottom: 12px; }
    body:has(> .env-banner) .auth-card .field + .field { margin-top: 10px; }
    body:has(> .env-banner) .auth-card .field label { line-height: 18px; }
    body:has(> .env-banner) .auth-card .field input:not([type="checkbox"]):not([type="radio"]) { height: 42px; }
    body:has(> .env-banner) .auth-row { margin: 6px 0 10px; }
    body:has(> .env-banner) .auth-row .check { min-height: 30px; }
    body:has(> .env-banner) .btn-auth-primary, body:has(> .env-banner) .btn-auth-secondary { height: 44px; }
    body:has(> .env-banner) .auth-alt { margin-top: 8px; }
    body:has(> .env-banner) .auth-trust { margin-top: 14px; }
    body:has(> .env-banner) .auth-trust span { height: 20px; }
    body:has(> .env-banner) .auth-foot { padding-top: 10px; line-height: 16px; }
    body:has(> .env-banner) .auth-visual-inner { padding-top: clamp(40px, 9vh, 80px); }
    body:has(> .env-banner) .auth-visual .auth-lead { line-height: 1.7; margin-top: 16px; }
    body:has(> .env-banner) .auth-rule { margin: 18px 0 22px; }
}

/* -------------------------------------------------- 20. Accueil (02) */
/* Référence : maquette 02 (1672 × 941). Colonne principale 910 px, rail 390 px. */
.g-main-rail.gap-lg { gap: 33px; }
.welcome { display: grid; grid-template-columns: minmax(0, 1fr) 388px; gap: 18px; align-items: start; margin-bottom: 25px; }
.welcome-text { padding: 16px 0 0 23px; min-width: 0; }
.welcome h1 { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.32; letter-spacing: -.9px; }
.welcome h1 .accent { color: #0b6fd0; }
.welcome .welcome-lead { color: #4a5d73; font-size: 15px; line-height: 1.6; margin-top: 15px; max-width: 335px; }
.welcome-meta { display: flex; align-items: center; gap: 22px; margin-top: 22px; flex-wrap: wrap; font-size: 13.5px; color: #4a5d73; }
.welcome-meta .m { display: inline-flex; align-items: center; gap: 10px; }
.welcome-meta .m .ic { color: #0b6fd0; }
.welcome-meta .year-chip {
    display: inline-flex; align-items: center; height: 27px; padding: 0 13px; border-radius: var(--r-full);
    background: var(--surface); border: 1px solid #d3e6f6; color: #0c75cc; font-size: 12.5px; font-weight: 600;
}
.welcome-figure { position: relative; margin: 0 0 0 -40px; padding: 3px 8px 2px 40px; width: 428px; max-width: calc(100% + 40px); }
.welcome-figure img { border-radius: 22px; display: block; width: 380px; max-width: 100%; height: 250px; object-fit: cover; box-shadow: 0 10px 28px rgba(12, 40, 60, .12); position: relative; z-index: 2; }
.welcome-figure::before, .welcome-figure::after {
    content: ''; position: absolute; border-radius: 24px; z-index: 1; pointer-events: none;
}
.welcome-figure::before {
    inset: 0 5px 0 0; border: 2px solid var(--orange);
    -webkit-mask-image: conic-gradient(from 0deg at 50% 50%, #000 0 82deg, transparent 96deg 176deg, #000 190deg 262deg, transparent 276deg 360deg);
    mask-image: conic-gradient(from 0deg at 50% 50%, #000 0 82deg, transparent 96deg 176deg, #000 190deg 262deg, transparent 276deg 360deg);
}
.welcome-figure::after {
    inset: 48px -1px 0 0; border: 2px solid var(--cyan);
    -webkit-mask-image: conic-gradient(from 0deg at 50% 50%, transparent 0 50deg, #000 64deg 122deg, transparent 136deg 292deg, #000 306deg 354deg, transparent 360deg);
    mask-image: conic-gradient(from 0deg at 50% 50%, transparent 0 50deg, #000 64deg 122deg, transparent 136deg 292deg, #000 306deg 354deg, transparent 360deg);
}

.kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
@media (min-width: 1500px) { .kpi-row { grid-template-columns: 220px 220px 220px minmax(0, 1fr); } }
.kpi-row .kpi { padding: 16px 8px 16px 18px; gap: 16px; border-color: #eef1f4; border-radius: 14px; min-height: 88px; }
.kpi-row .kpi-badge { width: 48px; height: 48px; }
.kpi-row .kpi-value { font-size: 24px; }
.kpi-row .kpi-label { font-size: 12.5px; color: #5b6b82; margin-top: 4px; white-space: nowrap; letter-spacing: -.1px; }
.kpi-row .kpi.is-primary .kpi-value { color: #0b5cc0; }
.section-title { margin: 27px 0 16px; font-size: 22px; }

.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 17px; }
.quick-card {
    display: flex; align-items: center; gap: 0; padding: 0 18px 0 16px; min-height: 84px;
    background: var(--surface); border: 1px solid #eef1f4; border-left: 4px solid var(--brand-450);
    border-radius: 12px; box-shadow: var(--sh-xs); color: inherit;
    transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.quick-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); text-decoration: none; }
.quick-card .tint { margin-right: 24px; }
.quick-card .tint .ic { width: 24px; height: 24px; }
.quick-card .quick-body { flex: 1 1 auto; min-width: 0; }
.quick-card .quick-title { font: 700 13.5px/1.3 var(--font); color: var(--ink); letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-card .quick-desc { font-size: 12px; color: #526981; margin-top: 4px; line-height: 1.5; }
.quick-card .chev { color: #3b4c63; margin-left: 4px; }
.quick-card:hover .chev { color: var(--brand-450); }
.quick-card.c-blue { border-left-color: var(--brand-450); }
.quick-card.c-green { border-left-color: var(--green); }
.quick-card.c-orange { border-left-color: var(--orange); }
.quick-card.c-purple { border-left-color: var(--purple); }
.quick-card.c-teal { border-left-color: var(--teal); }
.quick-card.c-pink { border-left-color: var(--pink); }

/* Colonne latérale de l'accueil */
.rail-gap { gap: 17px; }
.rail .card { border-radius: 14px; border-color: #eef1f4; }
.rail .card-head { border-bottom: 0; padding: 20px 20px 0 19px; }
.rail .card-title { font-size: 15.5px; line-height: 20px; }
.rail .card-link { font-size: 12.5px; font-weight: 500; color: #037cd6; }
.rail .card-body { padding: 15px 19px 15px; }
.rail .list-cards { gap: 14px; }
.rail .list-card { padding: 0 12px 0 11px; min-height: 54px; gap: 15px; border-color: #e9edf0; border-radius: 10px; }
.rail .list-card .tint { width: 30px; height: 30px; border-radius: 50%; }
.rail .list-card .list-title { font-size: 13.5px; font-weight: 500; color: #314565; }
.rail .list-card .chev { color: #8a9bb0; }
.badge-urgent { background: #feecf4; color: #e90259; font-size: 11.5px; padding: 3px 10px; }
.rail .card-body.tl-body-pad { padding: 17px 19px 19px 21px; }
.rail .timeline { gap: 11px; position: relative; }
.rail .timeline::before { content: ''; position: absolute; left: 4px; top: 12px; bottom: 16px; width: 1px; background: #d2dce8; }
.rail .tl-item { gap: 19px; }
.rail .tl-dot { box-shadow: 0 0 0 3px var(--surface); position: relative; z-index: 1; }
.rail .tl-title { color: #3a465c; font-weight: 500; line-height: 20px; }
.rail .tl-time { color: #6d7f96; margin-top: 2px; line-height: 16px; }
.rail .empty-note { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 9px; }

.help-card {
    background: #ecf6fc;
    border: 1px solid #cadeef; border-radius: 14px; padding: 27px 20px 20px 17px;
}
.help-card .help-head { display: flex; gap: 22px; align-items: flex-start; }
.help-card .help-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); color: #0152bf; display: grid; place-items: center; flex: 0 0 auto; }
.help-card h3 { margin: 0 0 4px; font-size: 14.5px; line-height: 20px; color: #0a1a2e; }
.help-card p { font-size: 12.5px; color: #586b84; line-height: 1.5; max-width: 240px; }
.help-card .btn-help {
    display: inline-flex; align-items: center; gap: 9px; margin: 20px 0 0 70px; height: 32px; padding: 0 14px;
    border-radius: 8px; background: #027fce; color: #fff; font-size: 13px; font-weight: 700;
}
.help-card .btn-help:hover { background: #016db3; color: #fff; text-decoration: none; }

/* ------------------------------------------- 20b. Tableau de bord (03) */
/* Référence : maquette 03 (1672 × 941). Page dense : tout tient sans défilement. */
.main:has(.dash) .content { padding: 16px var(--shell-pad-r) 5px var(--shell-pad); }
.main:has(.dash) .page-foot { padding: 7px var(--shell-pad-r) 7px var(--shell-pad); }
.dash { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; min-height: 45px; }
.dash-head h1 { font-size: 26px; line-height: 30px; letter-spacing: -.6px; }
.dash-head .page-sub { font-size: 12.5px; line-height: 16px; color: var(--muted); margin-top: 0; }
.dash-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 3px; }
.dash-filters .select-inline { height: 38px; padding: 0 10px 0 12px; gap: 8px; font-size: 11.5px; border-radius: 10px; border-color: #e6ebf0; }
.dash-filters .select-inline select { font-size: 11.5px; padding-right: 18px; width: 100%; text-overflow: ellipsis; min-width: 0; letter-spacing: -.1px; }
.dash-filters .select-inline::after { right: 11px; width: 7px; height: 7px; }
.dash-filters .w-annee { width: 236px; }
.dash-filters .w-site { width: 172px; }
.dash-filters .w-cycle { width: 181px; }
.dash-filters .w-filiere { width: 177px; }
.dash-filters .dash-refresh { margin-left: 18px; }
.btn-soft { height: 38px; padding: 0 18px; border-radius: 10px; background: #eaf4fd; border-color: #d3e6f6; color: #0b6fd0; font-size: 13px; font-weight: 700; gap: 9px; }
.btn-soft:hover { background: #dcecfa; color: #0a5db0; }

.dash-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 15px; }
.dash-kpi { padding: 12px 6px 12px 12px; gap: 13px; min-height: 94px; border-radius: 14px; border-color: #eef1f4; }
.dash-kpi .kpi-badge { width: 44px; height: 44px; }
.dash-kpi .kpi-body { min-width: 0; }
.dash-kpi .kpi-trend { white-space: nowrap; }
.dash-kpi .kpi-value { font-size: 24px; line-height: 26px; letter-spacing: -.4px; }
.dash-kpi .kpi-label { font-size: 12.5px; line-height: 16px; margin-top: 2px; color: #4d5f74; white-space: nowrap; }
.dash-kpi .kpi-trend { font-size: 11px; line-height: 14px; margin-top: 7px; gap: 3px; }
.dash-kpi .kpi-trend .vs { font-size: 10px; color: #7f8ea3; margin-left: 5px; }
.dash-kpi .kpi-note { font-size: 10.5px; line-height: 14px; margin-top: 7px; color: #7f8ea3; white-space: nowrap; }

.dash-row { display: grid; gap: 14px; }
.dash-row-1 { grid-template-columns: 377fr 406fr 240fr 268fr; }
.dash-row-2 { grid-template-columns: 371fr 300fr 635fr; gap: 13px; }
.dash-card { border-radius: 14px; border-color: #eef1f4; min-width: 0; display: flex; flex-direction: column; }
.dash-row-1 .dash-card { height: 190px; }
.dash-row-2 .dash-card { height: 172px; }
.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 0; }
.dash-card-head h3 { font-size: 13.5px; line-height: 16px; font-weight: 700; color: var(--ink); letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-card-body { padding: 6px 12px 8px; flex: 1 1 auto; min-height: 0; }
.dash-card-body .chart { height: 100%; }
.chart-legend.sm { font-size: 10.5px; gap: 10px; flex-wrap: nowrap; color: #4d5f74; flex: 0 0 auto; }
.chart-legend.sm .lg { gap: 5px; }
.chart-legend.sm .sw { width: 9px; height: 9px; }
.chart-legend.sm .sw.sq { border-radius: 3px; width: 10px; height: 10px; }
.chart-legend.sm .sw.dot-line { width: 18px; height: 9px; border-radius: 0; background: none !important; position: relative; }
.chart-legend.sm .sw.dot-line::before { content: ''; position: absolute; left: 0; right: 0; top: 3.5px; height: 2px; background: currentColor; border-radius: 2px; }
.chart-legend.sm .sw.dot-line::after { content: ''; position: absolute; left: 4.5px; top: 0; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.chart-legend.xs { font-size: 10.5px; gap: 18px; color: #4d5f74; margin: 2px 0 0 36px; }
.chart-legend.xs .sw { width: 8px; height: 8px; }

.dash-donut { display: flex; align-items: center; gap: 12px; height: 100%; margin: 0 -4px; }
.dash-donut .chart.donut { width: 126px; height: 126px; flex: 0 0 auto; }
.dash-donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; flex: 1 1 auto; }
.dash-donut-legend li { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: #4d5f74; white-space: nowrap; }
.dash-donut-legend .sw { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.dash-donut-legend .lg-label { flex: 1 1 auto; }
.dash-donut-legend .lg-value { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.dash-credits { display: flex; flex-direction: column; gap: 0; height: 100%; justify-content: space-evenly; }
.dash-credit { display: grid; grid-template-columns: minmax(0, 1fr) 112px 28px; align-items: center; gap: 8px; height: 22px; font-size: 10.5px; }
.dash-credit .lbl { color: #3a4b60; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-credit .bar-svg { display: block; line-height: 0; }
.dash-credit .bar-svg .meter-svg { width: 100%; }
.dash-credit .val { text-align: right; color: #3a4b60; font-weight: 500; font-variant-numeric: tabular-nums; }

.dash-map { display: flex; align-items: center; gap: 26px; padding: 2px 12px 6px; }
.dash-map .chart.map { width: 193px; height: 139px; flex: 0 0 auto; }
.dash-map-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.dash-map-legend li { display: flex; align-items: center; gap: 8px; font-size: 10.5px; line-height: 13px; color: #3a4b60; }
.dash-map-legend .sw { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }

.dash-gauge { display: flex; flex-direction: column; align-items: center; padding: 2px 12px 6px; }
.dash-gauge .chart.gauge { width: 182px; height: 113px; }
.dash-gauge-note { display: flex; align-items: center; gap: 6px; font-size: 10.5px; margin: 6px 0 0; color: #2f7a49; }
.dash-gauge-note.ok { color: #2f7a49; } .dash-gauge-note.warn { color: var(--amber-700); }
.dash-gauge-note .ic { color: #66b33e; }
.dash-gauge-note.warn .ic { color: var(--orange); }

.dash-area { display: flex; flex-direction: column; gap: 2px; padding: 0 12px 6px; }
.dash-area .chart { width: 100%; height: 120px; }

.dash-table .dash-card-head { padding: 6px 12px 6px 14px; min-height: 40px; }
.dash-table-actions { display: flex; align-items: center; gap: 12px; }
.btn-xs { height: 28px; padding: 0 12px; font-size: 11px; font-weight: 600; border-radius: 8px; gap: 7px; color: var(--ink-2); }
.btn-xs .ic-pdf .ic { color: #e5484d; } .btn-xs .ic-xls .ic { color: #2f9e44; }
.dash-table-actions .btn:nth-child(3) { margin-left: 9px; }
.dash-pivot { min-width: 0; }
.dash-pivot thead th { padding: 0 12px; height: 22px; line-height: 16px; font-size: 11.5px; font-weight: 600; color: #3a4b60; background: #f5f7f9; border-bottom: 1px solid #eef1f4; border-top: 1px solid #eef1f4; }
.dash-pivot thead th:first-child { padding-left: 13px; }
.dash-pivot tbody td { padding: 0 12px; height: 23px; line-height: 17px; font-size: 11.5px; color: #3a4b60; border-bottom: 1px solid #f1f4f6; }
.dash-pivot .evo .ic { width: 12px; height: 12px; }
.dash-pivot tbody td:first-child { padding-left: 13px; }
.dash-pivot tbody tr:nth-child(even) { background: transparent; }
.dash-pivot tbody tr:last-child td { border-bottom: 0; }
.dash-pivot th + th, .dash-pivot td + td { border-left: 1px solid #eef1f4; }
.dash-pivot td.strong { font-weight: 600; color: #1f2f44; }
.dash-pivot th:first-child, .dash-pivot td:first-child { width: 172px; }
.dash-pivot .evo { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-pivot .evo.up { color: #2f9e44; } .dash-pivot .evo.down { color: #e5484d; }

@media (max-width: 1500px) {
    .dash-row-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-row-1 .dash-card, .dash-row-2 .dash-card { height: auto; min-height: 190px; }
    .dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dash-filters .dash-refresh { margin-left: 0; }
}
@media (max-width: 860px) {
    .dash-row-1, .dash-row-2, .dash-kpis { grid-template-columns: 1fr; }
    .dash-head { flex-direction: column; }
    .dash-filters .select-inline { width: 100%; }
}

/* -------------------------------------- 20c. Registre des étudiants (04) */
/* Référence : maquette 04 (1672 × 941). Colonne principale 999 px, rail 300 px. */
.main:has(.reg) .content { padding: 16px var(--shell-pad-r) 6px var(--shell-pad); }
.main:has(.reg) .page-foot { padding: 7px var(--shell-pad-r) 7px var(--shell-pad); }
.reg { grid-template-columns: minmax(0, 1fr) 300px; gap: 33px; }
.reg-main { min-width: 0; display: flex; flex-direction: column; }
.reg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; min-height: 46px; margin-bottom: 12px; }
.reg-head h1 { font-size: 26px; line-height: 30px; letter-spacing: -.6px; }
.reg-head .page-sub { font-size: 12.5px; line-height: 16px; color: var(--muted); }
.reg-head-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.btn-reg-primary { height: 38px; padding: 0 16px; border-radius: 8px; background: #0173cb; color: #fff; font-size: 13px; font-weight: 700; gap: 9px; }
.btn-reg-primary:hover { background: #0163ae; color: #fff; }
.btn-reg-outline { height: 38px; padding: 0 16px; border-radius: 8px; background: var(--surface); border-color: #e6eaef; color: #1f2f44; font-size: 13px; font-weight: 600; gap: 9px; }
.btn-reg-outline:hover { border-color: #c9d6e2; background: #fbfcfd; color: #0b3f8f; }
.btn-reg-sm { height: 34px; padding: 0 14px; font-size: 12.5px; color: #3d5b7b; gap: 8px; }

.reg-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 16px; }
.reg-kpi { min-height: 105px; padding: 17px 14px 17px 17px; gap: 21px; border-radius: 14px; border-color: #eef1f4; }
.reg-kpi .kpi-badge { width: 56px; height: 56px; }
.reg-kpi .kpi-label-top { font-size: 12px; line-height: 16px; color: #606f8a; margin-bottom: 2px; white-space: nowrap; }
.reg-kpi .kpi-value { font-size: 24px; line-height: 28px; letter-spacing: -.4px; }
.reg-kpi .kpi-note { font-size: 11.5px; line-height: 15px; color: #6c7e99; margin-top: 3px; white-space: nowrap; }

.reg-filters { border-radius: 14px; border-color: #eef1f4; padding: 14px 19px 13px; margin-bottom: 13px; }
.reg-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 122px; gap: 16px 26px; align-items: end; }
.reg-filter-grid .field label { font-size: 11.5px; line-height: 14px; font-weight: 600; color: #2c4863; margin-bottom: 5px; letter-spacing: -.1px; }
.reg-filter-grid .field input:not([type="checkbox"]):not([type="radio"]),
.reg-filter-grid .field select { height: 26px; padding: 0 10px; font-size: 11px; border-radius: 6px; border-color: #e8ebef; color: #3a4b60; }
.reg-filter-grid .field select { padding-right: 28px; background-position: right 9px center; background-size: 14px; }
.reg-filter-grid .field input::placeholder { color: #68758c; }
.reg-filter-spacer { min-height: 1px; }
.reg-filter-reset { display: flex; align-items: flex-end; justify-content: flex-end; height: 100%; }
.btn-reg-reset { height: 34px; padding: 0 14px; border-radius: 8px; background: #fdfdfd; border-color: #eceef1; color: #263d5d; font-size: 12px; font-weight: 600; gap: 8px; margin-bottom: -4px; }
.btn-reg-reset:hover { border-color: #c9d6e2; color: #0b3f8f; }

.reg-table { border-radius: 14px; border-color: #eef1f4; overflow: hidden; }
.reg-table-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 42px; padding: 0 0 0 2px; }
.reg-views { display: flex; align-items: center; gap: 12px; }
.reg-views-label { font-size: 13px; font-weight: 700; color: #1f2f44; }
.reg-tabs { display: inline-flex; height: 34px; border: 1px solid #e6eaef; border-radius: 8px; background: #fafbfc; overflow: hidden; }
.reg-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 12.5px; font-weight: 500; color: #3d5b7b; white-space: nowrap; border-right: 1px solid #e6eaef; }
.reg-tabs a:last-child { border-right: 0; }
.reg-tabs a:hover { color: #0b3f8f; text-decoration: none; background: #f2f6fa; }
.reg-tabs a.is-active { background: #ebf4fc; color: #0b3f8f; font-weight: 700; box-shadow: inset 0 0 0 1px #3b90f2; border-radius: 7px; }
.reg-pill { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: var(--r-full); background: #feeff3; color: #dc0747; font-size: 11px; font-weight: 700; }
.reg-bookmark { width: 32px; height: 34px; border: 1px solid #e6eaef; border-radius: 8px; background: var(--surface); color: #3d5b7b; display: grid; place-items: center; }
.reg-bookmark:hover { color: #0b3f8f; border-color: #c9d6e2; }
.reg-table-actions { display: flex; align-items: center; gap: 12px; padding-right: 0; }

.reg-grid { min-width: 0; }
.reg-grid thead th { height: 48px; padding: 0 10px; font-size: 12px; font-weight: 700; color: #1d2b4a; background: #fbfbfc; border-top: 1px solid #eff1f4; border-bottom: 1px solid #f0f3f5; white-space: nowrap; }
.reg-grid thead th:first-child { padding-left: 18px; }
.reg-grid thead th .sort { gap: 6px; color: inherit; }
.reg-grid thead th .sort .ic { opacity: .6; }
.reg-grid tbody td { height: 42px; padding: 0 10px; font-size: 12.5px; color: #4f5f78; border-bottom: 1px solid #eff1f4; }
.reg-grid tbody td:first-child { padding-left: 18px; }
.reg-grid tbody tr:last-child td { border-bottom: 0; }
.reg-grid .check-col { width: 40px; }
.reg-grid .cbx { width: 16px; height: 16px; border-radius: 4px; }
.reg-matricule { color: #1a3054; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .1px; white-space: nowrap; }
.reg-matricule:hover { color: #0b6fd0; }
.reg-person { gap: 10px; }
.reg-avatar { width: 24px; height: 24px; font-size: 9px; }
.reg-person .person-name { font-weight: 500; color: #0b1e42; font-size: 12.5px; white-space: nowrap; }
.reg-badge { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 12px 0 10px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; white-space: nowrap; }
.reg-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.reg-badge-green { background: #ecf5e5; color: #3f8a2a; }
.reg-badge-orange { background: #fef3e8; color: #e8651a; }
.reg-badge-red { background: #feeef2; color: #e52059; }
.reg-badge-blue { background: #e9f3fc; color: #0b6fd0; }
.reg-badge-purple { background: #f0ecfd; color: #6d4bd0; }
.reg-badge-teal { background: #e6f6f4; color: #0d9488; }
.reg-badge-slate { background: #f1f4f6; color: #6b8393; }
.reg-grid th.actions-col, .reg-grid td.actions-col { border-left: 1px solid #eff1f4; width: 96px; text-align: center; padding: 0 6px; }
.reg-actions { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.reg-actions .row-action { width: 26px; height: 26px; color: #536079; }
.reg-actions .row-action:hover { color: #0b6fd0; }

.reg-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 2px 0; min-height: 44px; }
.reg-count { font-size: 12.5px; color: #2a4062; }
.reg-pager { display: flex; align-items: center; gap: 12px; }
.reg-perpage { height: 30px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; border-color: #e6eaef; color: #2a4062; }
.reg-perpage select { font-size: 12.5px; padding-right: 18px; }
.reg-perpage::after { right: 11px; width: 7px; height: 7px; }
.reg-pager-sep { width: 1px; height: 22px; background: #e3e8ee; margin: 0 4px; }
.reg-pages { display: flex; align-items: center; gap: 6px; }
.reg-pages a, .reg-pages span { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; color: #404f6d; background: #f3f4f6; border: 0; }
.reg-pages a:hover { background: #e6ebf1; color: #0b3f8f; text-decoration: none; }
.reg-pages .is-current { background: #0170d5; color: #fff; }
.reg-pages .gap { background: #f3f4f6; letter-spacing: 1px; }
.reg-pages .disabled { opacity: .5; }

.reg-rail { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.reg-rail-card { border-radius: 14px; border-color: #eef1f4; padding: 17px 20px 16px; }
.reg-rail-card h3 { font-size: 14.5px; line-height: 18px; font-weight: 700; color: #0f1f3d; }
.reg-rail-title { display: flex; align-items: center; gap: 8px; }
.reg-info { color: #7f8ea3; display: inline-flex; }
.reg-bigstat { font: 800 30px/34px var(--font-title); color: #0a6cd0; letter-spacing: -.8px; margin-top: 10px; }
.reg-substat { font-size: 11.5px; color: #626e85; margin: 5px 0 0; }
.reg-meter { margin-top: 14px; }
.reg-meter .meter-svg { width: 100%; }
.reg-legend { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.reg-legend li { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: #6e7796; }
.reg-legend .sw { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: #90a4b2; }
.reg-legend .sw.green { background: #328808; } .reg-legend .sw.orange { background: #fb7513; }
.reg-legend .lbl { flex: 1 1 auto; }
.reg-legend .val { font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.reg-legend .val.green { color: #2b780c; } .reg-legend .val.orange { color: #fa4f00; }
.reg-link { display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 500; color: #0b6fd0; }
.reg-alert-list { display: flex; flex-direction: column; margin-top: 6px; }
.reg-alert { display: flex; align-items: center; gap: 12px; height: 37px; border-bottom: 1px solid #eff2f5; color: inherit; }
.reg-alert:last-child { border-bottom: 0; }
.reg-alert:hover { text-decoration: none; }
.reg-alert:hover .reg-alert-label { color: #0b3f8f; }
.reg-alert-tile { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; flex: 0 0 auto; }
.reg-alert-tile.t-pink { background: #fdeff4; color: #e52059; }
.reg-alert-tile.t-orange { background: #fdf4eb; color: #f07a1a; }
.reg-alert-tile.t-blue { background: #e6f1fd; color: #2f89ec; }
.reg-alert-label { flex: 1 1 auto; font-size: 11.5px; color: #6f7a94; }
.reg-alert-count { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.reg-alert-count.c-pink { color: #f0512a; } .reg-alert-count.c-orange { color: #f35803; } .reg-alert-count.c-blue { color: #005dde; }
.reg-quick { padding-bottom: 10px; }
.reg-quick-list { display: flex; flex-direction: column; margin-top: 4px; }
.reg-quick-list a { display: flex; align-items: center; gap: 16px; height: 35px; font-size: 12.5px; color: #0b6fd0; border-bottom: 1px solid #eff2f5; }
.reg-quick-list a:last-child { border-bottom: 0; }
.reg-quick-list a .ic { color: #0d6ae2; }
.reg-help { background: #edf3f9; border-color: #d9e6f3; padding: 18px 18px 17px 17px; }
.reg-help .help-head { gap: 14px; }
.reg-help .help-icon { width: 44px; height: 44px; }
.reg-help h3 { font-size: 13px; line-height: 18px; margin-bottom: 3px; }
.reg-help p { font-size: 11px; line-height: 1.6; color: #586b84; max-width: 190px; }
.reg-help-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 12.5px; font-weight: 700; color: #0b6fd0; }

@media (max-width: 1500px) {
    .reg { grid-template-columns: 1fr; }
    .reg-rail { flex-direction: row; flex-wrap: wrap; }
    .reg-rail > * { flex: 1 1 280px; }
    .reg-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reg-filter-spacer { display: none; }
    .reg-filter-reset { grid-column: 1 / -1; }
    .reg-table-head { height: auto; flex-wrap: wrap; padding: 10px 12px; }
}
@media (max-width: 860px) {
    .reg-kpis, .reg-filter-grid { grid-template-columns: 1fr; }
    .reg-head { flex-direction: column; }
    .reg-pagination { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------- 20d. Dossier étudiant (05) */
/* Référence : maquette 05 (1672 × 941). Colonnes 262 / 691 / 350, tout tient dans l'écran. */
.main:has(.dos) .content { padding: 16px var(--shell-pad-r) 6px var(--shell-pad); }
.main:has(.dos) .page-foot { padding: 7px var(--shell-pad-r) 7px var(--shell-pad); }
.dos { min-width: 0; }
.dos-head { display: flex; align-items: flex-start; gap: 36px; min-height: 104px; }
.dos-photo { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 3px solid var(--surface); box-shadow: 0 2px 10px rgba(12, 40, 60, .12); }
.dos-photo-initials { display: grid; place-items: center; background: linear-gradient(160deg, #0b3f8f, #01314a); color: #fff; font: 800 34px var(--font-title); letter-spacing: -1px; }
.dos-id { flex: 1 1 auto; min-width: 0; padding-top: 8px; }
.dos-name { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dos-name h1 { font-size: 26px; line-height: 30px; letter-spacing: -.6px; }
.dos-badge { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px; border-radius: var(--r-full); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.dos-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dos-badge-green { background: #ecf5e5; color: #3f8a2a; }
.dos-badge-orange { background: #fef3e8; color: #e8651a; }
.dos-badge-red { background: #feeef2; color: #e52059; }
.dos-badge-blue { background: #e9f3fc; color: #0b6fd0; }
.dos-badge-purple { background: #f0ecfd; color: #6d4bd0; }
.dos-badge-teal { background: #e6f6f4; color: #0d9488; }
.dos-badge-slate { background: #f1f4f6; color: #6b8393; }
.dos-badge-outline { background: #eef6fd; color: #0b6fd0; border: 1px solid #bcd9f3; }
.dos-badge-outline::before { display: none; }
.dos-matricule { margin: 9px 0 0; font-size: 14px; color: #4d5f74; }
.dos-matricule b { color: #0b6fd0; font-weight: 600; }
.dos-meta { margin: 8px 0 0; font-size: 13px; color: #3a4b60; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dos-meta .dot { color: #9aa9b8; }
.dos-actions { display: flex; align-items: center; gap: 18px; margin-top: 28px; flex: 0 0 auto; }
.dos-btn { height: 44px; padding: 0 18px; border-radius: 8px; background: var(--surface); border: 1px solid #9ec5ea; color: #0b6fd0; font-size: 14px; font-weight: 600; gap: 10px; }
.dos-btn:hover { background: #eef6fd; border-color: #0b6fd0; color: #0a5db0; }
.dos-btn-more { width: 50px; padding: 0; }

.dos-tabs { display: flex; align-items: flex-end; gap: 30px; height: 36px; margin-top: 6px; border-bottom: 1px solid #e6eaef; overflow-x: auto; scrollbar-width: none; }
.dos-tabs::-webkit-scrollbar { display: none; }
.dos-tab { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 16px 0 16px; font-size: 13px; font-weight: 500; color: #4d5f74; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dos-tab .ic { color: #7f8ea3; }
.dos-tab:hover { color: #0b6fd0; text-decoration: none; }
.dos-tab.is-active { color: #0b6fd0; font-weight: 600; border-bottom-color: #0b6fd0; }
.dos-tab.is-active .ic { color: #0b6fd0; }

.dos-kpis { display: grid; grid-template-columns: 310fr 315fr 321fr 345fr; gap: 13px; margin-top: 19px; }
.dos-kpi { display: flex; align-items: center; gap: 20px; height: 94px; padding: 0 20px; background: var(--surface); border: 1px solid #eef1f4; border-radius: 14px; box-shadow: var(--sh-xs); min-width: 0; }
.dos-kpi-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
.dos-kpi-body { display: flex; flex-direction: column; min-width: 0; }
.dos-kpi-value { font: 800 22px/26px var(--font-title); color: var(--ink); letter-spacing: -.4px; white-space: nowrap; }
.dos-kpi-value .of { font-size: 15px; font-weight: 600; color: #6b8393; }
.dos-kpi-label { font-size: 13px; line-height: 16px; color: #4d5f74; margin-top: 2px; }
.dos-kpi-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; line-height: 14px; color: #2f9e44; font-weight: 600; margin-top: 4px; }
.dos-kpi-trend.down { color: #e5484d; }
.dos-kpi-note { font-size: 11.5px; line-height: 14px; color: #7f8ea3; margin-top: 4px; }

.dos-grid { display: grid; grid-template-columns: 262px minmax(0, 1fr) 350px; gap: 13px; margin-top: 15px; align-items: start; }
.dos-col { display: flex; flex-direction: column; gap: 15px; min-width: 0; }
.dos-card { background: var(--surface); border: 1px solid #eef1f4; border-radius: 14px; box-shadow: var(--sh-xs); padding: 12px 16px 10px; min-width: 0; }
.dos-title { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 18px; font-weight: 700; color: #0f1f3d; }
.dos-title-ic { display: inline-flex; color: #0b6fd0; }
.dos-title-ic.c-green { color: #3f8a2a; } .dos-title-ic.c-pink { color: #e52059; } .dos-title-ic.c-orange { color: #f07a1a; }
.dos-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dos-seeall { font-size: 12px; color: #0b6fd0; font-weight: 500; white-space: nowrap; }
.dos-empty { font-size: 11.5px; color: var(--muted); margin: 12px 0 0; line-height: 1.5; }
.dos-ok { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #2f7a49; margin: 14px 0 0; }
.dos-ok .ic { color: #66b33e; }

.dos-dl { display: flex; flex-direction: column; gap: 0; margin: 8px 0 0; }
.dos-dl > div { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 8px; min-height: 21px; align-items: start; font-size: 11.5px; line-height: 16px; padding: 2.5px 0; }
.dos-dl dt { color: #7f8ea3; }
.dos-dl dd { margin: 0; color: #2c3e57; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dos-dl dd.wrap { white-space: normal; overflow-wrap: anywhere; line-height: 15px; }
.dos-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: #0b6fd0; }
.dos-card-perso { min-height: 183px; }
.dos-card-admission { min-height: 123px; }
.dos-card-contact { min-height: 150px; }

.dos-card-prog { height: 143px; }
.dos-track { display: flex; align-items: flex-start; margin-top: 12px; padding: 0 22px; }
.dos-sem { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; width: 70px; }
.dos-sem-mark { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 14px var(--font-title); border: 2px solid #b5c1cd; color: #7f8ea3; background: var(--surface); }
.dos-sem-year { font-size: 11.5px; color: #4d5f74; margin-top: 10px; white-space: nowrap; }
.dos-sem-state { font-size: 11px; color: #7f8ea3; margin-top: 2px; }
.dos-sem.is-done .dos-sem-mark { border-color: #66b33e; color: #3f8a2a; background: #f5faf1; }
.dos-sem.is-done .dos-sem-mark::after { content: ''; position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--surface); background: #66b33e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/10px no-repeat; }
.dos-sem.is-done .dos-sem-state { color: #3f8a2a; }
.dos-sem.is-current .dos-sem-mark { border-color: #0b6fd0; color: #0b6fd0; }
.dos-sem.is-current .dos-sem-state { color: #0b6fd0; font-weight: 600; }
.dos-sem.is-future .dos-sem-mark { border-style: dashed; }
.dos-link { flex: 1 1 auto; height: 2px; margin-top: 19px; background: #66b33e; min-width: 20px; }
.dos-link.is-future { background: none; border-top: 2px dashed #b5c1cd; height: 0; }

.dos-row2 { display: grid; grid-template-columns: 317px minmax(0, 1fr); gap: 14px; }
.dos-card-skills, .dos-card-notes { height: 183px; }
.dos-skills { display: flex; align-items: center; gap: 22px; margin-top: 6px; }
.dos-skills .chart.radar { width: 130px; height: 130px; flex: 0 0 auto; }
.dos-skills-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; }
.dos-skills-legend li { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: #2c3e57; }
.dos-skills-legend .sw { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.dos-skills-legend .lbl { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dos-skills-legend .val { font-weight: 700; font-size: 11.5px; color: var(--ink); }
.dos-notes-chart { margin-top: 4px; }
.dos-notes-chart .chart { width: 100%; height: 128px; }

.dos-row3 { display: grid; grid-template-columns: 355px minmax(0, 1fr); gap: 16px; }
.dos-card-alerts { height: 132px; }
.dos-alerts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.dos-alert { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 10px 0 12px; border: 1px solid #e9edf0; border-radius: 10px; color: inherit; }
.dos-alert:hover { text-decoration: none; border-color: #bcd9f3; }
.dos-alert-ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: 0 0 auto; }
.dos-alert-ic.t-orange { background: #fef3e8; color: #f07a1a; } .dos-alert-ic.t-blue { background: #e9f3fc; color: #0b6fd0; }
.dos-alert-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dos-alert-body .t { font-size: 12px; color: #1f2f44; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dos-alert-body .s { font-size: 10.5px; color: #7f8ea3; margin-top: 1px; }
.dos-alert-badge { height: 22px; padding: 0 10px; border-radius: var(--r-full); display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; white-space: nowrap; }
.dos-alert-badge.b-orange { background: #fef3e8; color: #e8651a; } .dos-alert-badge.b-blue { background: #e9f3fc; color: #0b6fd0; }
.dos-alert .ic:last-child { color: #7f8ea3; }
.dos-quick { display: flex; flex-direction: column; gap: 9px; }
.dos-quick-card { display: flex; align-items: center; gap: 16px; height: 62px; padding: 0 16px 0 14px; border: 1px solid #cfe0f5; border-radius: 10px; background: var(--surface); color: inherit; }
.dos-quick-card:hover { text-decoration: none; background: #f7fbfe; border-color: #9ec5ea; }
.dos-quick-ic { width: 40px; height: 40px; border-radius: 10px; background: #e9f3fc; color: #0b6fd0; display: grid; place-items: center; flex: 0 0 auto; }
.dos-quick-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dos-quick-body .t { font: 700 14px/18px var(--font-title); color: #0b6fd0; }
.dos-quick-body .s { font-size: 11.5px; color: #6b8393; margin-top: 2px; }
.dos-quick-card > .ic { color: #0b6fd0; }

.dos-card-docs { height: 242px; }
.dos-docs { display: flex; flex-direction: column; margin-top: 4px; }
.dos-doc { display: flex; align-items: center; gap: 12px; height: 50px; border-bottom: 1px solid #eff2f5; }
.dos-doc:last-child { border-bottom: 0; }
.dos-doc-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; border: 1.5px solid; }
.dos-doc-ic.f-pdf { color: #ea216c; border-color: #f6bfd4; background: #fff5f8; }
.dos-doc-ic.f-img { color: #4e9a2f; border-color: #c6e3b8; background: #f5faf1; }
.dos-doc-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dos-doc-body .t { font-size: 12.5px; color: #1f2f44; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dos-doc-body .s { font-size: 11px; color: #7f8ea3; margin-top: 1px; }
.dos-doc-date { font-size: 11px; color: #7f8ea3; white-space: nowrap; }
.dos-doc-dl { color: #0b6fd0; display: inline-flex; margin-left: 4px; }

.dos-card-history { height: 230px; }
.dos-timeline { position: relative; display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.dos-timeline::before { content: ''; position: absolute; left: 4px; top: 12px; bottom: 14px; width: 1px; background: #d2dce8; }
.dos-tl { position: relative; display: grid; grid-template-columns: 9px minmax(0, 1fr); column-gap: 14px; height: 37px; align-content: center; }
.dos-tl-dot { grid-row: 1 / span 2; width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; box-shadow: 0 0 0 3px var(--surface); background: #0176cd; position: relative; z-index: 1; }
.dos-tl-dot.green { background: #66b33e; } .dos-tl-dot.orange { background: #f7901e; } .dos-tl-dot.purple { background: #7c5cd6; } .dos-tl-dot.teal { background: #0d9488; }
.dos-tl .t { font-size: 11.5px; line-height: 15px; color: #2c3e57; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dos-tl .s { font-size: 10.5px; line-height: 14px; color: #7f8ea3; }

.main:has(.dos) .content > .card, .main:has(.dos) .content > .grid { margin-top: 18px; }

@media (max-width: 1500px) {
    .dos-grid { grid-template-columns: 1fr; }
    .dos-card-prog, .dos-card-skills, .dos-card-notes, .dos-card-alerts, .dos-card-docs, .dos-card-history { height: auto; }
    .dos-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dos-row2, .dos-row3 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .dos-head { flex-direction: column; gap: 14px; }
    .dos-actions { margin-top: 0; flex-wrap: wrap; }
    .dos-kpis { grid-template-columns: 1fr; }
    .dos-track { padding: 0; overflow-x: auto; }
}

/* -------------------------------------------- 20e. Admissions unifiées (06) */
/* Référence : maquette 06 (1672 × 941). Colonne principale 967 px, rail 332 px. */
.main:has(.adm) .content { padding: 16px var(--shell-pad-r) 6px var(--shell-pad); }
.main:has(.adm) .page-foot { display: none; }
.main:has(.adm) .content { padding-bottom: 12px; }
.adm { display: grid; grid-template-columns: minmax(0, 1fr) 332px; gap: 33px; align-items: start; min-width: 0; }
.adm-sub { grid-template-columns: minmax(0, 1fr) 332px; }
.adm-main { min-width: 0; display: flex; flex-direction: column; }
.adm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 14px; min-height: 46px; }
.adm-head h1 { font-size: 26px; line-height: 30px; letter-spacing: -.6px; }
.adm-head .page-sub { font-size: 12.5px; line-height: 16px; color: var(--muted); }
.adm-sub .adm-head { margin-bottom: 16px; }
.adm-sub .adm-head .btn { margin-top: 4px; }

.adm-steps { display: flex; align-items: center; height: 53px; padding: 0 16px; border-radius: 14px; border-color: #eef1f4; margin-bottom: 21px; }
.adm-step { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.adm-step-mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--font); background: #fff; border: 1.5px solid #cfd6de; color: #5d6a88; }
.adm-step-label { font-size: 12.5px; font-weight: 500; color: #5d6a88; white-space: nowrap; }
.adm-step.is-done .adm-step-mark { background: #53a423; border-color: #53a423; color: #fff; }
.adm-step.is-done .adm-step-label { color: #14254e; font-weight: 600; }
.adm-step.is-current .adm-step-mark { background: #0b6fd0; border-color: #0b6fd0; color: #fff; }
.adm-step.is-current .adm-step-label { color: #0047c9; font-weight: 600; }
.adm-step-line { flex: 1 1 auto; height: 1px; background: #e4e9ee; margin: 0 16px; min-width: 24px; }

.adm-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 15px; margin-bottom: 20px; }
.adm-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adm-kpi { display: flex; align-items: center; gap: 14px; height: 86px; padding: 0 8px 0 16px; background: var(--surface); border: 1px solid #eef1f4; border-radius: 14px; box-shadow: var(--sh-xs); color: inherit; min-width: 0; }
a.adm-kpi:hover { text-decoration: none; border-color: #bcd9f3; }
.adm-kpi-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; }
.adm-kpi-body { display: flex; flex-direction: column; min-width: 0; }
.adm-kpi-body .v { font: 800 22px/24px var(--font-title); color: var(--ink); letter-spacing: -.4px; white-space: nowrap; }
.adm-kpi-body .l { font-size: 11.5px; line-height: 15px; color: #626f8f; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.1px; }
.adm-kpi-body .s { font-size: 11px; line-height: 14px; color: #516282; margin-top: 3px; white-space: nowrap; }

.adm-table { border-radius: 14px; border-color: #eef1f4; overflow: hidden; }
.adm-toolbar { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 12px; border-bottom: 1px solid #eef1f4; }
.adm-toolbar form { display: contents; }
.adm-tool { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; border: 1px solid #e7eaef; border-radius: 8px; background: var(--surface); color: #035dd4; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.adm-tool:hover { border-color: #9ec5ea; background: #f2f8fd; }
.adm-tool.adm-filter { color: #3d5b7b; margin-left: 0; }
.adm-tool.adm-filter.is-on { border-color: #0b6fd0; color: #0b6fd0; }
.adm-search { display: flex !important; align-items: center; gap: 9px; height: 34px; padding: 0 12px; border: 1px solid #ebedf2; border-radius: 8px; background: var(--surface); color: #7f8ea3; margin-left: auto; width: 240px; }
.adm-search input { border: 0; outline: 0; background: transparent; font-size: 12.5px; width: 100%; color: var(--ink); }
.adm-search input::placeholder { color: #8a97ab; }

.adm-grid { min-width: 0; }
.adm-grid thead th { height: 44px; padding: 0 12px; font-size: 12.5px; font-weight: 700; color: #1d2b4a; background: #fafbfb; border-bottom: 1px solid #f0f3f5; white-space: nowrap; }
.adm-grid thead th:first-child { padding-left: 16px; }
.adm-grid tbody td { height: 43px; padding: 0 12px; font-size: 12.5px; color: #34446a; border-bottom: 1px solid #f3f4f7; }
.adm-grid tbody td:first-child { padding-left: 16px; }
.adm-grid tbody tr:last-child td { border-bottom: 0; }
.adm-grid tbody tr.is-duplicate td { background: #fff8fa; }
.adm-grid .check-col { width: 40px; }
.adm-grid .cbx { width: 15px; height: 15px; }
.adm-cand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.adm-avatar { width: 32px; height: 32px; font-size: 11px; }
.adm-cand-body { display: flex; flex-direction: column; min-width: 0; }
.adm-cand-body .n { font-size: 12.5px; font-weight: 500; color: #0e1849; white-space: nowrap; }
.adm-cand-body .c { font-size: 11px; color: #6c769e; margin-top: 1px; }
.adm-dup { font-style: normal; font-size: 10px; font-weight: 700; color: #e52059; background: #fdeef3; border-radius: 4px; padding: 1px 5px; margin-left: 6px; text-transform: uppercase; letter-spacing: .4px; }
.adm-src { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.adm-src.s-blue { background: #e6f1fd; color: #0158dc; }
.adm-src.s-pink { background: #fdeef3; color: #df1b5c; }
.adm-src.s-orange { background: #fef3e6; color: #f66d16; }
.adm-prog { max-width: 190px; line-height: 15px; }
.adm-score { color: #47547b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-cycle { white-space: nowrap; }
.adm-site { display: inline-flex; align-items: center; gap: 7px; color: #4f5d82; white-space: nowrap; }
.adm-site .ic { color: #3f5070; }
.adm-conf { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.adm-conf.ok { background: #f4faf0; color: #377123; }
.adm-conf.ko { background: #fdeef1; color: #b30018; }
.adm-check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #c9d2dc; background: var(--surface); display: inline-grid; place-items: center; color: #fff; padding: 0; cursor: pointer; vertical-align: middle; }
.adm-check:hover { border-color: #0b6fd0; }
.adm-check.is-on { background: #277ed6; border-color: #277ed6; }
.adm-check.is-locked { cursor: default; opacity: .9; }
.adm-check .ic { width: 12px; height: 12px; stroke-width: 3; }
.adm-inline-form { display: inline-flex; }

.adm-pagination { display: flex; align-items: center; gap: 16px; height: 50px; padding: 0 16px; border-top: 1px solid #f0f3f5; }
.adm-count { font-size: 12px; color: #5a688d; }
.adm-count b { font-weight: 600; color: #2a4062; }
.adm-pages { display: flex; align-items: center; gap: 6px; margin: 0 auto; }
.adm-pages a, .adm-pages span { min-width: 26px; height: 26px; padding: 0 6px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: #5b6891; }
.adm-pages a:hover { background: #f1f4f6; text-decoration: none; color: #0b6fd0; }
.adm-pages .is-current { background: #edf5fe; color: #0b6fd0; font-weight: 700; box-shadow: inset 0 0 0 1px #bcd9f3; }
.adm-pages .disabled { opacity: .45; }
.adm-perpage { height: 30px; padding: 0 12px; font-size: 12px; border-radius: 8px; border-color: #e6eaef; color: #2a4062; }
.adm-perpage select { font-size: 12px; padding-right: 18px; }
.adm-perpage::after { right: 11px; width: 7px; height: 7px; }

.adm-synth { display: flex; align-items: center; height: 77px; padding: 0 22px 0 24px; margin-top: 13px; border-radius: 14px; border-color: #e7e9ec; }
.adm-synth-title { display: flex; flex-direction: column; gap: 4px; padding-right: 28px; border-right: 1px solid #eef1f4; margin-right: 6px; flex: 0 0 auto; }
.adm-synth-title b { font: 700 14.5px var(--font-title); color: #010217; }
.adm-synth-title span { font-size: 11.5px; color: #434f76; }
.adm-synth-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: 1 1 0; min-width: 0; border-right: 1px solid #eef1f4; height: 46px; }
.adm-synth-stat b { font: 700 17px var(--font-title); }
.adm-synth-stat span { font-size: 11px; color: #7c86a3; white-space: nowrap; }
.adm-synth-stat .c-green { color: #217700; } .adm-synth-stat .c-red { color: #d10029; } .adm-synth-stat .c-orange { color: #f07a1a; }
.adm-synth-action { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-left: 24px; flex: 0 0 auto; }
.adm-cta { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 22px; border-radius: 8px; background: #006cce; color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap; border: 0; cursor: pointer; }
.adm-cta:hover { background: #005bb0; }
.adm-cta:disabled, .adm-cta.is-disabled { background: #b9cde3; cursor: not-allowed; }
.adm-irr { font-size: 11px; color: #7f8ba0; }

.adm-rail { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.adm-cap { border-radius: 14px; border-color: #eef1f4; padding: 18px 18px 14px; }
.adm-cap h3, .adm-rules h3 { font-size: 14.5px; line-height: 18px; font-weight: 700; color: #010218; }
.adm-cap-list { display: flex; flex-direction: column; margin-top: 14px; }
.adm-cap-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: center; row-gap: 5px; column-gap: 8px; padding: 3px 0 6px; }
.adm-cap-name { font-size: 12.5px; color: #263d6a; }
.adm-cap-num { font-size: 12px; color: #6a789b; font-variant-numeric: tabular-nums; text-align: right; }
.adm-cap-pct { font-size: 12px; color: #848fa6; text-align: right; font-variant-numeric: tabular-nums; }
.adm-cap-pct.c-red { color: #d10029; font-weight: 600; }
.adm-cap-bar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: #edeff2; overflow: hidden; }
.adm-cap-bar i { display: block; height: 100%; border-radius: 3px; width: 0; }
.adm-cap-bar i.t-blue { background: #1373cd; } .adm-cap-bar i.t-green { background: #5faf2d; } .adm-cap-bar i.t-pink { background: #f50f6b; }
.adm-cap-bar i.t-orange { background: #fe9122; } .adm-cap-bar i.t-teal { background: #009695; } .adm-cap-bar i.t-purple { background: #7c5cd6; }
.adm-cap-bar i.t-cyan { background: #08a9df; } .adm-cap-bar i.t-red { background: #e5484d; }
.adm-cap-bar i[data-w="0"] { width: 0%; }
.adm-cap-bar i[data-w="1"] { width: 1%; }
.adm-cap-bar i[data-w="2"] { width: 2%; }
.adm-cap-bar i[data-w="3"] { width: 3%; }
.adm-cap-bar i[data-w="4"] { width: 4%; }
.adm-cap-bar i[data-w="5"] { width: 5%; }
.adm-cap-bar i[data-w="6"] { width: 6%; }
.adm-cap-bar i[data-w="7"] { width: 7%; }
.adm-cap-bar i[data-w="8"] { width: 8%; }
.adm-cap-bar i[data-w="9"] { width: 9%; }
.adm-cap-bar i[data-w="10"] { width: 10%; }
.adm-cap-bar i[data-w="11"] { width: 11%; }
.adm-cap-bar i[data-w="12"] { width: 12%; }
.adm-cap-bar i[data-w="13"] { width: 13%; }
.adm-cap-bar i[data-w="14"] { width: 14%; }
.adm-cap-bar i[data-w="15"] { width: 15%; }
.adm-cap-bar i[data-w="16"] { width: 16%; }
.adm-cap-bar i[data-w="17"] { width: 17%; }
.adm-cap-bar i[data-w="18"] { width: 18%; }
.adm-cap-bar i[data-w="19"] { width: 19%; }
.adm-cap-bar i[data-w="20"] { width: 20%; }
.adm-cap-bar i[data-w="21"] { width: 21%; }
.adm-cap-bar i[data-w="22"] { width: 22%; }
.adm-cap-bar i[data-w="23"] { width: 23%; }
.adm-cap-bar i[data-w="24"] { width: 24%; }
.adm-cap-bar i[data-w="25"] { width: 25%; }
.adm-cap-bar i[data-w="26"] { width: 26%; }
.adm-cap-bar i[data-w="27"] { width: 27%; }
.adm-cap-bar i[data-w="28"] { width: 28%; }
.adm-cap-bar i[data-w="29"] { width: 29%; }
.adm-cap-bar i[data-w="30"] { width: 30%; }
.adm-cap-bar i[data-w="31"] { width: 31%; }
.adm-cap-bar i[data-w="32"] { width: 32%; }
.adm-cap-bar i[data-w="33"] { width: 33%; }
.adm-cap-bar i[data-w="34"] { width: 34%; }
.adm-cap-bar i[data-w="35"] { width: 35%; }
.adm-cap-bar i[data-w="36"] { width: 36%; }
.adm-cap-bar i[data-w="37"] { width: 37%; }
.adm-cap-bar i[data-w="38"] { width: 38%; }
.adm-cap-bar i[data-w="39"] { width: 39%; }
.adm-cap-bar i[data-w="40"] { width: 40%; }
.adm-cap-bar i[data-w="41"] { width: 41%; }
.adm-cap-bar i[data-w="42"] { width: 42%; }
.adm-cap-bar i[data-w="43"] { width: 43%; }
.adm-cap-bar i[data-w="44"] { width: 44%; }
.adm-cap-bar i[data-w="45"] { width: 45%; }
.adm-cap-bar i[data-w="46"] { width: 46%; }
.adm-cap-bar i[data-w="47"] { width: 47%; }
.adm-cap-bar i[data-w="48"] { width: 48%; }
.adm-cap-bar i[data-w="49"] { width: 49%; }
.adm-cap-bar i[data-w="50"] { width: 50%; }
.adm-cap-bar i[data-w="51"] { width: 51%; }
.adm-cap-bar i[data-w="52"] { width: 52%; }
.adm-cap-bar i[data-w="53"] { width: 53%; }
.adm-cap-bar i[data-w="54"] { width: 54%; }
.adm-cap-bar i[data-w="55"] { width: 55%; }
.adm-cap-bar i[data-w="56"] { width: 56%; }
.adm-cap-bar i[data-w="57"] { width: 57%; }
.adm-cap-bar i[data-w="58"] { width: 58%; }
.adm-cap-bar i[data-w="59"] { width: 59%; }
.adm-cap-bar i[data-w="60"] { width: 60%; }
.adm-cap-bar i[data-w="61"] { width: 61%; }
.adm-cap-bar i[data-w="62"] { width: 62%; }
.adm-cap-bar i[data-w="63"] { width: 63%; }
.adm-cap-bar i[data-w="64"] { width: 64%; }
.adm-cap-bar i[data-w="65"] { width: 65%; }
.adm-cap-bar i[data-w="66"] { width: 66%; }
.adm-cap-bar i[data-w="67"] { width: 67%; }
.adm-cap-bar i[data-w="68"] { width: 68%; }
.adm-cap-bar i[data-w="69"] { width: 69%; }
.adm-cap-bar i[data-w="70"] { width: 70%; }
.adm-cap-bar i[data-w="71"] { width: 71%; }
.adm-cap-bar i[data-w="72"] { width: 72%; }
.adm-cap-bar i[data-w="73"] { width: 73%; }
.adm-cap-bar i[data-w="74"] { width: 74%; }
.adm-cap-bar i[data-w="75"] { width: 75%; }
.adm-cap-bar i[data-w="76"] { width: 76%; }
.adm-cap-bar i[data-w="77"] { width: 77%; }
.adm-cap-bar i[data-w="78"] { width: 78%; }
.adm-cap-bar i[data-w="79"] { width: 79%; }
.adm-cap-bar i[data-w="80"] { width: 80%; }
.adm-cap-bar i[data-w="81"] { width: 81%; }
.adm-cap-bar i[data-w="82"] { width: 82%; }
.adm-cap-bar i[data-w="83"] { width: 83%; }
.adm-cap-bar i[data-w="84"] { width: 84%; }
.adm-cap-bar i[data-w="85"] { width: 85%; }
.adm-cap-bar i[data-w="86"] { width: 86%; }
.adm-cap-bar i[data-w="87"] { width: 87%; }
.adm-cap-bar i[data-w="88"] { width: 88%; }
.adm-cap-bar i[data-w="89"] { width: 89%; }
.adm-cap-bar i[data-w="90"] { width: 90%; }
.adm-cap-bar i[data-w="91"] { width: 91%; }
.adm-cap-bar i[data-w="92"] { width: 92%; }
.adm-cap-bar i[data-w="93"] { width: 93%; }
.adm-cap-bar i[data-w="94"] { width: 94%; }
.adm-cap-bar i[data-w="95"] { width: 95%; }
.adm-cap-bar i[data-w="96"] { width: 96%; }
.adm-cap-bar i[data-w="97"] { width: 97%; }
.adm-cap-bar i[data-w="98"] { width: 98%; }
.adm-cap-bar i[data-w="99"] { width: 99%; }
.adm-cap-bar i[data-w="100"] { width: 100%; }
.adm-cap-total { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; column-gap: 8px; align-items: center; margin-top: 6px; padding-top: 12px; border-top: 1px solid #f1f4f6; font-size: 12.5px; color: #4e5b7f; }
.adm-cap-total b { font-weight: 700; color: #1f2f44; text-align: right; font-variant-numeric: tabular-nums; }
.adm-cap-total .p { text-align: right; font-weight: 600; color: #4e5b7f; }

.adm-conflict { background: #fff5f6; border: 1px solid #f8d6db; border-radius: 14px; padding: 18px 18px 16px; }
.adm-conflict h3 { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: #8d000b; }
.adm-conflict h3 .ic { color: #e5484d; }
.adm-conflict p { font-size: 12px; color: #ac111e; margin: 8px 0 0; line-height: 1.45; }
.adm-conflict p .dot { margin: 0 8px; color: #e5484d; }
.adm-conflict a { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: #0254ce; }

.adm-rules { border-radius: 14px; border-color: #eef1f4; padding: 18px 18px 12px; }
.adm-rule-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.adm-rule { display: flex; align-items: flex-start; gap: 12px; }
.adm-rule-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
.adm-rule-ic.tint-blue { background: #e0f0fd; color: #0b6fd0; } .adm-rule-ic.tint-green { background: #f1faed; color: #3f8a2a; } .adm-rule-ic.tint-pink { background: #ffecf2; color: #e52059; }
.adm-rule-body { display: flex; flex-direction: column; min-width: 0; }
.adm-rule-body .t { font-size: 12.5px; font-weight: 600; color: #000b3e; }
.adm-rule-body .s { font-size: 11px; color: #626d91; line-height: 1.45; margin-top: 2px; }

.adm-sev { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.adm-sev.bloquant { background: #fdeef1; color: #b30018; } .adm-sev.avertissement { background: #fef3e6; color: #f66d16; } .adm-sev.information { background: #e6f1fd; color: #0158dc; }
.adm-msg { max-width: 360px; line-height: 15px; white-space: normal; }
.adm-exceptions tbody td { height: auto; padding: 8px 12px; }
.adm-resolve { display: flex; align-items: center; gap: 8px; }
.adm-resolve input { height: 30px; border: 1px solid #e6eaef; border-radius: 6px; padding: 0 10px; font-size: 12px; width: 180px; }

@media (max-width: 1500px) {
    .adm, .adm-sub { grid-template-columns: 1fr; }
    .adm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .adm-steps { height: auto; flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
    .adm-step-line { display: none; }
    .adm-synth { height: auto; flex-wrap: wrap; gap: 14px; padding: 16px; }
    .adm-synth-stat { flex: 1 1 120px; border-right: 0; }
    .adm-toolbar { height: auto; flex-wrap: wrap; padding: 10px 12px; }
    .adm-search { margin-left: 0; width: 100%; }
}
@media (max-width: 860px) {
    .adm-kpis, .adm-kpis-3 { grid-template-columns: 1fr; }
    .adm-head { flex-direction: column; }
}

/* ------------------------------------------- 20f. Concours d'entrée (07) */
/* Référence : maquette 07 (1672 × 941). Une seule vue, tout tient à l'écran. */
.main:has(.conc) .content { padding: 16px var(--shell-pad-r) 8px var(--shell-pad); }
.main:has(.conc) .page-foot { display: none; }
.conc { min-width: 0; }
.conc-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 50px; margin-bottom: 22px; }
.conc-head-text { display: flex; align-items: center; gap: 12px; }
.conc-head-ic { color: #f45400; display: inline-flex; }
.conc-head h1 { font-size: 26px; line-height: 30px; letter-spacing: -.6px; }
.conc-head .page-sub { font-size: 12.5px; line-height: 16px; color: var(--muted); margin-top: 2px; }
.conc-head-actions { display: flex; align-items: center; gap: 10px; }
.conc-campaign { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 14px 0 16px; background: var(--surface); border: 1px solid #e6eaef; border-radius: 10px; box-shadow: var(--sh-xs); min-width: 219px; position: relative; }
.conc-campaign > .ic { color: #0b6fd0; }
.conc-campaign > .ic:last-child { color: #4d5f74; }
.conc-campaign-body { display: flex; flex-direction: column; min-width: 0; }
.conc-campaign-body .k { font-size: 10.5px; color: #5b7192; line-height: 12px; }
.conc-campaign-body select { appearance: none; border: 0; background: transparent; outline: 0; font-size: 13px; font-weight: 700; color: #051c56; padding: 0; max-width: 220px; text-overflow: ellipsis; cursor: pointer; }
.conc-new { width: 38px; height: 38px; border-radius: 10px; border: 1px solid #e6eaef; background: var(--surface); color: #0b6fd0; display: grid; place-items: center; }
.conc-new:hover { border-color: #9ec5ea; background: #f2f8fd; }

.conc-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 15px; margin-bottom: 15px; }
.conc-kpi { display: flex; align-items: center; gap: 16px; height: 85px; padding: 0 12px 0 18px; background: var(--surface); border: 1px solid #eef1f4; border-radius: 14px; box-shadow: var(--sh-xs); min-width: 0; }
.conc-kpi-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
.conc-kpi-body { display: flex; flex-direction: column; min-width: 0; }
.conc-kpi-body .v { font: 800 22px/24px var(--font-title); color: var(--ink); letter-spacing: -.4px; }
.conc-kpi-body .l { font-size: 12px; line-height: 15px; color: #5f6790; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conc-kpi-body .s { font-size: 11px; line-height: 14px; color: #647497; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.conc-card { border-radius: 14px; border-color: #eef1f4; padding: 14px 16px 12px; min-width: 0; }
.conc-title { font-size: 14px; line-height: 18px; font-weight: 700; color: #0f1f3d; }
.conc-empty { font-size: 11.5px; color: var(--muted); margin: 12px 0 0; line-height: 1.5; }
.conc-row2 { display: grid; grid-template-columns: 281fr 342fr 219fr 445fr; gap: 15px; margin-bottom: 15px; }
.conc-row2 > .conc-card, .conc-col { height: 260px; }
.conc-col { display: flex; flex-direction: column; gap: 13px; }
.conc-col .conc-type { height: 135px; }
.conc-col .conc-rate { height: 112px; }
.conc-funnel-body { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.conc-funnel-body .chart.funnel { width: 130px; height: 196px; flex: 0 0 auto; }
.conc-funnel-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; height: 196px; min-width: 0; }
.conc-funnel-legend li { display: flex; flex-direction: column; }
.conc-funnel-legend .v { font: 700 13px/16px var(--font-title); color: #1f2f44; white-space: nowrap; }
.conc-funnel-legend .v em { font-style: normal; font-weight: 500; color: #4d5f74; }
.conc-funnel-legend .l { font-size: 11px; color: #5f6790; line-height: 14px; }
.conc-trend-chart { margin-top: 8px; }
.conc-trend-chart .chart { width: 100%; height: 170px; }
.conc-legend { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11.5px; color: #4d5f74; margin-top: 2px; }
.conc-legend .sw { width: 22px; height: 2px; background: #005cd9; border-radius: 2px; }
.conc-type-body { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.conc-type-body .chart.donut { width: 88px; height: 88px; flex: 0 0 auto; }
.conc-type-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.conc-type-legend li { display: flex; align-items: flex-start; gap: 8px; }
.conc-type-legend .sw { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; margin-top: 4px; }
.conc-type-legend .l { display: block; font-size: 11.5px; color: #45557a; }
.conc-type-legend .v { display: block; font-size: 11px; color: #475581; margin-top: 1px; white-space: nowrap; }
.conc-rate-body { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.conc-rate-body .chart { width: 80px; height: 30px; flex: 0 0 auto; }
.conc-rate-value { font: 800 24px/28px var(--font-title); color: #0a1a2e; letter-spacing: -.6px; white-space: nowrap; }
.conc-rate-sub { font-size: 11px; color: #5f6790; margin-top: 3px; white-space: nowrap; }
.conc-centres-chart { margin-top: 6px; }
.conc-centres-chart .chart { width: 100%; height: 195px; }

.conc-row3 { display: grid; grid-template-columns: minmax(0, 1fr) 302px; gap: 15px; align-items: start; }
.conc-list { padding: 12px 14px 8px; height: 383px; display: flex; flex-direction: column; }
.conc-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.conc-search { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border: 1px solid #e6eaef; border-radius: 6px; color: #7f8ea3; width: 200px; }
.conc-search input { border: 0; outline: 0; background: transparent; font-size: 11.5px; width: 100%; color: var(--ink); }
.conc-grid { min-width: 0; }
.conc-grid thead th { height: 24px; padding: 0 10px; font-size: 11.5px; font-weight: 700; color: #071745; background: #fbfcfd; border-top: 1px solid #eef1f4; border-bottom: 1px solid #eef1f4; white-space: nowrap; }
.conc-grid tbody td { height: 27px; padding: 0 10px; font-size: 11.5px; line-height: 14px; color: #111d4e; border-bottom: 1px solid #f3f4f7; }
.conc-grid th + th, .conc-grid td + td { border-left: 1px solid #f1f4f6; }
.conc-grid .c-num { width: 34px; color: #2e4066; }
.conc-grid .c-name a { color: #111d4e; font-weight: 500; white-space: nowrap; }
.conc-grid .c-name a:hover { color: #0b6fd0; }
.conc-grid .c-nowrap { white-space: nowrap; }
.conc-grid .c-dept { max-width: 260px; }
.conc-grid .c-score { color: #2f3f6e; font-variant-numeric: tabular-nums; }
.conc-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 10px; border-radius: 6px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.conc-badge.green { background: #f1f7e9; color: #386d1c; } .conc-badge.red { background: #feebee; color: #ca0425; }
.conc-badge.purple { background: #f6f1fd; color: #6a31c5; } .conc-badge.orange { background: #fef3e7; color: #f45006; }
.conc-badge.blue { background: #e6f1fd; color: #0158dc; } .conc-badge.slate { background: #f1f4f6; color: #5b6891; }
.conc-pagination { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 8px; min-height: 36px; }
.conc-count { font-size: 11px; color: #596f96; }
.conc-pages { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.conc-pages a, .conc-pages span { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #58698d; border: 1px solid #e6eaef; background: var(--surface); }
.conc-pages a:hover { border-color: #9ec5ea; color: #0b6fd0; text-decoration: none; }
.conc-pages .is-current { background: #057ee5; border-color: #057ee5; color: #fff; }
.conc-pages .gap, .conc-pages .disabled { border-color: transparent; }
.conc-pages .disabled { opacity: .5; }
.conc-perpage { height: 24px; padding: 0 10px; font-size: 11px; border-radius: 6px; border-color: #e6eaef; color: #2a4062; margin-left: 12px; }
.conc-perpage select { font-size: 11px; padding-right: 16px; }
.conc-perpage::after { right: 9px; width: 6px; height: 6px; }

.conc-rail { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.conc-calendar { height: 228px; padding: 14px 16px 10px; }
.conc-cal-list { display: flex; flex-direction: column; margin-top: 6px; }
.conc-cal-row { display: flex; align-items: center; gap: 12px; height: 31px; border-bottom: 1px solid #f3f4f5; }
.conc-cal-row:last-child { border-bottom: 0; }
.conc-cal-ic { display: inline-flex; width: 20px; justify-content: center; flex: 0 0 auto; }
.conc-cal-ic.c-blue { color: #0d63d7; } .conc-cal-ic.c-orange { color: #fc5603; } .conc-cal-ic.c-green { color: #348816; }
.conc-cal-row .l { flex: 1 1 auto; font-size: 12px; color: #415181; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conc-cal-row .d { font-size: 11.5px; color: #2b4370; white-space: nowrap; }
.conc-actions { height: 142px; padding: 14px 16px 10px; }
.conc-action-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.conc-action { display: flex; align-items: center; gap: 10px; height: 26px; padding: 0 10px; border: 1px solid #e2ebf3; border-radius: 8px; background: var(--surface); color: #226dd5; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; width: 100%; }
.conc-action .ic { color: #0a58cf; flex: 0 0 auto; }
.conc-action:hover { background: #f2f8fd; border-color: #9ec5ea; text-decoration: none; }
.conc-action-more { display: none; }
.conc-actions:hover .conc-action-more, .conc-actions:focus-within .conc-action-more { display: flex; }

@media (max-width: 1500px) {
    .conc-row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .conc-row2 > .conc-card, .conc-col { height: auto; }
    .conc-row3 { grid-template-columns: 1fr; }
    .conc-list, .conc-calendar, .conc-actions { height: auto; }
    .conc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .conc-action-more { display: flex; }
}
@media (max-width: 860px) {
    .conc-kpis, .conc-row2 { grid-template-columns: 1fr; }
    .conc-head { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------- 21. Dossier étudiant (05) */
.profile-head { display: flex; align-items: center; gap: 22px; margin-bottom: 22px; flex-wrap: wrap; }
.profile-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 3px solid var(--surface); box-shadow: var(--sh); }
.profile-id { flex: 1 1 300px; min-width: 0; }
.profile-name { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.profile-name h1 { font-size: 30px; }
.profile-matricule { font-size: 14.5px; color: var(--muted); margin-top: 8px; }
.profile-matricule b { color: var(--brand-450); font-weight: 700; }
.profile-meta { font-size: 14px; color: var(--body); margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.profile-meta .dot-sep { color: var(--muted-2); }

.dl { display: flex; flex-direction: column; gap: 0; }
.dl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 13.5px; }
.dl-row + .dl-row { border-top: 1px solid var(--line-2); }
.dl-row dt { color: var(--muted); flex: 0 0 auto; font-size: 13px; }
.dl-row dd { margin: 0; color: var(--ink-2); font-weight: 500; text-align: right; min-width: 0; overflow-wrap: anywhere; }

.doc-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.doc-row:last-child { border-bottom: 0; }
.doc-ic { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; flex: 0 0 auto; }
.doc-body { flex: 1 1 auto; min-width: 0; }
.doc-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.doc-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.action-card {
    display: flex; align-items: center; gap: 15px; padding: 17px 19px;
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: inherit;
}
.action-card:hover { border-color: var(--brand-300); background: var(--brand-50); text-decoration: none; }
.action-card .action-title { font-size: 14.5px; font-weight: 700; color: var(--brand-500); }
.action-card .action-desc { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

/* --------------------------------------- 22. Planning hebdomadaire (10) */
.planner { overflow-x: auto; }
.planner-grid { min-width: 900px; }
.planner-head, .planner-row { display: grid; grid-template-columns: 88px repeat(6, minmax(0, 1fr)); }
.planner-head > div {
    padding: 13px 10px; text-align: center; background: var(--surface-2);
    border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--ink-2);
}
.planner-head > div span { display: block; font-weight: 500; color: var(--muted); font-size: 12px; margin-top: 2px; }
.planner-row > div { border-bottom: 1px solid var(--line-2); padding: 8px; min-height: 78px; }
.planner-time { display: grid; place-items: center; font-size: 12px; color: var(--muted); font-weight: 600; text-align: center; line-height: 1.5; background: #fcfdfe; }
.slot {
    border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px; height: 100%;
    background: var(--surface); font-size: 12px; position: relative;
}
.slot .slot-title { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.slot .slot-title::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-450); flex: 0 0 auto; }
.slot .slot-room { color: var(--muted); margin-top: 4px; }
.slot .slot-teacher { color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.slot.c-green .slot-title::before { background: var(--green); }
.slot.c-purple .slot-title::before { background: var(--purple); }
.slot.c-orange .slot-title::before { background: var(--orange); }
.slot.c-pink .slot-title::before { background: var(--pink); }
.slot.c-teal .slot-title::before { background: var(--teal); }
.slot.is-conflict { border-color: #f3b9bb; background: #fffafa; }

/* ------------------------------------------- 23. Document officiel (14) */
.doc-preview {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 34px 40px; position: relative; overflow: hidden;
    box-shadow: var(--sh-sm); font-family: var(--font-title);
}
.doc-preview::before {
    content: attr(data-watermark); position: absolute; inset: 0;
    display: grid; place-items: center; transform: rotate(-38deg);
    font: 800 40px var(--font-title); color: rgba(12, 40, 60, .07);
    letter-spacing: 4px; pointer-events: none; white-space: nowrap;
}
.doc-preview .doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.doc-preview .doc-head img { width: 190px; }
.doc-preview .doc-state { text-align: right; font-size: 11.5px; color: var(--ink-2); line-height: 1.6; }
.doc-preview .doc-flag { width: 76px; height: 15px; margin-top: 7px; margin-left: auto; border-radius: 2px; background: linear-gradient(90deg, #14b53a 0 33.3%, #fcd116 33.3% 66.6%, #ce1126 66.6%); }
.doc-preview h2 { text-align: center; margin: 30px 0 22px; font-size: 21px; letter-spacing: 1.4px; }
.doc-preview .doc-text { text-align: center; font-size: 13.5px; line-height: 2; color: var(--ink-2); }
.doc-preview .doc-name { font-family: 'Segoe Script', 'Brush Script MT', cursive; font-size: 30px; color: var(--ink); margin: 12px 0; }
.doc-preview .doc-program { font-size: 17px; font-weight: 800; letter-spacing: 1.2px; margin: 14px 0; }
.doc-preview .doc-sign { display: flex; justify-content: space-between; gap: 18px 30px; margin-top: 34px; align-items: flex-end; flex-wrap: wrap; }
.doc-preview .doc-qr { display: flex; gap: 13px; align-items: center; font-size: 10.5px; color: var(--muted); max-width: 230px; line-height: 1.5; }
.doc-preview .doc-qr img, .doc-preview .doc-qr svg { width: 74px; height: 74px; flex: 0 0 auto; }

/* -------------------------------------------------- 24. Jauge / donut */
.gauge-wrap { display: grid; place-items: center; text-align: center; }
.gauge-value { font: 800 34px var(--font-title); color: var(--ink); }
.gauge-label { font-size: 13px; color: var(--muted); }
.donut-center { text-anchor: middle; }
.donut-total { font: 800 19px var(--font-title); fill: var(--ink); }
.donut-cap { font-size: 11px; fill: var(--muted); }

/* -------------------------------------------------- 25. Mobile shell */
.m-shell { display: none; }
.m-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 70;
}
.m-header img { height: 40px; }
.m-nav {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.m-nav a {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 2px; font-size: 10.5px; font-weight: 600; color: var(--muted); min-height: var(--tap);
}
.m-nav a.is-active { color: var(--brand-450); }
.m-nav a:hover { text-decoration: none; }
.fab {
    display: none;
    position: fixed; right: 18px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 81;
    width: 58px; height: 58px; border-radius: 50%; background: var(--brand-450); color: #fff;
    place-items: center; box-shadow: 0 8px 22px rgba(1, 118, 205, .38);
}
.fab:hover { background: #0166b4; text-decoration: none; }

.scroller { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; flex: 0 0 auto; }
.scroll-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.scroll-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); display: block; }
.scroll-dots i.is-active { background: var(--brand-450); width: 18px; border-radius: var(--r-full); }

/* ------------------------------------------------------ 26. Utilitaires */
.flex { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.flex-between { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.flex-col { display: flex; flex-direction: column; gap: 12px; }
.flex-end { justify-content: flex-end; }
.spacer { flex: 1 1 auto; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-right { text-align: right; } .text-center { text-align: center; }
.muted { color: var(--muted); } .muted-2 { color: var(--muted-2); }
.ink { color: var(--ink); }
.ok { color: var(--green-700); } .warn { color: var(--amber-700); } .danger { color: var(--red-700); }
.mono { font-family: ui-monospace, Consolas, monospace; }
.fs-xs { font-size: 11.5px; } .fs-sm { font-size: 12.5px; } .fs-md { font-size: 14px; } .fs-lg { font-size: 16px; }
.fw-6 { font-weight: 600; } .fw-7 { font-weight: 700; } .fw-8 { font-weight: 800; }
.w-full { width: 100%; }
.hidden { display: none !important; }
.big-stat { font: 800 38px/1 var(--font-title); color: var(--brand-450); letter-spacing: -1px; }
.divider { height: 1px; background: var(--line-2); margin: 16px 0; }
.stat-inline { display: flex; align-items: baseline; gap: 8px; }
.stat-inline .v { font: 800 22px var(--font-title); color: var(--ink); }

/* ------------------------------------------------------ 27. Impression */
@media print {
    .sidebar, .topbar, .m-nav, .m-header, .toasts, .page-head-actions, .filter-bar, .table-foot, .fab, .env-banner { display: none !important; }
    .shell { grid-template-columns: 1fr; }
    .content { padding: 0; }
    .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
    body { background: #fff; }
}

/* ----------------------------------------------------- 28. Adaptatif */
@media (max-width: 1560px) {
    :root { --rail-w: 280px; --shell-pad: 24px; }
    .g-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1360px) {
    :root { --sidebar-w: 232px; }
    .g-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .welcome { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 1180px) {
    .g-main-rail, .g-rail-main, .g-2-1, .g-1-2, .g-3-2 { grid-template-columns: minmax(0, 1fr); }
    .g-rail-main > :first-child { order: 2; }
    .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .topbar-search { flex: 1 1 auto; margin: 0; }
}

@media (max-width: 1024px) {
    :root { --sidebar-w: var(--sidebar-w-sm); --shell-pad: 20px; }
    .sidebar-brand { padding: 14px 10px; min-height: 74px; justify-content: center; }
    .sidebar-brand img { max-width: 54px; object-fit: cover; object-position: left center; height: 44px; }
    .sidebar-nav { padding: 12px 8px; }
    .nav-item { justify-content: center; padding: 0 8px; }
    .nav-item .nav-label, .nav-item .nav-badge, .sidebar-group, .nav-sub { display: none; }
    .nav-item.is-active::after { right: -8px; }
    .sidebar-foot { padding: 10px 8px 16px; }
    .env-card { padding: 10px 8px; text-align: center; }
    .env-card .env-title span, .env-card .env-sub, .env-card .env-link span { display: none; }
    .env-card .env-title { justify-content: center; }
    .env-card .env-link { justify-content: center; }
    .g-3, .g-3-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .welcome { grid-template-columns: 1fr; }
    .welcome-figure { max-width: 460px; }
}

@media (max-width: 860px) {
    .form-grid, .form-grid.c3, .form-grid.c2, .form-grid.c5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .field.span-2 { grid-column: auto; }
    .g-2, .g-3, .g-4, .g-5, .g-6, .g-2-even { grid-template-columns: minmax(0, 1fr); }
    .quick-grid { grid-template-columns: 1fr; }
    .auth { grid-template-columns: 1fr; }
    .auth-visual { min-height: 250px; }
    .auth-photo { clip-path: none; }
    .auth-lines { display: none; }
    .auth-visual-inner { padding: 34px 26px; }
    .auth-visual .auth-lead, .auth-chips { display: none; }
    .auth-panel { --auth-pad: 20px; padding: 26px 20px 20px; }
    .auth-panel::before { display: none; }
    .auth-brand img { width: 260px; }
    .auth-card { padding: 22px 20px 26px; border-radius: 18px; }
    .auth-foot { margin: 22px -20px 0; padding: 16px 20px 0; justify-content: center; text-align: center; }
    .auth-trust span { padding: 0 12px; }
    .env-switch { grid-template-columns: 1fr; }
}

/* Bascule mobile : coquille dédiée, pas une réduction du bureau. */
@media (max-width: 760px) {
    :root { --shell-pad: 16px; }
    .shell { grid-template-columns: minmax(0, 1fr); }
    .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 160; width: min(286px, 86vw);
        transform: translateX(-100%); transition: transform .24s var(--ease);
    }
    .sidebar.is-open { transform: none; }
    .sidebar-brand { padding: 18px 20px; min-height: 92px; justify-content: flex-start; }
    .sidebar-brand img { max-width: 190px; height: auto; object-fit: contain; }
    .sidebar-nav { padding: 14px 12px; }
    .nav-item { justify-content: flex-start; padding: 0 14px; }
    .nav-item .nav-label, .nav-item .nav-badge, .sidebar-group, .nav-sub { display: revert; }
    .nav-item .nav-label { display: block; }
    .sidebar-foot { padding: 12px 16px 20px; }
    .env-card { padding: 14px 15px; text-align: left; }
    .env-card .env-title span, .env-card .env-sub, .env-card .env-link span { display: revert; }
    .env-card .env-title, .env-card .env-link { justify-content: flex-start; }
    .scrim { position: fixed; inset: 0; z-index: 155; background: rgba(6, 30, 45, .5); }

    .topbar { display: none; }
    .m-shell { display: block; }
    .m-nav { display: flex; }
    .fab { display: grid; }
    .content { padding: 18px var(--shell-pad) 96px; }
    .page-foot { display: none; }

    .page-head { flex-direction: column; align-items: stretch; gap: 14px; }
    .page-head h1 { font-size: 26px; }
    .page-head-actions .btn { flex: 1 1 auto; }

    .form-grid, .form-grid.c2, .form-grid.c3, .form-grid.c5 { grid-template-columns: 1fr; }
    .card-pad, .card-body, .card-head { padding-left: 16px; padding-right: 16px; }
    .table thead th:first-child, .table tbody td:first-child { padding-left: 16px; }
    .table thead th:last-child, .table tbody td:last-child { padding-right: 16px; }
    .table-foot { padding: 14px 16px; }

    /* Tableaux → cartes empilées */
    .table-cards { min-width: 0; }
    .table-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .table-cards tbody tr {
        display: block; border: 1px solid var(--line); border-radius: var(--r-md);
        margin-bottom: 10px; padding: 6px 14px; background: var(--surface);
    }
    .table-cards tbody td {
        display: flex; align-items: center; justify-content: space-between; gap: 14px;
        padding: 9px 0 !important; border-bottom: 1px solid var(--line-2); text-align: right;
    }
    .table-cards tbody td:last-child { border-bottom: 0; }
    .table-cards tbody td::before {
        content: attr(data-label); font-size: 11.5px; font-weight: 700; color: var(--muted);
        text-align: left; flex: 0 0 auto;
    }
    .table-cards .check-col { display: none !important; }

    .modal-backdrop { padding: 0; place-items: stretch; }
    .modal { width: 100%; max-height: 100dvh; border-radius: 0; }
    .drawer { width: 100vw; }
    .toasts { left: 12px; right: 12px; bottom: 88px; max-width: none; }

    .stepper { padding: 14px 16px; gap: 0; }
    .step-label { display: none; }
    .step-line { margin: 0 8px; min-width: 14px; }
    .step.is-current .step-label { display: block; }

    .profile-head { gap: 16px; }
    .profile-photo { width: 72px; height: 72px; }
    .profile-name h1 { font-size: 23px; }
}

@media (max-width: 400px) {
    .page-head-actions { flex-direction: column; align-items: stretch; }
    .btn-group { width: 100%; flex-direction: column; }
    .btn-group .btn { width: 100%; }
    .kpi { padding: 15px 16px; gap: 13px; }
    .kpi-value { font-size: 22px; }
}

@media (prefers-contrast: more) {
    :root { --muted: #4d6675; --line: #c5d3dc; }
    .badge, .tag { outline: 1px solid currentColor; }
}

/* ==========================================================================
   29. Utilitaires dimensionnels
   Politique de sécurité stricte : aucun attribut `style` en ligne n'est
   autorisé (les nonces CSP ne couvrent pas les styles d'attribut). Toute
   dimension fixe passe donc par une classe, et toute dimension calculée par
   un rendu SVG.
   ========================================================================== */
.sq-32 { width: 32px; height: 32px; }
.sq-36 { width: 36px; height: 36px; }
.sq-38 { width: 38px; height: 38px; }
.sq-40 { width: 40px; height: 40px; }
.sq-44 { width: 44px; height: 44px; }
.sq-46 { width: 46px; height: 46px; }
.sq-48 { width: 48px; height: 48px; }
.sq-52 { width: 52px; height: 52px; }
.sq-56 { width: 56px; height: 56px; }
.sq-64 { width: 64px; height: 64px; }

.gap-0 { gap: 0; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-14 { gap: 14px; }
.gap-18 { gap: 18px; }
.gap-22 { gap: 22px; }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: 4px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-14 { margin-top: 14px; }
.mt-20 { margin-top: 20px; }
.mt-26 { margin-top: 26px; }
.mb-0 { margin-bottom: 0; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-14 { margin-bottom: 14px; }
.mb-20 { margin-bottom: 20px; }

.no-wrap-flex { flex-wrap: nowrap; }
.flex-1 { flex: 1 1 auto; min-width: 0; }
.flex-0 { flex: 0 0 auto; }
.w-260 { width: 260px; max-width: 100%; }
.w-190 { width: 190px; max-width: 100%; }
.w-120 { width: 120px; max-width: 100%; }
.w-92 { width: 92px; }
.w-72 { width: 72px; }
.maxw-440 { max-width: 440px; }
.maxw-560 { max-width: 560px; }
.scroll-y-340 { max-height: min(420px, 60vh); overflow-y: auto; }
.scroll-y-260 { max-height: 260px; overflow-y: auto; }

.grow-input { flex: 1 1 auto; min-width: 0; }
.tag-lg { font-size: 15px; padding: 11px 14px; }
.m-menu-btn {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 2px; font-size: 10.5px; font-weight: 600; color: var(--muted); min-height: var(--tap);
}
.m-menu-btn.is-active { color: var(--brand-450); }
.fieldset-plain { border: 0; padding: 0; margin: 0 0 22px; }
.dropdown-menu.w-full { width: 100%; min-width: 0; }
.rail-sticky { position: sticky; top: calc(var(--topbar-h) + 16px); }
.meter-svg { display: block; width: 100%; }
.bar-svg-wrap { width: 100%; }

/* Pastilles de légende — couleurs de la palette des graphiques.
   Sélecteurs d'attribut : la couleur reste déclarative côté CSS, ce qui
   évite tout attribut `style` en ligne (interdit par la CSP). */
.sw[data-c="#0176cd"] { background: #0176cd; }
.sw[data-c="#66b33e"] { background: #66b33e; }
.sw[data-c="#f7901e"] { background: #f7901e; }
.sw[data-c="#7c5cd6"] { background: #7c5cd6; }
.sw[data-c="#0d9488"] { background: #0d9488; }
.sw[data-c="#ed0584"] { background: #ed0584; }
.sw[data-c="#01719d"] { background: #01719d; }
.sw[data-c="#e5484d"] { background: #e5484d; }
.sw[data-c="#a78bfa"] { background: #a78bfa; }
.sw[data-c="#08a9df"] { background: #08a9df; }

/* Dossier étudiant — trois colonnes (maquette 05). */
.g-dossier { grid-template-columns: 300px minmax(0, 1fr) 330px; align-items: start; }
@media (max-width: 1360px) { .g-dossier { grid-template-columns: 280px minmax(0, 1fr); } .g-dossier > :last-child { grid-column: 1 / -1; } }
@media (max-width: 1024px) { .g-dossier { grid-template-columns: minmax(0, 1fr); } .g-dossier > :last-child { grid-column: auto; } }
.table .mono { white-space: nowrap; }

/* ==========================================================================
   30. Calendrier mensuel (maquette 09)
   ========================================================================== */
.cal { width: 100%; table-layout: fixed; border-collapse: collapse; }
.cal thead th {
    padding: 8px 4px; font-size: 11px; font-weight: 700; color: var(--muted);
    text-align: center; border-bottom: 1px solid var(--line);
}
.cal tbody td {
    height: 66px; vertical-align: top; padding: 5px 4px;
    border: 1px solid var(--line-2); border-radius: var(--r-xs);
}
.cal tbody td.is-out { background: #fbfcfd; }
.cal tbody td.is-out .cal-num { color: var(--muted-2); }
.cal tbody td.is-today { background: var(--brand-50); box-shadow: inset 0 0 0 1.5px var(--brand-300); }
.cal-num { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-2); text-align: right; padding: 0 2px 3px; }
.cal-event {
    display: block; border-radius: var(--r-xs); padding: 3px 5px; margin-bottom: 3px;
    font-size: 9.5px; line-height: 1.3; overflow: hidden;
}
.cal-event b { display: block; font-size: 10px; font-weight: 700; }
.cal-event span { color: inherit; opacity: .8; }
.cal-event.t-blue { background: var(--brand-50); color: var(--brand-600); }
.cal-event.t-green { background: var(--green-50); color: var(--green-700); }
.cal-event.t-purple { background: var(--purple-50); color: #5b3fa8; }
.cal-event.t-orange { background: var(--orange-50); color: var(--amber-700); }
.cal-event.t-teal { background: var(--teal-50); color: #0f766e; }
.cal-event.t-pink { background: var(--pink-50); color: var(--pink-600); }
.cal-more { display: block; font-size: 9.5px; color: var(--muted); padding-left: 4px; }

@media (max-width: 760px) {
    .cal tbody td { height: 52px; }
    .cal-event b { font-size: 9px; }
    .cal-event span { display: none; }
}

/* Cellule de saisie de note (maquette 11) : compacte, centrée, tabulaire. */
.grade-cell {
    width: 74px; height: 38px; text-align: center; font-variant-numeric: tabular-nums;
    border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
    font-size: 13.5px; font-weight: 600; color: var(--ink); outline: 0;
    transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.grade-cell:focus { border-color: var(--brand-450); box-shadow: 0 0 0 3px var(--brand-50); }
.grade-cell[readonly] { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.grade-cell.has-error { border-color: #f3b9bb; background: #fffafa; color: var(--red-700); }

/* ------------------------------------------------- 29. Portail public (02) */
.btn-orange { background: var(--orange-600); color: #fff; box-shadow: 0 1px 2px rgba(238, 113, 18, .3); }
.btn-orange:hover { background: #d8620c; color: #fff; }

.portal {
    min-height: 100vh; padding: 26px clamp(20px, 4.5vw, 64px) 30px;
    background:
        radial-gradient(900px 420px at 8% -10%, #e3f3fa 0%, transparent 60%),
        radial-gradient(760px 380px at 100% 10%, #fdf0e2 0%, transparent 62%),
        var(--bg);
    display: flex; flex-direction: column; gap: 34px;
}
.portal-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.portal-brand { display: inline-flex; line-height: 0; }
.portal-logo { width: 280px; max-width: 70vw; height: auto; display: block; }
.portal-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.portal-hero {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr);
    align-items: center; gap: 44px; padding: 14px 0 6px;
}
.portal-intro { min-width: 0; }
.portal-title { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.1; letter-spacing: -1.3px; margin: 16px 0 14px; }
.portal-title span { color: var(--brand-450); display: block; }
.portal-lead { color: var(--body); font-size: 16px; line-height: 1.85; max-width: 560px; margin: 0; }
.portal-cta { margin-top: 24px; }

.portal-facts {
    display: flex; gap: 12px 36px; flex-wrap: wrap; margin: 30px 0 0; padding: 0;
}
.portal-facts > div { display: flex; flex-direction: column-reverse; gap: 4px; }
.portal-facts dt { font-size: 12.5px; color: var(--muted); }
.portal-facts dd { margin: 0; font: 800 22px/1.15 var(--font-title); color: var(--brand-600); letter-spacing: -.4px; }

.portal-box {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2xl);
    box-shadow: var(--sh-md); padding: 24px 26px 26px; min-width: 0;
}
.portal-box-title { font: 700 15.5px/1.3 var(--font-title); color: var(--ink); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.portal-box-title .sub { font-size: 12px; font-weight: 600; color: var(--muted); }

.portal-chart {
    list-style: none; margin: 0; padding: 18px 6px 0; height: 210px;
    display: flex; align-items: flex-end; gap: 12px;
    border-bottom: 1px solid var(--line);
    background: repeating-linear-gradient(to top, transparent 0 44px, var(--line-2) 44px 45px);
}
.portal-chart > li { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.portal-chart > li > i {
    display: block; width: 100%; max-width: 46px; height: 4%;
    border-radius: 8px 8px 2px 2px;
    background: linear-gradient(180deg, var(--cyan), var(--brand-500));
    transition: height .5s var(--ease);
}
.portal-chart > li:nth-child(even) > i { background: linear-gradient(180deg, #ffb23c, var(--orange)); }
.portal-chart > li > b {
    position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
    font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.portal-empty { padding: 28px 12px; }
.portal-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; }
.portal-kpis .kpi { padding: 16px 18px; }
.portal-kpis .kpi-value { font-size: 24px; }

.portal-modules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.portal-module {
    display: flex; flex-direction: column; gap: 4px; padding: 20px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
    box-shadow: var(--sh-xs); color: var(--ink); text-decoration: none;
    transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.portal-module:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--brand-300); color: var(--ink); }
.portal-module-ico {
    width: 38px; height: 38px; border-radius: var(--r); margin-bottom: 10px;
    display: grid; place-items: center; font-size: 16px;
    background: var(--brand-50); color: var(--brand-600);
}
.portal-module b { font-size: 14.5px; }
.portal-module small { color: var(--muted); font-size: 12.5px; }

.portal-foot {
    margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--muted);
}
.portal-foot a { color: var(--brand-600); }

@media (max-width: 1100px) {
    .portal-hero { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .portal-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .portal { gap: 26px; }
    .portal-logo { width: 220px; }
    .portal-actions .btn { height: 40px; padding: 0 14px; font-size: 13px; }
    .portal-modules, .portal-kpis { grid-template-columns: minmax(0, 1fr); }
    .portal-box { padding: 20px 18px 22px; }
    .portal-foot { flex-direction: column; }
}

/* Document officiel — compléments (maquette 14). */
.doc-preview .doc-signature-name {
    font-family: 'Segoe Script', 'Brush Script MT', cursive; font-size: 20px;
    color: var(--brand-700); margin-top: 10px;
}
.hash-block {
    word-break: break-all; line-height: 1.6; background: var(--surface-2);
    border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; display: block;
}
.doc-preview .doc-qr img { border-radius: 4px; }

/* Connexion (01) en mobile : bandeau de confiance et pied de page sur plusieurs lignes. */
@media (max-width: 640px) {
    .auth-trust { flex-wrap: wrap; gap: 8px 0; margin-top: 28px; }
    .auth-trust span { white-space: normal; font-size: 12.5px; }
    .auth-trust span + span { border-left: 1px solid #d4dee3; }
    .auth-foot {
        flex-direction: column; align-items: flex-start; gap: 10px;
        margin: 28px 0 0; padding: 18px 0 0;
    }
    .auth-foot > span { white-space: normal; }
    .auth-foot > span:first-child { overflow: visible; text-overflow: clip; }
    .auth-foot-links { flex-wrap: wrap; gap: 8px 18px; }
}

/* ==========================================================================
   31. Maquette pédagogique (maquettes 15 et 16)
   ========================================================================== */
.maquette { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; overflow-x: auto; }
.maquette-col { min-width: 130px; }
.maquette-head {
    text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink);
    padding: 9px 6px; background: var(--surface-2); border-radius: var(--r-sm); margin-bottom: 8px;
}
.maquette-head span { font-weight: 500; color: var(--muted); font-size: 11px; }
.ue-card {
    border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 10px;
    margin-bottom: 8px; background: var(--surface);
}
.ue-card .ue-name { display: block; font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.ue-card .ue-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.ue-card .ue-meta .mono { font-size: 10.5px; color: var(--muted); }
.ue-card .ue-tags { display: flex; gap: 4px; }
.ue-card .ue-tags .tag { font-size: 9.5px; padding: 2px 6px; }
.ue-card .ue-prereq { display: block; font-size: 10px; color: var(--muted); margin-top: 5px; }

@media (max-width: 1360px) { .maquette { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .maquette { grid-template-columns: minmax(0, 1fr); } }


/* ==========================================================================
   34. Enseignants & affectations (maquette 18)
   ========================================================================== */

/* Alertes de charge — pastille de gravité, identité, site concerné. */
.alert-rows { display: flex; flex-direction: column; }
.alert-row {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 12px 0; border-bottom: 1px solid var(--line-2);
}
.alert-row:first-child { padding-top: 2px; }
.alert-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.alert-row .dot {
    width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; margin-top: 6px;
    background: var(--muted-2);
}
.alert-row .dot.d-red { background: #e5484d; }
.alert-row .dot.d-orange { background: var(--orange); }
.alert-row .dot.d-green { background: var(--green); }
.alert-row .alert-body { flex: 1 1 auto; min-width: 0; }
.alert-row .alert-title { display: block; font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -.15px; }
.alert-row .alert-sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.alert-row .alert-side { flex: 0 0 auto; font-size: 11px; color: var(--brand-500); font-weight: 600; white-space: nowrap; }
a.alert-row:hover { text-decoration: none; }
a.alert-row:hover .alert-title { color: var(--brand-450); }

/* File d'attente — libellé à gauche, compteur à droite. */
.queue-rows { display: flex; flex-direction: column; }
.queue-row {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 0; border-bottom: 1px solid var(--line-2);
    font-size: 13px; color: var(--body);
}
.queue-row:last-child { border-bottom: 0; }
.queue-row .queue-ic { color: var(--muted); display: flex; flex: 0 0 auto; }
.queue-row .queue-label { flex: 1 1 auto; min-width: 0; }
.queue-row .queue-count {
    flex: 0 0 auto; min-width: 26px; text-align: center;
    font-size: 11.5px; font-weight: 700; color: var(--brand-600);
    background: var(--brand-50); border-radius: var(--r-full); padding: 3px 9px;
}
a.queue-row:hover { text-decoration: none; }
a.queue-row:hover .queue-label { color: var(--brand-450); }

/* Calendrier compact de la charge : un point coloré par journée planifiée. */
.mcal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.mcal-title { font-size: 12.5px; font-weight: 700; color: var(--ink); letter-spacing: -.15px; }
.mcal-nav { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--r-xs); color: var(--muted); }
.mcal-nav:hover { background: var(--surface-2); color: var(--brand-450); text-decoration: none; }
.mcal { width: 100%; table-layout: fixed; border-collapse: collapse; }
.mcal th {
    padding-bottom: 8px; font-size: 10.5px; font-weight: 700;
    color: var(--muted-2); text-align: center;
}
.mcal td { padding: 3px 0 6px; text-align: center; vertical-align: top; }
.mcal .mcal-day { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-2); line-height: 20px; }
.mcal td.is-out .mcal-day { color: var(--muted-2); font-weight: 500; }
.mcal td.is-today .mcal-day {
    background: var(--brand-450); color: #fff; border-radius: 50%;
    width: 20px; height: 20px; margin: 0 auto;
}
.mcal .mcal-dot { display: block; width: 4px; height: 4px; border-radius: 50%; margin: 3px auto 0; background: transparent; }
.mcal .mcal-dot.d-green { background: var(--green); }
.mcal .mcal-dot.d-orange { background: var(--orange); }
.mcal .mcal-dot.d-red { background: #e5484d; }

/* Cellule « charge » du registre enseignant. */
.load-cell { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.load-cell .load-value { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.load-cell .load-bar { width: 54px; flex: 0 0 auto; }

/* Utilitaires complémentaires (maquettes 17 et 18). */
.items-center { align-items: center; }
.fw-4 { font-weight: 400; }
.bt { border-top: 1px solid var(--line); padding-top: 11px; }
.link-sm { font-size: 12px; font-weight: 600; color: var(--brand-450); white-space: nowrap; }
.link-sm:hover { text-decoration: underline; }
.donut-wrap { display: grid; place-items: center; }
.donut-wrap .chart { max-width: 100%; }

/* Ligne « libellé / valeur » des encarts de synthèse (maquettes 17 et 18). */
.stat-line {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 7px 0; font-size: 13px; color: var(--body);
}
.stat-line + .stat-line { border-top: 1px solid var(--line-2); }
.stat-line b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-line b.ok { color: var(--green-700); }

/* Rangée d'indicateurs resserrée : cinq cartes dans la colonne principale. */
.kpi-row-5 .kpi { padding: 14px 14px; gap: 11px; }
.kpi-row-5 .kpi-badge { width: 40px; height: 40px; }
.kpi-row-5 .kpi-value { font-size: 23px; white-space: nowrap; }
.kpi-row-5 .kpi-label { font-size: 12.5px; margin-top: 2px; }
.kpi-row-5 .kpi-note { font-size: 10.5px; margin-top: 4px; line-height: 1.35; }

/* Anneau + légende côte à côte : la légende garde ses intitulés entiers. */
/* Anneau au-dessus, légende en dessous : les intitulés de départements
   réels sont plus longs que ceux de la maquette et doivent rester lisibles
   entiers dans une colonne de tiers de page. */
.donut-legend { display: block; }
.donut-legend .donut-wrap { width: 150px; max-width: 100%; margin: 0 auto 16px; }
.donut-legend .legend-list { width: 100%; gap: 8px; font-size: 12px; }
.donut-legend .legend-list li { gap: 8px; }
.donut-legend .legend-list .lg-label {
    min-width: 0; line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.donut-legend .legend-list .lg-value { flex: 0 0 auto; white-space: nowrap; font-size: 12px; }

/* Registre enseignant : dix colonnes tiennent dans la colonne principale,
   les intitulés longs sont tronqués avec leur valeur complète en infobulle. */
.table-teachers th, .table-teachers td { white-space: nowrap; }
.table-teachers .cell-person { flex-wrap: nowrap; }
.table-teachers tbody td { font-size: 12.5px; padding: 12px 6px; }
.table-teachers thead th { font-size: 11px; padding: 12px 6px; }
.table-teachers thead th:first-child, .table-teachers tbody td:first-child { padding-left: 14px; }
.table-teachers thead th:last-child, .table-teachers tbody td:last-child { padding-right: 14px; }
.table-teachers .cell-person .person-name { font-size: 12.5px; }
.table-teachers .person-name {
    display: block; max-width: 92px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.table-teachers .cell-clip {
    display: block; max-width: 84px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.table-teachers .cell-person { gap: 8px; }
.table-teachers .avatar.xs { width: 26px; height: 26px; font-size: 10px; }
.table-teachers .badge { padding: 3px 7px; font-size: 11px; }
.table-teachers .mono { font-size: 11.5px; letter-spacing: -.2px; }
.table-teachers .load-cell { justify-content: flex-end; white-space: nowrap; }
.table-teachers .load-cell .load-bar { width: 42px; }
.table-teachers .row-actions { gap: 0; }

@media (max-width: 1360px) {
    .table-teachers .person-name { max-width: 92px; }
    .table-teachers .cell-clip { max-width: 84px; }
}

/* Largeurs de colonnes fixées : les dix colonnes de la maquette 18 tiennent
   sans défilement horizontal, quelle que soit la longueur des libellés. */
@media (min-width: 761px) {
    .table-teachers { table-layout: fixed; width: 100%; }
    .table-teachers .c-ens { width: 20%; }
    .table-teachers .c-mat { width: 10%; }
    .table-teachers .c-spe { width: 9%; }
    .table-teachers .c-dep { width: 9.5%; }
    .table-teachers .c-site { width: 8.5%; }
    .table-teachers .c-ue { width: 4.5%; }
    .table-teachers .c-charge { width: 10.5%; }
    .table-teachers .c-dispo { width: 10.5%; }
    .table-teachers .c-statut { width: 10.5%; }
    .table-teachers .c-actions { width: 7%; }
    /* La troncature est portée par les éléments internes : une cellule
       numérique ne doit jamais afficher de points de suspension. */
    .table-teachers th, .table-teachers td { overflow: hidden; }
    .table-teachers .person-name, .table-teachers .cell-clip { max-width: 100%; }
    .table-teachers th {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
}

/* ==========================================================================
   35. Dossier enseignant (maquette 18 — fiche et formulaire)
   ========================================================================== */

.profile-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; }

/* Disponibilités : une colonne par jour ouvré. */
.avail-day {
    border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 11px 12px; background: #fcfdfe; min-width: 0;
}
.avail-day-name { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.avail-slot {
    display: block; font-size: 11.5px; font-weight: 600;
    border-radius: var(--r-xs); padding: 4px 7px; margin-bottom: 4px;
}
.avail-slot.is-on { background: var(--green-50); color: var(--green-700); }
.avail-slot.is-off { background: var(--red-50); color: var(--red-700); }
.avail-slot.is-none { background: var(--surface-2); color: var(--muted); font-weight: 500; }
.avail-note { display: block; font-size: 10.5px; color: var(--muted); line-height: 1.4; }

/* Liste de garanties du formulaire de création. */
.check-list { display: flex; flex-direction: column; gap: 11px; }
.check-list li {
    display: flex; align-items: flex-start; gap: 9px; list-style: none;
    font-size: 12.5px; color: var(--body); line-height: 1.5;
}
.check-list li .ic { color: var(--green-600); flex: 0 0 auto; margin-top: 1px; }

/* Fenêtre large : grille de saisie hebdomadaire. */
.modal.modal-lg { width: min(880px, 100%); }
.form-grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .form-grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .form-grid.c4 { grid-template-columns: minmax(0, 1fr); } }

.flex.wrap { flex-wrap: wrap; }

/* Variante verticale du fil d'étapes (formulaires de création). */
.stepper.vertical {
    display: flex; flex-direction: column; gap: 0; padding: 0; overflow: visible;
}
.stepper.vertical .step {
    align-items: flex-start; gap: 12px; padding-bottom: 18px; position: relative;
}
.stepper.vertical .step:last-child { padding-bottom: 0; }
.stepper.vertical .step:not(:last-child)::before {
    content: ''; position: absolute; left: 13px; top: 30px; bottom: 4px;
    width: 2px; background: var(--line);
}
.stepper.vertical .step-dot {
    width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; z-index: 1;
    display: grid; place-items: center;
    background: var(--surface-2); color: var(--muted);
    font-size: 12px; font-weight: 700; border: 1px solid var(--line);
}
.stepper.vertical .step.is-current .step-dot { background: var(--brand-450); border-color: var(--brand-450); color: #fff; }
.stepper.vertical .step.is-done .step-dot { background: var(--green); border-color: var(--green); color: #fff; }
.stepper.vertical .step-body { min-width: 0; padding-top: 3px; }
.stepper.vertical .step-title { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.stepper.vertical .step-desc { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.5; }

/* Empilement de lignes descriptives (versions de modèles, listes courtes). */
.list-rows { display: flex; flex-direction: column; }
.person-body { min-width: 0; }
.mt-4 { margin-top: 4px; }

/* Tableau à largeurs fixées : toutes les colonnes tiennent dans la carte,
   sans défilement horizontal. Les largeurs sont portées par un <colgroup>
   à l'aide des utilitaires .cw-* ci-dessous. */
@media (min-width: 761px) {
    .table-fit { table-layout: fixed; width: 100%; }
    .table-fit thead th, .table-fit tbody td { overflow: hidden; }
    .table-fit thead th { text-overflow: ellipsis; }
}
.table-fit tbody td { font-size: 12.5px; padding: 12px 6px; }
.table-fit thead th { font-size: 11px; padding: 12px 6px; }
.table-fit thead th:first-child, .table-fit tbody td:first-child { padding-left: 14px; }
.table-fit thead th:last-child, .table-fit tbody td:last-child { padding-right: 14px; }
.table-fit .badge { padding: 3px 7px; font-size: 11px; }
.table-fit .cell-clip {
    display: block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cw-6 { width: 6%; } .cw-7 { width: 7%; } .cw-8 { width: 8%; } .cw-9 { width: 9%; }
.cw-10 { width: 10%; } .cw-11 { width: 11%; } .cw-12 { width: 12%; } .cw-13 { width: 13%; }
.cw-14 { width: 14%; } .cw-15 { width: 15%; } .cw-16 { width: 16%; } .cw-17 { width: 17%; }
.cw-18 { width: 18%; } .cw-20 { width: 20%; } .cw-22 { width: 22%; } .cw-25 { width: 25%; }

/* Sur téléphone, la barre d'actions du tableau croisé doit se replier :
   sans quoi elle déborde et fait défiler la page horizontalement. */
@media (max-width: 560px) {
    .dash-card-head { flex-wrap: wrap; row-gap: 8px; }
    .dash-table-actions { flex-wrap: wrap; gap: 8px; width: 100%; }
    .dash-table-actions .btn { flex: 1 1 auto; justify-content: center; }
    .dash-table-actions .btn:nth-child(3) { margin-left: 0; }
}

/* ------------------------------------------------- Tableau de bord mobile
   Maquette 25 : les filtres et les indicateurs défilent horizontalement
   plutôt que de repousser le contenu sous la ligne de flottaison. */
@media (max-width: 560px) {
    /* `min-width: 0` est indispensable : sans lui, un conteneur flexible se
       dimensionne sur son contenu et le défilement horizontal ne s'applique
       pas — c'est toute la page qui défile alors. */
    .dash-filters {
        flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
        min-width: 0; max-width: 100%;
        padding-bottom: 6px; -webkit-overflow-scrolling: touch;
    }
    .dash-filters::-webkit-scrollbar { height: 0; }
    .dash-filters > * { flex: 0 0 auto; scroll-snap-align: start; }
    .dash-filters .w-annee { width: 220px; }
    .dash-filters .w-site, .dash-filters .w-cycle, .dash-filters .w-filiere { width: 160px; }
    .dash-filters .dash-refresh { margin-left: 4px; }

    .dash-kpis {
        display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
        min-width: 0; max-width: 100%;
        padding-bottom: 6px; -webkit-overflow-scrolling: touch;
    }
    .dash-kpis::-webkit-scrollbar { height: 0; }
    .dash-kpis > .kpi {
        flex: 0 0 auto; width: 66%; min-width: 200px; scroll-snap-align: start;
    }
}

/* --------------------------------------------- Dossier étudiant sur mobile
   Maquette 26 : la photo et les actions se resserrent pour laisser la place
   au contenu du dossier. */
@media (max-width: 560px) {
    .dos-photo { width: 72px; height: 72px; }
    .dos-photo-initials { font-size: 24px; }
    .dos-actions { width: 100%; gap: 8px; }
    .dos-actions .btn {
        flex: 1 1 auto; justify-content: center;
        padding-left: 12px; padding-right: 12px; font-size: 12.5px;
    }
}

/* ==========================================================================
   36. Analyse décisionnelle (maquette 20)
   ========================================================================== */

/* Six indicateurs sur une ligne : le format est plus resserré qu'à cinq. */
.kpi-row-6 .kpi { padding: 13px 13px; gap: 10px; }
.kpi-row-6 .kpi-badge { width: 38px; height: 38px; }
.kpi-row-6 .kpi-value { font-size: 21px; white-space: nowrap; }
.kpi-row-6 .kpi-label { font-size: 12px; margin-top: 2px; line-height: 1.35; }
.kpi-row-6 .kpi-trend { font-size: 10.5px; margin-top: 5px; }
.kpi-row-6 .kpi-trend .vs { display: none; }

/* Heatmap de performance : l'intensité porte la valeur, le texte la confirme. */
.table.heatmap tbody td { padding: 5px 6px; border-bottom: 0; }
.table.heatmap thead th { padding: 8px 6px; font-size: 10.5px; }
.table.heatmap .hm-label {
    font-size: 12px; color: var(--ink-2); font-weight: 600;
    max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hm-cell {
    display: block; border-radius: var(--r-xs); padding: 7px 4px;
    font-size: 11px; font-weight: 700; text-align: center; line-height: 1.2;
}
.hm-cell.hm-0 { background: #fde8e8; color: #a12b2b; }
.hm-cell.hm-1 { background: #fdeadb; color: #a4560f; }
.hm-cell.hm-2 { background: #fdf4d9; color: #86671a; }
.hm-cell.hm-3 { background: #eaf5dd; color: #4a7420; }
.hm-cell.hm-4 { background: #d7edc4; color: #3d6b18; }
.hm-cell.hm-5 { background: #bfe3a5; color: #2f5a11; }
.hm-cell.hm-vide { background: var(--surface-2); color: var(--muted-2); font-weight: 500; }

.hm-scale { display: flex; align-items: center; gap: 5px; }
.hm-scale .hm-cell { width: 30px; height: 12px; padding: 0; }

/* Ventilation femmes / hommes par niveau. */
.niveau-rows { display: flex; flex-direction: column; gap: 10px; }
.niveau-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) 42px; gap: 10px; align-items: center; }
.niveau-row .niveau-label {
    font-size: 11.5px; color: var(--body);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.niveau-row .niveau-value {
    font-size: 11.5px; font-weight: 700; color: var(--ink);
    text-align: right; font-variant-numeric: tabular-nums;
}

/* Constats saillants. */
.insight { display: flex; align-items: flex-start; gap: 10px; }
.insight-ic { width: 30px; height: 30px; flex: 0 0 auto; }
.insight-text { font-size: 12.5px; color: var(--body); line-height: 1.55; }

/* Pastilles de légende complémentaires. */
.sw[data-c="#1d92d4"] { background: #1d92d4; }
.sw[data-c="#014c71"] { background: #014c71; }

@media (max-width: 1360px) {
    .grid.g-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .grid.g-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .niveau-row { grid-template-columns: 66px minmax(0, 1fr) 38px; }
}
@media (max-width: 560px) {
    .grid.g-6 { grid-template-columns: minmax(0, 1fr); }
}

/* Légende du radar : les intitulés de filières sont longs, la valeur reste
   alignée à droite et l'intitulé se tronque proprement. */
.legend-list .lg-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-list .lg-value { flex: 0 0 auto; }
.sw[data-c="#0d9488"] { background: #0d9488; }