.ar-portal-body {
    /* Identité ArabiLang (maquettes UI) */
    --ar-primary: #005064;
    --ar-primary-2: #00728d;
    --ar-orange: #f97316;
    --ar-pink: #ec4899;
    --ar-green: #22c55e;
    --ar-blue: #3b82f6;
    --ar-purple: #7c3aed;
    --ar-warning: #f59e0b;
    --ar-danger: #ef4444;
    --ar-ink: #0f172a;
    --ar-muted: #64748b;

    /* Design tokens — surfaces & bordures */
    --ar-line: #eef2f7;
    --ar-border: #e8edf5;
    --ar-bg: #f8fafc;
    --ar-card: #ffffff;

    /* Ombres douces, jamais lourdes */
    --ar-shadow-sm: 0 2px 10px rgba(15, 23, 42, .04);
    --ar-shadow: 0 8px 30px rgba(15, 23, 42, .06);

    /* Rayons */
    --ar-radius-card: 20px;
    --ar-radius-input: 14px;
    --ar-radius-btn: 14px;
    --ar-radius-modal: 24px;
    --ar-radius-sidebar: 24px;

    /* Hauteurs de contrôle & mouvement */
    --ar-control-h: 44px;
    --ar-ease: 180ms ease;

    margin: 0;
    background: var(--ar-bg);
    color: var(--ar-ink);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ar-portal-body * {
    box-sizing: border-box;
}

.ar-portal-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    max-width: 1540px;
    margin: 0 auto;
    padding: 18px;
}

.ar-portal-sidebar {
    position: sticky;
    top: 18px;
    min-height: calc(100vh - 36px);
    border-radius: 26px;
    padding: 18px;
    color: #fff;
    background: linear-gradient(180deg, var(--ar-primary), #00384a);
    box-shadow: var(--ar-shadow);
}

.ar-portal-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 10px 10px 24px;
    color: #fff;
    font-size: 24px;
    font-weight: 950;
    text-decoration: none;
}

.ar-portal-brand > span:last-child span {
    color: #ff9d1b;
}

.ar-portal-brand-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 13px;
    letter-spacing: 0;
}

.ar-portal-nav {
    display: grid;
    gap: 6px;
}

.ar-portal-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 12px 14px;
    border-radius: 15px;
    color: #fff;
    text-decoration: none;
    font-weight: 850;
}

.ar-portal-nav a span {
    flex: 0 0 auto;
}

.ar-portal-nav i,
.ar-portal-btn i,
.ar-teacher-session-row a i,
.ar-teacher-action-row i {
    width: 18px;
    height: 18px;
    stroke-width: 2.4;
}

.ar-portal-nav a.active,
.ar-portal-nav a:hover {
    background: rgba(255, 255, 255, .16);
}

.ar-portal-side-note {
    margin-top: 40px;
    padding: 24px;
    border-radius: 23px;
    text-align: center;
    background: linear-gradient(180deg, #3574a0, #1d2f6f);
}

.ar-portal-side-note div {
    margin-bottom: 10px;
    font-size: 58px;
}

.ar-portal-main {
    min-width: 0;
}

.ar-portal-topbar {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    padding: 0 22px;
    border: 1px solid var(--ar-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--ar-shadow);
}

.ar-portal-kicker {
    color: var(--ar-muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.ar-portal-topbar h1 {
    margin: 2px 0 0;
    font-size: 24px;
    line-height: 1.2;
}

.ar-portal-user {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    font-weight: 900;
}

.ar-portal-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffe4ef;
    color: #9b1a54;
}

.ar-portal-content {
    display: grid;
    gap: 22px;
}

.ar-portal-app {
    max-width: none;
    gap: 0;
    grid-template-columns: 280px minmax(0, 1fr);
    margin: 0;
    padding: 0;
}

.ar-portal-app .ar-portal-sidebar {
    top: 0;
    min-height: 100vh;
    border-radius: 0;
    padding: 28px 18px;
}

.ar-portal-app .ar-portal-main {
    padding: 30px 34px 44px;
}

.ar-portal-app .ar-portal-topbar {
    min-height: 60px;
    margin-bottom: 18px;
}

.ar-portal-home {
    display: grid;
    gap: 22px;
}

.ar-portal-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 30px;
    border: 1px solid #dff1ff;
    border-radius: 28px;
    background: linear-gradient(100deg, #fff, #eef9ff 55%, #fff1f7);
}

.ar-portal-eyebrow {
    margin: 0 0 8px;
    color: var(--ar-primary);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.ar-portal-hero h2 {
    margin: 0 0 8px;
    font-size: 34px;
    line-height: 1.1;
}

.ar-portal-hero p:last-child {
    margin: 0;
    color: #334155;
}

.ar-portal-hero-art {
    flex: 0 0 auto;
    font-size: 76px;
}

.ar-portal-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.ar-portal-kpi,
.ar-portal-panel,
.ar-portal-empty {
    border: 1px solid var(--ar-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--ar-shadow);
}

.ar-portal-kpi {
    min-height: 118px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 20px;
}

.ar-portal-kpi span {
    color: var(--ar-muted);
    font-size: 13px;
    font-weight: 850;
}

.ar-portal-kpi strong {
    color: var(--ar-primary);
    font-size: 34px;
    line-height: 1;
}

.ar-portal-kpi-accent strong {
    color: var(--ar-orange);
}

.ar-portal-section {
    display: grid;
    gap: 14px;
}

.ar-portal-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ar-portal-section-head h2 {
    margin: 0;
    font-size: 22px;
}

.ar-portal-parent-home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 20px;
}

.ar-portal-parent-main,
.ar-portal-side-panel {
    display: grid;
    align-content: start;
    gap: 20px;
}

.ar-portal-centered-head {
    justify-content: center;
    text-align: center;
}

.ar-portal-learner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
    justify-content: center;
    gap: 18px;
}

.ar-portal-learner-card {
    position: relative;
    overflow: hidden;
    display: grid;
    justify-items: center;
    gap: 14px;
    min-height: 390px;
    padding: 24px;
    border: 1px solid color-mix(in srgb, var(--ar-level) 30%, #fff);
    border-radius: 24px;
    background: linear-gradient(135deg, var(--ar-level-soft), #fff 72%);
    box-shadow: var(--ar-shadow);
    text-align: center;
}

.ar-portal-learner-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.ar-portal-learner-card::after {
    content: "";
    position: absolute;
    right: -45px;
    bottom: -45px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ar-level) 13%, transparent);
}

.ar-portal-learner-card > * {
    position: relative;
    z-index: 1;
}

.ar-portal-learner-avatar {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border: 5px solid color-mix(in srgb, var(--ar-level) 25%, #fff);
    border-radius: 50%;
    background: #fff;
    color: var(--ar-level);
    font-size: 26px;
    font-weight: 950;
}

.ar-portal-learner-card h3 {
    margin: 0;
    font-size: 24px;
}

.ar-portal-level-chip {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 6px 11px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ar-level) 14%, #fff);
    color: var(--ar-level);
    font-size: 12px;
    font-weight: 950;
}

.ar-portal-learner-group {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .68);
}

.ar-portal-learner-group span {
    color: var(--ar-muted);
    font-size: 12px;
    font-weight: 850;
}

.ar-portal-progress-ring {
    --p: 0;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: conic-gradient(var(--ar-level, var(--ar-primary)) calc(var(--p) * 1%), var(--ar-purple) 0 calc((var(--p) + 18) * 1%), #ccefe0 0 82%, #edf2f7 0);
}

.ar-portal-progress-ring > div {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #fff;
    color: var(--ar-ink);
    font-size: 21px;
    font-weight: 950;
}

.ar-portal-progress-ring-large {
    width: 150px;
    height: 150px;
    margin: 8px auto 18px;
}

.ar-portal-progress-ring-large > div {
    width: 110px;
    height: 110px;
}

.ar-portal-progress-ring-large b {
    font-size: 31px;
}

.ar-portal-progress-ring-large small {
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

.ar-portal-summary-list,
.ar-portal-finished-list {
    display: grid;
    gap: 0;
    padding: 10px 22px 22px;
    border: 1px solid var(--ar-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--ar-shadow);
}

.ar-portal-course-row,
.ar-portal-finished-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 18px;
    align-items: center;
    min-height: 76px;
    padding: 16px 0;
    border-bottom: 1px solid var(--ar-line);
}

.ar-portal-finished-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.ar-portal-course-row:last-child,
.ar-portal-finished-card:last-child {
    border-bottom: 0;
}

.ar-portal-course-row span,
.ar-portal-finished-card span,
.ar-portal-mini-label {
    color: var(--ar-muted);
    font-size: 13px;
    font-weight: 800;
}

.ar-portal-course-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff0f6;
    color: var(--ar-pink);
    font-size: 13px;
    font-weight: 950;
}

.ar-portal-family-summary {
    display: grid;
}

.ar-portal-legend {
    display: grid;
    gap: 10px;
}

.ar-portal-legend div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #334155;
    font-weight: 850;
}

.ar-portal-legend i {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 8px;
    border-radius: 3px;
}

.ar-portal-group-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.ar-portal-group-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 16px;
    padding: 22px;
    border: 1px solid color-mix(in srgb, var(--ar-level) 30%, #fff);
    border-radius: 24px;
    background: linear-gradient(135deg, var(--ar-level-soft), #fff 72%);
    box-shadow: var(--ar-shadow);
}

.ar-portal-group-card::after {
    content: "";
    position: absolute;
    right: -45px;
    bottom: -45px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ar-level) 13%, transparent);
}

.ar-portal-card-top,
.ar-portal-next-box,
.ar-portal-progress-row,
.ar-portal-card-actions {
    position: relative;
    z-index: 1;
}

.ar-portal-card-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}

.ar-portal-face {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 4px solid color-mix(in srgb, var(--ar-level) 25%, #fff);
    border-radius: 50%;
    background: #fff;
    font-size: 32px;
}

.ar-portal-card-top h3 {
    margin: 2px 0 5px;
    font-size: 18px;
    line-height: 1.2;
}

.ar-portal-card-top span,
.ar-portal-card-line,
.ar-portal-next-box span,
.ar-portal-next-box small,
.ar-portal-progress-row span {
    color: var(--ar-muted);
    font-size: 13px;
    font-weight: 750;
}

.ar-portal-status {
    padding: 6px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #15803d;
    font-size: 12px;
    font-weight: 950;
}

.ar-portal-status-termine {
    background: #f1f5f9;
    color: #475569;
}

.ar-portal-status-en-attente {
    background: #fef3c7;
    color: #b45309;
}

.ar-portal-status-a-venir {
    background: #dbeafe;
    color: #1d4ed8;
}

.ar-portal-next-box {
    display: grid;
    gap: 4px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .72);
}

.ar-portal-next-box strong {
    font-size: 18px;
}

.ar-portal-progress-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ar-portal-ring {
    --p: 0;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: conic-gradient(var(--ar-level) calc(var(--p) * 1%), #eef2f7 0);
}

.ar-portal-ring span {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    color: var(--ar-ink);
    font-weight: 950;
}

.ar-portal-progress-row div:last-child {
    display: grid;
    gap: 2px;
}

.ar-portal-card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ar-portal-btn,
.ar-portal-panel a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 16px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 950;
}

.ar-portal-btn-primary {
    background: linear-gradient(180deg, var(--ar-primary-2), var(--ar-primary));
    color: #fff;
}

.ar-portal-btn-soft,
.ar-portal-panel a {
    border: 1px solid #d7e1e8;
    background: #fff;
    color: var(--ar-primary);
}

.ar-portal-home-panels {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 18px;
}

.ar-portal-panel {
    padding: 22px;
}

.ar-portal-panel h2 {
    margin: 0 0 8px;
    font-size: 20px;
}

.ar-portal-panel p {
    margin: 0;
    color: var(--ar-muted);
}

.ar-portal-panel a {
    margin-top: 14px;
}

.ar-portal-panel-activity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    border-color: #fed7aa;
    background: linear-gradient(135deg, #fff7ed, #fff 58%, #fff1f7);
}

.ar-portal-panel-icon {
    font-size: 52px;
}

.ar-portal-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
}

.ar-portal-empty div {
    font-size: 54px;
}

.ar-portal-empty h2 {
    margin: 0;
}

.ar-portal-empty p {
    max-width: 520px;
    margin: 0;
    color: var(--ar-muted);
}

.ar-teacher-dashboard {
    display: grid;
    gap: 18px;
}

.ar-teacher-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 248px;
    gap: 26px;
    align-items: center;
    min-height: 172px;
}

.ar-teacher-panel,
.ar-teacher-metric,
.ar-teacher-next-card {
    border: 1px solid var(--ar-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--ar-shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ar-teacher-panel:hover,
.ar-teacher-metric:hover,
.ar-teacher-next-card:hover,
.ar-teacher-week-session:hover,
.ar-teacher-group-mini-grid a:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 52px rgba(15, 23, 42, .13);
}

.ar-teacher-welcome {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
}

.ar-teacher-greeting-line {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.ar-teacher-day-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: #fff7ed;
    color: #f97316;
    box-shadow: 0 12px 26px rgba(249, 115, 22, .14);
}

.ar-teacher-day-icon i {
    width: 23px;
    height: 23px;
}

.ar-teacher-hero h2 {
    margin: 0;
    color: #07164d;
    font-size: 38px;
    line-height: 1.08;
}

.ar-teacher-hero p:last-child {
    margin: 0;
    color: #334155;
    font-size: 16px;
}

.ar-teacher-ai-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 13px;
    max-width: 760px;
    margin-top: 4px;
    padding: 14px 16px;
    border: 1px solid #ede9fe;
    border-radius: 18px;
    background: linear-gradient(135deg, #faf7ff, #fff 55%, #eef9ff);
    box-shadow: 0 12px 30px rgba(79, 70, 229, .08);
}

.ar-teacher-ai-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: #ede9fe;
    color: #7c3aed;
}

.ar-teacher-ai-icon i {
    width: 20px;
    height: 20px;
}

.ar-teacher-ai-summary div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ar-teacher-ai-summary strong {
    color: #4c1d95;
    font-size: 13px;
    font-weight: 950;
}

.ar-teacher-ai-summary div span {
    color: #335061;
    font-size: 14px;
    font-weight: 820;
}

.ar-teacher-hero-tools {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    display: inline-flex;
}

.ar-teacher-hero-tools button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--ar-primary);
    stroke: var(--ar-primary);
    box-shadow: 0 10px 24px rgba(0, 80, 100, .11);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.ar-teacher-hero-tools button:hover {
    transform: translateY(-2px);
    background: #eef9ff;
    color: var(--ar-primary);
    stroke: var(--ar-primary);
    box-shadow: 0 14px 30px rgba(0, 80, 100, .16);
}

.ar-teacher-hero-tools button span {
    position: absolute;
    top: -7px;
    right: -7px;
    display: grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: #fb7185;
    color: #fff;
    font-size: 11px;
    font-weight: 950;
}

.ar-teacher-hero-tools i,
.ar-teacher-hero-tools svg {
    display: block;
    width: 19px;
    height: 19px;
    stroke: currentColor;
}

.ar-teacher-illustration {
    position: relative;
    justify-self: end;
    width: min(100%, 176px);
    height: 152px;
    margin-top: 22px;
}

.ar-teacher-illustration::before {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 6px;
    width: 138px;
    height: 16px;
    border-radius: 50%;
    background: rgba(15, 23, 42, .08);
}

.ar-teacher-figure-head {
    position: absolute;
    right: 58px;
    top: 10px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #ffd7b5;
    box-shadow: inset 0 -6px 0 rgba(180, 83, 9, .12);
}

.ar-teacher-figure-head::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 8px;
    width: 42px;
    height: 22px;
    border-radius: 18px 18px 8px 8px;
    background: #07164d;
}

.ar-teacher-figure-head::after {
    content: "";
    position: absolute;
    left: 17px;
    bottom: 15px;
    width: 20px;
    height: 8px;
    border-bottom: 2px solid #7c2d12;
    border-radius: 0 0 999px 999px;
}

.ar-teacher-figure-body {
    position: absolute;
    right: 46px;
    top: 62px;
    width: 80px;
    height: 74px;
    border-radius: 26px 26px 18px 18px;
    background: linear-gradient(180deg, var(--ar-primary), #00728d);
}

.ar-teacher-figure-body::before,
.ar-teacher-figure-body::after {
    content: "";
    position: absolute;
    top: 14px;
    width: 42px;
    height: 14px;
    border-radius: 999px;
    background: #00728d;
}

.ar-teacher-figure-body::before {
    left: -26px;
    transform: rotate(-24deg);
}

.ar-teacher-figure-body::after {
    right: -28px;
    transform: rotate(24deg);
}

.ar-teacher-figure-book {
    position: absolute;
    right: 24px;
    bottom: 18px;
    width: 76px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(90deg, #7c3aed 0 49%, #8b5cf6 50% 100%);
    box-shadow: 0 10px 24px rgba(124, 58, 237, .18);
}

.ar-teacher-figure-book::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .52);
}

.ar-teacher-figure-pointer {
    position: absolute;
    right: 8px;
    top: 42px;
    width: 44px;
    height: 6px;
    border-radius: 999px;
    background: #f97316;
    transform: rotate(-34deg);
    transform-origin: left center;
}

.ar-teacher-metric-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.ar-teacher-metric {
    display: grid;
    align-content: center;
    gap: 8px;
    min-height: 118px;
    padding: 18px;
}

.ar-teacher-metric-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ar-teacher-metric-top i,
.ar-teacher-metric-top svg {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: 15px;
    stroke-width: 2.4;
}

.ar-teacher-metric span {
    color: #334155;
    font-size: 12px;
    font-weight: 850;
}

.ar-teacher-metric strong {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: #07164d;
    font-size: 38px;
    line-height: 1;
}

.ar-teacher-metric small {
    font-size: 14px;
}

.ar-tone-blue { border-color: #dbeafe; background: linear-gradient(135deg, #f8fbff, #fff); }
.ar-tone-green { border-color: #dcfce7; background: linear-gradient(135deg, #f6fff9, #fff); }
.ar-tone-orange { border-color: #fed7aa; background: linear-gradient(135deg, #fff7ed, #fff); }
.ar-tone-purple { border-color: #ede9fe; background: linear-gradient(135deg, #faf7ff, #fff); }
.ar-tone-rose { border-color: #fbcfe8; background: linear-gradient(135deg, #fff1f7, #fff); }
.ar-tone-amber { border-color: #fde68a; background: linear-gradient(135deg, #fffbeb, #fff); }
.ar-tone-blue .ar-teacher-metric-top i,
.ar-tone-blue .ar-teacher-metric-top svg { background: #dbeafe; color: #2563eb; stroke: #2563eb; }
.ar-tone-green .ar-teacher-metric-top i,
.ar-tone-green .ar-teacher-metric-top svg { background: #dcfce7; color: #16a34a; stroke: #16a34a; }
.ar-tone-orange .ar-teacher-metric-top i,
.ar-tone-orange .ar-teacher-metric-top svg { background: #ffedd5; color: #f97316; stroke: #f97316; }
.ar-tone-purple .ar-teacher-metric-top i,
.ar-tone-purple .ar-teacher-metric-top svg { background: #ede9fe; color: #7c3aed; stroke: #7c3aed; }
.ar-tone-rose .ar-teacher-metric-top i,
.ar-tone-rose .ar-teacher-metric-top svg { background: #fce7f3; color: #db2777; stroke: #db2777; }
.ar-tone-amber .ar-teacher-metric-top i,
.ar-tone-amber .ar-teacher-metric-top svg { background: #fef3c7; color: #d97706; stroke: #d97706; }

.ar-teacher-command-grid {
    display: grid;
    grid-template-columns: minmax(320px, .95fr) minmax(360px, 1fr) minmax(340px, .95fr);
    gap: 20px;
}

.ar-teacher-next-card {
    position: relative;
    display: grid;
    align-content: space-between;
    gap: 24px;
    min-height: 330px;
    padding: 32px 28px 28px;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #5b21b6);
    border-color: rgba(255, 255, 255, .22);
}

.ar-teacher-next-card span,
.ar-teacher-next-card small {
    color: rgba(255, 255, 255, .82);
    font-weight: 850;
}

.ar-teacher-next-card > div:first-child > span:first-child {
    display: inline-block;
    max-width: calc(100% - 170px);
}

.ar-teacher-next-badge {
    position: absolute;
    top: 22px;
    right: 22px;
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 12px;
    font-weight: 950;
}

.ar-teacher-next-card strong {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 28px 0 4px;
    font-size: 48px;
    line-height: 1;
}

.ar-teacher-next-card strong small {
    color: rgba(255, 255, 255, .7);
    font-size: 16px;
    font-weight: 950;
    text-transform: uppercase;
}

.ar-teacher-next-card .ar-teacher-canada-time {
    display: block;
    color: rgba(255, 255, 255, .76);
    font-size: 13px;
    font-weight: 850;
}

.ar-teacher-next-card .ar-teacher-canada-time b {
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.ar-teacher-next-card .ar-teacher-canada-time {
    margin: 0 0 10px;
}

.ar-teacher-next-card p {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 900;
}

.ar-teacher-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ar-teacher-next-card .ar-portal-btn-primary {
    background: #fff;
    color: #4f46e5;
}

.ar-teacher-next-card .ar-portal-btn-soft {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.ar-teacher-panel {
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 22px;
}

.ar-teacher-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ar-teacher-panel-head h3 {
    margin: 0;
    color: #07164d;
    font-size: 20px;
}

.ar-teacher-panel-head a {
    color: #4f46e5;
    font-size: 13px;
    font-weight: 950;
    text-decoration: none;
}

.ar-teacher-session-list,
.ar-teacher-action-list,
.ar-teacher-message-list {
    display: grid;
    gap: 0;
}

.ar-teacher-session-row,
.ar-teacher-action-row,
.ar-teacher-message-list a {
    min-width: 0;
    border-top: 1px solid var(--ar-line);
}

.ar-teacher-session-row {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 84px;
    padding: 13px 0;
}

.ar-teacher-session-row.is-past {
    opacity: .58;
    filter: grayscale(.35);
}

.ar-teacher-session-row.is-past strong,
.ar-teacher-session-row.is-past time,
.ar-teacher-session-row.is-past span {
    color: #64748b;
}

.ar-teacher-session-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(59, 130, 246, .12);
}


.ar-teacher-session-row time {
    display: flex;
    align-items: baseline;
    gap: 5px;
    color: #07164d;
    font-size: 18px;
    font-weight: 950;
    line-height: 1.1;
}

.ar-teacher-session-row time small {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.ar-teacher-session-row time em {
    margin-left: 4px;
    color: #94a3b8;
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
}

.ar-teacher-session-row div,
.ar-teacher-action-row div,
.ar-teacher-message-list a {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.ar-teacher-session-row strong,
.ar-teacher-action-row strong,
.ar-teacher-message-list strong {
    overflow: hidden;
    color: #07164d;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ar-teacher-session-row span,
.ar-teacher-action-row small,
.ar-teacher-message-list span {
    overflow: hidden;
    color: var(--ar-muted);
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ar-teacher-session-row a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 8px 13px;
    border: 1px solid #ddd6fe;
    border-radius: 12px;
    background: #fff;
    color: #4f46e5;
    font-size: 13px;
    font-weight: 950;
    text-decoration: none;
}

.ar-teacher-disabled-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 8px 13px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 950;
    cursor: not-allowed;
}

.ar-teacher-disabled-action i,
.ar-teacher-disabled-action svg {
    width: 18px;
    height: 18px;
}

.ar-teacher-action-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 70px;
    padding: 13px 0;
    color: inherit;
    text-decoration: none;
}

.ar-teacher-action-row > span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: #ffedd5;
    color: #f97316;
}

.ar-action-purple > span { background: #ede9fe; color: #7c3aed; }
.ar-action-blue > span { background: #dbeafe; color: #2563eb; }

.ar-teacher-action-row mark {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fb7185;
    color: #fff;
    font-size: 12px;
    font-weight: 950;
}

.ar-action-purple mark {
    background: #8b5cf6;
}

.ar-teacher-lower-grid {
    display: grid;
    grid-template-columns: minmax(620px, 1.55fr) minmax(320px, .85fr);
    gap: 20px;
}

.ar-teacher-message-list a {
    padding: 15px 0;
    color: inherit;
    text-decoration: none;
}

.ar-teacher-week-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.ar-teacher-week-day {
    display: grid;
    align-content: start;
    gap: 9px;
    min-height: 162px;
    padding: 12px;
    border: 1px solid var(--ar-line);
    border-radius: 20px;
    background: #fff;
}

.ar-teacher-week-day.is-today {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #eef9ff, #fff);
}

.ar-teacher-week-day header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ar-teacher-week-day strong {
    color: #07164d;
    font-size: 13px;
}

.ar-teacher-week-day header span {
    display: grid;
    place-items: center;
    min-width: 25px;
    height: 25px;
    padding: 0 7px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 950;
}

.ar-teacher-week-day small {
    color: var(--ar-muted);
    font-size: 12px;
    font-weight: 850;
}

.ar-teacher-week-session {
    display: grid;
    gap: 2px;
    padding: 9px 10px;
    border-radius: 14px;
    background: #f8fafc;
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.ar-teacher-week-session:hover {
    background: #fff;
}

.ar-teacher-week-session time {
    color: #4f46e5;
    font-size: 12px;
    font-weight: 950;
}

.ar-teacher-week-session span {
    overflow: hidden;
    color: #334155;
    font-size: 12px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ar-teacher-week-day em {
    color: var(--ar-primary);
    font-size: 12px;
    font-style: normal;
    font-weight: 950;
}

.ar-teacher-tip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-top: 10px;
    padding: 16px;
    border-radius: 18px;
    background: #f8f5ff;
    color: #312e81;
    font-weight: 850;
}

.ar-teacher-tip > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: #ede9fe;
    color: #7c3aed;
}

.ar-teacher-tip i {
    width: 20px;
    height: 20px;
}

.ar-teacher-tip strong {
    display: block;
    margin-bottom: 2px;
    color: #4c1d95;
}

.ar-teacher-tip p {
    margin: 0;
    color: #4f46e5;
    font-size: 13px;
}

.ar-teacher-group-mini-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.ar-teacher-group-mini-grid a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 15px;
    border: 1px solid color-mix(in srgb, var(--ar-group-tone) 26%, #fff);
    border-radius: 18px;
    background: linear-gradient(135deg, var(--ar-group-soft), #fff 62%);
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ar-teacher-group-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: #fff;
    color: var(--ar-group-tone);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.ar-teacher-group-icon i {
    width: 22px;
    height: 22px;
}

.ar-teacher-group-mini-grid a > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.ar-teacher-group-mini-grid strong {
    color: #07164d;
}

.ar-teacher-group-mini-grid span {
    color: var(--ar-muted);
    font-size: 12px;
    font-weight: 800;
}

.ar-teacher-group-mini-grid small {
    color: var(--ar-group-tone);
    font-size: 12px;
    font-weight: 950;
}

.ar-teacher-group-mini-grid em {
    grid-column: 1 / -1;
    overflow: hidden;
    height: 7px;
    border-radius: 999px;
    background: #eef2f7;
}

.ar-teacher-group-mini-grid b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ar-group-tone);
}

.ar-teacher-empty-line {
    margin: 0;
    color: var(--ar-muted);
    font-weight: 800;
}

.ar-portal-card {
    padding: 22px;
    border: 1px solid var(--ar-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--ar-shadow);
}

.ar-portal-group-page {
    display: grid;
    gap: 22px;
}

.ar-portal-page-stack {
    display: grid;
    gap: 22px;
}

.ar-portal-group-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px;
    border: 1px solid var(--ar-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--ar-shadow);
}

.ar-portal-group-tabs a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 10px 13px;
    border-radius: 12px;
    color: var(--ar-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 950;
}

.ar-portal-group-tabs a.active,
.ar-portal-group-tabs a:hover {
    background: #eef9ff;
    color: var(--ar-ink);
}

.ar-portal-group-hero {
    border-color: color-mix(in srgb, var(--ar-level) 28%, #fff);
    background: linear-gradient(100deg, var(--ar-level-soft), #fff 58%, #fff7ed);
}

.ar-portal-detail-grid {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 18px;
}

.ar-portal-sidebar-stack,
.ar-portal-group-main {
    display: grid;
    align-content: start;
    gap: 18px;
}

.ar-portal-meta {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 10px 12px;
    margin: 14px 0 0;
}

.ar-portal-meta dt {
    color: var(--ar-muted);
    font-weight: 850;
}

.ar-portal-meta dd {
    min-width: 0;
    margin: 0;
    font-weight: 750;
}

.ar-portal-session-list {
    display: grid;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.ar-portal-session-list-full {
    max-height: 760px;
    overflow: auto;
    padding-right: 4px;
}

.ar-portal-session-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    min-height: 48px;
    padding: 10px 0;
    border-top: 1px solid var(--ar-line);
}

.ar-portal-session-actions,
.ar-portal-inline-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ar-portal-session-actions {
    justify-content: flex-end;
}

.ar-portal-inline-action {
    margin: 0;
}

.ar-portal-inline-action input {
    display: none;
}

.ar-portal-inline-action button {
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid #d7e1e8;
    border-radius: 999px;
    background: #fff;
    color: var(--ar-primary);
    font: inherit;
    font-size: 11px;
    font-weight: 950;
    cursor: pointer;
}

.ar-portal-inline-action button:hover {
    border-color: var(--ar-primary);
}

.ar-portal-inline-action button:disabled {
    cursor: wait;
    opacity: .62;
}

.ar-portal-stat-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.ar-portal-stat-row article {
    display: grid;
    gap: 6px;
    min-height: 94px;
    align-content: center;
    padding: 16px;
    border: 1px solid var(--ar-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--ar-shadow);
}

.ar-portal-stat-row strong {
    color: var(--ar-level);
    font-size: 30px;
    line-height: 1;
}

.ar-portal-stat-row span {
    color: var(--ar-muted);
    font-size: 12px;
    font-weight: 850;
}

.ar-portal-person-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.ar-portal-person-list div {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
}

.ar-portal-mini-avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ar-level-soft);
    color: var(--ar-level);
    font-size: 12px;
    font-weight: 950;
}

.ar-session-pill {
    padding: 6px 10px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 950;
}

.ar-session-past {
    background: #f1f5f9;
    color: #475569;
}

.ar-session-cancel {
    background: #fef3c7;
    color: #b45309;
}

.ar-session-rattrapage {
    background: #ede9fe;
    color: #6d28d9;
}

.ar-session-free {
    background: #d1fae5;
    color: #047857;
}

.ar-portal-group-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.ar-portal-report-panel {
    display: grid;
    gap: 14px;
}

.ar-portal-report-list {
    display: grid;
    gap: 10px;
}

.ar-portal-report-item {
    border: 1px solid var(--ar-line);
    border-radius: 16px;
    background: #f8fafc;
}

.ar-portal-report-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
}

.ar-portal-report-item summary::-webkit-details-marker {
    display: none;
}

.ar-portal-report-item summary span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ar-portal-report-item summary small {
    color: var(--ar-muted);
    font-size: 12px;
    font-weight: 850;
}

.ar-portal-report-item summary a {
    flex: 0 0 auto;
}

.ar-portal-report-form {
    margin: 0;
    padding: 0 14px 14px;
}

.ar-portal-report-form textarea {
    min-height: 220px;
    line-height: 1.8;
    text-align: right;
}

.ar-portal-action-tile {
    display: grid;
    gap: 6px;
    min-height: 118px;
    align-content: center;
    padding: 18px;
    border: 1px solid var(--ar-line);
    border-radius: 20px;
    background: #fff;
    color: var(--ar-ink);
    text-decoration: none;
    box-shadow: var(--ar-shadow);
}

.ar-portal-action-tile strong {
    color: var(--ar-primary);
    font-size: 17px;
}

.ar-portal-action-tile span {
    color: var(--ar-muted);
    font-size: 13px;
}

.ar-portal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.ar-portal-actions a {
    color: var(--ar-primary);
    font-weight: 850;
    text-decoration: none;
}

.ar-teacher-calendar-page {
    display: grid;
    gap: 18px;
}

.ar-teacher-calendar-headline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 20px;
    align-items: start;
}

.ar-teacher-calendar-headline h2 {
    margin: 0 0 6px;
    color: #07164d;
    font-size: 36px;
    line-height: 1.1;
}

.ar-teacher-calendar-headline p {
    margin: 0;
    color: #334155;
    font-size: 16px;
    font-weight: 650;
}

.ar-teacher-calendar-view-tabs {
    display: inline-flex;
    gap: 6px;
    padding: 6px;
    border: 1px solid #e6ebf5;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(16, 35, 75, .06);
}

.ar-teacher-calendar-view-tabs a,
.ar-teacher-calendar-nav a,
.ar-calendar-filter-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border-radius: 13px;
    color: #17234d;
    font-weight: 950;
    text-decoration: none;
}

.ar-teacher-calendar-view-tabs a {
    padding: 10px 18px;
}

.ar-teacher-calendar-view-tabs a.active {
    background: #f2efff;
    color: #4f46e5;
}

.ar-teacher-calendar-view-tabs svg,
.ar-teacher-calendar-nav svg,
.ar-teacher-calendar-filters svg,
.ar-teacher-calendar-tip svg,
.ar-teacher-calendar-list-row svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.35;
}

.ar-teacher-calendar-nav {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ar-teacher-calendar-nav a {
    padding: 10px 14px;
    border: 1px solid #e6ebf5;
    background: #fff;
    box-shadow: 0 10px 24px rgba(16, 35, 75, .05);
}

.ar-teacher-calendar-nav a[aria-label] {
    width: 44px;
    padding: 0;
}

.ar-teacher-calendar-nav strong {
    color: #07164d;
    font-size: 15px;
    white-space: nowrap;
}

.ar-teacher-calendar-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 14px;
    padding: 14px;
    border: 1px solid #e6ebf5;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(16, 35, 75, .05);
}

.ar-calendar-filter-control {
    position: relative;
    min-width: 0;
    padding: 0 14px;
    border: 1px solid #e6ebf5;
    background: #fff;
}

.ar-calendar-filter-control input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #17234d;
    font: inherit;
    font-weight: 950;
}

.ar-calendar-filter-control input::placeholder {
    color: #17234d;
    opacity: 1;
}

.ar-calendar-filter-control > svg {
    flex: 0 0 auto;
    color: #4f46e5;
}

.ar-teacher-calendar-layout {
    display: grid;
    grid-template-columns: minmax(640px, .95fr) minmax(560px, 1.05fr);
    gap: 20px;
}

.ar-teacher-calendar-layout.ar-mode-calendar,
.ar-teacher-calendar-layout.ar-mode-list {
    grid-template-columns: 1fr;
}

.ar-teacher-calendar-board,
.ar-teacher-calendar-list-panel,
.ar-teacher-calendar-tip {
    border: 1px solid #e6ebf5;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(16, 35, 75, .07);
}

.ar-teacher-calendar-board {
    overflow: hidden;
}

.ar-teacher-calendar-grid-head,
.ar-teacher-calendar-grid-body {
    display: grid;
    grid-template-columns: 82px repeat(7, minmax(120px, 1fr));
    min-width: 1080px;
}

.ar-teacher-calendar-grid-head {
    padding-top: 14px;
    background: #fff;
}

.ar-teacher-calendar-grid-head > span {
    min-height: 72px;
}

.ar-teacher-calendar-grid-head strong {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    min-height: 72px;
    color: #07164d;
    font-size: 14px;
}

.ar-teacher-calendar-grid-head strong span {
    font-weight: 850;
}

.ar-teacher-calendar-grid-head strong b {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 18px;
}

.ar-teacher-calendar-grid-head strong.is-today b {
    background: #4f46e5;
    color: #fff;
}

.ar-teacher-calendar-grid-body {
    position: relative;
    overflow-x: auto;
}

.ar-teacher-calendar-times {
    display: grid;
    grid-template-rows: repeat(14, var(--ar-slot-height));
    min-height: var(--ar-day-height);
    border-right: 1px solid #e6ebf5;
    background: #fff;
}

.ar-teacher-calendar-times span {
    padding: 10px 12px;
    border-top: 1px solid #e6ebf5;
    color: #435071;
    font-size: 12px;
    font-weight: 850;
}

.ar-teacher-calendar-day {
    position: relative;
    display: grid;
    grid-template-rows: repeat(14, var(--ar-slot-height));
    min-height: var(--ar-day-height);
    border-right: 1px solid #e6ebf5;
    background: #fff;
}

.ar-teacher-calendar-day.is-today {
    background: #f7f5ff;
}

.ar-teacher-calendar-hour {
    border-top: 1px solid #e6ebf5;
}

.ar-teacher-now-line {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 4;
    height: 1px;
    background: #fb7185;
}

.ar-teacher-now-line::before {
    content: "";
    position: absolute;
    left: -5px;
    top: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fb7185;
}

.ar-teacher-calendar-event {
    position: absolute;
    right: 8px;
    left: 8px;
    z-index: 2;
    display: grid;
    align-content: start;
    gap: 5px;
    overflow: hidden;
    padding: 11px;
    border: 1px solid color-mix(in srgb, var(--ar-event-color) 42%, #fff);
    border-radius: 14px;
    background: var(--ar-event-soft);
    color: #07164d;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(16, 35, 75, .08);
    transition: transform .16s ease, box-shadow .16s ease;
}

.ar-teacher-calendar-event:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(16, 35, 75, .12);
}

.ar-teacher-calendar-event time {
    color: #07164d;
    font-size: 16px;
    font-weight: 950;
}

.ar-teacher-calendar-event time small {
    color: #64748b;
    font-size: 10px;
    text-transform: uppercase;
}

.ar-teacher-calendar-event strong,
.ar-teacher-calendar-event span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ar-teacher-calendar-event strong {
    font-size: 13px;
}

.ar-teacher-calendar-event span,
.ar-teacher-calendar-event em {
    color: #334155;
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
}

.ar-teacher-calendar-event em {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ar-teacher-calendar-event b {
    position: absolute;
    right: 9px;
    bottom: 9px;
    color: #4f46e5;
}

.ar-teacher-calendar-event b svg {
    width: 18px;
    height: 18px;
}

.ar-teacher-calendar-event.is-cancel {
    opacity: .72;
}

.ar-teacher-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 16px 18px;
    border-top: 1px solid #e6ebf5;
}

.ar-teacher-calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #435071;
    font-size: 12px;
    font-weight: 850;
}

.ar-teacher-calendar-legend i:not([data-lucide]) {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.ar-teacher-calendar-legend .is-green { background: #16a34a; }
.ar-teacher-calendar-legend .is-orange { background: #f97316; }
.ar-teacher-calendar-legend .is-purple { background: #7c3aed; }
.ar-teacher-calendar-legend .is-red { background: #fb7185; }
.ar-teacher-calendar-legend .is-blue { background: #3b82f6; }

.ar-teacher-calendar-list-panel {
    overflow: hidden;
    padding: 18px;
}

.ar-teacher-calendar-list-head,
.ar-teacher-calendar-list-row {
    display: grid;
    grid-template-columns: 90px minmax(170px, 1fr) minmax(140px, .9fr) 70px 120px 84px;
    gap: 12px;
    align-items: center;
}

.ar-teacher-calendar-list-head {
    padding: 0 8px 14px;
    color: #435071;
    font-size: 12px;
    font-weight: 950;
}

.ar-teacher-calendar-list-scroll {
    display: grid;
    gap: 0;
    max-height: none;
    overflow: auto;
}

.ar-teacher-calendar-list-scroll h3 {
    margin: 14px 0 0;
    padding: 14px 8px;
    border-top: 1px solid #e6ebf5;
    color: #4f46e5;
    font-size: 16px;
}

.ar-teacher-calendar-list-row {
    min-height: 66px;
    padding: 10px 8px;
    border-top: 1px solid #e6ebf5;
    color: #07164d;
}

.ar-teacher-calendar-list-row:hover {
    background: #f8f7ff;
}

.ar-teacher-calendar-list-row time {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 950;
}

.ar-teacher-calendar-list-row time i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #16a34a;
}

.ar-teacher-calendar-list-row time small {
    color: #94a3b8;
    font-size: 10px;
    text-transform: uppercase;
}

.ar-teacher-calendar-list-row.is-recovery time i { background: #3b82f6; }
.ar-teacher-calendar-list-row.is-cancel time i { background: #f97316; }
.ar-teacher-calendar-list-row.is-done time i { background: #94a3b8; }

.ar-teacher-calendar-list-row strong,
.ar-teacher-calendar-list-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ar-teacher-calendar-list-row span {
    color: #435071;
    font-weight: 820;
}

.ar-teacher-calendar-list-row mark {
    justify-self: start;
    padding: 8px 12px;
    border-radius: 10px;
    background: #e7f8ef;
    color: #08763f;
    font-size: 12px;
    font-weight: 950;
}

.ar-teacher-calendar-list-row.is-recovery mark {
    background: #eaf2ff;
    color: #1f5ed0;
}

.ar-teacher-calendar-list-row.is-cancel mark {
    background: #fff2de;
    color: #c66a00;
}

.ar-teacher-calendar-list-row.is-done mark {
    background: #f1f5f9;
    color: #64748b;
}

.ar-teacher-calendar-list-row > div {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.ar-teacher-calendar-list-row > div a {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: #4f46e5;
    text-decoration: none;
}

.ar-teacher-calendar-list-row > div a:hover {
    background: #f2efff;
}

.ar-teacher-calendar-tip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
}

.ar-teacher-calendar-tip > span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f2efff;
    color: #4f46e5;
}

.ar-teacher-calendar-tip strong {
    display: block;
    color: #07164d;
    font-size: 16px;
}

.ar-teacher-calendar-tip p {
    margin: 2px 0 0;
    color: #435071;
    font-weight: 700;
}

.ar-teacher-calendar-tip a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid #ddd6fe;
    border-radius: 13px;
    color: #4f46e5;
    font-weight: 950;
    text-decoration: none;
}

.ar-portal-calendar-hero,
.ar-portal-messages-hero,
.ar-portal-billing-hero {
    background: linear-gradient(100deg, #fff, #eef9ff 56%, #fff7ed);
}

.ar-portal-calendar-list li {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.ar-portal-event-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ar-portal-event-actions .ar-portal-btn {
    min-height: 38px;
    padding: 9px 12px;
}

.ar-portal-teacher-calendar-card {
    overflow: hidden;
}

.ar-portal-calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.ar-portal-calendar-toolbar h2 {
    margin: 0;
    font-size: 22px;
}

.ar-portal-teacher-calendar {
    overflow-x: auto;
    border: 1px solid var(--ar-line);
    border-radius: 18px;
    background: #f8fafc;
}

.ar-portal-teacher-calendar-head,
.ar-portal-teacher-calendar-body {
    display: grid;
    grid-template-columns: 76px repeat(7, minmax(150px, 1fr));
    min-width: 1120px;
}

.ar-portal-teacher-calendar-head {
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid var(--ar-line);
    background: #fff;
}

.ar-portal-teacher-calendar-head span,
.ar-portal-teacher-calendar-head strong {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-left: 1px solid var(--ar-line);
    font-size: 13px;
}

.ar-portal-teacher-calendar-head span {
    border-left: 0;
}

.ar-portal-teacher-time-col,
.ar-portal-teacher-day-col {
    min-height: var(--ar-day-height);
}

.ar-portal-teacher-time-col {
    display: grid;
    grid-template-rows: repeat(14, var(--ar-slot-height));
    background: #fff;
    border-right: 1px solid var(--ar-line);
}

.ar-portal-teacher-time-col span {
    padding: 9px 10px;
    color: var(--ar-muted);
    font-size: 12px;
    font-weight: 850;
    border-bottom: 1px solid var(--ar-line);
}

.ar-portal-teacher-day-col {
    position: relative;
    display: grid;
    grid-template-rows: repeat(14, var(--ar-slot-height));
    border-left: 1px solid var(--ar-line);
    background: #fff;
}

.ar-portal-teacher-hour-line {
    border-bottom: 1px solid #eef2f7;
}

.ar-portal-teacher-event {
    position: absolute;
    right: 8px;
    left: 8px;
    z-index: 1;
    display: grid;
    align-content: space-between;
    gap: 6px;
    overflow: hidden;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--ar-event-color) 34%, #fff);
    border-left: 5px solid var(--ar-event-color);
    border-radius: 12px;
    background: var(--ar-event-soft);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

.ar-portal-teacher-event-past {
    opacity: .76;
}

.ar-portal-teacher-event-cancel {
    --ar-event-color: #b45309;
    --ar-event-soft: #fef3c7;
}

.ar-portal-teacher-event-rattrapage {
    --ar-event-color: #6d28d9;
    --ar-event-soft: #ede9fe;
}

.ar-portal-teacher-event-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ar-portal-teacher-event-main span {
    color: var(--ar-event-color);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.ar-portal-teacher-event-main strong {
    overflow: hidden;
    color: var(--ar-ink);
    font-size: 13px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ar-portal-teacher-event-main small {
    color: var(--ar-muted);
    font-size: 11px;
    font-weight: 850;
}

.ar-portal-teacher-event-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ar-portal-teacher-event-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 7px;
    border-radius: 999px;
    background: #fff;
    color: var(--ar-primary);
    font-size: 11px;
    font-weight: 950;
    text-decoration: none;
}

.ar-portal-teacher-week-list {
    display: none;
}

.ar-portal-message-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.ar-portal-thread-card {
    display: grid;
    align-content: start;
    gap: 16px;
}

.ar-portal-thread-card h2 {
    margin: 12px 0 8px;
}

.ar-portal-message-placeholder {
    display: grid;
    gap: 4px;
    padding: 14px;
    border-radius: 18px;
    background: #f8fafc;
    color: var(--ar-muted);
}

.ar-portal-message-placeholder strong {
    color: var(--ar-ink);
}

.ar-portal-form {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

.ar-portal-form label {
    display: grid;
    gap: 6px;
    color: var(--ar-muted);
    font-size: 13px;
    font-weight: 850;
}

.ar-portal-form input,
.ar-portal-form textarea {
    width: 100%;
    min-height: 44px;
    padding: 12px 13px;
    border: 1px solid var(--ar-line);
    border-radius: 14px;
    background: #fff;
    color: var(--ar-ink);
    font: inherit;
}

.ar-portal-form textarea {
    resize: vertical;
}

.ar-portal-compact-form {
    padding: 14px;
    border-radius: 18px;
    background: #f8fafc;
}

.ar-portal-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ar-portal-form button:disabled {
    cursor: wait;
    opacity: .65;
}

.ar-portal-form-status {
    color: var(--ar-muted);
    font-size: 13px;
    font-weight: 850;
}

.ar-portal-form-status.is-error {
    color: #b91c1c;
}

.ar-portal-thread-list {
    display: grid;
    gap: 8px;
}

.ar-portal-thread-row {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--ar-line);
    border-radius: 16px;
    background: #fff;
    color: var(--ar-ink);
    text-decoration: none;
}

.ar-portal-thread-row span {
    color: var(--ar-muted);
    font-size: 13px;
    font-weight: 800;
}

.ar-portal-thread-row.active,
.ar-portal-thread-row:hover {
    border-color: color-mix(in srgb, var(--ar-primary) 34%, #fff);
    background: #eef9ff;
}

.ar-portal-split-grid {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
    gap: 18px;
}

.ar-portal-conversation-panel {
    display: grid;
    gap: 12px;
    padding-top: 4px;
}

.ar-portal-conversation-panel h3 {
    margin: 0;
}

.ar-portal-conversation {
    display: grid;
    gap: 10px;
    max-height: 520px;
    overflow: auto;
    padding-right: 4px;
}

.ar-portal-message-bubble {
    display: grid;
    gap: 4px;
    padding: 13px 14px;
    border: 1px solid var(--ar-line);
    border-radius: 18px;
    background: #fff;
}

.ar-portal-message-bubble p {
    margin: 0;
    color: var(--ar-ink);
}

.ar-portal-message-bubble p + p {
    margin-top: 8px;
}

.ar-portal-message-bubble span {
    color: var(--ar-muted);
    font-size: 12px;
    font-weight: 800;
}

.ar-portal-comm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.ar-portal-billing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    gap: 18px;
}

.ar-portal-billing-list {
    display: grid;
    gap: 0;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.ar-portal-billing-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 64px;
    padding: 13px 0;
    border-top: 1px solid var(--ar-line);
}

.ar-portal-billing-list li > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.ar-portal-billing-list span {
    color: var(--ar-muted);
    font-size: 13px;
    font-weight: 800;
}

.ar-portal-billing-list small {
    color: var(--ar-muted);
    font-size: 12px;
    font-weight: 750;
}

.ar-portal-billing-list strong,
.ar-portal-billing-list small {
    overflow-wrap: anywhere;
}

.ar-portal-billing-row-actions {
    display: grid;
    justify-items: end;
    gap: 5px;
    min-width: 110px;
}

.ar-portal-billing-row-actions a {
    color: var(--ar-primary);
    font-size: 13px;
    font-weight: 950;
    text-decoration: none;
}

.ar-portal-payment-links {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.ar-portal-payment-links .ar-portal-btn {
    display: grid;
    gap: 2px;
    justify-items: center;
    min-height: 58px;
}

.ar-portal-payment-links span {
    font-size: 12px;
    font-weight: 800;
    opacity: .88;
}

.ar-portal-billing-group-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.ar-portal-billing-group-card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 150px;
    padding: 16px;
    border: 1px solid var(--ar-line);
    border-radius: 18px;
    background: #f8fafc;
}

.ar-portal-billing-group-card > div:first-child {
    display: grid;
    gap: 4px;
}

.ar-portal-billing-group-card span {
    color: var(--ar-muted);
    font-size: 13px;
    font-weight: 800;
}

.ar-portal-billing-group-card mark {
    justify-self: start;
    padding: 6px 10px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 950;
}

.ar-portal-learning-card {
    display: grid;
    gap: 12px;
}

.ar-portal-learning-card h2 {
    margin: 0;
}

.ar-portal-resource-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 1120px) {
    .ar-teacher-calendar-headline,
    .ar-teacher-calendar-layout,
    .ar-teacher-calendar-tip {
        grid-template-columns: 1fr;
    }

    .ar-teacher-calendar-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ar-teacher-calendar-list-head,
    .ar-teacher-calendar-list-row {
        grid-template-columns: 90px minmax(180px, 1fr) minmax(120px, .8fr) 70px 110px 70px;
    }

    .ar-teacher-command-grid,
    .ar-teacher-lower-grid {
        grid-template-columns: 1fr;
    }

    .ar-teacher-hero {
        grid-template-columns: minmax(0, 1fr) 210px;
    }

    .ar-teacher-metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ar-teacher-group-mini-grid {
        grid-template-columns: 1fr;
    }

    .ar-portal-group-grid,
    .ar-portal-home-panels,
    .ar-portal-group-actions-grid,
    .ar-portal-parent-home-grid,
    .ar-portal-message-grid,
    .ar-portal-billing-grid,
    .ar-portal-billing-group-grid,
    .ar-portal-split-grid,
    .ar-portal-comm-grid,
    .ar-portal-resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ar-portal-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ar-portal-stat-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .ar-portal-shell {
        grid-template-columns: 1fr;
        padding: 0 0 80px;
    }

    /* (l'ancien menu en barre horizontale en bas a été remplacé par le
       drawer latéral — voir bloc v13) */

    .ar-portal-main {
        min-width: 0;
        padding: 14px;
    }

    .ar-portal-app .ar-portal-main {
        padding: 16px;
    }

    .ar-portal-topbar {
        min-height: 62px;
        margin: 0 -14px 18px;
        padding: 0 14px;
        border-radius: 0;
    }

    .ar-portal-topbar h1 {
        font-size: 20px;
    }

    .ar-portal-app .ar-portal-topbar {
        min-height: 42px;
        margin: 0 0 14px;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .ar-portal-user strong {
        display: none;
    }

    .ar-portal-hero {
        align-items: flex-start;
        padding: 18px;
    }

    .ar-portal-hero h2 {
        font-size: 26px;
    }

    .ar-portal-hero-art {
        font-size: 42px;
    }

    .ar-teacher-calendar-headline {
        gap: 14px;
    }

    .ar-teacher-calendar-headline h2 {
        font-size: 30px;
    }

    .ar-teacher-calendar-view-tabs,
    .ar-teacher-calendar-nav {
        justify-self: stretch;
        overflow-x: auto;
    }

    .ar-teacher-calendar-view-tabs a,
    .ar-teacher-calendar-nav a {
        flex: 1 0 auto;
    }

    .ar-teacher-calendar-filters {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .ar-teacher-calendar-layout {
        grid-template-columns: 1fr;
    }

    .ar-teacher-calendar-board {
        overflow-x: auto;
    }

    .ar-teacher-calendar-list-panel {
        padding: 12px;
    }

    .ar-teacher-calendar-list-head {
        display: none;
    }

    .ar-teacher-calendar-list-row {
        grid-template-columns: 1fr auto;
        gap: 6px 12px;
        align-items: start;
        padding: 12px 4px;
    }

    .ar-teacher-calendar-list-row time,
    .ar-teacher-calendar-list-row strong,
    .ar-teacher-calendar-list-row span,
    .ar-teacher-calendar-list-row mark {
        grid-column: 1;
    }

    .ar-teacher-calendar-list-row > div {
        grid-column: 2;
        grid-row: 1 / span 4;
        align-self: center;
    }

    .ar-teacher-calendar-tip {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ar-teacher-calendar-tip a {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .ar-teacher-dashboard {
        gap: 16px;
    }

    .ar-teacher-hero,
    .ar-teacher-command-grid,
    .ar-teacher-lower-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ar-teacher-panel,
    .ar-teacher-next-card {
        border-radius: 20px;
        padding: 18px;
    }

    .ar-teacher-hero {
        min-height: 0;
        padding-right: 0;
    }

    .ar-teacher-hero h2 {
        font-size: 28px;
    }

    .ar-teacher-ai-summary {
        font-size: 13px;
    }

    .ar-teacher-hero-tools {
        position: static;
        justify-self: start;
    }

    .ar-teacher-illustration {
        justify-self: start;
        width: 210px;
        height: 124px;
    }

    .ar-teacher-metric-grid,
    .ar-teacher-week-strip,
    .ar-teacher-group-mini-grid {
        grid-template-columns: 1fr;
    }

    .ar-teacher-metric {
        min-height: 90px;
        padding: 16px;
    }

    .ar-teacher-metric strong {
        font-size: 30px;
    }

    .ar-teacher-next-card {
        min-height: 0;
    }

    .ar-teacher-next-card strong {
        font-size: 38px;
    }

    .ar-teacher-quick-actions .ar-portal-btn {
        flex: 1 1 150px;
    }

    .ar-teacher-panel-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .ar-teacher-session-row {
        grid-template-columns: 14px minmax(0, 1fr);
        gap: 7px;
        align-items: start;
    }

    .ar-teacher-session-row div,
    .ar-teacher-session-row a {
        grid-column: 2;
        justify-self: start;
    }

    .ar-teacher-action-row {
        grid-template-columns: 28px minmax(0, 1fr) auto;
    }

    .ar-teacher-session-row strong,
    .ar-teacher-action-row strong,
    .ar-teacher-message-list strong,
    .ar-teacher-session-row span,
    .ar-teacher-action-row small,
    .ar-teacher-message-list span {
        white-space: normal;
    }

    .ar-portal-group-grid,
    .ar-portal-home-panels,
    .ar-portal-parent-home-grid,
    .ar-portal-kpi-grid,
    .ar-portal-detail-grid,
    .ar-portal-group-actions-grid,
    .ar-portal-stat-row,
    .ar-portal-message-grid,
    .ar-portal-billing-grid,
    .ar-portal-billing-group-grid,
    .ar-portal-split-grid,
    .ar-portal-comm-grid,
    .ar-portal-resource-grid,
    .ar-portal-calendar-list li {
        grid-template-columns: 1fr;
    }

    .ar-portal-session-list li {
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: start;
    }

    .ar-portal-session-actions,
    .ar-portal-event-actions,
    .ar-portal-card-actions,
    .ar-portal-form-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .ar-portal-session-actions .ar-portal-inline-action,
    .ar-portal-event-actions .ar-portal-inline-action {
        flex: 1 1 120px;
    }

    .ar-portal-inline-action button,
    .ar-portal-event-actions .ar-portal-btn,
    .ar-portal-card-actions .ar-portal-btn {
        width: 100%;
        min-height: 38px;
    }

    .ar-portal-event-actions {
        justify-content: flex-start;
    }

    .ar-portal-calendar-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .ar-portal-teacher-calendar {
        display: none;
    }

    .ar-portal-teacher-week-list {
        display: grid;
        gap: 8px;
    }

    .ar-portal-teacher-week-list article {
        display: grid;
        gap: 10px;
        padding: 12px 0;
        border-top: 1px solid var(--ar-line);
    }

    .ar-portal-teacher-week-list header,
    .ar-portal-teacher-week-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
    }

    .ar-portal-teacher-week-list span {
        color: var(--ar-muted);
        font-size: 13px;
        font-weight: 850;
    }

    .ar-portal-teacher-week-item {
        align-items: flex-start;
        padding: 10px;
        border-radius: 14px;
        background: #f8fafc;
    }

    .ar-portal-teacher-week-item .ar-portal-event-actions {
        grid-column: 1 / -1;
    }

    .ar-portal-teacher-week-item > div:first-child {
        display: grid;
        gap: 3px;
        min-width: 0;
    }

    .ar-portal-learner-bottom,
    .ar-portal-course-row,
    .ar-portal-finished-card {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .ar-portal-billing-list li {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
    }

    .ar-portal-billing-row-actions {
        justify-items: start;
        min-width: 0;
    }

    .ar-portal-payment-links .ar-portal-btn {
        justify-items: start;
        text-align: left;
    }

    .ar-portal-billing-group-card {
        min-height: 0;
    }

    .ar-portal-report-item summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .ar-portal-report-form {
        padding: 0 10px 12px;
    }

    .ar-portal-report-form textarea {
        min-height: 190px;
    }
}

/* ══════════════════════════════════════════════════════════════
   Calendrier enseignant — rail droit, mini-calendrier, vue liste
   ══════════════════════════════════════════════════════════════ */

.ar-teacher-calendar-layout.ar-mode-calendar {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
}

.ar-calendar-filter-control select {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 800;
    outline: none;
    cursor: pointer;
}

.ar-calendar-filter-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: center;
    justify-self: start;
    padding: 8px 14px;
    border-radius: 12px;
    color: var(--ar-muted);
    background: #f1f5f9;
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
}

.ar-calendar-filter-reset:hover {
    color: var(--ar-ink);
    background: #e2e8f0;
}

/* ── Rail droit ── */
.ar-teacher-calendar-rail {
    display: grid;
    gap: 14px;
    position: sticky;
    top: 18px;
}

.ar-teacher-rail-card {
    padding: 16px;
    border: 1px solid #e6ebf5;
    border-radius: 18px;
    background: var(--ar-card);
    box-shadow: 0 10px 26px rgba(16, 35, 75, .05);
}

.ar-teacher-rail-card h3 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 950;
    color: var(--ar-ink);
}

/* Mini calendrier */
.ar-teacher-mini-cal header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ar-teacher-mini-cal header strong {
    font-size: 14px;
    font-weight: 950;
}

.ar-teacher-mini-cal header a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    color: var(--ar-muted);
    text-decoration: none;
}

.ar-teacher-mini-cal header a:hover {
    background: #f1f5f9;
    color: var(--ar-ink);
}

.ar-teacher-mini-cal header svg {
    width: 15px;
    height: 15px;
}

.ar-teacher-mini-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.ar-mini-dow {
    text-align: center;
    padding: 4px 0;
    color: var(--ar-muted);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.ar-mini-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 10px;
    color: var(--ar-ink);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.ar-mini-day:hover {
    background: #eef4ff;
}

.ar-mini-day.is-out {
    color: #c3ccdd;
}

.ar-mini-day.is-week {
    background: #eef4ff;
}

.ar-mini-day.is-today {
    background: var(--ar-primary);
    color: #fff;
}

.ar-mini-day i {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ar-blue);
}

.ar-mini-day.is-today i {
    background: #fff;
}

/* Légende des statuts */
.ar-teacher-status-legend {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #435071;
    font-size: 13px;
    font-weight: 800;
}

.ar-teacher-status-legend li {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ar-teacher-status-legend i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.ar-teacher-status-legend i.is-confirmed { background: #22c55e; }
.ar-teacher-status-legend i.is-done      { background: #94a3b8; }
.ar-teacher-status-legend i.is-recovery  { background: #3b82f6; }
.ar-teacher-status-legend i.is-cancel    { background: #f97316; }
.ar-teacher-status-legend i.is-free      { background: #a855f7; }
.ar-teacher-status-legend i.is-teams     { width: auto; height: auto; color: var(--ar-primary); background: transparent; border-radius: 0; }

/* Résumé de la semaine */
.ar-teacher-week-summary {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ar-teacher-week-summary li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #435071;
    font-size: 13px;
    font-weight: 800;
}

.ar-teacher-week-summary strong {
    font-size: 15px;
    font-weight: 950;
    color: var(--ar-ink);
}

.ar-teacher-week-summary li.is-alert,
.ar-teacher-week-summary li.is-alert strong {
    color: #dc2626;
}

.ar-teacher-rail-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    color: var(--ar-primary);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.ar-teacher-rail-link:hover {
    text-decoration: underline;
}

.ar-teacher-rail-link svg {
    width: 14px;
    height: 14px;
}

/* ── Vue liste : table ── */
.ar-teacher-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ar-teacher-list-toolbar h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 950;
}

.ar-teacher-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid #e6ebf5;
    border-radius: 12px;
    background: #fff;
    color: #435071;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}

.ar-teacher-export-btn:hover {
    background: #f8fafc;
    color: var(--ar-ink);
}

.ar-teacher-export-btn svg {
    width: 15px;
    height: 15px;
}

.ar-teacher-list-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
}
/* Colonnes qui ne doivent jamais être tronquées (nom enfant / enseignant). */
.ar-teacher-list-row td .ar-list-child,
.ar-teacher-list-row td .ar-list-teacher { white-space: nowrap; }

.ar-teacher-list-table thead th {
    padding: 8px;
    text-align: left;
    color: #435071;
    font-size: 12px;
    font-weight: 950;
    border-bottom: 1px solid #e6ebf5;
}

.ar-teacher-list-day-row th {
    padding: 14px 8px 8px;
    text-align: left;
    color: var(--ar-primary);
    font-size: 13px;
    font-weight: 950;
    background: #f8fbfd;
}

.ar-teacher-list-row td {
    padding: 12px 8px;
    border-top: 1px solid #eef2f9;
    color: #07164d;
    font-size: 13px;
    vertical-align: middle;
}

.ar-teacher-list-row td strong {
    display: block;
    font-weight: 900;
}

.ar-teacher-list-row td small {
    display: block;
    color: var(--ar-muted);
    font-weight: 700;
}

.ar-list-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 10px;
    background: #f1f5f9;
    font-weight: 850;
    white-space: nowrap;
}

.ar-list-date-chip svg {
    width: 13px;
    height: 13px;
    color: var(--ar-muted);
}

.ar-list-status {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 999px;
    background: transparent;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.ar-list-status.is-confirmed { color: #15803d; background: #dcfce7; }
.ar-list-status.is-done      { color: #475569; background: #e2e8f0; }
.ar-list-status.is-recovery  { color: #1d4ed8; background: #dbeafe; }
.ar-list-status.is-cancel    { color: #c2410c; background: #ffedd5; }
.ar-list-status.is-free      { color: #7e22ce; background: #f3e8ff; }

.ar-list-report {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    text-decoration: none;
    background: transparent;
}

.ar-list-report.is-submitted { color: #0369a1; background: #e0f2fe; }
.ar-list-report.is-pending   { color: #b91c1c; background: #fee2e2; }

.ar-list-report-none {
    color: #c3ccdd;
}

.ar-teacher-list-actions {
    white-space: nowrap;
    text-align: right;
}

.ar-teacher-list-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: #435071;
}

.ar-teacher-list-actions a:hover {
    background: #f1f5f9;
    color: var(--ar-primary);
}

.ar-teacher-list-actions svg {
    width: 16px;
    height: 16px;
}

/* Pagination */
.ar-teacher-list-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 14px;
    margin-top: 6px;
    border-top: 1px solid #e6ebf5;
    color: var(--ar-muted);
    font-size: 13px;
    font-weight: 800;
}

.ar-teacher-per-page select {
    padding: 7px 10px;
    border: 1px solid #e6ebf5;
    border-radius: 10px;
    background: #fff;
    color: #435071;
    font: inherit;
    font-weight: 850;
    cursor: pointer;
}

.ar-teacher-page-nav {
    display: inline-flex;
    gap: 6px;
}

.ar-teacher-page-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border: 1px solid #e6ebf5;
    border-radius: 10px;
    color: #435071;
    font-weight: 900;
    text-decoration: none;
}

.ar-teacher-page-nav a:hover {
    background: #f8fafc;
}

.ar-teacher-page-nav a.active {
    border-color: var(--ar-primary);
    background: var(--ar-primary);
    color: #fff;
}

@media (max-width: 1240px) {
    .ar-teacher-calendar-layout.ar-mode-calendar {
        grid-template-columns: 1fr;
    }

    .ar-teacher-calendar-rail {
        position: static;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

@media (max-width: 760px) {
    /* Vue liste : chaque séance devient une carte compacte */
    .ar-teacher-list-table thead { display: none; }

    .ar-teacher-list-table,
    .ar-teacher-list-table tbody {
        display: block;
        width: 100%;
    }

    .ar-teacher-list-day-row,
    .ar-teacher-list-day-row th {
        display: block;
        padding: 14px 2px 6px;
    }

    .ar-teacher-list-table tr.ar-teacher-list-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "heure statut"
            "groupe groupe"
            "rapport actions";
        gap: 8px 10px;
        align-items: center;
        padding: 12px 12px;
        margin-bottom: 10px;
        border: 1px solid #eef2f9;
        border-radius: 14px;
    }

    .ar-teacher-list-table tr.ar-teacher-list-row td {
        display: block;
        padding: 0;
        border: 0 !important;
    }

    .ar-teacher-list-row td:nth-child(1) { grid-area: heure; }
    .ar-teacher-list-row td:nth-child(2) { grid-area: groupe; }
    .ar-teacher-list-row td:nth-child(3),
    .ar-teacher-list-row td:nth-child(4),
    .ar-teacher-list-row td:nth-child(5) { display: none; }
    .ar-teacher-list-row td:nth-child(6) { grid-area: statut; justify-self: end; }
    .ar-teacher-list-row td:nth-child(7) { grid-area: rapport; }
    .ar-teacher-list-row td:nth-child(8) { grid-area: actions; justify-self: end; }

    .ar-teacher-list-actions { text-align: right; }
}

/* ══════════════════════════════════════════════════════════════
   Calendrier v2 — retours design : toolbar 1 ligne, 7 jours
   visibles, pastille statut, vue liste épurée
   ══════════════════════════════════════════════════════════════ */

/* Toolbar : Aujourd'hui + navigation + filtres sur une seule ligne */
.ar-teacher-calendar-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    grid-template-columns: none;
}

.ar-teacher-calendar-filters .ar-calendar-filter-control {
    flex: 0 1 200px;
    min-width: 160px;
}

.ar-calendar-today-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 10px 16px;
    border: 1px solid #e6ebf5;
    border-radius: 12px;
    background: #fff;
    color: #435071;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.ar-calendar-today-btn:hover {
    background: #f8fafc;
    color: var(--ar-ink);
}

.ar-calendar-today-btn svg {
    width: 15px;
    height: 15px;
}

.ar-calendar-week-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 4px;
    border: 1px solid #e6ebf5;
    border-radius: 12px;
    background: #fff;
}

.ar-calendar-week-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    color: #435071;
}

.ar-calendar-week-nav a:hover {
    background: #f1f5f9;
    color: var(--ar-ink);
}

.ar-calendar-week-nav a svg {
    width: 15px;
    height: 15px;
}

.ar-calendar-week-nav strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 950;
    white-space: nowrap;
}

.ar-calendar-week-nav strong svg {
    width: 14px;
    height: 14px;
    color: var(--ar-muted);
}

/* 7 jours toujours visibles à côté du rail */
.ar-teacher-calendar-grid-head,
.ar-teacher-calendar-grid-body {
    grid-template-columns: 56px repeat(7, minmax(0, 1fr));
    min-width: 0;
}

.ar-teacher-calendar-board {
    overflow: hidden;
}

/* Carte séance : fond = niveau, pastille = statut */
.ar-teacher-calendar-event {
    border: 0;
    border-left: 4px solid var(--ar-event-color);
    border-radius: 12px;
    background: var(--ar-event-soft);
    box-shadow: none;
    padding: 9px 10px;
    gap: 3px;
}

.ar-teacher-calendar-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(16, 35, 75, .14);
}

.ar-teacher-calendar-event time {
    font-size: 12px;
    font-weight: 950;
    color: var(--ar-ink);
    padding-right: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ar-teacher-calendar-event strong {
    font-size: 12px;
    font-weight: 900;
    color: var(--ar-event-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ar-teacher-calendar-event span {
    font-size: 11px;
    font-weight: 800;
    color: #435071;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ar-teacher-calendar-event em {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    color: #435071;
}

.ar-teacher-calendar-event em svg {
    width: 12px;
    height: 12px;
}

.ar-event-dot {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
}

.ar-event-dot.is-confirmed { background: #22c55e; }
.ar-event-dot.is-done      { background: #94a3b8; }
.ar-event-dot.is-recovery  { background: #3b82f6; }
.ar-event-dot.is-cancel    { background: #f97316; }
.ar-event-dot.is-free      { background: #a855f7; }

/* ── Vue liste épurée (reset des bordures du thème) ── */
.ar-teacher-list-table,
.ar-teacher-list-table th,
.ar-teacher-list-table td,
.ar-teacher-list-table tr,
.ar-teacher-list-table thead,
.ar-teacher-list-table tbody {
    border: 0 !important;
    background: transparent;
}

.ar-teacher-list-table {
    border-collapse: separate;
    border-spacing: 0;
}

.ar-teacher-list-table thead th {
    padding: 10px 12px;
    border-bottom: 1px solid #e6ebf5 !important;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .02em;
}

.ar-teacher-list-day-row th {
    padding: 18px 12px 8px;
    background: transparent;
    color: var(--ar-ink);
    font-size: 13.5px;
    font-weight: 950;
}

.ar-teacher-list-row td {
    padding: 14px 12px;
    border-bottom: 1px solid #eef2f9 !important;
    font-size: 13px;
}

.ar-teacher-list-row:hover td {
    background: #f8fbfd;
}

.ar-list-date-chip {
    border: 0;
    background: #f1f5f9;
    color: var(--ar-ink);
    font-size: 12.5px;
}

.ar-list-date-chip.is-confirmed svg { color: #16a34a; }
.ar-list-date-chip.is-done svg      { color: #64748b; }
.ar-list-date-chip.is-recovery svg  { color: #3b82f6; }
.ar-list-date-chip.is-cancel svg    { color: #f97316; }
.ar-list-date-chip.is-free svg      { color: #a855f7; }

.ar-list-count {
    font-weight: 900;
}

.ar-list-teacher {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    color: #435071;
    white-space: nowrap;
}

.ar-list-teacher i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    flex: 0 0 auto;
}

@media (max-width: 1240px) {
    .ar-teacher-calendar-grid-head,
    .ar-teacher-calendar-grid-body {
        grid-template-columns: 56px repeat(7, minmax(96px, 1fr));
        min-width: 740px;
    }

    .ar-teacher-calendar-board {
        overflow-x: auto;
    }
}

/* ══════════════════════════════════════════════════════════════
   Calendrier v3 — heure TN principale + CA secondaire, ligne de
   temps sur toute la largeur, carte séance calée sur la maquette
   ══════════════════════════════════════════════════════════════ */

.ar-teacher-calendar-grid-body {
    position: relative;
}

/* Ligne de temps : traverse les 7 jours */
.ar-teacher-now-line-global {
    position: absolute;
    left: 56px;
    right: 0;
    height: 0;
    border-top: 2px solid #ef4444;
    z-index: 2;
    pointer-events: none;
}

.ar-teacher-now-line-global::before {
    content: "";
    position: absolute;
    left: -4px;
    top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
}

.ar-now-label {
    position: absolute;
    left: -50px;
    top: -9px;
    padding: 1px 6px;
    border-radius: 6px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 950;
    line-height: 1.5;
}

/* Carte séance — structure maquette */
.ar-teacher-calendar-event {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    z-index: 3;
}

.ar-teacher-calendar-event time {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding-right: 14px;
    font-size: 12.5px;
    font-weight: 950;
    color: var(--ar-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ar-teacher-calendar-event time small {
    font-size: 9px;
    font-weight: 900;
    color: var(--ar-muted);
    letter-spacing: .03em;
}

.ar-event-ca {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ar-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ar-teacher-calendar-event strong {
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 900;
    color: var(--ar-event-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ar-teacher-calendar-event .ar-event-group {
    font-size: 11px;
    font-weight: 800;
    color: #435071;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ar-teacher-calendar-event footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;
    padding-top: 4px;
}

.ar-teacher-calendar-event footer em {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
    color: #435071;
}

.ar-teacher-calendar-event footer em svg {
    width: 12px;
    height: 12px;
}

.ar-teacher-calendar-event footer b {
    position: static;
    display: inline-flex;
    color: var(--ar-event-color);
}

.ar-teacher-calendar-event footer b svg {
    width: 15px;
    height: 15px;
}

/* ══════════════════════════════════════════════════════════════
   Calendrier v4 — lanes anti-chevauchement + carte lisible
   ══════════════════════════════════════════════════════════════ */

/* left/width sont fournis en inline par le lane ; on neutralise
   les anciennes valeurs right/left fixes. */
.ar-teacher-calendar-event {
    right: auto;
    overflow: hidden;
}

.ar-teacher-calendar-hour {
    height: var(--ar-slot-height, 92px);
}

.ar-teacher-calendar-times span {
    height: var(--ar-slot-height, 92px);
}

/* Carte étroite (séances simultanées) : on masque le CA et on
   compacte pour rester lisible. */
.ar-teacher-calendar-event.is-narrow .ar-event-ca,
.ar-teacher-calendar-event.is-narrow .ar-event-elabel {
    display: none;
}

.ar-teacher-calendar-event.is-narrow time {
    font-size: 11px;
    padding-right: 12px;
}

.ar-teacher-calendar-event.is-narrow strong {
    font-size: 11px;
}

.ar-teacher-calendar-event.is-narrow .ar-event-group {
    font-size: 10px;
}

/* Nombre de créneaux dynamique : les lignes suivent le nombre réel
   d'heures affichées (au lieu d'un repeat(14) figé). */
.ar-teacher-calendar-times,
.ar-teacher-calendar-day {
    grid-template-rows: none;
    grid-auto-rows: var(--ar-slot-height, 92px);
}

/* ══════════════════════════════════════════════════════════════
   Vue liste v2 — alignée sur la maquette (badges, actions, colonnes)
   ══════════════════════════════════════════════════════════════ */

.ar-col-center { text-align: center; }
.ar-col-right  { text-align: right; }

/* Rattrapage = violet, Offerte = teal (cohérent maquette liste) */
.ar-event-dot.is-recovery,
.ar-teacher-status-legend i.is-recovery { background: #7c3aed; }
.ar-event-dot.is-free,
.ar-teacher-status-legend i.is-free { background: #0d9488; }

.ar-list-status.is-recovery { color: #6d28d9; background: #ede9fe; }
.ar-list-status.is-free     { color: #0f766e; background: #ccfbf1; }
.ar-list-date-chip.is-recovery svg { color: #7c3aed; }
.ar-list-date-chip.is-free svg      { color: #0d9488; }

/* Boutons d'action : boîtes bordées comme la maquette */
.ar-teacher-list-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.ar-list-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #e6ebf5;
    border-radius: 10px;
    color: #64748b;
    background: #fff;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.ar-list-action-btn:hover {
    border-color: var(--ar-primary);
    color: var(--ar-primary);
    background: #f4fbfd;
}

.ar-list-action-btn svg {
    width: 16px;
    height: 16px;
}

/* Statut pills : plein pastel, coins pilule */
.ar-list-status {
    padding: 6px 14px;
    font-size: 12.5px;
}

/* Rapport badges */
.ar-list-report {
    padding: 6px 14px;
    font-size: 12.5px;
}

/* Heure : plage + durée */
.ar-teacher-list-row td strong small {
    font-weight: 900;
    color: var(--ar-muted);
    font-size: 9px;
    letter-spacing: .03em;
}

/* Avatar enseignant plus proche de la maquette */
.ar-list-teacher i {
    width: 30px;
    height: 30px;
    font-size: 11px;
    box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(16,35,75,.12);
}

/* ══════════════════════════════════════════════════════════════
   Calendrier v5 — axe TN+CA, carte (niveau+effectif / groupe),
   pastilles mini-cal par statut, vue liste sans gris
   ══════════════════════════════════════════════════════════════ */

/* Axe des heures : TN au-dessus, CA plus petit */
.ar-teacher-calendar-times span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1px;
    padding: 8px 10px;
}

.ar-teacher-calendar-times span b {
    font-size: 12px;
    font-weight: 900;
    color: #334155;
}

.ar-teacher-calendar-times span i {
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    color: #94a3b8;
    white-space: nowrap;
}

/* Carte : ligne niveau + effectif, groupe en pied */
.ar-event-mid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 2px;
}

.ar-event-mid strong {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.ar-event-count {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    font-style: normal;
    font-weight: 900;
    font-size: 11px;
    color: #435071;
}

.ar-event-count svg {
    width: 12px;
    height: 12px;
}

.ar-teacher-calendar-event footer .ar-event-group {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    font-weight: 800;
    color: #435071;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pastilles du mini-calendrier colorées par statut */
.ar-mini-dots {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
}

.ar-mini-dots i {
    position: static;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #94a3b8;
}

.ar-mini-dots i.is-confirmed { background: #22c55e; }
.ar-mini-dots i.is-done      { background: #94a3b8; }
.ar-mini-dots i.is-recovery  { background: #7c3aed; }
.ar-mini-dots i.is-cancel    { background: #f97316; }
.ar-mini-dots i.is-free      { background: #0d9488; }

.ar-mini-day.is-today .ar-mini-dots i { box-shadow: 0 0 0 1px #fff; }

/* ── Vue liste : colonne Heure avec icône calendrier colorée ── */
.ar-list-heure {
    display: flex;
    align-items: center;
    gap: 11px;
}

.ar-list-cal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    flex: 0 0 auto;
}

.ar-list-cal-icon svg {
    width: 17px;
    height: 17px;
}

.ar-list-heure-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ar-list-heure-text strong {
    font-weight: 900;
    color: var(--ar-ink);
    white-space: nowrap;
}

.ar-list-heure-text strong small {
    font-size: 9px;
    font-weight: 900;
    color: var(--ar-muted);
    letter-spacing: .03em;
}

.ar-list-ca {
    font-size: 11px;
    font-weight: 800;
    color: var(--ar-muted);
    white-space: nowrap;
}

/* Plus de gris : Complétée passe en teal de marque, lignes blanches */
.ar-list-status.is-done {
    color: #005064;
    background: #e2f1f5;
}

.ar-teacher-list-row td {
    background: #fff;
}

.ar-teacher-list-row:hover td {
    background: #fbfdff;
}

/* ══════════════════════════════════════════════════════════════
   Calendrier v6 — axe Canada 8-21 (TN big/CA small), carte +
   survol détaillé, niveau en tag, vue liste 3 lignes sans gris
   ══════════════════════════════════════════════════════════════ */

/* Axe : TN gras + CA plus petit */
.ar-teacher-calendar-times span b sup {
    font-size: 7px;
    font-weight: 900;
    color: #94a3b8;
    vertical-align: super;
}

/* Carte : niveau sur sa ligne, pied = groupe + effectif */
.ar-event-niveau {
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 900;
    color: var(--ar-event-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ar-teacher-calendar-event footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;
    padding-top: 3px;
}

.ar-teacher-calendar-event footer .ar-event-group {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    font-weight: 800;
    color: #435071;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ar-event-count {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    font-style: normal;
    font-weight: 900;
    font-size: 11px;
    color: #435071;
}

.ar-event-count svg { width: 12px; height: 12px; }

/* ── Survol : détail agrandi de la même carte ── */
.ar-teacher-calendar-board { overflow: visible; }
.ar-teacher-calendar-grid-body { overflow: visible; }

.ar-event-pop {
    display: none;
    position: absolute;
    top: -6px;
    left: -6px;
    z-index: 40;
    width: max(230px, calc(100% + 12px));
    padding: 13px 15px;
    border-radius: 14px;
    border-left: 4px solid var(--ar-event-color);
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .22);
    cursor: default;
}

.ar-teacher-calendar-event:hover {
    overflow: visible;
    z-index: 41;
}

.ar-teacher-calendar-event:hover .ar-event-pop {
    display: block;
}

.ar-event-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
}

.ar-event-niveau-tag {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--ar-event-soft);
    color: var(--ar-event-color);
    font-size: 11.5px;
    font-weight: 900;
}

.ar-event-pop-title {
    display: block;
    font-size: 15px;
    font-weight: 950;
    color: var(--ar-ink);
    margin-bottom: 10px;
}

.ar-event-pop-meta {
    display: grid;
    gap: 7px;
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
}

.ar-event-pop-meta li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #435071;
    font-size: 12.5px;
    font-weight: 800;
}

.ar-event-pop-meta li svg { width: 14px; height: 14px; color: var(--ar-muted); flex: 0 0 auto; }
.ar-event-pop-meta li b {
    font-size: 10px; font-weight: 800; color: #475569;
    background: #F1F5F9; border-radius: 5px; padding: 1px 5px; margin-left: 4px;
    letter-spacing: .03em;
}

.ar-event-pop-teams {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--ar-event-soft);
    color: var(--ar-event-color);
    font-size: 12px;
    font-weight: 900;
}

.ar-event-pop-teams svg { width: 14px; height: 14px; }

/* ── Vue liste : 3 lignes, date violette, niveau en tag, blanc pur ── */
.ar-list-dur {
    font-size: 10.5px;
    font-weight: 800;
    color: #94a3b8;
}

.ar-niveau-tag {
    display: inline-block;
    margin-top: 3px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

/* Tag de session (saison) — couleur portée en inline, dépend de la saison. */
.ar-season-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
.ar-season-tag svg { width: 13px; height: 13px; }

.ar-teacher-list-day-row th {
    color: #7c3aed;
    background: transparent;
}

.ar-teacher-list-row td,
.ar-teacher-list-row:hover td {
    background: #fff;
}

/* ══════════════════════════════════════════════════════════════
   Calendrier v7 — reportée opaque, carte compacte (titre coloré +
   point près de l'effectif), lignes liste 100% blanches
   ══════════════════════════════════════════════════════════════ */

/* Séance reportée : plus de transparence */
.ar-teacher-calendar-event.is-cancel { opacity: 1; }

/* Carte compacte */
.ar-teacher-calendar-event {
    padding: 6px 9px;
    gap: 1px;
}

.ar-teacher-calendar-event time {
    font-size: 11px;
    font-weight: 900;
    color: var(--ar-ink);
    padding-right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ar-teacher-calendar-event time small {
    font-size: 8px;
    font-weight: 900;
    color: var(--ar-muted);
    letter-spacing: .03em;
}

.ar-event-title {
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ar-teacher-calendar-event footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;
    padding-top: 2px;
}

.ar-event-metrics {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 900;
    color: #435071;
}

.ar-event-metrics .ar-event-dot {
    position: static;
    top: auto;
    right: auto;
    width: 9px;
    height: 9px;
    box-shadow: none;
    flex: 0 0 auto;
}

.ar-event-metrics svg { width: 12px; height: 12px; }

.ar-teacher-calendar-event footer b {
    position: static;
    display: inline-flex;
    color: var(--ar-event-color);
}

.ar-teacher-calendar-event footer b svg { width: 14px; height: 14px; }

/* Carte étroite : on garde le minimum lisible */
.ar-teacher-calendar-event.is-narrow .ar-event-title { font-size: 11px; }
.ar-teacher-calendar-event.is-narrow time { font-size: 10px; }

/* ── Vue liste : lignes 100% blanches (aucune alternance) ── */
.ar-teacher-list-table tbody tr td,
.ar-teacher-list-table tbody tr:hover td,
.ar-teacher-list-table tbody tr:nth-child(even) td,
.ar-teacher-list-table tbody tr:nth-child(odd) td,
.ar-teacher-list-day-row th {
    background: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   Calendrier final — niveau, heure actuelle, focus clavier
   ══════════════════════════════════════════════════════════════ */

.ar-teacher-calendar-day.is-today {
    background:
        linear-gradient(180deg, rgba(0, 80, 100, .075), rgba(0, 80, 100, .035)),
        #f8fdff;
    box-shadow: inset 0 0 0 1px rgba(0, 80, 100, .12);
}

.ar-teacher-calendar-grid-head strong.is-today {
    border-radius: 14px 14px 0 0;
    background: #e8f7fb;
    color: var(--ar-primary);
}

.ar-teacher-calendar-grid-head strong.is-today b {
    background: var(--ar-primary);
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 80, 100, .2);
}

.ar-teacher-now-line-global {
    z-index: 35;
}

.ar-now-label {
    z-index: 36;
}

.ar-teacher-calendar-event {
    border: 1px solid color-mix(in srgb, var(--ar-event-color) 28%, #fff);
    border-left: 4px solid var(--ar-event-color);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--ar-event-soft) 88%, #fff), #fff 120%),
        var(--ar-event-soft);
}

.ar-teacher-calendar-event time,
.ar-teacher-calendar-event time small {
    color: var(--ar-event-color);
}

.ar-teacher-calendar-event:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ar-event-color) 42%, #fff);
    outline-offset: 2px;
}

.ar-teacher-calendar-event:focus .ar-event-pop,
.ar-teacher-calendar-event:focus-within .ar-event-pop {
    display: block;
}

.ar-calendar-filter-control input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ar-ink);
    font: inherit;
    font-weight: 850;
}

.ar-calendar-filter-control input::placeholder {
    color: #435071;
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   Calendrier v8 — résumé horizontal, actions alignées, TN inline,
   menu repliable, passe responsive mobile/tablette
   ══════════════════════════════════════════════════════════════ */

/* ── Résumé de la semaine : barre horizontale après les filtres ── */
.ar-week-summary-bar {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border: 1px solid #e6ebf5;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(16, 35, 75, .05);
}

.ar-week-summary-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 950;
    color: var(--ar-ink);
    white-space: nowrap;
}

.ar-week-summary-title svg { width: 16px; height: 16px; color: var(--ar-primary); }

.ar-week-summary-items {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex: 1;
    flex-wrap: wrap;
}

.ar-week-summary-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    flex: 1 1 120px;
    padding: 9px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border-left: 3px solid #cbd5e1;
}

.ar-week-summary-item strong {
    font-size: 20px;
    font-weight: 950;
    line-height: 1.1;
    color: var(--ar-ink);
}

.ar-week-summary-item span {
    font-size: 12px;
    font-weight: 800;
    color: var(--ar-muted);
}

.ar-week-summary-item.is-confirmed { border-left-color: #22c55e; }
.ar-week-summary-item.is-done      { border-left-color: #94a3b8; }
.ar-week-summary-item.is-recovery  { border-left-color: #7c3aed; }
.ar-week-summary-item.is-cancel    { border-left-color: #f97316; }
.ar-week-summary-item.is-alert     { border-left-color: #dc2626; background: #fef2f2; }
.ar-week-summary-item.is-alert strong,
.ar-week-summary-item.is-alert span { color: #dc2626; }

/* ── Vue liste : TN toujours sur la ligne de l'heure ── */
.ar-list-heure-text strong.ar-list-tn {
    display: flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}

.ar-list-heure-text strong.ar-list-tn span,
.ar-list-heure-text strong.ar-list-tn small {
    white-space: nowrap;
}

.ar-teacher-list-table th:first-child,
.ar-teacher-list-table td:first-child {
    min-width: 180px;
}

/* ── Vue liste : actions alignées au centre de la ligne ── */
.ar-teacher-list-row td { vertical-align: middle; }

.ar-teacher-list-actions {
    display: table-cell;
    text-align: right;
}

.ar-actions-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ══════════════════════════════════════════════════════════════
   Menu latéral repliable (tablette / mobile)
   ══════════════════════════════════════════════════════════════ */
.ar-portal-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--ar-line);
    border-radius: 12px;
    background: #fff;
    color: var(--ar-ink);
    cursor: pointer;
    flex: 0 0 auto;
}

.ar-portal-menu-toggle svg { width: 20px; height: 20px; }

.ar-portal-topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.ar-portal-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(8, 20, 40, .45);
}

body.ar-nav-locked { overflow: hidden; }

/* ── Tablette (≤ 1080px) : sidebar hors-écran, menu burger ── */
@media (max-width: 1080px) {
    .ar-portal-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 12px;
    }

    .ar-portal-menu-toggle { display: inline-flex; }

    .ar-portal-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 100;
        width: 264px;
        min-height: 100vh;
        border-radius: 0 22px 22px 0;
        transform: translateX(-108%);
        transition: transform .26s ease;
        overflow-y: auto;
    }

    .ar-portal-shell.is-nav-open .ar-portal-sidebar { transform: translateX(0); }
    .ar-portal-shell.is-nav-open .ar-portal-nav-overlay { display: block; }
}

/* ── Mobile (≤ 720px) : compactage général ── */
@media (max-width: 720px) {
    .ar-portal-shell { padding: 0; }

    .ar-portal-main { border-radius: 0; }

    .ar-portal-topbar h1 { font-size: 20px; }
    .ar-portal-content { padding: 12px 14px 32px; }

    /* Calendrier : en-tête et onglets empilés */
    .ar-teacher-calendar-headline {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .ar-teacher-calendar-view-tabs { width: 100%; }
    .ar-teacher-calendar-view-tabs a { flex: 1; justify-content: center; }

    /* Barre de navigation + filtres empilés */
    .ar-teacher-calendar-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .ar-teacher-calendar-filters .ar-calendar-filter-control,
    .ar-calendar-today-btn,
    .ar-calendar-week-nav {
        width: 100%;
        justify-content: center;
    }

    /* La grille calendrier scrolle horizontalement */
    .ar-teacher-calendar-layout.ar-mode-calendar {
        grid-template-columns: 1fr;
    }

    .ar-teacher-calendar-board { overflow-x: auto; }

    .ar-teacher-calendar-grid-head,
    .ar-teacher-calendar-grid-body {
        min-width: 680px;
    }

    /* Résumé : items en 2 colonnes */
    .ar-week-summary-item { flex: 1 1 40%; }

    /* Liste : masquer colonnes secondaires, cartes empilées */
    .ar-teacher-list-table th:nth-child(3),
    .ar-teacher-list-table td:nth-child(3),
    .ar-teacher-list-table th:nth-child(5),
    .ar-teacher-list-table td:nth-child(5) {
        display: none;
    }

    .ar-teacher-list-table th:first-child,
    .ar-teacher-list-table td:first-child {
        min-width: 0;
    }

    .ar-teacher-list-pagination {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
}

/* ══════════════════════════════════════════════════════════════
   Calendrier v9 — correctifs mobile/tablette
   ══════════════════════════════════════════════════════════════ */

/* Topbar collante + burger visible dès la tablette */
@media (max-width: 1080px) {
    .ar-portal-topbar {
        position: sticky;
        top: 0;
        z-index: 80;
        background: var(--ar-bg);
        padding: 12px 4px;
    }

    .ar-portal-menu-toggle {
        display: inline-flex !important;
        border-color: var(--ar-primary);
        color: var(--ar-primary);
    }
}

@media (max-width: 720px) {
    /* Filtres compacts : annuler le flex-basis 200px (devenait la HAUTEUR
       en flex-direction:column) */
    .ar-teacher-calendar-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px;
    }

    .ar-teacher-calendar-filters .ar-calendar-filter-control,
    .ar-calendar-today-btn,
    .ar-calendar-week-nav {
        flex: 0 0 auto;
        width: 100%;
        min-height: 46px;
        height: 46px;
    }

    .ar-calendar-week-nav { justify-content: space-between; }
    .ar-calendar-week-nav strong { flex: 1; justify-content: center; }

    /* Résumé de la semaine : titre en haut, indicateurs en grille 2 colonnes */
    .ar-week-summary-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px;
    }

    .ar-week-summary-items {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .ar-week-summary-item { flex: none; }
    .ar-week-summary-item:last-child { grid-column: 1 / -1; }

    /* Carte liste : heure alignée à gauche, badges compacts */
    .ar-teacher-list-row td:nth-child(1) .ar-list-heure { gap: 9px; }
    .ar-list-status,
    .ar-list-report { padding: 5px 12px; font-size: 12px; }
}

/* Très petit écran : indicateurs résumé sur une seule colonne large */
@media (max-width: 380px) {
    .ar-week-summary-items { grid-template-columns: 1fr; }
    .ar-week-summary-item:last-child { grid-column: auto; }
}

/* ══════════════════════════════════════════════════════════════
   Calendrier v10 — burger flottant fiable + popover tactile/adaptatif
   ══════════════════════════════════════════════════════════════ */

/* Burger flottant : toujours visible sur tablette/mobile */
@media (max-width: 1080px) {
    .ar-portal-menu-toggle {
        display: inline-flex !important;
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 120;
        width: 44px;
        height: 44px;
        background: #fff;
        border-color: var(--ar-primary);
        color: var(--ar-primary);
        box-shadow: 0 6px 18px rgba(15, 23, 42, .18);
    }

    /* espace pour ne pas masquer le titre sous le burger */
    .ar-portal-topbar { padding-left: 64px; }
}

/* Popover : repositionnement pour rester dans l'écran */
.ar-event-pop.pop-right {
    left: auto;
    right: -6px;
}

.ar-event-pop.pop-up {
    top: auto;
    bottom: -6px;
}

/* Bouton d'ouverture dans le popover */
.ar-event-pop-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 9px;
    background: var(--ar-event-color);
    color: #fff;
    font-size: 12.5px;
    font-weight: 900;
    cursor: pointer;
}

.ar-event-pop-open svg { width: 14px; height: 14px; }

/* Tactile : le survol n'affiche plus le popover ; c'est le tap (is-pop-open) */
@media (hover: none), (pointer: coarse) {
    .ar-teacher-calendar-event:hover .ar-event-pop { display: none; }
}

.ar-teacher-calendar-event.is-pop-open {
    overflow: visible;
    z-index: 41;
}

.ar-teacher-calendar-event.is-pop-open .ar-event-pop {
    display: block;
}

/* ══════════════════════════════════════════════════════════════
   Calendrier v11 — burger dans un topbar qui dégage la barre admin WP
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
    /* Le burger revient dans le topbar (plus de position:fixed cachée
       derrière la barre d'administration WordPress) */
    .ar-portal-menu-toggle {
        position: static !important;
        top: auto !important;
        left: auto !important;
        box-shadow: none !important;
        display: inline-flex !important;
    }

    .ar-portal-topbar {
        position: sticky;
        top: 0;
        z-index: 80;
        background: var(--ar-bg);
        padding: 12px 4px !important;
    }
}

/* Décalage sous la barre d'admin WordPress (32px desktop, 46px mobile) */
.admin-bar .ar-portal-topbar { top: 32px; }

@media screen and (max-width: 782px) {
    .admin-bar .ar-portal-topbar { top: 46px; }
}

/* ══════════════════════════════════════════════════════════════
   v12 — header sticky sur toutes les pages (sous la barre admin WP),
   nom de l'utilisateur visible, burger dans le header
   ══════════════════════════════════════════════════════════════ */

/* Header collant partout, décalé sous la barre d'admin WordPress */
.ar-portal-topbar {
    position: sticky;
    top: 0;
    z-index: 70;
}

.admin-bar .ar-portal-topbar { top: 32px; }

@media screen and (max-width: 782px) {
    .admin-bar .ar-portal-topbar { top: 46px; }
}

/* Nom de l'utilisateur toujours affiché (tronqué si nécessaire) */
.ar-portal-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ar-portal-user-name {
    display: inline-block !important;
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 900;
}

.ar-portal-avatar {
    flex: 0 0 auto;
}

/* Burger : bien visible dans le header sur tablette/mobile */
@media (max-width: 1080px) {
    .ar-portal-menu-toggle {
        display: inline-flex !important;
        position: static !important;
        width: 44px;
        height: 44px;
        border: 1px solid var(--ar-primary);
        color: var(--ar-primary);
        background: #fff;
    }

    .ar-portal-topbar { padding: 12px 14px !important; }
}

@media (max-width: 420px) {
    .ar-portal-user-name { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   Page "Mes groupes" (enseignant)
   ══════════════════════════════════════════════════════════════ */

.ar-groups-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ar-groups-headline h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 950;
    color: var(--ar-ink);
}

.ar-groups-headline p {
    margin: 4px 0 0;
    color: var(--ar-muted);
    font-weight: 700;
}

/* Filtres (réutilise .ar-calendar-filter-control) */
.ar-groups-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
    border: 1px solid #e6ebf5;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(16, 35, 75, .05);
}

.ar-groups-search { flex: 1 1 260px; }

.ar-groups-search input {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 800;
    color: var(--ar-ink);
    outline: none;
}

/* KPIs */
.ar-groups-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.ar-groups-kpi {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid #e6ebf5;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(16, 35, 75, .05);
}

.ar-groups-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    flex: 0 0 auto;
}

.ar-groups-kpi-icon svg { width: 20px; height: 20px; }
.ar-groups-kpi-icon.ar-tone-blue { background: #e0f2fe; color: #0369a1; }
.ar-groups-kpi-icon.ar-tone-green { background: #dcfce7; color: #15803d; }
.ar-groups-kpi-icon.ar-tone-orange { background: #ffedd5; color: #c2410c; }
.ar-groups-kpi-icon.ar-tone-rose { background: #fee2e2; color: #be123c; }

.ar-groups-kpi strong {
    display: block;
    font-size: 24px;
    font-weight: 950;
    line-height: 1.1;
    color: var(--ar-ink);
}

.ar-groups-kpi span {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ar-muted);
}

/* Liste de cartes */
.ar-groups-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ar-group-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(200px, 240px);
    gap: 20px;
    align-items: stretch;
    padding: 18px;
    border: 1px solid #e6ebf5;
    border-left: 5px solid var(--ar-niv);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(16, 35, 75, .05);
}

.ar-group-card-main { display: flex; gap: 14px; min-width: 0; }

.ar-group-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    flex: 0 0 auto;
    background: var(--ar-niv-soft);
    color: var(--ar-niv);
}

.ar-group-card-icon svg { width: 21px; height: 21px; }

.ar-group-card-id { min-width: 0; }

.ar-group-card-titlerow {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ar-group-card-titlerow h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 950;
    color: var(--ar-ink);
}

.ar-group-status {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.ar-group-status.is-live { color: #15803d; background: #dcfce7; }
.ar-group-status.is-soon { color: #1d4ed8; background: #dbeafe; }
.ar-group-status.is-wait { color: #b45309; background: #fef3c7; }
.ar-group-status.is-done { color: #475569; background: #e2e8f0; }
.ar-group-status.is-cancel { color: #c2410c; background: #ffedd5; }

.ar-group-card-tags {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 7px;
}

.ar-group-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ar-muted);
    font-size: 12.5px;
    font-weight: 800;
}

.ar-group-meta svg { width: 13px; height: 13px; }

.ar-group-schedule {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: #435071;
    font-size: 13px;
    font-weight: 800;
}

.ar-group-schedule svg { width: 14px; height: 14px; color: var(--ar-muted); }

.ar-group-avatars { display: flex; margin-top: 10px; }

.ar-group-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: -8px;
    border-radius: 50%;
    background: var(--ar-niv-soft);
    color: var(--ar-niv);
    border: 2px solid #fff;
    font-size: 10px;
    font-weight: 950;
}

.ar-group-avatar:first-child { margin-left: 0; }
.ar-group-avatar-more { background: #eef2f7; color: #64748b; }

/* Métriques */
.ar-group-card-metrics {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    min-width: 0;
}

.ar-group-metric-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    font-weight: 850;
    color: #435071;
    margin-bottom: 5px;
}

.ar-group-metric-head strong { color: var(--ar-ink); font-weight: 950; }

.ar-group-bar {
    height: 7px;
    border-radius: 999px;
    background: #eef2f7;
    overflow: hidden;
}

.ar-group-bar span { display: block; height: 100%; border-radius: 999px; }

.ar-group-metric small {
    display: block;
    margin-top: 4px;
    color: var(--ar-muted);
    font-size: 11.5px;
    font-weight: 800;
}

.ar-group-next {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ar-group-next > span {
    font-size: 12.5px;
    font-weight: 850;
    color: #435071;
}

.ar-group-next strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 950;
    color: var(--ar-ink);
}

.ar-group-next strong svg { width: 14px; height: 14px; color: var(--ar-niv); }
.ar-group-next-none { color: #c3ccdd; }

/* Actions */
.ar-group-card-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ar-group-see {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 12px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 900;
    text-decoration: none;
}

.ar-group-see svg { width: 16px; height: 16px; }
.ar-group-see:hover { filter: brightness(.95); }

.ar-group-quicklinks {
    display: grid;
    gap: 6px;
}

.ar-group-quicklinks a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #e6ebf5;
    border-radius: 10px;
    color: #435071;
    font-size: 12.5px;
    font-weight: 850;
    text-decoration: none;
}

.ar-group-quicklinks a:hover {
    border-color: var(--ar-niv);
    color: var(--ar-niv);
    background: var(--ar-niv-soft);
}

.ar-group-quicklinks svg { width: 14px; height: 14px; }

.ar-groups-empty-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-radius: 14px;
    background: #f8fafc;
    color: var(--ar-muted);
    font-weight: 800;
}

.ar-groups-empty-filter svg { width: 18px; height: 18px; }

/* Responsive */
@media (max-width: 1080px) {
    .ar-group-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .ar-group-card-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
    .ar-group-see { flex: 1 1 200px; }
    .ar-group-quicklinks { flex: 1 1 100%; grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
    .ar-groups-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ar-group-card { grid-template-columns: 1fr; gap: 16px; }
    .ar-group-quicklinks { grid-template-columns: 1fr; }
    .ar-groups-headline h2 { font-size: 22px; }
}

/* ══════════════════════════════════════════════════════════════
   Mes groupes — 5 KPIs, sections (en cours / à venir / terminés)
   ══════════════════════════════════════════════════════════════ */

.ar-groups-kpis {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ar-groups-kpi-icon.ar-tone-purple { background: #ede9fe; color: #6d28d9; }

.ar-groups-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ar-groups-section + .ar-groups-section { margin-top: 6px; }

.ar-groups-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 15px;
    font-weight: 950;
    color: var(--ar-ink);
}

.ar-groups-section-title svg { width: 17px; height: 17px; color: var(--ar-primary); }

.ar-groups-section-title span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--ar-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

/* Section "terminés" : cartes légèrement atténuées */
.ar-groups-section-finished .ar-groups-section-title svg { color: #94a3b8; }
.ar-groups-section-finished .ar-groups-section-title span { background: #94a3b8; }
.ar-groups-section-finished .ar-group-card { background: #fbfcfe; }

@media (max-width: 1200px) {
    .ar-groups-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .ar-groups-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════
   v13 — header plein largeur (plat), menu revu, drawer mobile OK
   ══════════════════════════════════════════════════════════════ */

.ar-portal-viewport {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Header : barre plate pleine largeur, collée en haut ── */
.ar-portal-topbar {
    position: sticky;
    top: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 62px;
    margin: 0 !important;
    padding: 10px 26px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ar-line) !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .04) !important;
}

.admin-bar .ar-portal-topbar { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .ar-portal-topbar { top: 46px; }
}

.ar-portal-topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* Logo dans le header : visible seulement quand la sidebar est cachée */
.ar-portal-topbar-brand {
    display: none;
    align-items: center;
    gap: 10px;
    color: var(--ar-ink);
    font-size: 20px;
    font-weight: 950;
    text-decoration: none;
}

.ar-portal-topbar-brand .ar-portal-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--ar-primary);
    color: #fff;
    font-size: 12px;
}

.ar-portal-topbar-brand > span:last-child span { color: #ff9d1b; }

/* Bloc utilisateur : badge de rôle + avatar */
.ar-portal-user {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.ar-portal-role-badge {
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .01em;
    background: var(--ar-primary);
    color: #fff;
    white-space: nowrap;
}

.ar-portal-role-badge.ar-role-parent  { background: #7c3aed; }
.ar-portal-role-badge.ar-role-student { background: #f97316; }
.ar-portal-role-badge.ar-role-manager { background: #0d9488; }
.ar-portal-role-badge.ar-role-admin   { background: #1e293b; }

.ar-portal-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ar-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 950;
    flex: 0 0 auto;
}

/* ── Shell : sous le header, centré ── */
.ar-portal-shell {
    min-height: 0;
    padding: 22px 18px 26px !important;
    gap: 22px;
}

.ar-portal-sidebar {
    top: 84px;
    align-self: start;
    min-height: calc(100vh - 106px);
}

.admin-bar .ar-portal-sidebar {
    top: 116px;
    min-height: calc(100vh - 138px);
}

/* ── Menu revu ── */
.ar-portal-brand { margin: 6px 8px 20px; }

.ar-portal-nav a {
    position: relative;
    font-weight: 800;
    opacity: .82;
    transition: opacity .15s ease, background .15s ease;
}

.ar-portal-nav a:hover { opacity: 1; }

.ar-portal-nav a.active {
    opacity: 1;
    font-weight: 950;
    background: rgba(255, 255, 255, .18);
}

.ar-portal-nav a.active::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    border-radius: 999px;
    background: #ff9d1b;
}

/* ── Drawer mobile : position correcte, plein hauteur ── */
@media (max-width: 1080px) {
    .ar-portal-shell {
        grid-template-columns: minmax(0, 1fr);
        padding: 16px 14px 24px !important;
    }

    .ar-portal-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        max-width: 84vw;
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        border-radius: 0 20px 20px 0;
        transform: translateX(-100%);
        transition: transform .26s ease;
        z-index: 100;
    }

    .admin-bar .ar-portal-sidebar {
        top: 46px;
        height: calc(100vh - 46px);
    }

    .is-nav-open .ar-portal-sidebar { transform: translateX(0); }
    .is-nav-open .ar-portal-nav-overlay { display: block; }

    .ar-portal-menu-toggle {
        display: inline-flex !important;
        position: static !important;
    }

    .ar-portal-topbar-brand { display: inline-flex; }
}

@media (min-width: 1081px) {
    .ar-portal-menu-toggle { display: none !important; }
}

/* Accueil — chips de séance colorés par niveau (aperçu de la semaine) */
.ar-teacher-week-session {
    background: var(--ar-sess-soft, #f8fafc);
    border-left: 3px solid var(--ar-sess-color, #e2e8f0);
}

.ar-teacher-week-session time {
    color: var(--ar-sess-color, var(--ar-muted));
    font-weight: 900;
}

/* ══════════════════════════════════════════════════════════════
   Shell enseignant — sidebar full-height, collapsed par défaut
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 1081px) {
    .ar-portal-app {
        --ar-sidebar-width: 76px;
        display: grid;
        grid-template-columns: var(--ar-sidebar-width) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        min-height: 100vh;
        background: var(--ar-bg);
        transition: grid-template-columns .2s ease;
    }

    .ar-portal-app.is-nav-expanded {
        --ar-sidebar-width: 280px;
    }

    .ar-portal-app .ar-portal-topbar {
        grid-column: 2;
        grid-row: 1;
        min-height: 64px;
        margin: 0;
        padding: 0 30px;
        border-width: 0 0 1px;
        border-radius: 0;
        box-shadow: none;
    }

    .ar-portal-app .ar-portal-shell {
        display: contents;
        min-height: 0;
        max-width: none;
        margin: 0;
        padding: 0 !important;
    }

    .ar-portal-app .ar-portal-sidebar {
        grid-column: 1;
        grid-row: 1 / span 2;
        position: sticky;
        top: 0;
        align-self: start;
        width: var(--ar-sidebar-width);
        height: 100vh;
        min-height: 100vh;
        padding: 18px 12px;
        border-radius: 0;
        box-shadow: none;
        overflow-x: hidden;
        overflow-y: auto;
        transition: width .2s ease, padding .2s ease;
    }

    .admin-bar .ar-portal-app .ar-portal-sidebar {
        top: 0;
        min-height: 100vh;
    }

    .ar-portal-app .ar-portal-main {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        padding: 28px 34px 44px;
    }

    .ar-portal-app .ar-portal-brand {
        display: flex;
        justify-content: center;
        width: 100%;
        min-height: 44px;
        margin: 0 0 22px;
        padding: 0;
        white-space: nowrap;
    }

    .ar-portal-app.is-nav-expanded .ar-portal-brand {
        justify-content: flex-start;
        padding: 0 8px;
    }

    .ar-portal-app .ar-portal-brand > span:last-child,
    .ar-portal-app .ar-nav-label {
        display: inline-block;
        overflow: hidden;
        max-width: 0;
        opacity: 0;
        white-space: nowrap;
        transition: max-width .18s ease, opacity .12s ease;
    }

    .ar-portal-app.is-nav-expanded .ar-portal-brand > span:last-child {
        max-width: 150px;
        opacity: 1;
    }

    .ar-portal-app.is-nav-expanded .ar-nav-label {
        max-width: 180px;
        opacity: 1;
    }

    .ar-portal-app .ar-portal-nav {
        gap: 8px;
    }

    .ar-portal-app .ar-portal-nav a {
        justify-content: center;
        min-height: 48px;
        padding: 12px;
        border-radius: 14px;
        gap: 0;
    }

    .ar-portal-app.is-nav-expanded .ar-portal-nav a {
        justify-content: flex-start;
        gap: 11px;
        padding: 12px 14px;
    }

    .ar-portal-app .ar-portal-nav a span:first-child {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
    }

    .ar-portal-app .ar-portal-nav a.active::before {
        left: 0;
    }

    .ar-portal-app .ar-portal-menu-toggle {
        display: inline-flex !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   Aperçu d'un groupe (enseignant) — Group Overview
   ══════════════════════════════════════════════════════════════ */

.ar-group-overview { display: flex; flex-direction: column; gap: 18px; }

.ar-group-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ar-muted);
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
    width: fit-content;
}
.ar-group-back:hover { color: var(--ar-primary); }
.ar-group-back svg { width: 15px; height: 15px; }

/* En-tête */
.ar-group-ov-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 2px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Illustration du niveau à droite (façon maquette) */
.ar-group-ov-illus {
    flex: 0 0 auto;
    align-self: flex-end;
    line-height: 0;
}

.ar-group-ov-illus img {
    display: block;
    width: 132px;
    height: 108px;
    object-fit: contain;
    object-position: right bottom;
}

@media (max-width: 560px) {
    .ar-group-ov-illus img { width: 92px; height: 78px; }
}

/* Bouton Rejoindre dans la tuile Prochaine séance */
.ar-kpi-join {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    padding: 8px 14px;
    border-radius: 11px;
    background: var(--ar-niv);
    color: #fff !important;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    width: fit-content;
}
.ar-kpi-join:hover { filter: brightness(.95); }
.ar-kpi-join svg { width: 15px; height: 15px; }

.ar-group-ov-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 15px;
    flex: 0 0 auto;
    background: var(--ar-niv-soft);
    color: var(--ar-niv);
}
.ar-group-ov-icon svg { width: 26px; height: 26px; }

.ar-group-ov-id { flex: 1; min-width: 0; }

.ar-group-ov-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ar-group-ov-titlerow h2 { margin: 0; font-size: 21px; font-weight: 950; color: var(--ar-ink); }

.ar-group-ov-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 8px;
    color: #435071;
    font-size: 13px;
    font-weight: 800;
}
.ar-group-ov-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ar-group-ov-meta svg { width: 14px; height: 14px; color: var(--ar-muted); }
.ar-group-ov-meta-sub { margin-top: 4px; font-weight: 600; font-size: 12.5px; color: #64748B; }

.ar-group-ov-status {
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}
.ar-group-ov-status.is-active   { color: #15803d; background: #dcfce7; }
.ar-group-ov-status.is-upcoming { color: #1d4ed8; background: #dbeafe; }
.ar-group-ov-status.is-finished { color: #475569; background: #e2e8f0; }

.ar-group-ov-actions { display: flex; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; }
.ar-group-ov-actions .ar-portal-btn { display: inline-flex; align-items: center; gap: 7px; }
.ar-group-ov-actions svg { width: 15px; height: 15px; }

/* Onglets */
.ar-group-ov-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 6px;
    border: 1px solid #e6ebf5;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(16, 35, 75, .04);
}
.ar-group-ov-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 11px;
    color: #435071;
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}
.ar-group-ov-tabs a svg { width: 15px; height: 15px; }
.ar-group-ov-tabs a:hover { background: #f4fbfd; color: var(--ar-primary); }
.ar-group-ov-tabs a.active { background: var(--ar-niv-soft); color: var(--ar-niv); }
/* Badge de non-lus sur un onglet (forum / messages / SMS). */
.ar-tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px;
    border-radius: 999px; background: #DC2626; color: #fff;
    font-size: 11px; font-weight: 900; line-height: 1;
}
.ar-tab-badge[hidden] { display: none; }

/* KPIs */
.ar-group-ov-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.ar-group-ov-kpi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border: 1px solid #e6ebf5;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(16, 35, 75, .05);
}
.ar-group-ov-kpi-lbl { font-size: 12.5px; font-weight: 850; color: var(--ar-muted); }
.ar-group-ov-kpi strong { font-size: 24px; font-weight: 950; color: var(--ar-ink); line-height: 1.1; }
.ar-group-ov-kpi strong.ar-muted-strong { color: #c3ccdd; }
.ar-group-ov-kpi-sub { font-size: 12px; font-weight: 800; color: var(--ar-muted); }
.ar-kpi-week-inline { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--ar-line, #eef2f7); }
.ar-kpi-week-inline svg { width: 13px; height: 13px; color: var(--ar-niv, #64748b); flex: 0 0 auto; }

/* KPI cliquable (carte-lien vers la page correspondante) */
a.ar-group-ov-kpi-link { text-decoration: none; color: inherit; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
a.ar-group-ov-kpi-link:hover { transform: translateY(-2px); border-color: var(--ar-niv, #005064); box-shadow: 0 14px 30px rgba(16, 35, 75, .12); }
a.ar-group-ov-kpi-link:focus-visible { outline: 2px solid var(--ar-niv, #005064); outline-offset: 2px; }
.ar-kpi-arrow { width: 13px; height: 13px; vertical-align: -2px; margin-inline-start: 2px; opacity: 0; transform: translateX(-3px); transition: opacity .15s ease, transform .15s ease; color: var(--ar-niv, #64748b); }
a.ar-group-ov-kpi-link:hover .ar-kpi-arrow { opacity: 1; transform: translateX(0); }
.ar-group-ov-kpi a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    color: var(--ar-niv);
    font-size: 12.5px;
    font-weight: 900;
    text-decoration: none;
}
.ar-group-ov-kpi a svg { width: 14px; height: 14px; }
.ar-kpi-next { background: linear-gradient(150deg, var(--ar-niv-soft), #fff 70%); }

/* Colonnes */
.ar-group-ov-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}
.ar-group-ov-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border: 1px solid #e6ebf5;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(16, 35, 75, .05);
}
.ar-group-ov-panel-head { display: flex; align-items: center; justify-content: space-between; }
.ar-group-ov-panel-head h3 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 950;
    color: var(--ar-ink);
}
.ar-group-ov-panel-head svg { width: 16px; height: 16px; color: var(--ar-niv); }
.ar-group-ov-count[hidden] { display: none !important; }
.ar-group-ov-count {
    min-width: 22px; height: 22px; padding: 0 7px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--ar-niv-soft); color: var(--ar-niv);
    font-size: 12px; font-weight: 900;
}

.ar-group-ov-students { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ar-group-ov-students li { display: flex; align-items: center; gap: 11px; }
.ar-group-ov-students .ar-group-avatar { position: static; width: 34px; height: 34px; margin: 0; border: 0; font-size: 12px; }
.ar-group-ov-student-name { font-weight: 850; color: var(--ar-ink); }

.ar-group-ov-reports { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ar-group-ov-reports li { display: flex; align-items: center; gap: 11px; }
.ar-group-ov-report-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
}
.ar-group-ov-report-ic svg { width: 16px; height: 16px; }
/* Ligne entièrement cliquable (mène à la séance en vue liste). */
.ar-group-ov-report-row { display: contents; color: inherit; text-decoration: none; cursor: pointer; }
.ar-group-ov-reports li > .ar-group-ov-report-row > div,
.ar-group-ov-reports li > div { flex: 1; min-width: 0; }
.ar-group-ov-reports li strong { display: block; font-size: 13.5px; font-weight: 900; color: var(--ar-ink); }
.ar-group-ov-reports li small { color: var(--ar-muted); font-weight: 700; }

.ar-group-ov-panel-link {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: auto; color: var(--ar-niv); font-size: 13px; font-weight: 900; text-decoration: none;
}
.ar-group-ov-panel-link svg { width: 14px; height: 14px; }
.ar-group-ov-empty { color: var(--ar-muted); font-weight: 700; }

/* CTA parents */
.ar-group-ov-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border-radius: 18px;
    background: var(--ar-niv-soft);
}
.ar-group-ov-cta-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
    background: #fff; color: var(--ar-niv);
}
.ar-group-ov-cta-ic svg { width: 22px; height: 22px; }
.ar-group-ov-cta > div { flex: 1; min-width: 0; }
.ar-group-ov-cta strong { display: block; font-size: 15px; font-weight: 950; color: var(--ar-ink); }
.ar-group-ov-cta p { margin: 3px 0 0; color: #435071; font-weight: 700; font-size: 13px; }

@media (max-width: 1080px) {
    .ar-group-ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .ar-group-ov-header { flex-wrap: wrap; }
    .ar-group-ov-actions { width: 100%; }
    .ar-group-ov-cols { grid-template-columns: 1fr; }
    .ar-group-ov-cta { flex-wrap: wrap; }
    .ar-group-ov-cta .ar-portal-btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
    .ar-group-ov-kpis { grid-template-columns: 1fr; }
}

/* Mascotte de niveau dans l'en-tête du groupe */
.ar-group-ov-mascot {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    flex: 0 0 auto;
    overflow: hidden;
    background: radial-gradient(120% 120% at 50% 15%, #fff 0%, var(--ar-niv-soft) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ar-niv) 18%, #fff);
}

.ar-group-ov-mascot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    transform: scale(1.12);
}

@media (max-width: 760px) {
    .ar-group-ov-mascot { width: 60px; height: 60px; border-radius: 15px; }
}

/* Fond de niveau (test Ahmed) — filigrane transparent */
.ar-group-overview { position: relative; }

.ar-group-overview.has-bg::before {
    content: "";
    position: absolute;
    top: -6px;
    right: -6px;
    width: 360px;
    max-width: 55%;
    height: 460px;
    background-image: var(--ar-niv-bg);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain;
    opacity: .12;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: linear-gradient(200deg, #000 30%, transparent 92%);
            mask-image: linear-gradient(200deg, #000 30%, transparent 92%);
}

.ar-group-overview.has-bg > * { position: relative; z-index: 1; }

@media (max-width: 760px) {
    .ar-group-overview.has-bg::before { width: 220px; height: 300px; opacity: .09; }
}

/* ══════════════════════════════════════════════════════════════
   Group Overview v2 — wave header, icône, boutons, 3 colonnes + comms
   ══════════════════════════════════════════════════════════════ */

/* Vague colorée en haut (couleur du niveau) */
.ar-group-overview { position: relative; padding-top: 6px; }
.ar-group-ov-wave {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 150px;
    z-index: 0;
    pointer-events: none;
    color: var(--ar-niv);
}
.ar-group-ov-wave svg { display: block; width: 100%; height: 100%; }
.ar-group-ov-wave path { fill: currentColor; opacity: .13; }
.ar-group-overview > *:not(.ar-group-ov-wave) { position: relative; z-index: 1; }

/* Icône du niveau dans l'en-tête */
.ar-group-ov-header { align-items: center; }
.ar-group-ov-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    flex: 0 0 auto;
    background: #fff;
    color: var(--ar-niv);
    box-shadow: 0 8px 20px rgba(16, 35, 75, .12), inset 0 0 0 1px color-mix(in srgb, var(--ar-niv) 20%, #fff);
}
.ar-group-ov-icon svg { width: 27px; height: 27px; }

/* Boutons des KPI (Rejoindre / Voir le calendrier) */
.ar-kpi-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    padding: 9px 14px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    width: fit-content;
}
.ar-kpi-btn svg { width: 15px; height: 15px; }
.ar-kpi-btn-solid { background: var(--ar-niv); color: #fff !important; }
.ar-kpi-btn-solid:hover { filter: brightness(.95); }
.ar-kpi-btn-soft {
    background: var(--ar-niv-soft);
    color: var(--ar-niv) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ar-niv) 24%, #fff);
}
.ar-kpi-btn-soft:hover { filter: brightness(.97); }

/* 3 colonnes : élèves (réduit) · communications · rapports */
.ar-group-ov-cols {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.1fr) minmax(0, 1fr);
}
.ar-panel-students .ar-group-ov-students { max-height: 260px; overflow-y: auto; }
.ar-panel-students .ar-group-ov-student-name { font-size: 13.5px; }

/* Communications */
.ar-group-ov-comms { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ar-group-ov-comms li { display: flex; align-items: center; gap: 11px; }
.ar-comm-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto;
}
.ar-comm-ic svg { width: 17px; height: 17px; }
.ar-comm-forum   { background: #ede9fe; color: #6d28d9; }
.ar-comm-message { background: #dbeafe; color: #1d4ed8; }
.ar-comm-body { flex: 1; min-width: 0; text-decoration: none; }
.ar-comm-body strong { display: block; font-size: 13.5px; font-weight: 900; color: var(--ar-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-comm-body small { color: var(--ar-muted); font-weight: 700; }
.ar-comm-body:hover strong { color: var(--ar-niv); }

/* Ligne « SMS parents non lus » (live) dans Communications. */
.ar-comm-sms-line {
    display: flex; align-items: center; gap: 11px; margin-bottom: 8px;
    padding: 9px 11px; border-radius: 12px; text-decoration: none;
    background: #FEF2F2; border: 1px solid #FECACA;
}
.ar-comm-sms-line[hidden] { display: none; }
.ar-comm-sms-line .ar-comm-ic { background: #FEE2E2; color: #DC2626; }
.ar-comm-sms-line .ar-comm-body strong { color: #B91C1C; }
.ar-comm-sms-line > i:last-child { color: #DC2626; width: 16px; height: 16px; }
.ar-comm-sms-line:hover { background: #FEE2E2; }

.ar-comms-empty[hidden] { display: none !important; }
.ar-comms-empty {
    display: flex; align-items: center; gap: 10px;
    padding: 14px; border-radius: 12px; background: #f8fafc;
    font-size: 13px; line-height: 1.4;
}
.ar-comms-empty svg { width: 22px; height: 22px; color: #94a3b8; flex: 0 0 auto; }

@media (max-width: 1080px) {
    .ar-group-ov-cols { grid-template-columns: 1fr 1fr; }
    .ar-panel-comms { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 760px) {
    .ar-group-ov-cols { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   Group Overview v3 — vague, icônes niveau, 3 colonnes, heure TN/CA
   ══════════════════════════════════════════════════════════════ */

/* Vague à deux couches, plus douce */
.ar-group-ov-wave { height: 172px; }
.ar-group-ov-wave path { fill: currentColor; }
.ar-group-ov-wave .ar-wave-back { opacity: .08; }
.ar-group-ov-wave .ar-wave-front { opacity: .16; }

/* Icônes de niveau : onglets + méta de l'en-tête */
.ar-group-ov-tabs a svg { color: var(--ar-niv); }
.ar-group-ov-tabs a.active { background: var(--ar-niv-soft); color: var(--ar-niv); }
.ar-group-ov-tabs a.active svg { color: var(--ar-niv); }
.ar-group-ov-meta svg { color: var(--ar-niv); }

/* Les 3 panneaux sur la même ligne (jusqu'à 900px) */
.ar-group-ov-cols {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.1fr) minmax(0, 1fr);
}
@media (max-width: 1080px) {
    .ar-group-ov-cols { grid-template-columns: minmax(0, .82fr) minmax(0, 1.1fr) minmax(0, 1fr); }
    .ar-panel-comms { grid-column: auto; order: 0; }
}
@media (max-width: 900px) {
    .ar-group-ov-cols { grid-template-columns: 1fr; }
}

/* Heure enseignant uniforme : TN (majuscule) + CA plus petit */
.ar-time-dual {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
}
.ar-time-dual b {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 15px;
    font-weight: 950;
    color: var(--ar-ink);
}
.ar-time-dual b span {
    font-size: 9px;
    font-weight: 900;
    color: var(--ar-muted);
    letter-spacing: .04em;
}
.ar-time-dual i {
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    color: var(--ar-muted);
}
.ar-time-dual-inline b { font-size: 13px; }
.ar-time-dual-inline i { font-size: 10.5px; }

.ar-time-dual-large b {
    font-size: 34px;
    line-height: 1;
}

.ar-time-dual-large i {
    margin-top: 2px;
    font-size: 13px;
}

.ar-teacher-session-row .ar-time-dual,
.ar-teacher-week-session .ar-time-dual,
.ar-group-ov-reports .ar-time-dual,
.ar-portal-session-list .ar-time-dual {
    min-width: 0;
}

.ar-teacher-session-row .ar-time-dual b,
.ar-teacher-week-session .ar-time-dual b {
    color: inherit;
}

.ar-teacher-week-session .ar-time-dual i {
    color: #64748b;
}

.ar-event-ca {
    color: var(--ar-muted);
}

/* Page groupe — responsive et lisibilité */
.ar-portal-group-page .ar-portal-group-hero {
    align-items: center;
    gap: 18px;
}

.ar-portal-group-page .ar-portal-group-hero p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.ar-portal-group-page .ar-portal-panel {
    border-color: #e6ebf5;
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(16, 35, 75, .05);
}

.ar-portal-group-page .ar-portal-stat-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ar-portal-group-page .ar-portal-session-list li {
    grid-template-columns: auto minmax(150px, .9fr) minmax(120px, .55fr) auto;
    padding: 12px 0;
}

.ar-portal-group-page .ar-portal-session-list li > strong {
    min-width: 0;
}

.ar-portal-group-page .ar-portal-session-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 1180px) {
    .ar-portal-detail-grid {
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .ar-portal-group-page .ar-portal-stat-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .ar-portal-detail-grid {
        grid-template-columns: 1fr;
    }

    .ar-portal-sidebar-stack {
        order: 2;
    }

    .ar-portal-group-main {
        order: 1;
    }

    .ar-portal-group-page .ar-portal-comm-grid,
    .ar-portal-group-page .ar-portal-group-actions-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .ar-time-dual-large b {
        font-size: 28px;
    }

    .ar-portal-group-page .ar-portal-group-hero {
        align-items: flex-start;
        padding: 20px;
    }

    .ar-portal-group-page .ar-portal-stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ar-portal-group-page .ar-portal-session-list li {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
        border: 1px solid #e6ebf5;
        border-radius: 14px;
        background: #fff;
    }

    .ar-portal-group-page .ar-portal-session-actions {
        justify-content: stretch;
    }

    .ar-portal-group-page .ar-portal-session-actions .ar-portal-inline-action {
        flex: 1 1 120px;
    }

    .ar-portal-group-page .ar-portal-session-actions button {
        width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════════
   Group Overview v4 — vague pleine largeur (sans marge) + dernière semaine
   ══════════════════════════════════════════════════════════════ */

/* Vague qui déborde jusqu'aux bords de la zone de contenu (padding du main) */
.ar-group-ov-wave {
    top: -30px;
    left: -34px;
    right: -34px;
    height: 210px;
}

@media (max-width: 1080px) {
    .ar-group-ov-wave { left: -34px; right: -34px; top: -28px; }
}

@media (max-width: 720px) {
    .ar-group-ov-wave { left: -14px; right: -14px; top: -12px; }
}

/* Mention "Dernière semaine du cours" — en rose */
.ar-kpi-lastweek {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #fce7f3;
    color: #db2777;
    font-size: 12px;
    font-weight: 900;
    width: fit-content;
}
.ar-kpi-lastweek svg { width: 14px; height: 14px; }

/* ══════════════════════════════════════════════════════════════
   v14 — badge de rôle & avatar (non bleus), CTA niveau, responsive
   ══════════════════════════════════════════════════════════════ */

/* Badge de rôle : pilule douce avec pastille, palettes chaudes par rôle */
.ar-portal-role-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    padding: 6px 13px 6px 11px !important;
    border-radius: 999px;
    background: #fef3c7 !important;
    color: #b45309 !important;
    box-shadow: inset 0 0 0 1px #fde68a;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.ar-portal-role-badge::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
.ar-portal-role-badge.ar-role-parent  { background: #f3e8ff !important; color: #7e22ce !important; box-shadow: inset 0 0 0 1px #e9d5ff; }
.ar-portal-role-badge.ar-role-student { background: #ffedd5 !important; color: #c2410c !important; box-shadow: inset 0 0 0 1px #fed7aa; }
.ar-portal-role-badge.ar-role-manager { background: #ccfbf1 !important; color: #0f766e !important; box-shadow: inset 0 0 0 1px #99f6e4; }
.ar-portal-role-badge.ar-role-admin   { background: #e2e8f0 !important; color: #334155 !important; box-shadow: inset 0 0 0 1px #cbd5e1; }

/* Avatar : dégradé chaud (orange → rose) */
.ar-portal-avatar {
    background: linear-gradient(135deg, #ff9d1b, #ec4899) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(236, 72, 153, .28);
}

/* Bouton CTA "Parents & SMS" à la couleur du niveau */
.ar-cta-parents {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 11px 16px;
    border-radius: 12px;
    background: var(--ar-niv);
    color: #fff;
    font-size: 13.5px;
    font-weight: 900;
    text-decoration: none;
}
.ar-cta-parents:hover { filter: brightness(.95); }
.ar-cta-parents svg { width: 16px; height: 16px; }

/* ── Responsive de l'Aperçu du groupe (mobile first) ── */
.ar-portal-main { overflow-x: clip; }
.ar-group-overview { overflow-x: clip; }

@media (max-width: 760px) {
    .ar-group-ov-header {
        flex-wrap: wrap;
        gap: 12px;
    }
    .ar-group-ov-icon { width: 48px; height: 48px; border-radius: 13px; }
    .ar-group-ov-icon svg { width: 23px; height: 23px; }
    .ar-group-ov-titlerow h2 { font-size: 18px; }
    .ar-group-ov-meta { gap: 6px 12px; font-size: 12.5px; }

    .ar-group-ov-kpis { grid-template-columns: 1fr 1fr; }
    .ar-group-ov-cta {
        flex-wrap: wrap;
        text-align: left;
    }
    .ar-group-ov-cta .ar-cta-parents { width: 100%; justify-content: center; }
    .ar-group-ov-cta-ic { margin-bottom: 2px; }
}

@media (max-width: 480px) {
    .ar-group-ov-kpis { grid-template-columns: 1fr; }
    .ar-group-ov-wave { height: 150px; }
    .ar-group-ov-tabs a { padding: 8px 11px; font-size: 12.5px; }
}

/* ══════════════════════════════════════════════════════════════
   Group Overview v5 — vague plus élégante + espace avant les onglets
   ══════════════════════════════════════════════════════════════ */

.ar-group-ov-wave { height: 250px; }
.ar-group-ov-wave .ar-wave-back { fill: currentColor; opacity: .10; }
.ar-group-ov-wave .ar-wave-front { opacity: 1; } /* le dégradé gère la transparence */

/* Plus d'air entre l'en-tête (vague) et la barre d'onglets */
.ar-group-ov-header { margin-bottom: 24px; }

@media (max-width: 760px) {
    .ar-group-ov-wave { height: 200px; }
    .ar-group-ov-header { margin-bottom: 14px; }
}

/* Group Overview v6 — vague nettement plus douce (lisibilité du texte) */
.ar-group-ov-wave { height: 176px; }
.ar-group-ov-wave .ar-wave-back { opacity: .05; }
.ar-group-ov-wave .ar-wave-front { opacity: 1; }
@media (max-width: 760px) { .ar-group-ov-wave { height: 150px; } }

/* ══════════════════════════════════════════════════════════════
   Group Overview v7 — sans vague + responsive tablette/mobile propre
   ══════════════════════════════════════════════════════════════ */

.ar-group-overview { padding-top: 0; }
.ar-group-ov-wave { display: none; }            /* vague retirée */
.ar-group-overview, .ar-group-overview * { min-width: 0; }

/* En-tête : carte douce (remplace la vague) */
.ar-group-ov-header {
    padding: 16px 18px;
    border-radius: 18px;
    background: var(--ar-niv-soft);
    margin-bottom: 4px;
}
.ar-group-ov-meta { row-gap: 6px; }

/* KPIs */
.ar-group-ov-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ar-group-ov-kpi { min-width: 0; }
.ar-group-ov-kpi > * { max-width: 100%; }

/* 3 panneaux */
.ar-group-ov-cols { grid-template-columns: minmax(0, .82fr) minmax(0, 1.1fr) minmax(0, 1fr); }

/* ── Tablette ── */
@media (max-width: 1080px) {
    .ar-group-ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ar-group-ov-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ar-panel-comms { grid-column: 1 / -1; }
}

/* ── Mobile ── */
@media (max-width: 680px) {
    .ar-group-ov-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px;
    }
    .ar-group-ov-kpis { grid-template-columns: 1fr; }
    .ar-group-ov-cols { grid-template-columns: 1fr; }
    .ar-group-ov-cta { flex-direction: column; align-items: flex-start; }
    .ar-group-ov-cta .ar-cta-parents { width: 100%; justify-content: center; }
}

/* Onglets du groupe : ne pas écraser, faire défiler horizontalement */
.ar-group-ov-tabs { flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.ar-group-ov-tabs a {
    flex: 0 0 auto;
    white-space: nowrap;
    min-width: max-content;
}

/* ══════════════════════════════════════════════════════════════
   Onglets groupe : 3 visibles + bouton "Plus" (dropdown) — pas de scroll
   ══════════════════════════════════════════════════════════════ */

.ar-group-ov-tabs { flex-wrap: wrap; overflow: visible; }

/* Desktop : tous les onglets en ligne, pas de bouton "Plus" */
.ar-tabs-more { display: contents; }
.ar-tabs-extra { display: contents; }
.ar-tabs-more-btn { display: none; }

.ar-tabs-more-btn {
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #435071;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
}
.ar-tabs-more-btn svg { width: 15px; height: 15px; color: var(--ar-niv); }
.ar-tabs-more-btn:hover { background: #f4fbfd; color: var(--ar-niv); }

/* Sous 900px : 3 onglets + bouton "Plus" qui ouvre un menu */
@media (max-width: 900px) {
    .ar-group-ov-tabs { flex-wrap: nowrap; position: relative; }
    .ar-group-ov-tabs > a { flex: 0 0 auto; }

    .ar-tabs-more { display: block; position: static; margin-left: auto; }
    .ar-tabs-more-btn { display: inline-flex; }

    .ar-tabs-extra {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        right: 6px;
        z-index: 30;
        min-width: 210px;
        flex-direction: column;
        gap: 2px;
        padding: 6px;
        border: 1px solid #e6ebf5;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
    }
    .ar-group-ov-tabs.is-open .ar-tabs-extra { display: flex; }
    .ar-tabs-extra a { width: 100%; justify-content: flex-start; }
    .ar-group-ov-tabs.is-open .ar-tabs-more-btn { background: var(--ar-niv-soft); color: var(--ar-niv); }
}

/* Onglets groupe — compacter sur mobile pour que "Plus" reste visible */
@media (max-width: 900px) {
    .ar-group-ov-tabs { gap: 3px; padding: 5px; }
    .ar-group-ov-tabs > a { padding: 9px 12px; }
    .ar-tabs-more-btn { padding: 9px 11px; margin-left: 2px; }
    .ar-tabs-more-btn span { display: none; }   /* icône seule */
}

@media (max-width: 420px) {
    .ar-group-ov-tabs > a { padding: 8px 10px; font-size: 12.5px; gap: 6px; }
    .ar-group-ov-tabs > a svg { width: 14px; height: 14px; }
}

/* Menu "Plus" au premier plan (au-dessus des cartes qui suivent) */
.ar-group-ov-tabs { position: relative; z-index: 5; }
.ar-group-ov-tabs.is-open { z-index: 60; }
@media (max-width: 900px) {
    .ar-group-ov-tabs.is-open { z-index: 60; }
    .ar-tabs-extra { z-index: 61; }
}

/* ══════════════════════════════════════════════════════════════
   Séances d'un groupe (onglet Séances)
   ══════════════════════════════════════════════════════════════ */

.ar-seances-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.ar-seances-toolbar h3 { margin: 0; font-size: 18px; font-weight: 950; color: var(--ar-ink); }
.ar-seances-toolbar p { margin: 3px 0 0; color: var(--ar-muted); font-weight: 700; font-size: 13px; }

/* Contrôles séances compacts : une seule carte, deux rangées fines. */
.ar-seances-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #e6ebf5;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(16, 35, 75, .04);
}
.ar-seances-controls-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ar-seances-controls-top .ar-seances-switch { margin-left: auto; }
.ar-seances-controls-bottom {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid #eef2f7;
}
.ar-seances-controls-bottom .ar-seances-counts { margin-left: auto; }
.ar-seances-controls-bottom .ar-seances-legend { margin-left: 0; }

.ar-seances-filters {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid #e6ebf5;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(16, 35, 75, .04);
}
.ar-seances-filters .ar-calendar-filter-control { flex: 0 1 200px; }
.ar-seances-period, .ar-seances-statut-filter { display: flex; align-items: center; gap: 10px; margin: 0; }
.ar-seances-period-nav { display: inline-flex; align-items: center; gap: 4px; }
.ar-seances-period-nav strong { min-width: 120px; text-align: center; font-size: 13px; font-weight: 900; color: #16233f; }
.ar-seances-period-nav a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px;
    border: 1px solid #e6ebf5; color: #435071; background: #fff;
}
.ar-seances-period-nav a:hover { border-color: var(--ar-niv); color: var(--ar-niv); background: var(--ar-niv-soft); }
.ar-seances-period-nav a:focus-visible,
.ar-seances-switch a:focus-visible,
.ar-cal-panel-head a:focus-visible,
.ar-report-act:focus-visible,
.ar-seances-cell-actions a:focus-visible,
.ar-seance-quick:focus-visible,
.ar-modal-btn:focus-visible,
.ar-modal-head [data-ar-modal-close]:focus-visible,
.ar-report-toolbar button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ar-niv, #005064) 28%, #fff);
    outline-offset: 2px;
}
.ar-seances-period-nav svg { width: 16px; height: 16px; }

.ar-seances-filters .ar-seances-counts { margin-left: auto; }
.ar-seances-filters .ar-seances-legend { margin-left: 0; }
.ar-seances-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-left: auto; }
.ar-seances-legend span { display: inline-flex; align-items: center; gap: 7px; color: #435071; font-size: 12.5px; font-weight: 800; }
.ar-seances-legend i { width: 9px; height: 9px; border-radius: 50%; }
.ar-seances-legend i.is-confirmed { background: #22c55e; }
.ar-seances-legend i.is-done { background: #94a3b8; }
.ar-seances-legend i.is-recovery { background: #7c3aed; }
.ar-seances-legend i.is-cancel { background: #f97316; }
.ar-seances-legend i.is-free { background: #0d9488; }

/* Compteurs + légende fusionnés (une seule ligne) */
.ar-seances-legend-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-left: auto; }
.ar-lc-item { display: inline-flex; align-items: center; gap: 6px; color: #435071; font-size: 12.5px; font-weight: 700; }
.ar-lc-item b { font-weight: 900; color: #16233f; }
.ar-lc-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
/* Légende : couleurs issues de la source unique (variables --sp-st-*), aucun override. */
.ar-lc-dot.is-confirmed { background: var(--sp-st-prevue-fg); }
.ar-lc-dot.is-done { background: var(--sp-st-faite-fg); }
.ar-lc-dot.is-recovery { background: var(--sp-st-rattr-fg); }
.ar-lc-dot.is-cancel { background: var(--sp-st-annulee-fg); }
.ar-lc-dot.is-free { background: var(--sp-st-offerte-fg); }

.ar-seances-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 450px;
    gap: 16px;
    align-items: start;
}

.ar-seances-rail { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 16px; }
.ar-seances-cal { }

.ar-seances-list-panel {
    border: 1px solid #e6ebf5;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(16, 35, 75, .05);
    overflow: hidden;
}
.ar-seances-list-head {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) 110px 120px 168px 52px;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #eef2f9;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
}
.ar-seances-rows { max-height: none; overflow-y: visible; }
/* État vide (aucune séance sur la période) — centré et aéré. */
.ar-seances-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 40px 24px; text-align: center;
}
.ar-seances-empty .ar-seances-empty-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--ar-niv-soft, #F1F5F9); color: var(--ar-niv, #64748B);
}
.ar-seances-empty .ar-seances-empty-ic svg { width: 24px; height: 24px; }
.ar-seances-empty strong { font-size: 15px; font-weight: 800; color: #475569; }
.ar-seances-empty .ar-btn { margin-top: 2px; }
.ar-seances-row {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) 110px 120px 168px 52px;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #eef2f9;
}
.ar-seances-row:hover { background: #fbfdff; }
.ar-seances-cell-actions { display: flex; gap: 4px; justify-content: flex-end; }
.ar-seances-cell-actions a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 10px; color: #435071;
}
.ar-seances-cell-actions a:hover { background: #f1f5f9; color: var(--ar-niv); }
.ar-seances-cell-actions svg { width: 16px; height: 16px; }

.ar-seances-empty-filter {
    display: none;
    align-items: center; gap: 8px;
    padding: 16px; color: var(--ar-muted); font-weight: 800;
}
.ar-seances-empty-filter[hidden] { display: none; }
.ar-seances-empty-filter:not([hidden]) { display: flex; }
.ar-seances-empty-filter svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
    .ar-seances-layout { grid-template-columns: 1fr; }
    .ar-seances-cal { position: static; }
    .ar-seances-list-head { display: none; }
    .ar-seances-row {
        grid-template-columns: 1fr auto;
        grid-template-areas: "date statut" "time report" "time actions";
        gap: 6px 10px;
    }
    .ar-seances-cell-date { grid-area: date; }
    .ar-seances-cell-time { grid-area: time; }
    .ar-seances-row > div:nth-child(3) { grid-area: statut; justify-self: end; }
    .ar-seances-cell-report { grid-area: report; }
    .ar-seances-cell-actions { grid-area: actions; }
}

/* ============================================================
   Séances — bandeau rapports en attente + panneau de détail (v15)
   ============================================================ */
.ar-seances-pending {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px; margin-bottom: 4px;
    border: 1px solid #fde3c4; border-left: 4px solid #f59e0b;
    border-radius: 14px; background: #fff9f0;
}
.ar-seances-pending-icon {
    display: inline-flex; flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 10px;
    align-items: center; justify-content: center;
    background: #fef0d9; color: #b45309;
}
.ar-seances-pending-icon svg { width: 18px; height: 18px; }
.ar-seances-pending-body { min-width: 0; flex: 1 1 auto; }

/* Date chip devient un lien de sélection */
a.ar-list-date-chip { cursor: pointer; text-decoration: none; }
a.ar-list-date-chip:hover { filter: brightness(.97); }
.ar-seances-row.is-selected { background: var(--ar-niv-soft); box-shadow: inset 3px 0 0 var(--ar-niv); }
.ar-seances-row.is-selected:hover { background: var(--ar-niv-soft); }

/* Panneau de détail */
.ar-detail-eyebrow {
    display: block; text-transform: uppercase; letter-spacing: .04em;
    font-size: 11px; font-weight: 900; color: #94a3b8;
}
.ar-seance-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
/* Badge « durée ajustée » dans le tableau des séances (à côté du statut). */
.ar-duration-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 900; white-space: nowrap; cursor: help; flex: 0 0 auto;
    color: #92400e; background: #FEF3C7; border: 1px solid #FDE68A;
}
.ar-duration-badge svg { width: 13px; height: 13px; color: #d97706; }
.ar-seance-detail-title {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 12px; font-size: 16px; font-weight: 900; color: #16233f; line-height: 1.3;
}
.ar-seance-detail-title svg { width: 18px; height: 18px; color: var(--ar-niv); flex: 0 0 auto; }
.ar-seance-detail-meta { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ar-seance-detail-meta li { display: flex; align-items: center; gap: 8px; color: #435071; font-weight: 700; font-size: 13.5px; }
.ar-seance-detail-meta svg { width: 15px; height: 15px; color: #7c8aa5; flex: 0 0 auto; }
.ar-seance-detail-meta a { color: var(--ar-niv); font-weight: 800; }

.ar-seance-detail-report {
    border: 1px solid #e6ebf5; border-radius: 14px;
    padding: 12px; background: #fafbff; margin-bottom: 14px;
}
.ar-seance-detail-report-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.ar-seance-detail-report-head > svg { width: 20px; height: 20px; color: var(--ar-niv); flex: 0 0 auto; margin-top: 1px; }
.ar-seance-detail-report-head strong { display: block; font-weight: 900; color: #16233f; font-size: 13.5px; }
.ar-seance-detail-report-head span { display: inline-block; margin-top: 3px; font-weight: 900; font-size: 12px; }
.ar-seance-detail-report-head span.is-submitted { color: #15803d; }
.ar-seance-detail-report-head span.is-pending { color: #c2410c; }
.ar-seance-detail-report-head span.is-upcoming { color: #64748b; }
.ar-seance-detail-report-head em { display: block; margin-top: 3px; font-style: normal; color: #64748b; font-size: 12px; font-weight: 600; }

/* Gérer la séance (menu repliable natif) */
.ar-seance-manage { margin-top: 14px; padding-top: 12px; border-top: 1px solid #ECEFF4; }
.ar-seance-manage > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 800; color: #435071; padding: 3px 0; }
.ar-seance-manage > summary::-webkit-details-marker { display: none; }
.ar-seance-manage > summary > span { display: inline-flex; align-items: center; gap: 7px; }
.ar-seance-manage > summary svg { width: 15px; height: 15px; color: #94a3b8; flex: 0 0 auto; }
.ar-seance-manage > summary:hover { color: var(--ar-niv, #005064); }
.ar-manage-chev { transition: transform .15s ease; }
.ar-seance-manage[open] .ar-manage-chev { transform: rotate(180deg); }
.ar-seance-manage-body { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* Séance verrouillée (feuille de temps soumise/approuvée) */
.ar-seance-locked { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px; border: 1px solid #FDE68A; border-radius: 12px; background: linear-gradient(180deg, #FFFDF5, #FFFBEB); }
.ar-seance-locked > svg { width: 18px; height: 18px; color: #B45309; flex: 0 0 auto; margin-top: 1px; }
.ar-seance-locked strong { display: block; font-size: 13px; font-weight: 800; color: #78350F; }
.ar-seance-locked span { display: block; margin-top: 2px; font-size: 12px; color: #92702a; line-height: 1.45; }

/* Actions rapides */
.ar-seance-detail-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #ECEFF4; }
.ar-seance-detail-actions .ar-detail-eyebrow { margin-bottom: 2px; }
.ar-seance-quick-form { margin: 0; }
.ar-seance-quick {
    display: flex; width: 100%; align-items: center; gap: 9px;
    padding: 10px 12px; border-radius: 11px;
    border: 1px solid #e6ebf5; background: #fff;
    color: #2d3a57; font-weight: 800; font-size: 13px; cursor: pointer;
    text-align: left;
}
.ar-seance-quick:hover { border-color: var(--ar-niv); background: var(--ar-niv-soft); }
.ar-seance-quick svg { width: 16px; height: 16px; color: var(--ar-niv); flex: 0 0 auto; }
.ar-seance-quick.is-danger { color: #b91c1c; }
.ar-seance-quick.is-danger svg { color: #dc2626; }
.ar-seance-quick.is-danger:hover { border-color: #f87171; background: #fef2f2; }
.ar-seance-quick.is-offert,
.ar-group-seances .ar-seance-quick.is-offert { color: #15803d; }
.ar-seance-quick.is-offert svg { color: #16a34a; }
.ar-seance-quick.is-offert:hover { border-color: #86efac; background: #f0fdf4; }

/* Bouton « Séance offerte » (barre d'outils) : contour et texte verts.
   Doit battre le style violet !important de .ar-group-seances .ar-btn.ar-kpi-btn-soft. */
.ar-btn-offert,
.ar-group-seances .ar-btn.ar-kpi-btn-soft.ar-btn-offert {
    color: #15803d !important;
    border-color: #86efac !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.035), inset 0 0 0 1px #DCFCE7 !important;
}
.ar-btn-offert svg,
.ar-group-seances .ar-btn.ar-kpi-btn-soft.ar-btn-offert svg { color: #16a34a !important; }
.ar-btn-offert:hover,
.ar-group-seances .ar-btn.ar-kpi-btn-soft.ar-btn-offert:hover {
    border-color: #4ade80 !important;
    background: #f0fdf4 !important;
    box-shadow: 0 10px 24px rgba(22,163,74,.10), inset 0 0 0 1px #BBF7D0 !important;
}

.ar-seance-report-btn { width: 100%; justify-content: center; margin-top: 0; }

.ar-mini-day.is-selected { outline: 2px solid var(--ar-niv); outline-offset: -2px; border-radius: 8px; font-weight: 900; }

@media (max-width: 900px) {
    .ar-seances-rail { position: static; }
    .ar-seances-layout { grid-template-columns: 1fr; }
}

/* ============================================================
   Séances — switcher Liste/Calendrier + calendrier complet (v16)
   ============================================================ */
.ar-seances-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: #f1f5f9; }
.ar-seances-switch a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 9px;
    color: #475569; font-weight: 800; font-size: 13px; text-decoration: none;
}
.ar-seances-switch a svg { width: 16px; height: 16px; }
.ar-seances-switch a.is-active { background: #fff; color: var(--ar-niv); box-shadow: 0 2px 8px rgba(16,35,75,.08); }

/* Calendrier complet (colonne gauche) */
.ar-seances-cal-panel {
    border: 1px solid #e6ebf5; border-radius: 18px; background: #fff;
    box-shadow: 0 10px 26px rgba(16,35,75,.05); overflow: hidden;
}
.ar-cal-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid #eef2f9;
}
.ar-cal-panel-head strong { font-size: 15px; font-weight: 900; color: #16233f; }
.ar-cal-panel-head a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 9px; border: 1px solid #e6ebf5; color: #435071;
}
.ar-cal-panel-head a:hover { border-color: var(--ar-niv); color: var(--ar-niv); background: var(--ar-niv-soft); }
.ar-cal-panel-head svg { width: 16px; height: 16px; }

.ar-cal-panel-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.ar-cal-dow {
    text-align: center; padding: 8px 0; font-size: 11px; font-weight: 900;
    text-transform: uppercase; letter-spacing: .03em; color: #94a3b8;
    border-bottom: 1px solid #eef2f9;
}
.ar-cal-cell {
    min-height: 92px; padding: 6px; border-right: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9;
    display: flex; flex-direction: column; gap: 4px;
}
.ar-cal-cell:nth-child(7n) { border-right: 0; }
.ar-cal-cell.is-out { background: #fafbfd; }
.ar-cal-daynum { font-size: 12px; font-weight: 800; color: #64748b; }
.ar-cal-cell.is-out .ar-cal-daynum { color: #cbd5e1; }
.ar-cal-cell.is-today .ar-cal-daynum {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; background: var(--ar-niv); color: #fff;
}
.ar-cal-ev {
    display: block; padding: 5px 7px; border-radius: 8px;
    background: var(--ar-niv-soft); border-left: 3px solid var(--ar-niv);
    text-decoration: none; position: relative;
}
.ar-cal-ev:hover { filter: brightness(.97); }
.ar-cal-ev.is-selected { outline: 2px solid var(--ar-niv); outline-offset: 1px; }
.ar-cal-ev .ar-time-dual { gap: 0; }
.ar-cal-ev .ar-time-dual b { display: inline-flex; font-size: 11.5px; font-weight: 900; color: #16233f; }
.ar-cal-ev .ar-time-dual b span { display: inline; font-size: 8px; color: #64748b; }
.ar-cal-ev .ar-time-dual i { font-size: 9px; }
.ar-cal-ev .ar-cal-ev-status { display: block; font-size: 10.5px; font-weight: 700; color: #64748b; }
.ar-cal-ev svg { position: absolute; top: 5px; right: 5px; width: 12px; height: 12px; color: #15803d; }
.ar-cal-ev.is-cancel { background: #fff1e8; border-left-color: #f97316; }
.ar-cal-ev.is-recovery { background: #f3ebff; border-left-color: #7c3aed; }
.ar-cal-ev.is-done { background: #f1f5f9; border-left-color: #94a3b8; }

/* État vide du panneau de détail */
.ar-seance-detail-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; text-align: center; color: #94a3b8; padding: 40px 20px;
}
.ar-seance-detail-empty svg { width: 34px; height: 34px; color: #cbd5e1; }
.ar-seance-detail-empty p { font-weight: 700; font-size: 13.5px; margin: 0; }

@media (max-width: 900px) {
    .ar-cal-cell { min-height: 70px; }
}

/* ============================================================
   Séances — ajustements v17 (compteurs, passé grisé, clic ligne, rattrapage)
   ============================================================ */
.ar-seances-toolbar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Compteurs de répartition */
.ar-seances-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-count {
    display: inline-flex; align-items: baseline; gap: 5px;
    padding: 7px 12px; border-radius: 999px;
    background: #fff; border: 1px solid #e6ebf5;
    font-size: 12.5px; font-weight: 700; color: #64748b;
}
.ar-count b { font-size: 14px; font-weight: 900; }
.ar-count.is-done b { color: #475569; }
.ar-count.is-upcoming b { color: #2563eb; }
.ar-count.is-rattr b { color: #7c3aed; }
.ar-count.is-total { background: var(--ar-niv-soft); border-color: transparent; color: var(--ar-niv); }
.ar-count.is-total b { color: var(--ar-niv); }

/* Ligne cliquable + séance passée grisée */
.ar-seances-row[data-select-url] { cursor: pointer; }
.ar-seances-row[data-select-url]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ar-niv, #005064) 28%, #fff);
    outline-offset: -3px;
    background: var(--ar-niv-soft);
}
.ar-seances-row.is-history { background: #f8fafc; }
.ar-seances-row.is-history:hover { background: #f1f5f9; }
.ar-seances-row.is-history .ar-list-date-chip,
.ar-seances-row.is-history .ar-seances-cell-time { opacity: .6; }
.ar-seances-row.is-history.is-selected { opacity: 1; background: var(--ar-niv-soft); }
.ar-seances-row.is-history.is-selected .ar-list-date-chip,
.ar-seances-row.is-history.is-selected .ar-seances-cell-time { opacity: 1; }


/* ============================================================
   Modales personnalisées (confirmation, rattrapage, remplacement) v18
   ============================================================ */
.ar-modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(16, 27, 52, .5);
    backdrop-filter: blur(2px);
    animation: ar-modal-fade .15s ease;
}
.ar-modal-overlay[hidden] { display: none; }
@keyframes ar-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.ar-modal {
    width: 100%; max-width: 420px;
    background: #fff; border-radius: 18px;
    box-shadow: 0 24px 60px rgba(16, 35, 75, .28);
    overflow: hidden;
    display: flex; flex-direction: column;
    max-height: calc(100vh - 40px);
    animation: ar-modal-pop .18s cubic-bezier(.2,.9,.3,1.2);
}
.ar-modal-form { overflow-y: auto; }
.ar-modal-sm { max-width: 380px; }
@keyframes ar-modal-pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.ar-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 16px 18px; border-bottom: 1px solid #eef2f9;
}
.ar-modal-head strong { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 900; color: #16233f; }
.ar-modal-head strong svg { width: 18px; height: 18px; color: var(--ar-niv, #005064); }
.ar-modal-head [data-ar-modal-close] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 9px; border: 0; background: #f1f5f9; color: #475569; cursor: pointer;
}
.ar-modal-head [data-ar-modal-close]:hover { background: #e2e8f0; }
.ar-modal-head svg { width: 16px; height: 16px; }

.ar-modal-form { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.ar-modal-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 800; font-size: 13px; color: #2d3a57; }
.ar-modal-form input[type="date"], .ar-modal-form input[type="time"], .ar-modal-form select {
    padding: 10px 12px; border-radius: 11px; border: 1px solid #d7deec; font-size: 14px; background: #fff;
    color: #26324a; font-family: inherit; width: 100%; box-sizing: border-box;
}
.ar-modal-form input[type="date"]:focus, .ar-modal-form input[type="time"]:focus, .ar-modal-form select:focus {
    outline: none; border-color: var(--ar-niv); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ar-niv) 16%, #fff);
}
.ar-modal-hint { margin: 0; font-size: 12.5px; color: #64748b; font-weight: 600; }

/* Corps de la confirmation */
.ar-modal-body { padding: 22px 20px 6px; text-align: center; }
.ar-modal-body strong { display: block; font-size: 16px; font-weight: 900; color: #16233f; margin-bottom: 6px; }
.ar-modal-body p { margin: 0; color: #64748b; font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.ar-modal-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%; margin-bottom: 12px;
    background: var(--ar-niv-soft, #eef9ff); color: var(--ar-niv, #005064);
}
.ar-modal-ico.is-danger { background: #fee2e2; color: #dc2626; }
.ar-modal-ico svg { width: 24px; height: 24px; }

.ar-modal-actions { display: flex; gap: 10px; padding: 14px 18px 18px; justify-content: flex-end; }
.ar-modal-form .ar-modal-actions { padding: 4px 0 0; }
.ar-modal-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 16px; border-radius: 11px; border: 0; cursor: pointer;
    font-size: 13px; font-weight: 800;
}
.ar-modal-btn svg { width: 15px; height: 15px; }
.ar-modal-btn-ghost { background: #f1f5f9; color: #475569; }
.ar-modal-btn-ghost:hover { background: #e2e8f0; }
.ar-modal-btn-primary { background: var(--ar-niv, #005064); color: #fff; }
.ar-modal-btn-primary:hover { filter: brightness(.95); }
.ar-modal-btn-danger { background: #dc2626; color: #fff; }
.ar-modal-btn-danger:hover { filter: brightness(.95); }
.ar-modal-empty {
    display: flex; gap: 8px; align-items: flex-start;
    margin: 0; padding: 12px; border-radius: 12px;
    background: #f8fafc; color: #64748b; font-size: 12.5px; font-weight: 600; line-height: 1.5;
}
.ar-modal-empty svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: #94a3b8; }

/* Croix de fermeture (glyphe fiable, sans dépendre de lucide) */
.ar-modal-x { font-size: 22px; line-height: 1; padding: 0; }

/* Autocomplete enseignant remplaçant */
.ar-ac { position: relative; }
.ar-ac-input {
    width: 100%; padding: 10px 12px; border-radius: 11px;
    border: 1px solid #d7deec; font-size: 14px; background: #fff;
}
.ar-ac-input:focus { outline: none; border-color: var(--ar-niv, #005064); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ar-niv, #005064) 18%, #fff); }
.ar-ac-list {
    margin: 6px 0 0; padding: 5px; list-style: none;
    max-height: 220px; overflow-y: auto;
    background: #fff; border: 1px solid #e6ebf5; border-radius: 12px;
}
.ar-ac-list[hidden] { display: none; }
.ar-ac-list li {
    padding: 9px 11px; border-radius: 9px; cursor: pointer;
    font-size: 13.5px; font-weight: 700; color: #2d3a57;
}
.ar-ac-list li:hover { background: var(--ar-niv-soft, #eef9ff); color: var(--ar-niv, #005064); }
.ar-ac-list li:focus-visible { outline: 2px solid var(--ar-niv, #005064); outline-offset: -2px; }

.ar-modal-status { margin: 0; font-size: 12.5px; font-weight: 700; color: #64748b; min-height: 0; }
.ar-modal-status:empty { display: none; }
.ar-modal-status.is-error { color: #dc2626; }

/* ============================================================
   Séances v19 — rapport (tag + icône), remplacement, bandeau redessiné
   ============================================================ */
/* Colonne rapport : tag non cliquable + icône d'action */
.ar-seances-cell-report { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ar-seances-cell-report .ar-list-report { flex: 0 0 auto; }
.ar-report-act {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
    color: #0369a1; background: #e0f2fe;
}
.ar-report-act:hover { filter: brightness(.96); }
.ar-report-act svg { width: 15px; height: 15px; }
.ar-report-act.is-add { color: #b91c1c; background: #fee2e2; }

/* Statut + badge remplacement */
.ar-seances-cell-statut { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
/* Remplacement d'enseignant → indigo (couleur dédiée, ≠ statuts/rapport) */
.ar-repl-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: #e0e7ff; color: #4338ca; cursor: help; flex: 0 0 auto;
}
.ar-repl-badge svg { width: 13px; height: 13px; }

/* Ligne remplacement dans le panneau (indigo) */
.ar-detail-replacement { color: #4338ca !important; }
.ar-detail-replacement svg { color: #4f46e5 !important; }
.ar-detail-replacement strong { color: #3730a3; font-weight: 900; }

/* Bandeau rapports en attente redessiné */
.ar-seances-pending-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ar-seances-pending-top > strong { color: #92400e; font-weight: 900; font-size: 14px; margin: 0; }
.ar-seances-pending-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: 999px;
    background: #fff; border: 1px solid #fadfb4; color: #b45309;
    font-weight: 800; font-size: 12.5px;
}
.ar-seances-pending-toggle:hover { border-color: #f59e0b; background: #fff7ec; }
.ar-seances-pending-toggle.is-active { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.ar-seances-pending-toggle svg { width: 14px; height: 14px; }

.ar-seances-pending-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ar-seances-pending-list li {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
    padding: 9px 12px; border-radius: 11px; background: #fff; border: 1px solid #fbe6c8;
}
.ar-pending-date { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; color: #7c4a03; }
.ar-pending-date svg { width: 15px; height: 15px; color: #d97706; flex: 0 0 auto; }
.ar-pending-time { font-size: 12px; font-weight: 800; color: #b45309; white-space: nowrap; }
.ar-pending-add {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 9px;
    background: #b45309; color: #fff; font-weight: 800; font-size: 12.5px; white-space: nowrap;
}
.ar-pending-add:hover { filter: brightness(1.05); }
.ar-pending-add svg { width: 14px; height: 14px; }
.ar-seances-pending-more { display: inline-block; margin-top: 8px; color: #a16207; font-weight: 800; font-size: 12.5px; }
.ar-seances-pending-more:hover { text-decoration: underline; }

@media (max-width: 620px) {
    .ar-seances-pending-list li { grid-template-columns: 1fr; gap: 6px; }
    .ar-pending-add { justify-content: center; }
}

/* ============================================================
   Séances v20 — semaine, rattrapage manuel, rapport in-page
   ============================================================ */
/* En-tête de semaine dans la liste */
.ar-seances-week-head {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 16px; position: sticky; top: 0; z-index: 2;
    background: #f1f5f9; color: #475569;
    font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .02em;
    border-bottom: 1px solid #e2e8f0;
}
.ar-seances-week-head svg { width: 14px; height: 14px; color: #94a3b8; }

/* Badge rattrapage planifié manuellement → rose/magenta (couleur dédiée) */
.ar-rattr-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: #fce7f3; color: #db2777; cursor: help; flex: 0 0 auto;
}
.ar-rattr-badge svg { width: 13px; height: 13px; }

/* Modale large (rapport) */
.ar-modal-lg { max-width: 640px; }
.ar-modal-md { max-width: 520px; }

/* Feuille de présence (modale) */
.ar-presence-form { padding: 18px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.ar-presence-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ar-presence-quick .ar-detail-eyebrow { margin-inline-end: 4px; }
.ar-presence-bulk {
    border: 1px solid var(--ar-border, #e2e8f0); background: #fff; color: #475569;
    border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.ar-presence-bulk:hover { background: var(--ar-niv-soft, #eef9ff); border-color: var(--ar-niv, #005064); color: var(--ar-niv, #005064); }
.ar-presence-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ar-presence-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 10px; border: 1px solid var(--ar-border, #eef1f4); border-radius: 10px; background: #fafbfc;
}
.ar-presence-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #1f2937; }
.ar-presence-name svg { width: 15px; height: 15px; color: #94a3b8; flex: 0 0 auto; }
.ar-presence-select {
    border: 1px solid var(--ar-border, #cbd5e1); border-radius: 8px; padding: 5px 10px;
    font-size: 13px; font-weight: 600; background: #fff; color: #334155; min-width: 108px;
}

/* Bloc « Feuille de présence » (détail séance) : accent teal, distinct du niveau */
.ar-seance-detail-presence { background: #f2fbfa; border-color: #cdeeeb; }
.ar-seance-detail-presence .ar-seance-detail-report-head > svg { color: #0d9488; }
/* Boutons du détail de séance : doux (tinté), pas de gros aplat plein */
.ar-seance-detail-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; margin-top: 2px; padding: 9px 14px;
    border: 1px solid transparent; border-radius: 10px;
    font-size: 12.5px; font-weight: 800; cursor: pointer; text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ar-seance-detail-cta svg { width: 15px; height: 15px; }

/* Rapport : tinté à la couleur du niveau (soft) */
.ar-seance-report-btn { background: var(--ar-niv-soft, #eef2ff); color: var(--ar-niv, #4338ca); border-color: color-mix(in srgb, var(--ar-niv, #4338ca) 22%, transparent); }
.ar-seance-report-btn:hover { background: color-mix(in srgb, var(--ar-niv, #4338ca) 14%, #fff); border-color: var(--ar-niv, #4338ca); }

/* Présence : tinté teal (soft) */
.ar-seance-presence-btn { background: #eafaf7; color: #0f766e; border-color: #b7e6df; }
.ar-seance-presence-btn:hover { background: #d7f3ee; border-color: #0d9488; }
.ar-seance-presence-btn svg { color: #0d9488; }

/* Liste par élève dans le bloc présence */
.ar-presence-mini { list-style: none; margin: 2px 0 12px; padding: 8px 0 0; border-top: 1px dashed #cdeeeb; display: flex; flex-direction: column; gap: 6px; }
.ar-presence-mini-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.ar-presence-mini-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #334155; min-width: 0; }
.ar-presence-mini-name svg { width: 14px; height: 14px; color: #0d9488; flex: 0 0 auto; }
.ar-presence-mini-todo { font-size: 11.5px; font-weight: 700; color: #94a3b8; font-style: italic; }

/* Pastille d'assiduité par élève (panneau Élèves, staff) */
.ar-student-att {
    display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
    padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1.5;
}
.ar-student-att svg { width: 12px; height: 12px; }
.ar-student-att.is-empty { color: #94a3b8; background: #f1f5f9; padding: 2px 10px; }

/* Badge « présence à saisir » (liste des séances, staff) */
.ar-presence-missing-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px;
    background: #fef3c7; color: #b45309; flex: 0 0 auto;
}
.ar-presence-missing-badge svg { width: 13px; height: 13px; }

/* Marqueurs d'événement calendrier (rapport / présence) */
.ar-cal-ev-marks { display: inline-flex; align-items: center; gap: 3px; }
.ar-cal-ev-presence-missing { color: #d97706; }

/* Progression : ligne par élève (objectifs + assiduité) */
.ar-progression-list { list-style: none; margin: 0; padding: 0; }
.ar-progression-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ar-line, #eef2f7); }
.ar-progression-row:last-child { border-bottom: 0; }
.ar-progression-main { flex: 1; min-width: 0; }
.ar-progression-main strong { display: block; color: #16233f; font-weight: 800; }
.ar-progression-main .ar-group-bar { margin-top: 7px; }
.ar-progression-obj { display: block; margin-top: 5px; color: #64748b; font-size: 12px; font-weight: 600; }
.ar-progression-attendance { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; text-align: right; }
.ar-att-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.ar-att-chip svg { width: 14px; height: 14px; }
.ar-att-chip.is-empty { color: #94a3b8; background: #f1f5f9; font-size: 12px; }
/* État provisoire : tant que toutes les présences ne sont pas saisies */
.ar-att-chip.is-provisional { background: transparent !important; border: 1px dashed currentColor; opacity: .9; }
.ar-student-att.is-provisional { background: transparent !important; border: 1px dashed currentColor; }
.ar-att-total { color: #94a3b8; font-weight: 700; }
.ar-att-prov-note { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 2px 8px; border-radius: 999px; background: #fff7ed; color: #b45309; font-size: 10.5px; font-weight: 800; }
.ar-att-prov-note svg { width: 12px; height: 12px; flex: 0 0 auto; }
.ar-att-provisional-tag { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: 6px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #b45309; vertical-align: middle; }
.ar-att-provisional-tag svg { width: 12px; height: 12px; }
.ar-att-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #a3adbf; }
.ar-att-breakdown { color: #64748b; font-size: 11px; font-weight: 700; }

/* Pastille de présence (liste des séances, vue parent) */
.ar-list-presence {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.4;
}
.ar-list-presence svg { width: 13px; height: 13px; }
.ar-list-presence.is-present { background: #dcfce7; color: #15803d; }
.ar-list-presence.is-late    { background: #fef3c7; color: #b45309; }
.ar-list-presence.is-absent  { background: #fee2e2; color: #b91c1c; }
.ar-list-presence.is-excused { background: #e2e8f0; color: #475569; }
.ar-report-pane[hidden] { display: none; }
.ar-report-pane { padding: 18px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }

/* Vue lecture du rapport */
.ar-report-content {
    border: 1px solid #eef2f9; border-radius: 12px; padding: 16px 18px;
    background: #fafbff; color: #26324a; line-height: 1.65; font-size: 14.5px;
    max-height: 52vh; overflow-y: auto;
}
.ar-report-content h1, .ar-report-content h2, .ar-report-content h3 { margin: 0 0 8px; color: #16233f; font-weight: 900; }
.ar-report-content p { margin: 0 0 10px; }
.ar-report-content ul, .ar-report-content ol { margin: 0 0 10px; padding-left: 20px; }
.ar-report-meta { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: #94a3b8; font-size: 12px; font-weight: 700; }
.ar-report-meta svg { width: 13px; height: 13px; }

/* Éditeur riche */
.ar-report-toolbar { display: flex; gap: 6px; }
.ar-report-toolbar button {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 9px; border-radius: 9px;
    border: 1px solid #e6ebf5; background: #fff; color: #2d3a57; cursor: pointer;
    font-size: 14px; font-weight: 900;
}
.ar-report-toolbar button:hover { border-color: var(--ar-niv); background: var(--ar-niv-soft); color: var(--ar-niv); }
.ar-report-toolbar button svg { width: 16px; height: 16px; }
.ar-report-editor {
    min-height: 200px; max-height: 48vh; overflow-y: auto;
    border: 1px solid #d7deec; border-radius: 12px; padding: 14px 16px;
    font-size: 14.5px; line-height: 1.65; color: #26324a; background: #fff;
}
.ar-report-editor:focus { outline: none; border-color: var(--ar-niv); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ar-niv) 16%, #fff); }
.ar-report-editor:empty::before { content: attr(data-placeholder); color: #a3adbf; }
.ar-report-editor ul, .ar-report-editor ol { padding-left: 20px; }
/* Rapport rédigé en arabe : texte aligné à droite (RTL). */
.ar-report-editor[dir="rtl"], .ar-report-content[dir="rtl"] { text-align: right; }
.ar-report-editor[dir="rtl"] ul, .ar-report-editor[dir="rtl"] ol,
.ar-report-content[dir="rtl"] ul, .ar-report-content[dir="rtl"] ol { padding-left: 0; padding-right: 20px; }
.ar-report-hint { margin: 0; font-size: 12px; color: #94a3b8; font-weight: 600; }

/* ============================================================
   Séances v21 — design responsive (tablette + mobile)
   ============================================================ */

/* ---- Tablette large : rail plus étroit ---- */
@media (max-width: 1024px) {
    .ar-seances-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; }
    .ar-cal-cell { min-height: 82px; }
}

/* ---- Tablette / petit portable : une seule colonne ---- */
@media (max-width: 900px) {
    .ar-seances-layout { grid-template-columns: 1fr; gap: 14px; }
    .ar-seances-rail { position: static; top: auto; }

    /* Barre d'outils : titre puis actions en pleine largeur */
    .ar-seances-toolbar { align-items: flex-start; }
    .ar-seances-toolbar-actions { width: 100%; justify-content: space-between; }
    .ar-seances-switch { flex: 1 1 auto; }
    .ar-seances-switch a { flex: 1 1 0; justify-content: center; }

    /* Filtres empilés */
    .ar-seances-filters { flex-direction: column; align-items: stretch; }
    .ar-seances-period, .ar-seances-statut-filter { justify-content: space-between; }
    .ar-seances-filters .ar-calendar-filter-control { flex: 1 1 auto; }
    .ar-seances-legend { margin-left: 0; }
}

/* ---- Mobile ---- */
@media (max-width: 560px) {
    .ar-group-seances { --ar-gutter: 12px; }

    /* Barre d'outils compacte */
    .ar-seances-toolbar h3 { font-size: 17px; }
    .ar-seances-toolbar p { font-size: 12.5px; }
    .ar-seances-toolbar-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .ar-seances-toolbar-actions > .ar-kpi-btn { width: 100%; justify-content: center; }

    /* Compteurs : pastilles fluides */
    .ar-seances-counts { gap: 6px; }
    .ar-count { flex: 1 1 calc(50% - 6px); justify-content: center; padding: 8px 6px; font-size: 12px; }

    /* Bandeau rapports en attente */
    .ar-seances-pending { padding: 12px; }
    .ar-seances-pending-top { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ar-seances-pending-toggle { width: 100%; justify-content: center; }

    /* Période : navigation lisible */
    .ar-seances-period { flex-wrap: wrap; }
    .ar-seances-period-nav { flex: 1 1 100%; justify-content: space-between; }
    .ar-seances-period-nav strong { min-width: 0; }

    /* Liste : carte à deux lignes */
    .ar-seances-rows { max-height: none; } /* le scroll de page prend le relais */
    .ar-seances-row {
        grid-template-columns: 1fr auto auto;
        grid-template-areas:
            "date   statut  actions"
            "time   report  actions";
        align-items: center;
        gap: 4px 10px;
        padding: 12px 14px;
    }
    .ar-seances-cell-date   { grid-area: date; }
    .ar-seances-cell-time   { grid-area: time; }
    .ar-seances-cell-statut { grid-area: statut; justify-self: end; }
    .ar-seances-cell-report { grid-area: report; justify-self: end; }
    .ar-seances-cell-actions { grid-area: actions; align-self: center; }
    .ar-list-date-chip { font-size: 12.5px; }

    /* Calendrier : compact, on ne garde que l'heure dans les événements */
    .ar-cal-cell { min-height: 58px; padding: 4px; }
    .ar-cal-dow { padding: 6px 0; font-size: 10px; }
    .ar-cal-ev { padding: 3px 4px; }
    .ar-cal-ev .ar-cal-ev-status, .ar-cal-ev svg { display: none; }
    .ar-cal-ev .ar-time-dual b { font-size: 10px; }
    .ar-cal-ev .ar-time-dual i { display: none; }

    /* Rail détail : titres un peu plus petits */
    .ar-seance-detail-title { font-size: 15px; }

    /* Modales quasi plein écran */
    .ar-modal-overlay { padding: 10px; }
    .ar-modal, .ar-modal-lg, .ar-modal-sm { max-width: 100%; }
    .ar-modal-actions { flex-wrap: wrap; }
    .ar-modal-actions .ar-modal-btn { flex: 1 1 auto; justify-content: center; }

    /* Semaine : lisible */
    .ar-seances-week-head { padding: 8px 14px; font-size: 11px; }
}

@media (max-width: 420px) {
    .ar-seances-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "date   actions"
            "time   actions"
            "statut report";
        gap: 7px 10px;
    }
    .ar-seances-cell-statut,
    .ar-seances-cell-report { justify-self: start; }
    .ar-seances-cell-actions { justify-self: end; }
    .ar-seances-counts { display: grid; grid-template-columns: 1fr 1fr; }
    .ar-count { min-width: 0; }
    .ar-cal-panel-grid { overflow-x: auto; grid-template-columns: repeat(7, minmax(44px, 1fr)); }
    .ar-modal-head { align-items: flex-start; }
    .ar-modal-head > strong { white-space: normal; line-height: 1.35; }
    .ar-report-nav { order: 3; width: 100%; justify-content: center; }
}

/* Navigation entre rapports (en-tête du modal) */
.ar-modal-head > strong { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-report-nav { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.ar-report-nav a, .ar-report-nav .is-disabled {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px;
    border: 1px solid #e6ebf5; background: #fff; color: #435071;
}
.ar-report-nav a:hover { border-color: var(--ar-niv); color: var(--ar-niv); background: var(--ar-niv-soft); }
.ar-report-nav .is-disabled { opacity: .4; cursor: default; }
.ar-report-nav svg { width: 16px; height: 16px; }
.ar-report-count { font-size: 12.5px; font-weight: 900; color: #64748b; min-width: 44px; text-align: center; }

/* État vide du rapport (aucun rapport encore rédigé) */
.ar-report-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 8px; padding: 28px 20px;
    border: 1px dashed #d7deec; border-radius: 14px; background: #fafbff;
}
.ar-report-empty-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--ar-niv-soft); color: var(--ar-niv);
}
.ar-report-empty-ico svg { width: 24px; height: 24px; }
.ar-report-empty strong { font-size: 15px; font-weight: 900; color: #16233f; }
.ar-report-empty p { margin: 0; font-size: 13px; color: #64748b; font-weight: 600; max-width: 340px; }

/* ============================================================
   Design system v22 — harmonisation des composants partagés
   (radius, ombres douces, hauteurs 44px, micro-interactions 180ms)
   ============================================================ */

/* ---- Cartes : 20px, bordure fine, ombre douce ---- */
.ar-portal-card,
.ar-teacher-rail-card,
.ar-group-card,
.ar-portal-group-card,
.ar-portal-thread-card,
.ar-teacher-next-card,
.ar-portal-learning-card,
.ar-portal-teacher-calendar-card,
.ar-seances-list-panel,
.ar-seances-cal-panel {
    border-radius: var(--ar-radius-card);
    border-color: var(--ar-border);
    box-shadow: var(--ar-shadow-sm);
    transition: box-shadow var(--ar-ease), transform var(--ar-ease);
}

/* Cartes cliquables : élévation discrète au survol */
.ar-group-card:hover,
.ar-portal-thread-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--ar-shadow);
}

/* ---- Boutons : 44px, radius 14, transition ---- */
.ar-portal-btn,
.ar-modal-btn,
.ar-kpi-btn {
    min-height: var(--ar-control-h);
    border-radius: var(--ar-radius-btn);
    transition: background var(--ar-ease), color var(--ar-ease), border-color var(--ar-ease), box-shadow var(--ar-ease), transform var(--ar-ease), filter var(--ar-ease);
}
.ar-portal-btn:hover,
.ar-modal-btn:hover,
.ar-kpi-btn:hover { transform: translateY(-1px); }
.ar-portal-btn:active,
.ar-modal-btn:active,
.ar-kpi-btn:active { transform: translateY(0); }

/* ---- Inputs / selects / recherche : 44px, radius 14 ---- */
.ar-calendar-filter-control select,
.ar-calendar-filter-control input,
.ar-modal-form input[type="date"],
.ar-modal-form input[type="time"],
.ar-modal-form select,
.ar-ac-input {
    min-height: var(--ar-control-h);
    border-radius: var(--ar-radius-input);
    border-color: var(--ar-border);
    transition: border-color var(--ar-ease), box-shadow var(--ar-ease);
}

/* ---- Modales : 24px ---- */
.ar-modal { border-radius: var(--ar-radius-modal); }

/* ---- Sidebar : 24px, nav aérée, active state élégant ---- */
.ar-portal-sidebar { border-radius: var(--ar-radius-sidebar); }
.ar-portal-app .ar-portal-sidebar { border-radius: 0; } /* pleine hauteur : pas d'arrondi */
/* ---- Badges / pastilles : cohérents ---- */
.ar-list-status,
.ar-niveau-tag,
.ar-count {
    transition: background var(--ar-ease), color var(--ar-ease);
}

/* ---- Lignes de liste : hover très léger ---- */
.ar-seances-row,
.ar-portal-teacher-week-item {
    transition: background var(--ar-ease);
}

/* ---- Focus visible uniforme ---- */
.ar-portal-btn:focus-visible,
.ar-kpi-btn:focus-visible,
.ar-calendar-filter-control select:focus-visible,
.ar-calendar-filter-control input:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--ar-primary) 55%, #fff);
    outline-offset: 2px;
}

/* ---- Mouvement réduit : respecter la préférence système ---- */
@media (prefers-reduced-motion: reduce) {
    .ar-portal-body * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   Composant générique PageHeader (titre → description → actions)
   ============================================================ */
.ar-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.ar-page-header-text { min-width: 0; }
.ar-page-header-text h1,
.ar-page-header-text h2,
.ar-page-header-text h3 {
    margin: 0;
    color: var(--ar-ink);
    line-height: 1.25;
}
.ar-page-header-text h2 { font-size: 30px; font-weight: 700; }
.ar-page-header-text h3 { font-size: 22px; font-weight: 700; }
.ar-page-header-text p {
    margin: 4px 0 0;
    color: var(--ar-muted);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
}
.ar-page-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
@media (max-width: 700px) {
    .ar-page-header { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   Composant générique Button
   ============================================================ */
.ar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--ar-control-h);
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: var(--ar-radius-btn);
    color: #1E293B;
    font: inherit;
    font-size: 14px;
    font-weight: 760;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--ar-ease), background var(--ar-ease), border-color var(--ar-ease), box-shadow var(--ar-ease), color var(--ar-ease), filter var(--ar-ease);
}
.ar-btn:hover {
    transform: translateY(-1px);
}
.ar-btn:active {
    transform: translateY(0);
}
.ar-btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}
.ar-btn-primary {
    background: linear-gradient(180deg, var(--ar-purple), #5B21B6);
    color: #fff;
    box-shadow: 0 10px 24px rgba(109,40,217,.14);
}
.ar-btn-primary:hover {
    filter: brightness(1.03);
    box-shadow: 0 14px 30px rgba(109,40,217,.18);
}
.ar-btn-soft {
    border-color: #E8EDF5;
    background: #fff;
    color: var(--ar-purple);
    box-shadow: 0 8px 20px rgba(15,23,42,.035);
}
.ar-btn-soft:hover {
    background: #F8F6FF;
    border-color: #DDD6FE;
}
.ar-btn-ghost {
    border-color: transparent;
    background: #F8FAFC;
    color: #475569;
}
.ar-btn-ghost:hover {
    background: #EEF2F7;
}
.ar-btn-danger {
    background: #DC2626;
    color: #fff;
}
.ar-btn-sm {
    min-height: 38px;
    padding: 8px 13px;
    border-radius: 12px;
    font-size: 13px;
}

/* ============================================================
   Composant générique SegmentedControl
   ============================================================ */
.ar-segmented-control {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--ar-line);
    border-radius: 16px;
    background: #fff;
}
.ar-segmented-control a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 12px;
    color: #475569;
    font-size: 13px;
    font-weight: 760;
    line-height: 1;
    text-decoration: none;
    transition: background var(--ar-ease), color var(--ar-ease), box-shadow var(--ar-ease), transform var(--ar-ease);
}
.ar-segmented-control a:hover {
    background: #FAFBFF;
}
.ar-segmented-control a.active,
.ar-segmented-control a.is-active {
    background: #F5F3FF;
    color: #6D28D9;
    box-shadow: 0 2px 8px rgba(16,35,75,.08);
}
.ar-segmented-control svg {
    width: 16px;
    height: 16px;
}

/* ============================================================
   Composant générique StatCard (KPI homogènes, tons pastel)
   ============================================================ */
.ar-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}
.ar-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--ar-border);
    border-radius: var(--ar-radius-card);
    background: var(--ar-card);
    box-shadow: var(--ar-shadow-sm);
    transition: box-shadow var(--ar-ease), transform var(--ar-ease);
}
.ar-stat-card:hover { transform: translateY(-1px); box-shadow: var(--ar-shadow); }
.ar-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--ar-radius-input);
}
.ar-stat-icon svg { width: 20px; height: 20px; }
.ar-stat-icon.ar-tone-blue   { background: #e0f2fe; color: #0369a1; border-color: transparent; }
.ar-stat-icon.ar-tone-green  { background: #dcfce7; color: #15803d; border-color: transparent; }
.ar-stat-icon.ar-tone-orange { background: #ffedd5; color: #c2410c; border-color: transparent; }
.ar-stat-icon.ar-tone-purple { background: #ede9fe; color: #6d28d9; border-color: transparent; }
.ar-stat-icon.ar-tone-rose   { background: #fce7f3; color: #be185d; border-color: transparent; }
.ar-stat-body { min-width: 0; display: flex; flex-direction: column; }
.ar-stat-body strong { font-size: 26px; font-weight: 700; color: var(--ar-ink); line-height: 1.15; }
.ar-stat-body span { font-size: 13px; font-weight: 500; color: var(--ar-muted); }
.ar-stat-body em { font-style: normal; font-size: 12px; font-weight: 600; color: #94a3b8; margin-top: 2px; }

@media (max-width: 1100px) { .ar-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .ar-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .ar-stat-card { padding: 16px; gap: 12px; } .ar-stat-body strong { font-size: 22px; } }

/* ============================================================
   Calendrier — cartes événements premium (ombre douce, hover)
   ============================================================ */
.ar-portal-teacher-event {
    border-radius: var(--ar-radius-input);
    box-shadow: var(--ar-shadow-sm);
    transition: box-shadow var(--ar-ease), transform var(--ar-ease);
}
.ar-portal-teacher-event:hover {
    z-index: 3;
    transform: translateY(-1px);
    box-shadow: var(--ar-shadow);
}
.ar-portal-teacher-event-main span {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ar-event-color) 14%, #fff);
    color: color-mix(in srgb, var(--ar-event-color) 80%, #000);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* StatCard — fond très léger assorti à l'icône (comme la maquette Dashboard) */
.ar-stat-card.ar-stat-tone-blue   { background: #f4fafe; border-color: #dcedfb; }
.ar-stat-card.ar-stat-tone-green  { background: #f4fdf7; border-color: #d9f3e3; }
.ar-stat-card.ar-stat-tone-orange { background: #fffaf2; border-color: #f9e8cf; }
.ar-stat-card.ar-stat-tone-purple { background: #f9f7fe; border-color: #e8e1fa; }
.ar-stat-card.ar-stat-tone-rose   { background: #fef6fa; border-color: #f8dcea; }

/* L'icône ressort un peu plus sur le fond teinté */
.ar-stat-card.ar-stat-tone-blue   .ar-stat-icon { background: #dbeafe; }
.ar-stat-card.ar-stat-tone-green  .ar-stat-icon { background: #d1fae5; }
.ar-stat-card.ar-stat-tone-orange .ar-stat-icon { background: #fde8cc; }
.ar-stat-card.ar-stat-tone-purple .ar-stat-icon { background: #e6ddfb; }
.ar-stat-card.ar-stat-tone-rose   .ar-stat-icon { background: #fbdceb; }

/* ============================================================
   Séances — liste en timeline visuelle (v23)
   ============================================================ */
/* Rail vertical + point coloré par statut */
.ar-seances-cell-date {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    align-self: stretch;
}
.ar-tl-rail {
    position: relative;
    width: 14px;
    align-self: stretch;
    flex: 0 0 auto;
}
.ar-tl-rail::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -14px;
    bottom: -14px;
    width: 2px;
    transform: translateX(-50%);
    background: #e8edf5;
}
.ar-seances-rows > .ar-seances-row:first-of-type .ar-tl-rail::before { top: 50%; }
.ar-seances-rows > .ar-seances-row:last-of-type .ar-tl-rail::before { bottom: 50%; }
.ar-tl-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #e8edf5;
    background: #94a3b8;
    z-index: 1;
}
.ar-tl-dot.is-confirmed { background: #22c55e; }
.ar-tl-dot.is-done      { background: #94a3b8; }
.ar-tl-dot.is-recovery  { background: #7c3aed; }
.ar-tl-dot.is-cancel    { background: #f97316; }
.ar-tl-dot.is-free      { background: #0d9488; }
.ar-seances-row.is-selected .ar-tl-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ar-niv) 35%, #fff); }

/* Bloc date proéminent */
.ar-tl-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 6px 8px;
    border-radius: var(--ar-radius-input);
    background: #f8fafc;
    border: 1px solid var(--ar-border);
    text-decoration: none;
    line-height: 1.1;
    transition: border-color var(--ar-ease), background var(--ar-ease);
}
.ar-tl-date:hover { border-color: var(--ar-niv); background: var(--ar-niv-soft); }
.ar-tl-date em { font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; }
.ar-tl-date strong { font-size: 20px; font-weight: 700; color: var(--ar-ink); }
.ar-tl-date span { font-size: 11px; font-weight: 600; color: var(--ar-muted); }
.ar-seances-row.is-selected .ar-tl-date { border-color: var(--ar-niv); background: #fff; }
.ar-seances-row.is-history .ar-tl-date { opacity: .68; }
.ar-seances-row.is-history.is-selected .ar-tl-date { opacity: 1; }

/* Grille de ligne adaptée au bloc date */
.ar-seances-list-head,
.ar-seances-row {
    grid-template-columns: 118px minmax(80px, 1fr) 132px 168px 52px;
}
.ar-seances-row { padding-top: 10px; padding-bottom: 10px; }

/* En-tête de semaine : n'interrompt pas visuellement le rail */
.ar-seances-week-head { position: relative; z-index: 2; }

/* Mobile : timeline simplifiée (pas de rail, date compacte) */
@media (max-width: 560px) {
    .ar-tl-rail { display: none; }
    .ar-tl-date { flex-direction: row; gap: 6px; min-width: 0; padding: 6px 10px; }
    .ar-tl-date strong { font-size: 15px; }
}

/* ============================================================
   Séances timeline — équilibrage v24 (colonnes, sélection, en-têtes)
   ============================================================ */
/* Colonnes regroupées à gauche, statut/rapport rapprochés, respiration à droite */
.ar-seances-list-head,
.ar-seances-row {
    grid-template-columns: 118px 120px minmax(140px, 200px) minmax(150px, 200px) minmax(24px, 1fr) 52px;
}
.ar-seances-cell-actions { grid-column: 6; }

/* En-têtes alignés sur leurs colonnes */
.ar-seances-list-head span:nth-child(1) { padding-left: 26px; } /* après le rail */
.ar-seances-list-head::after { content: ""; } /* 6e piste (actions) */

/* Sélection élégante : fond blanc, anneau + accent discret (plus d'aplat rose) */
.ar-seances-row.is-selected,
.ar-seances-row.is-selected:hover,
.ar-seances-row.is-history.is-selected {
    background: #fff;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ar-niv) 45%, #fff), inset 3px 0 0 var(--ar-niv);
}

@media (max-width: 900px) {
    /* Mobile/tablette : on garde la disposition carte définie précédemment */
    .ar-seances-row {
        grid-template-columns: 1fr auto auto;
    }
    .ar-seances-cell-actions { grid-column: auto; }
}

/* ============================================================
   Dashboard — hero card « Prochaine séance » (v25, façon maquette)
   ============================================================ */
.ar-teacher-next-card {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: var(--ar-radius-card);
    padding: 24px;
    color: #fff;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(236, 72, 153, .28), transparent 55%),
        linear-gradient(140deg, var(--ar-primary) 0%, #003c50 60%, #002b3a 100%);
    box-shadow: var(--ar-shadow);
}
.ar-teacher-next-card:hover { transform: none; box-shadow: var(--ar-shadow); }

/* Libellé + badge */
.ar-teacher-next-card > div:first-child > span {
    display: inline-block;
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.ar-teacher-next-card .ar-teacher-next-badge {
    display: inline-flex;
    margin-left: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

/* Grand horaire TN/CA en blanc */
.ar-teacher-next-card .ar-time-dual-large { display: block; margin: 10px 0 2px; }
.ar-teacher-next-card .ar-time-dual-large b { color: #fff; font-size: 44px; font-weight: 700; line-height: 1.05; }
.ar-teacher-next-card .ar-time-dual-large b span { color: rgba(255, 255, 255, .6); font-size: 16px; }
.ar-teacher-next-card .ar-time-dual-large i { color: rgba(255, 255, 255, .62); font-size: 15px; }

.ar-teacher-next-card > div:first-child p {
    margin: 6px 0 0;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}
.ar-teacher-next-card > div:first-child small {
    color: rgba(255, 255, 255, .68);
    font-size: 13px;
    font-weight: 500;
}
.ar-teacher-next-card > div:first-child strong { color: #fff; font-size: 28px; }

/* CTA : Rejoindre en blanc plein, Ouvrir en outline translucide */
.ar-teacher-next-card .ar-teacher-quick-actions { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.ar-teacher-next-card .ar-portal-btn-primary {
    background: #fff;
    color: var(--ar-primary);
    border: 0;
}
.ar-teacher-next-card .ar-portal-btn-primary:hover { background: #f1f5f9; color: var(--ar-primary); }
.ar-teacher-next-card .ar-portal-btn-soft {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
}
.ar-teacher-next-card .ar-portal-btn-soft:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* ============================================================
   Correctifs v26 — hero compacte + grille KPI fluide
   ============================================================ */
/* KPI : grille fluide, ne déborde jamais (remplace les 5 colonnes fixes) */
.ar-stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Hero : contenu regroupé en haut, CTA juste après — plus de grand vide */
.ar-teacher-next-card {
    align-content: start;
    gap: 4px;
    min-height: 0;
}
.ar-teacher-next-card .ar-teacher-quick-actions { margin-top: 24px; }

/* La zone basse (si la carte s'étire face au panneau voisin) est habillée
   d'un motif décoratif discret au lieu d'un aplat vide. */
.ar-teacher-next-card::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(236, 72, 153, .20), transparent 65%);
    pointer-events: none;
}
.ar-teacher-next-card::before {
    content: "";
    position: absolute;
    right: 40px;
    bottom: 36px;
    width: 96px;
    height: 96px;
    border-radius: 28px;
    background: rgba(255, 255, 255, .05);
    transform: rotate(12deg);
    pointer-events: none;
}

/* ============================================================
   Table premium — vue liste du calendrier (v27, façon Stripe)
   ============================================================ */
/* Lignes généreuses (64px), hover très léger */
.ar-teacher-list-row td {
    padding: 18px 12px;
    font-size: 13.5px;
    border-top: 1px solid var(--ar-line);
}
.ar-teacher-list-row { transition: background var(--ar-ease); }
.ar-teacher-list-row:hover td { background: #fbfcfe; }

/* En-tête collant, typo label */
.ar-teacher-list-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px;
    background: #fff;
    color: var(--ar-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    box-shadow: 0 1px 0 var(--ar-border);
    border-bottom: 0;
}

/* Séparateurs de jour : bandeau discret collant sous l'en-tête */
.ar-teacher-list-day-row th {
    position: sticky;
    top: 41px;
    z-index: 1;
    padding: 10px 12px;
    background: #f8fafc;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Cellules : hiérarchie nette */
.ar-teacher-list-row td strong { font-weight: 700; font-size: 14px; }
.ar-teacher-list-row td small { font-weight: 500; }

/* Actions discrètes : révélées au survol de la ligne */
@media (hover: hover) {
    .ar-teacher-list-actions .ar-portal-btn { opacity: .55; transition: opacity var(--ar-ease); }
    .ar-teacher-list-row:hover .ar-teacher-list-actions .ar-portal-btn { opacity: 1; }
}

/* Scroll interne pour activer l'en-tête collant (type Stripe) */
.ar-teacher-calendar-list-scroll {
    max-height: 90vh;
    overscroll-behavior: contain;
    border: 1px solid var(--ar-border);
    border-radius: var(--ar-radius-input);
}
@media (max-width: 900px) {
    .ar-teacher-calendar-list-scroll { max-height: none; border: 0; }
}

/* ============================================================
   Dashboard — aperçu de la semaine façon maquette (v28)
   ============================================================ */
/* Pastilles colorées par séance (couleur du niveau) */
.ar-teacher-week-dots { display: flex; gap: 5px; }
.ar-teacher-week-dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* Compteur discret */
.ar-teacher-week-day header span {
    font-size: 11px;
    font-weight: 600;
    color: var(--ar-muted);
    white-space: nowrap;
}

/* Jour courant : encadré net à la couleur primaire (comme la maquette) */
.ar-teacher-week-day.is-today {
    background: #fff;
    border-color: transparent;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ar-primary) 55%, #fff), var(--ar-shadow-sm);
}
.ar-teacher-week-day.is-today header strong { color: var(--ar-primary); }

/* Cartes séance dans la journée : plus douces */
.ar-teacher-week-session {
    border-radius: 10px;
    transition: background var(--ar-ease), transform var(--ar-ease);
}
.ar-teacher-week-session:hover { transform: translateY(-1px); }

/* Aperçu semaine v28.1 — colonnes à hauteur naturelle, sans grands vides */
.ar-teacher-week-strip { align-items: start; }
.ar-teacher-week-day { min-height: 0; }

/* Aperçu semaine v28.2 — pilule numérique + jour libre soigné */
.ar-teacher-week-day header span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--ar-niv-soft, #eef2ff);
    background: #eef2ff;
    color: #4f46e5;
    font-size: 12px;
    font-weight: 700;
}
.ar-teacher-week-free {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 6px 10px;
    color: #94a3b8;
    text-align: center;
}
.ar-teacher-week-free svg { width: 18px; height: 18px; color: #cbd5e1; }
.ar-teacher-week-free small { font-size: 12px; font-weight: 600; }

/* ============================================================
   Onglets premium du groupe (v29) — identiques sur toutes les sections
   ============================================================ */
.ar-group-ov-tabs {
    border-color: var(--ar-border);
    border-radius: var(--ar-radius-input);
    box-shadow: var(--ar-shadow-sm);
}
.ar-group-ov-tabs a {
    min-height: 40px;
    border-radius: 10px;
    font-weight: 700;
    transition: background var(--ar-ease), color var(--ar-ease), box-shadow var(--ar-ease);
}
.ar-group-ov-tabs a.active {
    background: var(--ar-niv-soft);
    color: var(--ar-niv);
    box-shadow: inset 0 -2px 0 var(--ar-niv);
}
.ar-group-ov-tabs a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--ar-niv) 55%, #fff);
    outline-offset: 2px;
}

/* En-tête des pages de section (header groupe + titre de section) */
.ar-group-section-head { display: grid; gap: 18px; margin-bottom: 4px; }
.ar-group-section-head .ar-page-header { margin-top: 6px; }

/* ============================================================
   Dashboard v30 — équilibre de la rangée, pieds de panneau, zéros
   ============================================================ */
/* 1. Hauteurs naturelles : chaque carte prend la hauteur de son contenu */
.ar-teacher-command-grid { align-items: start; }

/* 2. Lien de pied de panneau (« Voir toutes mes séances → ») */
.ar-teacher-panel-footlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    color: var(--ar-primary);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: gap var(--ar-ease);
}
.ar-teacher-panel-footlink:hover { gap: 9px; }
.ar-teacher-panel-footlink svg { width: 14px; height: 14px; }

/* 5. KPI à zéro : présence discrète */
.ar-stat-card.is-zero { opacity: .62; }
.ar-stat-card.is-zero:hover { opacity: 1; }

/* 4. Burger du topbar : discret, sans carte flottante */
.ar-portal-app .ar-portal-menu-toggle {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ar-muted);
}
.ar-portal-app .ar-portal-menu-toggle:hover {
    background: #eef2f7;
    color: var(--ar-ink);
}

/* ============================================================
   Mes groupes v31 — homogénéisation avec le design system
   ============================================================ */
/* Carte : padding 24 (grille 8px) */
.ar-group-card { padding: 24px; }

/* Bouton principal : 44px, radius 14, graisse 700, micro-interaction */
.ar-group-see {
    min-height: var(--ar-control-h);
    border-radius: var(--ar-radius-btn);
    font-weight: 700;
    transition: filter var(--ar-ease), transform var(--ar-ease), box-shadow var(--ar-ease);
}
.ar-group-see:hover { filter: brightness(.94); transform: translateY(-1px); }
.ar-group-see:active { transform: translateY(0); }

/* Liens rapides : tertiaires, doux */
.ar-group-quicklinks a {
    border-radius: 12px;
    border-color: var(--ar-border);
    font-weight: 600;
    min-height: 36px;
    transition: border-color var(--ar-ease), color var(--ar-ease), background var(--ar-ease);
}
.ar-group-quicklinks a:hover {
    border-color: var(--ar-niv);
    color: var(--ar-niv);
    background: var(--ar-niv-soft);
}

/* Typo apaisée dans la carte */
.ar-group-card h3 { font-weight: 700; }
.ar-group-status { font-weight: 700; }
.ar-group-metric-head strong { font-weight: 700; }

/* ============================================================
   Dashboard enseignant — polish premium (v32)
   ============================================================ */

/* 5. Fond général : dégradé à peine perceptible */
.ar-portal-role-teacher.ar-portal-view-accueil .ar-portal-main {
    background: linear-gradient(180deg, #FAFBFF 0%, #F8FAFC 100%);
}

/* 3. Rythme : respiration verticale homogène (grille 8px) */
.ar-teacher-dashboard { gap: 32px; }
.ar-teacher-command-grid,
.ar-teacher-lower-grid { gap: 24px; }

/* 4. Typographie */
.ar-teacher-greeting-line h2 {
    font-size: 40px;
    font-weight: 760;
    letter-spacing: 0;
    color: var(--ar-ink);
    line-height: 1.08;
}
.ar-teacher-hero > .ar-teacher-welcome > p {
    color: var(--ar-muted);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
}
.ar-teacher-panel-head h3 {
    font-size: 18px;
    font-weight: 760;
    letter-spacing: 0;
    color: var(--ar-ink);
    line-height: 1.25;
}
.ar-teacher-panel small,
.ar-teacher-session-row span:last-child,
.ar-teacher-action-row small {
    font-weight: 500;
    color: #94a3b8;
}

/* 2 & 5. Hiérarchie des surfaces :
   — hero « Prochaine séance » = pièce maîtresse (radius 24, ombre présente)
   — panneaux secondaires = discrets (radius 18, ombre quasi nulle)
   — KPI = encore plus effacés */
.ar-teacher-next-card {
    border-radius: 24px;
    box-shadow: 0 16px 34px rgba(0, 42, 56, .16);
}
.ar-teacher-panel {
    border-color: #EEF2F7;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .025);
}
.ar-teacher-panel:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .055);
}
.ar-stat-card {
    padding: 16px 18px;
    border-color: #EEF2F7;
    border-radius: 20px;
    box-shadow: none;
}
.ar-stat-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, .045); }
.ar-stat-body strong { font-size: 23px; font-weight: 720; }

/* 6. Focus visible sur les CTA de la hero (fond sombre) */
.ar-teacher-next-card .ar-portal-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .85);
    outline-offset: 2px;
}

/* ============================================================
   Dashboard enseignant — finition visuelle premium (v33)
   ============================================================ */

.ar-portal-role-teacher.ar-portal-view-accueil .ar-portal-content {
    gap: 0;
}

.ar-portal-role-teacher.ar-portal-view-accueil .ar-portal-topbar {
    border-color: #EEF2F7;
}

.ar-teacher-hero {
    min-height: 150px;
    gap: 32px;
}

.ar-teacher-welcome {
    gap: 10px;
}

.ar-teacher-day-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(249, 115, 22, .10);
}

.ar-teacher-ai-summary {
    max-width: 720px;
    margin-top: 2px;
    padding: 12px 14px;
    border-color: #EEF2F7;
    border-radius: 20px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .025);
}

.ar-teacher-ai-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
}

.ar-teacher-ai-summary strong {
    color: #312e81;
    font-size: 12.5px;
    font-weight: 760;
}

.ar-teacher-ai-summary div span {
    color: #64748b;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
}

.ar-teacher-illustration {
    opacity: .9;
    transform: scale(.94);
    transform-origin: right center;
}

.ar-stat-grid {
    gap: 16px;
}

.ar-stat-card {
    gap: 14px;
    min-height: 88px;
    background: rgba(255, 255, 255, .72);
}

.ar-stat-card.ar-stat-tone-blue,
.ar-stat-card.ar-stat-tone-green,
.ar-stat-card.ar-stat-tone-orange,
.ar-stat-card.ar-stat-tone-purple,
.ar-stat-card.ar-stat-tone-rose {
    background: rgba(255, 255, 255, .76);
}

.ar-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
}

.ar-stat-icon svg {
    width: 19px;
    height: 19px;
    stroke-width: 2.2;
}

.ar-stat-body {
    gap: 2px;
}

.ar-stat-body span {
    color: #64748b;
    font-size: 12.5px;
    font-weight: 520;
    line-height: 1.35;
}

.ar-teacher-next-card {
    min-height: 300px;
    padding: 28px;
    align-content: start;
    gap: 18px;
    background:
        radial-gradient(110% 120% at 100% 0%, rgba(14, 165, 233, .18), transparent 54%),
        linear-gradient(140deg, var(--ar-primary) 0%, #004456 58%, #002f3e 100%);
}

.ar-teacher-next-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 38px rgba(0, 42, 56, .18);
}

.ar-teacher-next-card > div:first-child > span:first-child {
    max-width: calc(100% - 132px);
    color: rgba(255, 255, 255, .74);
    font-size: 12px;
    font-weight: 680;
    letter-spacing: .04em;
}

.ar-teacher-next-card .ar-teacher-next-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    margin-left: 0;
    padding: 6px 11px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .16);
    font-size: 12px;
    font-weight: 720;
    line-height: 1;
}

.ar-teacher-next-card .ar-time-dual-large {
    margin: 18px 0 6px;
}

.ar-teacher-next-card .ar-time-dual-large b {
    font-size: 46px;
    font-weight: 760;
}

.ar-teacher-next-card .ar-time-dual-large i {
    font-weight: 560;
}

.ar-teacher-next-card > div:first-child p {
    margin-top: 8px;
    font-size: 17px;
    font-weight: 720;
    line-height: 1.35;
}

.ar-teacher-next-card > div:first-child small {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, .66);
    line-height: 1.45;
}

.ar-teacher-next-card .ar-teacher-quick-actions {
    margin-top: 18px;
    gap: 10px;
}

.ar-portal-role-teacher.ar-portal-view-accueil .ar-portal-btn {
    min-height: 42px;
    padding: 10px 15px;
    border-radius: 14px;
    gap: 8px;
    font-weight: 720;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.ar-portal-role-teacher.ar-portal-view-accueil .ar-portal-btn:hover {
    transform: translateY(-1px);
}

.ar-portal-role-teacher.ar-portal-view-accueil .ar-portal-btn svg {
    width: 17px;
    height: 17px;
}

.ar-teacher-panel {
    gap: 16px;
    padding: 20px;
    background: rgba(255, 255, 255, .82);
}

.ar-teacher-panel-head {
    min-height: 28px;
    align-items: center;
    gap: 12px;
}

.ar-teacher-panel-head a {
    color: var(--ar-primary);
    font-size: 12.5px;
    font-weight: 700;
}

.ar-teacher-session-list,
.ar-teacher-action-list,
.ar-teacher-message-list {
    gap: 0;
}

.ar-teacher-session-row,
.ar-teacher-action-row,
.ar-teacher-message-list a {
    border-top-color: #EEF2F7;
}

.ar-teacher-session-row {
    min-height: 76px;
    padding: 12px 0;
}

.ar-teacher-session-row strong,
.ar-teacher-action-row strong,
.ar-teacher-message-list strong {
    color: #1e293b;
    font-weight: 720;
}

.ar-teacher-session-row a,
.ar-teacher-disabled-action {
    min-height: 38px;
    border-radius: 13px;
    font-weight: 720;
}

.ar-teacher-action-row {
    min-height: 64px;
    padding: 12px 0;
}

.ar-teacher-action-row > span {
    width: 30px;
    height: 30px;
    border-radius: 12px;
}

.ar-teacher-action-row mark {
    width: 22px;
    height: 22px;
    font-size: 11px;
}

.ar-teacher-week-panel {
    padding: 20px;
}

.ar-teacher-week-strip {
    gap: 12px;
}

.ar-teacher-week-day {
    gap: 10px;
    padding: 14px;
    border-color: #EEF2F7;
    border-radius: 18px;
    background: #fff;
    box-shadow: none;
}

.ar-teacher-week-day.is-today {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ar-primary) 45%, #fff), 0 6px 16px rgba(15, 23, 42, .045);
}

.ar-teacher-week-day header strong {
    color: #1e293b;
    font-size: 13px;
    font-weight: 760;
}

.ar-teacher-week-dots {
    gap: 4px;
}

.ar-teacher-week-session {
    gap: 4px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: #F8FAFC;
}

.ar-teacher-week-session:hover {
    border-color: #EEF2F7;
    background: #fff;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .04);
}

.ar-teacher-week-session span {
    color: #475569;
    font-weight: 620;
}

.ar-teacher-week-free {
    padding: 16px 6px 12px;
}

.ar-teacher-tip {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #EEF2F7;
    border-radius: 18px;
    background: #fff;
    color: #475569;
    font-weight: 500;
}

.ar-teacher-tip > span {
    width: 36px;
    height: 36px;
    border-radius: 13px;
}

.ar-teacher-tip strong {
    color: #1e293b;
    font-weight: 760;
}

.ar-teacher-tip p {
    color: #64748b;
    font-weight: 500;
    line-height: 1.5;
}

.ar-teacher-group-mini-grid {
    gap: 12px;
}

.ar-teacher-group-mini-grid a {
    gap: 12px;
    padding: 14px;
    border-color: #EEF2F7;
    border-radius: 18px;
    background: #fff;
    box-shadow: none;
}

.ar-teacher-group-mini-grid a:hover {
    border-color: color-mix(in srgb, var(--ar-group-tone) 30%, #EEF2F7);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
}

.ar-teacher-group-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: var(--ar-group-soft);
    box-shadow: none;
}

.ar-teacher-group-mini-grid a > div {
    gap: 4px;
}

.ar-teacher-group-mini-grid strong {
    font-weight: 760;
}

.ar-teacher-group-mini-grid span {
    color: #64748b;
    font-weight: 520;
    line-height: 1.4;
}

.ar-teacher-group-mini-grid small {
    font-weight: 700;
}

.ar-teacher-group-mini-grid em {
    height: 5px;
    background: #F1F5F9;
}

.ar-teacher-group-mini-grid b {
    opacity: .72;
}

.ar-teacher-empty-line {
    color: #94a3b8;
    font-weight: 520;
    line-height: 1.5;
}

@media (max-width: 800px) {
    .ar-teacher-dashboard { gap: 20px; }
    .ar-teacher-greeting-line h2 { font-size: 30px; }
    .ar-teacher-next-card { padding: 22px; }
    .ar-teacher-next-card .ar-time-dual-large b { font-size: 38px; }
    .ar-teacher-panel { padding: 18px; }
}

/* ============================================================
   Calendrier v33 — filtres non tronqués, chips zéro, cartes étroites
   ============================================================ */
/* 1. Filtres : place pour le libellé complet + ellipse propre */
.ar-teacher-calendar-filters .ar-calendar-filter-control {
    flex: 0 1 235px;
    min-width: 200px;
}
.ar-calendar-filter-control select {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 28px;
}

/* 2. Chips du résumé à zéro : estompés (même règle que les KPI) */
.ar-week-summary-item.is-zero { opacity: .5; }
.ar-week-summary-item.is-zero:hover { opacity: 1; }

/* 3. Cartes événement étroites (couloirs parallèles) : dégradation propre
   — on sacrifie CA, pied et fin d'heure avant d'écraser l'heure TN */
.ar-teacher-calendar-event { container-type: inline-size; }
@container (max-width: 120px) {
    .ar-teacher-calendar-event .ar-event-ca,
    .ar-teacher-calendar-event footer { display: none; }
}
@container (max-width: 78px) {
    .ar-teacher-calendar-event .ar-event-title { display: none; }
    .ar-teacher-calendar-event time { font-size: 10.5px; }
}

/* Calendrier v34 — filtres extensibles + séparateurs de jour apaisés */
.ar-teacher-calendar-filters .ar-calendar-filter-control {
    flex: 1 1 220px;
    max-width: 320px;
}
.ar-teacher-list-day-row th,
.ar-teacher-list-day-row th * {
    color: var(--ar-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ============================================================
   Calendrier enseignant — polish premium SaaS (v35)
   ============================================================ */

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-portal-main {
    background: linear-gradient(180deg, #FAFBFF 0%, #F8FAFC 100%);
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-portal-content {
    gap: 0;
}

.ar-teacher-calendar-page {
    gap: 20px;
}

/* 1. Header compact, titre dominant */
.ar-teacher-calendar-headline {
    gap: 14px;
    align-items: center;
    margin-bottom: -4px;
}

.ar-teacher-calendar-headline h2 {
    margin: 0 0 3px;
    color: var(--ar-ink);
    font-size: 40px;
    font-weight: 760;
    line-height: 1.08;
    letter-spacing: 0;
}

.ar-teacher-calendar-headline p {
    color: #64748b;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.5;
}

.ar-teacher-calendar-view-tabs {
    gap: 4px;
    padding: 4px;
    border-color: #EEF2F7;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .04);
}

.ar-teacher-calendar-view-tabs a {
    min-height: 38px;
    padding: 8px 13px;
    border-radius: 12px;
    color: #64748b;
    font-size: 13px;
    font-weight: 680;
}

.ar-teacher-calendar-view-tabs a.active {
    background: #F4FAFE;
    color: var(--ar-primary);
}

/* 2. Toolbar et filtres plus légers */
.ar-teacher-calendar-filters {
    gap: 8px;
    padding: 10px;
    border-color: #EEF2F7;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .04);
}

.ar-calendar-today-btn,
.ar-calendar-week-nav,
.ar-calendar-filter-control,
.ar-calendar-filter-reset {
    min-height: 42px;
    border-color: #EEF2F7;
    border-radius: 14px;
    box-shadow: none;
}

.ar-calendar-today-btn {
    padding: 8px 13px;
    color: #475569;
    font-size: 13px;
    font-weight: 680;
}

.ar-calendar-week-nav {
    padding: 4px;
}

.ar-calendar-week-nav a {
    width: 32px;
    height: 32px;
    border-radius: 11px;
}

.ar-calendar-week-nav strong {
    padding: 0 9px;
    color: #1e293b;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
}

.ar-teacher-calendar-filters .ar-calendar-filter-control {
    flex: 1 1 190px;
    min-width: 172px;
    max-width: 276px;
    padding: 0 11px;
}

.ar-calendar-filter-control select {
    font-size: 13px;
    font-weight: 620;
}

.ar-calendar-filter-control > svg,
.ar-calendar-today-btn svg {
    width: 16px;
    height: 16px;
    color: #64748b;
    stroke-width: 2.1;
}

.ar-calendar-filter-reset {
    padding: 8px 12px;
    color: #64748b;
    font-size: 13px;
    font-weight: 650;
}

/* 3. Résumé semaine : KPI égaux, plus compacts */
.ar-week-summary-bar {
    gap: 12px;
    padding: 10px;
    border-color: #EEF2F7;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .04);
}

.ar-week-summary-title {
    color: #64748b;
    font-size: 12.5px;
    font-weight: 620;
    letter-spacing: 0;
}

.ar-week-summary-title svg {
    color: #94a3b8;
}

.ar-week-summary-items {
    gap: 8px;
}

.ar-week-summary-item {
    min-height: 64px;
    justify-content: center;
    gap: 2px;
    flex: 1 1 124px;
    padding: 9px 12px;
    border: 1px solid #EEF2F7;
    border-left-width: 3px;
    border-radius: 16px;
    background: #fff;
}

.ar-week-summary-item strong {
    font-size: 20px;
    font-weight: 720;
    color: #1e293b;
}

.ar-week-summary-item span {
    color: #64748b;
    font-size: 12px;
    font-weight: 520;
}

.ar-week-summary-item.is-alert {
    background: #fff;
}

.ar-week-summary-item.is-alert strong {
    color: #b91c1c;
}

.ar-week-summary-item.is-alert span {
    color: #64748b;
}

/* 4. Rail droit : une carte compacte qui soutient la grille */
.ar-teacher-calendar-layout.ar-mode-calendar {
    grid-template-columns: minmax(0, 1fr) 264px;
    gap: 18px;
}

.ar-teacher-calendar-rail {
    gap: 0;
    top: 82px;
}

.ar-teacher-rail-card {
    padding: 14px;
    border-color: #EEF2F7;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .04);
}

.ar-teacher-mini-cal header {
    margin-bottom: 8px;
}

.ar-teacher-mini-cal header strong {
    color: #1e293b;
    font-size: 13.5px;
    font-weight: 720;
}

.ar-teacher-mini-cal header a {
    width: 30px;
    height: 30px;
    border-radius: 10px;
}

.ar-teacher-mini-cal-grid {
    gap: 3px;
}

.ar-mini-dow {
    padding: 3px 0;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
}

.ar-mini-day {
    border-radius: 10px;
    color: #475569;
    font-size: 12px;
    font-weight: 650;
}

.ar-mini-day.is-week {
    background: #F4FAFE;
}

.ar-mini-day.is-today {
    background: var(--ar-primary);
    color: #fff;
}

.ar-teacher-rail-legend {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #EEF2F7;
}

.ar-teacher-rail-legend h3 {
    margin: 0 0 10px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.ar-teacher-status-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 540;
}

.ar-teacher-status-legend i {
    width: 8px;
    height: 8px;
}

/* 5. Grille calendrier : plus calme, lignes fines, jour courant doux */
.ar-teacher-calendar-board,
.ar-teacher-calendar-list-panel,
.ar-teacher-calendar-tip {
    border-color: #EEF2F7;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .04);
}

.ar-teacher-calendar-board {
    background: #fff;
}

.ar-teacher-calendar-grid-head,
.ar-teacher-calendar-grid-body {
    grid-template-columns: 64px repeat(7, minmax(0, 1fr));
}

.ar-teacher-calendar-grid-head {
    padding-top: 8px;
    border-bottom: 1px solid #EEF2F7;
}

.ar-teacher-calendar-grid-head > span {
    min-height: 60px;
}

.ar-teacher-calendar-grid-head strong {
    min-height: 60px;
    gap: 4px;
    color: #475569;
    font-size: 13px;
    font-weight: 620;
}

.ar-teacher-calendar-grid-head strong span {
    font-weight: 620;
}

.ar-teacher-calendar-grid-head strong b {
    width: 34px;
    height: 34px;
    color: #1e293b;
    font-size: 17px;
    font-weight: 760;
}

.ar-teacher-calendar-grid-head strong.is-today {
    background: #F4FAFE;
    color: var(--ar-primary);
}

.ar-teacher-calendar-grid-head strong.is-today b {
    background: var(--ar-primary);
    box-shadow: none;
}

.ar-teacher-calendar-times {
    border-right-color: #EEF2F7;
}

.ar-teacher-calendar-times span {
    padding: 10px 9px;
    border-top-color: #EEF2F7;
}

.ar-teacher-calendar-times span b {
    color: #475569;
    font-size: 11.5px;
    font-weight: 680;
}

.ar-teacher-calendar-times span b sup {
    color: #94a3b8;
    font-size: 7px;
    font-weight: 700;
}

.ar-teacher-calendar-times span i {
    color: #94a3b8;
    font-size: 9px;
    font-weight: 560;
}

.ar-teacher-calendar-day {
    border-right-color: #EEF2F7;
}

.ar-teacher-calendar-day.is-today {
    background: #F4FAFE;
    box-shadow: inset 0 0 0 1px rgba(0, 80, 100, .06);
}

.ar-teacher-calendar-hour {
    border-top-color: #EEF2F7;
}

.ar-teacher-now-line-global {
    left: 64px;
    border-top-width: 1px;
    border-top-color: #ef4444;
}

.ar-now-label {
    left: -54px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
}

/* 6. Séances : moins de saturation, accent gauche uniquement */
.ar-teacher-calendar-event {
    padding: 10px 11px;
    gap: 3px;
    border: 0;
    border-left: 4px solid var(--ar-event-color);
    border-radius: 16px;
    background: color-mix(in srgb, var(--ar-event-color) 9%, #fff);
    box-shadow: none;
}

.ar-teacher-calendar-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .04);
}

.ar-teacher-calendar-event time {
    color: #1e293b;
    font-size: 11.5px;
    font-weight: 720;
}

.ar-teacher-calendar-event time small {
    color: #64748b;
    font-size: 8px;
    font-weight: 650;
}

.ar-event-ca {
    color: #64748b;
    font-size: 10px;
    font-weight: 520;
}

.ar-event-title,
.ar-teacher-calendar-event strong {
    color: color-mix(in srgb, var(--ar-event-color) 78%, #1e293b);
    font-size: 12px;
    font-weight: 760;
}

.ar-event-niveau,
.ar-teacher-calendar-event .ar-event-group,
.ar-teacher-calendar-event footer .ar-event-group,
.ar-event-metrics,
.ar-event-count {
    color: #64748b;
    font-size: 10.5px;
    font-weight: 560;
}

.ar-event-metrics .ar-event-dot {
    opacity: .8;
}

.ar-event-pop {
    border: 1px solid #EEF2F7;
    border-left: 4px solid var(--ar-event-color);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}

/* 8-10. List view + tip : mêmes surfaces calmes */
.ar-teacher-list-toolbar {
    margin-bottom: 10px;
}

.ar-teacher-list-toolbar h3 {
    color: #1e293b;
    font-size: 16px;
    font-weight: 720;
}

.ar-teacher-export-btn,
.ar-list-action-btn,
.ar-teacher-page-nav a,
.ar-teacher-per-page select {
    border-color: #EEF2F7;
    border-radius: 14px;
    box-shadow: none;
}

.ar-teacher-list-table thead th {
    border-bottom-color: #EEF2F7 !important;
    color: #94a3b8;
    font-weight: 650;
    letter-spacing: 0;
}

.ar-teacher-list-row td {
    border-bottom-color: #EEF2F7 !important;
}

.ar-teacher-list-row:hover td {
    background: #FAFBFF;
}

.ar-list-status,
.ar-list-report,
.ar-niveau-tag {
    border-radius: 999px;
    font-weight: 680;
}

.ar-teacher-calendar-tip {
    padding: 16px 18px;
    border-radius: 20px;
}

.ar-teacher-calendar-tip > span {
    width: 40px;
    height: 40px;
    background: #F4FAFE;
    color: var(--ar-primary);
}

.ar-teacher-calendar-tip strong {
    color: #1e293b;
    font-size: 15px;
    font-weight: 720;
}

.ar-teacher-calendar-tip p {
    color: #64748b;
    font-weight: 500;
    line-height: 1.5;
}

.ar-teacher-calendar-tip a {
    min-height: 42px;
    border-color: #EEF2F7;
    border-radius: 14px;
    color: var(--ar-primary);
    font-weight: 680;
}

@media (max-width: 1240px) {
    .ar-teacher-calendar-layout.ar-mode-calendar {
        grid-template-columns: 1fr;
    }

    .ar-teacher-calendar-rail {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .ar-teacher-calendar-page { gap: 16px; }
    .ar-teacher-calendar-headline h2 { font-size: 30px; }
    .ar-teacher-calendar-filters { padding: 8px; }
    .ar-week-summary-bar { padding: 10px; }
    .ar-week-summary-item { min-height: 60px; }
    .ar-teacher-calendar-grid-head,
    .ar-teacher-calendar-grid-body {
        grid-template-columns: 64px repeat(7, minmax(96px, 1fr));
    }
}

/* ============================================================
   Calendrier enseignant — vue liste premium compacte (v36)
   ============================================================ */

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-teacher-calendar-view-tabs {
    border-color: #EEF2F7;
    border-radius: 16px;
    background: rgba(255, 255, 255, .82);
    box-shadow: none;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-teacher-calendar-view-tabs a {
    min-height: 40px;
    border-radius: 12px;
    color: #64748B;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-teacher-calendar-view-tabs a:hover {
    background: #FAFBFF;
    color: var(--ar-ink);
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-teacher-calendar-view-tabs a.active {
    background: #F4F0FF;
    color: #6D28D9;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-teacher-calendar-filters {
    padding: 8px;
    gap: 8px;
    border-color: #EEF2F7;
    box-shadow: none;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-today-btn,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-week-nav,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-filter-control,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-filter-reset {
    min-height: 42px;
    height: 42px;
    border-color: #EEF2F7;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-filter-control {
    padding: 0 10px;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-filter-control select,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-today-btn,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-week-nav strong {
    font-size: 13px;
    font-weight: 600;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-filter-control > svg,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-today-btn svg,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-week-nav svg {
    width: 16px;
    height: 16px;
    color: #64748B;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-bar {
    align-items: stretch;
    gap: 8px;
    padding: 8px;
    border-color: #EEF2F7;
    box-shadow: none;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-items {
    gap: 8px;
    width: 100%;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-item {
    min-height: 66px;
    padding: 9px 12px;
    border: 1px solid #EEF2F7;
    border-left-width: 3px;
    border-radius: 16px;
    background: #fff;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-item strong {
    font-size: 20px;
    font-weight: 700;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-item span {
    font-size: 12px;
    font-weight: 500;
    color: #64748B;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-calendar-list-panel {
    padding: 18px;
    border-color: #EEF2F7;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .04);
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-toolbar {
    margin-bottom: 12px;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-toolbar h3 {
    color: #334155;
    font-size: 16px;
    font-weight: 650;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table thead th {
    padding: 12px 14px;
    border-bottom: 1px solid #EEF2F7 !important;
    color: #64748B;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-day-row th,
.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-day-row th * {
    padding: 18px 14px 10px;
    color: #334155;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
    background: #fff !important;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-day-row th {
    border-bottom: 1px solid #EEF2F7 !important;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-row td {
    height: 76px;
    padding: 14px;
    border-bottom: 1px solid #EEF2F7 !important;
    color: #334155;
    font-size: 13px;
    vertical-align: middle;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-row:hover td {
    background: #FAFBFF !important;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-row td:nth-child(2) > strong {
    color: #1E293B;
    font-size: 15.5px;
    font-weight: 650;
    line-height: 1.3;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-niveau-tag {
    margin-top: 5px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 650;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-list-heure {
    gap: 10px;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-list-cal-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-list-heure-text {
    gap: 2px;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-list-heure-text strong.ar-list-tn {
    color: #1E293B;
    font-size: 14px;
    font-weight: 700;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-list-heure-text strong.ar-list-tn small {
    color: #94A3B8;
    font-size: 9px;
    font-weight: 650;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-list-ca {
    color: #64748B;
    font-size: 11px;
    font-weight: 500;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-list-dur {
    color: #64748B;
    font-size: 10.5px;
    font-weight: 600;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-list-count,
.ar-teacher-calendar-layout.ar-mode-list .ar-list-teacher {
    color: #64748B;
    font-size: 13px;
    font-weight: 500;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-list-teacher i {
    width: 28px;
    height: 28px;
    box-shadow: none;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-list-status,
.ar-teacher-calendar-layout.ar-mode-list .ar-list-report {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-list-report.is-submitted {
    color: #15803D;
    background: #DCFCE7;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-list-report.is-pending {
    color: #C2410C;
    background: #FFEDD5;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-list-report-none {
    color: #CBD5E1;
    font-weight: 600;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-actions {
    display: table-cell;
    text-align: right;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-actions-wrap {
    gap: 8px;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-list-action-btn {
    width: 40px;
    height: 40px;
    border-color: #EEF2F7;
    border-radius: 14px;
    color: #64748B;
    background: #fff;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-list-action-btn:hover,
.ar-teacher-calendar-layout.ar-mode-list .ar-list-action-btn:focus-visible {
    border-color: #DDE6F2;
    background: #FAFBFF;
    color: var(--ar-primary);
    transform: translateY(-1px);
    outline: none;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-list-action-btn svg {
    width: 17px;
    height: 17px;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-pagination {
    border-top-color: #EEF2F7;
    color: #64748B;
    font-size: 13px;
    font-weight: 500;
}

@media (max-width: 760px) {
    .ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table tr.ar-teacher-list-row {
        border-color: #EEF2F7;
        border-radius: 18px;
        box-shadow: none;
    }

    .ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-row td {
        height: auto;
        padding: 0;
    }
}

/* Calendrier liste — résumé en badges compacts */
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-bar {
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-items {
    width: auto;
    gap: 8px;
    flex: 0 1 auto;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-item {
    min-height: 0;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #EEF2F7;
    border-radius: 999px;
    background: #fff;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-item strong {
    color: #1E293B;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-item span {
    color: #64748B;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-item.is-confirmed { border-left: 3px solid #22C55E; }
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-item.is-done { border-left: 3px solid #94A3B8; }
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-item.is-recovery { border-left: 3px solid #7C3AED; }
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-item.is-cancel { border-left: 3px solid #F97316; }

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-item.is-alert {
    border-color: #FED7AA;
    border-left: 3px solid #F97316;
    background: #FFF7ED;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-item.is-alert strong {
    color: #C2410C;
}

@media (max-width: 720px) {
    .ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-items {
        display: flex;
        flex-wrap: wrap;
    }
}

/* Calendrier — touches violet ArabiLang */
.ar-portal-role-teacher.ar-portal-view-calendrier {
    --ar-calendar-accent: #6D28D9;
    --ar-calendar-accent-soft: #F4F0FF;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-teacher-calendar-view-tabs a.active {
    background: var(--ar-calendar-accent-soft);
    color: var(--ar-calendar-accent);
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-filter-control > svg,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-today-btn svg,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-week-nav svg {
    color: var(--ar-calendar-accent);
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-week-nav strong,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-teacher-list-day-row th,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-teacher-list-day-row th * {
    color: var(--ar-calendar-accent);
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-teacher-calendar-grid-head strong.is-today,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-mini-day.is-week {
    background: var(--ar-calendar-accent-soft);
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-teacher-calendar-grid-head strong.is-today,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-mini-day.is-week {
    color: var(--ar-calendar-accent);
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-teacher-calendar-grid-head strong.is-today b,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-mini-day.is-today {
    background: var(--ar-calendar-accent);
    color: #fff;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-teacher-calendar-tip > span {
    background: var(--ar-calendar-accent-soft);
    color: var(--ar-calendar-accent);
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-teacher-calendar-tip a,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-list-action-btn:hover,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-list-action-btn:focus-visible {
    color: var(--ar-calendar-accent);
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-teacher-calendar-tip a:hover {
    border-color: #E9D5FF;
    background: var(--ar-calendar-accent-soft);
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-item.is-recovery {
    border-left-color: var(--ar-calendar-accent);
}

/* Calendrier liste — final polish 9.7 */
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-teacher-calendar-filters {
    padding: 7px;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-today-btn,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-week-nav,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-filter-control,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-filter-reset {
    min-height: 40px;
    height: 40px;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-filter-control {
    flex-basis: 164px;
    min-width: 142px;
    max-width: 230px;
    gap: 7px;
    padding: 0 9px;
}

.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-filter-control select {
    font-size: 13px;
    font-weight: 560;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table {
    table-layout: fixed;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table th:nth-child(1),
.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table td:nth-child(1) { width: 180px; }
.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table th:nth-child(2),
.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table td:nth-child(2) { width: auto; }
.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table th:nth-child(3),
.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table td:nth-child(3) { width: 64px; }
.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table th:nth-child(4),
.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table td:nth-child(4) { width: 144px; }
.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table th:nth-child(5),
.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table td:nth-child(5) { width: 112px; }
.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table th:nth-child(6),
.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table td:nth-child(6) { width: 122px; }
.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table th:nth-child(7),
.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table td:nth-child(7) { width: 96px; }

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-day-row th,
.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-day-row th * {
    position: relative;
    padding: 16px 14px 9px;
    color: #334155;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-day-row th::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 9px;
    border-radius: 999px;
    background: var(--ar-calendar-accent);
    vertical-align: 1px;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-day-row th::after {
    content: none !important;
    display: none !important;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-row td {
    height: 68px;
    padding: 11px 14px;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-row:hover td {
    background: #FAFBFF !important;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-row:hover {
    box-shadow: 0 6px 18px rgba(15, 23, 42, .025);
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-row td:nth-child(2) > strong {
    font-size: 16px;
    font-weight: 680;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-list-status,
.ar-teacher-calendar-layout.ar-mode-list .ar-list-report {
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 650;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-list-report.is-pending {
    color: #B45309;
    background: #FEF3C7;
    box-shadow: inset 0 0 0 1px #FED7AA;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-list-report.is-submitted {
    color: #15803D;
    background: #DCFCE7;
    box-shadow: inset 0 0 0 1px #BBF7D0;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-list-action-btn {
    width: auto;
    min-width: 40px;
    height: 40px;
    gap: 7px;
    padding: 0 11px;
    font-size: 12.5px;
    font-weight: 650;
    text-decoration: none;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-list-action-btn span {
    display: inline-block;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-list-action-btn:hover,
.ar-teacher-calendar-layout.ar-mode-list .ar-list-action-btn:focus-visible {
    border-color: #E9D5FF;
    background: #F4F0FF;
    color: var(--ar-calendar-accent);
}

@media (max-width: 1120px) {
    .ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table th:nth-child(3),
    .ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table td:nth-child(3),
    .ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table th:nth-child(4),
    .ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table td:nth-child(4) {
        display: none;
    }

    .ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table th:nth-child(1),
    .ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table td:nth-child(1) { width: 180px; }
    .ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table th:nth-child(5),
    .ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table td:nth-child(5) { width: 112px; }
    .ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table th:nth-child(6),
    .ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table td:nth-child(6) { width: 122px; }
    .ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table th:nth-child(7),
    .ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table td:nth-child(7) { width: 96px; }
}

@media (max-width: 760px) {
    .ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-table tr.ar-teacher-list-row {
        grid-template-areas:
            "heure statut"
            "groupe groupe"
            "rapport actions";
    }

    .ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-row td:nth-child(3),
    .ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-row td:nth-child(4) {
        display: none !important;
    }

    .ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-row td:nth-child(5) {
        display: block !important;
        grid-area: statut;
        justify-self: end;
    }

    .ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-row td:nth-child(6) {
        display: block !important;
        grid-area: rapport;
    }

    .ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-row td:nth-child(7) {
        display: block !important;
        grid-area: actions;
        justify-self: end;
    }
}

/* Calendrier liste — correction overlap séparateurs de dates */
.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-day-row,
.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-day-row th {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-day-row th {
    display: table-cell !important;
    height: auto !important;
    padding: 12px 14px !important;
    line-height: 1.35;
    border-top: 18px solid #fff !important;
    border-bottom: 0 !important;
    border-radius: 14px 14px 0 0;
    background: #FAFBFF !important;
    box-shadow: none !important;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-day-row + .ar-teacher-list-row td {
    border-top: 1px solid #EEF2F7 !important;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-day-row + .ar-teacher-list-row td:first-child {
    border-top-left-radius: 0;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-day-row + .ar-teacher-list-row td:last-child {
    border-top-right-radius: 0;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-row {
    position: relative;
    z-index: 0;
}

.ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-row td {
    position: relative;
    z-index: 0;
}

@media (max-width: 760px) {
    .ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-day-row,
    .ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-day-row th {
        display: block !important;
        width: 100%;
    }

    .ar-teacher-calendar-layout.ar-mode-list .ar-teacher-list-day-row th {
        padding: 10px 12px !important;
        border-top: 12px solid #fff !important;
        border-radius: 14px;
    }
}

/* ============================================================
   Mes groupes — final premium compact polish
   ============================================================ */

.ar-portal-view-groupes .ar-portal-main {
    background: linear-gradient(180deg, #FAFBFF 0%, #F8FAFC 100%);
}

.ar-portal-view-groupes .ar-groups-page {
    gap: 20px;
}

.ar-portal-view-groupes .ar-groups-headline h2 {
    color: var(--ar-ink);
    font-size: 40px;
    font-weight: 760;
    letter-spacing: 0;
}

.ar-portal-view-groupes .ar-groups-headline p {
    color: #64748B;
    font-size: 14.5px;
    font-weight: 500;
}

.ar-portal-view-groupes .ar-groups-filters {
    padding: 8px;
    gap: 8px;
    border-color: #EEF2F7;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .04);
}

.ar-portal-view-groupes .ar-groups-filters .ar-calendar-filter-control {
    min-height: 40px;
    height: 40px;
    border-color: #EEF2F7;
    border-radius: 14px;
}

.ar-portal-view-groupes .ar-groups-section {
    gap: 12px;
}

.ar-portal-view-groupes .ar-groups-section-title {
    margin: 0;
    color: #334155;
    font-size: 15px;
    font-weight: 720;
}

.ar-portal-view-groupes .ar-groups-section-title svg {
    color: #6D28D9;
}

.ar-portal-view-groupes .ar-groups-list {
    gap: 12px;
}

.ar-portal-view-groupes .ar-group-card {
    grid-template-columns: minmax(260px, 1.1fr) minmax(320px, 1.35fr) 210px;
    gap: 18px;
    padding: 18px 20px;
    border-color: #EEF2F7;
    border-radius: 20px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .04);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.ar-portal-view-groupes .ar-group-card:hover {
    transform: translateY(-1px);
    border-color: #E5ECF6;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
}

.ar-portal-view-groupes .ar-group-card-main {
    gap: 12px;
    align-items: flex-start;
}

.ar-portal-view-groupes .ar-group-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--ar-niv) 9%, #fff);
    color: color-mix(in srgb, var(--ar-niv) 72%, #1E293B);
    box-shadow: none;
}

.ar-portal-view-groupes .ar-group-card-icon svg {
    width: 20px;
    height: 20px;
}

.ar-portal-view-groupes .ar-group-card-id {
    display: grid;
    gap: 7px;
}

.ar-portal-view-groupes .ar-group-card-titlerow {
    gap: 8px;
}

.ar-portal-view-groupes .ar-group-card-titlerow h3 {
    color: #1E293B;
    font-size: 18px;
    font-weight: 760;
    line-height: 1.25;
}

.ar-portal-view-groupes .ar-group-status,
.ar-portal-view-groupes .ar-niveau-tag {
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 650;
}

.ar-portal-view-groupes .ar-niveau-tag {
    color: color-mix(in srgb, var(--ar-niv) 78%, #1E293B) !important;
    background: color-mix(in srgb, var(--ar-niv) 9%, #fff) !important;
}

.ar-portal-view-groupes .ar-group-card-tags {
    gap: 7px;
}

.ar-portal-view-groupes .ar-group-meta {
    color: #64748B;
    font-size: 12px;
    font-weight: 520;
}

.ar-portal-view-groupes .ar-group-schedule {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 0;
    color: #64748B;
    font-size: 12px;
    font-weight: 520;
}

.ar-portal-view-groupes .ar-group-schedule > svg {
    width: 13px;
    height: 13px;
    margin-top: 5px;
    color: #94A3B8;
}

.ar-portal-view-groupes .ar-group-schedule span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid #EEF2F7;
    border-radius: 999px;
    background: #FAFBFF;
    color: #64748B;
}

.ar-portal-view-groupes .ar-group-avatars {
    margin-top: 1px;
}

.ar-portal-view-groupes .ar-group-avatar {
    width: 28px;
    height: 28px;
    border: 2px solid #fff;
    font-size: 10.5px;
    font-weight: 720;
    box-shadow: none;
}

.ar-portal-view-groupes .ar-group-card-metrics {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(150px, .9fr);
    gap: 14px;
    align-items: center;
}

.ar-portal-view-groupes .ar-group-metric {
    gap: 7px;
}

.ar-portal-view-groupes .ar-group-metric-head span,
.ar-portal-view-groupes .ar-group-next > span {
    color: #64748B;
    font-size: 11.5px;
    font-weight: 620;
}

.ar-portal-view-groupes .ar-group-metric-head strong {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.ar-portal-view-groupes .ar-group-bar {
    height: 5px;
    border-radius: 999px;
    background: #F1F5F9;
}

.ar-portal-view-groupes .ar-group-bar span {
    opacity: .72;
    background-image: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0));
    animation: ar-group-progress-in 520ms ease both;
}

@keyframes ar-group-progress-in {
    from { transform: scaleX(.65); transform-origin: left center; opacity: .35; }
    to { transform: scaleX(1); transform-origin: left center; opacity: .72; }
}

@media (prefers-reduced-motion: reduce) {
    .ar-portal-view-groupes .ar-group-bar span { animation: none; }
}

.ar-portal-view-groupes .ar-group-metric small {
    color: #94A3B8;
    font-size: 11.5px;
    font-weight: 520;
}

.ar-portal-view-groupes .ar-group-next {
    gap: 5px;
    padding-left: 4px;
}

.ar-portal-view-groupes .ar-group-next strong {
    color: #334155;
    font-size: 12.5px;
    font-weight: 680;
}

.ar-portal-view-groupes .ar-group-next .ar-time-dual b {
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.ar-portal-view-groupes .ar-group-card-actions {
    gap: 9px;
}

.ar-portal-view-groupes .ar-group-see {
    min-height: 40px;
    padding: 9px 13px;
    border-radius: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ar-niv) 88%, #fff), var(--ar-niv)) !important;
    box-shadow: none;
    font-size: 13px;
    font-weight: 720;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.ar-portal-view-groupes .ar-group-see:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--ar-niv) 22%, transparent);
    filter: brightness(.98);
}

.ar-portal-view-groupes .ar-group-quicklinks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.ar-portal-view-groupes .ar-group-quicklinks a {
    min-height: 32px;
    padding: 6px 9px;
    border-color: transparent;
    border-radius: 12px;
    background: transparent;
    color: #64748B;
    font-size: 12px;
    font-weight: 560;
}

.ar-portal-view-groupes .ar-group-quicklinks a:hover {
    border-color: #EEF2F7;
    background: #FAFBFF;
    color: var(--ar-niv);
}

.ar-portal-view-groupes .ar-group-quicklinks svg {
    width: 13px;
    height: 13px;
}

@media (max-width: 1180px) {
    .ar-portal-view-groupes .ar-group-card {
        grid-template-columns: minmax(0, 1fr) minmax(230px, .8fr);
    }

    .ar-portal-view-groupes .ar-group-card-metrics {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .ar-portal-view-groupes .ar-groups-headline h2 {
        font-size: 30px;
    }

    .ar-portal-view-groupes .ar-group-card {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px;
    }

    .ar-portal-view-groupes .ar-group-card-metrics {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ar-portal-view-groupes .ar-group-card-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ar-portal-view-groupes .ar-group-see {
        width: 100%;
        justify-content: center;
    }

    .ar-portal-view-groupes .ar-group-quicklinks {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Calendrier v35 — jour sélectionné, bouton popover, pied de carte
   ============================================================ */
/* 1. En-tête du jour courant : pas de fond sur la cellule —
   seul le numéro (pastille violette) et la colonne restent marqués */
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-teacher-calendar-grid-head strong.is-today,
.ar-teacher-calendar-grid-head strong.is-today {
    background: transparent;
}
.ar-teacher-calendar-grid-head strong.is-today b {
    background: var(--ar-calendar-accent, #6d28d9);
    color: #fff;
}
/* Colonne du jour : teinte violette très légère (remplace le bleu) */
.ar-teacher-calendar-day.is-today {
    background: #f7f5ff;
    box-shadow: inset 0 0 0 1px rgba(109, 40, 217, .07);
}

/* 2. « Ouvrir la séance » : texte toujours blanc sur la couleur du groupe */
.ar-event-pop .ar-event-pop-open,
.ar-event-pop .ar-event-pop-open svg {
    color: #fff;
}

/* 3. Pied de carte : suppression de l'icône vidéo bas-droite */
.ar-teacher-calendar-event footer b { display: none; }

/* ============================================================
   Mes groupes v36 — polish premium final (deltas)
   ============================================================ */
/* 1 & 13. Densité : cartes ~9% plus basses, rythme resserré */
.ar-portal-view-groupes .ar-groups-list { gap: 10px; }
.ar-portal-view-groupes .ar-groups-section { gap: 10px; }
.ar-portal-view-groupes .ar-group-card {
    gap: 20px;
    padding: 14px 18px;
}
.ar-portal-view-groupes .ar-group-card-id { gap: 6px; }
.ar-portal-view-groupes .ar-group-card-main { gap: 12px; }

/* 3. Barres de progression : 4px, piste douce, remplissage net + gradient subtil, anim rapide */
.ar-portal-view-groupes .ar-group-bar {
    height: 4px;
    background: #F1F5F9;
}
.ar-portal-view-groupes .ar-group-bar span {
    opacity: 1;
    background-image: linear-gradient(90deg, color-mix(in srgb, #fff 22%, transparent), transparent 60%);
    animation-duration: 260ms;
}

/* 2 & 8. Blocs progression : label gauche / % droite, alignement parfait */
.ar-portal-view-groupes .ar-group-metric { gap: 6px; }
.ar-portal-view-groupes .ar-group-metric-head { margin-bottom: 0; }
.ar-portal-view-groupes .ar-group-metric-head span { letter-spacing: .01em; }
.ar-portal-view-groupes .ar-group-metric small { margin-top: 5px; }

/* 5. Avatars : 22px, chevauchement doux, mieux alignés */
.ar-portal-view-groupes .ar-group-avatars { margin-top: 2px; }
.ar-portal-view-groupes .ar-group-avatar {
    width: 22px;
    height: 22px;
    margin-left: -6px;
    font-size: 9px;
    font-weight: 700;
}
.ar-portal-view-groupes .ar-group-avatar:first-child { margin-left: 0; }

/* 6. Chips d'horaire : plus compactes, toujours élégantes */
.ar-portal-view-groupes .ar-group-schedule { gap: 5px; }
.ar-portal-view-groupes .ar-group-schedule span {
    min-height: 21px;
    padding: 1px 8px;
    font-size: 11.5px;
    font-weight: 560;
}

/* 7. Titre de section apaisé + badge de comptage neutre (moins de bruit) */
.ar-portal-view-groupes .ar-groups-section-title {
    gap: 8px;
    font-size: 13px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748B;
}
.ar-portal-view-groupes .ar-groups-section-title svg {
    width: 15px;
    height: 15px;
    color: #94A3B8;
}
.ar-portal-view-groupes .ar-groups-section-title span {
    min-width: 20px;
    height: 20px;
    background: #EEF2F7;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
}

/* ============================================================
   Aperçu d'un groupe — redesign premium v37
   ============================================================ */
.ar-group-ov-page { display: grid; gap: 24px; }

/* ---- Header hero : carte à léger dégradé + décor discret ---- */
.ar-group-ov-page .ar-group-ov-header {
    position: relative;
    overflow: hidden;
    align-items: flex-start;
    gap: 20px;
    padding: 26px 28px;
    border-radius: 24px;
    background:
        radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--ar-niv) 12%, #fff) 0%, transparent 58%),
        linear-gradient(180deg, #ffffff, #fbfcff);
    border: 1px solid var(--ar-border);
    box-shadow: 0 8px 30px rgba(15, 23, 42, .05);
}
.ar-group-ov-page .ar-group-ov-header::after {
    content: "";
    position: absolute;
    right: -40px; top: -60px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ar-niv) 16%, transparent), transparent 62%);
    pointer-events: none;
}
.ar-group-ov-page .ar-group-ov-icon {
    width: 62px; height: 62px;
    border-radius: 18px;
    background: #fff;
    color: var(--ar-niv);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--ar-niv) 16%, transparent);
    flex: 0 0 auto;
}
.ar-group-ov-page .ar-group-ov-icon svg { width: 26px; height: 26px; }
.ar-group-ov-page .ar-group-ov-titlerow h2 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.ar-group-ov-page .ar-niveau-tag { padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.ar-group-ov-page .ar-group-ov-meta { gap: 8px 18px; color: #64748B; font-size: 13px; font-weight: 500; }
.ar-group-ov-page .ar-group-ov-meta svg { color: var(--ar-niv); opacity: .8; }
/* Statut « En cours » bien plus visible */
.ar-group-ov-page .ar-group-ov-status {
    padding: 5px 13px 5px 26px;
    position: relative;
    font-size: 12px; font-weight: 700;
    border-radius: 999px;
}
.ar-group-ov-page .ar-group-ov-status::before {
    content: ""; position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.ar-group-ov-page .ar-group-ov-status.is-active { color: #15803d; background: #dcfce7; box-shadow: 0 0 0 3px rgba(34,197,94,.10); }

/* ---- Onglets : plus aérés, actif souligné ---- */
.ar-group-ov-page .ar-group-ov-tabs {
    padding: 6px;
    border-color: var(--ar-border);
    box-shadow: 0 2px 10px rgba(15,23,42,.03);
    background: #fff;
}
.ar-group-ov-page .ar-group-ov-tabs a { padding: 11px 18px; font-weight: 600; }
.ar-group-ov-page .ar-group-ov-tabs a.active {
    background: color-mix(in srgb, var(--ar-niv) 8%, #fff);
    color: var(--ar-niv);
    box-shadow: inset 0 -2px 0 var(--ar-niv);
}

/* ---- KPI : cartes teintées, décor de fond, respiration ---- */
.ar-group-ov-page .ar-group-ov-kpis { gap: 16px; }
.ar-group-ov-page .ar-group-ov-kpi {
    position: relative;
    overflow: hidden;
    gap: 8px;
    padding: 22px;
    border-radius: 20px;
    border: 1px solid var(--ar-border);
    box-shadow: 0 2px 10px rgba(15,23,42,.03);
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.ar-group-ov-page .ar-group-ov-kpi:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(15,23,42,.07); }
.ar-group-ov-page .ar-group-ov-kpi-lbl { font-size: 12.5px; font-weight: 600; color: #64748B; }
.ar-group-ov-page .ar-group-ov-kpi > strong { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.ar-group-ov-page .ar-group-ov-kpi-sub { font-size: 12px; font-weight: 500; color: #94A3B8; }
.ar-group-ov-page .ar-group-bar { height: 6px; background: rgba(15,23,42,.06); border-radius: 999px; margin: 2px 0; }
.ar-group-ov-page .ar-group-bar span { border-radius: 999px; }
/* Décor de fond : grande icône estompée bas-droite */
.ar-kpi-deco {
    position: absolute;
    right: -10px; bottom: -14px;
    opacity: .10;
    pointer-events: none;
}
.ar-kpi-deco svg { width: 92px; height: 92px; }
/* Tons par carte (fonds très légers) */
.ar-group-ov-page .ar-kpi-next     { background: linear-gradient(180deg, #f6f5ff, #fff); }
.ar-group-ov-page .ar-kpi-next     .ar-group-ov-kpi > strong { color: #4f46e5; }
.ar-group-ov-page .ar-kpi-next     .ar-kpi-deco { color: #6d28d9; }
.ar-group-ov-page .ar-kpi-progress { background: linear-gradient(180deg, #f2f8ff, #fff); }
.ar-group-ov-page .ar-kpi-progress .ar-group-ov-kpi > strong { color: #1d4ed8; }
.ar-group-ov-page .ar-kpi-progress .ar-kpi-deco { color: #2563eb; }
.ar-group-ov-page .ar-kpi-reports  { background: linear-gradient(180deg, #f2fcf5, #fff); }
.ar-group-ov-page .ar-kpi-reports  .ar-group-ov-kpi > strong { color: #15803d; }
.ar-group-ov-page .ar-kpi-reports  .ar-kpi-deco { color: #16a34a; }
.ar-group-ov-page .ar-kpi-week     { background: linear-gradient(180deg, #fff9f1, #fff); }
.ar-group-ov-page .ar-kpi-week     .ar-group-ov-kpi > strong { color: #c2410c; }
.ar-group-ov-page .ar-kpi-week     .ar-kpi-deco { color: #ea580c; }
/* CTA « Rejoindre » de la carte prochaine séance = violet plein */
.ar-group-ov-page .ar-kpi-next .ar-kpi-btn-solid {
    margin-top: 6px; background: #4f46e5; color: #fff;
    box-shadow: 0 8px 18px rgba(79,70,229,.25);
}
.ar-group-ov-page .ar-kpi-week .ar-kpi-btn-soft {
    margin-top: 8px; background: #fff; color: #c2410c;
    box-shadow: inset 0 0 0 1px rgba(234,88,12,.28);
}

/* ---- Panneaux inférieurs : plus d'air ---- */
.ar-group-ov-page .ar-group-ov-cols { gap: 16px; }
.ar-group-ov-page .ar-group-ov-panel {
    gap: 14px;
    padding: 22px;
    border-radius: 20px;
    border: 1px solid var(--ar-border);
    box-shadow: 0 2px 10px rgba(15,23,42,.03);
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.ar-group-ov-page .ar-group-ov-panel:hover { box-shadow: 0 10px 26px rgba(15,23,42,.05); }
.ar-group-ov-page .ar-group-ov-panel-head h3 { font-size: 15px; font-weight: 700; }
.ar-group-ov-page .ar-group-ov-panel-link { font-weight: 600; transition: gap 200ms ease; }
.ar-group-ov-page .ar-group-ov-panel-link:hover { gap: 9px; }

/* ---- CTA parents : vrai hero ---- */
.ar-group-ov-page .ar-group-ov-cta {
    position: relative;
    overflow: hidden;
    gap: 18px;
    padding: 24px 28px;
    border-radius: 22px;
    border: 1px solid #ece9ff;
    background:
        radial-gradient(120% 200% at 0% 0%, #f3f1ff 0%, transparent 55%),
        linear-gradient(180deg, #fbfbff, #fff);
}
.ar-group-ov-page .ar-group-ov-cta-ic {
    width: 52px; height: 52px; border-radius: 16px;
    background: #ece9ff; color: #6d28d9; flex: 0 0 auto;
}
.ar-group-ov-page .ar-group-ov-cta strong { font-size: 17px; font-weight: 700; color: var(--ar-ink); }
.ar-group-ov-page .ar-group-ov-cta p { color: #64748B; font-size: 14px; font-weight: 500; }
.ar-cta-deco {
    position: absolute; right: 150px; bottom: -30px; opacity: .07; pointer-events: none;
    color: #6d28d9;
}
.ar-cta-deco svg { width: 130px; height: 130px; transform: rotate(-12deg); }
.ar-group-ov-page .ar-cta-parents {
    padding: 13px 20px; border-radius: 14px;
    background: linear-gradient(180deg, #6d5cf0, #5b4cf0);
    box-shadow: 0 10px 24px rgba(91,76,240,.28);
    font-weight: 700;
    transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.ar-group-ov-page .ar-cta-parents:hover { transform: translateY(-1px); filter: brightness(1.03); }

@media (max-width: 1100px) {
    .ar-group-ov-page .ar-group-ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ar-group-ov-page .ar-group-ov-cols { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .ar-group-ov-page .ar-group-ov-kpis { grid-template-columns: 1fr; }
    .ar-group-ov-page .ar-group-ov-cta { flex-direction: column; align-items: flex-start; }
    .ar-group-ov-page .ar-cta-parents { width: 100%; justify-content: center; }
}

/* ============================================================
   Aperçu d'un groupe — polish final premium
   ============================================================ */
.ar-group-ov-page {
    --ar-panel-shadow: 0 12px 40px rgba(15,23,42,.05);
    --ar-panel-shadow-hover: 0 16px 44px rgba(15,23,42,.075);
}

.ar-group-ov-page .ar-group-ov-tabs a {
    transition: color 180ms ease-out, background 180ms ease-out, box-shadow 180ms ease-out;
}

.ar-group-ov-page .ar-group-ov-kpi,
.ar-group-ov-page .ar-group-ov-panel,
.ar-group-ov-page .ar-group-ov-cta {
    border-color: #EEF2F7;
    box-shadow: var(--ar-panel-shadow);
    transition: transform 180ms ease-out, box-shadow 180ms ease-out, border-color 180ms ease-out;
}

.ar-group-ov-page .ar-group-ov-kpi:hover,
.ar-group-ov-page .ar-group-ov-panel:hover,
.ar-group-ov-page .ar-group-ov-cta:hover {
    transform: translateY(-1px);
    box-shadow: var(--ar-panel-shadow-hover);
}

.ar-group-ov-page .ar-group-ov-kpi > strong {
    color: #0F172A;
}

.ar-group-ov-page .ar-kpi-next > strong { color: #4f46e5; }
.ar-group-ov-page .ar-kpi-progress > strong { color: #1d4ed8; }
.ar-group-ov-page .ar-kpi-reports > strong { color: #15803d; }
.ar-group-ov-page .ar-kpi-week > strong { color: #c2410c; }
.ar-group-ov-page .ar-group-ov-kpi > strong.ar-muted-strong { color: #CBD5E1; }

.ar-group-ov-page .ar-kpi-deco {
    right: -18px;
    bottom: -22px;
    opacity: .14;
}

.ar-group-ov-page .ar-kpi-deco svg {
    width: 116px;
    height: 116px;
    stroke-width: 1.9;
}

.ar-group-ov-page .ar-kpi-note {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 2px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(226,232,240,.85);
    color: #64748B;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
}

.ar-group-ov-page .ar-group-ov-panel {
    position: relative;
    overflow: hidden;
    min-height: 292px;
    padding: 22px;
}

.ar-group-ov-page .ar-group-ov-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .9;
}

.ar-group-ov-page .ar-group-ov-panel > * {
    position: relative;
    z-index: 1;
}

.ar-group-ov-page .ar-panel-students {
    background:
        radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--ar-niv) 11%, transparent), transparent 64%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.ar-group-ov-page .ar-panel-comms {
    background:
        radial-gradient(90% 75% at 100% 0%, rgba(109,40,217,.10), transparent 62%),
        linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
}

.ar-group-ov-page .ar-panel-reports {
    background:
        radial-gradient(90% 70% at 100% 0%, rgba(249,115,22,.10), transparent 62%),
        linear-gradient(180deg, #ffffff 0%, #fffdf9 100%);
}

.ar-group-ov-page .ar-group-ov-panel-head {
    align-items: center;
    padding-bottom: 2px;
}

.ar-group-ov-page .ar-group-ov-panel-head h3 {
    gap: 9px;
    color: #0F172A;
    font-size: 15.5px;
    letter-spacing: -.01em;
}

.ar-group-ov-page .ar-group-ov-panel-head h3 svg,
.ar-group-ov-page .ar-group-ov-panel-link svg,
.ar-group-ov-page .ar-comm-ic svg,
.ar-group-ov-page .ar-group-ov-report-ic svg,
.ar-group-ov-page .ar-group-ov-cta-ic svg,
.ar-group-ov-page .ar-cta-parents svg {
    stroke-width: 2.2;
}

.ar-group-ov-page .ar-group-ov-panel-head h3 svg {
    width: 18px;
    height: 18px;
}

.ar-group-ov-page .ar-group-ov-count {
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 6px 18px rgba(15,23,42,.05);
}

.ar-group-ov-page .ar-group-ov-students {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
    gap: 10px;
    max-height: 286px;
    padding-right: 2px;
}

.ar-group-ov-page .ar-group-ov-students li {
    min-width: 0;
    gap: 10px;
    padding: 9px;
    border: 1px solid rgba(238,242,247,.86);
    border-radius: 16px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 6px 20px rgba(15,23,42,.025);
}

.ar-group-ov-page .ar-group-ov-students .ar-group-avatar {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    border: 2px solid rgba(255,255,255,.86);
    font-size: 13px;
    font-weight: 850;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--ar-niv) 14%, transparent);
}

.ar-group-ov-page .ar-group-ov-student-name {
    overflow: hidden;
    color: #1E293B;
    font-size: 13.5px;
    font-weight: 720;
    line-height: 1.25;
    text-overflow: ellipsis;
}

.ar-group-ov-page .ar-group-ov-panel-link {
    align-self: flex-start;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(226,232,240,.78);
    color: var(--ar-niv);
    font-size: 12.5px;
    box-shadow: 0 6px 18px rgba(15,23,42,.035);
    transition: gap 180ms ease-out, transform 180ms ease-out, background 180ms ease-out, box-shadow 180ms ease-out;
}

.ar-group-ov-page .ar-group-ov-panel-link:hover {
    gap: 10px;
    transform: translateY(-1px);
    background: #fff;
    box-shadow: 0 10px 24px rgba(15,23,42,.055);
}

.ar-group-ov-page .ar-comms-empty {
    flex: 1;
    min-height: 158px;
    align-items: center;
    padding: 18px;
    border: 1px dashed #DDD6FE;
    border-radius: 18px;
    background:
        radial-gradient(100% 110% at 0% 0%, rgba(109,40,217,.12), transparent 58%),
        rgba(255,255,255,.72);
    color: #64748B;
}

.ar-group-ov-page .ar-comms-empty svg {
    width: 46px;
    height: 46px;
    padding: 11px;
    border-radius: 16px;
    background: #F5F3FF;
    color: #6D28D9;
    stroke-width: 2;
}

.ar-group-ov-page .ar-comms-empty span {
    display: grid;
    gap: 4px;
}

.ar-group-ov-page .ar-comms-empty strong {
    color: #1E293B;
    font-size: 14px;
    font-weight: 760;
}

.ar-group-ov-page .ar-comms-empty small {
    max-width: 250px;
    color: #64748B;
    font-size: 12.5px;
    font-weight: 550;
    line-height: 1.45;
}

.ar-group-ov-page .ar-group-ov-comms li {
    padding: 9px;
    border-radius: 15px;
    background: rgba(255,255,255,.64);
    border: 1px solid rgba(238,242,247,.78);
}

.ar-group-ov-page .ar-comm-ic {
    width: 38px;
    height: 38px;
    border-radius: 14px;
}

.ar-group-ov-page .ar-comm-body strong {
    font-size: 13.5px;
    font-weight: 720;
}

.ar-group-ov-page .ar-comm-body small {
    color: #64748B;
    font-weight: 560;
}

.ar-group-ov-page .ar-group-ov-reports {
    position: relative;
    display: grid;
    gap: 0;
}

.ar-group-ov-page .ar-group-ov-reports li {
    position: relative;
    min-height: 58px;
    gap: 12px;
    padding: 8px 0 12px 44px;
    align-items: center;
    justify-content: space-between;
}

.ar-group-ov-page .ar-group-ov-reports li:hover { background: rgba(148,163,184,.10); border-radius: 10px; }
.ar-group-ov-page .ar-group-ov-reports li:hover strong { color: var(--ar-niv); }
.ar-group-ov-page .ar-group-ov-reports li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 17px;
    top: 43px;
    bottom: -8px;
    width: 1px;
    background: linear-gradient(180deg, rgba(148,163,184,.35), rgba(148,163,184,.08));
}

.ar-group-ov-page .ar-group-ov-report-ic {
    position: absolute;
    left: 0;
    top: 9px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #fff !important;
    border: 1px solid color-mix(in srgb, var(--ar-niv) 24%, #E2E8F0);
    box-shadow: 0 7px 18px rgba(15,23,42,.055);
}

.ar-group-ov-page .ar-group-ov-report-ic svg {
    width: 15px;
    height: 15px;
}

.ar-group-ov-page .ar-group-ov-reports li > .ar-group-ov-report-row > div,
.ar-group-ov-page .ar-group-ov-reports li > div {
    display: grid;
    gap: 3px;
}

.ar-group-ov-page .ar-group-ov-reports li strong {
    color: #1E293B;
    font-size: 13.5px;
    font-weight: 760;
}

.ar-group-ov-page .ar-group-ov-reports .ar-time-dual b {
    color: #475569;
    font-size: 12.5px;
    font-weight: 700;
}

.ar-group-ov-page .ar-group-ov-reports .ar-time-dual i {
    color: #94A3B8;
    font-size: 10.5px;
}

.ar-group-ov-page .ar-panel-reports .ar-list-report {
    flex: 0 0 auto;
    min-height: 26px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 760;
    line-height: 1;
}

.ar-group-ov-page .ar-panel-reports .ar-list-report.is-submitted {
    color: #15803D;
    background: #DCFCE7;
}

.ar-group-ov-page .ar-panel-reports .ar-list-report.is-pending {
    color: #B45309;
    background: #FEF3C7;
    box-shadow: 0 0 0 3px rgba(245,158,11,.10);
}

.ar-group-ov-page .ar-group-ov-cta {
    min-height: 126px;
    padding: 26px 30px;
    border-color: #EEF2F7;
    background:
        radial-gradient(80% 180% at 100% 50%, rgba(109,40,217,.13), transparent 55%),
        linear-gradient(135deg, #F5F3FF 0%, #FFFFFF 58%, #F8FAFC 100%);
}

.ar-group-ov-page .ar-group-ov-cta::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 30%;
    height: 100%;
    min-width: 170px;
    pointer-events: none;
    background:
        radial-gradient(circle at 72% 32%, rgba(109,40,217,.16) 0 6px, transparent 7px),
        radial-gradient(circle at 50% 70%, rgba(37,99,235,.12) 0 5px, transparent 6px),
        linear-gradient(135deg, transparent 20%, rgba(255,255,255,.48));
    opacity: .9;
}

.ar-group-ov-page .ar-group-ov-cta > .ar-group-ov-cta-ic,
.ar-group-ov-page .ar-group-ov-cta > div {
    position: relative;
    z-index: 2;
}

.ar-group-ov-page .ar-group-ov-cta-ic {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: linear-gradient(135deg, #FFFFFF, #EDE9FE);
    box-shadow: 0 10px 26px rgba(109,40,217,.14);
}

.ar-group-ov-page .ar-group-ov-cta strong {
    font-size: 19px;
    letter-spacing: -.01em;
}

.ar-group-ov-page .ar-group-ov-cta p {
    margin-top: 5px;
    max-width: 560px;
    color: #475569;
    font-weight: 550;
}

.ar-group-ov-page .ar-cta-deco {
    right: 5%;
    bottom: -44px;
    z-index: 1;
    width: min(28%, 190px);
    color: #6D28D9;
    opacity: .16;
}

.ar-group-ov-page .ar-cta-deco svg {
    width: 180px;
    height: 180px;
    stroke-width: 1.75;
}

.ar-group-ov-page .ar-cta-parents {
    position: relative;
    z-index: 2;
    min-height: 46px;
    gap: 8px;
    color: #fff;
    box-shadow: 0 10px 24px rgba(109,40,217,.20);
    transition: transform 180ms ease-out, box-shadow 180ms ease-out, filter 180ms ease-out;
}

.ar-group-ov-page .ar-cta-parents:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(109,40,217,.26);
    filter: brightness(1.04);
}

@media (max-width: 900px) {
    .ar-group-ov-page .ar-group-ov-panel { min-height: auto; }
    .ar-group-ov-page .ar-group-ov-students { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

@media (max-width: 620px) {
    .ar-group-ov-page .ar-group-ov-cta::after,
    .ar-group-ov-page .ar-cta-deco {
        display: none;
    }
    .ar-group-ov-page .ar-group-ov-cta {
        min-height: 0;
        padding: 22px;
    }
}

/* ============================================================
   Mes groupes v38 — carte façon maquette (groupy.png) + sidebar
   ============================================================ */
/* Grille 2 cartes par ligne */
.ar-portal-view-groupes .ar-groups-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/* Carte : pile verticale, blanche, sans accent latéral */
.ar-portal-view-groupes .ar-group-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
    border-left: 1px solid var(--ar-border);
    border-radius: 20px;
}

/* Ligne haute : infos (gauche) + prochaine séance (droite) */
.ar-portal-view-groupes .ar-group-card-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: flex-start;
}
.ar-portal-view-groupes .ar-group-card-next {
    text-align: left;
    padding-left: 18px;
    border-left: 1px solid var(--ar-line);
    min-width: 150px;
}
.ar-portal-view-groupes .ar-group-card-next > span {
    display: inline-flex; align-items: center; gap: 6px;
    color: #64748B; font-size: 11.5px; font-weight: 600;
}
.ar-portal-view-groupes .ar-group-card-next > span::before {
    content: ""; width: 13px; height: 13px; display: inline-block;
    background: currentColor; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    color: var(--ar-niv);
}
.ar-portal-view-groupes .ar-group-card-next strong {
    display: block; margin-top: 4px;
    color: #1E293B; font-size: 15px; font-weight: 700;
}
.ar-portal-view-groupes .ar-group-card-next strong svg { display: none; }
.ar-portal-view-groupes .ar-group-card-next .ar-time-dual { margin-top: 4px; }
.ar-portal-view-groupes .ar-group-card-next .ar-time-dual b { font-size: 13px; font-weight: 700; color: #334155; }

/* Ligne milieu : deux barres côte à côte, séparateur haut */
.ar-portal-view-groupes .ar-group-card-progress {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    padding-top: 14px;
    border-top: 1px solid var(--ar-line);
}

/* Ligne basse : CTA gauche + liens ghost droite, séparateur haut */
.ar-portal-view-groupes .ar-group-card-actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--ar-line);
}
.ar-portal-view-groupes .ar-group-see {
    flex: 0 0 auto;
    min-width: 168px;
}
.ar-portal-view-groupes .ar-group-quicklinks {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
}
.ar-portal-view-groupes .ar-group-quicklinks a {
    padding: 7px 10px;
}

/* ---- Sidebar : header du menu premium ---- */
.ar-portal-app.is-nav-expanded .ar-portal-brand {
    gap: 12px;
    margin: 6px 4px 20px;
    padding: 8px 10px;
    border-radius: 14px;
}
.ar-portal-app .ar-portal-brand .ar-portal-brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px;
    background: linear-gradient(150deg, #ffffff, #e9f6fb);
    color: var(--ar-primary);
    font-weight: 800; font-size: 15px; letter-spacing: -.02em;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    flex: 0 0 auto;
}
.ar-portal-app .ar-portal-brand > span:last-child {
    font-size: 19px; font-weight: 800; letter-spacing: -.01em;
}

@media (max-width: 1180px) {
    .ar-portal-view-groupes .ar-groups-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ar-portal-view-groupes .ar-group-card-top { grid-template-columns: 1fr; }
    .ar-portal-view-groupes .ar-group-card-next {
        padding-left: 0; border-left: 0; padding-top: 12px; border-top: 1px solid var(--ar-line);
    }
    .ar-portal-view-groupes .ar-group-card-progress { grid-template-columns: 1fr; gap: 14px; }
    .ar-portal-view-groupes .ar-group-card-actions { flex-direction: column; align-items: stretch; }
    .ar-portal-view-groupes .ar-group-quicklinks { justify-content: flex-start; }
}

/* Mes groupes v38.1 — titre stable + badge épinglé en haut à droite */
.ar-portal-view-groupes .ar-group-card-titlerow {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;
}
.ar-portal-view-groupes .ar-group-card-titlerow h3 {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}
.ar-portal-view-groupes .ar-group-card-titlerow .ar-group-status {
    flex: 0 0 auto;
    margin-top: 2px;
}

/* Mes groupes v38.2 — retrait des filets autour de Progression / Rapports */
.ar-portal-view-groupes .ar-group-card-progress,
.ar-portal-view-groupes .ar-group-card-actions {
    padding-top: 0;
    border-top: 0;
}

/* Mes groupes v38.3 — un seul séparateur, avant Progression/Rapports */
.ar-portal-view-groupes .ar-group-card-progress {
    padding-top: 16px;
    border-top: 1px solid var(--ar-line);
}

/* ============================================================
   Sidebar v39 — collapsed par défaut : icône + libellé dessous
   ============================================================ */
@media (min-width: 1081px) {
    /* Largeur repliée un peu plus large pour loger le libellé */
    .ar-portal-app.is-nav-collapsed { --ar-sidebar-width: 96px; }

    /* Liens : icône au-dessus, libellé compact en dessous */
    .ar-portal-app.is-nav-collapsed .ar-portal-nav a {
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        min-height: 0;
        padding: 10px 6px;
        text-align: center;
    }
    .ar-portal-app.is-nav-collapsed .ar-nav-label {
        display: block;
        max-width: none;
        opacity: 1;
        overflow: visible;
        white-space: normal;
        line-height: 1.15;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: -.01em;
    }
    .ar-portal-app.is-nav-collapsed .ar-portal-nav a svg {
        width: 20px;
        height: 20px;
    }

    /* Marque en haut : mark centré, texte masqué en replié */
    .ar-portal-app.is-nav-collapsed .ar-portal-brand {
        justify-content: center;
        padding: 8px 0;
    }
    .ar-portal-app.is-nav-collapsed .ar-portal-brand > span:last-child {
        max-width: 0;
        opacity: 0;
    }
}

/* ============================================================
   Groupe v40 — header commun, séances harmonisées, sections groupes
   ============================================================ */

/* Header + menu groupe : même rendu sur Aperçu, Séances, Forum, Messages, Ressources */
.ar-group-overview .ar-group-back {
    width: fit-content;
    color: #64748B;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
    transition: color 180ms ease-out, transform 180ms ease-out;
}
.ar-group-overview .ar-group-back:hover {
    color: var(--ar-niv);
    transform: translateX(-1px);
}

.ar-group-overview .ar-group-ov-header {
    position: relative;
    overflow: hidden;
    align-items: flex-start;
    gap: 20px;
    padding: 26px 28px;
    border: 1px solid #EEF2F7;
    border-radius: 24px;
    background:
        radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--ar-niv) 12%, #fff) 0%, transparent 58%),
        linear-gradient(180deg, #ffffff, #fbfcff);
    box-shadow: 0 12px 40px rgba(15,23,42,.05);
}
.ar-group-overview .ar-group-ov-header::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ar-niv) 16%, transparent), transparent 62%);
    pointer-events: none;
}
.ar-group-overview .ar-group-ov-header > * {
    position: relative;
    z-index: 1;
}
.ar-group-overview .ar-group-ov-icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: #fff;
    color: var(--ar-niv);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--ar-niv) 16%, transparent);
}
.ar-group-overview .ar-group-ov-icon svg {
    width: 26px;
    height: 26px;
    stroke-width: 2.2;
}
.ar-group-overview .ar-group-ov-titlerow h2 {
    color: #0F172A;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
}
.ar-group-overview .ar-group-ov-meta {
    gap: 8px 18px;
    color: #64748B;
    font-size: 13px;
    font-weight: 500;
}
.ar-group-overview .ar-group-ov-meta svg {
    color: var(--ar-niv);
    opacity: .82;
    stroke-width: 2.2;
}
.ar-group-overview .ar-group-ov-tabs {
    padding: 6px;
    border: 1px solid #EEF2F7;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15,23,42,.03);
}
.ar-group-overview .ar-group-ov-tabs a,
.ar-group-overview .ar-tabs-more-btn {
    border-radius: 12px;
    font-weight: 650;
    transition: color 180ms ease-out, background 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out;
}
.ar-group-overview .ar-group-ov-tabs a:hover,
.ar-group-overview .ar-tabs-more-btn:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--ar-niv) 6%, #fff);
    color: var(--ar-niv);
}
.ar-group-overview .ar-group-ov-tabs a.active {
    background: color-mix(in srgb, var(--ar-niv) 8%, #fff);
    color: var(--ar-niv);
    box-shadow: inset 0 -2px 0 var(--ar-niv);
}

/* Page Séances : même langage visuel que l'aperçu du groupe */
.ar-group-seances {
    --ar-session-shadow: 0 12px 40px rgba(15,23,42,.05);
    gap: 14px;
}
/* Densité : les écarts sont gérés par le gap du conteneur, pas par des marges. */
.ar-group-seances .ar-group-ov-header { margin-bottom: 0; }
.ar-group-seances .ar-group-back { margin-bottom: 0; }
.ar-group-seances .ar-page-header {
    padding: 22px 24px;
    border: 1px solid #EEF2F7;
    border-radius: 24px;
    background:
        radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--ar-niv) 10%, transparent), transparent 58%),
        linear-gradient(180deg, #fff, #fbfdff);
    box-shadow: var(--ar-session-shadow);
}
.ar-group-seances .ar-page-header-text h3 {
    color: #0F172A;
    font-size: 22px;
    font-weight: 720;
    letter-spacing: -.01em;
}
.ar-group-seances .ar-page-header-text p {
    color: #64748B;
    font-size: 14px;
    font-weight: 500;
}
.ar-group-seances .ar-seances-toolbar-actions {
    gap: 10px;
}
.ar-group-seances .ar-kpi-btn-soft {
    border: 1px solid color-mix(in srgb, var(--ar-niv) 18%, #E2E8F0);
    background: #fff;
    color: var(--ar-niv) !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.04);
}
.ar-group-seances .ar-seances-switch {
    min-height: 44px;
    padding: 4px;
    border: 1px solid #EEF2F7;
    border-radius: 16px;
    background: #F8FAFC;
}
.ar-group-seances .ar-seances-switch a {
    min-height: 34px;
    border-radius: 12px;
    font-weight: 650;
}
.ar-group-seances .ar-seances-switch a.is-active {
    background: #fff;
    color: var(--ar-niv);
    box-shadow: 0 8px 18px rgba(15,23,42,.06);
}
.ar-group-seances .ar-seances-filters,
.ar-group-seances .ar-seances-counts,
.ar-group-seances .ar-seances-pending,
.ar-group-seances .ar-seances-list-panel,
.ar-group-seances .ar-seances-cal-panel,
.ar-group-seances .ar-teacher-rail-card,
.ar-group-seances .ar-teacher-calendar-tip {
    border-color: #EEF2F7;
    box-shadow: var(--ar-session-shadow);
}
.ar-group-seances .ar-seances-filters {
    padding: 12px;
    border-radius: 22px;
    background:
        radial-gradient(70% 160% at 0% 0%, color-mix(in srgb, var(--ar-niv) 7%, transparent), transparent 62%),
        #fff;
}
.ar-group-seances .ar-calendar-filter-control {
    border-color: #EEF2F7;
    background: #fff;
}
.ar-group-seances .ar-calendar-filter-control svg {
    color: var(--ar-niv);
    stroke-width: 2.2;
}
.ar-group-seances .ar-seances-period-nav a,
.ar-group-seances .ar-cal-panel-head a,
.ar-group-seances .ar-seances-cell-actions a,
.ar-group-seances .ar-report-act {
    border-color: #EEF2F7;
    transition: transform 180ms ease-out, background 180ms ease-out, color 180ms ease-out, box-shadow 180ms ease-out;
}
.ar-group-seances .ar-seances-period-nav a:hover,
.ar-group-seances .ar-cal-panel-head a:hover,
.ar-group-seances .ar-seances-cell-actions a:hover,
.ar-group-seances .ar-report-act:hover {
    transform: translateY(-1px);
    background: var(--ar-niv-soft);
    color: var(--ar-niv);
    box-shadow: 0 8px 20px rgba(15,23,42,.055);
}
.ar-group-seances .ar-seances-counts {
    width: fit-content;
    padding: 8px;
    border: 1px solid #EEF2F7;
    border-radius: 18px;
    background: #fff;
}
.ar-group-seances .ar-count {
    min-height: 30px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 650;
}
.ar-group-seances .ar-seances-list-panel,
.ar-group-seances .ar-seances-cal-panel,
.ar-group-seances .ar-teacher-rail-card {
    border-radius: 24px;
    background:
        radial-gradient(90% 90% at 100% 0%, color-mix(in srgb, var(--ar-niv) 7%, transparent), transparent 58%),
        #fff;
}
.ar-group-seances .ar-seances-list-head {
    border-bottom-color: #EEF2F7;
    color: #64748B;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0;
}
.ar-group-seances .ar-seances-row {
    border-bottom-color: #EEF2F7;
    transition: transform 180ms ease-out, background 180ms ease-out, box-shadow 180ms ease-out;
}
.ar-group-seances .ar-seances-row:hover {
    transform: translateY(-1px);
    background: #FAFBFF;
    box-shadow: 0 8px 20px rgba(15,23,42,.035);
}
.ar-group-seances .ar-seances-row.is-selected,
.ar-group-seances .ar-seances-row.is-selected:hover,
.ar-group-seances .ar-seances-row.is-history.is-selected {
    background: #fff;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ar-niv) 45%, #fff), inset 3px 0 0 var(--ar-niv);
}
.ar-group-seances .ar-seances-week-head {
    margin: 0;
    padding: 13px 20px;
    border: 0;
    border-top: 1px solid #ECEFF4;
    border-bottom: 1px solid #ECEFF4;
    border-radius: 0;
    background: #F7F8FB;
    color: #1E293B;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
}
.ar-group-seances .ar-seances-week-head:first-child { border-top: 0; }
.ar-group-seances .ar-seances-week-head svg {
    color: var(--ar-niv);
    stroke-width: 2.2;
}
.ar-group-seances .ar-tl-date {
    border-color: #EEF2F7;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15,23,42,.035);
}
.ar-group-seances .ar-tl-date:hover {
    background: var(--ar-niv-soft);
}
.ar-group-seances .ar-tl-dot {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #EEF2F7;
}
.ar-group-seances .ar-seance-detail {
    padding: 18px;
}
.ar-group-seances .ar-seance-detail-title {
    color: #0F172A;
    font-size: 17px;
    font-weight: 720;
}
.ar-group-seances .ar-seance-detail-report {
    border-color: #EEF2F7;
    border-radius: 18px;
    background:
        radial-gradient(90% 110% at 0% 0%, color-mix(in srgb, var(--ar-niv) 8%, transparent), transparent 58%),
        #FAFBFF;
}
.ar-group-seances .ar-seance-quick {
    min-height: 42px;
    border-color: #EEF2F7;
    border-radius: 14px;
    background: rgba(255,255,255,.78);
    font-weight: 650;
}
.ar-group-seances .ar-seance-quick:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(15,23,42,.05);
}
.ar-group-seances .ar-cal-panel-head {
    border-bottom-color: #EEF2F7;
}
.ar-group-seances .ar-cal-panel-head strong {
    color: #0F172A;
    font-weight: 720;
}
.ar-group-seances .ar-cal-cell {
    border-color: #EEF2F7;
}
.ar-group-seances .ar-cal-cell.is-today {
    background: color-mix(in srgb, var(--ar-niv) 7%, #fff);
}
.ar-group-seances .ar-cal-ev {
    border-left-width: 3px;
    box-shadow: 0 8px 18px rgba(15,23,42,.04);
    transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}
.ar-group-seances .ar-cal-ev:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(15,23,42,.07);
}

/* Composant commun Conseil / Astuce — basé sur le dashboard enseignant */
.ar-portal-tip,
.ar-teacher-calendar-tip.ar-portal-tip {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border: 1px solid #EEF2F7;
    border-radius: 22px;
    background:
        radial-gradient(80% 160% at 100% 50%, rgba(109,40,217,.10), transparent 58%),
        linear-gradient(135deg, #FFFFFF 0%, #FAFBFF 62%, #F5F3FF 100%);
    box-shadow: 0 12px 40px rgba(15,23,42,.05);
}
.ar-portal-tip::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -48px;
    width: 150px;
    height: 150px;
    border-radius: 38px;
    background: rgba(109,40,217,.06);
    transform: rotate(-18deg);
    pointer-events: none;
}
.ar-portal-tip > * {
    position: relative;
    z-index: 1;
}
.ar-portal-tip .ar-portal-tip-icon,
.ar-teacher-calendar-tip.ar-portal-tip > span {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: #F5F3FF;
    color: #6D28D9;
    box-shadow: 0 10px 24px rgba(109,40,217,.10);
}
.ar-portal-tip .ar-portal-tip-icon svg,
.ar-portal-tip .ar-portal-tip-link svg {
    stroke-width: 2.2;
}
.ar-portal-tip strong {
    display: block;
    color: #0F172A;
    font-size: 15.5px;
    font-weight: 760;
    letter-spacing: -.01em;
}
.ar-portal-tip p {
    margin: 3px 0 0;
    color: #64748B;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}
.ar-portal-tip .ar-portal-tip-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid #EDE9FE;
    border-radius: 14px;
    background: #fff;
    color: #6D28D9;
    font-size: 13px;
    font-weight: 720;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(15,23,42,.04);
    transition: transform 180ms ease-out, background 180ms ease-out, box-shadow 180ms ease-out;
}
.ar-portal-tip .ar-portal-tip-link:hover {
    transform: translateY(-1px);
    background: #F5F3FF;
    box-shadow: 0 12px 26px rgba(109,40,217,.12);
}
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-portal-tip .ar-portal-tip-icon,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-teacher-calendar-tip.ar-portal-tip > span {
    background: #F5F3FF;
    color: #6D28D9;
}
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-portal-tip .ar-portal-tip-link {
    color: #6D28D9;
}

/* Pages internes du groupe : header de section aligné sur la page Séances */
.ar-group-section-head .ar-page-header {
    padding: 22px 24px;
    border: 1px solid #EEF2F7;
    border-radius: 24px;
    background:
        radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--ar-niv) 10%, transparent), transparent 58%),
        linear-gradient(180deg, #fff, #fbfdff);
    box-shadow: 0 12px 40px rgba(15,23,42,.05);
}
.ar-group-section-head .ar-page-header-text h3 {
    color: #0F172A;
    font-size: 22px;
    font-weight: 720;
    letter-spacing: -.01em;
}
.ar-group-section-head .ar-page-header-text p {
    color: #64748B;
    font-size: 14px;
    font-weight: 500;
}

/* Mes groupes : correction du message vide + sections plus lisibles */
.ar-groups-empty-filter[hidden],
.ar-portal-view-groupes .ar-groups-empty-filter[hidden] {
    display: none !important;
}

.ar-portal-view-groupes .ar-groups-empty-filter:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #EEF2F7;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(15,23,42,.05);
}

.ar-portal-view-groupes .ar-groups-section {
    gap: 14px;
    padding-top: 8px;
}
.ar-portal-view-groupes .ar-groups-section + .ar-groups-section {
    margin-top: 18px;
}
.ar-portal-view-groupes .ar-groups-section-title {
    width: fit-content;
    gap: 11px;
    padding: 10px 14px;
    border: 1px solid #EEF2F7;
    border-radius: 18px;
    background: #fff;
    color: #0F172A;
    font-size: 20px;
    font-weight: 760;
    letter-spacing: -.01em;
    box-shadow: 0 10px 30px rgba(15,23,42,.04);
}
.ar-portal-view-groupes .ar-groups-section-title svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.2;
}
.ar-portal-view-groupes .ar-groups-section-title span {
    min-width: 28px;
    height: 28px;
    padding: 0 9px;
    font-size: 13px;
}
.ar-portal-view-groupes .ar-groups-section-upcoming .ar-groups-section-title {
    background: linear-gradient(135deg, #F5F3FF, #FFFFFF);
    border-color: #EDE9FE;
}
.ar-portal-view-groupes .ar-groups-section-upcoming .ar-groups-section-title svg,
.ar-portal-view-groupes .ar-groups-section-upcoming .ar-groups-section-title {
    color: #6D28D9;
}
.ar-portal-view-groupes .ar-groups-section-upcoming .ar-groups-section-title span {
    background: #6D28D9;
    color: #fff;
}
.ar-portal-view-groupes .ar-groups-section-active .ar-groups-section-title {
    background: linear-gradient(135deg, #ECFDF5, #FFFFFF);
    border-color: #D1FAE5;
}
.ar-portal-view-groupes .ar-groups-section-active .ar-groups-section-title svg,
.ar-portal-view-groupes .ar-groups-section-active .ar-groups-section-title {
    color: #059669;
}
.ar-portal-view-groupes .ar-groups-section-active .ar-groups-section-title span {
    background: #059669;
    color: #fff;
}
.ar-portal-view-groupes .ar-groups-section-finished .ar-groups-section-title {
    background: linear-gradient(135deg, #F8FAFC, #FFFFFF);
    border-color: #E2E8F0;
}
.ar-portal-view-groupes .ar-groups-section-finished .ar-groups-section-title svg,
.ar-portal-view-groupes .ar-groups-section-finished .ar-groups-section-title {
    color: #64748B;
}
.ar-portal-view-groupes .ar-groups-section-finished .ar-groups-section-title span {
    background: #64748B;
    color: #fff;
}
.ar-portal-view-groupes .ar-groups-archive {
    display: block;
}
.ar-portal-view-groupes .ar-groups-archive > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.ar-portal-view-groupes .ar-groups-archive > summary::-webkit-details-marker {
    display: none;
}
.ar-portal-view-groupes .ar-groups-archive .ar-groups-archive-chevron {
    margin-left: 2px;
    width: 18px;
    height: 18px;
    transition: transform 180ms ease-out;
}
.ar-portal-view-groupes .ar-groups-archive[open] .ar-groups-archive-chevron {
    transform: rotate(180deg);
}
.ar-portal-view-groupes .ar-groups-archive .ar-groups-list {
    margin-top: 14px;
}
.ar-portal-view-groupes .ar-groups-archive:not([open]) .ar-groups-list {
    display: none;
}

@media (max-width: 700px) {
    .ar-group-overview .ar-group-ov-header {
        padding: 22px;
        border-radius: 22px;
    }
    .ar-group-overview .ar-group-ov-icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }
    .ar-group-overview .ar-group-ov-titlerow h2 {
        font-size: 22px;
    }
    .ar-group-seances .ar-page-header {
        padding: 20px;
    }
    .ar-portal-view-groupes .ar-groups-section-title {
        width: 100%;
        justify-content: flex-start;
        font-size: 18px;
    }
    .ar-portal-tip,
    .ar-teacher-calendar-tip.ar-portal-tip {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 18px;
    }
    .ar-portal-tip .ar-portal-tip-link {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* ============================================================
   UI v41 — suppression des accents en bordure gauche
   ============================================================ */

/* Cartes groupes : plus de filet coloré latéral */
.ar-group-card,
.ar-portal-view-groupes .ar-group-card,
.ar-groups-section-finished .ar-group-card {
    border-left-width: 1px !important;
    border-left-style: solid !important;
    border-left-color: #EEF2F7 !important;
}

.ar-portal-view-groupes .ar-group-card-next {
    padding-left: 0;
    border-left: 0 !important;
}

/* Calendriers : les cartes gardent la couleur par fond/badge, jamais par bord gauche */
.ar-teacher-calendar-event,
.ar-portal-teacher-event,
.ar-cal-ev,
.ar-group-seances .ar-cal-ev {
    border-left: 0 !important;
    border-left-width: 0 !important;
}

.ar-teacher-calendar-event {
    border: 1px solid color-mix(in srgb, var(--ar-event-color, #005064) 18%, #EEF2F7);
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--ar-event-color, #005064) 10%, transparent), transparent 62%),
        #fff;
}

.ar-portal-teacher-event {
    border: 1px solid color-mix(in srgb, var(--ar-event-color, #005064) 18%, #EEF2F7);
}

.ar-cal-ev,
.ar-group-seances .ar-cal-ev {
    border: 1px solid color-mix(in srgb, var(--ar-niv, #005064) 16%, #EEF2F7);
    background:
        radial-gradient(120% 150% at 100% 0%, color-mix(in srgb, var(--ar-niv, #005064) 9%, transparent), transparent 62%),
        #fff;
}

.ar-cal-ev.is-cancel,
.ar-cal-ev.is-recovery,
.ar-cal-ev.is-done {
    border-left-color: transparent !important;
}

/* Sélections : remplacer le filet gauche par un anneau doux */
.ar-seances-row.is-selected,
.ar-seances-row.is-selected:hover,
.ar-seances-row.is-history.is-selected,
.ar-group-seances .ar-seances-row.is-selected,
.ar-group-seances .ar-seances-row.is-selected:hover,
.ar-group-seances .ar-seances-row.is-history.is-selected {
    background: color-mix(in srgb, var(--ar-niv, #005064) 11%, #fff) !important;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ar-niv, #005064) 34%, #fff) !important;
}

/* Résumés et alertes calendrier : plus de bord gauche coloré */
.ar-week-summary-item,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-item,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-item.is-confirmed,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-item.is-done,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-item.is-recovery,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-week-summary-item.is-cancel,
.ar-seances-pending {
    border-left: 1px solid #EEF2F7 !important;
    border-left-color: #EEF2F7 !important;
}

/* Menu de groupe : état actif sans bord/trait coloré latéral ou soulignement fort */
.ar-group-overview .ar-group-ov-tabs a.active,
.ar-group-ov-page .ar-group-ov-tabs a.active,
.ar-group-ov-tabs a.active {
    box-shadow: none !important;
    background:
        radial-gradient(100% 130% at 100% 0%, color-mix(in srgb, var(--ar-niv, #005064) 10%, transparent), transparent 58%),
        color-mix(in srgb, var(--ar-niv, #005064) 7%, #fff);
}

/* Tags calendrier : badges sans accent latéral */
.ar-list-status,
.ar-teacher-calendar-layout.ar-mode-list .ar-list-status,
.ar-group-seances .ar-list-status {
    border-left: 0 !important;
    box-shadow: none;
}

/* Mes groupes v42 — titres de sections sans fond */
.ar-portal-view-groupes .ar-groups-section-title,
.ar-portal-view-groupes .ar-groups-section-upcoming .ar-groups-section-title,
.ar-portal-view-groupes .ar-groups-section-active .ar-groups-section-title,
.ar-portal-view-groupes .ar-groups-section-finished .ar-groups-section-title {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.ar-portal-view-groupes .ar-groups-section-title span,
.ar-portal-view-groupes .ar-groups-section-upcoming .ar-groups-section-title span,
.ar-portal-view-groupes .ar-groups-section-active .ar-groups-section-title span,
.ar-portal-view-groupes .ar-groups-section-finished .ar-groups-section-title span {
    background: transparent;
    color: currentColor;
    border: 1px solid currentColor;
    opacity: .72;
}

/* ============================================================
   Parents & SMS — page groupe enseignant
   ============================================================ */
.ar-sms-page {
    display: grid;
    gap: 24px;
}

.ar-sms-shell {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr) 300px;
    min-height: 680px;
    border: 1px solid #EEF2F7;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(15,23,42,.05);
    overflow: hidden;
}

.ar-sms-sidebar,
.ar-sms-info {
    min-width: 0;
    padding: 20px;
    background:
        radial-gradient(90% 80% at 0% 0%, rgba(109,40,217,.08), transparent 62%),
        #fff;
}

.ar-sms-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-right: 1px solid #EEF2F7;
}

.ar-sms-bulk-card {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px;
    border: 1px solid #EDE9FE;
    border-radius: 18px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(109,40,217,.12), transparent 60%),
        #F8F6FF;
    color: #1E293B;
    text-align: left;
    cursor: pointer;
    transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}
.ar-sms-bulk-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(109,40,217,.10);
}
.ar-sms-bulk-card > span,
.ar-sms-group-mini > span {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: #EDE9FE;
    color: #6D28D9;
}
.ar-sms-bulk-card strong,
.ar-sms-bulk-card small {
    grid-column: 2;
}
.ar-sms-bulk-card strong {
    font-size: 15px;
    font-weight: 760;
}
.ar-sms-bulk-card small {
    color: #64748B;
    font-size: 12.5px;
    font-weight: 520;
}
.ar-sms-bulk-card > i {
    grid-column: 3;
    grid-row: 1 / span 2;
    color: #6D28D9;
}

.ar-sms-bulk-form,
.ar-sms-compose {
    display: grid;
    gap: 10px;
}
.ar-sms-bulk-form[hidden] {
    display: none;
}
.ar-sms-bulk-form {
    padding: 14px;
    border: 1px solid #EEF2F7;
    border-radius: 18px;
    background: #FAFBFF;
}
.ar-sms-bulk-form label {
    display: grid;
    gap: 7px;
}
.ar-sms-bulk-form label span {
    color: #334155;
    font-size: 12.5px;
    font-weight: 700;
}
.ar-sms-bulk-form textarea,
.ar-sms-compose textarea {
    width: 100%;
    resize: vertical;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    background: #fff;
    color: #0F172A;
    font: inherit;
    outline: none;
}
.ar-sms-bulk-form textarea {
    padding: 12px;
}
.ar-sms-bulk-form textarea:focus,
.ar-sms-compose textarea:focus,
.ar-sms-search input:focus {
    border-color: #C4B5FD;
    box-shadow: 0 0 0 3px rgba(109,40,217,.10);
}
.ar-sms-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ar-sms-form-row small,
.ar-sms-compose small {
    color: #94A3B8;
    font-size: 12px;
    font-weight: 650;
}
.ar-sms-form-row button,
.ar-sms-compose button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 15px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, #6D28D9, #5B21B6);
    color: #fff;
    font-weight: 760;
    cursor: pointer;
    transition: transform 180ms ease-out, box-shadow 180ms ease-out, filter 180ms ease-out;
}
.ar-sms-form-row button:hover,
.ar-sms-compose button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(109,40,217,.22);
}
.ar-sms-form-row button:disabled,
.ar-sms-compose button:disabled {
    cursor: wait;
    opacity: .65;
}

.ar-sms-filter-row button,
.ar-sms-search {
    width: 100%;
    min-height: 46px;
    border: 1px solid #EEF2F7;
    border-radius: 15px;
    background: #fff;
}
.ar-sms-filter-row button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    color: #334155;
    font-weight: 700;
}
.ar-sms-search {
    position: relative;
    display: flex;
    align-items: center;
}
.ar-sms-search input {
    width: 100%;
    min-height: 46px;
    padding: 0 44px 0 14px;
    border: 0;
    border-radius: 15px;
    background: transparent;
    color: #0F172A;
    outline: none;
}
.ar-sms-search i {
    position: absolute;
    right: 14px;
    color: #64748B;
}

.ar-sms-parent-list {
    display: grid;
    gap: 8px;
    min-height: 0;
    overflow-y: auto;
}
.ar-sms-parent {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: transparent;
    color: #0F172A;
    text-align: left;
    cursor: pointer;
    transition: background 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out;
}
.ar-sms-parent:hover,
.ar-sms-parent.is-active {
    transform: translateY(-1px);
    border-color: #DDD6FE;
    background: #F8F6FF;
    box-shadow: 0 10px 24px rgba(109,40,217,.08);
}
.ar-sms-parent.is-disabled {
    cursor: not-allowed;
    opacity: .55;
}
.ar-sms-parent span:nth-child(2) {
    min-width: 0;
}
.ar-sms-parent strong {
    display: block;
    overflow: hidden;
    color: #1E293B;
    font-size: 14px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ar-sms-parent small {
    display: block;
    overflow: hidden;
    color: #64748B;
    font-size: 12.5px;
    font-weight: 520;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ar-sms-avatar {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #EDE9FE, #DBEAFE);
    color: #4C1D95;
    font-size: 13px;
    font-weight: 800;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.75);
}

.ar-sms-privacy {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: auto;
    padding: 14px;
    border-radius: 18px;
    background: #F8FAFC;
    color: #64748B;
}
.ar-sms-privacy i {
    color: #6D28D9;
}
.ar-sms-privacy span {
    display: grid;
    gap: 2px;
    font-size: 12.5px;
}
.ar-sms-privacy strong {
    color: #1E293B;
}

.ar-sms-thread-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-width: 0;
    border-right: 1px solid #EEF2F7;
    background:
        radial-gradient(80% 130% at 70% 0%, rgba(109,40,217,.06), transparent 56%),
        #fff;
}
.ar-sms-thread-head {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 92px;
    padding: 18px 22px;
    border-bottom: 1px solid #EEF2F7;
}
.ar-sms-thread-head h3 {
    margin: 0;
    color: #0F172A;
    font-size: 18px;
    font-weight: 780;
}
.ar-sms-thread-head p {
    margin: 3px 0 0;
    color: #64748B;
    font-size: 13px;
    font-weight: 520;
}
.ar-sms-profile-link,
.ar-sms-parent-detail + p + a {
    margin-left: auto;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border: 1px solid #DDD6FE;
    border-radius: 14px;
    color: #6D28D9;
    font-size: 13px;
    font-weight: 760;
    text-decoration: none;
}

.ar-sms-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding: 24px;
    overflow-y: auto;
}
.ar-sms-bubble {
    max-width: min(70%, 520px);
    padding: 14px 16px;
    border: 1px solid #EEF2F7;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15,23,42,.045);
}
.ar-sms-bubble.is-out {
    align-self: flex-end;
    border-color: #DDD6FE;
    background: #F8F6FF;
}
.ar-sms-bubble.is-in {
    align-self: flex-start;
}
.ar-sms-bubble p {
    margin: 0;
    color: #1E293B;
    font-size: 14px;
    font-weight: 560;
    line-height: 1.55;
}
.ar-sms-bubble span {
    display: block;
    margin-top: 8px;
    color: #64748B;
    font-size: 11.5px;
    font-weight: 650;
    text-align: right;
}

.ar-sms-compose {
    position: relative;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    margin: 0 22px 22px;
    padding: 10px;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15,23,42,.055);
}
.ar-sms-compose textarea {
    min-height: 42px;
    max-height: 120px;
    padding: 11px 0;
    border: 0;
    border-radius: 0;
    resize: none;
    box-shadow: none !important;
}
.ar-sms-compose button[type="button"] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 14px;
    background: #F8FAFC;
    color: #64748B;
}
.ar-sms-compose button[type="submit"] {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
}
.ar-sms-compose .ar-sms-status {
    grid-column: 1 / -1;
}

.ar-sms-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #FAFBFF;
}
.ar-sms-info section {
    padding: 18px;
    border: 1px solid #EEF2F7;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15,23,42,.04);
}
.ar-sms-info h3,
.ar-sms-panel-head h3 {
    margin: 0;
    color: #0F172A;
    font-size: 15px;
    font-weight: 760;
}
.ar-sms-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.ar-sms-panel-head i {
    color: #64748B;
}
.ar-sms-parent-detail,
.ar-sms-group-mini {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ar-sms-parent-detail strong,
.ar-sms-group-mini strong {
    display: block;
    color: #1E293B;
    font-weight: 780;
}
.ar-sms-parent-detail small,
.ar-sms-group-mini small,
.ar-sms-info section > p {
    color: #64748B;
    font-size: 13px;
    font-weight: 520;
}
.ar-sms-info section > p {
    margin: 12px 0 0;
}
.ar-sms-info section > button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 0;
    border: 0;
    background: transparent;
    color: #1E293B;
    text-align: left;
    cursor: pointer;
}
.ar-sms-info section > button + button {
    border-top: 1px solid #EEF2F7;
}
.ar-sms-info section > button > i {
    width: 38px;
    height: 38px;
    padding: 9px;
    border-radius: 13px;
    background: #F5F3FF;
    color: #6D28D9;
}
.ar-sms-info section > button strong {
    display: block;
    font-size: 13.5px;
    font-weight: 760;
}
.ar-sms-info section > button small {
    color: #64748B;
    font-size: 12.5px;
}
.ar-sms-history-mini {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ar-sms-history-mini li {
    display: flex;
    gap: 10px;
    color: #64748B;
    font-size: 12.5px;
    line-height: 1.4;
}
.ar-sms-history-mini i {
    color: #6D28D9;
    flex: 0 0 auto;
}

.ar-sms-empty {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    min-height: 150px;
    padding: 18px;
    border-radius: 18px;
    color: #64748B;
    text-align: center;
}
.ar-sms-empty i {
    color: #6D28D9;
}
.ar-sms-empty strong {
    color: #1E293B;
    font-weight: 760;
}
.ar-sms-empty span {
    max-width: 280px;
    font-size: 13px;
    line-height: 1.45;
}
.ar-sms-empty.is-error i,
.ar-sms-status {
    color: #B45309;
}
.ar-sms-status {
    min-height: 16px;
    margin: 0;
    font-size: 12px;
    font-weight: 650;
}

@media (max-width: 1240px) {
    .ar-sms-shell {
        grid-template-columns: 300px minmax(0, 1fr);
    }
    .ar-sms-info {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-top: 1px solid #EEF2F7;
    }
}

@media (max-width: 820px) {
    .ar-sms-shell {
        grid-template-columns: 1fr;
    }
    .ar-sms-sidebar,
    .ar-sms-thread-card {
        border-right: 0;
        border-bottom: 1px solid #EEF2F7;
    }
    .ar-sms-info {
        grid-template-columns: 1fr;
    }
    .ar-sms-bubble {
        max-width: 88%;
    }
}

@media (max-width: 560px) {
    .ar-sms-shell {
        border-radius: 20px;
    }
    .ar-sms-thread-head {
        flex-wrap: wrap;
    }
    .ar-sms-profile-link {
        margin-left: 0;
    }
    .ar-sms-compose {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }
    .ar-sms-compose small {
        display: none;
    }
}

/* Parents & SMS - polish final scoped à la page */
.ar-portal-role-teacher.ar-portal-view-sms .ar-group-section-head {
    gap: 16px;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-group-section-head .ar-page-header {
    position: relative;
    min-height: 132px;
    padding: 28px 210px 28px 30px;
    overflow: hidden;
    border-color: #EEF2F7;
    background:
        radial-gradient(120px 90px at calc(100% - 84px) 42%, rgba(109,40,217,.10), transparent 68%),
        radial-gradient(96px 76px at calc(100% - 160px) 74%, color-mix(in srgb, var(--ar-niv) 13%, transparent), transparent 70%),
        linear-gradient(180deg, #fff 0%, #FAFBFF 100%);
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-group-section-head .ar-page-header::after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: 16px;
    width: 142px;
    height: 92px;
    border-radius: 42px 42px 28px 28px;
    background:
        radial-gradient(circle at 50% 30%, #FDE68A 0 8px, transparent 9px),
        radial-gradient(circle at 50% 53%, #FDBA74 0 23px, transparent 24px),
        radial-gradient(circle at 34% 48%, #1F2937 0 4px, transparent 5px),
        radial-gradient(circle at 66% 48%, #1F2937 0 4px, transparent 5px),
        radial-gradient(circle at 50% 76%, #22C55E 0 38px, transparent 39px);
    opacity: .95;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-group-section-head .ar-page-header::before {
    content: "";
    position: absolute;
    right: 54px;
    top: 26px;
    width: 36px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(180deg, #DBEAFE, #EEF2FF);
    box-shadow: inset 0 0 0 2px rgba(109,40,217,.12), 0 10px 24px rgba(15,23,42,.08);
    transform: rotate(-8deg);
    z-index: 1;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-group-section-head .ar-page-header-text {
    position: relative;
    z-index: 2;
    max-width: 720px;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-group-section-head .ar-page-header-text h3 {
    color: #071437;
    font-size: clamp(26px, 2.3vw, 34px);
    font-weight: 780;
    line-height: 1.14;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-group-section-head .ar-page-header-text p {
    margin-top: 10px;
    color: #334155;
    font-size: 16px;
}

.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-shell {
    grid-template-columns: minmax(290px, 340px) minmax(420px, 1fr) minmax(280px, 330px);
    min-height: min(760px, calc(100vh - 220px));
    border-color: #E8EDF5;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(15,23,42,.055);
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-sidebar,
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info {
    padding: 18px;
    background: #fff;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-sidebar {
    gap: 13px;
    border-right-color: #EEF2F7;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-bulk-card {
    min-height: 88px;
    grid-template-columns: 44px minmax(0, 1fr) 22px;
    padding: 16px 18px;
    border: 0;
    border-radius: 18px;
    background:
        radial-gradient(120% 140% at 92% 0%, rgba(109,40,217,.12), transparent 62%),
        linear-gradient(180deg, #F5F3FF 0%, #FAF7FF 100%);
    box-shadow: inset 0 0 0 1px #EDE9FE;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-bulk-card > span,
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-group-mini > span {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #fff;
    color: #6D28D9;
    box-shadow: 0 10px 24px rgba(109,40,217,.10);
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-bulk-card strong {
    color: #111C44;
    font-size: 15px;
    font-weight: 780;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-bulk-card small {
    margin-top: 3px;
    color: #475569;
    line-height: 1.35;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-filter-row button,
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-search {
    min-height: 44px;
    border-color: #E8EDF5;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(15,23,42,.025);
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-filter-row button {
    color: #1E293B;
    font-size: 13.5px;
    font-weight: 720;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-search input {
    min-height: 44px;
    color: #0F172A;
    font-size: 13.5px;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-search i {
    width: 19px;
    height: 19px;
    color: #6D28D9;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-parent-list {
    gap: 3px;
    padding-right: 2px;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-parent {
    min-height: 74px;
    grid-template-columns: 44px minmax(0, 1fr) 20px;
    padding: 10px 12px;
    border-radius: 16px;
    border-color: transparent;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-parent:hover {
    background: #FAFBFF;
    border-color: #EEF2F7;
    box-shadow: none;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-parent.is-active {
    background: linear-gradient(180deg, #F8F6FF 0%, #FCFAFF 100%);
    border-color: #DDD6FE;
    box-shadow: 0 10px 26px rgba(109,40,217,.08);
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-parent strong {
    color: #111C44;
    font-size: 14.5px;
    font-weight: 780;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-parent small {
    margin-top: 3px;
    color: #64748B;
    line-height: 1.35;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-avatar {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #FDE68A 0%, #FDBA74 42%, #A7F3D0 100%);
    color: #111827;
    font-size: 12.5px;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.78), 0 8px 18px rgba(15,23,42,.06);
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-privacy {
    padding: 15px;
    border-radius: 18px;
    background: linear-gradient(180deg, #FAFBFF 0%, #F8FAFC 100%);
    box-shadow: inset 0 0 0 1px #EEF2F7;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-privacy i {
    width: 22px;
    height: 22px;
}

.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-thread-card {
    border-right-color: #EEF2F7;
    background:
        radial-gradient(360px 240px at 82% 12%, rgba(109,40,217,.045), transparent 70%),
        linear-gradient(180deg, #fff 0%, #FDFEFF 100%);
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-thread-head {
    min-height: 94px;
    padding: 20px 24px;
    border-bottom-color: #EEF2F7;
    background: rgba(255,255,255,.86);
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-thread-head h3 {
    color: #111C44;
    font-size: 18px;
    font-weight: 800;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-profile-link,
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-parent-detail + p + a {
    min-height: 40px;
    border-color: #DDD6FE;
    border-radius: 13px;
    background: #fff;
    color: #6D28D9;
    box-shadow: 0 8px 18px rgba(109,40,217,.06);
    transition: transform 180ms ease-out, box-shadow 180ms ease-out, background 180ms ease-out;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-profile-link:hover,
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-parent-detail + p + a:hover {
    transform: translateY(-1px);
    background: #F8F6FF;
    box-shadow: 0 12px 26px rgba(109,40,217,.10);
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-thread {
    gap: 16px;
    padding: 26px 24px;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-bubble {
    max-width: min(72%, 560px);
    padding: 16px 18px;
    border-color: #E8EDF5;
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(15,23,42,.04);
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-bubble.is-out {
    border-color: #DDD6FE;
    background: linear-gradient(180deg, #F8F6FF 0%, #F4F0FF 100%);
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-bubble p {
    color: #172554;
    font-size: 14.5px;
    line-height: 1.62;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-compose {
    grid-template-columns: 44px minmax(0, 1fr) auto 48px;
    gap: 10px;
    margin: 0 24px 24px;
    padding: 10px;
    border-color: #E2E8F0;
    border-radius: 20px;
    box-shadow: 0 14px 36px rgba(15,23,42,.06);
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-compose button[type="button"] {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #F8FAFC;
    color: #6D28D9;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-compose button[type="submit"] {
    width: 48px;
    height: 48px;
    min-height: 48px;
    background: linear-gradient(180deg, #7C3AED, #5B21B6);
    box-shadow: 0 12px 24px rgba(109,40,217,.18);
}

.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info {
    gap: 14px;
    border-left: 0;
    background: #FAFBFF;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info section {
    padding: 18px;
    border-color: #E8EDF5;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(15,23,42,.04);
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info h3,
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-panel-head h3 {
    color: #111C44;
    font-size: 15px;
    font-weight: 800;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-panel-head i {
    color: #6D28D9;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-parent-detail {
    align-items: center;
    margin-top: 2px;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-parent-detail .ar-sms-avatar {
    width: 58px;
    height: 58px;
    font-size: 15px;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-parent-detail strong,
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-group-mini strong {
    color: #111C44;
    font-size: 15px;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info section > button {
    min-height: 58px;
    padding: 10px;
    border-radius: 16px;
    transition: background 180ms ease-out, transform 180ms ease-out;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info section > button:hover {
    transform: translateY(-1px);
    background: #FAFBFF;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info section > button + button {
    border-top: 0;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info section > button > i {
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: 13px;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info section > button:nth-of-type(2) > i {
    background: #EEF2FF;
    color: #2563EB;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info section > button:nth-of-type(3) > i {
    background: #FFF7ED;
    color: #EA580C;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-history-mini {
    gap: 12px;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-history-mini li {
    align-items: flex-start;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-history-mini i {
    width: 34px;
    height: 34px;
    padding: 8px;
    border-radius: 11px;
    background: #F5F3FF;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-empty {
    min-height: 220px;
    border: 1px dashed #E2E8F0;
    background:
        radial-gradient(120px 90px at 50% 26%, rgba(109,40,217,.08), transparent 74%),
        #fff;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-empty i {
    width: 38px;
    height: 38px;
    padding: 9px;
    border-radius: 14px;
    background: #F5F3FF;
}

@media (max-width: 1320px) {
    .ar-portal-role-teacher.ar-portal-view-sms .ar-sms-shell {
        grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
    }
    .ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-top: 1px solid #EEF2F7;
    }
}
@media (max-width: 860px) {
    .ar-portal-role-teacher.ar-portal-view-sms .ar-group-section-head .ar-page-header {
        padding-right: 30px;
    }
    .ar-portal-role-teacher.ar-portal-view-sms .ar-group-section-head .ar-page-header::before,
    .ar-portal-role-teacher.ar-portal-view-sms .ar-group-section-head .ar-page-header::after {
        display: none;
    }
    .ar-portal-role-teacher.ar-portal-view-sms .ar-sms-shell,
    .ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info {
        grid-template-columns: 1fr;
    }
    .ar-portal-role-teacher.ar-portal-view-sms .ar-sms-thread-card,
    .ar-portal-role-teacher.ar-portal-view-sms .ar-sms-sidebar {
        border-right: 0;
    }
}
@media (max-width: 560px) {
    .ar-portal-role-teacher.ar-portal-view-sms .ar-group-section-head .ar-page-header {
        min-height: 0;
        padding: 20px;
    }
    .ar-portal-role-teacher.ar-portal-view-sms .ar-sms-sidebar,
    .ar-portal-role-teacher.ar-portal-view-sms .ar-sms-thread,
    .ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info {
        padding: 16px;
    }
    .ar-portal-role-teacher.ar-portal-view-sms .ar-sms-compose {
        grid-template-columns: 40px minmax(0, 1fr) 44px;
        margin: 0 16px 16px;
    }
    .ar-portal-role-teacher.ar-portal-view-sms .ar-sms-compose small {
        display: none;
    }
}

/* Champ nombre avec suffixe (durée) + libellé optionnel */
.ar-modal-opt { color: #94A3B8; font-weight: 500; font-size: 12px; }
.ar-input-suffix { position: relative; display: flex; align-items: center; }
.ar-input-suffix input[type="number"] {
    width: 100%;
    min-height: var(--ar-control-h);
    padding: 10px 78px 10px 12px;
    border: 1px solid var(--ar-border);
    border-radius: var(--ar-radius-input);
    font-size: 14px;
}
.ar-input-suffix input[type="number"]:focus {
    outline: none; border-color: var(--ar-niv, #005064);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ar-niv, #005064) 16%, #fff);
}
.ar-input-suffix > span {
    position: absolute; right: 12px; color: #94A3B8; font-size: 13px; font-weight: 600; pointer-events: none;
}
.ar-duration-out { margin-top: 2px; }
.ar-duration-out strong { color: var(--ar-niv, #005064); font-weight: 800; }

/* ============================================================
   Aperçu groupe v40 — couleurs KPI/panneaux + décos mieux placées
   ============================================================ */
/* Décos de fond : filigrane discret, bien calé dans le coin bas-droit */
.ar-group-ov-page .ar-kpi-deco { right: 14px; bottom: 12px; opacity: .09; }
.ar-group-ov-page .ar-kpi-deco svg { width: 74px; height: 74px; }

/* 1. Progression du groupe → couleur du niveau */
.ar-group-ov-page .ar-kpi-progress {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ar-niv) 6%, #fff), #fff);
}
.ar-group-ov-page .ar-kpi-progress .ar-group-ov-kpi > strong { color: var(--ar-niv); }
.ar-group-ov-page .ar-kpi-progress .ar-kpi-deco { color: var(--ar-niv); }

/* 2. Rapports → orange */
.ar-group-ov-page .ar-kpi-reports {
    background: linear-gradient(180deg, #fff7ed, #fff);
}
.ar-group-ov-page .ar-kpi-reports .ar-group-ov-kpi > strong { color: #ea580c; }
.ar-group-ov-page .ar-kpi-reports .ar-kpi-deco { color: #f97316; }

/* 3. Séances cette semaine → métallique (ardoise) */
.ar-group-ov-page .ar-kpi-week {
    background: linear-gradient(180deg, #f8fafc, #fff);
}
.ar-group-ov-page .ar-kpi-week .ar-group-ov-kpi > strong {
    color: #475569;
    background: linear-gradient(180deg, #64748b, #334155);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ar-group-ov-page .ar-kpi-week .ar-kpi-deco { color: #64748b; }
.ar-group-ov-page .ar-kpi-week .ar-kpi-btn-soft {
    background: #fff; color: #475569;
    box-shadow: inset 0 0 0 1px #cbd5e1;
}
.ar-group-ov-page .ar-kpi-week .ar-kpi-lastweek { color: #475569; background: #eef2f7; }

/* 4. Élèves & Communications → cartes blanches (sans teinte) */
.ar-group-ov-page .ar-panel-students,
.ar-group-ov-page .ar-panel-comms {
    background: #fff;
}
/* On garde la boîte violette à l'intérieur des Communications (état vide) */
.ar-group-ov-page .ar-comms-empty {
    background: linear-gradient(180deg, #faf8ff, #fff);
    border-color: #ece9ff;
}

/* ============================================================
   Aperçu groupe v41 — hover bouton + Derniers rapports en niveau
   ============================================================ */
/* Le texte des actions ne doit jamais devenir blanc au survol */
.ar-seance-quick,
.ar-seance-quick:hover,
.ar-group-seances .ar-seance-quick,
.ar-group-seances .ar-seance-quick:hover {
    color: #2d3a57;
}
.ar-seance-quick.is-danger,
.ar-seance-quick.is-danger:hover { color: #b91c1c; }

/* Derniers rapports : accent à la couleur du niveau (carte blanche) */
.ar-group-ov-page .ar-panel-reports { background: #fff; }
.ar-group-ov-page .ar-panel-reports .ar-group-ov-panel-head h3 { color: var(--ar-niv); }
.ar-group-ov-page .ar-panel-reports .ar-group-ov-panel-head h3 svg { color: var(--ar-niv); }

/* ============================================================
   Aperçu groupe v42 — chiffres KPI suivent le fond de la carte
   (sélecteur direct « > strong » pour écraser le bloc précédent)
   ============================================================ */
.ar-group-ov-page .ar-kpi-progress > strong { color: var(--ar-niv); }
.ar-group-ov-page .ar-kpi-progress .ar-kpi-deco { color: var(--ar-niv); }

.ar-group-ov-page .ar-kpi-reports > strong { color: #ea580c; }
.ar-group-ov-page .ar-kpi-reports .ar-kpi-deco { color: #f97316; }

.ar-group-ov-page .ar-kpi-week > strong {
    color: #475569;
    background: linear-gradient(180deg, #64748b, #334155);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ar-group-ov-page .ar-kpi-week .ar-kpi-deco { color: #64748b; }

/* Décos : filigrane discret bien calé (écrase l'ancien -18/-22 trop gros) */
.ar-group-ov-page .ar-kpi-deco { right: 14px; bottom: 12px; opacity: .09; }
.ar-group-ov-page .ar-kpi-deco svg { width: 76px; height: 76px; }

/* ============================================================
   Parents & SMS v43 — raffinement états vides + interactions
   ============================================================ */
/* Ombres du rail plus légères (moins d'empilement lourd) */
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info section {
    box-shadow: var(--ar-shadow-sm);
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-shell {
    box-shadow: 0 10px 34px rgba(15,23,42,.05);
}

/* États vides : plus doux, icône en bulle */
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-empty,
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-privacy {
    border: 1px dashed #E5E1F5;
    background: linear-gradient(180deg, #faf9ff, #fff);
    border-radius: 18px;
    color: #64748B;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-empty > i,
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-privacy > i {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px; border-radius: 14px;
    background: #ede9fe; color: #6d28d9;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-empty strong {
    color: #1E293B; font-weight: 700;
}

/* Bouton d'envoi : léger lift au survol */
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-compose button[type="submit"] {
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-compose button[type="submit"]:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

/* Carte « SMS collectif » : action principale mieux affirmée */
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-bulk-card {
    box-shadow: 0 8px 22px rgba(109,40,217,.10);
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-bulk-card:hover {
    box-shadow: 0 14px 30px rgba(109,40,217,.16);
}

/* Item parent : hover cohérent */
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-parent:not(.is-disabled):hover {
    background: #f7f6ff;
    border-color: #ece9ff;
}

/* ============================================================
   Parents & SMS v44 — mode collectif centré, badges, hover
   ============================================================ */
/* Le conteneur central héberge deux modes (conversation / collectif) */
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-thread-card { display: block; position: relative; }
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-conversation {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
    min-height: 0;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-conversation[hidden] { display: none; }

/* Fix hover des actions rapides (était blanc sur fond blanc) */
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info section > button:hover {
    background: #f3f0ff;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info section > button:hover strong { color: #5b21b6; }

/* Badge non-lu sur un contact */
.ar-sms-unread {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px;
    background: #ef4444; color: #fff;
    font-size: 11px; font-weight: 800;
    flex: 0 0 auto;
}
.ar-sms-unread[hidden] { display: none; }
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-parent { position: relative; }

/* Mode SMS collectif (occupe tout le centre) */
.ar-sms-collective { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ar-sms-collective[hidden] { display: none; }
.ar-sms-collective-head {
    display: flex; align-items: center; gap: 14px;
    padding: 20px 22px;
    border-bottom: 1px solid #EEF2F7;
    background: linear-gradient(180deg, #f6f4ff, #fff);
}
.ar-sms-collective-ic {
    display: inline-grid; place-items: center;
    width: 46px; height: 46px; border-radius: 14px;
    background: #ede9fe; color: #6d28d9; flex: 0 0 auto;
}
.ar-sms-collective-ic svg { width: 22px; height: 22px; }
.ar-sms-collective-head h3 { margin: 0; font-size: 17px; font-weight: 800; color: #1E293B; }
.ar-sms-collective-head p { margin: 2px 0 0; font-size: 13px; color: #64748B; }
.ar-sms-collective-head p strong { color: #6d28d9; }
.ar-sms-collective-close {
    margin-left: auto; width: 34px; height: 34px; border: 0; border-radius: 10px;
    background: #f1f5f9; color: #475569; cursor: pointer; display: grid; place-items: center;
}
.ar-sms-collective-close:hover { background: #e2e8f0; }
.ar-sms-collective-form { display: flex; flex-direction: column; gap: 12px; padding: 22px; flex: 1 1 auto; min-height: 0; }
.ar-sms-collective-form textarea {
    flex: 1 1 auto; min-height: 160px; resize: none;
    padding: 16px; border: 1px solid #E2E8F0; border-radius: 16px;
    font-size: 15px; line-height: 1.6;
}
.ar-sms-collective-form textarea:focus {
    outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.14);
}
.ar-sms-collective-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ar-sms-collective-foot small { color: #94A3B8; font-weight: 600; }
.ar-sms-collective-foot .ar-modal-btn-primary { background: linear-gradient(180deg, #7C3AED, #5B21B6); }

/* ============================================================
   Parents & SMS v45 — carte collectif, boîte d'écriture
   ============================================================ */
/* Carte « SMS collectif » : texte qui ne déborde plus */
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-bulk-card {
    grid-template-columns: 46px minmax(0, 1fr) auto;
}
.ar-sms-bulk-ic {
    display: inline-grid; place-items: center;
    width: 46px; height: 46px; border-radius: 14px;
    background: #fff; color: #6d28d9; flex: 0 0 auto;
    box-shadow: 0 4px 12px rgba(109,40,217,.10);
}
.ar-sms-bulk-txt { display: grid; gap: 2px; min-width: 0; }
.ar-sms-bulk-txt strong { color: #1E293B; font-size: 15px; font-weight: 800; }
.ar-sms-bulk-txt small {
    color: #64748B; font-size: 12.5px; line-height: 1.35;
    white-space: normal;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-bulk-card > i[data-lucide="chevron-right"] {
    align-self: center; color: #a78bfa; flex: 0 0 auto;
}

/* Boîte d'écriture : plus grande, bouton d'envoi centré et aligné */
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-compose {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    margin: 0 22px 22px;
    padding: 12px 12px 12px 18px;
    border-radius: 18px;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-compose textarea {
    min-height: 52px;
    max-height: 140px;
    padding: 14px 0;
    font-size: 15px;
    line-height: 1.5;
    align-self: center;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-compose small {
    align-self: center; color: #94A3B8; font-weight: 600; white-space: nowrap;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-compose button[type="submit"] {
    align-self: center;
    width: 48px; height: 48px; min-height: 48px;
    display: grid; place-items: center;
    background: linear-gradient(180deg, #7C3AED, #5B21B6);
    box-shadow: 0 10px 22px rgba(109,40,217,.20);
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-compose .ar-sms-status {
    grid-column: 1 / -1; margin: 0;
}

/* ============================================================
   Parents & SMS v46 — icônes d'actions rapides (chips stables au hover)
   ============================================================ */
/* Cible aussi le <svg> généré par lucide (pas seulement le <i>) */
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info section > button > i,
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info section > button > svg {
    width: 40px; height: 40px; padding: 10px; border-radius: 13px;
    background: #EEF2FF; color: #2563EB;
    flex: 0 0 auto;
}
/* Après retrait de « SMS collectif » : 1er = événement (bleu), 2e = devoir (orange) */
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info section > button:nth-of-type(1) > i,
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info section > button:nth-of-type(1) > svg {
    background: #EEF2FF; color: #2563EB;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info section > button:nth-of-type(2) > i,
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info section > button:nth-of-type(2) > svg {
    background: #FFF7ED; color: #EA580C;
}
/* Au survol du bouton : la pastille garde sa couleur (jamais blanche) */
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info section > button:hover > i,
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-info section > button:hover > svg {
    filter: brightness(.98);
}

/* ============================================================
   Notifications SMS v47 — cloche globale, badges d'onglet,
   en-tête liste parents, hauteur max historique, actions rapides
   ============================================================ */

/* Cloche de la barre du haut (enseignant) */
.ar-portal-bell {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 12px;
    color: #475569;
    background: #F1F5F9;
    transition: background 180ms ease-out, color 180ms ease-out;
}
.ar-portal-bell:hover { background: #E2E8F0; color: #1E293B; }
.ar-portal-bell.has-unread { color: #6D28D9; }
.ar-portal-bell > i, .ar-portal-bell > svg { width: 20px; height: 20px; }
.ar-portal-bell-count {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-grid; place-items: center;
    border-radius: 999px;
    background: #EF4444; color: #fff;
    font-size: 11px; font-weight: 800; line-height: 1;
    box-shadow: 0 0 0 2px #fff;
}

/* Badge sur l'onglet « Parents & SMS » */
.ar-tab-badge {
    display: inline-grid; place-items: center;
    min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px;
    border-radius: 999px;
    background: #EF4444; color: #fff;
    font-size: 11px; font-weight: 800; line-height: 1;
    vertical-align: middle;
}

/* En-tête de la liste des parents + badge total */
.ar-sms-sidebar-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 4px 6px 12px;
}
.ar-sms-sidebar-head h3 {
    margin: 0; font-size: 14px; font-weight: 800; color: #0F172A;
    letter-spacing: .01em;
}
.ar-sms-total-badge {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px;
    background: #EF4444; color: #fff;
    font-size: 11.5px; font-weight: 800; line-height: 1;
}

/* Chevron discret à droite du parent (remplace l'icône message) */
.ar-sms-parent-go { color: #CBD5E1; width: 18px; height: 18px; }
.ar-sms-parent.is-active .ar-sms-parent-go { color: #6D28D9; }

/* Hauteur maximale de l'historique des messages */
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-thread {
    max-height: 60vh;
    min-height: 260px;
}

/* Carte « SMS collectif » du rail : texte sur une ligne, sans troncature */
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-bulk-rail .ar-sms-bulk-txt small {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Actions rapides : aération entre le titre et la liste */
.ar-sms-quick h3 { margin: 0 0 14px; }
.ar-sms-quick-list { display: grid; gap: 10px; }

/* ============================================================
   Correctifs v48 — SMS collectif épuré (sans dégradé) +
   actions rapides bien alignées
   ============================================================ */

/* Carte « SMS collectif » : fond plat, épuré */
.ar-sms-bulk-card {
    background: #fff;
    border: 1px solid #E8EDF5;
    box-shadow: 0 2px 10px rgba(15,23,42,.04);
}
.ar-sms-bulk-card:hover {
    border-color: #DDD6FE;
    box-shadow: 0 8px 24px rgba(109,40,217,.08);
}
.ar-sms-bulk-ic {
    background: #F5F3FF;
    box-shadow: none;
}

/* Actions rapides : icône + texte empilé, jamais de débordement */
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-quick > button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 58px;
    padding: 12px;
    border: 1px solid #EEF2F7;
    border-radius: 16px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 180ms ease-out, background 180ms ease-out, transform 180ms ease-out;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-quick > button + button {
    margin-top: 10px;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-quick > button:hover {
    transform: translateY(-1px);
    background: #FAFBFF;
    border-color: #E2E8F0;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-quick > button > i,
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-quick > button > svg {
    flex: 0 0 auto;
    width: 40px; height: 40px; padding: 10px;
    border-radius: 13px;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-quick > button:nth-of-type(1) > i,
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-quick > button:nth-of-type(1) > svg {
    background: #FFF7ED; color: #EA580C;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-quick > button:nth-of-type(2) > i,
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-quick > button:nth-of-type(2) > svg {
    background: #EEF2FF; color: #2563EB;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-quick > button > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-quick > button strong {
    display: block;
    font-size: 13.5px;
    font-weight: 760;
    color: #1E293B;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-quick > button small {
    display: block;
    color: #64748B;
    font-size: 12px;
    line-height: 1.3;
    white-space: normal;
}

/* ============================================================
   Correctifs v49 — zone d'écriture plus haute + badges masqués à 0
   ============================================================ */

/* La pastille [hidden] doit vraiment disparaître (display:inline-grid
   écrasait sinon le display:none natif de l'attribut hidden). */
.ar-sms-total-badge[hidden],
.ar-tab-badge[hidden],
.ar-portal-bell-count[hidden] {
    display: none !important;
}

/* Boîte d'écriture : plus haute, texte centré verticalement */
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-compose {
    align-items: stretch;
    padding: 14px 14px 14px 20px;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-compose textarea {
    min-height: 84px;
    max-height: 200px;
    padding: 12px 0;
    line-height: 1.55;
    align-self: stretch;
}
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-compose small,
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-compose button[type="submit"] {
    align-self: end;
}

/* ============================================================
   Correctif v50 — textarea auto-extensible (hauteur suit le texte)
   ============================================================ */
.ar-portal-role-teacher.ar-portal-view-sms .ar-sms-compose textarea {
    resize: none;
    overflow-y: auto;
}

/* ============================================================
   Notifications v51 — cloche déroulante (liste des SMS parents)
   ============================================================ */
.ar-portal-bell-wrap { position: relative; }

.ar-portal-bell-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    max-width: 88vw;
    background: #fff;
    border: 1px solid #E8EDF5;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(15,23,42,.16);
    padding: 8px;
    z-index: 1200;
}
.ar-portal-bell-menu-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 10px 12px 8px;
}
.ar-portal-bell-menu-head > div { display: flex; flex-direction: column; }
.ar-portal-bell-menu-head strong { font-size: 15px; font-weight: 800; color: #0F172A; }
.ar-portal-bell-menu-head span { font-size: 12px; color: #64748B; font-weight: 600; }
.ar-portal-bell-readall {
    display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
    padding: 5px 9px; border: 1px solid #E6EAF2; border-radius: 999px;
    background: #fff; color: var(--ar-niv, #6D28D9); font-size: 11.5px; font-weight: 800; cursor: pointer;
}
.ar-portal-bell-readall:hover { background: var(--ar-niv-soft, #F5F3FF); }
.ar-portal-bell-readall svg { width: 13px; height: 13px; }
.ar-portal-bell-readall:disabled { opacity: .5; cursor: default; }
.ar-portal-bell-more {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 12px; border-top: 1px solid #EEF2F7;
    color: var(--ar-niv, #6D28D9); font-size: 12.5px; font-weight: 800; text-decoration: none;
}
.ar-portal-bell-more:hover { background: #F8FAFF; }
.ar-portal-bell-more[hidden] { display: none; }
.ar-portal-bell-more svg { width: 14px; height: 14px; }

/* Page historique des notifications (format compact). */
.ar-notifs-list {
    list-style: none; margin: 14px 0 0; padding: 0;
    border: 1px solid #EEF2F7; border-radius: 12px; overflow: hidden; background: #fff;
}
.ar-notif-row + .ar-notif-row { border-top: 1px solid #F1F5F9; }
.ar-notif-row.is-read { opacity: .6; }
.ar-notif-row[hidden] { display: none; }
.ar-notif-link { display: flex; align-items: center; gap: 10px; padding: 7px 12px; text-decoration: none; color: inherit; }
.ar-notif-row:hover { background: #FAFBFF; }
.ar-notif-ava {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 26px; height: 26px; border-radius: 8px; background: #FEE2E2; color: #DC2626;
}
.ar-notif-row.is-read .ar-notif-ava { background: #F1F5F9; color: #94A3B8; }
.ar-notif-ava svg { width: 14px; height: 14px; }
/* Avatar coloré par type (unifié tous rôles). */
.ar-notif-ava.is-forum   { background: #EDE9FE; color: #6D28D9; }
.ar-notif-ava.is-message { background: #DBEAFE; color: #1D4ED8; }
.ar-notif-ava.is-sms     { background: #CCFBF1; color: #0F766E; }
.ar-notif-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ar-notif-body strong { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--ar-ink, #1E293B); }
.ar-notif-body small { font-size: 12px; color: #94A3B8; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Badge de type (Forum / Message / SMS). */
.ar-notif-type { display: inline-flex; align-items: center; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px; }
.ar-notif-type.is-forum   { background: #EDE9FE; color: #6D28D9; }
.ar-notif-type.is-message { background: #DBEAFE; color: #1D4ED8; }
.ar-notif-type.is-sms     { background: #CCFBF1; color: #0F766E; }
.ar-notif-content { font-weight: 700; color: var(--ar-ink, #1E293B); }
.ar-notif-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #DC2626; align-self: center; }

/* Pagination */
.ar-notifs-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.ar-notifs-pager-info { font-size: 12.5px; color: #64748B; font-weight: 600; }
.ar-notifs-perpage { font-size: 12.5px; color: #64748B; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.ar-notifs-perpage select { padding: 5px 8px; border: 1px solid #E6EAF2; border-radius: 8px; font: inherit; font-size: 12.5px; }
.ar-notifs-pages { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ar-notifs-pages button {
    min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid #E6EAF2; border-radius: 8px;
    background: #fff; color: #475569; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.ar-notifs-pages button:hover:not(:disabled) { border-color: var(--ar-niv, #6D28D9); color: var(--ar-niv, #6D28D9); }
.ar-notifs-pages button.is-current { background: var(--ar-niv, #6D28D9); border-color: var(--ar-niv, #6D28D9); color: #fff; }
.ar-notifs-pages button:disabled { opacity: .4; cursor: default; }
.ar-notifs-ellipsis { color: #94A3B8; padding: 0 2px; }

.ar-portal-bell-list {
    list-style: none; margin: 0; padding: 0;
    max-height: 60vh; overflow-y: auto;
}
.ar-portal-bell-empty {
    padding: 22px 14px; text-align: center;
    color: #94A3B8; font-size: 13px;
}
.ar-portal-bell-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 14px;
    text-decoration: none; color: inherit;
    transition: background 160ms ease-out;
}
.ar-portal-bell-item:hover { background: #F5F7FB; }
.ar-portal-bell-ava {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: #EDE9FE; color: #6D28D9;
    font-size: 13px; font-weight: 800;
}
.ar-portal-bell-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ar-portal-bell-txt strong { font-size: 13.5px; font-weight: 700; color: #1E293B; }
.ar-portal-bell-txt small {
    font-size: 12px; color: #64748B;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ar-portal-bell-pill {
    flex: 0 0 auto;
    min-width: 22px; height: 22px; padding: 0 7px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: #EF4444; color: #fff;
    font-size: 11.5px; font-weight: 800; line-height: 1;
}

/* ============================================================
   v52 — ligne « nouveaux SMS parents » dans l'aperçu (Communications)
   ============================================================ */
.ar-comms-sms-line[hidden] { display: none !important; }
.ar-comms-sms-line {
    display: flex; align-items: center; gap: 12px;
    padding: 12px; margin: 4px 0 10px;
    border: 1px solid #FDE68A;
    border-radius: 14px;
    background: linear-gradient(180deg, #FFFBEB, #FFF7ED);
    text-decoration: none; color: inherit;
    transition: transform 160ms ease-out, box-shadow 160ms ease-out;
}
.ar-comms-sms-line:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(234,88,12,.10); }
.ar-comms-sms-line .ar-comm-ic.ar-comm-sms {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 12px;
    background: #FEF3C7; color: #EA580C;
}
.ar-comms-sms-line .ar-comm-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ar-comms-sms-line .ar-comm-body strong { font-size: 13.5px; font-weight: 700; color: #7C2D12; }
.ar-comms-sms-line .ar-comm-body small { font-size: 12px; color: #9A3412; }
.ar-comms-sms-line > i[data-lucide="chevron-right"] { color: #EA580C; flex: 0 0 auto; }

/* ============================================================
   v53 — action « SMS au parent » devant le nom de l'élève (aperçu)
   ============================================================ */
.ar-group-ov-students li { display: flex; align-items: center; gap: 10px; }
.ar-student-sms {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: #F5F3FF; color: #6D28D9;
    transition: background 160ms ease-out, transform 120ms ease-out;
}
.ar-student-sms:hover { background: #EDE9FE; transform: translateY(-1px); }
.ar-student-sms > i, .ar-student-sms > svg { width: 16px; height: 16px; }

/* ============================================================
   v54 — état vide « Aucun groupe » centré + cloche affinée
   ============================================================ */

/* État vide recherche : icône centrale + texte autour */
.ar-portal-view-groupes .ar-groups-empty-filter:not([hidden]) {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 48px 24px;
    border: 1px dashed #E2E8F0;
    background: linear-gradient(180deg, #FFFFFF, #FBFCFE);
}
.ar-groups-empty-ic {
    display: grid; place-items: center;
    width: 68px; height: 68px; margin-bottom: 4px;
    border-radius: 999px;
    background: radial-gradient(120% 120% at 50% 20%, #EEF2FF, #F5F3FF);
    color: #6D28D9;
}
.ar-groups-empty-ic > i, .ar-groups-empty-ic > svg { width: 30px; height: 30px; }
.ar-groups-empty-filter strong { font-size: 17px; font-weight: 800; color: #0F172A; }
.ar-groups-empty-sub {
    max-width: 420px;
    font-size: 13.5px; font-weight: 500; line-height: 1.5;
    color: #64748B;
}

/* Cloche de notifications affinée */
.ar-portal-bell {
    position: relative;
    width: 42px; height: 42px;
    border-radius: 13px;
    border: 1px solid #EEF0F6;
    background: #fff;
    color: #475569;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    transition: background 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out, transform 120ms ease-out;
}
.ar-portal-bell:hover { background: #F8FAFF; border-color: #E2E8F0; transform: translateY(-1px); }
.ar-portal-bell.has-unread { color: #6D28D9; border-color: #E9E4FB; background: #FBFAFF; }
.ar-portal-bell[aria-expanded="true"] { color: #6D28D9; border-color: #C4B5FD; background: #F5F3FF; }
.ar-portal-bell-count {
    position: absolute; top: -6px; right: -6px;
    min-width: 19px; height: 19px; padding: 0 5px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: linear-gradient(180deg, #F43F5E, #E11D48);
    color: #fff;
    font-size: 11px; font-weight: 800; line-height: 1;
    box-shadow: 0 0 0 2.5px #fff, 0 3px 8px rgba(225,29,72,.35);
}
/* Petit pouls quand il y a du non-lu */
.ar-portal-bell.has-unread .ar-portal-bell-count { animation: ar-bell-pulse 1.8s ease-in-out infinite; }
@keyframes ar-bell-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

/* ============================================================
   v55 — élèves un par ligne + action SMS après le nom
   ============================================================ */
.ar-group-ov-page .ar-group-ov-students,
.ar-panel-students .ar-group-ov-students {
    display: grid;
    grid-template-columns: 1fr;   /* un élève par ligne */
    gap: 8px;
}
.ar-group-ov-students li {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
}
/* Le nom occupe l'espace → l'action SMS est repoussée à droite, après le nom */
.ar-group-ov-students .ar-group-ov-student-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ar-group-ov-students .ar-student-sms { margin-left: auto; }

/* ============================================================
   v56 — « Actions à faire » : flèche au lieu du compteur
   ============================================================ */
.ar-teacher-action-go {
    justify-self: end;
    width: 22px; height: 22px;
    color: #94A3B8;
    transition: transform 140ms ease-out, color 140ms ease-out;
}
.ar-teacher-action-row:hover .ar-teacher-action-go {
    color: #6D28D9;
    transform: translateX(2px);
}

/* ============================================================
   v57 — « Prochaine séance » centrée + badge « dans X jours »
   ============================================================ */
.ar-portal-view-groupes .ar-group-card-next {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}
.ar-portal-view-groupes .ar-group-card-next > span {
    justify-content: center;
}
.ar-portal-view-groupes .ar-group-card-next strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
/* Icône du strong : ré-affichée mais alignée avec la date (jamais décalée) */
.ar-portal-view-groupes .ar-group-card-next strong svg {
    display: inline-block;
    width: 15px; height: 15px;
    color: var(--ar-niv);
    flex: 0 0 auto;
}
.ar-portal-view-groupes .ar-group-card-next .ar-time-dual {
    align-items: center;
}

/* Badge « dans X jours » / « Aujourd'hui » */
.ar-group-next-badge {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 4px; padding: 4px 10px;
    border-radius: 999px;
    background: #EEF2FF; color: #4338CA;
    font-size: 11.5px; font-weight: 800; line-height: 1;
    white-space: nowrap;
}
.ar-group-next-badge > i, .ar-group-next-badge > svg { width: 13px; height: 13px; }
.ar-group-next-badge.is-today {
    background: linear-gradient(180deg, #DCFCE7, #BBF7D0);
    color: #15803D;
}

/* ============================================================
   v58 — hover lignes « Actions à faire », bordure niveau (semaine),
   bouton « Réinitialiser » des filtres groupes
   ============================================================ */

/* Lignes « Actions à faire » : cliquables, surlignées au survol */
.ar-teacher-action-row {
    border-radius: 12px;
    padding-left: 10px; padding-right: 10px;
    margin-left: -10px; margin-right: -10px;
    transition: background 160ms ease-out;
}
.ar-teacher-action-row:hover { background: #F5F7FF; }

/* Aperçu de la semaine : bordure de la couleur du niveau au survol */
.ar-teacher-week-session { border: 1.5px solid transparent; }
.ar-teacher-week-session:hover {
    border-color: var(--ar-sess-color, #005064);
    background: #fff;
    box-shadow: 0 6px 18px rgba(15,23,42,.08);
}

/* Bouton « Réinitialiser » des filtres */
.ar-groups-reset {
    display: inline-flex; align-items: center; gap: 6px;
    height: 44px; padding: 0 16px;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    background: #fff;
    color: #475569;
    font-size: 13.5px; font-weight: 700;
    cursor: pointer;
    transition: background 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}
.ar-groups-reset:hover { background: #FEF2F2; border-color: #FECACA; color: #DC2626; }
.ar-groups-reset > i, .ar-groups-reset > svg { width: 16px; height: 16px; }
.ar-groups-reset[hidden] { display: none; }

/* ============================================================
   v59 — KPI accueil colorés, une seule icône calendrier, cloche centrée
   ============================================================ */

/* KPI page d'accueil : le chiffre prend la couleur de son icône */
.ar-portal-view-accueil .ar-stat-tone-blue   .ar-stat-body strong { color: #0369A1; }
.ar-portal-view-accueil .ar-stat-tone-green  .ar-stat-body strong { color: #15803D; }
.ar-portal-view-accueil .ar-stat-tone-orange .ar-stat-body strong { color: #C2410C; }
.ar-portal-view-accueil .ar-stat-tone-purple .ar-stat-body strong { color: #6D28D9; }
.ar-portal-view-accueil .ar-stat-tone-rose   .ar-stat-body strong { color: #BE185D; }

/* « Prochaine séance » : une seule icône calendrier (devant le label) */
.ar-portal-view-groupes .ar-group-card-next > span:not(:first-child)::before {
    content: none;
}
.ar-portal-view-groupes .ar-group-card-next strong svg {
    display: none;
}

/* Cloche : icône bien centrée dans le bouton */
.ar-portal-bell {
    display: grid;
    place-items: center;
}
.ar-portal-bell > i, .ar-portal-bell > svg { width: 20px; height: 20px; }

/* ============================================================
   v60 — cloche sans carré (juste l'icône + badge)
   ============================================================ */
.ar-portal-bell {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #475569;
    border-radius: 10px;
    padding: 0;
}
.ar-portal-bell:hover { color: #6D28D9; transform: none; }
.ar-portal-bell.has-unread,
.ar-portal-bell[aria-expanded="true"] { color: #6D28D9; }
.ar-portal-bell > i, .ar-portal-bell > svg { width: 22px; height: 22px; }

/* ============================================================
   v61 — barre du haut : logo du site, utilisateur + rôle
   ============================================================ */
.ar-portal-brand-logo {
    height: 32px; width: auto; max-width: 140px;
    object-fit: contain; display: block;
}
.ar-portal-sidebar .ar-portal-brand-logo { height: 34px; }

.ar-portal-userbox {
    display: flex; align-items: center; gap: 10px;
}
.ar-portal-userbox .ar-portal-avatar {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #7C3AED, #5B21B6) !important;
    color: #fff !important;
    font-size: 13px; font-weight: 800;
    box-shadow: 0 4px 12px rgba(109,40,217,.22);
}
.ar-portal-userinfo {
    display: flex; flex-direction: column; gap: 2px; line-height: 1.1;
}
.ar-portal-username {
    font-size: 13.5px; font-weight: 700; color: #0F172A;
    max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ar-portal-userbox .ar-portal-role-badge {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #F5F3FF; color: #6D28D9;
    font-size: 11px; font-weight: 800; letter-spacing: .01em;
}
.ar-portal-userbox .ar-portal-role-badge::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}
@media (max-width: 640px) {
    .ar-portal-userinfo { display: none; }
}

/* Menu déroulant utilisateur (topbar) */
.ar-portal-usermenu { position: relative; }
.ar-portal-usermenu > .ar-portal-userbox {
    border: 0; background: transparent; cursor: pointer;
    padding: 4px 8px 4px 4px; border-radius: 12px;
    transition: background .15s ease;
}
.ar-portal-usermenu > .ar-portal-userbox:hover { background: #F5F3FF; }
.ar-portal-userchevron {
    width: 16px; height: 16px; color: #94A3B8; margin-left: 2px;
    transition: transform .18s ease;
}
.ar-portal-usermenu.is-open .ar-portal-userchevron { transform: rotate(180deg); }
.ar-portal-usermenu-drop {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 200px; z-index: 60;
    background: #fff; border: 1px solid #E2E8F0; border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15,23,42,.14);
    padding: 6px;
}
.ar-portal-usermenu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 10px;
    font-size: 13.5px; font-weight: 600; color: #334155; text-decoration: none;
    transition: background .12s ease, color .12s ease;
}
.ar-portal-usermenu-item i { width: 17px; height: 17px; }
.ar-portal-usermenu-item:hover { background: #F1F5F9; }
.ar-portal-usermenu-item.is-danger { color: #dc2626; }
.ar-portal-usermenu-item.is-danger:hover { background: #fef2f2; }
@media (max-width: 640px) {
    .ar-portal-usermenu > .ar-portal-userbox { padding: 4px; }
    .ar-portal-userchevron { display: none; }
}

/* ============================================================
   Métas d'article dans le panier/checkout (coquille portail).
   Hiérarchie : infos d'abonnement = pastilles NEUTRES ;
   « Paiement pour l'enfant » = pastille ROSE mise en avant.
   ============================================================ */

/* --- Base neutre et professionnelle pour toute méta (panier React Edwiser) --- */
.ar-portal-content .eb-cart__subscription-data,
.ar-portal-content .item__subscriptions-data .subscription-data {
    display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
    margin: 6px 6px 0 0; padding: 5px 12px; border-radius: 8px;
    background: #f1f5f9; box-shadow: inset 0 0 0 1px #e2e8f0;
    font-size: 12.5px; line-height: 1.35;
}
.ar-portal-content .eb-cart__subscription-data .label,
.ar-portal-content .item__subscriptions-data .subscription-data .label {
    color: #475569; font-weight: 700;
}
.ar-portal-content .eb-cart__subscription-data .value,
.ar-portal-content .item__subscriptions-data .subscription-data .value {
    color: #1e293b; font-weight: 700;
}

/* --- Ligne « Paiement pour l'enfant » (toujours la dernière) : accent rose + icône --- */
.ar-portal-content .eb-cart__subscription-data:last-child,
.ar-portal-content .item__subscriptions-data .subscription-data:last-child {
    align-items: center; gap: 8px;
    padding: 8px 15px 8px 12px; border-radius: 14px;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    box-shadow: inset 0 0 0 1px #c7d2fe, 0 2px 8px rgba(79, 70, 229, .10);
    font-size: 13px;
}
.ar-portal-content .eb-cart__subscription-data:last-child::before,
.ar-portal-content .item__subscriptions-data .subscription-data:last-child::before {
    content: ""; flex: 0 0 auto; width: 15px; height: 15px;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.ar-portal-content .eb-cart__subscription-data:last-child .label,
.ar-portal-content .item__subscriptions-data .subscription-data:last-child .label {
    color: #4338ca; font-weight: 800;
}
.ar-portal-content .eb-cart__subscription-data:last-child .value,
.ar-portal-content .item__subscriptions-data .subscription-data:last-child .value {
    color: #4f46e5; font-weight: 800;
}

/* --- Checkout / panier CLASSIQUES ([woocommerce_checkout]/[woocommerce_cart]) :
   la méta bénéficiaire sort en <dl class="variation"><dt>label</dt><dd>valeur</dd>. --- */
.ar-portal-content .shop_table .variation,
.ar-portal-content .woocommerce-checkout-review-order-table .variation,
.ar-portal-content .woocommerce-cart-form .variation {
    display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 8px 0 0; padding: 7px 14px 7px 12px; border-radius: 14px;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    box-shadow: inset 0 0 0 1px #c7d2fe, 0 2px 8px rgba(79, 70, 229, .10);
    font-size: 13px; line-height: 1.3;
}
.ar-portal-content .shop_table .variation::before,
.ar-portal-content .woocommerce-checkout-review-order-table .variation::before,
.ar-portal-content .woocommerce-cart-form .variation::before {
    content: ""; flex: 0 0 auto; width: 15px; height: 15px;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.ar-portal-content .shop_table .variation dt,
.ar-portal-content .shop_table .variation dd,
.ar-portal-content .woocommerce-checkout-review-order-table .variation dt,
.ar-portal-content .woocommerce-checkout-review-order-table .variation dd,
.ar-portal-content .woocommerce-cart-form .variation dt,
.ar-portal-content .woocommerce-cart-form .variation dd {
    margin: 0; float: none; padding: 0;
}
.ar-portal-content .shop_table .variation dt,
.ar-portal-content .woocommerce-checkout-review-order-table .variation dt,
.ar-portal-content .woocommerce-cart-form .variation dt {
    color: #4338ca; font-weight: 800;
}
.ar-portal-content .shop_table .variation dd,
.ar-portal-content .woocommerce-checkout-review-order-table .variation dd,
.ar-portal-content .woocommerce-cart-form .variation dd {
    color: #4f46e5; font-weight: 800;
}
.ar-portal-content .shop_table .variation dd p,
.ar-portal-content .woocommerce-checkout-review-order-table .variation dd p,
.ar-portal-content .woocommerce-cart-form .variation dd p { margin: 0; }

/* ============================================================
   Notifications — bande KPIs + carte notifications (accueil + parcours)
   ============================================================ */
/* Bande du haut : les KPIs (gauche, extensibles) et la carte notifications
   (droite) partagent une seule rangée → plus de vide sous les KPIs. */
.ar-parent-top {
    display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.ar-parent-top > .ar-stat-grid { flex: 1 1 560px; margin: 0; }
.ar-parent-top > .ar-notif-card { flex: 1 1 300px; max-width: 360px; }
@media (max-width: 1024px) { .ar-parent-top > .ar-notif-card { flex-basis: 100%; max-width: none; } }

.ar-notif-card {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 16px;
    background: linear-gradient(135deg, #ffffff, #f7f3ff);
    box-shadow: inset 0 0 0 1px #ece9fe, 0 6px 18px rgba(124, 58, 237, .06);
    text-decoration: none; color: inherit; position: relative;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ar-notif-card:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px #ddd6fe, 0 10px 24px rgba(124, 58, 237, .12);
}
.ar-notif-card-ico {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center; position: relative;
    background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff;
    box-shadow: 0 4px 12px rgba(124, 58, 237, .28);
}
.ar-notif-card-ico i { width: 21px; height: 21px; }
.ar-notif-card:not(.is-zero) .ar-notif-card-ico::after {
    content: ""; position: absolute; top: -3px; right: -3px;
    width: 11px; height: 11px; border-radius: 50%;
    background: #ef4444; box-shadow: 0 0 0 2px #fff;
}
.ar-notif-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.ar-notif-card-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ar-notif-card-top strong { font-size: 14.5px; color: #1e1b4b; font-weight: 800; }
.ar-notif-card-count { font-size: 12px; color: #7c3aed; font-weight: 700; }
.ar-notif-card-count b { font-weight: 800; }
.ar-notif-card-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-notif-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 8px;
    background: #f5f3ff; color: #5b21b6; font-size: 11px; font-weight: 600;
}
.ar-notif-chip i { width: 12px; height: 12px; opacity: .8; }
.ar-notif-chip b { font-weight: 800; color: #6d28d9; }
.ar-notif-card-arrow {
    flex: 0 0 auto; width: 18px; height: 18px; color: #a78bda;
    transition: transform .15s ease;
}
.ar-notif-card:hover .ar-notif-card-arrow { transform: translateX(3px); color: #7c3aed; }

/* État « à jour » (0 non-lu) : discret mais présent. */
.ar-notif-card.is-zero { background: #fff; box-shadow: inset 0 0 0 1px #eef2f7; }
.ar-notif-card.is-zero .ar-notif-card-ico { background: #f1f5f9; color: #94a3b8; box-shadow: none; }
.ar-notif-card.is-zero .ar-notif-card-count { color: #94a3b8; }
.ar-notif-card.is-zero .ar-notif-chip { background: #f8fafc; color: #94a3b8; }
.ar-notif-card.is-zero .ar-notif-chip b { color: #94a3b8; }
.ar-notif-card.is-zero .ar-notif-card-arrow { color: #cbd5e1; }

/* Notifications d'un niveau payé (parcours) : petite pastille discrète sous le
   groupe (bell + nombre + « nouv. »), au lieu d'un gros compteur sur le médaillon. */
.ar-path-node { position: relative; }
.ar-path-notif {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 999px;
    background: #fff1f2; color: #e11d48;
    font-size: 11.5px; font-weight: 800; line-height: 1;
    box-shadow: none; border: 0;
    animation: ar-notif-pop .2s ease;
}
.ar-path-notif svg { color: #fb7185; }
.ar-path-notif svg { width: 12px; height: 12px; }
.ar-path-notif b { font-weight: 900; }
/* Respecter l'attribut hidden. */
.ar-path-notif[hidden] { display: none !important; }
@keyframes ar-notif-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ============================================================
   v62 — accueil : icônes couleur niveau, CTA violets, journée libre
   ============================================================ */

/* Mini-cartes « Mes groupes » : icône à la couleur du niveau */
.ar-teacher-group-mini-grid > a .ar-teacher-group-icon {
    background: var(--ar-group-soft, #F5F3FF) !important;
    color: var(--ar-group-tone, #6D28D9) !important;
}

/* CTA principaux en violet + léger mouvement au survol */
.ar-portal-view-accueil .ar-portal-btn-primary {
    background: linear-gradient(180deg, #7C3AED, #5B21B6) !important;
    color: #fff !important;
    border: 0;
    box-shadow: 0 8px 20px rgba(109,40,217,.20);
    transition: transform 150ms ease-out, box-shadow 150ms ease-out, filter 150ms ease-out;
}
.ar-portal-view-accueil .ar-portal-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(109,40,217,.28);
    filter: brightness(1.03);
}
.ar-portal-view-accueil .ar-portal-btn-soft {
    transition: transform 150ms ease-out, background 150ms ease-out;
}
.ar-portal-view-accueil .ar-portal-btn-soft:hover { transform: translateY(-2px); }

/* Liens d'en-tête de panneau (Voir tous, Ouvrir, Voir calendrier…) en violet */
.ar-portal-view-accueil .ar-teacher-panel-head a,
.ar-portal-view-accueil .ar-teacher-panel-footlink {
    color: #6D28D9;
    font-weight: 700;
    transition: gap 150ms ease-out, transform 150ms ease-out, color 150ms ease-out;
}
.ar-portal-view-accueil .ar-teacher-panel-head a:hover,
.ar-portal-view-accueil .ar-teacher-panel-footlink:hover {
    color: #5B21B6;
    transform: translateX(2px);
}

/* « Journée libre » : encadré doux */
.ar-teacher-week-free {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 14px 8px; min-height: 64px;
    border: 1px dashed #E2E8F0;
    border-radius: 12px;
    background: #F8FAFC;
    color: #94A3B8;
}
.ar-teacher-week-free > i, .ar-teacher-week-free > svg { width: 18px; height: 18px; }
.ar-teacher-week-free small { font-size: 11.5px; font-weight: 600; }

/* ============================================================
   v63 — calendrier : cartes de séance à fond uni + cadre niveau
   ============================================================ */

/* Carte de séance : fond uni + cadre de la couleur du niveau */
.ar-teacher-calendar-event {
    background: #fff !important;
    border: 1.5px solid var(--ar-event-color, #005064) !important;
    border-left-width: 4px !important;
    box-shadow: 0 4px 12px rgba(15,23,42,.06);
    transition: transform 140ms ease-out, box-shadow 140ms ease-out;
}
.ar-teacher-calendar-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15,23,42,.12);
    border-color: var(--ar-event-color, #005064) !important;
}
/* TN/CA en préfixe : petit tag coloré */
.ar-teacher-calendar-event time small,
.ar-teacher-calendar-event .ar-event-ca { font-weight: 800; }
.ar-teacher-calendar-event time small {
    color: var(--ar-event-color, #005064);
    font-size: 9px; letter-spacing: .03em;
}
/* Rond de statut + nombre d'élèves bien visibles */
.ar-teacher-calendar-event .ar-event-metrics { display: inline-flex; align-items: center; gap: 5px; }
.ar-teacher-calendar-event .ar-event-dot {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto;
}

/* Pastille d'alerte « rapport manquant » */
.ar-event-warn {
    position: absolute; top: 4px; right: 4px;
    display: grid; place-items: center;
    width: 18px; height: 18px; border-radius: 6px;
    background: #FEF3C7; color: #B45309;
}
.ar-event-warn > i, .ar-event-warn > svg { width: 12px; height: 12px; }
.ar-teacher-calendar-event.is-missing-report { border-color: #F59E0B !important; }

/* Axe des heures : TN devant l'heure, sur une seule ligne */
.ar-teacher-calendar-times span b { white-space: nowrap; }
.ar-teacher-calendar-times span b sup { font-size: 8px; margin-right: 2px; vertical-align: super; }
.ar-teacher-calendar-times span i { white-space: nowrap; }

/* ============================================================
   v64 — calendrier : légende avec compteurs + barre rapports manquants
   ============================================================ */
.ar-teacher-status-legend .ar-legend-count {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 20px; padding: 0 6px; margin: 0 2px;
    border-radius: 999px;
    background: #F1F5F9; color: #334155;
    font-size: 11.5px; font-weight: 800;
}

.ar-week-missing-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-wrap: wrap;
    padding: 12px 16px; margin-bottom: 14px;
    border: 1px solid #FDE68A;
    border-radius: 14px;
    background: linear-gradient(180deg, #FFFBEB, #FFF7ED);
}
.ar-week-missing-bar.is-active { border-color: #FCA5A5; background: linear-gradient(180deg, #FEF2F2, #FFF1F2); }
.ar-week-missing-msg { display: inline-flex; align-items: center; gap: 8px; color: #92400E; font-size: 13.5px; font-weight: 600; }
.ar-week-missing-bar.is-active .ar-week-missing-msg { color: #B91C1C; }
.ar-week-missing-msg > i, .ar-week-missing-msg > svg { width: 18px; height: 18px; color: #D97706; }
.ar-week-missing-bar.is-active .ar-week-missing-msg > i { color: #DC2626; }
.ar-week-missing-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 12px;
    background: #B45309; color: #fff;
    font-size: 13px; font-weight: 700; text-decoration: none;
    transition: transform 140ms ease-out, filter 140ms ease-out;
}
.ar-week-missing-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.ar-week-missing-btn.is-clear { background: #fff; color: #B91C1C; border: 1px solid #FCA5A5; }
.ar-week-missing-btn > i, .ar-week-missing-btn > svg { width: 15px; height: 15px; }

/* Calendrier : état de chargement AJAX */
.ar-teacher-calendar-page.is-ajax-loading { opacity: .6; pointer-events: none; transition: opacity 120ms ease-out; }

/* ============================================================
   v65 — calendrier : footer carte (rond+warning à gauche, élèves à droite),
   légende compteur après le nom, warning n'altère pas la couleur
   ============================================================ */

/* La carte sans rapport garde sa couleur de niveau (pas d'override) */
.ar-teacher-calendar-event.is-missing-report { border-color: var(--ar-event-color, #005064) !important; }

/* Footer : à gauche rond de statut (+ warning), à droite nb d'élèves */
.ar-teacher-calendar-event footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px; margin-top: auto;
}
.ar-event-foot-left { display: inline-flex; align-items: center; gap: 6px; }
.ar-teacher-calendar-event .ar-event-dot {
    width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto;
}
.ar-event-count { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #475569; }
.ar-event-count > i, .ar-event-count > svg { width: 12px; height: 12px; }

/* Warning « rapport manquant » : chip inline en bas à gauche (pas d'absolu) */
.ar-event-warn {
    position: static !important;
    display: inline-grid; place-items: center;
    width: 16px; height: 16px; border-radius: 5px;
    background: #FEF3C7; color: #B45309; flex: 0 0 auto;
}
.ar-event-warn > i, .ar-event-warn > svg { width: 11px; height: 11px; }

/* TN/CA après l'heure sur la carte */
.ar-teacher-calendar-event time small { color: var(--ar-event-color, #005064); font-size: 9px; font-weight: 800; letter-spacing: .03em; }
.ar-teacher-calendar-event .ar-event-ca { font-weight: 700; }

/* Légende : rond · nom · compteur (compteur après le nom) */
.ar-teacher-status-legend li { display: flex; align-items: center; gap: 8px; }
.ar-teacher-status-legend .ar-legend-label { flex: 1 1 auto; }

/* ============================================================
   v66 — header allégé (utilisateur + rôle discret) + rapport liste
   ============================================================ */
.ar-portal-topbar .ar-portal-user { gap: 12px; }
.ar-portal-topbar .ar-portal-userbox { gap: 9px; }
.ar-portal-topbar .ar-portal-userbox .ar-portal-avatar {
    width: 36px; height: 36px; border-radius: 11px; font-size: 12px;
}
.ar-portal-topbar .ar-portal-username { font-size: 13px; }
/* Rôle : texte discret sous le nom (plus de grosse pastille jaune) */
.ar-portal-topbar .ar-portal-userbox .ar-portal-role-badge {
    background: transparent !important;
    color: #94A3B8 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    gap: 5px !important;
    font-size: 11px !important; font-weight: 600 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase;
}
.ar-portal-topbar .ar-portal-userbox .ar-portal-role-badge::before {
    content: "" !important;
    width: 5px !important; height: 5px !important;
    border-radius: 50% !important;
    background: #C4B5FD !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* Vue liste : bouton « Rédiger » (action + qui ouvre le rapport) */
.ar-list-report-add {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 11px; border-radius: 10px;
    background: #6D28D9; color: #fff;
    font-size: 12px; font-weight: 700; text-decoration: none;
    transition: transform 140ms ease-out, filter 140ms ease-out;
}
.ar-list-report-add:hover { transform: translateY(-1px); filter: brightness(1.06); }
.ar-list-report-add > i, .ar-list-report-add > svg { width: 14px; height: 14px; }

/* ============================================================
   v67 — carte calendrier : rond de statut dans le footer (pas en absolu)
   + warning « rapport manquant » dans le popup
   ============================================================ */
/* Le rond ne doit plus flotter en haut à droite : il vit dans le footer */
.ar-teacher-calendar-event footer .ar-event-dot,
.ar-event-foot-left .ar-event-dot {
    position: static !important;
    top: auto !important; right: auto !important;
    box-shadow: none !important;
    width: 9px !important; height: 9px !important;
}
.ar-event-foot-left { display: inline-flex; align-items: center; gap: 6px; }

/* Warning « rapport manquant » dans le popup (hover) */
.ar-event-pop-warn {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 8px 0 0; padding: 5px 9px;
    border-radius: 8px;
    background: #FEF3C7; color: #92400E;
    font-size: 12px; font-weight: 700;
}
.ar-event-pop-warn > i, .ar-event-pop-warn > svg { width: 14px; height: 14px; color: #D97706; }
/* Variante « présence à saisir » (teal) des indicateurs calendrier */
.ar-event-warn.is-presence { color: #0f766e; background: #ccfbf1; }
.ar-event-pop-warn.is-presence { background: #ccfbf1; color: #0f766e; }
.ar-event-pop-warn.is-presence > i, .ar-event-pop-warn.is-presence > svg { color: #0d9488; }

/* ============================================================
   v68 — actions rapport (liste + séances groupe) : couleurs douces
   ============================================================ */

/* « Rédiger » : indigo doux (moins flagrant que le violet plein) */
.ar-list-report-add {
    background: #EEF2FF !important;
    color: #4338CA !important;
    border: 1px solid #E0E7FF;
}
.ar-list-report-add:hover { background: #E0E7FF !important; filter: none; }

/* « Soumis » : même format, vert + coche */
.ar-list-report-done {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 11px; border-radius: 10px;
    background: #DCFCE7; color: #15803D; border: 1px solid #BBF7D0;
    font-size: 12px; font-weight: 700; text-decoration: none;
    transition: transform 140ms ease-out, background 140ms ease-out;
}
.ar-list-report-done:hover { transform: translateY(-1px); background: #BBF7D0; }
.ar-list-report-done > i, .ar-list-report-done > svg { width: 14px; height: 14px; }

/* Colonne Présence (liste séances, staff) : miroir de la colonne Rapport, en teal */
.ar-seances-list-panel.is-staff .ar-seances-list-head,
.ar-seances-list-panel.is-staff .ar-seances-row {
    grid-template-columns: 96px 86px minmax(148px, 1fr) 118px 118px 40px;
}
.ar-seances-cell-presence { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* « Saisir » (à faire) = ambre : action requise, pas de vert « fait » */
.ar-list-presence-add {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 11px; border-radius: 10px;
    background: #FEF3C7; color: #B45309; border: 1px solid #FDE68A;
    font-size: 12px; font-weight: 700; text-decoration: none;
    transition: transform 140ms ease-out, background 140ms ease-out;
}
.ar-list-presence-add:hover { transform: translateY(-1px); background: #FDE68A; }
/* « Saisie » (fait) = vert, cohérent avec « Soumis » */
.ar-list-presence-done {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 11px; border-radius: 10px;
    background: #DCFCE7; color: #15803D; border: 1px solid #BBF7D0;
    font-size: 12px; font-weight: 700; text-decoration: none;
    transition: transform 140ms ease-out, background 140ms ease-out;
}
.ar-list-presence-done:hover { transform: translateY(-1px); background: #BBF7D0; }
.ar-list-presence-add > i, .ar-list-presence-add > svg,
.ar-list-presence-done > i, .ar-list-presence-done > svg { width: 14px; height: 14px; }
@media (max-width: 900px) {
    .ar-seances-list-panel.is-staff .ar-seances-row {
        grid-template-columns: 1fr auto;
        grid-template-areas: "date statut" "time report" "time presence" "time actions";
    }
    .ar-seances-cell-presence { grid-area: presence; justify-self: end; }
}

/* « Voir » : bouton net et discret (redesign) */
.ar-teacher-list-actions .ar-list-action-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: 10px;
    background: #F8FAFC; color: #334155; border: 1px solid #E2E8F0;
    font-size: 12px; font-weight: 700; text-decoration: none;
    transition: transform 140ms ease-out, background 140ms ease-out, border-color 140ms ease-out;
}
.ar-teacher-list-actions .ar-list-action-btn:hover {
    transform: translateY(-1px);
    background: #EEF2FF; border-color: #C7D2FE; color: #4338CA;
}
.ar-teacher-list-actions .ar-list-action-btn > i,
.ar-teacher-list-actions .ar-list-action-btn > svg { width: 14px; height: 14px; }

/* Section séances du groupe : bouton « Rédiger le rapport » — même indigo doux */
.ar-seance-report-btn.ar-kpi-btn-solid {
    background: #EEF2FF !important;
    color: #4338CA !important;
    border: 1px solid #E0E7FF !important;
    box-shadow: none !important;
}
.ar-seance-report-btn.ar-kpi-btn-solid:hover { background: #E0E7FF !important; }
.ar-seance-report-btn.ar-kpi-btn-solid i,
.ar-seance-report-btn.ar-kpi-btn-solid svg { color: #4338CA !important; }

/* ============================================================
   v69 — TN/CA en préfixe (ligne 1 = TN, ligne 2 = CA), sans « CA » flottant
   ============================================================ */
/* Popup : label TN/CA devant l'heure, petit et discret (plus de pill flottante) */
.ar-event-pop-meta li b {
    margin: 0 5px 0 0 !important;
    padding: 0 !important;
    background: none !important;
    color: #94A3B8 !important;
    border-radius: 0 !important;
    font-size: 10px; font-weight: 800; letter-spacing: .03em;
}
/* Au survol, la petite carte est masquée derrière le popup : rien ne dépasse */
.ar-teacher-calendar-event:hover > time,
.ar-teacher-calendar-event:hover > .ar-event-ca,
.ar-teacher-calendar-event:hover > .ar-event-title,
.ar-teacher-calendar-event:hover > footer {
    visibility: hidden;
}
/* Carte : TN/CA après l'heure */
.ar-teacher-calendar-event time small {
    margin-left: 4px;
    color: var(--ar-event-color, #005064);
    font-size: 9px; font-weight: 800; letter-spacing: .03em;
}
.ar-teacher-calendar-event .ar-event-ca small {
    margin-left: 4px;
    color: #94A3B8;
    font-size: 9px; font-weight: 800; letter-spacing: .03em;
}

/* ============================================================
   v70 — tags de statut « rond + texte » (couleur du statut) partout
   + bouton « Voir » aligné sur le format Rédiger/Soumis
   ============================================================ */

/* Statut : pastille discrète = rond coloré + texte à la couleur du statut */
.ar-list-status {
    display: inline-flex !important;
    align-items: center; gap: 6px;
    padding: 4px 11px !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 1px solid #E7ECF3 !important;
    font-size: 12px !important; font-weight: 700 !important;
    line-height: 1.2 !important;
}
.ar-list-status::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; flex: 0 0 auto;
}
.ar-list-status.is-confirmed { color: #16A34A !important; }
.ar-list-status.is-done      { color: #64748B !important; }
.ar-list-status.is-recovery  { color: #2563EB !important; }
.ar-list-status.is-cancel    { color: #EA580C !important; }
.ar-list-status.is-free      { color: #9333EA !important; }

/* « Voir » (vue liste calendrier) : même format soft que Rédiger/Soumis */
.ar-teacher-list-actions .ar-list-action-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 11px; border-radius: 10px;
    background: #F1F5F9; color: #475569; border: 0;
    font-size: 12px; font-weight: 700; text-decoration: none;
    transition: transform 140ms ease-out, background 140ms ease-out, color 140ms ease-out;
}
.ar-teacher-list-actions .ar-list-action-btn:hover {
    transform: translateY(-1px); background: #E2E8F0; color: #334155;
}
.ar-teacher-list-actions .ar-list-action-btn > i,
.ar-teacher-list-actions .ar-list-action-btn > svg { width: 14px; height: 14px; }

/* ============================================================
   v71 — STATUTS UNIFORMES sur toutes les pages
   Un seul visuel (rond + texte) + une seule palette sémantique.
   Familles couvertes : ar-list-status, ar-group-status,
   ar-group-ov-status, ar-portal-status.
   ============================================================ */

/* Visuel commun : pastille blanche, bord léger, rond coloré + texte coloré */
.ar-list-status,
.ar-group-status,
.ar-group-ov-status,
.ar-portal-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 11px !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 1px solid #E7ECF3 !important;
    box-shadow: none !important;
    color: #475569 !important;               /* défaut : slate */
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}
.ar-list-status::before,
.ar-group-status::before,
.ar-group-ov-status::before,
.ar-portal-status::before {
    content: "" !important;
    width: 7px !important; height: 7px !important;
    border-radius: 50% !important;
    background: currentColor !important;
    box-shadow: none !important;
    flex: 0 0 auto !important;
    -webkit-mask: none !important; mask: none !important;   /* neutralise d'éventuelles icônes */
}
/* Neutralise les surcharges spécifiques (ombres, fonds) de l'aperçu groupe */
.ar-group-ov-page .ar-group-ov-status,
.ar-group-ov-page .ar-group-ov-status.is-active {
    background: #fff !important;
    box-shadow: none !important;
}

/* ── Palette sémantique (le rond suit currentColor) ── */
/* VERT — en cours / active */
.ar-group-status.is-live,
.ar-group-ov-status.is-active            { color: #16A34A !important; }
/* BLEU — à venir / confirmée / planifiée */
.ar-list-status.is-confirmed,
.ar-group-status.is-soon,
.ar-group-ov-status.is-upcoming,
.ar-portal-status.ar-portal-status-a-venir { color: #2563EB !important; }
/* SLATE — terminé / complétée / passé */
.ar-list-status.is-done,
.ar-group-status.is-done,
.ar-group-ov-status.is-finished,
.ar-portal-status.ar-portal-status-termine { color: #64748B !important; }
/* INDIGO — rattrapage */
.ar-list-status.is-recovery              { color: #6366F1 !important; }
/* ORANGE — reportée / annulée */
.ar-list-status.is-cancel,
.ar-group-status.is-cancel               { color: #EA580C !important; }
/* VIOLET — offerte */
.ar-list-status.is-free                  { color: #9333EA !important; }
/* AMBRE — en attente */
.ar-group-status.is-wait,
.ar-portal-status.ar-portal-status-en-attente { color: #D97706 !important; }
/* Accueil (cartes parent) : en cours = vert, annulé = orange */
.ar-portal-status.ar-portal-status-en-cours { color: #16A34A !important; }
.ar-portal-status.ar-portal-status-annule,
.ar-portal-status.ar-portal-status-annulee  { color: #EA580C !important; }

/* ============================================================
   v72 — page groupe : couleur de marque unique (violet) partout,
   la couleur du NIVEAU n'est conservée que dans le header du groupe.
   ============================================================ */
.ar-group-ov-page,
.ar-group-section-head,
.ar-sms-page {
    --ar-niv: #7C3AED !important;
    --ar-niv-soft: #F5F3FF !important;
}
/* Header du groupe : on restaure la couleur du niveau (icône, accents header) */
.ar-group-ov-header {
    --ar-niv: var(--ar-level, #7C3AED) !important;
    --ar-niv-soft: var(--ar-level-soft, #F5F3FF) !important;
}

/* ============================================================
   v73 — PALETTE DE STATUT FINALE, alignée sur TOUS les supports
   (pills, dots d'événement, légende, mini-calendrier, chips, timeline)
   Bleu=à venir · Slate=terminé · Teal=rattrapage · Orange=reportée
   · Rose=offerte · Vert=en cours · Ambre=en attente
   ============================================================ */

/* BLEU — à venir / confirmée */
.ar-list-status.is-confirmed,
.ar-list-date-chip.is-confirmed svg { color: #2563EB !important; }
.ar-event-dot.is-confirmed,
.ar-teacher-status-legend i.is-confirmed,
.ar-mini-dots i.is-confirmed,
.ar-tl-dot.is-confirmed,
.ar-teacher-calendar-list-row.is-confirmed time i { background: #2563EB !important; }
.ar-week-summary-item.is-confirmed { border-left-color: #2563EB !important; }

/* SLATE — terminé / complétée */
.ar-list-status.is-done,
.ar-list-date-chip.is-done svg { color: #64748B !important; }
.ar-event-dot.is-done,
.ar-teacher-status-legend i.is-done,
.ar-mini-dots i.is-done,
.ar-tl-dot.is-done { background: #64748B !important; }

/* ROSE — rattrapage (distinct du bleu à venir) */
.ar-list-status.is-recovery,
.ar-list-date-chip.is-recovery svg { color: var(--sp-st-rattr-fg) !important; }
.ar-event-dot.is-recovery,
.ar-teacher-status-legend i.is-recovery,
.ar-mini-dots i.is-recovery,
.ar-tl-dot.is-recovery,
.ar-teacher-calendar-list-row.is-recovery time i { background: var(--sp-st-rattr-fg) !important; }
.ar-teacher-calendar-list-row.is-recovery mark { color: var(--sp-st-rattr-fg) !important; }
.ar-week-summary-item.is-recovery { border-left-color: var(--sp-st-rattr-fg) !important; }

/* ORANGE — reportée / annulée */
.ar-list-status.is-cancel,
.ar-list-date-chip.is-cancel svg { color: #EA580C !important; }
.ar-event-dot.is-cancel,
.ar-teacher-status-legend i.is-cancel,
.ar-mini-dots i.is-cancel,
.ar-tl-dot.is-cancel,
.ar-teacher-calendar-list-row.is-cancel time i { background: #EA580C !important; }
.ar-teacher-calendar-list-row.is-cancel mark { color: #EA580C !important; }
.ar-week-summary-item.is-cancel { border-left-color: #EA580C !important; }

/* VIOLET — offerte */
.ar-list-status.is-free,
.ar-list-date-chip.is-free svg { color: #9333EA !important; }
.ar-event-dot.is-free,
.ar-teacher-status-legend i.is-free,
.ar-mini-dots i.is-free,
.ar-tl-dot.is-free { background: #9333EA !important; }

/* ============================================================
   v74 — Offerte = VERT + alignement de la légende page séances
   (.ar-seances-legend) et des compteurs sur la palette unifiée
   ============================================================ */

/* Légende de la page séances : mêmes couleurs que partout ailleurs */
.ar-seances-legend i.is-confirmed { background: #2563EB !important; } /* Planifiée / à venir */
.ar-seances-legend i.is-done      { background: #64748B !important; } /* Complétée */
.ar-seances-legend i.is-recovery  { background: var(--sp-st-rattr-fg) !important; } /* Rattrapage (rose) */
.ar-seances-legend i.is-cancel    { background: #EA580C !important; } /* Reportée */
.ar-seances-legend i.is-free      { background: #16A34A !important; } /* Offerte (vert) */

/* Offerte = VERT partout (remplace le violet précédent) */
.ar-list-status.is-free,
.ar-list-date-chip.is-free svg { color: #16A34A !important; }
.ar-event-dot.is-free,
.ar-teacher-status-legend i.is-free,
.ar-mini-dots i.is-free,
.ar-tl-dot.is-free { background: #16A34A !important; }

/* Compteurs séances : rattrapage aligné en rose */
.ar-count.is-rattr b { color: #DB2777 !important; }
.ar-count.is-upcoming b { color: #2563EB !important; }

/* Aperçu groupe : rejoindre + message restent violets, calendrier reste contour blanc. */
.ar-group-ov-page .ar-btn.ar-kpi-btn-solid,
.ar-group-ov-page .ar-btn.ar-cta-parents {
    border-color: #DDD6FE !important;
    background: linear-gradient(180deg, #7C3AED, #5B21B6) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(109,40,217,.16) !important;
}
.ar-group-ov-page .ar-btn.ar-kpi-btn-solid:hover,
.ar-group-ov-page .ar-btn.ar-cta-parents:hover {
    filter: brightness(1.04);
    box-shadow: 0 14px 30px rgba(109,40,217,.20) !important;
}
.ar-group-ov-page .ar-btn.ar-kpi-btn-solid svg,
.ar-group-ov-page .ar-btn.ar-cta-parents svg {
    color: #fff !important;
}
.ar-group-ov-page .ar-btn.ar-kpi-btn-soft {
    border-color: #DDD6FE !important;
    background: #fff !important;
    color: #6D28D9 !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.035), inset 0 0 0 1px #EDE9FE !important;
}
.ar-group-ov-page .ar-btn.ar-kpi-btn-soft:hover {
    background: #F8F6FF !important;
    filter: none;
    box-shadow: 0 10px 24px rgba(109,40,217,.08), inset 0 0 0 1px #DDD6FE !important;
}
.ar-group-ov-page .ar-btn.ar-kpi-btn-soft svg {
    color: #6D28D9 !important;
}
.ar-group-seances .ar-btn.ar-kpi-btn-soft {
    border-color: #DDD6FE !important;
    background: #fff !important;
    color: #6D28D9 !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.035), inset 0 0 0 1px #EDE9FE !important;
}
.ar-group-seances .ar-btn.ar-kpi-btn-soft:hover {
    background: #F8F6FF !important;
    filter: none;
    box-shadow: 0 10px 24px rgba(109,40,217,.08), inset 0 0 0 1px #DDD6FE !important;
}
.ar-group-seances .ar-btn.ar-kpi-btn-soft svg {
    color: #6D28D9 !important;
}

/* Filtres — design commun calendrier / séances / groupes */
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-filter-control,
.ar-group-seances .ar-calendar-filter-control,
.ar-portal-view-groupes .ar-calendar-filter-control {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border: 1px solid #EEF2F7 !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #334155 !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.025) !important;
}
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-filter-control > i,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-filter-control > svg,
.ar-group-seances .ar-calendar-filter-control > i,
.ar-group-seances .ar-calendar-filter-control > svg,
.ar-portal-view-groupes .ar-calendar-filter-control > i,
.ar-portal-view-groupes .ar-calendar-filter-control > svg {
    width: 17px !important;
    height: 17px !important;
    color: #6D28D9 !important;
    stroke-width: 2.2 !important;
    flex: 0 0 auto !important;
}
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-filter-control select,
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-filter-control input,
.ar-group-seances .ar-calendar-filter-control select,
.ar-group-seances .ar-calendar-filter-control input,
.ar-portal-view-groupes .ar-calendar-filter-control select,
.ar-portal-view-groupes .ar-calendar-filter-control input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #334155 !important;
    font: inherit !important;
    font-size: 13.5px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-filter-control select,
.ar-group-seances .ar-calendar-filter-control select,
.ar-portal-view-groupes .ar-calendar-filter-control select {
    appearance: none;
    cursor: pointer;
}
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-filter-control input::placeholder,
.ar-group-seances .ar-calendar-filter-control input::placeholder,
.ar-portal-view-groupes .ar-calendar-filter-control input::placeholder {
    color: #64748B !important;
    opacity: 1 !important;
}
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-filter-control:focus-within,
.ar-group-seances .ar-calendar-filter-control:focus-within,
.ar-portal-view-groupes .ar-calendar-filter-control:focus-within {
    border-color: #C4B5FD !important;
    box-shadow: 0 0 0 3px rgba(109,40,217,.10) !important;
}
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-filter-reset,
.ar-portal-view-groupes .ar-groups-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid #EEF2F7;
    border-radius: 14px;
    background: #fff;
    color: #64748B;
    font-size: 13px;
    font-weight: 720;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(15,23,42,.025);
}
.ar-portal-role-teacher.ar-portal-view-calendrier .ar-calendar-filter-reset:hover,
.ar-portal-view-groupes .ar-groups-reset:hover {
    transform: translateY(-1px);
    border-color: #DDD6FE;
    background: #F8F6FF;
    color: #6D28D9;
}

/* Composants filtres communs — source d'apparence unique */
.ar-portal-role-teacher .ar-filter-control {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border: 1px solid #EEF2F7 !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #334155 !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.025) !important;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, transform 180ms ease !important;
}
.ar-portal-role-teacher .ar-filter-control > i:first-child,
.ar-portal-role-teacher .ar-filter-control > svg:first-child {
    width: 17px !important;
    height: 17px !important;
    color: #6D28D9 !important;
    stroke-width: 2.2 !important;
    flex: 0 0 auto !important;
}
.ar-portal-role-teacher .ar-filter-control select,
.ar-portal-role-teacher .ar-filter-control input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #334155 !important;
    font: inherit !important;
    font-size: 13.5px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}
.ar-portal-role-teacher .ar-filter-control select {
    appearance: none !important;
    cursor: pointer !important;
}
.ar-portal-role-teacher .ar-filter-control input::placeholder {
    color: #64748B !important;
    opacity: 1 !important;
}
.ar-portal-role-teacher .ar-filter-control:focus-within {
    border-color: #C4B5FD !important;
    box-shadow: 0 0 0 3px rgba(109,40,217,.10) !important;
}
.ar-portal-role-teacher .ar-filter-chevron {
    width: 15px !important;
    height: 15px !important;
    color: #94A3B8 !important;
    stroke-width: 2.3 !important;
    flex: 0 0 auto !important;
    margin-left: 2px !important;
}
.ar-portal-role-teacher .ar-filter-search {
    min-width: min(260px, 100%) !important;
}
.ar-portal-role-teacher .ar-filter-reset {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 42px !important;
    padding: 0 13px !important;
    border: 1px solid #EEF2F7 !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #64748B !important;
    font-size: 13px !important;
    font-weight: 720 !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.025) !important;
    cursor: pointer !important;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease !important;
}
.ar-portal-role-teacher .ar-filter-reset:hover,
.ar-portal-role-teacher .ar-filter-reset:focus-visible {
    transform: translateY(-1px) !important;
    border-color: #DDD6FE !important;
    background: #F8F6FF !important;
    color: #6D28D9 !important;
    box-shadow: 0 10px 24px rgba(109,40,217,.08) !important;
}
.ar-portal-role-teacher .ar-filter-reset svg {
    width: 16px !important;
    height: 16px !important;
    color: currentColor !important;
}
.ar-portal-role-teacher .ar-period-today,
.ar-portal-role-teacher .ar-period-nav {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 42px !important;
    border: 1px solid #EEF2F7 !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #334155 !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.025) !important;
}
.ar-portal-role-teacher .ar-period-today {
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 13px !important;
    font-size: 13px !important;
    font-weight: 760 !important;
    text-decoration: none !important;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease !important;
}
.ar-portal-role-teacher .ar-period-today:hover {
    transform: translateY(-1px) !important;
    border-color: #DDD6FE !important;
    background: #F8F6FF !important;
    color: #6D28D9 !important;
}
.ar-portal-role-teacher .ar-period-today svg {
    width: 16px !important;
    height: 16px !important;
    color: #6D28D9 !important;
}
.ar-portal-role-teacher .ar-period-nav {
    gap: 4px !important;
    padding: 3px !important;
}
.ar-portal-role-teacher .ar-period-nav a {
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: #64748B !important;
    box-shadow: none !important;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease !important;
}
.ar-portal-role-teacher .ar-period-nav a:hover,
.ar-portal-role-teacher .ar-period-nav a:focus-visible {
    transform: translateY(-1px) !important;
    background: #F8F6FF !important;
    color: #6D28D9 !important;
}
.ar-portal-role-teacher .ar-period-nav strong {
    min-width: 118px !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 760 !important;
    white-space: nowrap !important;
}
.ar-portal-role-teacher .ar-period-nav svg {
    width: 16px !important;
    height: 16px !important;
    color: currentColor !important;
}

/* Statuts — composant et palette finale unique */
.ar-status-badge,
.ar-list-status,
.ar-group-status,
.ar-group-ov-status,
.ar-portal-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 26px !important;
    padding: 4px 10px !important;
    border: 1px solid #EEF2F7 !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
.ar-status-badge::before,
.ar-list-status::before,
.ar-group-status::before,
.ar-group-ov-status::before,
.ar-portal-status::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent) !important;
    flex: 0 0 auto !important;
}

/* Séances */
.ar-status-badge.is-confirmed,
.ar-list-status.is-confirmed,
.ar-list-date-chip.is-confirmed svg { color: #2563EB !important; }
.ar-status-badge.is-done,
.ar-list-status.is-done,
.ar-list-date-chip.is-done svg { color: #64748B !important; }
.ar-status-badge.is-recovery,
.ar-list-status.is-recovery,
.ar-list-date-chip.is-recovery svg { color: var(--sp-st-rattr-fg) !important; }
.ar-status-badge.is-cancel,
.ar-list-status.is-cancel,
.ar-list-date-chip.is-cancel svg { color: #EA580C !important; }
.ar-status-badge.is-free,
.ar-list-status.is-free,
.ar-list-date-chip.is-free svg { color: #16A34A !important; }

/* Groupes */
.ar-status-badge.is-live,
.ar-group-status.is-live,
.ar-group-ov-status.is-active,
.ar-portal-status.ar-portal-status-en-cours { color: #16A34A !important; }
.ar-status-badge.is-soon,
.ar-group-status.is-soon,
.ar-group-ov-status.is-upcoming,
.ar-portal-status.ar-portal-status-a-venir { color: #6D28D9 !important; }
.ar-status-badge.is-wait,
.ar-group-status.is-wait,
.ar-portal-status.ar-portal-status-en-attente { color: #D97706 !important; }
.ar-group-status.is-done,
.ar-group-ov-status.is-finished,
.ar-portal-status.ar-portal-status-termine { color: #64748B !important; }
.ar-group-status.is-cancel,
.ar-portal-status.ar-portal-status-annule,
.ar-portal-status.ar-portal-status-annulee { color: #EA580C !important; }

/* Points, légendes et timelines alignés sur la même palette */
.ar-event-dot.is-confirmed,
.ar-teacher-status-legend i.is-confirmed,
.ar-seances-legend i.is-confirmed,
.ar-mini-dots i.is-confirmed,
.ar-tl-dot.is-confirmed,
.ar-teacher-calendar-list-row.is-confirmed time i { background: #2563EB !important; }
.ar-event-dot.is-done,
.ar-teacher-status-legend i.is-done,
.ar-seances-legend i.is-done,
.ar-mini-dots i.is-done,
.ar-tl-dot.is-done { background: #64748B !important; }
.ar-event-dot.is-recovery,
.ar-teacher-status-legend i.is-recovery,
.ar-seances-legend i.is-recovery,
.ar-mini-dots i.is-recovery,
.ar-tl-dot.is-recovery,
.ar-teacher-calendar-list-row.is-recovery time i { background: #6D28D9 !important; }
.ar-event-dot.is-cancel,
.ar-teacher-status-legend i.is-cancel,
.ar-seances-legend i.is-cancel,
.ar-mini-dots i.is-cancel,
.ar-tl-dot.is-cancel,
.ar-teacher-calendar-list-row.is-cancel time i { background: #EA580C !important; }
.ar-event-dot.is-free,
.ar-teacher-status-legend i.is-free,
.ar-seances-legend i.is-free,
.ar-mini-dots i.is-free,
.ar-tl-dot.is-free { background: #16A34A !important; }
.ar-week-summary-item.is-confirmed { border-left-color: transparent !important; }
.ar-week-summary-item.is-done,
.ar-week-summary-item.is-recovery,
.ar-week-summary-item.is-cancel { border-left-color: transparent !important; }
.ar-count.is-upcoming b { color: #2563EB !important; }
.ar-count.is-done b { color: #64748B !important; }
.ar-count.is-rattr b { color: #6D28D9 !important; }

.ar-status-legend {
    margin: 0;
    padding: 0;
}
.ar-status-legend-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.ar-status-legend-list {
    list-style: none;
}

/* Correctif overview groupe : l'ancien statut positionnait le rond en absolu. */
.ar-group-ov-page .ar-group-ov-status {
    position: static !important;
    padding: 4px 10px !important;
    gap: 7px !important;
}
.ar-group-ov-page .ar-group-ov-status::before {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 auto !important;
}

/* Dashboard enseignant : dots des séances alignés sur la palette statuts commune. */
.ar-teacher-session-dot.is-confirmed {
    background: #2563EB !important;
    box-shadow: 0 0 0 5px rgba(37,99,235,.12) !important;
}
.ar-teacher-session-dot.is-done {
    background: #64748B !important;
    box-shadow: 0 0 0 5px rgba(100,116,139,.12) !important;
}
.ar-teacher-session-dot.is-recovery {
    background: #6D28D9 !important;
    box-shadow: 0 0 0 5px rgba(109,40,217,.12) !important;
}
.ar-teacher-session-dot.is-cancel {
    background: #EA580C !important;
    box-shadow: 0 0 0 5px rgba(234,88,12,.14) !important;
}
.ar-teacher-session-dot.is-free {
    background: #16A34A !important;
    box-shadow: 0 0 0 5px rgba(22,163,74,.12) !important;
}
.ar-teacher-week-dots i.is-confirmed { background: #2563EB !important; }
.ar-teacher-week-dots i.is-done { background: #64748B !important; }
.ar-teacher-week-dots i.is-recovery { background: #6D28D9 !important; }
.ar-teacher-week-dots i.is-cancel { background: #EA580C !important; }
.ar-teacher-week-dots i.is-free { background: #16A34A !important; }

/* ============================================================
   v75 — Forum type Facebook (publications, réponses, réactions)
   ============================================================ */
.ar-forum { display: flex; flex-direction: column; gap: 16px; }

.ar-forum-avatar {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, #7C3AED, #5B21B6);
    color: #fff; font-size: 14px; font-weight: 800;
}
.ar-forum-avatar.is-sm { width: 34px; height: 34px; font-size: 12px; }

/* Composer nouvelle publication */
.ar-forum-composer {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 16px; border-radius: 18px;
    background: #fff; border: 1px solid #E8EDF5; box-shadow: 0 2px 10px rgba(15,23,42,.04);
}
.ar-forum-new-form { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.ar-forum-new-title, .ar-forum-new-body, .ar-forum-reply-input, .ar-forum-edit-area {
    width: 100%; border: 1px solid #E2E8F0; border-radius: 12px;
    padding: 10px 12px; font-size: 14px; font-family: inherit; resize: vertical;
    background: #F8FAFC; transition: border-color 140ms ease-out, background 140ms ease-out;
}
.ar-forum-new-title { font-weight: 700; }
.ar-forum-new-title:focus, .ar-forum-new-body:focus, .ar-forum-reply-input:focus, .ar-forum-edit-area:focus {
    outline: none; border-color: #C4B5FD; background: #fff;
}
.ar-forum-new-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ar-forum-publish {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border: 0; border-radius: 12px; cursor: pointer;
    background: linear-gradient(180deg, #7C3AED, #5B21B6); color: #fff; font-weight: 700; font-size: 13.5px;
    transition: transform 140ms ease-out, filter 140ms ease-out;
}
.ar-forum-publish:hover { transform: translateY(-1px); filter: brightness(1.05); }
.ar-forum-publish > i, .ar-forum-publish > svg { width: 15px; height: 15px; }
.ar-forum-status { font-size: 12.5px; color: #DC2626; }

/* Fil / publication */
.ar-forum-feed { display: flex; flex-direction: column; gap: 16px; }
.ar-forum-thread {
    padding: 16px 18px; border-radius: 18px;
    background: #fff; border: 1px solid #E8EDF5; box-shadow: 0 2px 12px rgba(15,23,42,.05);
}
.ar-forum-thread-title { margin: 0 0 12px; font-size: 16px; font-weight: 800; color: #0F172A; }

.ar-forum-post { display: flex; gap: 12px; }
.ar-forum-post.is-reply { margin-top: 12px; padding-top: 12px; border-top: 1px solid #F1F5F9; }
.ar-forum-post-main { flex: 1 1 auto; min-width: 0; }
.ar-forum-post-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ar-forum-post-id strong { display: block; font-size: 14px; font-weight: 700; color: #1E293B; }
.ar-forum-role { font-size: 11.5px; color: #94A3B8; font-weight: 600; }
.ar-forum-post-meta { display: flex; align-items: center; gap: 6px; }
.ar-forum-post-meta time { font-size: 12px; color: #94A3B8; white-space: nowrap; }
.ar-forum-post-body { margin: 4px 0 8px; }
.ar-forum-post-body p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: #334155; }
.ar-forum-post.is-reply .ar-forum-post-body p { font-size: 13.5px; }

/* Menu ⋯ */
.ar-forum-menu { position: relative; }
.ar-forum-menu-btn {
    display: grid; place-items: center; width: 28px; height: 28px;
    border: 0; border-radius: 8px; background: transparent; color: #94A3B8; cursor: pointer;
}
.ar-forum-menu-btn:hover { background: #F1F5F9; color: #475569; }
.ar-forum-menu-btn > i, .ar-forum-menu-btn > svg { width: 16px; height: 16px; }
.ar-forum-menu-list {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 20;
    min-width: 150px; padding: 6px; border-radius: 12px;
    background: #fff; border: 1px solid #E8EDF5; box-shadow: 0 12px 30px rgba(15,23,42,.14);
}
.ar-forum-menu-list button {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 8px 10px; border: 0; border-radius: 8px; background: transparent;
    font-size: 13px; font-weight: 600; color: #334155; cursor: pointer; text-align: left;
}
.ar-forum-menu-list button:hover { background: #F5F7FB; }
.ar-forum-menu-list button.is-danger { color: #DC2626; }
.ar-forum-menu-list button > i, .ar-forum-menu-list button > svg { width: 15px; height: 15px; }

/* Barre de réactions */
.ar-forum-react-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ar-forum-react-count { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: #64748B; }
.ar-forum-react-emojis { font-size: 13px; }
.ar-forum-react-actions { display: inline-flex; gap: 4px; }
.ar-forum-react-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border: 0; border-radius: 999px; background: transparent;
    font-size: 12.5px; font-weight: 700; color: #64748B; cursor: pointer;
    transition: background 140ms ease-out, color 140ms ease-out;
}
.ar-forum-react-btn:hover { background: #F1F5F9; }
.ar-forum-react-btn.is-active { background: #F5F3FF; color: #6D28D9; }
.ar-forum-react-btn span { font-size: 13px; }

/* Édition en ligne */
.ar-forum-edit-actions { display: flex; gap: 8px; margin-top: 8px; }
.ar-forum-edit-actions button {
    padding: 6px 12px; border-radius: 9px; border: 1px solid #E2E8F0; background: #fff;
    font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.ar-forum-edit-save { background: #6D28D9 !important; color: #fff !important; border-color: #6D28D9 !important; }

/* Réponse */
.ar-forum-reply-form { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #F1F5F9; }
.ar-forum-reply-input { flex: 1 1 auto; background: #F1F5F9; }
.ar-forum-reply-form button {
    flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px;
    border: 0; border-radius: 50%; background: #6D28D9; color: #fff; cursor: pointer;
    transition: transform 140ms ease-out, filter 140ms ease-out;
}
.ar-forum-reply-form button:hover { transform: translateY(-1px); filter: brightness(1.05); }
.ar-forum-reply-form button > i, .ar-forum-reply-form button > svg { width: 16px; height: 16px; }
.ar-forum-reply-form button.is-sending { opacity: .55; pointer-events: none; }
.ar-forum-reply-form button.is-sending > svg { animation: ar-send-spin .6s linear infinite; }
@keyframes ar-send-spin { to { transform: rotate(360deg); } }

/* ============================================================
   v76 — Forum : composer repliable + tag parents + mentions
   ============================================================ */
/* Déclencheur repliable (style Facebook « Quoi de neuf ? ») */
.ar-forum-composer-trigger {
    flex: 1 1 auto; text-align: left;
    padding: 11px 16px; border: 0; border-radius: 999px;
    background: #F1F5F9; color: #64748B; font-size: 14px; font-weight: 500;
    cursor: pointer; transition: background 140ms ease-out;
}
.ar-forum-composer-trigger:hover { background: #E9EEF5; }
.ar-forum-composer.is-collapsed { align-items: center; }

/* Barre d'outils du composer */
.ar-forum-new-tools { display: flex; align-items: center; gap: 8px; }
.ar-forum-new-submit { display: flex; align-items: center; gap: 10px; }
.ar-forum-cancel {
    padding: 8px 14px; border: 1px solid #E2E8F0; border-radius: 12px;
    background: #fff; color: #475569; font-size: 13px; font-weight: 700; cursor: pointer;
}
.ar-forum-cancel:hover { background: #F5F7FB; }

/* Bouton + menu « Taguer » */
.ar-forum-tagpick { position: relative; }
.ar-forum-tag-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border: 1px solid #E2E8F0; border-radius: 12px;
    background: #fff; color: #6D28D9; font-size: 13px; font-weight: 700; cursor: pointer;
}
.ar-forum-tag-btn:hover { background: #F5F3FF; border-color: #DDD6FE; }
.ar-forum-tag-btn > i, .ar-forum-tag-btn > svg { width: 15px; height: 15px; }
.ar-forum-tag-menu {
    position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 30;
    min-width: 230px; max-height: 260px; overflow-y: auto; padding: 6px;
    border-radius: 14px; background: #fff; border: 1px solid #E8EDF5;
    box-shadow: 0 16px 40px rgba(15,23,42,.16);
}
.ar-forum-tag-menu button {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 7px 9px; border: 0; border-radius: 10px; background: transparent;
    font-size: 13px; font-weight: 600; color: #334155; cursor: pointer; text-align: left;
}
.ar-forum-tag-menu button:hover { background: #F5F3FF; }
/* Menu de mention flottant (réponses) : positionné en fixed par le JS. */
.ar-forum-tag-menu-float { position: fixed; bottom: auto; left: auto; }
/* Bouton @ dans la réponse. */
.ar-forum-reply-tag {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border: 0; background: none; color: #94A3B8;
    border-radius: 10px; cursor: pointer;
}
.ar-forum-reply-tag:hover { background: #F1F5F9; color: var(--ar-niv, #6D28D9); }
.ar-forum-reply-tag svg { width: 17px; height: 17px; }

/* Chips des parents tagués */
.ar-forum-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-forum-tag-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 6px 3px 10px; border-radius: 999px;
    background: #EDE9FE; color: #6D28D9; font-size: 12.5px; font-weight: 700;
}
.ar-forum-tag-chip button {
    display: grid; place-items: center; width: 18px; height: 18px;
    border: 0; border-radius: 50%; background: rgba(109,40,217,.15); color: #6D28D9;
    font-size: 14px; line-height: 1; cursor: pointer;
}
.ar-forum-tag-chip button:hover { background: rgba(109,40,217,.28); }

/* Mentions @Parent dans les messages */
.ar-forum-mention {
    color: #6D28D9; font-weight: 700; background: #F5F3FF;
    padding: 0 4px; border-radius: 5px;
}

/* ============================================================
   v77 — Forum : structure des réponses (fil) + inputs arrondis
   ============================================================ */

/* Réponses : indentées sous le message principal, rail de fil + bulles */
.ar-forum-replies {
    margin: 10px 0 0 21px;
    padding-left: 16px;
    border-left: 2px solid #EEF2F7;
    display: flex; flex-direction: column; gap: 10px;
}
.ar-forum-replies:empty { display: none; }
.ar-forum-post.is-reply {
    margin-top: 0; padding-top: 0; border-top: 0; gap: 10px;
}
.ar-forum-post.is-reply .ar-forum-avatar { width: 34px; height: 34px; font-size: 12px; }
.ar-forum-post.is-reply .ar-forum-post-body {
    margin: 4px 0 6px;
    padding: 9px 13px;
    background: #F5F7FB;
    border-radius: 4px 16px 16px 16px;   /* bulle façon fil de discussion */
}
.ar-forum-post.is-reply .ar-forum-post-body p:last-child { margin-bottom: 0; }
.ar-forum-post.is-reply .ar-forum-react-bar { padding-left: 2px; }

/* Le composer de réponse aligné dans le fil, arrondi */
.ar-forum-reply-form { margin: 12px 0 0 21px; padding: 12px 0 0 16px; border-top: 0; border-left: 2px solid #EEF2F7; }

/* Champs de saisie : arrondis, bordure douce, focus violet (jamais noir) */
.ar-forum input,
.ar-forum textarea {
    border: 1px solid #E6EAF2 !important;
    border-radius: 14px !important;
    outline: none !important;
    -webkit-appearance: none; appearance: none;
    color: #1E293B;
}
.ar-forum input:focus,
.ar-forum textarea:focus {
    border-color: #C4B5FD !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,.12) !important;
    background: #fff;
}
.ar-forum-reply-input { border-radius: 999px !important; }
.ar-forum input::placeholder,
.ar-forum textarea::placeholder { color: #94A3B8; }

/* ============================================================
   v78 — Forum composer : une seule section visible à la fois
   ============================================================ */
.ar-forum-composer:not(.is-collapsed) .ar-forum-composer-trigger { display: none !important; }
.ar-forum-composer.is-collapsed .ar-forum-new-form { display: none !important; }
.ar-forum-composer:not(.is-collapsed) { align-items: flex-start; }
.ar-forum-new-form { flex: 1 1 auto; min-width: 0; }

/* Forum : icône du bouton d'envoi de réponse parfaitement centrée */
.ar-forum-reply-form button {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    padding: 0; line-height: 0;
}
.ar-forum-reply-form button > i,
.ar-forum-reply-form button > svg { display: block; margin: 0; }

/* ============================================================
   v79 — Messagerie privée du groupe (DM enseignant ↔ parents)
   ============================================================ */
.ar-msg-shell {
    display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px;
    height: min(70vh, 620px);
}
.ar-msg-avatar {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, #7C3AED, #5B21B6); color: #fff;
    font-size: 13px; font-weight: 800;
}

/* Sidebar parents */
.ar-msg-sidebar {
    display: flex; flex-direction: column; min-height: 0;
    background: #fff; border: 1px solid #E8EDF5; border-radius: 20px; overflow: hidden;
    box-shadow: 0 2px 12px rgba(15,23,42,.04);
}
.ar-msg-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 10px; }
.ar-msg-sidebar-head h3 { margin: 0; font-size: 14px; font-weight: 800; color: #0F172A; }
.ar-msg-sidebar-head span {
    display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px;
    border-radius: 999px; background: #F1F5F9; color: #475569; font-size: 12px; font-weight: 800;
}
.ar-msg-contacts { flex: 1 1 auto; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.ar-msg-contact {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 10px; border: 0; border-radius: 14px; background: transparent; cursor: pointer; text-align: left;
    transition: background 140ms ease-out;
}
.ar-msg-contact:hover { background: #F5F7FB; }
.ar-msg-contact.is-active { background: #F5F3FF; }
.ar-msg-contact-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }

/* Badge de messages non lus par contact. */
.ar-msg-unread {
    flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: #DC2626; color: #fff;
    font-size: 11px; font-weight: 900;
}

/* Bouton « Envoyer à tous » (barre latérale). */
.ar-msg-broadcast-btn {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 0 12px 8px; padding: 8px 12px;
    border: 1px solid var(--ar-niv-soft, #EDE9FE); border-radius: 10px;
    background: #fff; color: var(--ar-niv, #6D28D9);
    font-size: 12.5px; font-weight: 800; cursor: pointer;
}
.ar-msg-broadcast-btn:hover { background: var(--ar-niv-soft, #F5F3FF); }
.ar-msg-broadcast-btn svg { width: 15px; height: 15px; }

/* Diffusion : modale séparée centrée (indépendante de la conversation). */
.ar-msg-broadcast {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(15, 23, 42, .45);
}
.ar-msg-broadcast[hidden] { display: none; }
.ar-msg-broadcast-card {
    width: min(560px, 94vw); max-height: 90vh; overflow: auto;
    background: #fff; border-radius: 18px; padding: 18px 18px 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
}
.ar-msg-broadcast-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ar-msg-broadcast-head strong { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 900; color: var(--ar-niv, #6D28D9); }
.ar-msg-broadcast-head svg { width: 15px; height: 15px; }
.ar-msg-broadcast-x { border: 0; background: none; font-size: 20px; line-height: 1; color: #94A3B8; cursor: pointer; }
.ar-msg-broadcast textarea {
    width: 100%; box-sizing: border-box; resize: vertical;
    padding: 9px 11px; border: 1px solid #E2E8F0; border-radius: 10px; font: inherit; font-size: 13.5px;
}
.ar-msg-broadcast-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.ar-msg-broadcast-actions .ar-msg-status { position: static; color: #64748B; }

/* Lien fiche FluentCRM dans l'en-tête. */
.ar-msg-fc-link { color: #94A3B8; margin-left: 4px; }
.ar-msg-fc-link:hover { color: var(--ar-niv, #6D28D9); }
.ar-msg-fc-link svg { width: 14px; height: 14px; vertical-align: -2px; }
.ar-msg-thread-head h3 { display: inline-flex; align-items: center; }
.ar-msg-contact-txt strong { font-size: 13.5px; font-weight: 700; color: #1E293B; }
.ar-msg-child { font-size: 11.5px; font-style: normal; font-weight: 700; color: var(--ar-niv, #6D28D9); }
.ar-msg-thread-head .ar-msg-child { color: inherit; opacity: .85; }

/* Bouton emoji + palette (forum, messages, SMS). */
.ar-msg-compose .ar-emoji-btn {
    flex: 0 0 auto; width: 46px; height: 46px; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #7C3AED; color: #fff;
    font-size: 30px; line-height: 1; cursor: pointer; border-radius: 50%;
    transition: background .15s ease, transform .1s ease;
}
.ar-msg-compose .ar-emoji-btn:hover { background: #6D28D9; }
.ar-msg-compose .ar-emoji-btn:active { transform: scale(.94); }
.ar-emoji-btn { cursor: pointer; }
.ar-emoji-pop {
    position: fixed; z-index: 10001;
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px;
    padding: 8px; width: 240px;
    background: #fff; border: 1px solid #E6EAF2; border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
}
.ar-emoji-item {
    border: 0; background: none; font-size: 20px; line-height: 1;
    padding: 6px; border-radius: 8px; cursor: pointer;
}
.ar-emoji-item:hover { background: #F1F5F9; }
.ar-msg-contact-txt small { font-size: 12px; color: #94A3B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

/* Fenêtre de conversation */
.ar-msg-thread-card {
    display: flex; flex-direction: column; min-height: 0;
    background: #fff; border: 1px solid #E8EDF5; border-radius: 20px; overflow: hidden;
    box-shadow: 0 2px 12px rgba(15,23,42,.04);
}
.ar-msg-thread-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #EEF2F7; }
.ar-msg-thread-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: #0F172A; }
.ar-msg-thread-head p { margin: 0; font-size: 12px; color: #94A3B8; }
.ar-msg-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: #FAFBFD; }
.ar-msg-empty { margin: auto; text-align: center; color: #94A3B8; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ar-msg-empty i, .ar-msg-empty svg { width: 30px; height: 30px; }
.ar-msg-empty strong { color: #64748B; font-size: 14px; }

.ar-msg-bubble { max-width: min(72%, 460px); padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.ar-msg-bubble p { margin: 0; }
.ar-msg-bubble span { display: block; margin-top: 4px; font-size: 10.5px; opacity: .7; }
.ar-msg-bubble.is-in { align-self: flex-start; background: #fff; border: 1px solid #EEF2F7; color: #334155; border-bottom-left-radius: 5px; }
.ar-msg-bubble.is-out { align-self: flex-end; background: linear-gradient(180deg, #7C3AED, #5B21B6); color: #fff; border-bottom-right-radius: 5px; }
.ar-msg-bubble.is-out span { color: #EDE9FE; }

/* Composer */
.ar-msg-composer { border-top: 1px solid #EEF2F7; }
.ar-msg-composer[hidden] { display: none !important; }

/* SmartCodes / modèles rapides (puces d'insertion). */
.ar-msg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px 0; }
.ar-msg-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border: 1px solid #E6EAF2; border-radius: 999px;
    background: #fff; color: #475569; font-size: 12px; font-weight: 700; cursor: pointer;
    transition: background 120ms, border-color 120ms, color 120ms;
}
.ar-msg-chip:hover { border-color: var(--ar-niv, #7C3AED); color: var(--ar-niv, #6D28D9); background: var(--ar-niv-soft, #F5F3FF); }
.ar-msg-chip svg { width: 13px; height: 13px; }
.ar-msg-chip.is-tpl { background: var(--ar-niv-soft, #F5F3FF); color: var(--ar-niv, #6D28D9); border-color: transparent; }
.ar-msg-chip-sep { width: 1px; height: 18px; background: #E6EAF2; margin: 0 2px; }
.ar-msg-broadcast .ar-msg-chips { padding: 0 0 8px; }

.ar-msg-compose { display: flex; align-items: flex-end; gap: 10px; padding: 12px 14px; border-top: 0; position: relative; }
.ar-msg-compose textarea {
    flex: 1 1 auto; resize: none; border: 1px solid #E6EAF2; border-radius: 16px;
    padding: 11px 14px; font-family: inherit; font-size: 14px; min-height: 44px; max-height: 140px; outline: none;
    background: #F8FAFC; transition: border-color 140ms ease-out, background 140ms ease-out;
}
.ar-msg-compose textarea:focus { border-color: #C4B5FD; background: #fff; box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.ar-msg-compose button[type="submit"] {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; padding: 0;
    background: linear-gradient(180deg, #7C3AED, #5B21B6); color: #fff;
    transition: transform 140ms ease-out, filter 140ms ease-out;
}
.ar-msg-compose button[type="submit"]:hover { transform: translateY(-1px); filter: brightness(1.05); }
.ar-msg-compose button[type="submit"] > i, .ar-msg-compose button[type="submit"] > svg { width: 18px; height: 18px; }
.ar-msg-status { position: absolute; bottom: -18px; left: 16px; font-size: 12px; color: #DC2626; margin: 0; }

/* L'attribut hidden doit primer sur le display des éléments SMS. */
.ar-msg-nophone-center[hidden],
.ar-msg-thread[hidden],
.ar-msg-compose[hidden] { display: none !important; }

/* Parent sans téléphone : message centré à la place du fil, aucun champ. */
.ar-msg-nophone-center {
    flex: 1 1 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 40px 24px; text-align: center;
}
.ar-msg-nophone-center .ar-msg-nophone-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin-bottom: 4px;
    border-radius: 50%; background: #FEE2E2; color: #DC2626;
}
.ar-msg-nophone-center .ar-msg-nophone-ic svg { width: 24px; height: 24px; }
.ar-msg-nophone-center strong { font-size: 15px; font-weight: 900; color: #B91C1C; }
.ar-msg-nophone-center span { max-width: 340px; font-size: 13px; font-weight: 600; color: #94A3B8; line-height: 1.5; }

@media (max-width: 720px) {
    .ar-msg-shell { grid-template-columns: 1fr; height: auto; }
    .ar-msg-thread { min-height: 320px; }
}

/* ============================================================
   v80 — Cloche : avatars par type de notification (SMS/forum/message)
   ============================================================ */
.ar-portal-bell-ava.is-forum { background: #EDE9FE; color: #6D28D9; }
.ar-portal-bell-ava.is-message { background: #DBEAFE; color: #1D4ED8; }
.ar-portal-bell-ava.is-sms { background: #CCFBF1; color: #0F766E; }
.ar-portal-bell-ava svg { width: 14px; height: 14px; }

/* ============================================================
   v81 — Case « Prévenir les parents / le parent par email »
   ============================================================ */
.ar-notify-check {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; color: #64748B; cursor: pointer; user-select: none;
    white-space: nowrap;
}
.ar-notify-check input { width: 15px; height: 15px; accent-color: #7C3AED; cursor: pointer; }
.ar-notify-check > i, .ar-notify-check > svg { width: 15px; height: 15px; color: #94A3B8; }
.ar-notify-check:hover { color: #6D28D9; }
.ar-notify-check:hover > i, .ar-notify-check:hover > svg { color: #6D28D9; }
/* Dans le composer de message : compacte, à gauche du champ */
.ar-msg-compose .ar-notify-check { flex: 0 0 auto; align-self: center; }

/* ============================================================
   v82 — Forum : ⋯ centré, titre sujet, popover réactions, tags élève/parent
   ============================================================ */
/* ⋯ menu : icône parfaitement centrée */
.ar-forum-menu-btn {
    display: inline-flex !important; align-items: center; justify-content: center;
    padding: 0; line-height: 0;
}
.ar-forum-menu-btn > i, .ar-forum-menu-btn > svg { display: block; margin: 0; }

/* Titre du sujet : plus lisible, avec accent violet */
.ar-forum-thread-title {
    display: flex; align-items: center; gap: 9px;
    font-size: 17px; font-weight: 800; color: #0F172A;
    letter-spacing: -.01em; line-height: 1.3;
    margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid #F1F5F9;
}
.ar-forum-thread-title::before {
    content: ""; flex: 0 0 auto; width: 4px; height: 18px; border-radius: 4px; background: #7C3AED;
}

/* Compteur de réactions = bouton cliquable + popover « qui a réagi » */
.ar-forum-react-count {
    border: 0; background: transparent; cursor: pointer; font: inherit;
    display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: #64748B;
}
.ar-forum-react-count:hover { color: #6D28D9; }
.ar-forum-reactors-pop {
    position: fixed; z-index: 10001;
    min-width: 190px; max-width: 280px; padding: 8px 10px;
    border-radius: 12px; background: #fff; border: 1px solid #E8EDF5;
    box-shadow: 0 12px 30px rgba(15,23,42,.16); font-size: 12.5px; color: #334155;
}
.ar-forum-reactors-grp { display: flex; gap: 6px; padding: 3px 0; line-height: 1.4; }
.ar-forum-reactors-grp span { flex: 0 0 auto; }

/* Menu Taguer : nom + badge Parent/Élève */
.ar-forum-tag-menu button { justify-content: flex-start; }
.ar-forum-tag-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-forum-tag-kind {
    flex: 0 0 auto; font-size: 10px; font-weight: 800; padding: 2px 7px;
    border-radius: 999px; text-transform: uppercase; letter-spacing: .02em;
}
.ar-forum-tag-kind.is-parent { background: #DBEAFE; color: #2563EB; }
.ar-forum-tag-kind.is-student { background: #DCFCE7; color: #15803D; }

/* ============================================================
   v83 — Forum : restaurer la checkbox native (cassée par le style des inputs)
   ============================================================ */
.ar-forum input[type="checkbox"],
.ar-notify-check input[type="checkbox"] {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    width: 16px !important; height: 16px !important;
    min-height: 0 !important;
    border: 0 !important; border-radius: 3px !important;
    padding: 0 !important; box-shadow: none !important;
    background: initial !important;
    accent-color: #7C3AED;
    cursor: pointer;
    flex: 0 0 auto;
}
.ar-forum input[type="checkbox"]:focus,
.ar-notify-check input[type="checkbox"]:focus { box-shadow: none !important; }

/* Message en attente d'envoi (grisé) / échec */
.ar-msg-bubble.is-pending { opacity: .5; }
.ar-msg-bubble.is-pending span { font-style: italic; }
.ar-msg-bubble.is-failed { opacity: 1; background: linear-gradient(180deg, #F87171, #DC2626) !important; }
.ar-msg-bubble.is-failed span { color: #FEE2E2 !important; }

/* Badge « aussi envoyé par email » sur le titre du sujet forum */
.ar-forum-emailed {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    background: #DBEAFE; color: #2563EB;
    font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
    flex: 0 0 auto;
}
.ar-forum-emailed > i, .ar-forum-emailed > svg { width: 12px; height: 12px; }

/* ============================================================
   v84 — Feuille d'heures (timesheet) + carte KPI cliquable
   ============================================================ */
/* KPI cliquable (dashboard) */
.ar-stat-card.is-link { text-decoration: none; color: inherit; position: relative; transition: transform 140ms ease-out, box-shadow 140ms ease-out; }
.ar-stat-card.is-link:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,23,42,.10); }
.ar-stat-go { position: absolute; top: 14px; right: 14px; color: #94A3B8; }
.ar-stat-card.is-link:hover .ar-stat-go { color: #6D28D9; }
.ar-stat-go > i, .ar-stat-go > svg { width: 16px; height: 16px; }

.ar-timesheet { display: flex; flex-direction: column; gap: 16px; }

/* Barre : navigation mois + totaux */
.ar-ts-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 14px 18px; border-radius: 18px; background: #fff; border: 1px solid #E8EDF5; box-shadow: 0 2px 12px rgba(15,23,42,.04);
}
.ar-ts-monthnav { display: inline-flex; align-items: center; gap: 12px; }
.ar-ts-monthnav strong { font-size: 16px; font-weight: 800; color: #0F172A; min-width: 150px; text-align: center; }
.ar-ts-monthnav a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #F1F5F9; color: #475569; }
.ar-ts-monthnav a:hover { background: #E2E8F0; color: #1E293B; }
.ar-ts-totals { display: inline-flex; gap: 10px; }
.ar-ts-total-card { padding: 8px 16px; border-radius: 14px; background: #F8FAFC; border: 1px solid #EEF2F7; text-align: right; }
.ar-ts-total-card span { display: block; font-size: 11.5px; font-weight: 600; color: #94A3B8; }
.ar-ts-total-card strong { font-size: 20px; font-weight: 800; color: #1E293B; }
.ar-ts-total-card.is-prorated { background: linear-gradient(180deg, #F5F3FF, #EDE9FE); border-color: #DDD6FE; }
.ar-ts-total-card.is-prorated strong { color: #6D28D9; }

/* Carte groupe */
.ar-ts-group { border-radius: 18px; background: #fff; border: 1px solid #E8EDF5; box-shadow: 0 2px 12px rgba(15,23,42,.04); overflow: hidden; }
.ar-ts-group-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 14px 18px; border-bottom: 1px solid #EEF2F7; border-left: 4px solid var(--ar-niv);
}
.ar-ts-group-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: #0F172A; display: inline; margin-right: 8px; }
.ar-ts-group-totals { display: inline-flex; align-items: center; gap: 16px; font-size: 13px; color: #64748B; }
.ar-ts-group-totals b { color: #1E293B; }
.ar-ts-group-totals small { color: #94A3B8; font-weight: 600; }
.ar-ts-group-totals .is-prorated { color: #6D28D9; font-weight: 800; }

/* Table des séances */
.ar-ts-table { display: flex; flex-direction: column; }
.ar-ts-row {
    display: grid; grid-template-columns: 120px minmax(140px,1fr) 130px 90px minmax(0,1fr) 34px;
    align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid #F5F7FB;
}
.ar-ts-row:last-child { border-bottom: 0; }
.ar-ts-row.is-void { opacity: .55; }
.ar-ts-date { font-size: 13px; font-weight: 700; color: #334155; text-transform: capitalize; }
.ar-ts-time { font-size: 12.5px; color: #475569; }
.ar-ts-time b { font-weight: 800; color: #1E293B; }
.ar-ts-time small { font-size: 9px; font-weight: 800; color: #94A3B8; }
.ar-ts-dur { font-size: 13.5px; font-weight: 800; color: #1E293B; text-align: right; }
.ar-ts-dur em { font-size: 10.5px; font-weight: 600; color: #94A3B8; font-style: normal; }
.ar-ts-repl { font-size: 12px; color: #7C3AED; display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.ar-ts-repl > i, .ar-ts-repl > svg { width: 13px; height: 13px; flex: 0 0 auto; }
.ar-ts-edit { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #F5F3FF; color: #6D28D9; }
.ar-ts-edit:hover { background: #EDE9FE; }
.ar-ts-edit > i, .ar-ts-edit > svg { width: 15px; height: 15px; }

/* Légende */
.ar-ts-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 18px; border-radius: 18px; background: #fff; border: 1px solid #E8EDF5; }
.ar-ts-legend > span:first-child { font-weight: 800; color: #0F172A; font-size: 13px; }
.ar-ts-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #475569; }
.ar-ts-legend-item i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ar-ts-legend-item b { color: #1E293B; }
.ar-ts-note { flex-basis: 100%; margin: 6px 0 0; font-size: 12.5px; color: #64748B; display: flex; align-items: center; gap: 6px; }
.ar-ts-note > i, .ar-ts-note > svg { width: 15px; height: 15px; color: #94A3B8; flex: 0 0 auto; }

@media (max-width: 720px) {
    .ar-ts-row { grid-template-columns: 1fr auto; grid-auto-flow: row; gap: 6px 10px; }
    .ar-ts-repl, .ar-ts-time { grid-column: 1 / -1; }
}

/* ============================================================
   v85 — Feuille d'heures : vue hebdomadaire (grille jours × groupes)
   ============================================================ */
.ar-ts-week { border-radius: 18px; background: #fff; border: 1px solid #E8EDF5; box-shadow: 0 2px 12px rgba(15,23,42,.04); overflow: hidden; }
.ar-ts-week-head { display: flex; align-items: center; gap: 8px; padding: 12px 18px; font-size: 13.5px; font-weight: 800; color: #0F172A; background: #F8FAFC; border-bottom: 1px solid #EEF2F7; }
.ar-ts-week-head > i, .ar-ts-week-head > svg { width: 16px; height: 16px; color: #64748B; }

.ar-ts-grid { overflow-x: auto; }
.ar-ts-grid-head, .ar-ts-grow { display: grid; grid-template-columns: 150px repeat(7, minmax(78px, 1fr)); min-width: 720px; }
.ar-ts-grid-head { border-bottom: 1px solid #EEF2F7; background: #FBFCFE; }
.ar-ts-corner, .ar-ts-gname { position: sticky; left: 0; z-index: 2; background: #fff; }
.ar-ts-grid-head .ar-ts-corner { background: #FBFCFE; }
.ar-ts-corner { padding: 8px 12px; font-size: 11px; font-weight: 800; color: #94A3B8; text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; border-right: 1px solid #EEF2F7; }
.ar-ts-dayhead { padding: 6px 4px; text-align: center; border-right: 1px solid #F5F7FB; }
.ar-ts-dayhead b { display: block; font-size: 10.5px; font-weight: 800; color: #64748B; text-transform: capitalize; }
.ar-ts-dayhead em { font-size: 13px; font-weight: 800; color: #1E293B; font-style: normal; }
.ar-ts-dayhead.is-out { background: #F8FAFC; }
.ar-ts-dayhead.is-out b, .ar-ts-dayhead.is-out em { color: #CBD5E1; }
.ar-ts-dayhead.is-today em { color: #fff; background: #2563EB; border-radius: 8px; padding: 1px 7px; display: inline-block; }

.ar-ts-grow { border-bottom: 1px solid #F5F7FB; }
.ar-ts-grow:last-child { border-bottom: 0; }
.ar-ts-gname { padding: 8px 12px; border-right: 1px solid #EEF2F7; border-left: 4px solid var(--ar-niv); display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.ar-ts-gname b { font-size: 12.5px; font-weight: 700; color: #1E293B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-ts-gname small { font-size: 11px; font-weight: 800; color: var(--ar-niv); }
.ar-ts-gname > i { display: none; }

.ar-ts-cell { padding: 6px 5px; border-right: 1px solid #F5F7FB; display: flex; flex-direction: column; gap: 4px; align-items: stretch; min-height: 46px; }
.ar-ts-cell.is-out { background: #FAFBFD; }

/* Chip séance */
.ar-ts-chip { position: relative; --c: #64748B; --cs: #F1F5F9; }
.ar-ts-chip.is-confirmed { --c: #2563EB; --cs: #EFF4FF; }
.ar-ts-chip.is-done      { --c: #64748B; --cs: #F1F5F9; }
.ar-ts-chip.is-recovery  { --c: var(--sp-st-rattr-fg); --cs: var(--sp-st-rattr-bg); }
.ar-ts-chip.is-cancel    { --c: #EA580C; --cs: #FFF3EC; }
.ar-ts-chip.is-free      { --c: #16A34A; --cs: #ECFDF3; }
.ar-ts-chip-main {
    width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    padding: 5px 8px; border-radius: 9px; background: var(--cs); border: 1px solid transparent; border-left: 3px solid var(--c);
    cursor: pointer; text-align: left; transition: box-shadow 120ms ease-out;
}
.ar-ts-chip-main:hover { box-shadow: 0 3px 10px rgba(15,23,42,.10); }
.ar-ts-chip-time { font-size: 12px; font-weight: 800; color: var(--c); line-height: 1.1; }
.ar-ts-chip-dur { font-size: 10.5px; font-weight: 700; color: #64748B; }
.ar-ts-chip-repl { position: absolute; top: -5px; right: -5px; width: 17px; height: 17px; border-radius: 50%; background: #7C3AED; color: #fff; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.ar-ts-chip-repl > i, .ar-ts-chip-repl > svg { width: 10px; height: 10px; }
.ar-ts-chip.is-cancelled .ar-ts-chip-main, .ar-ts-chip.is-away .ar-ts-chip-main { opacity: .55; }
.ar-ts-chip.is-cancelled .ar-ts-chip-time { text-decoration: line-through; }

/* Menu contextuel de séance */
.ar-ts-menu.is-floating { position: fixed; }
.ar-ts-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 3000; min-width: 210px; padding: 6px; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 14px 34px rgba(15,23,42,.16); }
.ar-ts-menu-title { margin: 4px 8px 6px; font-size: 11px; font-weight: 700; color: #94A3B8; text-transform: capitalize; }
.ar-ts-menu-form { margin: 0; }
.ar-ts-menu-item { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; background: none; border: 0; cursor: pointer; font-size: 12.5px; font-weight: 600; color: #334155; text-align: left; }
.ar-ts-menu-item:hover { background: #F1F5F9; }
.ar-ts-menu-item > i, .ar-ts-menu-item > svg { width: 15px; height: 15px; color: #64748B; flex: 0 0 auto; }
.ar-ts-menu-item.is-danger { color: #DC2626; } .ar-ts-menu-item.is-danger > i { color: #DC2626; }
.ar-ts-menu-item.is-ok { color: #16A34A; } .ar-ts-menu-item.is-ok > i { color: #16A34A; }

/* Totaux par groupe (résumé mensuel) */
.ar-ts-summary { border-radius: 18px; background: #fff; border: 1px solid #E8EDF5; box-shadow: 0 2px 12px rgba(15,23,42,.04); padding: 16px 18px; }
.ar-ts-summary h3 { margin: 0 0 12px; font-size: 14px; font-weight: 800; color: #0F172A; display: flex; align-items: center; gap: 7px; }
.ar-ts-summary h3 > i, .ar-ts-summary h3 > svg { width: 16px; height: 16px; color: #64748B; }
.ar-ts-sumtable { display: flex; flex-direction: column; }
.ar-ts-sumrow { display: grid; grid-template-columns: minmax(0,1fr) 110px 120px 120px; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid #F5F7FB; }
.ar-ts-sumrow:last-child { border-bottom: 0; }
.ar-ts-sumname { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #1E293B; min-width: 0; }
.ar-ts-sumname > i { width: 9px; height: 9px; border-radius: 3px; background: var(--ar-niv); flex: 0 0 auto; }
.ar-ts-sumname em { font-size: 10.5px; font-weight: 700; font-style: normal; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.ar-ts-sumcount { font-size: 12.5px; color: #64748B; text-align: right; }
.ar-ts-sumcount b { color: #1E293B; }
.ar-ts-sumval { font-size: 13.5px; font-weight: 800; color: #1E293B; text-align: right; }
.ar-ts-sumval small { font-size: 10px; font-weight: 600; color: #94A3B8; }
.ar-ts-sumval.is-prorated { color: #6D28D9; }
.ar-ts-sumrow.is-total { border-top: 2px solid #E2E8F0; margin-top: 4px; padding-top: 12px; }
.ar-ts-sumrow.is-total .ar-ts-sumname { font-weight: 800; color: #0F172A; }
.ar-ts-sumrow.is-total .ar-ts-sumval { font-size: 16px; }

@media (max-width: 720px) {
    .ar-ts-sumrow { grid-template-columns: 1fr auto; row-gap: 4px; }
    .ar-ts-sumcount { display: none; }
}

/* ============================================================
   v86 — Feuille d'heures : bascule Semaine/Mois + navigation semaine + vue mois
   ============================================================ */
.ar-ts-viewtoggle { display: inline-flex; gap: 3px; padding: 3px; background: #F1F5F9; border-radius: 12px; }
.ar-ts-viewtoggle a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: #64748B; }
.ar-ts-viewtoggle a:hover { color: #1E293B; }
.ar-ts-viewtoggle a.is-active { background: #fff; color: #6D28D9; box-shadow: 0 1px 3px rgba(15,23,42,.10); }
.ar-ts-viewtoggle a > i, .ar-ts-viewtoggle a > svg { width: 15px; height: 15px; }

/* En-tête de semaine avec navigation prev/next */
.ar-ts-week-nav { justify-content: space-between; }
.ar-ts-week-nav > span { display: inline-flex; align-items: center; gap: 8px; }
.ar-ts-week-nav > span small { font-weight: 600; color: #94A3B8; }
.ar-ts-week-nav > a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #fff; border: 1px solid #E2E8F0; color: #475569; }
.ar-ts-week-nav > a:hover { background: #F1F5F9; color: #1E293B; }

/* Vue MOIS : colonnes étroites + scroll horizontal, weekend grisé */
.ar-ts-monthview .ar-ts-grid-head,
.ar-ts-monthview .ar-ts-grow { grid-template-columns: 150px repeat(var(--ar-ndays, 31), 50px); min-width: max-content; }
.ar-ts-monthview .ar-ts-dayhead { padding: 6px 2px; }
.ar-ts-monthview .ar-ts-dayhead b { font-size: 9px; }
.ar-ts-monthview .ar-ts-dayhead em { font-size: 12px; }
.ar-ts-monthview .ar-ts-cell { padding: 5px 3px; }
.ar-ts-monthview .ar-ts-chip-main { padding: 4px 4px; }
.ar-ts-monthview .ar-ts-chip-time { font-size: 10.5px; }
.ar-ts-monthview .ar-ts-chip-dur { font-size: 9px; }
.ar-ts-monthview .ar-ts-gname small { font-size: 10px; }
.ar-ts-dayhead.is-weekend { background: #F8FAFC; }
.ar-ts-cell.is-weekend { background: #FCFDFE; }

/* ============================================================
   v87 — Feuille d'heures : vue mois ajustée à la page, mise en valeur jour/weekend/futur
   ============================================================ */
/* La vue mois tient dans la largeur : colonnes fluides, pas de scroll horizontal */
.ar-ts-monthview .ar-ts-grid { overflow: visible; }
.ar-ts-monthview .ar-ts-grid-head,
.ar-ts-monthview .ar-ts-grow { grid-template-columns: 104px repeat(var(--ar-ndays, 31), minmax(0, 1fr)); min-width: 0; }
.ar-ts-monthview .ar-ts-gname { padding: 6px 8px; }
.ar-ts-monthview .ar-ts-gname b { font-size: 11.5px; }
.ar-ts-monthview .ar-ts-cell { padding: 4px 2px; gap: 3px; }

/* Chip compact = barre colorée pleine, sans texte (détails au survol) */
.ar-ts-chip-main.is-compact {
    min-height: 22px; padding: 0; border: 0; border-radius: 5px;
    background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.ar-ts-chip-main.is-compact:hover { box-shadow: 0 2px 8px rgba(15,23,42,.22), inset 0 0 0 1px rgba(255,255,255,.25); }
.ar-ts-monthview .ar-ts-chip-repl { width: 14px; height: 14px; top: -4px; right: -4px; }
.ar-ts-monthview .ar-ts-chip-repl > i, .ar-ts-monthview .ar-ts-chip-repl > svg { width: 8px; height: 8px; }

/* Colonne du jour courant mise en valeur */
.ar-ts-dayhead.is-today { background: #EFF4FF; border-radius: 8px 8px 0 0; }
.ar-ts-cell.is-today { background: #EFF4FF; box-shadow: inset 1px 0 0 #BFDBFE, inset -1px 0 0 #BFDBFE; }
.ar-ts-grow:last-child .ar-ts-cell.is-today { box-shadow: inset 1px 0 0 #BFDBFE, inset -1px 0 0 #BFDBFE, inset 0 -1px 0 #BFDBFE; }

/* Week-end plus lisible */
.ar-ts-dayhead.is-weekend { background: #F1F5F9; }
.ar-ts-cell.is-weekend { background: #F6F8FB; }
.ar-ts-cell.is-weekend.is-today, .ar-ts-dayhead.is-weekend.is-today { background: #EFF4FF; }

/* Séances futures (non commencées) : grisées */
.ar-ts-chip.is-future .ar-ts-chip-main { opacity: .45; }
.ar-ts-chip.is-future .ar-ts-chip-main:hover { opacity: .75; }
.ar-ts-chip.is-future .ar-ts-chip-time { color: #64748B; }

/* ============================================================
   v88 — Feuille d'heures : durée dans le chip mensuel + lien vers le groupe
   ============================================================ */
.ar-ts-chip-main.is-compact { flex-direction: row; align-items: center; justify-content: center; padding: 3px 3px; min-height: 22px; }
.ar-ts-chip-cdur { font-size: 9.5px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.2px; text-shadow: 0 1px 1px rgba(0,0,0,.15); }

/* Lien groupe dans la colonne de gauche */
a.ar-ts-gname { text-decoration: none; transition: background 120ms ease-out; }
a.ar-ts-gname:hover { background: var(--ar-niv-soft, #F5F3FF); }
a.ar-ts-gname:hover b { color: var(--ar-niv); }
.ar-ts-gname b > i, .ar-ts-gname b > svg { width: 11px; height: 11px; vertical-align: -1px; color: #CBD5E1; margin-left: 2px; }
a.ar-ts-gname:hover b > i, a.ar-ts-gname:hover b > svg { color: var(--ar-niv); }

/* ============================================================
   v89 — En-tête de groupe simplifié (sans encadré) + vignette carrée du niveau à droite
   ============================================================ */
.ar-group-ov-header,
.ar-group-ov-page .ar-group-ov-header,
.ar-group-overview .ar-group-ov-header {
    padding: 2px 2px; border: 0; background: none; box-shadow: none;
    border-radius: 0; overflow: visible; align-items: center; gap: 18px;
}
.ar-group-ov-page .ar-group-ov-header::after,
.ar-group-overview .ar-group-ov-header::after { content: none; display: none; }

/* Vignette carrée du niveau (image partagée plus tard) */
.ar-group-ov-thumb {
    flex: 0 0 auto; width: 96px; height: 96px; border-radius: 18px; overflow: hidden;
    display: grid; place-items: center; padding: 6px;
    background: var(--ar-niv-soft, #eef9ff); color: var(--ar-niv, #005064);
    border: 1px solid var(--ar-border, #e6ebf2);
}
.ar-group-ov-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ar-group-ov-thumb[data-empty] { border-style: dashed; }
.ar-group-ov-thumb > i, .ar-group-ov-thumb > svg { width: 34px; height: 34px; opacity: .65; }
@media (max-width: 560px) {
    .ar-group-ov-thumb { width: 68px; height: 68px; border-radius: 14px; }
    .ar-group-ov-thumb > i, .ar-group-ov-thumb > svg { width: 26px; height: 26px; }
}

/* ============================================================
   v90 — Espace PARENT : dashboard parent, dashboard enfant, parcours niveaux
   ============================================================ */
.ar-parent-home, .ar-enfant { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* Empêche le parcours (large, à défilement horizontal) d'élargir toute la page. */
.ar-path-section, .ar-parent-section, .ar-parent-top { min-width: 0; max-width: 100%; }
.ar-parent-top > .ar-stat-grid { min-width: 0; }
.ar-parent-kpis, .ar-enfant-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px){ .ar-parent-kpis, .ar-enfant-kpis { grid-template-columns: repeat(2, 1fr); } }

.ar-parent-section { display: flex; flex-direction: column; gap: 12px; }
.ar-parent-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ar-parent-sec-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: #0F172A; display: flex; align-items: center; gap: 8px; }
.ar-parent-sec-head h3 > i, .ar-parent-sec-head h3 > svg { width: 18px; height: 18px; color: #6D28D9; }
.ar-parent-sec-note { font-size: 12px; color: #94A3B8; font-weight: 600; }

/* Cartes enfants — format portrait, plus grandes et centrées */
.ar-parent-kids { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.ar-parent-kid { display: flex; flex-direction: column; width: 320px; max-width: 100%; padding: 28px 24px 22px; border-radius: 24px; background: #fff; border: 1px solid #E8EDF5; box-shadow: 0 4px 18px rgba(15,23,42,.06); border-top: 5px solid var(--kc); transition: transform .14s, box-shadow .14s; }
.ar-parent-kid:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(15,23,42,.13); }
.ar-parent-kid-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; text-decoration: none; color: inherit; }
.ar-parent-kid-av { width: 96px; height: 96px; border-radius: 26px; display: grid; place-items: center; font-size: 32px; font-weight: 800; background: var(--kcs); color: var(--kc); border: 1px solid color-mix(in srgb, var(--kc) 26%, transparent); }
.ar-parent-kid-head b { font-size: 19px; font-weight: 800; color: #0F172A; }
.ar-parent-kid-tag { font-size: 12px; font-weight: 800; padding: 4px 13px; border-radius: 999px; color: var(--kc); background: var(--kcs); }
.ar-parent-kid-next { margin: 20px 0; padding: 15px; border-radius: 16px; background: #F8FAFC; border: 1px solid #EEF2F7; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.ar-parent-kid-next.is-today { background: color-mix(in srgb, var(--kc) 8%, #fff); border-color: color-mix(in srgb, var(--kc) 30%, transparent); }
.ar-parent-kid-next-lbl { font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #94A3B8; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.ar-parent-kid-next-lbl i, .ar-parent-kid-next-lbl svg { width: 14px; height: 14px; }
.ar-parent-kid-next strong { font-size: 17px; font-weight: 800; color: #1E293B; text-transform: capitalize; }
.ar-parent-kid-next strong.is-empty { font-size: 14px; font-weight: 700; color: #94A3B8; text-transform: none; }
.ar-parent-kid-next small { font-size: 13.5px; font-weight: 700; color: var(--kc); }
.ar-parent-kid-join { margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 14px; border-radius: 12px; background: var(--kc); color: #fff; font-size: 13.5px; font-weight: 800; text-decoration: none; box-shadow: 0 6px 16px color-mix(in srgb, var(--kc) 32%, transparent); }
.ar-parent-kid-join:hover { filter: brightness(.94); }
.ar-parent-kid-join i, .ar-parent-kid-join svg { width: 16px; height: 16px; }
.ar-parent-kid-actions { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.ar-parent-kid-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 14px; border-radius: 13px; font-size: 14px; font-weight: 800; text-decoration: none; transition: filter .14s, background .14s; }
.ar-parent-kid-btn i, .ar-parent-kid-btn svg { width: 16px; height: 16px; }
.ar-parent-kid-btn.is-primary { background: var(--kcs); color: var(--kc); border: 1px solid color-mix(in srgb, var(--kc) 26%, transparent); }
.ar-parent-kid-btn.is-primary:hover { background: color-mix(in srgb, var(--kc) 12%, #fff); }

/* Hero enfant */
.ar-enfant-hero { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 20px; border: 1px solid #E8EDF5; box-shadow: 0 2px 12px rgba(15,23,42,.05);
    background: radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--ar-niv) 13%, transparent) 0%, transparent 58%), #fff; }
.ar-enfant-av { width: 72px; height: 72px; border-radius: 18px; display: grid; place-items: center; font-size: 24px; font-weight: 800; flex: 0 0 auto; background: var(--ar-niv-soft); color: var(--ar-niv); border: 1px solid color-mix(in srgb, var(--ar-niv) 26%, transparent); }
.ar-enfant-hid h2 { margin: 2px 0 0; font-size: 22px; font-weight: 800; color: #0F172A; }
.ar-enfant-hrow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 7px; }
.ar-enfant-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #64748B; }
.ar-enfant-chip i, .ar-enfant-chip svg { width: 15px; height: 15px; }

/* Parcours par niveaux */
.ar-journey { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px){ .ar-journey { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .ar-journey { grid-template-columns: 1fr; } }
.ar-jlvl { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 15px 14px; border-radius: 16px; background: #fff; border: 1px solid #E8EDF5; box-shadow: 0 2px 12px rgba(15,23,42,.05); min-height: 158px; text-decoration: none; color: inherit; }
.ar-jlvl.is-current, .ar-jlvl.is-done { border-color: color-mix(in srgb, var(--lc) 40%, #E8EDF5); transition: transform .14s, box-shadow .14s; }
.ar-jlvl.is-current::before, .ar-jlvl.is-done::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 16px 0 0 16px; background: var(--lc); }
.ar-jlvl.is-current:hover, .ar-jlvl.is-done:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(15,23,42,.12); }
.ar-jlvl-step { position: absolute; top: 12px; left: 13px; width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--lcs); color: var(--lc); }
.ar-jlvl-thumb { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; overflow: hidden; margin-top: 6px; background: var(--lcs); color: var(--lc); border: 1px solid color-mix(in srgb, var(--lc) 26%, transparent); padding: 4px; }
.ar-jlvl-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ar-jlvl-thumb i, .ar-jlvl-thumb svg { width: 24px; height: 24px; }
.ar-jlvl-name { font-size: 14px; font-weight: 800; color: #0F172A; }
.ar-jlvl-group { font-size: 11.5px; color: #64748B; font-weight: 600; line-height: 1.35; }
.ar-jlvl-badge { align-self: flex-start; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 999px; margin-top: auto; }
.ar-jlvl-badge.is-current { color: var(--lc); background: var(--lcs); }
.ar-jlvl-badge.is-done { color: #64748B; background: #F1F5F9; }
.ar-jlvl-arrow { position: absolute; bottom: 13px; right: 13px; color: var(--lc); }
.ar-jlvl-arrow i, .ar-jlvl-arrow svg { width: 17px; height: 17px; }
/* Non suivi = grisé / hachuré */
.ar-jlvl.is-off { border-style: dashed; filter: grayscale(1); opacity: .68;
    background: repeating-linear-gradient(135deg, #F8FAFC, #F8FAFC 9px, transparent 9px, transparent 18px), #fff; }
.ar-jlvl.is-off .ar-jlvl-thumb { background: #F1F5F9; border-color: #E8EDF5; color: #94A3B8; }
.ar-jlvl.is-off .ar-jlvl-name { color: #64748B; }
.ar-jlvl.is-off .ar-jlvl-step { background: #F1F5F9; color: #94A3B8; }

/* v91 — Discussion parent : conversation unique (pas de barre latérale) */
.ar-msg-shell.ar-msg-shell-solo { grid-template-columns: 1fr; max-width: 780px; }
.ar-msg-shell-solo .ar-msg-thread-head .ar-msg-avatar i { width: 20px; height: 20px; }

/* v92 — Filtre multi-sélection (enseignants) dans le calendrier */
.ar-filter-multi { position: relative; display: inline-flex; padding: 0; border: 0; background: none; }
.ar-filter-multi > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 12px; border: 1px solid #E2E8F0; background: #fff; font-size: 13px; font-weight: 700; color: #334155; white-space: nowrap; }
.ar-filter-multi > summary::-webkit-details-marker { display: none; }
.ar-filter-multi > summary:hover { border-color: #CBD5E1; }
.ar-filter-multi[open] > summary { border-color: #6D28D9; box-shadow: 0 0 0 3px rgba(109,40,217,.12); }
.ar-filter-multi > summary > i[data-lucide], .ar-filter-multi > summary > svg { width: 15px; height: 15px; color: #64748B; }
.ar-filter-multi-txt.is-set { color: #6D28D9; font-weight: 800; }
.ar-filter-multi-chev { margin-left: 2px; transition: transform .15s ease; }
.ar-filter-multi[open] .ar-filter-multi-chev { transform: rotate(180deg); }
.ar-filter-multi-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 230px; max-height: 320px; overflow-y: auto; padding: 6px; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 14px 34px rgba(15,23,42,.16); }
.ar-filter-multi-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #334155; cursor: pointer; }
.ar-filter-multi-item:hover { background: #F1F5F9; }
.ar-filter-multi-item input[type="checkbox"] { -webkit-appearance: checkbox; appearance: auto; width: 16px !important; min-width: 16px; height: 16px !important; min-height: 16px; margin: 0 !important; padding: 0 !important; accent-color: #6D28D9; flex: 0 0 16px !important; box-shadow: none !important; cursor: pointer; }
.ar-filter-multi-item span { flex: 1 1 auto; }

/* v93 — Sélecteur d'enseignant de la Feuille de temps (admin), style autonome */
.ar-ts-teacherbar { margin-bottom: 14px; }
.ar-ts-teacherbar .ar-filter-control { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px 9px 12px; border-radius: 12px; border: 1px solid #E2E8F0; background: #fff; box-shadow: 0 2px 12px rgba(15,23,42,.04); }
.ar-ts-teacherbar .ar-filter-control:focus-within { border-color: #6D28D9; box-shadow: 0 0 0 3px rgba(109,40,217,.12); }
.ar-ts-teacherbar .ar-filter-control > i[data-lucide], .ar-ts-teacherbar .ar-filter-control > svg { width: 16px; height: 16px; color: #6D28D9; flex: 0 0 auto; }
.ar-ts-teacherbar select { border: 0; background: none; font-size: 13.5px; font-weight: 700; color: #1E293B; cursor: pointer; outline: none; padding-right: 4px; min-width: 160px; }

/* v94 — Page « Les groupes » : onglets Actifs/Terminés + pagination */
.ar-groups-tabs { display: inline-flex; gap: 4px; padding: 4px; background: #F1F5F9; border-radius: 13px; margin-bottom: 4px; }
.ar-groups-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: 0; background: none; border-radius: 10px; font-size: 13.5px; font-weight: 800; color: #64748B; cursor: pointer; }
.ar-groups-tabs button:hover { color: #1E293B; }
.ar-groups-tabs button.is-active { background: #fff; color: #6D28D9; box-shadow: 0 1px 3px rgba(15,23,42,.10); }
.ar-groups-tabs button > i, .ar-groups-tabs button > svg { width: 15px; height: 15px; }
.ar-groups-tab-count { font-size: 11px; font-weight: 800; min-width: 20px; height: 19px; padding: 0 6px; border-radius: 20px; display: inline-grid; place-items: center; background: #E2E8F0; color: #475569; }
.ar-groups-tabs button.is-active .ar-groups-tab-count { background: #EDE9FE; color: #6D28D9; }

.ar-groups-pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid #EEF2F7; }
.ar-groups-pager-info { font-size: 13px; font-weight: 600; color: #64748B; }
.ar-groups-perpage { font-size: 13px; font-weight: 600; color: #64748B; display: inline-flex; align-items: center; gap: 7px; }
.ar-groups-perpage select { border: 1px solid #E2E8F0; border-radius: 9px; padding: 6px 8px; font-size: 13px; font-weight: 700; color: #1E293B; background: #fff; cursor: pointer; }
.ar-groups-pages { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ar-groups-pages button { min-width: 34px; height: 34px; padding: 0 9px; border: 1px solid #E2E8F0; background: #fff; border-radius: 9px; font-size: 13px; font-weight: 800; color: #475569; cursor: pointer; }
.ar-groups-pages button:hover:not(:disabled) { border-color: #CBD5E1; background: #F8FAFC; }
.ar-groups-pages button.is-active { background: #6D28D9; border-color: #6D28D9; color: #fff; }
.ar-groups-pages button:disabled { opacity: .4; cursor: default; }
.ar-groups-ellipsis { padding: 0 4px; color: #94A3B8; font-weight: 800; }

/* v95 — Distinction visuelle des groupes « À venir » */
.ar-group-card.is-upcoming { border-color: #DDD6FE; background: linear-gradient(180deg, #FCFBFF, #F6F4FF); box-shadow: 0 4px 16px rgba(109,40,217,.07); }
.ar-group-card.is-upcoming::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: 20px 20px 0 0; background: linear-gradient(90deg, #7C3AED, #DB2777); }
.ar-group-card.is-upcoming { position: relative; }
.ar-group-upcoming-ribbon { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; width: fit-content; margin-bottom: 10px; padding: 4px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #6D28D9; background: #EDE9FE; border: 1px solid #DDD6FE; }
.ar-group-upcoming-ribbon i, .ar-group-upcoming-ribbon svg { width: 12px; height: 12px; }

/* v96 — Menu de séance (feuille de temps) reparenté sur <body> : forcer les
   couleurs du texte au survol (un button:hover du thème le mettait en blanc). */
.ar-ts-menu .ar-ts-menu-item { color: #334155; }
.ar-ts-menu .ar-ts-menu-item:hover { background: #F1F5F9; color: #1E293B; }
.ar-ts-menu .ar-ts-menu-item > i, .ar-ts-menu .ar-ts-menu-item > svg { color: #64748B; }
.ar-ts-menu .ar-ts-menu-item.is-danger, .ar-ts-menu .ar-ts-menu-item.is-danger:hover { color: #DC2626; }
.ar-ts-menu .ar-ts-menu-item.is-danger > i { color: #DC2626; }
.ar-ts-menu .ar-ts-menu-item.is-ok, .ar-ts-menu .ar-ts-menu-item.is-ok:hover { color: #16A34A; }
.ar-ts-menu .ar-ts-menu-item.is-ok > i { color: #16A34A; }

/* v97 — KPI « rapports » cliquable (page groupes) */
.ar-stat-card.ar-kpi-clickable { cursor: pointer; }
.ar-stat-card.ar-kpi-clickable:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,23,42,.10); }
.ar-stat-card.ar-kpi-clickable.is-active { outline: 2px solid #EA580C; outline-offset: 2px; }

/* v98 — Cloche : historique 10, notif lue grisée + point non-lu */
.ar-portal-bell-item.is-read { opacity: .5; }
.ar-portal-bell-item.is-read:hover { opacity: .75; }
.ar-portal-bell-item.is-read .ar-portal-bell-ava { filter: grayscale(.5); }
.ar-portal-bell-dot { width: 9px; height: 9px; border-radius: 50%; background: #DB2777; flex: 0 0 auto; margin-left: auto; align-self: center; box-shadow: 0 0 0 3px rgba(219,39,119,.15); }

/* v99 — Pastille compteur grisée pour notif lue */
.ar-portal-bell-pill.is-muted { background: #E2E8F0; color: #64748B; }

/* v100 — Facturation (design premium) */
.ar-billing { display: flex; flex-direction: column; gap: 20px; }
.ar-billing-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px){ .ar-billing-kpis { grid-template-columns: repeat(2, 1fr); } }
.ar-billing-panel { background: #fff; border: 1px solid #E8EDF5; border-radius: 18px; box-shadow: 0 2px 12px rgba(15,23,42,.04); padding: 16px 18px; }
.ar-billing-panel-head h3 { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: #0F172A; display: flex; align-items: center; gap: 8px; }
.ar-billing-panel-head h3 > i, .ar-billing-panel-head h3 > svg { width: 17px; height: 17px; color: #6D28D9; }
.ar-billing-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 820px){ .ar-billing-cols { grid-template-columns: 1fr; } }
.ar-billing-empty { font-size: 13px; color: #94A3B8; font-weight: 600; padding: 8px 2px; }

/* Encart « À régler » */
.ar-billing-cta.is-due { border-color: #FED7AA; background: linear-gradient(180deg, #FFFBF5, #FFF7ED); }
.ar-billing-cta.is-due .ar-billing-panel-head h3 > i { color: #EA580C; }
.ar-billing-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ar-billing-btn { display: inline-flex; flex-direction: column; gap: 1px; padding: 11px 16px; border-radius: 12px; text-decoration: none; font-weight: 800; }
.ar-billing-btn span { font-size: 13.5px; }
.ar-billing-btn small { font-size: 11px; font-weight: 600; opacity: .85; }
.ar-billing-btn.is-pay { background: #EA580C; color: #fff; }
.ar-billing-btn.is-pay:hover { filter: brightness(.94); }
.ar-billing-btn.is-soft { background: #F1F5F9; color: #334155; }
.ar-billing-btn.is-soft:hover { background: #E2E8F0; }

/* Listes abonnements / factures */
.ar-billing-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ar-billing-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid #F1F5F9; }
.ar-billing-row:last-child { border-bottom: 0; }
.ar-billing-row-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; background: #EFF4FF; color: #2563EB; }
.ar-billing-row-ic > i, .ar-billing-row-ic > svg { width: 17px; height: 17px; }
.ar-billing-row-ic.is-due { background: #FFF3EC; color: #EA580C; }
.ar-billing-row-ic.is-ok { background: #ECFDF3; color: #16A34A; }
.ar-billing-row-ic.is-off { background: #F1F5F9; color: #94A3B8; }
.ar-billing-row-ic.is-sub { background: color-mix(in srgb, var(--kc, #6D28D9) 12%, #fff); color: var(--kc, #6D28D9); }
.ar-billing-row-prod { font-size: 11.5px; font-style: normal; font-weight: 700; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.ar-billing-row[title] { cursor: default; }
.ar-billing-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ar-billing-row-body strong { font-size: 13.5px; font-weight: 800; color: #1E293B; }
.ar-billing-row-body small { font-size: 12px; color: #64748B; font-weight: 600; }
.ar-billing-row-body em { font-size: 11.5px; color: #94A3B8; font-style: normal; }
.ar-billing-row-amount { font-size: 14px; font-weight: 800; color: #0F172A; white-space: nowrap; }
.ar-billing-row-amount .amount, .ar-billing-row-amount bdi { font-weight: 800; }
.ar-billing-row-btn { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font-size: 12.5px; font-weight: 800; padding: 8px 14px; border-radius: 11px; text-decoration: none; background: #fff; color: #334155; border: 1px solid #E2E8F0; transition: all .15s; cursor: pointer; }
.ar-billing-row-btn i { width: 14px; height: 14px; }
.ar-billing-row-btn:hover { background: #F8FAFC; border-color: #CBD5E1; }
.ar-billing-row-btn.is-pay { background: linear-gradient(180deg, #F97316, #EA580C); color: #fff; border: 0; box-shadow: 0 2px 6px rgba(234,88,12,.28); }
.ar-billing-row-btn.is-pay:hover { filter: brightness(1.04); box-shadow: 0 4px 10px rgba(234,88,12,.34); transform: translateY(-1px); }

/* Groupes */
.ar-billing-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ar-billing-group { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid #EEF2F7; border-radius: 14px; background: #F8FAFC; }
.ar-billing-group-id strong { font-size: 13.5px; font-weight: 800; color: #1E293B; display: block; }
.ar-billing-group-id small { font-size: 12px; color: #64748B; font-weight: 600; }
.ar-billing-group-tag { align-self: flex-start; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #EDE9FE; color: #6D28D9; }
.ar-billing-group-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Abonnement + ses factures rattachées */
.ar-billing-sub { display: flex; flex-direction: column; gap: 0; padding: 0; }
.ar-billing-subinvoices { margin: 4px 0 10px 34px; padding: 8px 12px; border-left: 2px solid #E2E8F0; display: flex; flex-direction: column; gap: 8px; }
.ar-billing-subinvoices-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #94A3B8; }
.ar-billing-subinvoices-lbl i { width: 14px; height: 14px; }
.ar-billing-subinvoice { display: flex; align-items: center; gap: 10px; }
.ar-billing-subinvoice-ic { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #ECFDF5; color: #059669; flex: 0 0 auto; }
.ar-billing-subinvoice-ic i { width: 14px; height: 14px; }
.ar-billing-subinvoice-ic.is-due { background: #FFF7ED; color: #EA580C; }
.ar-billing-subinvoice-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ar-billing-subinvoice-body b { font-size: 12.5px; font-weight: 800; color: #334155; }
.ar-billing-subinvoice-body small { font-size: 11px; color: #64748B; font-weight: 600; }
.ar-billing-subinvoice-amount { font-size: 12.5px; font-weight: 800; color: #1E293B; white-space: nowrap; }

/* Section de facturation par enfant */
.ar-bf { display: flex; flex-direction: column; gap: 14px; }
.ar-bf [hidden] { display: none !important; }

/* Rangée d'enfants (chips sélectionnables) */
.ar-bf-children { display: flex; flex-wrap: wrap; gap: 12px; }
.ar-bf-chip { flex: 1 1 240px; min-width: 220px; display: flex; align-items: center; gap: 12px; text-align: left; background: #fff; border: 1px solid #EAEEF3; border-radius: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.04); padding: 13px 15px; cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s, transform .1s; }
.ar-bf-chip:hover { box-shadow: 0 4px 14px rgba(15,23,42,.08); }
.ar-bf-chip.is-active { border-color: var(--kc, #6D28D9); box-shadow: 0 0 0 2px color-mix(in srgb, var(--kc, #6D28D9) 22%, transparent); background: var(--kcs, #F5F3FF); }
.ar-bf-chip .ar-billing-child-av { width: 42px; height: 42px; border-radius: 12px; font-size: 14px; flex: 0 0 auto; }
.ar-bf-chip-txt { flex: 1; min-width: 0; }
.ar-bf-chip-txt strong { display: block; font-size: 14.5px; font-weight: 900; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-bf-chip-txt small { display: block; font-size: 12px; color: #64748B; font-weight: 700; }

/* Contenu de l'enfant sélectionné */
.ar-bf-childbody { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; padding: 16px; background: #fff; border: 1px solid #EEF1F6; border-radius: 18px; box-shadow: 0 1px 2px rgba(15,23,42,.05); border-top: 3px solid var(--kc, #6D28D9); }

/* Carte programme (repliable ; ouverte = distinguée) */
.ar-bf-prog { border: 1px solid #EEF1F6; border-radius: 14px; overflow: hidden; background: #fff; }
.ar-bf-prog[open] { border-color: color-mix(in srgb, var(--kc, #6D28D9) 45%, #EEF1F6); box-shadow: 0 2px 10px rgba(15,23,42,.06); }
.ar-bf-prog-head { display: flex; align-items: center; gap: 11px; padding: 13px 14px; cursor: pointer; list-style: none; }
.ar-bf-prog-head::-webkit-details-marker { display: none; }
.ar-bf-prog[open] .ar-bf-prog-head { background: var(--kcs, #F5F3FF); }
.ar-bf-prog-amt { font-size: 13px; font-weight: 700; color: #475569; white-space: nowrap; }
.ar-bf-prog-amt b { font-size: 15px; font-weight: 900; color: #0F172A; }
.ar-bf-chevron { display: inline-flex; flex: 0 0 auto; color: #94A3B8; transition: transform .2s; }
.ar-bf-chevron i { width: 18px; height: 18px; }
.ar-bf-prog[open] .ar-bf-chevron { transform: rotate(180deg); }
.ar-bf-prog-body { padding: 4px 14px 14px; }
.ar-bf-prog-body .ar-bf-progress-bar { margin-bottom: 4px; }

.ar-bf-crumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.ar-bf-crumb-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 800; color: #6D28D9; padding: 4px 6px; border-radius: 8px; }
.ar-bf-crumb-btn:hover { background: #F3F0FF; }
.ar-bf-crumb-btn i { width: 15px; height: 15px; }
.ar-bf-crumb-sep i { width: 14px; height: 14px; color: #CBD5E1; }
.ar-bf-crumb-cur { font-weight: 800; color: #0F172A; }
.ar-bf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 900px) { .ar-bf-grid { grid-template-columns: 1fr; } }

.ar-bf-card { position: relative; text-align: left; width: 100%; background: #fff; border: 1px solid #EEF1F6; border-radius: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.05); padding: 16px 18px; cursor: pointer; overflow: hidden; transition: box-shadow .15s, transform .1s; font: inherit; }
.ar-bf-card::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: var(--kc, #6D28D9); }
.ar-bf-card:hover { box-shadow: 0 6px 18px rgba(15,23,42,.09); transform: translateY(-1px); }
.ar-bf-child { display: flex; align-items: center; gap: 13px; }
.ar-bf-child .ar-billing-child-av { width: 46px; height: 46px; border-radius: 14px; font-size: 15px; flex: 0 0 auto; }
.ar-bf-card-main { flex: 1; min-width: 0; }
.ar-bf-card-main strong { display: block; font-size: 16px; font-weight: 900; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-bf-card-main small { display: block; margin-top: 1px; font-size: 12.5px; color: #64748B; font-weight: 700; }
.ar-bf-go { color: #CBD5E1; width: 20px; height: 20px; flex: 0 0 auto; }

.ar-bf-sub { display: flex; flex-direction: column; gap: 12px; }
.ar-bf-sub-top { display: flex; align-items: center; gap: 11px; }
.ar-bf-progress { display: flex; flex-direction: column; gap: 6px; }
.ar-bf-progress-amt { font-size: 13px; font-weight: 700; color: #475569; }
.ar-bf-progress-amt b { font-size: 15px; font-weight: 900; color: #0F172A; }
.ar-bf-progress-bar { height: 7px; border-radius: 999px; background: #EEF2F7; overflow: hidden; }
.ar-bf-progress-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--kc, #6D28D9); }

.ar-bf-buy { border-style: dashed; border-color: #D6BCFA; background: #FBFAFF; }
.ar-bf-buy::before { background: transparent; }
.ar-bf-buy-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: #7C3AED; }
.ar-bf-buy-tag i { width: 14px; height: 14px; }
.ar-bf-buy strong { display: block; margin-top: 6px; font-size: 15px; font-weight: 900; color: #0F172A; }
.ar-bf-buy small { display: block; color: #64748B; font-weight: 700; font-size: 12.5px; }
.ar-bf-buy .ar-billing-actions { margin-top: 10px; }

.ar-bf-sub-panel { background: #fff; border: 1px solid #EEF1F6; border-radius: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.05); padding: 16px 18px; border-left: 5px solid var(--kc, #6D28D9); }
.ar-bf-sub-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #F1F5F9; }
.ar-bf-sub-summary strong { display: block; font-size: 16px; font-weight: 900; color: #0F172A; }
.ar-bf-sub-summary small { display: block; margin-top: 1px; font-size: 12.5px; color: #64748B; font-weight: 700; }
.ar-bf-sub-summary-amt { font-size: 14px; font-weight: 700; color: #475569; white-space: nowrap; }
.ar-bf-sub-summary-amt b { font-size: 17px; font-weight: 900; color: #0F172A; }

/* Grille 2 colonnes de cartes enfant */
.ar-billing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 900px) { .ar-billing-grid { grid-template-columns: 1fr; } }

/* Carte enfant repliable */
.ar-billing-cpanel { position: relative; padding: 0; border: 1px solid #EEF1F6; border-radius: 18px; box-shadow: 0 1px 2px rgba(15,23,42,.05); overflow: hidden; }
.ar-billing-cpanel::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: var(--kc, #6D28D9); z-index: 1; }
.ar-billing-cpanel-head { display: flex; align-items: center; gap: 13px; padding: 16px 18px; cursor: pointer; list-style: none; user-select: none; transition: background .15s; }
.ar-billing-cpanel-head::-webkit-details-marker { display: none; }
.ar-billing-cpanel-head:hover { background: #FAFBFD; }
.ar-billing-cpanel-head .ar-billing-child-av { width: 44px; height: 44px; border-radius: 13px; font-size: 15px; flex: 0 0 auto; }
.ar-billing-cpanel-id { flex: 1; min-width: 0; }
.ar-billing-cpanel-id h3 { margin: 0; font-size: 16px; font-weight: 900; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-billing-cpanel-id small { display: block; margin-top: 1px; font-size: 12.5px; color: #475569; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-billing-cpanel-id .ar-sub-state { color: #94A3B8; font-weight: 600; }
.ar-billing-paypill { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.ar-billing-paypill i { width: 14px; height: 14px; }
.ar-billing-paypill.is-ok { background: #ECFDF3; color: #16A34A; }
.ar-billing-paypill.is-due { background: #FFF3EC; color: #EA580C; }
.ar-billing-chevron { display: inline-flex; flex: 0 0 auto; color: #94A3B8; transition: transform .2s ease; }
.ar-billing-chevron i { width: 18px; height: 18px; }
.ar-billing-cpanel[open] .ar-billing-chevron { transform: rotate(180deg); }
.ar-billing-cpanel-body { padding: 2px 18px 18px; border-top: 1px solid #F1F5F9; }
.ar-billing-cpanel-links { margin: 8px 0 6px; gap: 8px; }
.ar-billing-cpanel-links .ar-billing-btn { flex-direction: row; gap: 8px; align-items: baseline; padding: 9px 14px; border-radius: 11px; border: 1px solid #E2E8F0; background: #fff; }
.ar-billing-cpanel-links .ar-billing-btn:hover { border-color: var(--kc, #6D28D9); }
.ar-billing-cpanel-links .ar-billing-btn span { font-size: 13px; }
.ar-billing-cpanel-links .ar-billing-btn small { opacity: .65; }
.ar-billing-cpanel-lbl { display: inline-flex; align-items: center; gap: 6px; margin: 16px 0 4px; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: #94A3B8; }
.ar-billing-cpanel-lbl i { width: 13px; height: 13px; color: var(--kc, #6D28D9); }
.ar-billing-pay-switch { margin: 0; display: inline-flex; }
.ar-billing-pay-switch .ar-billing-row-btn { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border: none; font: inherit; }
.ar-billing-pay-switch .ar-billing-row-btn i { width: 14px; height: 14px; }

/* Détail de facturation par enfant */
.ar-billing-children { display: flex; flex-direction: column; gap: 16px; }
.ar-billing-child { border: 1px solid #EEF2F7; border-radius: 16px; padding: 14px; background: #fff; border-left: 4px solid var(--kc, #6D28D9); }
.ar-billing-child-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ar-billing-child-av { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; font-weight: 900; font-size: 14px; background: var(--kcs, #F5F3FF); color: var(--kc, #6D28D9); flex: 0 0 auto; }
.ar-billing-child-head strong { display: block; font-size: 15px; font-weight: 900; color: #1E293B; }
.ar-billing-child-head small { font-size: 12px; color: #64748B; font-weight: 700; }

/* v101 — Carte « Prochaine séance » : nettoyage layout (boîte déco retirée, label/heure) */
.ar-teacher-next-card::before { display: none; } /* carré décoratif vide → retiré */
.ar-teacher-next-card > div:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ar-teacher-next-card > div:first-child > span:first-child { display: block; max-width: none; padding-right: 150px; margin-bottom: 2px; }
.ar-teacher-next-card .ar-time-dual-large { display: block; margin: 8px 0 4px; }
.ar-teacher-next-card .ar-time-dual-large b { display: inline; }

/* v102 — Cloche : tag de type (couleur) + ligne titre */
.ar-portal-bell-line1 { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ar-portal-bell-type { font-size: 9.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; flex: 0 0 auto; }
.ar-portal-bell-type.is-forum { background: #EDE9FE; color: #6D28D9; }
.ar-portal-bell-type.is-message { background: #EFF4FF; color: #2563EB; }
.ar-portal-bell-type.is-sms { background: #FFF3EC; color: #EA580C; }
.ar-portal-bell-item.is-read .ar-portal-bell-type { filter: grayscale(.5); }

/* v103 — Colonne « Enfant » (calendrier liste parent) + bandeau enfant (séances groupe) */
.ar-list-child { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #1E293B; white-space: nowrap; }
.ar-list-child i, .ar-list-child svg { width: 14px; height: 14px; color: #6D28D9; }
.ar-seances-child-banner { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 7px 13px; border-radius: 999px; background: #EDE9FE; color: #6D28D9; font-size: 13px; font-weight: 700; }
.ar-seances-child-banner i, .ar-seances-child-banner svg { width: 15px; height: 15px; }
.ar-seances-child-banner strong { font-weight: 800; }

/* v104 — Page profil parent */
.ar-profile { display: flex; flex-direction: column; gap: 20px; }
.ar-profile-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 860px){ .ar-profile-cols { grid-template-columns: 1fr; } }
.ar-profile-main { display: flex; flex-direction: column; gap: 18px; }
.ar-profile-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.ar-profile-field-row { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.ar-profile-field-row .ar-profile-field { margin-bottom: 14px; }
.ar-profile-field label { font-size: 12px; font-weight: 800; color: #64748B; }
.ar-profile-static { font-size: 14px; font-weight: 700; color: #1E293B; display: inline-flex; align-items: center; gap: 8px; }
.ar-profile-lock { color: #94A3B8; } .ar-profile-lock i, .ar-profile-lock svg { width: 14px; height: 14px; }
.ar-profile-field input { padding: 10px 12px; border: 1px solid #E2E8F0; border-radius: 11px; font-size: 14px; font-weight: 600; color: #1E293B; background: #fff; }
.ar-profile-field input:focus { outline: none; border-color: #6D28D9; box-shadow: 0 0 0 3px rgba(109,40,217,.12); }
.ar-profile-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.ar-profile-status { font-size: 12.5px; font-weight: 700; color: #64748B; }
.ar-profile-status.is-ok { color: #16A34A; } .ar-profile-status.is-error { color: #DC2626; }
.ar-profile-note { display: flex; align-items: flex-start; gap: 7px; margin: 14px 0 0; font-size: 12.5px; color: #64748B; }
.ar-profile-note i, .ar-profile-note svg { width: 15px; height: 15px; color: #94A3B8; flex: 0 0 auto; margin-top: 1px; }
.ar-profile-note a { color: #6D28D9; font-weight: 700; }

/* Toggle emails */
.ar-profile-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.ar-profile-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.ar-profile-toggle-track { width: 44px; height: 26px; border-radius: 999px; background: #CBD5E1; flex: 0 0 auto; position: relative; transition: background .16s; }
.ar-profile-toggle-dot { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .16s; }
.ar-profile-toggle input:checked ~ .ar-profile-toggle-track { background: #16A34A; }
.ar-profile-toggle input:checked ~ .ar-profile-toggle-track .ar-profile-toggle-dot { transform: translateX(18px); }
.ar-profile-toggle input:focus-visible ~ .ar-profile-toggle-track { box-shadow: 0 0 0 3px rgba(22,163,74,.25); }
.ar-profile-toggle-txt strong { display: block; font-size: 14px; font-weight: 800; color: #1E293B; }
.ar-profile-toggle-txt small { font-size: 12.5px; color: #64748B; }

/* Mes enfants */
.ar-profile-kids { display: flex; flex-direction: column; gap: 8px; }
.ar-profile-kid { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 13px; border: 1px solid #EEF2F7; text-decoration: none; color: inherit; transition: background .14s; }
.ar-profile-kid:hover { background: var(--kcs); }
.ar-profile-kid-av { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 14px; font-weight: 800; flex: 0 0 auto; background: var(--kcs); color: var(--kc); border: 1px solid color-mix(in srgb, var(--kc) 26%, transparent); }
.ar-profile-kid-body { flex: 1; min-width: 0; }
.ar-profile-kid-body strong { display: block; font-size: 13.5px; font-weight: 800; color: #0F172A; }
.ar-profile-kid-body small { font-size: 12px; color: #64748B; }
.ar-profile-kid > i, .ar-profile-kid > svg { width: 18px; height: 18px; color: #94A3B8; }

/* v105 — Sélecteur de langue (profil) */
.ar-profile-langs { display: inline-flex; gap: 4px; padding: 4px; background: #F1F5F9; border-radius: 13px; }
.ar-profile-lang { padding: 8px 16px; border: 0; background: none; border-radius: 10px; font-size: 13.5px; font-weight: 800; color: #64748B; cursor: pointer; }
.ar-profile-lang:hover { color: #1E293B; }
.ar-profile-lang.is-active { background: #fff; color: #6D28D9; box-shadow: 0 1px 3px rgba(15,23,42,.10); }

/* Liens « aller vers une page » du tableau de bord : flèche animée + couleur primaire. */
.ar-panel-link,
.ar-teacher-panel-footlink {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ar-purple, #7c3aed);
    font-weight: 600;
    text-decoration: none;
}
.ar-panel-link i,
.ar-teacher-panel-footlink i {
    width: 15px;
    height: 15px;
    transition: transform .18s ease;
}
.ar-panel-link:hover,
.ar-teacher-panel-footlink:hover {
    color: var(--ar-purple, #7c3aed);
    text-decoration: none;
}
.ar-panel-link:hover i,
.ar-teacher-panel-footlink:hover i {
    transform: translateX(4px);
}

/* KPI : chiffre coloré comme son icône (même teinte par ton). */
.ar-stat-card.ar-stat-tone-blue   .ar-stat-body strong { color: #0369a1; }
.ar-stat-card.ar-stat-tone-green  .ar-stat-body strong { color: #15803d; }
.ar-stat-card.ar-stat-tone-orange .ar-stat-body strong { color: #c2410c; }
.ar-stat-card.ar-stat-tone-purple .ar-stat-body strong { color: #6d28d9; }
.ar-stat-card.ar-stat-tone-rose   .ar-stat-body strong { color: #be185d; }
.ar-stat-card.is-zero .ar-stat-body strong { opacity: .55; }

/* Section « Recommandation IA » placée en haut de l'accueil. */
.ar-teacher-ai-top { margin-bottom: 18px; }

/* Mini-cartes « Mes groupes » (accueil) : nom du groupe en titre, niveau plus petit,
   badge « À venir » pour les groupes non encore commencés. */
.ar-teacher-group-mini-grid .ar-group-mini-level { font-size: .72rem; opacity: .75; }
.ar-group-mini-badge {
    margin: 0 0 0 6px;
    vertical-align: middle;
}

/* Accueil plus compact : moins d'espace en haut autour du « Bonjour ». */
.ar-portal-content { padding-top: 6px; }
.ar-teacher-dashboard { gap: 14px; }
.ar-teacher-hero { min-height: 0; }

/* Flèche des liens de panneau plus petite. */
.ar-panel-link i,
.ar-teacher-panel-footlink i {
    width: 12px;
    height: 12px;
}

/* Badge compteur devant les titres de panneau (séances du jour, mes groupes). */
.ar-teacher-panel-head h3 { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ar-head-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    color: #0369a1;
    background: #e0f2fe;
}
.ar-head-count-active { color: #be185d; background: #fce7f3; }
.ar-head-count-upcoming { color: #6d28d9; background: #ede9fe; }

/* ---- Accueil : corrections finales (badge, Teams hover, liens de panneau) ---- */

/* 1) Badge « À venir » mini-carte : couleurs identiques au ruban de la page Mes groupes. */
.ar-teacher-group-mini-grid .ar-group-upcoming-ribbon,
.ar-teacher-group-mini-grid .ar-group-upcoming-ribbon i,
.ar-teacher-group-mini-grid .ar-group-upcoming-ribbon svg {
    color: #6D28D9;
}
.ar-teacher-group-mini-grid .ar-group-upcoming-ribbon {
    background: #EDE9FE;
    border-color: #DDD6FE;
}

/* 2) Bouton Teams (séances du jour) : inversion des couleurs au survol. */
.ar-teacher-session-row a {
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.ar-teacher-session-row a:hover {
    background: var(--ar-purple, #7c3aed);
    border-color: var(--ar-purple, #7c3aed);
    color: #fff;
}
.ar-teacher-session-row a:hover i,
.ar-teacher-session-row a:hover svg {
    color: #fff;
}

/* 3) Liens de panneau : violet par défaut, flèche plus petite qui glisse au survol. */
.ar-teacher-panel-head a.ar-panel-link,
a.ar-teacher-panel-footlink {
    color: var(--ar-purple, #7c3aed);
    transition: color .18s ease, transform .18s ease;
}
.ar-teacher-panel-head a.ar-panel-link:hover,
a.ar-teacher-panel-footlink:hover {
    color: #5b21b6;
}
.ar-panel-link i,
.ar-teacher-panel-footlink i {
    width: 11px;
    height: 11px;
    transition: transform .18s ease;
}
.ar-panel-link:hover i,
.ar-teacher-panel-footlink:hover i {
    transform: translateX(3px);
}

/* ================= Statut de groupe : couleurs cohérentes (tout le site) =================
   à venir = violet · actif = vert · terminé = ardoise. */

/* Ruban de statut unifié (format « badge violet À venir » décliné par statut). */
.ar-group-status-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    width: fit-content;
    margin-bottom: 10px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ar-status-fg, #6D28D9);
    background: var(--ar-status-bg, #EDE9FE);
    border: 1px solid var(--ar-status-br, #DDD6FE);
}
.ar-group-status-ribbon i,
.ar-group-status-ribbon svg { width: 12px; height: 12px; }
.ar-group-status-ribbon.is-upcoming { --ar-status-fg: #6D28D9; --ar-status-bg: #EDE9FE; --ar-status-br: #DDD6FE; }
.ar-group-status-ribbon.is-active   { --ar-status-fg: #15803D; --ar-status-bg: #DCFCE7; --ar-status-br: #BBF7D0; }
.ar-group-status-ribbon.is-finished { --ar-status-fg: #475569; --ar-status-bg: #F1F5F9; --ar-status-br: #E2E8F0; }

/* Cartes de groupe : même design homogène, accent haut + teinte par statut. */
.ar-group-card.is-upcoming,
.ar-group-card.is-active,
.ar-group-card.is-finished,
.ar-group-card.is-paused,
.ar-group-card.is-cancelled { position: relative; }
.ar-group-card.is-upcoming::before,
.ar-group-card.is-active::before,
.ar-group-card.is-finished::before,
.ar-group-card.is-paused::before,
.ar-group-card.is-cancelled::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: 20px 20px 0 0;
    background: var(--ar-status-accent, linear-gradient(90deg, #7C3AED, #DB2777));
}
.ar-group-card.is-upcoming {
    --ar-status-accent: linear-gradient(90deg, #7C3AED, #DB2777);
    border-color: #DDD6FE;
    background: linear-gradient(180deg, #FCFBFF, #F6F4FF);
    box-shadow: 0 4px 16px rgba(109, 40, 217, .07);
}
.ar-group-card.is-active {
    --ar-status-accent: linear-gradient(90deg, #16A34A, #22C55E);
    border-color: #BBF7D0;
    background: linear-gradient(180deg, #FBFFFC, #F4FFF8);
    box-shadow: 0 4px 16px rgba(21, 128, 61, .06);
}
.ar-group-card.is-finished {
    --ar-status-accent: linear-gradient(90deg, #64748B, #94A3B8);
    border-color: #E2E8F0;
    background: linear-gradient(180deg, #FCFDFE, #F7F9FB);
    box-shadow: 0 4px 16px rgba(71, 85, 105, .05);
}

/* Cohérence accueil : badges compteurs « Mes groupes » alignés sur la palette statut. */
.ar-head-count-active { color: #15803D; background: #DCFCE7; }
.ar-head-count-upcoming { color: #6D28D9; background: #EDE9FE; }

/* Badge de statut inline dans la mini-carte accueil : pas de marge basse. */
.ar-teacher-group-mini-grid .ar-group-mini-badge { margin: 0 0 0 6px; }

/* Statuts de gestion : en pause = amber, annulé = rouge. */
.ar-group-status-ribbon.is-paused    { --ar-status-fg: #B45309; --ar-status-bg: #FEF3C7; --ar-status-br: #FDE68A; }
.ar-group-status-ribbon.is-cancelled { --ar-status-fg: #B91C1C; --ar-status-bg: #FEE2E2; --ar-status-br: #FECACA; }
.ar-group-status-ribbon.is-waiting   { --ar-status-fg: #92640B; --ar-status-bg: #FEF9C3; --ar-status-br: #FDE68A; }
.ar-group-card.is-paused {
    --ar-status-accent: linear-gradient(90deg, #D97706, #F59E0B);
    border-color: #FDE68A;
    background: linear-gradient(180deg, #FFFDF7, #FFFBEB);
}
.ar-group-card.is-cancelled {
    --ar-status-accent: linear-gradient(90deg, #DC2626, #F87171);
    border-color: #FECACA;
    background: linear-gradient(180deg, #FFFCFC, #FEF2F2);
    opacity: .92;
}

/* Barre « Gérer le groupe » (page détail, staff). */
.ar-group-manage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid var(--ar-line, #e2e8f0);
    border-radius: 16px;
    background: #fff;
}
.ar-group-manage .ar-group-status-ribbon { margin-bottom: 0; }
.ar-group-manage-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ar-inline-state { display: inline-flex; align-items: center; }
.ar-inline-state .ar-modal-status:empty { display: none; }
.ar-btn.is-danger { color: #b91c1c; }
.ar-btn.is-danger:hover { background: #fee2e2; border-color: #fecaca; }

/* Formulaire de pause datée (barre Gérer le groupe). */
.ar-pause-form { flex-wrap: wrap; gap: 8px; }
.ar-pause-field { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ar-muted, #64748b); }
.ar-pause-field input { font-size: 13px; }
.ar-pause-note { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: #B45309; }
.ar-pause-note i { width: 14px; height: 14px; }

/* Barre « Gérer le groupe » épurée + modale d'état. */
.ar-group-manage-info { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ar-group-state-modal .ar-modal-field { display: block; margin: 12px 0; }
.ar-group-state-modal .ar-modal-field > span { display: block; font-size: 12.5px; font-weight: 700; color: var(--ar-muted, #64748b); margin-bottom: 4px; }
.ar-group-state-modal .ar-modal-field input { width: 100%; max-width: 260px; padding: 8px 10px; border: 1px solid var(--ar-line, #e2e8f0); border-radius: 10px; font-size: 14px; }
.ar-group-state-modal .ar-btn.is-danger { color: #b91c1c; }
.ar-group-state-modal .ar-btn.is-danger:hover { background: #fee2e2; border-color: #fecaca; }

/* ============ Statut de séance — palette homogène (badges, légende, dots, calendrier) ============ */
:root{
  /* Palette unique (alignée sur la palette historique du portail) :
     à venir=bleu · complétée=slate · rattrapage/reporté=violet · annulée=orange · offerte=vert. */
  --sp-st-prevue-fg:#2563EB;   --sp-st-prevue-bg:#DBEAFE;
  --sp-st-faite-fg:#64748B;    --sp-st-faite-bg:#F1F5F9;
  --sp-st-annulee-fg:#EA580C;  --sp-st-annulee-bg:#FFEDD5;
  --sp-st-rattr-fg:#7C3AED;    --sp-st-rattr-bg:#EDE9FE;
  --sp-st-offerte-fg:#16A34A;  --sp-st-offerte-bg:#DCFCE7;
}

/* Pastilles (dots) : timeline, calendrier, légende — mêmes couleurs par statut */
.ar-tl-dot.is-confirmed,.ar-event-dot.is-confirmed,.ar-status-legend i.is-confirmed{background:var(--sp-st-prevue-fg);}
.ar-tl-dot.is-done,.ar-event-dot.is-done,.ar-status-legend i.is-done{background:var(--sp-st-faite-fg);}
.ar-tl-dot.is-cancel,.ar-event-dot.is-cancel,.ar-status-legend i.is-cancel{background:var(--sp-st-annulee-fg);}
.ar-tl-dot.is-recovery,.ar-event-dot.is-recovery,.ar-status-legend i.is-recovery{background:var(--sp-st-rattr-fg);}
.ar-tl-dot.is-free,.ar-event-dot.is-free,.ar-status-legend i.is-free{background:var(--sp-st-offerte-fg);}

/* Légende — formatée (dots + layout) */
.ar-status-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;background:#cbd5e1;flex:0 0 auto;}
.ar-status-legend-list{list-style:none;margin:0;padding:0;display:grid;gap:7px;}
.ar-status-legend-list li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#475569;}
.ar-status-legend-list .ar-legend-count{margin-left:auto;font-weight:800;color:#0f172a;}
.ar-status-legend-inline{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.ar-status-legend-inline span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#475569;}

/* Événement calendrier : accent gauche coloré par statut */

/* Séance annulée dans le calendrier : fond pêche neutre + hachure (identique
   entre calendrier global et calendrier de groupe). */
.ar-teacher-calendar-event.is-cancel,.ar-cal-ev.is-cancel{
  background-color:#FFF1E8;
  background-image:repeating-linear-gradient(45deg,rgba(185,28,28,.12) 0,rgba(185,28,28,.12) 6px,transparent 6px,transparent 12px);
  border-left-color:#FCD9BF;
  opacity:.7;
}
.ar-teacher-calendar-event.is-cancel .ar-event-title,.ar-teacher-calendar-event.is-cancel time{text-decoration:line-through;}
/* Calendrier global (board semaine) : séance annulée nettement hachurée. */
.ar-teacher-calendar-board .ar-teacher-calendar-event.is-cancel,
.ar-teacher-calendar-day .ar-teacher-calendar-event.is-cancel{
  background-color:#FFF1E8 !important;
  background-image:repeating-linear-gradient(45deg,rgba(194,65,12,.18) 0,rgba(194,65,12,.18) 6px,transparent 6px,transparent 12px) !important;
  border-left-color:#FB923C !important;
  opacity:.8 !important;
}

/* ---- Bandeau « rapports manquants » redesign (design system) ---- */
/* Strip compact « À compléter » (rapports / présences) */
/* « À compléter » : carte de tâches (titre à gauche, actions à droite) */
.ar-todo-strip{display:flex;align-items:center;gap:18px;width:fit-content;max-width:100%;margin:0 0 12px;padding:10px 16px 10px 12px;border:1px solid #F0E2C4;border-left:4px solid #F59E0B;border-radius:14px;background:linear-gradient(180deg,#FFFEFB,#FFFBF2);box-shadow:0 6px 18px rgba(217,119,6,.06);}
.ar-todo-strip.is-filtering{border-color:#DBEAFE;border-left-color:#3B82F6;background:linear-gradient(180deg,#FBFDFF,#F3F8FF);box-shadow:0 6px 18px rgba(59,130,246,.06);}
.ar-todo-lead{display:flex;align-items:center;gap:11px;min-width:0;}
.ar-todo-ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:#FEF3C7;color:#B45309;flex:0 0 auto;}
.ar-todo-strip.is-filtering .ar-todo-ic{background:#DBEAFE;color:#1D4ED8;}
.ar-todo-ic svg{width:18px;height:18px;}
.ar-todo-lead-txt{display:flex;flex-direction:column;gap:1px;min-width:0;}
.ar-todo-lead-txt strong{font-size:13.5px;font-weight:900;color:#78350F;line-height:1.2;}
.ar-todo-strip.is-filtering .ar-todo-lead-txt strong{color:#1E3A8A;}
.ar-todo-lead-txt small{font-size:11.5px;font-weight:600;color:#A98B57;}
.ar-todo-strip.is-filtering .ar-todo-lead-txt small{color:#6B85B5;}
.ar-todo-actions{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:8px;}
.ar-todo-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 7px;border-radius:999px;background:#fff;border:1px solid #E7E3DA;text-decoration:none;font-size:12.5px;font-weight:800;color:#475569;box-shadow:0 1px 2px rgba(16,35,75,.06);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease,color .14s ease;}
.ar-todo-chip:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(16,35,75,.10);}
.ar-todo-chip svg{width:14px;height:14px;}
.ar-todo-n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;font-size:12px;font-weight:900;color:#fff;}
.ar-todo-go{color:#94A3B8;transition:transform .14s ease;}
.ar-todo-chip:hover .ar-todo-go{transform:translateX(2px);}
.ar-todo-chip.is-reports{padding-left:7px;}
.ar-todo-chip.is-reports .ar-todo-n{background:#D97706;}
.ar-todo-chip.is-reports:hover{border-color:#FCD34D;color:#B45309;}
.ar-todo-chip.is-reports.is-active{background:#D97706;color:#fff;border-color:#D97706;padding-left:12px;}
.ar-todo-chip.is-reports.is-active svg{color:#fff;}
.ar-todo-chip.is-presence .ar-todo-n{background:#0D9488;}
.ar-todo-chip.is-presence:hover{border-color:#5EEAD4;color:#0F766E;}
.ar-todo-chip.is-presence.is-active{background:#0D9488;color:#fff;border-color:#0D9488;padding-left:12px;}
.ar-todo-chip.is-presence.is-active svg{color:#fff;}
@media (max-width:640px){.ar-todo-strip{flex-direction:column;align-items:stretch;width:100%;}.ar-todo-actions{justify-content:flex-start;}}
.ar-missing-bars{display:flex;gap:10px;align-items:stretch;margin:0 0 10px;}
.ar-missing-bars .ar-missing-reports{flex:1;margin:0;min-width:0;}
@media (max-width:820px){.ar-missing-bars{flex-direction:column;}}
.ar-missing-reports{display:flex;align-items:center;gap:9px;margin:0 0 8px;padding:6px 10px;border-radius:11px;border:1px solid #FDE68A;background:linear-gradient(180deg,#FFFDF5,#FFFBEB);}
.ar-missing-reports.is-active{border-color:#c3d9ed;background:linear-gradient(180deg,#F5F9FE,#EFF6FF);}
.ar-missing-reports-ico{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 auto;border-radius:8px;color:#B45309;background:#FEF3C7;}
.ar-missing-reports.is-active .ar-missing-reports-ico{color:#1d4ed8;background:#DBEAFE;}
.ar-missing-reports-ico i{width:15px;height:15px;}
.ar-missing-reports-text{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0;}
.ar-missing-reports-text strong{font-size:12.5px;color:#78350f;}
.ar-missing-reports.is-active .ar-missing-reports-text strong{color:#1e3a8a;}
.ar-missing-reports-text span{font-size:11.5px;color:#92702a;}
.ar-missing-reports.is-active .ar-missing-reports-text span{color:#3b5b8c;}
.ar-missing-reports-btn{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:700;text-decoration:none;color:#fff;background:#D97706;white-space:nowrap;transition:background .15s ease,transform .15s ease;}
.ar-missing-reports-btn:hover{background:#B45309;color:#fff;}
.ar-missing-reports-btn:hover i{transform:translateX(2px);}
.ar-missing-reports-btn i{width:13px;height:13px;transition:transform .15s ease;}
.ar-missing-reports-btn.is-clear{color:#1d4ed8;background:#DBEAFE;}
.ar-missing-reports-btn.is-clear:hover{background:#bfdbfe;color:#1e3a8a;}

/* Bandeau « présences manquantes » : accent teal (distinct des rapports) */
.ar-missing-presence{border-color:#cdeeeb;background:linear-gradient(180deg,#f5fbfa,#ecfdf9);}
.ar-missing-presence .ar-missing-reports-ico{color:#0f766e;background:#ccfbf1;}
.ar-missing-presence .ar-missing-reports-text strong{color:#134e4a;}
.ar-missing-presence .ar-missing-reports-text span{color:#4b7d78;}
.ar-missing-presence:not(.is-active) .ar-missing-reports-btn{background:#0d9488;}
.ar-missing-presence:not(.is-active) .ar-missing-reports-btn:hover{background:#0f766e;}

/* ---- Bouton « Aujourd'hui » (calendrier) ---- */
.ar-cal-today-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:10px;border:1px solid var(--ar-line,#e2e8f0);background:#fff;color:#334155;font-size:12.5px;font-weight:700;text-decoration:none;}
.ar-cal-today-btn:hover{border-color:#c7d2fe;color:#4f46e5;background:#f5f3ff;}
.ar-cal-today-btn i{width:14px;height:14px;}

/* ---- Vue liste : lien groupe + lignes complétées/annulées grisées ---- */
.ar-list-group-link{color:inherit;text-decoration:none;border-bottom:1px dashed transparent;}
.ar-list-group-link:hover{color:var(--ar-purple,#6d28d9);border-bottom-color:currentColor;}
.ar-teacher-list-row.is-dim{opacity:.62;}
.ar-teacher-list-row.is-dim:hover{opacity:1;}

/* Menu 3-points dans la vue liste du calendrier (réutilise .ar-ts-menu). */
.ar-cal-menu-chip{position:relative;display:inline-flex;padding:0;border:0;background:none;}
.ar-cal-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--ar-line,#e2e8f0);border-radius:8px;background:#fff;color:#475569;cursor:pointer;font-size:20px;line-height:1;font-weight:700;padding:0;}
.ar-cal-menu-btn:hover{border-color:#c7d2fe;color:#4f46e5;background:#f5f3ff;}
.ar-cal-menu-btn i,.ar-cal-menu-btn svg{width:16px;height:16px;}
.ar-teacher-list-actions .ar-actions-wrap{display:inline-flex;align-items:center;gap:6px;}

/* Séances du jour (accueil) : ligne cliquable vers la séance. */
/* Ligne « séance du jour » cliquable (structure d.origine préservée). */
.ar-teacher-session-row.is-clickable{cursor:pointer;transition:background .12s ease;}
.ar-teacher-session-row.is-clickable:hover{background:#f5f3ff;border-radius:12px;}
.ar-teacher-session-row.is-clickable:hover strong{color:var(--ar-purple,#6d28d9);}

/* Calendrier du groupe : couleurs de statut (palette canonique) sur les
   événements, au lieu de la teinte niveau uniforme. Fond + libellé colorés ;
   la hachure d.annulation (plus haut) reste préservée. */
.ar-cal-ev.is-confirmed{background-color:#EFF4FF;background-image:none;border-color:#BFD3F5;}
.ar-cal-ev.is-done{background-color:#F1F5F9;background-image:none;border-color:#E2E8F0;}
.ar-cal-ev.is-recovery{background-color:var(--sp-st-rattr-bg);background-image:none;border-color:var(--sp-st-rattr-fg);}
.ar-cal-ev.is-free{background-color:#E9F9EF;background-image:none;border-color:#C4EED2;}
.ar-cal-ev.is-cancel{background-color:#FFF1E8;border-color:#FCD9BF;}
.ar-cal-ev.is-confirmed .ar-cal-ev-status{color:#2563EB;}
.ar-cal-ev.is-done .ar-cal-ev-status{color:#64748B;}
.ar-cal-ev.is-recovery .ar-cal-ev-status{color:var(--sp-st-rattr-fg);}
.ar-cal-ev.is-cancel .ar-cal-ev-status{color:#EA580C;}
.ar-cal-ev.is-free .ar-cal-ev-status{color:#16A34A;}
.ar-cal-ev.is-selected{outline:2px solid var(--ar-niv);outline-offset:1px;}

/* ===== Feuille de temps — panneau de workflow ===== */
.ar-tsw{max-width:860px;border:1px solid #e6ebf5;border-radius:16px;background:#fff;box-shadow:0 8px 22px rgba(16,35,75,.05);padding:18px 20px;margin:0 0 16px;display:flex;flex-direction:column;gap:14px;}
.ar-tsw-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.ar-tsw-title{display:flex;align-items:flex-start;gap:11px;}
.ar-tsw-title > svg{width:24px;height:24px;color:var(--ar-niv,#005064);flex:0 0 auto;margin-top:1px;}
.ar-tsw-title strong{display:block;font-size:14.5px;font-weight:900;color:#16233f;}
.ar-tsw-badge{display:inline-flex;align-items:center;margin-top:5px;padding:3px 11px;border-radius:999px;font-size:11.5px;font-weight:900;}
.ar-tsw-badge.is-draft{color:#475569;background:#e2e8f0;}
.ar-tsw-badge.is-submitted{color:#1d4ed8;background:#dbeafe;}
.ar-tsw-badge.is-approved{color:#15803d;background:#dcfce7;}
.ar-tsw-badge.is-returned{color:#b91c1c;background:#fee2e2;}
.ar-tsw-total{text-align:right;display:flex;flex-direction:column;gap:1px;}
.ar-tsw-total > span{font-size:11.5px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.03em;}
.ar-tsw-total > strong{font-size:22px;font-weight:950;color:#16233f;line-height:1.1;}
.ar-tsw-total > small{font-size:11.5px;font-weight:700;color:#64748b;}
.ar-tsw-comment{display:flex;gap:10px;padding:10px 12px;border-radius:12px;}
.ar-tsw-comment.is-return{background:#fef2f2;border:1px solid #fecaca;}
.ar-tsw-comment.is-approve{background:#f0fdf4;border:1px solid #bbf7d0;}
.ar-tsw-comment > svg{width:18px;height:18px;flex:0 0 auto;margin-top:1px;}
.ar-tsw-comment.is-return > svg{color:#dc2626;}
.ar-tsw-comment.is-approve > svg{color:#16a34a;}
.ar-tsw-comment strong{display:block;font-size:12.5px;font-weight:900;color:#16233f;}
.ar-tsw-comment p{margin:2px 0 0;font-size:13px;color:#334155;}
.ar-tsw-comment em{display:block;margin-top:3px;font-style:normal;font-size:11px;color:#94a3b8;}
.ar-tsw-adj{border-top:1px solid #eef2f9;padding-top:12px;}
.ar-tsw-adj-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.ar-tsw-adj-head small{font-size:11.5px;color:#94a3b8;font-weight:600;}
.ar-tsw-adj-rows{display:flex;flex-direction:column;gap:7px;}
.ar-tsw-adj-colhead{display:flex;gap:8px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#a3adbf;padding:0 2px 2px;}
.ar-tsw-adj-colhead span:first-child{flex:1;}
.ar-tsw-adj-colhead span:nth-child(2){width:116px;flex:0 0 auto;}
.ar-tsw-adj-colhead span:last-child{width:34px;flex:0 0 auto;}
.ar-tsw-adj-row{display:flex;gap:8px;align-items:center;}
.ar-tsw-adj-row > input[type=text]{flex:1;min-width:0;}
.ar-tsw-adj-row input{border:1px solid #cbd5e1;border-radius:9px;padding:8px 10px;font-size:13px;font-weight:600;color:#334155;background:#fff;}
.ar-tsw-adj-row input:focus{outline:none;border-color:var(--ar-niv,#6d28d9);box-shadow:0 0 0 3px rgba(109,40,217,.12);}
.ar-tsw-adj-hours{position:relative;width:116px;flex:0 0 auto;}
.ar-tsw-adj-hours input{width:100%;padding-right:26px;text-align:right;}
.ar-tsw-adj-hours span{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:800;color:#94a3b8;pointer-events:none;}
.ar-tsw-adj-del{display:inline-flex;align-items:center;justify-content:center;width:34px;height:36px;flex:0 0 auto;border:1px solid #e6ebf5;border-radius:9px;background:#fff;color:#94a3b8;cursor:pointer;transition:all .12s;}
.ar-tsw-adj-del:hover{border-color:#fca5a5;color:#dc2626;background:#fef2f2;}
.ar-tsw-adj-del svg{width:16px;height:16px;}
.ar-tsw-adj-actions{display:flex;gap:8px;margin-top:10px;}
.ar-tsw-adj-readonly{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;}
.ar-tsw-adj-readonly li{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:6px 10px;background:#fafbfc;border:1px solid #eef1f4;border-radius:9px;}
.ar-tsw-adj-readonly b{font-weight:900;color:#16233f;}
.ar-tsw-adj-empty{font-size:12.5px;color:#94a3b8;font-weight:600;margin:0;}
.ar-tsw-actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px;border-top:1px solid #eef2f9;padding-top:12px;}
.ar-tsw-actions > .ar-btn{align-self:flex-start;width:auto;}
.ar-tsw-actions .ar-btn[data-ar-tsw-action="submit"]{padding:9px 18px;font-size:13px;border-radius:11px;}
.ar-tsw-actions .ar-btn[data-ar-tsw-action="submit"] svg{width:16px;height:16px;}
.ar-tsw-wait,.ar-tsw-ok,.ar-tsw-hint{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;margin:0;}
.ar-tsw-wait{color:#1d4ed8;}
.ar-tsw-ok{color:#15803d;}
.ar-tsw-hint{color:#94a3b8;}
.ar-tsw-wait svg,.ar-tsw-ok svg,.ar-tsw-hint svg{width:15px;height:15px;}
.ar-tsw-review{align-self:stretch;display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid #dbe4f5;border-radius:12px;background:#f5f8ff;}
.ar-tsw-review::before{content:"D\00e9 cision";font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#4b6bb0;}
.ar-tsw-review textarea{width:100%;border:1px solid #cbd5e1;border-radius:9px;padding:8px 10px;font-size:13px;font-family:inherit;resize:vertical;}
.ar-tsw-review-btns{display:flex;justify-content:flex-end;gap:8px;}
.ar-tsw-status{margin:0;font-size:12.5px;font-weight:700;color:#15803d;}
.ar-tsw-status.is-error{color:#dc2626;}
.ar-tsw-status:empty{display:none;}
.ar-tsw-history{border-top:1px solid #eef2f9;padding-top:10px;}
.ar-tsw-history > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:#435071;}
.ar-tsw-history > summary::-webkit-details-marker{display:none;}
.ar-tsw-history > summary svg{width:15px;height:15px;color:#94a3b8;}
.ar-tsw-history ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
.ar-tsw-history li{font-size:13px;}
.ar-tsw-hist-link{display:flex;align-items:center;gap:10px;text-decoration:none;padding:8px 10px;border-radius:9px;transition:background .12s;}
.ar-tsw-hist-link:hover{background:#f4f6fb;}
.ar-tsw-hist-month{flex:1;font-weight:700;color:#334155;}
.ar-tsw-hist-total{font-weight:900;color:#16233f;}
.ar-tsw-hist-arrow{width:14px;height:14px;color:#94a3b8;flex:0 0 auto;}

/* ===== Feuille de temps v2 — résumé, liste de tâches, modale ===== */
.ar-tsw-summary{display:flex;flex-direction:column;gap:2px;border:1px solid #eef2f9;border-radius:12px;padding:6px 14px;background:#fafbff;}
.ar-tsw-sum-line{display:flex;align-items:center;gap:10px;padding:8px 0;}
.ar-tsw-sum-line + .ar-tsw-sum-line{border-top:1px solid #eef2f9;}
.ar-tsw-sum-ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:#eef2ff;color:#4338ca;flex:0 0 auto;}
.ar-tsw-sum-ic svg{width:15px;height:15px;}
.ar-tsw-sum-lbl{flex:1;font-size:13px;font-weight:700;color:#334155;}
.ar-tsw-sum-line b{font-size:15px;font-weight:900;color:#16233f;}
.ar-tsw-sum-line b.is-pos{color:#15803d;}
.ar-tsw-sum-line b.is-neg{color:#b91c1c;}
.ar-tsw-sum-line.is-total .ar-tsw-sum-ic{background:var(--ar-niv-soft,#ede9fe);color:var(--ar-niv,#6d28d9);}
.ar-tsw-sum-line.is-total .ar-tsw-sum-lbl{font-weight:900;color:#16233f;}
.ar-tsw-sum-line.is-total b{font-size:19px;color:var(--ar-niv,#6d28d9);}
.ar-tsw-comment.is-note{background:#f5f8ff;border:1px solid #dbe4f5;}
.ar-tsw-comment.is-note > svg{color:#4338ca;}

/* Liste de tâches (ajustements) */
.ar-tsw-tasks{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:6px;}
.ar-tsw-task{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #e9edf5;border-radius:10px;background:#fff;}
.ar-tsw-task-motif{flex:1;min-width:0;font-size:13px;font-weight:700;color:#334155;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ar-tsw-task-hours{flex:0 0 auto;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:900;}
.ar-tsw-task-hours.is-pos{color:#15803d;background:#dcfce7;}
.ar-tsw-task-hours.is-neg{color:#b91c1c;background:#fee2e2;}
.ar-tsw-task-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 auto;border:1px solid #e6ebf5;border-radius:8px;background:#fff;color:#94a3b8;cursor:pointer;transition:all .12s;}
.ar-tsw-task-btn:hover{border-color:var(--ar-niv,#6d28d9);color:var(--ar-niv,#6d28d9);background:#faf9ff;}
.ar-tsw-task-btn.is-del:hover{border-color:#fca5a5;color:#dc2626;background:#fef2f2;}
.ar-tsw-task-btn.is-ok{border-color:#86efac;color:#16a34a;background:#f0fdf4;}
.ar-tsw-task-btn svg{width:15px;height:15px;}
.ar-tsw-task.is-editing{gap:8px;}
.ar-tsw-task.is-editing input[type=text]{flex:1;min-width:0;border:1px solid #cbd5e1;border-radius:8px;padding:7px 10px;font-size:13px;font-weight:600;}
.ar-tsw-task-empty{list-style:none;padding:10px;border:1px dashed #dbe1ec;border-radius:10px;color:#94a3b8;font-size:12.5px;font-weight:600;text-align:center;background:#fafbfc;}
.ar-tsw-tasks.is-readonly .ar-tsw-task{background:#fafbfc;}
.ar-tsw-addrow{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:8px;border:1px dashed #d5dcea;border-radius:11px;background:#fbfcff;}
.ar-tsw-addrow > input[type=text]{flex:1;min-width:0;border:1px solid #cbd5e1;border-radius:8px;padding:8px 10px;font-size:13px;font-weight:600;}
.ar-tsw-addrow input:focus,.ar-tsw-task.is-editing input:focus{outline:none;border-color:var(--ar-niv,#6d28d9);box-shadow:0 0 0 3px rgba(109,40,217,.12);}

/* Modale de soumission */
#ar-ts-submit-modal .ar-modal-body{text-align:left;padding:16px 20px 4px;display:flex;flex-direction:column;gap:14px;}
#ar-ts-submit-modal .ar-modal-body strong{display:inline;font-size:inherit;margin:0;}
.ar-tsw-modal-intro{margin:0;font-size:13.5px;color:#475569;font-weight:600;line-height:1.5;}
.ar-tsw-modal-total{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px;border-radius:12px;background:var(--ar-niv-soft,#ede9fe);}
.ar-tsw-modal-total > span{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#64748b;}
#ar-ts-submit-modal .ar-tsw-modal-total > strong{display:block;font-size:30px;font-weight:950;color:var(--ar-niv,#6d28d9);line-height:1;margin:0;}
.ar-tsw-modal-total > small{font-size:12px;font-weight:700;color:#64748b;}
.ar-tsw-modal-note{display:flex;flex-direction:column;gap:5px;}
.ar-tsw-modal-note > span{font-size:12px;font-weight:800;color:#475569;}
.ar-tsw-modal-note textarea{width:100%;border:1px solid #cbd5e1;border-radius:9px;padding:8px 10px;font-size:13px;font-family:inherit;resize:vertical;}

/* Feuille de temps — encart « soumission à la fin du mois » (enseignant) */
.ar-tsw-notice{align-self:stretch;display:flex;gap:9px;align-items:flex-start;padding:11px 13px;border:1px solid #DBEAFE;border-radius:11px;background:#f5f9ff;color:#1e3a8a;font-size:12.5px;font-weight:600;line-height:1.45;}
.ar-tsw-notice > svg{width:17px;height:17px;color:#2563eb;flex:0 0 auto;margin-top:1px;}
.ar-tsw-notice strong{font-weight:800;}


/* ============================================================
   Portail parent v3 — cartes enfants, switcher, en-tête enfant,
   badges, parcours visuel, upload avatar. (2026-07-12)
   Neutre : la couleur de niveau ne teinte PAS les fonds (juste
   les puces/chips). Marque = --ar-primary.
   ============================================================ */

/* ---------- Salutation parent (soleil / lune, même couleur que le staff) ---------- */
.ar-parent-greeting { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.ar-parent-greeting-icon { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
    background: #fff7ed; color: #f97316; box-shadow: 0 12px 26px rgba(249, 115, 22, .14); }
.ar-parent-greeting-icon svg { width: 24px; height: 24px; }
.ar-parent-greeting h2 { margin: 0; font-size: 25px; font-weight: 800; color: var(--ar-ink); }
.ar-parent-greeting p { margin: 4px 0 0; font-size: 14px; color: var(--ar-muted); }

/* ---------- Cartes enfants — fond neutre ; badges + progression en COULEUR DU NIVEAU (--lc) ---------- */
.ar-kidcards { --kac: var(--ar-purple); display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 320px)); gap: 22px; justify-content: center; }
.ar-kidcard { --lc: var(--ar-purple); --lcs: #f3f0ff; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 26px 24px 24px; border-radius: 22px; background: var(--ar-card); border: 1px solid var(--ar-border);
    box-shadow: var(--ar-shadow-sm); overflow: hidden; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.ar-kidcard:hover { transform: translateY(-4px); box-shadow: 0 14px 34px color-mix(in srgb, var(--lc) 20%, transparent); border-color: color-mix(in srgb, var(--lc) 40%, var(--ar-border)); }
.ar-kidcard-link { position: absolute; inset: 0; z-index: 2; }
.ar-kidcard > *:not(.ar-kidcard-link) { position: relative; z-index: 1; }
.ar-kidcard .ar-kidcard-join, .ar-kidcard-cta { position: relative; z-index: 3; }
.ar-kidcard-avatar { width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; overflow: hidden;
    font-size: 26px; font-weight: 800; background: var(--lcs); color: var(--lc);
    border: 3px solid color-mix(in srgb, var(--lc) 26%, #fff); box-shadow: 0 8px 20px color-mix(in srgb, var(--lc) 20%, transparent); }
.ar-kidcard-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ar-kidcard-name { margin: 12px 0 0; font-size: 18px; font-weight: 800; color: var(--ar-ink); }
.ar-kidcard-tags { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.ar-kidcard-tag { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
    color: var(--lc); background: color-mix(in srgb, var(--lc) 12%, #fff); }
.ar-kidcard-tag.is-muted { color: var(--ar-muted); background: #f1f5f9; }
.ar-kidcard-more { font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 999px;
    color: #475569; background: #eef2f7; box-shadow: inset 0 0 0 1px #e2e8f0; white-space: nowrap; }
.ar-kidcard-progress { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 12px; }
.ar-kidcard-progress-lbl { font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ar-muted); white-space: nowrap; }
.ar-kidcard-bar { flex: 1; height: 9px; border-radius: 999px; background: var(--ar-line); overflow: hidden; }
.ar-kidcard-bar span { display: block; height: 100%; border-radius: 999px; background: var(--lc); transition: width .4s ease; }
.ar-kidcard-progress b { font-size: 13px; font-weight: 800; color: var(--lc); min-width: 36px; text-align: right; }
.ar-kidcard-next { width: 100%; margin-top: 16px; padding: 13px 14px; border-radius: 16px;
    background: var(--ar-bg); border: 1px solid var(--ar-line); display: flex; flex-direction: column; gap: 4px; }
.ar-kidcard-next.is-today { background: color-mix(in srgb, var(--lc) 8%, #fff); border-color: color-mix(in srgb, var(--lc) 26%, transparent); }
.ar-kidcard-next-lbl { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--ar-muted); }
.ar-kidcard-next-lbl svg { width: 14px; height: 14px; }
.ar-kidcard-next strong { font-size: 14.5px; font-weight: 800; color: var(--ar-ink); }
.ar-kidcard-next strong.is-muted { color: var(--ar-muted); font-weight: 700; }
.ar-kidcard-join { margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 13px; font-weight: 800; color: #fff; background: var(--lc); padding: 8px 13px; border-radius: 11px; text-decoration: none; }
.ar-kidcard-join svg { width: 15px; height: 15px; }
/* Badges obtenus + à obtenir, chacun à la couleur de SON niveau (--bc) */
.ar-kidcard-badges { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.ar-kidcard-badge { position: relative; width: 40px; height: 40px; border-radius: 50%; background: #fff; flex: 0 0 auto;
    border: 2px solid color-mix(in srgb, var(--bc) 48%, #fff); box-shadow: var(--ar-shadow-sm); }
.ar-kidcard-badge img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ar-kidcard-badge.is-locked { border-color: var(--ar-border); }
.ar-kidcard-badge.is-locked img { filter: grayscale(1); opacity: .4; }
.ar-kidcard-badge-chk { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: var(--ar-green); border: 2px solid #fff; }
.ar-kidcard-badge-chk svg { width: 9px; height: 9px; color: #fff; }
.ar-kidcard-badge-more { font-size: 12px; font-weight: 800; color: var(--ar-muted); }
.ar-kidcard-cta { margin-top: 18px; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 800; color: var(--kac); }
.ar-kidcard-cta svg { width: 16px; height: 16px; transition: transform .16s ease; }
.ar-kidcard:hover .ar-kidcard-cta svg { transform: translateX(3px); }
.ar-kidcard-emptybox { width: 100%; margin-top: 18px; padding: 22px 14px; border-radius: 16px; border: 1px dashed var(--ar-border);
    background: var(--ar-bg); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ar-muted); font-size: 13.5px; font-weight: 600; }
.ar-kidcard-emptybox svg { width: 24px; height: 24px; color: var(--kac); }
.ar-kidcard.is-empty .ar-kidcard-avatar { background: #f1f5f9; color: var(--ar-muted); border-color: var(--ar-border); box-shadow: 0 6px 18px rgba(15,23,42,.08); }
.ar-kidcard.is-empty .ar-kidcard-cta { color: var(--ar-muted); }

/* Carte « Inscrire un enfant » (violet du site, ouvre le modal) */
.ar-kidcard-add { cursor: pointer; justify-content: center; gap: 12px; padding: 30px 24px; border: 2px dashed color-mix(in srgb, var(--kac) 34%, var(--ar-border));
    background: color-mix(in srgb, var(--kac) 4%, #fff); font: inherit; }
.ar-kidcard-add:hover { border-color: var(--kac); background: color-mix(in srgb, var(--kac) 8%, #fff); transform: translateY(-4px); }
.ar-kidcard-add-plus { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--kac); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--kac) 32%, transparent); }
.ar-kidcard-add-plus svg { width: 28px; height: 28px; }
.ar-kidcard-add-sub { font-size: 12.5px; color: var(--ar-muted); max-width: 210px; }

/* ---------- Modal d'inscription (hero + options) ---------- */
.ar-enroll-modal { position: relative; max-width: 440px; padding: 0; overflow: hidden; }
.ar-enroll-x { position: absolute; top: 12px; right: 12px; z-index: 2; color: #fff; }
.ar-enroll-hero { padding: 30px 26px 22px; text-align: center; color: #fff;
    background: linear-gradient(135deg, var(--ar-purple), color-mix(in srgb, var(--ar-purple) 60%, #1e1b4b)); }
.ar-enroll-hero-ico { width: 60px; height: 60px; margin: 0 auto 12px; border-radius: 20px; display: grid; place-items: center;
    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); }
.ar-enroll-hero-ico svg { width: 28px; height: 28px; color: #fff; }
.ar-enroll-hero strong { display: block; font-size: 19px; font-weight: 800; }
.ar-enroll-hero p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.9); }
.ar-enroll-options { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 20px; }
.ar-enroll-opt { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: 15px; text-decoration: none;
    border: 1px solid var(--ar-border); background: var(--ar-card); transition: border-color .14s ease, transform .16s ease, box-shadow .16s ease; }
/* Hover : PAS de changement de fond — juste un mouvement (soulèvement) + ombre. */
.ar-enroll-opt:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ar-purple) 45%, var(--ar-border)); box-shadow: var(--ar-shadow); }
.ar-enroll-opt.is-primary { border-color: color-mix(in srgb, var(--ar-purple) 34%, transparent); background: color-mix(in srgb, var(--ar-purple) 7%, #fff); }
.ar-enroll-opt-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--ar-purple) 12%, #fff); color: var(--ar-purple); }
.ar-enroll-opt-ico svg { width: 21px; height: 21px; }
.ar-enroll-opt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.ar-enroll-opt-txt strong { font-size: 14.5px; font-weight: 800; color: var(--ar-ink); }
.ar-enroll-opt-txt small { font-size: 12.5px; color: var(--ar-muted); }
.ar-enroll-opt-go { width: 18px; height: 18px; color: var(--ar-muted); flex: 0 0 auto; transition: transform .16s ease, color .14s ease; }
.ar-enroll-opt:hover .ar-enroll-opt-go { color: var(--ar-purple); transform: translateX(4px); }

/* ---------- Switcher d'enfant (sidebar, calqué sur .ar-portal-nav) ---------- */
.ar-portal-childsw { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ar-border); }
.ar-portal-childsw-lbl { display: block; padding: 2px 12px 8px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ar-muted); }
.ar-portal-childsw-av { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto;
    width: 38px; height: 38px; border-radius: 11px; font-size: 14px; font-weight: 800;
    background: var(--ar-bg); color: var(--ar-primary); border: 1px solid var(--ar-border); }
.ar-portal-childsw-av img { width: 100%; height: 100%; object-fit: cover; }
.ar-portal-childsw-item.active .ar-portal-childsw-av { border-color: color-mix(in srgb, var(--ar-primary) 40%, transparent); }

/* ---------- En-tête enfant (clean, sans fond coloré) ---------- */
.ar-enfant-head { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
    padding: 6px 2px 20px; border-bottom: 1px solid var(--ar-border); margin-bottom: 4px; }
.ar-enfant-head-id { display: flex; align-items: center; gap: 18px; min-width: 0; }
.ar-enfant-head-txt h2 { margin: 0; font-size: 25px; font-weight: 800; color: var(--ar-ink); line-height: 1.15; }
.ar-enfant-head-tag { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; padding: 5px 12px; border-radius: 999px;
    font-size: 13px; font-weight: 700; color: var(--kc); background: var(--kcs); }
.ar-enfant-head-tag svg { width: 15px; height: 15px; }
.ar-enfant-head-stats { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.ar-enfant-hstat { min-width: 104px; padding: 13px 16px; border-radius: 16px; background: var(--ar-card); border: 1px solid var(--ar-border);
    box-shadow: var(--ar-shadow-sm); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ar-enfant-hstat > svg { width: 18px; height: 18px; color: var(--ar-primary); margin-bottom: 2px; }
.ar-enfant-hstat strong { font-size: 15px; font-weight: 800; color: var(--ar-ink); }
.ar-enfant-hstat small { font-size: 11px; font-weight: 600; color: var(--ar-muted); }
.ar-enfant-hring { --p: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 2px;
    background: radial-gradient(closest-side, #fff 76%, transparent 77% 100%), conic-gradient(var(--ar-primary) calc(var(--p) * 1%), var(--ar-line) 0); }
.ar-enfant-hring b { font-size: 12px; font-weight: 800; color: var(--ar-primary); }

/* ---------- Avatar enfant + upload (caméra au survol) ---------- */
.ar-enfant-ava { position: relative; width: 84px; height: 84px; flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer; display: block; }
.ar-enfant-ava-img { position: relative; width: 100%; height: 100%; border-radius: 24px; overflow: hidden; display: grid; place-items: center;
    font-size: 28px; font-weight: 800; color: var(--kc); background: var(--kcs); border: 2px solid color-mix(in srgb, var(--kc) 24%, transparent); }
.ar-enfant-ava-img img { width: 100%; height: 100%; object-fit: cover; }
.ar-enfant-ava-cam { position: absolute; inset: 0; border-radius: 24px; display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .5); color: #fff; opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.ar-enfant-ava-cam svg { width: 24px; height: 24px; }
.ar-enfant-ava:hover .ar-enfant-ava-cam, .ar-enfant-ava:focus-visible .ar-enfant-ava-cam { opacity: 1; }
.ar-enfant-ava.is-uploading { opacity: .6; pointer-events: none; }
.ar-enfant-ava.is-uploading .ar-enfant-ava-cam { opacity: 1; }

/* ---------- Badges ---------- */
.ar-badges { display: flex; flex-wrap: wrap; gap: 18px; }
.ar-badge { width: 112px; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ar-badge-img { position: relative; width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
    background: #fff; border: 3px solid color-mix(in srgb, var(--bc) 45%, #fff); box-shadow: var(--ar-shadow-sm); }
.ar-badge-img img { width: 100%; height: 100%; object-fit: cover; }
.ar-badge-check { position: absolute; right: -2px; bottom: -2px; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: var(--ar-green); border: 2px solid #fff; }
.ar-badge-check svg { width: 14px; height: 14px; color: #fff; }
.ar-badge figcaption { font-size: 12.5px; font-weight: 800; color: var(--ar-ink); }
.ar-badge-state { font-size: 11px; font-weight: 700; color: var(--ar-green); }
.ar-badge.is-locked .ar-badge-img { border-color: var(--ar-border); }
.ar-badge.is-locked .ar-badge-img img { filter: grayscale(1); opacity: .4; }
.ar-badge.is-locked figcaption { color: var(--ar-muted); }
.ar-badge.is-locked .ar-badge-state { color: var(--ar-muted); }

/* ---------- Parcours : PISTE D'AVENTURE (médaillons circulaires reliés) ---------- */
/* Section encadrée (panneau dédié) */
.ar-path-section { background: #fff; border: 1px solid #eef2f7; border-radius: 20px; padding: 20px 20px 8px; box-shadow: 0 6px 20px rgba(15, 23, 42, .04); }
.ar-path { display: flex; gap: 22px; align-items: stretch; justify-content: space-between; overflow-x: auto; padding: 32px 4px 18px; scroll-snap-type: x proximity; }
.ar-path-node { position: relative; flex: 1 1 0; min-width: 108px; max-width: 150px; min-height: 232px; padding: 36px 6px 10px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; gap: 0;
    text-align: center; text-decoration: none; scroll-snap-align: start; transition: background .16s ease; }
/* La PISTE reliant les médaillons : segment épais arrondi, au centre du médaillon.
   Rempli (violet) jusqu'au niveau atteint, pointillé pour la suite. */
.ar-path-node:not(:last-child)::after { content: ""; position: absolute; top: 82px; right: -14px; width: 26px; height: 6px; border-radius: 999px; z-index: 0;
    background: repeating-linear-gradient(90deg, var(--ar-border) 0 7px, transparent 7px 13px); }
.ar-path-node.is-reached:not(:last-child)::after { background: linear-gradient(90deg, #a78bfa, #7c3aed); box-shadow: 0 1px 4px rgba(124, 58, 237, .25); }
.ar-path-node:not(:last-child)::before { content: none; }
/* Médaillon circulaire (anneau = couleur d'état, image du niveau à l'intérieur) */
.ar-path-card { position: relative; width: 92px; height: 92px; border-radius: 50%; overflow: visible; display: block; z-index: 1;
    background: color-mix(in srgb, var(--lc) 10%, #fff); border: 4px solid var(--lc);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12); transition: transform .16s ease, box-shadow .16s ease; }
/* L'illustration du niveau est le héros du médaillon : pleine, vive, clippée au cercle
   (le clip est sur ::before, pas sur la carte, pour NE PAS rogner les pastilles flottantes). */
.ar-path-card::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background-image: var(--img, none); background-size: cover; background-position: center top; opacity: 1; }
.ar-path-card::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 -8px 14px rgba(15, 23, 42, .06); pointer-events: none; }
/* Survol : légère élévation + halo à la couleur du niveau/état (jamais de fond parasite). */
a.ar-path-node, button.ar-path-node { border-radius: 16px; }
a.ar-path-node:hover, button.ar-path-node:hover, button.ar-path-node:focus, button.ar-path-node:active { background: color-mix(in srgb, var(--lc) 7%, transparent); }
a.ar-path-node:hover .ar-path-card, button.ar-path-node:hover .ar-path-card { transform: translateY(-4px) scale(1.04); box-shadow: 0 0 0 5px color-mix(in srgb, var(--lc) 16%, transparent), 0 16px 28px rgba(15, 23, 42, .16); }
/* Drapeau d'état : pastille flottante au coin bas-droit */
.ar-path-flag { position: absolute; right: -1px; bottom: -1px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 3px solid #fff; box-shadow: 0 3px 8px rgba(15, 23, 42, .22); }
.ar-path-flag svg { width: 16px; height: 16px; color: #fff; }
/* Niveau TERMINÉ : accent TEAL « fierté » (médaille) — distinct du VERT (En cours),
   de l'ambre (En validation) et du bleu (En préparation). */
.ar-path-flag.is-done { background: linear-gradient(135deg, #2dd4bf, #0d9488); }
.ar-path-node.is-done .ar-path-card { border-color: #0d9488; box-shadow: 0 0 0 4px rgba(13, 148, 136, .16), 0 8px 18px rgba(15, 23, 42, .12); }
.ar-path-node.is-done .ar-path-num { background: #0d9488; }
.ar-path-node.is-done .ar-path-name { color: #115e59; }
.ar-path-node.is-done .ar-path-name::after { content: " 🎉"; }
.ar-path-flag.is-current { background: #15803D; }
.ar-path-flag.is-off { background: var(--ar-muted); }
.ar-path-flag.is-lock { background: var(--ar-muted); }
.ar-path-flag.is-cancelled { background: #B91C1C; }
.ar-path-flag.is-paused { background: #B45309; }
.ar-path-flag.is-waiting { background: #92640B; }
.ar-path-flag.is-upcoming { background: #6D28D9; }
/* Chips d'état — MÊME palette que le badge de statut du groupe (.ar-group-status-ribbon.is-*) */
.ar-path-node.is-current .ar-path-state   { color: #15803D; background: #DCFCE7; }
.ar-path-node.is-done .ar-path-state      { color: #fff; background: linear-gradient(135deg, #14b8a6, #0d9488); box-shadow: 0 3px 8px rgba(13, 148, 136, .28); }
.ar-path-node.is-upcoming .ar-path-state  { color: #6D28D9; background: #EDE9FE; }
.ar-path-node.is-paused .ar-path-state    { color: #B45309; background: #FEF3C7; }
.ar-path-node.is-cancelled .ar-path-state { color: #B91C1C; background: #FEE2E2; }
.ar-path-node.is-waiting .ar-path-state   { color: #92640B; background: #FEF9C3; }
/* Bordure de carte assortie à la couleur du statut */
.ar-path-node.is-upcoming .ar-path-card  { border-color: #6D28D9; }
.ar-path-node.is-cancelled .ar-path-card { border-color: #B91C1C; }
.ar-path-node.is-cancelled .ar-path-card::before { filter: grayscale(1); opacity: .22; }
.ar-path-node.is-paused .ar-path-card    { border-color: #B45309; }
.ar-path-node.is-waiting .ar-path-card   { border-color: #92640B; }
/* Numéro de niveau : pastille flottante sur le médaillon (haut-gauche), chiffre
   blanc. Grisée quand le niveau est verrouillé (non suivi). */
.ar-path-num { position: absolute; top: -7px; left: -7px; z-index: 4; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 10px;
    display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 900; letter-spacing: -.02em;
    background: linear-gradient(150deg, color-mix(in srgb, var(--lc) 72%, #fff), var(--lc));
    border: 2.5px solid #fff; box-shadow: 0 4px 10px color-mix(in srgb, var(--lc) 40%, transparent), 0 1px 3px rgba(15, 23, 42, .2); }
.ar-path-node.is-off .ar-path-num { background: linear-gradient(150deg, #cbd5e1, #94a3b8); box-shadow: 0 3px 8px rgba(100, 116, 139, .3); }
/* Nom du niveau : header clair sous le médaillon. */
.ar-path-name { margin-top: 13px; font-size: 14px; font-weight: 800; color: var(--ar-ink); line-height: 1.2; }
/* Pied du nœud : statut (aligné juste sous le nom), puis groupe, puis notif. */
.ar-path-foot { margin-top: 11px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ar-path-group { min-height: 15px; font-size: 11.5px; font-weight: 800; color: var(--lc); line-height: 1.3; max-width: 130px; }
.ar-path-node.is-off .ar-path-group { color: var(--ar-muted); }
.ar-path-group-lbl { font-weight: 600; color: var(--ar-muted); }
/* Tag d'état poussé en bas de chaque nœud → rangée de tags parfaitement alignée
   (le min-height du nœud garantit un espace au-dessus). */
/* Badge de statut : avec ICÔNE d'état (plus de simple point), sur une seule ligne. */
.ar-path-state { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 999px; color: #475569; background: #F1F5F9; letter-spacing: .01em; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .05); }
.ar-path-state svg { width: 13px; height: 13px; }
.ar-path-node.is-off .ar-path-card { border-color: #cbd5e1; background: var(--ar-bg); }
.ar-path-node.is-off .ar-path-card::before { filter: grayscale(1); opacity: .34; }
.ar-path-node.is-off .ar-path-card::after { display: none; }
.ar-path-node.is-off .ar-path-name { color: var(--ar-muted); }
.ar-path-node.is-off .ar-path-state { color: var(--ar-muted); background: var(--ar-bg); }
.ar-path-node.is-current .ar-path-card { box-shadow: 0 0 0 4px color-mix(in srgb, var(--lc) 22%, transparent); }

@media (max-width: 640px) {
    .ar-enfant-head { flex-direction: column; align-items: flex-start; }
    .ar-enfant-head-stats { width: 100%; }
    .ar-enfant-hstat { flex: 1; min-width: 0; }
}

/* ---------- Navigation structurée : profil en bas + contexte enfant ---------- */
.ar-portal-sidebar { display: flex; flex-direction: column; }
.ar-portal-nav-bottom { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.ar-portal-nav-context { margin-top: 6px; }
.ar-portal-childsw { border-top-color: rgba(255,255,255,.14); }
.ar-portal-childsw-lbl { color: rgba(255,255,255,.62); }
.ar-portal-childsw-av { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.28); }
.ar-portal-childsw-item.active .ar-portal-childsw-av { background: #fff; color: var(--ar-primary); border-color: #fff; }
/* Le rail réduit force 22px sur le 1er span : garder l'avatar rond lisible. */
.ar-portal-app .ar-portal-childsw-av { width: 34px; height: 34px; border-radius: 10px; }

/* ---------- Espace bas de la sidebar (dégage le widget flottant WhatsApp) ---------- */
/* Desktop : 70px sous « Mon profil ». */
.ar-portal-nav-bottom { margin-bottom: 70px; }
/* Autres devices (sidebar off-canvas mobile/tablette) : espace réduit. */
@media (max-width: 1024px) { .ar-portal-nav-bottom { margin-bottom: 24px; } }

/* ---------- En-tête enfant : badges en haut à droite ---------- */
.ar-enfant-head-badges { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.ar-enfant-badges-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--ar-muted); text-transform: uppercase; letter-spacing: .03em; }
.ar-enfant-badges-lbl svg { width: 15px; height: 15px; color: var(--ar-primary); }
.ar-enfant-badges-lbl b { color: var(--ar-ink); }
.ar-badgerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ar-badgemini { position: relative; width: 46px; height: 46px; border-radius: 50%; overflow: visible; flex: 0 0 auto; }
.ar-badgemini img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #fff;
    border: 2px solid color-mix(in srgb, var(--bc) 50%, #fff); box-shadow: var(--ar-shadow-sm); }
.ar-badgemini-check { position: absolute; right: -3px; bottom: -3px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; background: var(--ar-green); border: 2px solid #fff; }
.ar-badgemini-check svg { width: 11px; height: 11px; color: #fff; }
.ar-badgemini.is-locked img { filter: grayscale(1); opacity: .42; border-color: var(--ar-border); }

/* ---------- KPIs enfant (design stat-card, comme le dashboard) ---------- */
.ar-enfant-kpis { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .ar-enfant-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ar-enfant-kpis { grid-template-columns: 1fr; } }

/* ---------- Menu contextuel enfant dans la TOPBAR (haut) ---------- */
.ar-portal-topnav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.ar-portal-topnav-lead { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 900; color: #6d28d9;
    padding: 6px 15px 6px 12px; margin-right: 8px; white-space: nowrap;
    background: linear-gradient(135deg, #f5f3ff, #ede9fe); border: 1px solid #ddd6fe; border-radius: 999px; }
.ar-portal-topnav-lead svg { width: 18px; height: 18px; color: #7c3aed; }
.ar-portal-topnav-item { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 11px;
    font-size: 13.5px; font-weight: 800; color: var(--ar-ink); text-decoration: none; white-space: nowrap; transition: background .14s ease, color .14s ease; }
.ar-portal-topnav-item svg { width: 16px; height: 16px; }
.ar-portal-topnav-item:hover { background: var(--ar-bg); }
.ar-portal-topnav-item.active { background: color-mix(in srgb, var(--ar-primary) 12%, #fff); color: var(--ar-primary); }
@media (max-width: 860px) {
    .ar-portal-topnav-lead { display: none; }
    .ar-portal-topnav-item span { display: none; }
    .ar-portal-topnav-item { padding: 8px; }
}

/* ---------- Parcours : niveau « next » (prochain niveau disponible) ---------- */
/* Réinitialise le bouton SANS toucher au padding (sinon le médaillon remonte et
   le ruban le recouvre — les nœuds cliquables doivent s'aligner comme les autres). */
button.ar-path-node { border: 0; background: none; font: inherit; cursor: pointer; }
/* Le nœud « next » (S'inscrire) en ROSE (pas de --lc inline). */
.ar-path-node.is-next { --lc: var(--ar-pink); --lcs: color-mix(in srgb, var(--ar-pink) 12%, #fff); cursor: pointer; }
.ar-path-ribbon { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); z-index: 4;
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #fff;
    background: var(--ar-pink); padding: 5px 13px; border-radius: 999px; white-space: nowrap; box-shadow: 0 4px 10px rgba(15, 23, 42, .18); }
.ar-path-node.is-next .ar-path-card { background: color-mix(in srgb, var(--ar-pink) 10%, #fff); border: 4px dashed var(--ar-pink);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ar-pink) 16%, transparent); animation: arNextPulse 2.2s ease-in-out infinite; }
.ar-path-node.is-next .ar-path-card::before { opacity: .16; filter: grayscale(.4); }
.ar-path-flag.is-next { background: var(--ar-pink); }
.ar-path-node.is-next .ar-path-step { color: var(--ar-pink); }
.ar-path-node.is-next .ar-path-name { color: var(--ar-ink); }
.ar-path-node.is-next .ar-path-state { color: #be185d; background: #fce7f3; }
.ar-path-node.is-next:hover .ar-path-card { transform: translateY(-3px); }
@keyframes arNextPulse {
    0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ar-pink) 16%, transparent); }
    50%      { box-shadow: 0 0 0 9px color-mix(in srgb, var(--ar-pink) 6%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .ar-path-node.is-next .ar-path-card { animation: none; } }

/* Badge de statut du groupe en haut à droite du KPI « Avancement » (tous rôles) */
.ar-kpi-progress { position: relative; }
.ar-group-status-ribbon.ar-kpi-status { position: absolute; top: 14px; right: 14px; z-index: 3; margin: 0; }
@media (max-width: 480px) { .ar-group-status-ribbon.ar-kpi-status { top: 10px; right: 10px; } }

/* ---------- Parcours : niveau « À payer » en VIOLET ---------- */
.ar-path-node.is-topay { --lc: var(--ar-purple); --lcs: color-mix(in srgb, var(--ar-purple) 12%, #fff); cursor: pointer; }
.ar-path-node.is-topay .ar-path-ribbon { background: var(--ar-purple); }
.ar-path-node.is-topay .ar-path-card { background: color-mix(in srgb, var(--ar-purple) 10%, #fff); border: 4px dashed var(--ar-purple);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ar-purple) 14%, transparent); animation: arTopayPulse 2.2s ease-in-out infinite; }
.ar-path-node.is-topay .ar-path-card::before { opacity: .16; filter: grayscale(.4); }
.ar-path-flag.is-topay { background: var(--ar-purple); }
.ar-path-node.is-topay .ar-path-step { color: var(--ar-purple); }
.ar-path-node.is-topay .ar-path-name { color: var(--ar-ink); }
.ar-path-node.is-topay .ar-path-state { color: #6d28d9; background: #ede9fe; }
.ar-path-node.is-topay:hover .ar-path-card { transform: translateY(-3px); }
@keyframes arTopayPulse {
    0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ar-purple) 14%, transparent); }
    50%      { box-shadow: 0 0 0 9px color-mix(in srgb, var(--ar-purple) 5%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .ar-path-node.is-topay .ar-path-card { animation: none; } }

/* « Paiement en attente » (Interac/virement non finalisé) : AMBRE = paiement à
   confirmer, informatif, non cliquable. */
.ar-path-node.is-payauth { --lc: #f59e0b; --lcs: #fffbeb; cursor: default; }
.ar-path-node.is-payauth .ar-path-ribbon { background: #f59e0b; }
.ar-path-node.is-payauth .ar-path-card {
    background: #fffbeb; border: 4px dashed #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, .12);
}
.ar-path-node.is-payauth .ar-path-card::before { opacity: .16; filter: grayscale(.4); }
.ar-path-flag.is-payauth { background: #f59e0b; }
.ar-path-node.is-payauth .ar-path-step { color: #b45309; }
.ar-path-node.is-payauth .ar-path-name { color: var(--ar-ink); }
.ar-path-node.is-payauth .ar-path-state { color: #b45309; background: #fef3c7; }

/* « En préparation » (payé, place bientôt attribuée) : BLEU = tout est réglé, la
   place arrive. Vocabulaire parent (pas « affectation »). Distinct de l'ambre
   (paiement en cours de validation). */
.ar-path-node.is-awaiting { --lc: #2563eb; --lcs: #eff6ff; cursor: default; }
.ar-path-node.is-awaiting .ar-path-ribbon { background: #2563eb; }
.ar-path-node.is-awaiting .ar-path-card {
    background: #eff6ff; border: 4px dashed #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}
.ar-path-node.is-awaiting .ar-path-card::before { opacity: .16; filter: grayscale(.4); }
.ar-path-flag.is-awaiting { background: #2563eb; }
.ar-path-node.is-awaiting .ar-path-step { color: #1d4ed8; }
.ar-path-node.is-awaiting .ar-path-name { color: var(--ar-ink); }
.ar-path-node.is-awaiting .ar-path-state { color: #1d4ed8; background: #dbeafe; }

/* Page paywall en variante « paiement en attente » (ambre). */
.ar-paywall.is-pending .ar-paywall-ico { background: #fffbeb; color: #b45309; box-shadow: inset 0 0 0 1px #fde68a; }
.ar-paywall.is-pending .ar-pay-info { text-align: left; }

/* ============================================================
   Parcours v2 — feuille de route lisible : en-tête + légende, chemin qui se
   remplit selon la progression, marqueur « Actuel », modale « En préparation ».
   ============================================================ */
/* En-tête : titre + résumé + légende */
.ar-path-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 2px; }
.ar-path-head-txt h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; font-weight: 800; color: var(--ar-ink); }
.ar-path-head-txt h3 svg { width: 26px; height: 26px; color: #7c3aed; }
/* Résumé de progression : pastille bien visible (violet doux) */
.ar-path-head-txt p {
    display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin: 10px 0 0; padding: 8px 15px; border-radius: 999px;
    font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #5b21b6;
    background: linear-gradient(135deg, #f5f3ff, #ede9fe); border: 1px solid #ddd6fe;
    box-shadow: 0 4px 12px rgba(109,40,217,.08);
}
.ar-path-head-txt p strong { color: #6d28d9; font-weight: 800; }
.ar-path-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 0; padding: 0; }
.ar-path-legend li { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #475569; }
.ar-path-legend-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(0, 0, 0, .03); }

/* Connecteurs neutres (pas de couleur de progression sur les flèches — la
   progression est déjà donnée par l'en-tête « X/N terminés » et le marqueur Actuel). */

/* Marqueur « Actuel » au-dessus du niveau en cours + mise en avant. */
.ar-path-here { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); z-index: 5;
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #fff;
    background: #16a34a; padding: 5px 12px 5px 9px; border-radius: 999px; box-shadow: 0 4px 10px rgba(22, 163, 74, .38); }
.ar-path-here svg { width: 13px; height: 13px; }
.ar-path-node.is-current .ar-path-card { box-shadow: 0 0 0 5px rgba(22, 163, 74, .18), 0 12px 26px rgba(22, 163, 74, .22); animation: arPathHere 2.4s ease-in-out infinite; }
.ar-path-node.is-current:hover .ar-path-card { transform: translateY(-3px); }
@keyframes arPathHere {
    0%, 100% { box-shadow: 0 0 0 5px rgba(22, 163, 74, .16), 0 12px 26px rgba(22, 163, 74, .22); }
    50%      { box-shadow: 0 0 0 10px rgba(22, 163, 74, .06), 0 12px 26px rgba(22, 163, 74, .22); }
}
@media (prefers-reduced-motion: reduce) { .ar-path-node.is-current .ar-path-card { animation: none; } }

/* Modale « En préparation » (rassurer : paiement reçu, groupe en cours). */
.ar-prep-modal { max-width: 440px; text-align: center; }
.ar-prep-modal .ar-modal-x { top: 14px; right: 14px; z-index: 3; background: rgba(255, 255, 255, .22); color: #fff; }
.ar-prep-modal .ar-modal-x:hover { background: rgba(255, 255, 255, .35); }
/* Header BLEU (cohérent avec les autres modales). */
.ar-prep-hero { padding: 30px 26px 22px; text-align: center; color: #fff;
    background: linear-gradient(135deg, #2563eb, color-mix(in srgb, #2563eb 62%, #0b1e4d)); }
.ar-prep-ico { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; margin: 2px auto 12px;
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3); }
.ar-prep-ico svg { width: 28px; height: 28px; color: #fff; }
.ar-prep-hero strong { display: block; font-size: 18px; font-weight: 800; color: #fff; line-height: 1.3; }
.ar-prep-chip { display: inline-flex; align-items: center; gap: 6px; margin: 10px auto 0; padding: 5px 13px; border-radius: 999px;
    background: rgba(255, 255, 255, .2); color: #fff; font-size: 13px; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.ar-prep-chip svg { width: 15px; height: 15px; }
.ar-prep-hero p { margin: 12px 2px 0; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
/* Corps blanc (étapes + contact). */
.ar-prep-body { padding: 20px 24px 20px; overflow-y: auto; }
.ar-prep-body p { margin: 0; font-size: 13.5px; color: var(--ar-muted); line-height: 1.55; }
.ar-prep-steps { list-style: none; margin: 18px 0 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.ar-prep-steps li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; font-weight: 600; color: #64748b; }
.ar-prep-step-ico { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #f1f5f9; color: #94a3b8; }
.ar-prep-step-ico svg { width: 15px; height: 15px; }
.ar-prep-steps li.is-done { color: #166534; }
.ar-prep-steps li.is-done .ar-prep-step-ico { background: #dcfce7; color: #16a34a; }
.ar-prep-steps li.is-active { color: #1e293b; font-weight: 800; }
.ar-prep-steps li.is-active .ar-prep-step-ico { background: #dbeafe; color: #2563eb; }
.ar-prep-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ar-line); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ar-prep-foot span { font-size: 12.5px; color: var(--ar-muted); font-weight: 600; }
.ar-prep-call { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: #2563eb; text-decoration: none; }
.ar-prep-call svg { width: 15px; height: 15px; }
/* Variante « Paiement en cours de validation » (Interac) : header AMBRE. */
.ar-payauth-modal .ar-prep-hero { background: linear-gradient(135deg, #f59e0b, color-mix(in srgb, #f59e0b 60%, #7c2d12)); }
.ar-payauth-modal .ar-prep-steps li.is-active { color: #1e293b; }
.ar-payauth-modal .ar-prep-steps li.is-active .ar-prep-step-ico { background: #fef3c7; color: #b45309; }
.ar-payauth-modal .ar-prep-call { color: #b45309; }
.ar-prep-cta { margin-top: 16px; display: flex; justify-content: center; }
.ar-prep-warn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #fffbeb; color: #b45309; font-size: 12.5px; font-weight: 800; box-shadow: inset 0 0 0 1px #fde68a; }
.ar-prep-warn svg { width: 15px; height: 15px; }

/* ============================================================
   Parcours + espace enfant — RESPONSIVE (tablette / mobile)
   ============================================================ */
@media (max-width: 900px) {
    .ar-path-section { padding: 16px 12px 6px; border-radius: 16px; }
    .ar-path { gap: 14px; padding: 34px 2px 14px; }
    .ar-path-node { min-width: 94px; max-width: 132px; padding: 34px 3px 8px; }
    .ar-path-card { width: 84px; height: 84px; border-width: 3px; }
    .ar-path-node:not(:last-child)::after { top: 76px; right: -11px; width: 22px; height: 5px; }
    .ar-path-name { font-size: 13px; margin-top: 10px; }
    .ar-path-state { font-size: 11px; padding: 5px 11px; gap: 4px; }
    .ar-path-group { font-size: 11px; }
    .ar-path-notif { font-size: 10.5px; padding: 2px 8px; }
    .ar-path-ribbon { font-size: 9px; padding: 4px 9px; }
    .ar-path-num { min-width: 22px; height: 22px; font-size: 12px; }
    .ar-path-flag { width: 26px; height: 26px; }
    .ar-path-flag svg { width: 13px; height: 13px; }
    .ar-path-here { font-size: 9.5px; padding: 4px 10px; }
}
@media (max-width: 560px) {
    .ar-path-section { padding: 14px 10px 4px; }
    .ar-path { gap: 10px; padding: 32px 2px 12px; }
    .ar-path-node { min-width: 82px; padding: 32px 2px 8px; }
    .ar-path-card { width: 72px; height: 72px; }
    .ar-path-node:not(:last-child)::after { top: 68px; right: -8px; width: 16px; }
    .ar-path-head-txt h3 { font-size: 15px; }
    .ar-path-head-txt p { font-size: 12px; }
    .ar-path-name { font-size: 12.5px; }
    .ar-path-num { min-width: 20px; height: 20px; font-size: 11px; top: -3px; left: -3px; }
    .ar-path-flag { width: 24px; height: 24px; border-width: 2.5px; }
    .ar-path-ribbon { font-size: 8.5px; padding: 3px 8px; letter-spacing: 0; }
    /* Modales prep/payauth : plein écran confortable sur mobile. */
    .ar-prep-hero { padding: 24px 20px 18px; }
    .ar-prep-body { padding: 18px 18px 18px; }
    .ar-prep-steps li { font-size: 12.5px; }
}

/* ---------- Page « Accès verrouillé » (paywall) ---------- */
.ar-paywall { max-width: 460px; margin: 24px auto; padding: 34px 26px; text-align: center; background: var(--ar-card);
    border: 1px solid var(--ar-border); border-radius: 22px; box-shadow: var(--ar-shadow-sm); }
.ar-paywall-ico { width: 66px; height: 66px; margin: 0 auto 14px; border-radius: 20px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--ar-purple) 12%, #fff); color: var(--ar-purple); }
.ar-paywall-ico svg { width: 30px; height: 30px; }
.ar-paywall h2 { margin: 0; font-size: 21px; font-weight: 800; color: var(--ar-ink); }
.ar-paywall p { margin: 8px 0 18px; font-size: 14px; color: var(--ar-muted); line-height: 1.5; }
.ar-paywall-options { display: flex; flex-direction: column; gap: 10px; text-align: left; }

/* ---------- Modale « S'inscrire » (next) en ROSE ; « À payer » reste en violet (défaut) ---------- */
.ar-next-modal .ar-enroll-hero { background: linear-gradient(135deg, var(--ar-pink), color-mix(in srgb, var(--ar-pink) 55%, #4a044e)); }
.ar-next-modal .ar-enroll-opt.is-primary { border-color: color-mix(in srgb, var(--ar-pink) 38%, transparent); background: color-mix(in srgb, var(--ar-pink) 8%, #fff); }
.ar-next-modal .ar-enroll-opt-ico { background: color-mix(in srgb, var(--ar-pink) 12%, #fff); color: var(--ar-pink); }
.ar-next-modal .ar-enroll-opt:hover { border-color: color-mix(in srgb, var(--ar-pink) 45%, var(--ar-border)); }
.ar-next-modal .ar-enroll-opt:hover .ar-enroll-opt-go { color: var(--ar-pink); }
.ar-pay-empty { font-size: 13.5px; color: var(--ar-muted); text-align: center; padding: 8px 4px; }

/* Infos du cours dans la modale/page de paiement (début, séances, horaire) */
.ar-pay-info { margin: 0 18px 4px; padding: 12px 14px; border-radius: 14px; background: var(--ar-bg); border: 1px solid var(--ar-line);
    display: flex; flex-direction: column; gap: 7px; }
.ar-paywall .ar-pay-info { margin: 0 0 16px; text-align: left; }
.ar-pay-info-row { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ar-ink); }
.ar-pay-info-row svg { width: 15px; height: 15px; color: var(--ar-purple); flex: 0 0 auto; }

/* Option de paiement mise en avant (comptant = meilleure offre) */
.ar-enroll-opt.is-featured { position: relative; border: 2px solid #15803D; background: color-mix(in srgb, #15803D 5%, #fff);
    box-shadow: 0 6px 18px color-mix(in srgb, #15803D 15%, transparent); }
.ar-enroll-opt.is-featured .ar-enroll-opt-ico { background: color-mix(in srgb, #15803D 14%, #fff); color: #15803D; }
.ar-enroll-opt.is-featured:hover { border-color: #15803D; }
.ar-enroll-opt-badge { position: absolute; top: -10px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #fff; background: #15803D;
    padding: 3px 9px; border-radius: 999px; box-shadow: var(--ar-shadow-sm); }
.ar-enroll-opt-badge svg { width: 11px; height: 11px; }
.ar-enroll-opt-txt small { line-height: 1.35; }

/* Breakdown de prix dans les options de paiement (mensuel : montant/mois mis en avant) */
.ar-enroll-opt-price { font-size: 17px; font-weight: 900; color: var(--ar-ink); margin-top: 3px; line-height: 1.1; }
.ar-enroll-opt-line { font-size: 12px; color: var(--ar-muted); line-height: 1.4; }

/* ============================= Facturation (parent) ============================= */
.ar-bill-page { min-width: 0; }

/* Alerte paiement échoué / à régler */
.ar-bill-alert {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 14px 16px; margin-bottom: 18px;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border: 1px solid #fdba74; border-radius: 16px;
}
.ar-bill-alert-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #f97316; color: #fff; flex: none; }
.ar-bill-alert-ic svg { width: 20px; height: 20px; }
.ar-bill-alert-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.ar-bill-alert-txt strong { color: #9a3412; font-size: 15px; }
.ar-bill-alert-txt span { color: #b45309; font-size: 13px; }

/* Carte par enfant */
.ar-bill-card {
    background: var(--ar-card); border: 1px solid var(--ar-border); border-radius: 20px;
    box-shadow: var(--ar-shadow-sm); padding: 18px 20px; margin-bottom: 16px; min-width: 0; max-width: 100%;
}
.ar-bill-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--ar-border); }
.ar-bill-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ar-bill-ava {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; flex: none;
    font-weight: 900; font-size: 18px; color: #fff; overflow: hidden;
    background: linear-gradient(150deg, var(--ar-primary-2), var(--ar-primary));
}
.ar-bill-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-bill-who h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ar-ink); }
.ar-bill-total { text-align: right; display: flex; flex-direction: column; }
.ar-bill-total small { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ar-muted); font-weight: 700; }
.ar-bill-total strong { font-size: 20px; font-weight: 900; color: var(--ar-primary); }

/* Abonnements */
.ar-bill-subs { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; }
.ar-bill-sub {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    background: #f8fafc; border: 1px solid var(--ar-border); border-radius: 14px; flex-wrap: wrap;
}
.ar-bill-sub-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #eef2ff; color: #4f46e5; flex: none; }
.ar-bill-sub-ic svg { width: 17px; height: 17px; }
.ar-bill-sub-body { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ar-bill-sub-body strong { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; color: var(--ar-ink); }
.ar-bill-sub-body small { color: var(--ar-muted); font-size: 12.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Lignes de paiement */
.ar-bill-rows { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.ar-bill-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 13px 2px; border-top: 1px solid var(--ar-border);
}
.ar-bill-row-main { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ar-bill-levels { display: flex; flex-wrap: wrap; gap: 5px; }
.ar-bill-date { color: var(--ar-muted); font-size: 12px; }
.ar-bill-amount { font-weight: 800; font-size: 15px; color: var(--ar-ink); white-space: nowrap; }
.ar-bill-row-act { display: flex; gap: 6px; flex-wrap: wrap; }

/* Chip de niveau (couleur du programme) */
.ar-bill-chip {
    display: inline-block; font-size: 11.5px; font-weight: 700; line-height: 1.4;
    padding: 2px 9px; border-radius: 999px; color: var(--lc, var(--ar-primary));
    background: color-mix(in srgb, var(--lc, var(--ar-primary)) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--lc, var(--ar-primary)) 28%, #fff);
}

/* Badge de statut */
.ar-bill-badge {
    display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 800;
    padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}
.ar-bill-badge.is-paid      { color: #0d9488; background: #ccfbf1; }
.ar-bill-badge.is-pending   { color: #b45309; background: #fef3c7; }
.ar-bill-badge.is-due       { color: #b91c1c; background: #fee2e2; }
.ar-bill-badge.is-failed    { color: #fff;    background: #ef4444; }
.ar-bill-badge.is-refunded  { color: #475569; background: #e2e8f0; }
.ar-bill-badge.is-cancelled { color: #64748b; background: #f1f5f9; }

/* Bouton de paiement (teal, distinct du violet générique) */
.ar-btn.ar-bill-pay {
    background: linear-gradient(180deg, var(--ar-primary-2), var(--ar-primary));
    color: #fff; border-color: transparent;
    box-shadow: 0 10px 24px rgba(0,80,100,.18);
}
.ar-btn.ar-bill-pay:hover { filter: brightness(1.05); box-shadow: 0 14px 30px rgba(0,80,100,.24); }

/* Message : enfant sans facturation */
.ar-bill-none {
    display: flex; align-items: center; gap: 8px; margin: 16px 0 4px;
    padding: 14px 16px; color: var(--ar-muted); font-size: 13.5px;
    background: #f8fafc; border: 1px dashed var(--ar-border); border-radius: 14px;
}
.ar-bill-none svg { width: 17px; height: 17px; flex: none; color: var(--ar-muted); }

/* Encart « mon compte » mis en avant (fallback WooCommerce) */
.ar-bill-account {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 20px; padding: 16px 18px;
    background: linear-gradient(135deg, #f0fdfa, #ecfeff);
    border: 1px solid color-mix(in srgb, var(--ar-primary) 22%, #fff); border-radius: 16px;
}
.ar-bill-account-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; flex: none; color: #fff; background: linear-gradient(150deg, var(--ar-primary-2), var(--ar-primary)); }
.ar-bill-account-ic svg { width: 20px; height: 20px; }
.ar-bill-account-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; }
.ar-bill-account-txt strong { color: var(--ar-ink); font-size: 15px; }
.ar-bill-account-txt span { color: var(--ar-muted); font-size: 13px; }

@media (max-width: 560px) {
    .ar-bill-row { align-items: flex-start; }
    .ar-bill-amount { order: 3; }
    .ar-bill-badge { order: 2; }
    .ar-bill-row-act { order: 4; width: 100%; }
    .ar-bill-row-act .ar-btn { flex: 1 1 auto; }
}

/* ============================= Exercices interactifs (Moodle) ============================= */
.ar-exo { display: flex; flex-direction: column; gap: 0; margin-top: 16px;
    border: 1px solid var(--ar-border); border-radius: 18px; overflow: hidden; background: var(--ar-card); box-shadow: var(--ar-shadow-sm); }

/* Bandeau contextuel « Exercices de {enfant} » + retour */
.ar-exo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; background: linear-gradient(135deg, var(--ar-niv-soft, #eef9ff), #fff);
    border-bottom: 1px solid var(--ar-border); }
.ar-exo-who { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--ar-ink); min-width: 0; }
.ar-exo-who > i { width: 20px; height: 20px; color: var(--ar-niv, var(--ar-primary)); flex: none; }
.ar-exo-who b { font-weight: 800; }
.ar-exo-badge { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    padding: 3px 9px; border-radius: 999px; color: var(--ar-niv, var(--ar-primary));
    background: color-mix(in srgb, var(--ar-niv, var(--ar-primary)) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--ar-niv, var(--ar-primary)) 26%, #fff); }
.ar-exo-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* Zone d'affichage de l'iframe */
.ar-exo-frame { position: relative; width: 100%; min-height: 72vh; background: #f8fafc; }
.ar-exo-iframe { display: block; width: 100%; height: 72vh; min-height: 520px; border: 0; }

/* Chargement */
.ar-exo-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
    color: var(--ar-muted); font-size: 14px; background: #f8fafc; z-index: 1; }
.ar-exo-spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--ar-border);
    border-top-color: var(--ar-primary); animation: ar-exo-spin .8s linear infinite; }
@keyframes ar-exo-spin { to { transform: rotate(360deg); } }

/* Repli si framing bloqué */
.ar-exo-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; text-align: center; padding: 32px 24px; background: #fff; z-index: 2; }
.ar-exo-fallback > i { width: 40px; height: 40px; color: var(--ar-orange, #f97316); }
.ar-exo-fallback h3 { margin: 4px 0 0; font-size: 17px; color: var(--ar-ink); }
.ar-exo-fallback p { margin: 0 0 8px; max-width: 460px; color: var(--ar-muted); font-size: 14px; line-height: 1.5; }

@media (max-width: 560px) {
    .ar-exo-frame, .ar-exo-iframe { min-height: 68vh; height: 68vh; }
    .ar-exo-actions { width: 100%; }
    .ar-exo-actions .ar-btn { flex: 1 1 auto; }
}

/* ===================== Exercices : onglet accentué + CTA aperçu + lien parcours ===================== */

/* Onglet « Exercices » distinctif (ambré) — SANS fond plein hors sélection, pour ne
   pas être confondu avec l'état actif. La distinction vient de la couleur + l'étincelle. */
.ar-group-ov-tabs a.is-exo {
    position: relative; font-weight: 800; color: #ea580c;
}
.ar-group-ov-tabs a.is-exo svg:not(.ar-tab-spark svg) { color: #ea580c; }
.ar-group-ov-tabs a.is-exo:hover { background: #fff7ed; color: #c2410c; }
.ar-group-ov-tabs a.is-exo.active {
    color: #fff;
    background: linear-gradient(135deg, #fb923c, #ea580c);
    box-shadow: 0 8px 20px rgba(234,88,12,.24);
}
.ar-group-ov-tabs a.is-exo.active svg { color: #fff; }
.ar-group-ov-tabs a.is-exo .ar-tab-spark { display: inline-flex; margin-left: -2px; }
.ar-group-ov-tabs a.is-exo .ar-tab-spark svg { width: 14px; height: 14px; color: #f59e0b; animation: ar-exo-twinkle 1.8s ease-in-out infinite; }
.ar-group-ov-tabs a.is-exo.active .ar-tab-spark svg { color: #fef08a; }
@keyframes ar-exo-twinkle { 0%,100% { opacity: 1; transform: scale(1) rotate(0); } 50% { opacity: .55; transform: scale(1.25) rotate(15deg); } }

/* Carte KPI « Exercices interactifs » (1re position, apprenant) — ambrée pour ressortir */
.ar-group-ov-kpi.ar-kpi-exo {
    position: relative; overflow: hidden; text-decoration: none; color: #fff;
    background: linear-gradient(140deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    border-color: transparent; box-shadow: 0 14px 32px rgba(234,88,12,.26);
    transition: transform .18s ease, box-shadow .18s ease;
}
.ar-group-ov-kpi.ar-kpi-exo:hover { transform: translateY(-3px); box-shadow: 0 20px 42px rgba(234,88,12,.34); }
.ar-kpi-exo .ar-kpi-deco { color: rgba(255,255,255,.9); }
.ar-kpi-exo .ar-kpi-deco svg { color: rgba(255,255,255,.9); }
.ar-kpi-exo .ar-group-ov-kpi-lbl { color: rgba(255,255,255,.92); }
.ar-kpi-exo strong,
.ar-group-ov-page .ar-kpi-exo > strong { color: #fff; font-size: 21px; font-weight: 800; }
.ar-kpi-exo .ar-group-ov-kpi-sub { color: rgba(255,255,255,.85); }
.ar-kpi-exo-spark { position: absolute; top: 14px; right: 14px; }
.ar-kpi-exo-spark svg { width: 18px; height: 18px; color: #fef08a; animation: ar-exo-twinkle 1.8s ease-in-out infinite; }
.ar-btn.ar-kpi-exo-btn {
    align-self: flex-start; margin-top: 10px; flex: none;
    background: #fff; color: #ea580c; border-color: transparent; font-weight: 800;
    box-shadow: 0 6px 16px rgba(0,0,0,.14);
}
.ar-btn.ar-kpi-exo-btn:hover { filter: brightness(1.02); }
.ar-btn.ar-kpi-exo-btn svg { color: #ea580c; }

/* Lien « Exercices du niveau en cours » dans l'en-tête du parcours (ambré) */
.ar-path-exolink {
    display: inline-flex; align-items: center; gap: 9px; align-self: center; text-decoration: none;
    padding: 9px 15px; border-radius: 999px; font-weight: 800; font-size: 13.5px; white-space: nowrap;
    color: #ea580c; background: #fff7ed; border: 1px solid #fed7aa;
    box-shadow: 0 6px 16px rgba(234,88,12,.12); transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.ar-path-exolink:hover { transform: translateY(-1px); background: linear-gradient(135deg, #f97316, #ea580c); color: #fff; box-shadow: 0 12px 26px rgba(234,88,12,.28); }
.ar-path-exolink-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: rgba(234,88,12,.14); }
.ar-path-exolink:hover .ar-path-exolink-ic { background: rgba(255,255,255,.22); }
.ar-path-exolink-ic svg { width: 15px; height: 15px; }
.ar-path-exolink > svg { width: 15px; height: 15px; }
.ar-path-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

@media (max-width: 560px) {
    .ar-group-ov-exocta { flex-direction: column; align-items: flex-start; }
    .ar-btn.ar-exocta-btn { width: 100%; }
    .ar-path-exolink { width: 100%; justify-content: center; }
}

/* ============ Filtres du calendrier : design unifié (icône violette) pour TOUS les rôles ============ */
.ar-teacher-calendar-filters .ar-filter-control {
    display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 12px;
    border: 1px solid #EEF2F7; border-radius: 14px; background: #fff; color: #334155;
    box-shadow: 0 8px 20px rgba(15,23,42,.025);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}
.ar-teacher-calendar-filters .ar-filter-control > i:first-child,
.ar-teacher-calendar-filters .ar-filter-control > svg:first-child {
    width: 18px; height: 18px; color: #6D28D9; stroke-width: 2.2; flex: 0 0 auto;
}
.ar-teacher-calendar-filters .ar-filter-control select,
.ar-teacher-calendar-filters .ar-filter-control input {
    width: 100%; min-width: 0; min-height: 40px; padding: 0; border: 0; outline: 0; background: transparent;
    color: #334155; font: inherit; font-size: 13.5px; font-weight: 650; line-height: 1; box-shadow: none;
}
.ar-teacher-calendar-filters .ar-filter-control select { appearance: none; cursor: pointer; }
.ar-teacher-calendar-filters .ar-filter-control input::placeholder { color: #64748B; opacity: 1; }
.ar-teacher-calendar-filters .ar-filter-control:focus-within { border-color: #C4B5FD; box-shadow: 0 0 0 3px rgba(109,40,217,.10); }
.ar-teacher-calendar-filters .ar-filter-control:hover { border-color: #DDD6FE; }
.ar-teacher-calendar-filters .ar-filter-chevron { width: 15px; height: 15px; color: #94A3B8; }
/* Bouton « Aujourd'hui » + reset : mêmes pastilles arrondies */
.ar-teacher-calendar-filters .ar-cal-today-btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px;
    border: 1px solid #EEF2F7; border-radius: 14px; background: #fff; color: #334155; font-weight: 700;
    text-decoration: none; box-shadow: 0 8px 20px rgba(15,23,42,.025);
}
.ar-teacher-calendar-filters .ar-cal-today-btn > svg,
.ar-teacher-calendar-filters .ar-cal-today-btn > i { width: 17px; height: 17px; color: #6D28D9; }
.ar-teacher-calendar-filters .ar-cal-today-btn:hover { border-color: #DDD6FE; }

/* ===== Parcours enfant : carte KPI Exercices (ambrée) + bouton Teams next-session ===== */
.ar-stat-card.ar-stat-exo {
    text-decoration: none; color: #fff; border-color: transparent;
    background: linear-gradient(140deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    box-shadow: 0 12px 28px rgba(234,88,12,.24);
    transition: transform .18s ease, box-shadow .18s ease;
}
.ar-stat-card.ar-stat-exo:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(234,88,12,.32); }
.ar-stat-card.ar-stat-exo .ar-stat-icon { background: rgba(255,255,255,.18); color: #fff; }
.ar-stat-card.ar-stat-exo .ar-stat-icon svg { color: #fff; }
.ar-stat-card.ar-stat-exo .ar-stat-body strong { color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.ar-stat-card.ar-stat-exo .ar-stat-body span { color: rgba(255,255,255,.9); }
.ar-stat-card.ar-stat-exo .ar-stat-body em { color: #fff; font-weight: 800; font-style: normal; }
.ar-stat-card.ar-stat-exo .ar-stat-go { color: rgba(255,255,255,.85); }
.ar-stat-exo-spark svg { width: 14px; height: 14px; color: #fef08a; animation: ar-exo-twinkle 1.8s ease-in-out infinite; }
/* Carte Exercices verrouillée (enfant sans niveau en cours) — grise, non cliquable */
.ar-stat-card.ar-stat-exo.is-locked {
    background: linear-gradient(140deg, #eef2f7, #e2e8f0); color: var(--ar-muted);
    box-shadow: none; border-color: var(--ar-border); cursor: default;
}
.ar-stat-card.ar-stat-exo.is-locked:hover { transform: none; box-shadow: none; }
.ar-stat-card.ar-stat-exo.is-locked .ar-stat-icon { background: #fff; color: #94a3b8; }
.ar-stat-card.ar-stat-exo.is-locked .ar-stat-icon svg { color: #94a3b8; }
.ar-stat-card.ar-stat-exo.is-locked .ar-stat-body strong { color: #64748b; }
.ar-stat-card.ar-stat-exo.is-locked .ar-stat-body span { color: #94a3b8; }
.ar-stat-card.ar-stat-exo.is-locked .ar-stat-body em { color: #94a3b8; }

/* Bouton Rejoindre (Teams) dans la carte prochaine séance */
.ar-stat-card.ar-stat-next { align-items: flex-start; }
.ar-stat-next-btn { margin-top: 8px; align-self: flex-start; }

/* Profil : section Sécurité (mot de passe) */
.ar-profile-security { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ar-profile-security-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ar-profile-security-txt strong { color: var(--ar-ink); font-size: 14.5px; }
.ar-profile-security-txt span { color: var(--ar-muted); font-size: 13px; }

/* ===================== Pied de page légal du portail ===================== */
.ar-portal-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
    margin-top: 26px; padding: 16px 4px 8px; border-top: 1px solid var(--ar-border);
    color: var(--ar-muted); font-size: 12.5px;
}
.ar-portal-footer-links { display: inline-flex; gap: 16px; flex-wrap: wrap; }
.ar-portal-footer-links a { color: var(--ar-primary); font-weight: 700; text-decoration: none; }
.ar-portal-footer-links a:hover { text-decoration: underline; }
.ar-portal-footer-rgpd { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 260px; justify-content: flex-end; text-align: right; }
.ar-portal-footer-rgpd svg { width: 14px; height: 14px; color: #16a34a; flex: none; }
@media (max-width: 700px) {
    .ar-portal-footer { flex-direction: column; align-items: flex-start; }
    .ar-portal-footer-rgpd { justify-content: flex-start; text-align: left; }
}

/* =====================================================================
   Parcours v3 — CHEVRONS colorés par état + piste de statuts en dessous
   (surcharge la piste d'aventure v2 ; ordre source = priorité).
   ===================================================================== */
.ar-path { display: flex; gap: 5px; align-items: flex-start; justify-content: flex-start; overflow-x: auto; padding: 30px 2px 16px; }
.ar-path-node {
    position: relative; flex: 1 0 128px; max-width: 156px; min-width: 116px; padding: 14px 0 0;
    display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; gap: 0;
    --sc: #94a3b8; --scs: #eef2f7;
}
/* Palette par état */
.ar-path-node.is-off       { --sc: #94a3b8; --scs: #eef2f7; }
.ar-path-node.is-current   { --sc: #22c55e; --scs: #dcfce7; }
.ar-path-node.is-done      { --sc: #14b8a6; --scs: #ccfbf1; }
.ar-path-node.is-payauth   { --sc: #f59e0b; --scs: #fef3c7; }
.ar-path-node.is-awaiting  { --sc: #3b82f6; --scs: #dbeafe; }
.ar-path-node.is-topay     { --sc: #8b5cf6; --scs: #ede9fe; }
.ar-path-node.is-next      { --sc: #ec4899; --scs: #fce7f3; }
.ar-path-node.is-upcoming  { --sc: #6d28d9; --scs: #ede9fe; }
.ar-path-node.is-paused    { --sc: #b45309; --scs: #fef3c7; }
.ar-path-node.is-cancelled { --sc: #dc2626; --scs: #fee2e2; }
.ar-path-node.is-waiting   { --sc: #92640b; --scs: #fef9c3; }

/* Neutralise l'ancienne piste (connecteurs, pastilles flottantes) */
.ar-path-node::after, .ar-path-node:not(:last-child)::after,
.ar-path-node.is-reached:not(:last-child)::after { content: none !important; background: none !important; }
.ar-path-flag, .ar-path-foot, .ar-path-here { display: none !important; }

/* Numéro (cercle blanc, anneau + chiffre à la couleur de l'état) */
.ar-path-node .ar-path-num {
    position: relative; z-index: 3; top: auto; left: auto; margin: 0 0 -17px;
    width: 34px; height: 34px; min-width: 0; padding: 0; border-radius: 50%;
    display: grid; place-items: center; background: #fff; border: 3px solid var(--sc);
    color: var(--sc); font-size: 15px; font-weight: 900; box-shadow: 0 3px 9px rgba(15,23,42,.14);
}

/* Ruban « Actuel » (au-dessus du numéro, niveau en cours) */
.ar-path-node .ar-path-ribbon {
    position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 4;
    background: #16a34a; color: #fff; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em;
    padding: 4px 13px; border-radius: 999px; box-shadow: 0 4px 10px rgba(22,163,74,.32); white-space: nowrap;
}

/* Chevron (bannière fléchée colorée) */
.ar-path-chevron {
    position: relative; width: 100%; padding: 26px 12px 16px; min-height: 168px;
    display: flex; flex-direction: column; align-items: center; gap: 11px;
    background: var(--scs);
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%);
}
.ar-path-node:first-child .ar-path-chevron {
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
    border-radius: 16px 0 0 16px;
}

/* Médaillon (avatar du niveau, anneau = couleur d'état) */
.ar-path-node .ar-path-card {
    position: relative; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; display: block;
    background: #fff; border: 4px solid var(--sc); box-shadow: 0 6px 14px rgba(15,23,42,.14);
    transition: transform .16s ease, box-shadow .16s ease; animation: none;
}
.ar-path-node .ar-path-card::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background-image: var(--img, none); background-size: cover; background-position: center top; opacity: 1; filter: none;
}
.ar-path-node .ar-path-card::after { content: none; }
/* Niveaux non engagés (non suivi / à payer) : avatar désaturé */
.ar-path-node.is-off .ar-path-card::before,
.ar-path-node.is-topay .ar-path-card::before { filter: grayscale(1) opacity(.62); }

/* Nom du niveau (dans le chevron) */
.ar-path-node .ar-path-name { margin: 0; font-size: 14.5px; font-weight: 800; color: var(--ar-ink); line-height: 1.2; }
.ar-path-node.is-off .ar-path-name { color: #64748b; }
.ar-path-node.is-done .ar-path-name::after { content: " 🎉"; }

/* Piste de statuts sous le chevron : ligne pointillée + pastille d'icône */
.ar-path-track { position: relative; width: 100%; display: flex; justify-content: center; padding: 20px 0 0; }
.ar-path-dot {
    position: relative; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
    background: #fff; border: 2px solid var(--sc); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(15,23,42,.08);
}
.ar-path-dot svg { width: 18px; height: 18px; color: var(--sc); }
.ar-path-node:not(:last-child) .ar-path-track::before {
    content: ""; position: absolute; top: 40px; left: calc(50% + 22px); width: calc(100% - 39px);
    border-top: 2px dashed #cbd5e1; z-index: 0;
}

/* Pastille de statut */
.ar-path-node .ar-path-state {
    margin-top: 11px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
    font-size: 12.5px; font-weight: 800; padding: 5px 13px; border-radius: 999px;
    color: var(--sc); background: var(--scs); box-shadow: none; letter-spacing: .01em;
}
.ar-path-node .ar-path-state svg { display: none; }

/* Groupe + notif */
.ar-path-node .ar-path-group { margin-top: 9px; min-height: 0; font-size: 12px; font-weight: 800; color: var(--sc); max-width: 140px; line-height: 1.35; }
.ar-path-node.is-off .ar-path-group { color: var(--ar-muted); }
.ar-path-node .ar-path-group-lbl { font-weight: 600; color: var(--ar-muted); }
.ar-path-notif { margin-top: 8px; }

/* Boutons (nœuds cliquables) : reset + survol */
a.ar-path-node, button.ar-path-node { border: 0; background: none; font: inherit; cursor: pointer; }
a.ar-path-node:hover, button.ar-path-node:hover, button.ar-path-node:focus, button.ar-path-node:active { background: none; }
a.ar-path-node:hover .ar-path-card, button.ar-path-node:hover .ar-path-card { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 22px rgba(15,23,42,.18); }

@media (max-width: 560px) {
    .ar-path { gap: 3px; }
    .ar-path-node { flex: 1 0 112px; min-width: 108px; }
    .ar-path-chevron { min-height: 150px; padding: 24px 8px 14px; }
    .ar-path-node .ar-path-card { width: 72px; height: 72px; }
}

/* Parcours v3 — correctifs états « en attente/action » : anneau pointillé net,
   avatar en pleine couleur (sauf non-payés qui restent désaturés), pas de pulse. */
.ar-path-node.is-payauth .ar-path-card,
.ar-path-node.is-awaiting .ar-path-card,
.ar-path-node.is-topay   .ar-path-card,
.ar-path-node.is-next    .ar-path-card {
    border: 4px dashed var(--sc); background: #fff; animation: none;
    box-shadow: 0 6px 14px rgba(15,23,42,.14);
}
.ar-path-node.is-payauth .ar-path-card::before,
.ar-path-node.is-awaiting .ar-path-card::before,
.ar-path-node.is-next    .ar-path-card::before { filter: none; opacity: 1; }
.ar-path-node.is-topay   .ar-path-card::before { filter: grayscale(1) opacity(.62); opacity: 1; }

/* =============== Parcours v3 — ajustements design (remarques) =============== */
/* 1. Centrer la piste dans la page (scroll si trop large) */
.ar-path { justify-content: center; }
@media (max-width: 1080px) { .ar-path { justify-content: flex-start; } }

/* 2. Numéro : fond blanc, bordure légère, en HAUT À GAUCHE de la flèche */
.ar-path-node .ar-path-num {
    position: absolute; top: 12px; left: 14px; margin: 0; z-index: 5;
    width: 30px; height: 30px; background: #fff;
    border: 2px solid color-mix(in srgb, var(--sc) 42%, #fff);
    color: var(--sc); box-shadow: 0 2px 6px rgba(15,23,42,.10); font-size: 14px;
}

/* 3. Flèches plus longues + coins plus doux */
.ar-path-chevron { min-height: 198px; padding: 34px 12px 20px; border-radius: 20px; }
.ar-path-node .ar-path-card { width: 88px; height: 88px; }

/* 4. Niveaux non engagés / en attente / à inscrire / en préparation : rester LIGHT */
.ar-path-node.is-off .ar-path-chevron,
.ar-path-node.is-topay .ar-path-chevron,
.ar-path-node.is-payauth .ar-path-chevron,
.ar-path-node.is-awaiting .ar-path-chevron,
.ar-path-node.is-next .ar-path-chevron { background: var(--scs); }

/* 5. Ligne de séparation en POINTS entre chaque niveau */
.ar-path-node:not(:last-child) .ar-path-track::before { border-top: 3px dotted #cbd5e1; }

/* 7. Terminé : OR médaille (remplace le turquoise) */
.ar-path-node.is-done { --sc: #ca8a04; --scs: #fdf6d3; }

/* 8. Pointillé sur la FLÈCHE (chevron), médaillon TOUJOURS plein */
.ar-path-node .ar-path-card { border-style: solid !important; }
.ar-path-node.is-payauth .ar-path-chevron,
.ar-path-node.is-awaiting .ar-path-chevron,
.ar-path-node.is-topay   .ar-path-chevron,
.ar-path-node.is-next    .ar-path-chevron {
    outline: 2px dashed var(--sc); outline-offset: -3px;
}

/* 6. Hover : TOUTE la carte zoome (pas juste le médaillon) */
a.ar-path-node, button.ar-path-node { transition: transform .18s ease; transform-origin: center bottom; }
a.ar-path-node:hover, button.ar-path-node:hover, button.ar-path-node:focus, button.ar-path-node:active {
    transform: translateY(-4px) scale(1.06); z-index: 6;
}
a.ar-path-node:hover .ar-path-card, button.ar-path-node:hover .ar-path-card { transform: none; box-shadow: 0 6px 14px rgba(15,23,42,.14); }

/* Parcours v3 — « Terminé » entièrement en OR (surcharge les anciennes règles turquoise) */
.ar-path-node.is-done .ar-path-card { border-color: var(--sc); box-shadow: 0 6px 14px rgba(15,23,42,.14); }
.ar-path-node.is-done .ar-path-num { background: #fff; }
.ar-path-node.is-done .ar-path-name { color: #854d0e; }
.ar-path-node.is-done .ar-path-state { color: var(--sc); background: var(--scs); box-shadow: none; }

/* Parcours v3 — « En validation » (payauth) en ORANGE (distinct de l'or « Terminé ») */
.ar-path-node.is-payauth { --sc: #f97316; --scs: #ffedd5; }
.ar-path-node.is-payauth .ar-path-card { border-color: var(--sc); }
.ar-path-node.is-payauth .ar-path-state { color: var(--sc); background: var(--scs); box-shadow: none; }

/* ============ Parcours v3 — finition « impeccable » ============ */
/* Flèches nettes (pas de border-radius qui donnait l'effet « carte penchée ») */
.ar-path-chevron { border-radius: 0; }

/* Numéro ancré dans le coin haut-gauche de la flèche (moitié dedans/dehors) */
.ar-path-node { padding-top: 16px; }
.ar-path-node .ar-path-num { top: 3px; left: 15px; box-shadow: 0 2px 6px rgba(15,23,42,.14); }

/* Pointillé de la flèche via MASQUE SVG : épouse exactement le chevron, couleur
   d'état, robuste sur tous les navigateurs (remplace l'outline). */
.ar-path-node.is-payauth .ar-path-chevron,
.ar-path-node.is-awaiting .ar-path-chevron,
.ar-path-node.is-topay   .ar-path-chevron,
.ar-path-node.is-next    .ar-path-chevron { outline: none !important; }
.ar-path-node.is-payauth .ar-path-chevron::before,
.ar-path-node.is-awaiting .ar-path-chevron::before,
.ar-path-node.is-topay   .ar-path-chevron::before,
.ar-path-node.is-next    .ar-path-chevron::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-color: var(--sc);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M2 3H84L97 50L84 97H2L16 50Z' fill='none' stroke='%23000' stroke-width='2.4' stroke-dasharray='5 4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M2 3H84L97 50L84 97H2L16 50Z' fill='none' stroke='%23000' stroke-width='2.4' stroke-dasharray='5 4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ============ Parcours v3 — correctifs hover / ligne / numéros ============ */
/* 1. Hover : SEULE la flèche (carte + médaillon) bouge, PAS la ligne pointillée */
a.ar-path-node:hover, button.ar-path-node:hover, button.ar-path-node:focus, button.ar-path-node:active { transform: none; z-index: 5; }
.ar-path-chevron { transition: transform .18s ease; }
a.ar-path-node:hover .ar-path-chevron, button.ar-path-node:hover .ar-path-chevron,
button.ar-path-node:focus .ar-path-chevron, button.ar-path-node:active .ar-path-chevron { transform: translateY(-4px) scale(1.05); }

/* 2. Ligne de séparation : gros points ronds régulièrement espacés */
.ar-path-node:not(:last-child) .ar-path-track::before {
    border-top: 0; top: 38px; height: 5px;
    background-image: radial-gradient(circle, #c3ccd9 2.8px, transparent 3.2px);
    background-size: 16px 5px; background-repeat: repeat-x; background-position: left center;
}

/* 3. Numéros « Non suivi » : fond BLANC (comme tous les autres), anneau/chiffre gris */
.ar-path-node.is-off .ar-path-num { background: #fff; }

/* ===== Parcours v3 — niveaux NON déverrouillés : voile translucide couleur du statut ===== */
/* (au lieu du grisé) — s'applique à : non suivi, en validation, payé, à payer, s'inscrire */
.ar-path-node.is-off .ar-path-card::before,
.ar-path-node.is-topay .ar-path-card::before,
.ar-path-node.is-payauth .ar-path-card::before,
.ar-path-node.is-awaiting .ar-path-card::before,
.ar-path-node.is-next .ar-path-card::before { filter: none; opacity: 1; }
.ar-path-node.is-off .ar-path-card::after,
.ar-path-node.is-topay .ar-path-card::after,
.ar-path-node.is-payauth .ar-path-card::after,
.ar-path-node.is-awaiting .ar-path-card::after,
.ar-path-node.is-next .ar-path-card::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: var(--sc); opacity: .30; pointer-events: none; box-shadow: none;
}

/* ===== Parcours v3 — niveau TERMINÉ : plus de 🎉, motif d'étoiles doré répété en fond ===== */
.ar-path-node.is-done .ar-path-name::after { content: "" !important; }
.ar-path-node.is-done .ar-path-chevron::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M22 7l3.8 7.9 8.7 1.2-6.3 6.1 1.5 8.6L22 34l-7.7 3.9 1.5-8.6-6.3-6.1 8.7-1.2z' fill='%23ca8a04' fill-opacity='0.11'/%3E%3C/svg%3E");
    background-repeat: repeat; background-size: 44px 44px;
}

/* ===== Parcours v3 — niveaux non déverrouillés : avatar DÉLAVÉ (comme l'ancien modèle) ===== */
/* Fond médaillon légèrement teinté + avatar en faible opacité (effet fantôme tinté) */
.ar-path-node.is-off .ar-path-card,
.ar-path-node.is-topay .ar-path-card,
.ar-path-node.is-payauth .ar-path-card,
.ar-path-node.is-awaiting .ar-path-card,
.ar-path-node.is-next .ar-path-card { background: color-mix(in srgb, var(--sc) 12%, #fff) !important; }
.ar-path-node.is-off .ar-path-card::before,
.ar-path-node.is-topay .ar-path-card::before,
.ar-path-node.is-payauth .ar-path-card::before,
.ar-path-node.is-awaiting .ar-path-card::before,
.ar-path-node.is-next .ar-path-card::before { filter: none; opacity: .24; }
/* Retire le voile opaque précédent */
.ar-path-node.is-off .ar-path-card::after,
.ar-path-node.is-topay .ar-path-card::after,
.ar-path-node.is-payauth .ar-path-card::after,
.ar-path-node.is-awaiting .ar-path-card::after,
.ar-path-node.is-next .ar-path-card::after { content: none !important; }

/* ===== Parcours v3 — Terminé : motif de TROPHÉES + check jaune ===== */
.ar-path-node.is-done .ar-path-chevron::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cpath d='M15 10h16v5a8 8 0 0 1-16 0V10zM12 11h3v3a3 3 0 0 1-3-3zm19 0h3a3 3 0 0 1-3 3v-3zM21 23h4v7h-4zM15 32h16v3H15z' fill='%23ca8a04' fill-opacity='0.13'/%3E%3C/svg%3E");
    background-repeat: repeat; background-size: 46px 46px;
}
/* Check jaune (badge) sur le médaillon terminé */
.ar-path-node.is-done .ar-path-card::after {
    content: ""; position: absolute; right: -2px; bottom: -2px; z-index: 4;
    width: 26px; height: 26px; border-radius: 50%;
    background: #facc15 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
    border: 3px solid #fff; box-shadow: 0 2px 6px rgba(15,23,42,.2);
}

/* ===== Parcours v3 — avatars agrandis qui DÉBORDENT du cercle (cercle inchangé) ===== */
.ar-path-node .ar-path-card { overflow: visible; }
.ar-path-node .ar-path-card::before {
    inset: -24% -4% 0 -4%; border-radius: 50%;
    background-size: cover; background-position: center 18%;
    -webkit-mask: radial-gradient(circle at 50% 62%, #000 62%, transparent 63%);
            mask: radial-gradient(circle at 50% 62%, #000 62%, transparent 63%);
}

/* Burst-out v2 : l'avatar déborde réellement (tête qui sort du cercle par le haut) */
.ar-path-node .ar-path-card::before {
    inset: -32% -8% 0 -8%; border-radius: 0;
    background-size: cover; background-position: center top;
    -webkit-mask: none !important; mask: none !important;
}
/* Le check jaune doit rester au-dessus de l'avatar */
.ar-path-node.is-done .ar-path-card::after { z-index: 6; right: -1px; bottom: 0; }

/* Fix position du check jaune (bas-droite du médaillon) */
.ar-path-node.is-done .ar-path-card::after { top: auto !important; left: auto !important; right: -2px !important; bottom: -2px !important; }

/* ===== Parcours v3 — explication d'état + curseur + avatars non croppés ===== */
/* Ligne d'explication de l'état admin sous le statut */
.ar-path-hint { display: block; margin-top: 4px; font-size: 11px; font-weight: 600;
    color: color-mix(in srgb, var(--sc) 78%, #475569); line-height: 1.3; max-width: 138px; }

/* Curseur « main » sur les niveaux cliquables */
a.ar-path-node, button.ar-path-node, a.ar-path-node *, button.ar-path-node * { cursor: pointer; }

/* Fond BLANC derrière l'avatar (aucune couleur d'état visible à travers le transparent) */
.ar-path-node .ar-path-card,
.ar-path-node.is-off .ar-path-card,
.ar-path-node.is-topay .ar-path-card,
.ar-path-node.is-payauth .ar-path-card,
.ar-path-node.is-awaiting .ar-path-card,
.ar-path-node.is-next .ar-path-card { background: #fff !important; }

/* Anneau plus doux pour les niveaux non déverrouillés (fond transparent) */
.ar-path-node.is-off .ar-path-card,
.ar-path-node.is-topay .ar-path-card,
.ar-path-node.is-payauth .ar-path-card,
.ar-path-node.is-awaiting .ar-path-card,
.ar-path-node.is-next .ar-path-card { border-color: color-mix(in srgb, var(--sc) 45%, #fff); }

/* Avatars agrandis : image ENTIÈRE (pas de crop rond), ancrée en bas, tête qui sort */
.ar-path-node .ar-path-card::before {
    inset: -30% -2% 0 -2%; border-radius: 0;
    background-size: contain; background-repeat: no-repeat; background-position: center bottom;
}

/* Avatars : agrandis (image entière, non croppée), tête qui déborde par le haut */
.ar-path-node .ar-path-card::before {
    inset: -40% -10% -2% -10%;
    background-size: contain; background-position: center bottom;
}

/* ===== Parcours v3 — motif progress (En cours) + ligne colorée + fix hint ===== */
/* 1. Niveau EN COURS : motif de flèches (play) répété en fond, comme les trophées du Terminé */
.ar-path-node.is-current .ar-path-chevron::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M15 13l12 9-12 9z' fill='%2322c55e' fill-opacity='0.12'/%3E%3C/svg%3E");
    background-repeat: repeat; background-size: 44px 44px;
}

/* 2. Ligne de séparation : GROS points, couleur suivant l'état du niveau */
.ar-path-node:not(:last-child) .ar-path-track::before {
    border-top: 0; top: 37px; height: 7px;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--sc) 55%, #cbd5e1) 3.4px, transparent 3.9px);
    background-size: 18px 7px; background-repeat: repeat-x; background-position: left center;
}

/* 3. Fix débordement : explication + groupe contraints à la largeur du niveau, centrés */
.ar-path-hint, .ar-path-group {
    max-width: 118px; text-align: center; overflow-wrap: break-word; word-break: break-word;
    margin-left: auto; margin-right: auto;
}

/* ===== Parcours v3 — effet RADAR autour du médaillon (niveaux bloqués à modale) ===== */
@keyframes ar-path-radar {
    0%   { transform: scale(.9);  opacity: .65; }
    70%  { opacity: 0; }
    100% { transform: scale(1.32); opacity: 0; }
}
.ar-path-node.is-next .ar-path-card::after,
.ar-path-node.is-payauth .ar-path-card::after,
.ar-path-node.is-awaiting .ar-path-card::after,
.ar-path-node.is-topay .ar-path-card::after {
    content: "" !important; position: absolute;
    top: -2px !important; left: -2px !important; right: -2px !important; bottom: -2px !important;
    border-radius: 50%; border: 2.5px solid var(--sc); background: none !important;
    box-shadow: none; z-index: 1; pointer-events: none;
    transform-origin: center;
    animation: ar-path-radar 1.9s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .ar-path-node .ar-path-card::after { animation: none !important; opacity: 0 !important; }
}

/* ===== Parcours v3 — correctifs : largeur texte, avatar plein cercle, radar discret ===== */
/* 1. Explication + groupe : largeur réduite pour éviter tout chevauchement */
.ar-path-hint, .ar-path-group { max-width: 104px !important; text-align: center; overflow-wrap: break-word; line-height: 1.3; }

/* 2. Avatar : image CLIPPÉE au cercle (remplie, opaque) → l'anneau ne transparaît plus derrière.
   Le clip est sur le fond du ::before (border-radius), la carte garde overflow visible pour le
   check / le radar. */
.ar-path-node .ar-path-card { overflow: visible; }
.ar-path-node .ar-path-card::before {
    inset: 0 !important; border-radius: 50% !important;
    background-size: cover !important; background-position: center 18% !important;
}

/* 3. Radar plus discret (anneau fin, faible amplitude, plus lent) */
@keyframes ar-path-radar {
    0%   { transform: scale(.96); opacity: .38; }
    70%  { opacity: 0; }
    100% { transform: scale(1.16); opacity: 0; }
}
.ar-path-node.is-next .ar-path-card::after,
.ar-path-node.is-payauth .ar-path-card::after,
.ar-path-node.is-awaiting .ar-path-card::after,
.ar-path-node.is-topay .ar-path-card::after {
    border-width: 2px; animation: ar-path-radar 2.4s ease-out infinite;
}

/* ===== Parcours v3 — burst-out + anneau neutre (locked) + radar visible ===== */
/* Images agrandies qui DÉBORDENT du cercle (comme avant) */
.ar-path-node .ar-path-card { overflow: visible !important; }
.ar-path-node .ar-path-card::before {
    inset: -42% -8% -2% -8% !important; border-radius: 0 !important;
    background-size: contain !important; background-repeat: no-repeat !important; background-position: center bottom !important;
    -webkit-mask: none !important; mask: none !important;
}
/* Niveaux LOCKED : anneau NEUTRE (plus de cercle de couleur) → l'image transparente ne
   laisse plus voir de bordure colorée derrière. La couleur d'état reste via le radar. */
.ar-path-node.is-off .ar-path-card,
.ar-path-node.is-topay .ar-path-card,
.ar-path-node.is-payauth .ar-path-card,
.ar-path-node.is-awaiting .ar-path-card,
.ar-path-node.is-next .ar-path-card { border-color: #e8edf5 !important; }

/* Radar bien visible (en cours + niveaux bloqués à modale) */
@keyframes ar-path-radar {
    0%   { transform: scale(.9);  opacity: .6; }
    70%  { opacity: 0; }
    100% { transform: scale(1.42); opacity: 0; }
}
.ar-path-node.is-current .ar-path-card::after,
.ar-path-node.is-next .ar-path-card::after,
.ar-path-node.is-payauth .ar-path-card::after,
.ar-path-node.is-awaiting .ar-path-card::after,
.ar-path-node.is-topay .ar-path-card::after {
    content: "" !important; position: absolute;
    top: -2px !important; left: -2px !important; right: -2px !important; bottom: -2px !important;
    border-radius: 50%; border: 3px solid var(--sc); background: none !important; box-shadow: none;
    z-index: 1; pointer-events: none; transform-origin: center;
    animation: ar-path-radar 1.9s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) { .ar-path-node .ar-path-card::after { animation: none !important; } }

/* ===== Parcours v3 — niveaux locked : bordure RETIRÉE (transparente, pas grise) ===== */
.ar-path-node.is-off .ar-path-card,
.ar-path-node.is-topay .ar-path-card,
.ar-path-node.is-payauth .ar-path-card,
.ar-path-node.is-awaiting .ar-path-card,
.ar-path-node.is-next .ar-path-card { border-color: transparent !important; }

/* Parcours v3 — avatars encore plus grands (débordent davantage du cercle) */
.ar-path-node .ar-path-card::before {
    inset: -58% -18% -2% -18% !important;
    background-size: contain !important; background-position: center bottom !important;
}

/* Parcours v3 — radar plus SOFT (fin, discret, lent) */
@keyframes ar-path-radar {
    0%   { transform: scale(.97); opacity: .32; }
    60%  { opacity: 0; }
    100% { transform: scale(1.22); opacity: 0; }
}
.ar-path-node.is-current .ar-path-card::after,
.ar-path-node.is-next .ar-path-card::after,
.ar-path-node.is-payauth .ar-path-card::after,
.ar-path-node.is-awaiting .ar-path-card::after,
.ar-path-node.is-topay .ar-path-card::after {
    border-width: 1.5px; animation: ar-path-radar 2.6s ease-out infinite;
}

/* Niveaux verrouillés : l'image est délavée dans le fichier (opaque) → pleine opacité */
.ar-path-node.is-off .ar-path-card::before,
.ar-path-node.is-topay .ar-path-card::before,
.ar-path-node.is-payauth .ar-path-card::before,
.ar-path-node.is-awaiting .ar-path-card::before,
.ar-path-node.is-next .ar-path-card::before { opacity: 1 !important; filter: none !important; }

/* ===== Parcours v3 — lueur « vivante » derrière l'image (remplace le radar) ===== */
/* Retire l'anneau radar sur en cours + niveaux bloqués (le check du Terminé reste) */
.ar-path-node.is-current .ar-path-card::after,
.ar-path-node.is-next .ar-path-card::after,
.ar-path-node.is-payauth .ar-path-card::after,
.ar-path-node.is-awaiting .ar-path-card::after,
.ar-path-node.is-topay .ar-path-card::after { content: none !important; animation: none !important; }

/* Lueur douce à la couleur de l'état, DERRIÈRE l'image, qui respire (pas de bordure) */
@keyframes ar-path-glow {
    0%, 100% { box-shadow: 0 5px 13px rgba(15,23,42,.10), 0 0 0 3px color-mix(in srgb, var(--sc) 16%, transparent); }
    50%      { box-shadow: 0 5px 13px rgba(15,23,42,.10), 0 0 13px 5px color-mix(in srgb, var(--sc) 34%, transparent); }
}
.ar-path-node.is-current .ar-path-card,
.ar-path-node.is-next .ar-path-card,
.ar-path-node.is-payauth .ar-path-card,
.ar-path-node.is-awaiting .ar-path-card,
.ar-path-node.is-topay .ar-path-card {
    animation: ar-path-glow 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .ar-path-node .ar-path-card { animation: none !important; }
}

/* ── État « envoi en cours » (messages, SMS, forum) ──────────────────────────
   Le formulaire porte .is-sending (messages/SMS) ou le bouton porte .is-sending
   (forum) pendant la requête : input grisé + bouton en spinner, anti double-envoi. */
.ar-msg-compose.is-sending textarea,
.ar-msg-compose textarea:disabled {
    opacity: .55;
    cursor: progress;
}
.ar-msg-compose.is-sending button[type="submit"],
button.is-sending {
    position: relative;
    color: transparent !important;
    pointer-events: none;
    opacity: .9;
}
.ar-msg-compose.is-sending button[type="submit"] > *,
button.is-sending > * {
    visibility: hidden;
}
.ar-msg-compose.is-sending button[type="submit"]::after,
button.is-sending::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 15px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    animation: ar-send-spin .6s linear infinite;
}
@keyframes ar-send-spin { to { transform: rotate(360deg); } }

/* ── « Lu par » : reçus de lecture SOUS le fil (pas dans le header) ───────────
   Affichés uniquement au staff/parent autorisé, hors sa propre lecture, avec
   l'heure dans le fuseau du visiteur (enseignant = TN, sinon = CA/Est). */
.ar-msg-readby-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 10px;
    padding: 4px 14px 8px;
}
.ar-msg-readby {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    line-height: 1.4;
    color: #16a34a;
    background: #f0fdf4;
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
}
.ar-msg-readby i { width: 13px; height: 13px; }
.ar-msg-readby.is-unread {
    color: #94a3b8;
    background: #f1f5f9;
}

/* ── Vue groupes admin/enseignant : 3 cartes par ligne + plage de dates ──────── */
.ar-portal-view-groupes .ar-groups-cols-3 .ar-groups-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 1280px) {
    .ar-portal-view-groupes .ar-groups-cols-3 .ar-groups-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .ar-portal-view-groupes .ar-groups-cols-3 .ar-groups-list { grid-template-columns: 1fr; }
}
/* Carte compactée en mode 3 colonnes : padding réduit + « prochaine séance » dessous */
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card {
    padding: 16px 16px;
    gap: 12px;
}
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-top {
    grid-template-columns: 1fr;
    gap: 12px;
}
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-next {
    padding-left: 0;
    border-left: 0;
    padding-top: 10px;
    border-top: 1px solid var(--ar-line, #eef2f7);
    text-align: left;
}
/* Plage de dates du cours (début → fin) */
.ar-group-dates {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #64748b;
}
.ar-group-dates i { width: 14px; height: 14px; flex: 0 0 auto; }

/* ── Cartes groupe staff (3 colonnes) : compactage lecture ───────────────────
   Objectif : moins chargé, plus lisible, plus petit. Scopé au staff. */
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card { padding: 14px 15px; gap: 10px; }
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-main { gap: 7px; }
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-titlerow h3 { font-size: 16px; }

/* Métas resserrées (tags / prof / horaire / dates / avatars) */
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-tags { gap: 5px; }
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-schedule,
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-dates { font-size: 11.5px; }
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-avatars { margin-top: 2px; }
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-avatar { width: 24px; height: 24px; font-size: 10px; }

/* « Prochaine séance » : ligne compacte à gauche au lieu d'un gros bloc centré */
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-next {
    padding: 8px 0 0;
    margin-top: 2px;
    border-top: 1px solid var(--ar-line, #eef2f7);
    border-left: 0;
    text-align: left;
}
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-next {
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
    gap: 3px 8px;
}
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-next > span {
    width: 100%;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #94A3B8;
}
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-next strong { font-size: 13px; font-weight: 750; }
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-next .ar-time-dual { margin-left: auto; }
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-next-badge {
    font-size: 10px;
    padding: 1px 7px;
    width: auto;
}

/* Progression : plus compacte */
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-progress { gap: 14px; padding-top: 8px; }
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-actions { gap: 8px; padding-top: 4px; }

/* Compactage carte staff — passe 2 (réduire la hauteur, prochaine séance sur 2 lignes) */
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-avatars { display: none; } /* redondant avec « N élèves » */
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-next { row-gap: 2px; }
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-next strong {
    display: inline-flex; align-items: center; gap: 5px; font-size: 13px; line-height: 1.2;
}
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-next strong svg { width: 13px; height: 13px; }
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-next .ar-time-dual-inline b,
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-next .ar-time-dual-inline i { font-size: 11px; }
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-progress { gap: 14px; padding-top: 6px; }
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-progress small { font-size: 10.5px; }
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-metric-head { margin-bottom: 2px; }

/* Prochaine séance (staff 3-col) : tout aligné à gauche, heures TN/CA sur une ligne */
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-next { align-items: flex-start; }
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-next { justify-content: flex-start; text-align: left; }
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-next > * { margin-left: 0 !important; }
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-next .ar-time-dual-inline {
    display: inline-flex; flex-direction: row; align-items: baseline; gap: 8px;
}
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-next-badge { margin-top: 1px; }

/* ── Carte staff (3-col) — refonte : split gauche(infos)/droite(prochaine séance),
   sans avancement/rapports, boutons collés en bas ──────────────────────────── */
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card { justify-content: flex-start; }
/* Retire le bloc avancement / rapports */
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-progress { display: none !important; }
/* Split : infos à gauche, prochaine séance à droite */
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-top {
    grid-template-columns: minmax(0, 1fr) minmax(122px, 0.82fr);
    gap: 14px;
    align-items: stretch;
}
/* Infos gauche : chaque item sur sa propre ligne (niveau, session, élèves, prof) */
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-tags {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
/* Prochaine séance à droite, séparateur vertical, contenu empilé */
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-next {
    border-top: 0;
    border-left: 1px solid var(--ar-line, #eef2f7);
    padding: 0 0 0 14px;
    margin-top: 0;
    text-align: left;
    align-items: flex-start;
}
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-next {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-next > span { width: auto; }
/* Boutons toujours collés en bas de la carte */
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-actions {
    margin-top: auto;
    padding-top: 12px;
}
@media (max-width: 520px) {
    .ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-top { grid-template-columns: 1fr; }
    .ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-next { border-left: 0; border-top: 1px solid var(--ar-line,#eef2f7); padding: 10px 0 0; }
}

/* ── Aperçu groupe — codes couleur KPI (override final) ─────────────────────── */
/* 2. Avancement : toujours ROSE (fond + chiffre + déco) */
.ar-group-ov-page .ar-kpi-progress { background: linear-gradient(180deg, #fdf2f8, #fff); }
.ar-group-ov-page .ar-kpi-progress > strong,
.ar-group-ov-page .ar-kpi-progress .ar-group-ov-kpi > strong { color: #db2777; }
.ar-group-ov-page .ar-kpi-progress .ar-kpi-deco { color: #ec4899; }

/* 4. Présences : toujours VERT (fond + déco ; chiffre/barre gérés inline) */
.ar-group-ov-page .ar-kpi-presence { background: linear-gradient(180deg, #f0fdf4, #fff); }
.ar-group-ov-page .ar-kpi-presence .ar-kpi-deco { color: #16a34a; }

/* Bouton « Rejoindre » : plus gros + couleur du titre bleu (#4F46E5) */
.ar-group-ov-page .ar-kpi-next .ar-kpi-btn-solid {
    margin-top: 8px;
    background: #4F46E5 !important;
    background-image: none !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    padding: 11px 22px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(79, 70, 229, .30);
}
.ar-group-ov-page .ar-kpi-next .ar-kpi-btn-solid:hover { background: #4338CA !important; }
.ar-group-ov-page .ar-kpi-next .ar-kpi-btn-solid svg { width: 18px; height: 18px; }

/* ── Carte groupe — design infos + en-tête statut/session + séparateur ──────── */
/* En-tête : statut + badge session côte à côte */
.ar-group-cardhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ar-group-cardhead .ar-group-status-ribbon { margin-bottom: 0; }
.ar-group-cardhead .ar-season-tag { margin: 0; }

/* Liste d'infos (élèves / enseignant / horaire / dates) — rangées soignées */
.ar-group-metalist { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ar-group-metaitem { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #475569; line-height: 1.3; }
.ar-group-metaitem > span:last-child { min-width: 0; }
.ar-group-metaitem strong { color: #1e293b; font-weight: 750; }
.ar-group-metaic {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--ar-niv, #64748b) 12%, #fff);
    color: var(--ar-niv, #64748b);
}
.ar-group-metaic i, .ar-group-metaic svg { width: 14px; height: 14px; }
.ar-group-metasched { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.ar-group-metasched span {
    background: #f1f5f9; color: #475569; border-radius: 999px;
    padding: 1px 8px; font-size: 11.5px; font-weight: 600;
}

/* Lien Teams sous « prochaine séance » (uniquement quand c'est aujourd'hui) */
.ar-group-next-join {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 5px;
    background: #4F46E5; color: #fff !important; text-decoration: none;
    font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: 10px;
    box-shadow: 0 6px 14px rgba(79, 70, 229, .28);
    transition: background .15s ease;
}
.ar-group-next-join:hover { background: #4338CA; }
.ar-group-next-join i, .ar-group-next-join svg { width: 15px; height: 15px; }

/* Séparateur avant les boutons du bas */
.ar-group-card-sep { height: 1px; background: var(--ar-line, #eef2f7); margin: 2px 0 0; }
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-sep { margin-top: auto; }
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-actions { margin-top: 8px; }

/* Lien « Canal Teams » dans le header du groupe (staff) — accès rapide */
.ar-group-ov-titlerow .ar-group-teams-channel {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #5059C9;
    color: #fff !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 15px;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(80, 89, 201, .28);
    transition: background .15s ease, transform .1s ease;
}
.ar-group-ov-titlerow .ar-group-teams-channel:hover { background: #444BAF; }
.ar-group-ov-titlerow .ar-group-teams-channel:active { transform: scale(.97); }
.ar-group-ov-titlerow .ar-group-teams-channel i,
.ar-group-ov-titlerow .ar-group-teams-channel svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
    .ar-group-ov-titlerow .ar-group-teams-channel { margin-left: 0; }
}

/* ── Cartes groupe — ajustements (espace header, boutons, horaires) ─────────── */
/* 1. Espace après les tags du header */
.ar-group-cardhead { margin-bottom: 10px; }

/* 2. « Rejoindre » : couleur pleine du niveau (plus l'indigo délavé) */
.ar-group-next-join {
    background: var(--ar-niv, #4F46E5) !important;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--ar-niv, #4F46E5) 30%, transparent);
}
.ar-group-next-join:hover { background: var(--ar-niv, #4338CA) !important; filter: brightness(.94); }

/* 3. « Voir le groupe » : teinte claire du niveau + contour du niveau */
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-see {
    background: color-mix(in srgb, var(--ar-niv) 12%, #fff) !important;
    color: var(--ar-niv) !important;
    border: 1.5px solid var(--ar-niv);
    box-shadow: none;
}
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-see i,
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-see svg { color: var(--ar-niv); }
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-see:hover {
    background: color-mix(in srgb, var(--ar-niv) 20%, #fff) !important;
}

/* 4. Horaires en texte normal (plus de pastilles) */
.ar-group-metasched span {
    background: none !important;
    padding: 0 !important;
    color: #475569;
    font-weight: 600;
}
.ar-group-metasched span:not(:last-child)::after {
    content: '·';
    margin: 0 5px;
    color: #94a3b8;
    font-weight: 400;
}

/* ── Cartes groupe staff — ajustements bas de carte + badge ─────────────────── */
/* Séparateur plus proche des boutons (retire l'excès de padding) */
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-actions {
    margin-top: 8px !important;
    padding-top: 0 !important;
}
/* Retirer « Parents & SMS » et « Calendrier » des cartes staff */
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-quicklinks { display: none; }
/* Badge « Dans X jours » : fond un peu plus grand */
.ar-group-next-badge { padding: 5px 13px; }

/* ── Cartes groupe staff — prochaine séance centrée + session en haut à droite ── */
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-next {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
/* Badge de session poussé à droite du header (haut à droite de la carte) */
.ar-group-cardhead { justify-content: space-between; }

/* ── Badges prochaine séance « Dans X jours » / « Aujourd'hui » — refonte ────── */
.ar-group-next-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 4px 11px !important;
    border-radius: 999px;
    font-size: 10.5px !important;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
    background: #F1F5F9 !important;
    color: #475569 !important;
    border: 1px solid #E2E8F0;
}
.ar-group-next-badge > i, .ar-group-next-badge > svg { width: 13px; height: 13px; opacity: .75; }
/* Aujourd'hui : vert plein, mis en avant */
.ar-group-next-badge.is-today {
    background: #16A34A !important;
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 3px 9px rgba(22, 163, 74, .28);
}
.ar-group-next-badge.is-today > i, .ar-group-next-badge.is-today > svg { opacity: 1; }

/* ── Ajustements finaux cartes staff ────────────────────────────────────────── */
/* Boutons collés au séparateur (petit interstice via le séparateur) */
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-actions {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-sep {
    margin-top: auto;
    margin-bottom: 10px;
}
/* « Aujourd'hui » : vert plus clair */
.ar-group-next-badge.is-today {
    background: #22C55E !important;
    box-shadow: 0 3px 9px rgba(34, 197, 94, .30);
}

/* ── Responsive page groupes (KPI) sur petits écrans ────────────────────────── */
@media (max-width: 600px) {
    .ar-portal-view-groupes .ar-groups-kpis.ar-stat-grid { grid-template-columns: 1fr !important; }
}

/* ── Cartes groupe (tous rôles) — avancement à côté du bouton, badges, fixes ─── */
/* Fix : accent haut de carte clippé aux coins arrondis (plus de débordement) */
.ar-portal-view-groupes .ar-group-card { overflow: hidden; }

/* Actions : « Voir le groupe » + avancement compact côte à côte */
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-card-actions {
    flex-direction: row !important;
    align-items: center;
    gap: 14px;
}
.ar-portal-view-groupes .ar-groups-cols-3 .ar-group-see { flex: 0 0 auto; }
.ar-group-see-progress { flex: 1 1 auto; min-width: 0; }
.ar-group-see-progress-top {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 11px; color: #64748b; margin-bottom: 5px;
}
.ar-group-see-progress-top strong { color: #1e293b; font-weight: 750; font-size: 12.5px; }

/* « Aujourd'hui » : fond vert très clair + texte vert */
.ar-group-next-badge.is-today {
    background: #DCFCE7 !important;
    color: #15803D !important;
    border: 1px solid #BBF7D0 !important;
    box-shadow: none !important;
}

/* Bouton « Rejoindre » : pastille verte nette */
.ar-group-next-join {
    background: #16A34A !important;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(22, 163, 74, .26);
}
.ar-group-next-join:hover { background: #15803D !important; filter: none; }

/* --- Ajouter un enfant : autocomplete parent/élève --- */
.ar-ac-autocomplete { position: relative; }
.ar-ac-autocomplete > input[type="text"] { width: 100%; }
.ar-ac-suggest {
    position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 4px 0 0;
    list-style: none; padding: 4px; max-height: 280px; overflow-y: auto;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
}
.ar-ac-suggest-item {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
    cursor: pointer; font-size: 14px; color: #1e293b;
}
.ar-ac-suggest-item.is-active, .ar-ac-suggest-item:hover { background: #f1f5f9; }
.ar-ac-suggest-name { font-weight: 600; }
.ar-ac-suggest-email { color: #94a3b8; font-size: 12px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-ac-badge {
    flex: none; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .02em;
}
.ar-ac-badge-parent { background: #eef2ff; color: #4f46e5; }
.ar-ac-badge-eleve { background: #ecfeff; color: #0891b2; }
.ar-ac-added-link { color: #4f46e5; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.ar-ac-added-link:hover { text-decoration: underline; }

/* Nom de l'enseignant dans la puce d'événement du calendrier (staff) */
.ar-teacher-calendar-event .ar-event-teacher { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #64748B; margin-top: 1px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ar-teacher-calendar-event .ar-event-teacher i[data-lucide], .ar-teacher-calendar-event .ar-event-teacher svg { width: 11px; height: 11px; flex: 0 0 auto; }

/* Détail d'un abonnement récurrent (facturation) */
.ar-bill-breakdown { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--ar-line); display: flex; flex-direction: column; gap: 4px; }
.ar-bill-breakdown li { display: flex; align-items: baseline; justify-content: flex-start; gap: 6px; font-size: 12.5px; color: var(--ar-muted); }
.ar-bill-breakdown li b { color: var(--ar-ink); font-weight: 700; }
.ar-bill-breakdown li span::after { content: " :"; }
.ar-bill-breakdown li:first-child span::after { content: ""; }
.ar-bill-breakdown-total { margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--ar-line); font-weight: 700; }
.ar-bill-breakdown-total span, .ar-bill-breakdown-total b { color: var(--ar-ink); font-size: 13px; }

/* Lien de connexion (topbar) quand l'utilisateur n'est pas connecté */
.ar-portal-login-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 12px; background: #4F46E5; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.ar-portal-login-link:hover { background: #4338CA; }
.ar-portal-login-link i[data-lucide], .ar-portal-login-link svg { width: 16px; height: 16px; }

/* Bouton « Commencer » des exercices dans le parcours : même design que le groupe
   (le texte est un <span> dans .ar-stat-body, il héritait du blanc → forcer l'orange). */
.ar-stat-card.ar-stat-exo .ar-stat-body .ar-kpi-exo-btn { color: #ea580c; margin-top: 4px; }

/* ===== Console Admissions (sous-lot 1.2 : coquille) ===== */
.ar-adm-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 18px;padding-bottom:2px;border-bottom:1px solid var(--ar-line)}
.ar-adm-tabs{display:flex;gap:2px;flex:1;overflow-x:auto}
.ar-adm-tab{border:0;background:none;color:var(--ar-muted);font-weight:650;font-size:14px;padding:11px 14px;border-bottom:2.5px solid transparent;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.ar-adm-tab i[data-lucide],.ar-adm-tab svg{width:16px;height:16px}
.ar-adm-tab:hover{color:var(--ar-ink)}
.ar-adm-tab.is-active{color:#005064;border-bottom-color:#e0851b}
.ar-adm-acts{display:flex;gap:8px;flex:none}
.ar-adm-panel{display:none}
.ar-adm-panel.is-active{display:block;animation:arAdmFade .2s ease}
@keyframes arAdmFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ar-adm-placeholder{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:56px 24px;background:var(--ar-surface,#fff);border:1px dashed var(--ar-line);border-radius:18px}
.ar-adm-ph-ic{width:56px;height:56px;border-radius:16px;background:#e4f1f5;color:#005064;display:grid;place-items:center}
.ar-adm-ph-ic i[data-lucide],.ar-adm-ph-ic svg{width:26px;height:26px}
.ar-adm-placeholder h3{margin:2px 0 0;font-size:18px;color:var(--ar-ink)}
.ar-adm-placeholder p{margin:0;color:var(--ar-muted);font-size:13.5px;max-width:46ch}
.ar-adm-soon{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#e0851b;background:#fcefdc;border-radius:20px;padding:5px 12px;margin-top:4px}
.ar-adm-soon i[data-lucide],.ar-adm-soon svg{width:14px;height:14px}

/* ===== Admissions — workspace d'éval en SECTION (1.3b) ===== */
.ar-adm-ws{position:fixed;inset:0;z-index:9998;background:#f4f7fb;overflow-y:auto}
.ar-adm-ws-box{max-width:1100px;margin:0 auto;min-height:100vh;background:#f4f7fb;padding:16px 20px 40px}
.ar-adm-ws-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:13px;padding:12px 16px;background:#00546a;color:#fff;border-radius:16px;margin-bottom:16px}
.ar-adm-ws-x{border:0;background:rgba(255,255,255,.14);color:#fff;width:34px;height:34px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none}
.ar-adm-ws-x:hover{background:rgba(255,255,255,.28)}
.ar-adm-ws-x i,.ar-adm-ws-x svg{width:18px;height:18px}
.ar-adm-ws-head .ar-btn-soft{background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.22)!important;color:#fff!important}
.ar-adm-ws-pf{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-weight:800;flex:none}
.ar-adm-ws-t strong{font-size:16px;display:block}.ar-adm-ws-t small{color:rgba(255,255,255,.75);font-size:12px}
.ar-adm-ws-grow{flex:1}
.ar-adm-ws-head .ar-adm-tagok{background:rgba(255,255,255,.16);color:#fff}
.ar-adm-ws-inner{display:flex;flex-direction:column;gap:16px}
.ar-adm-seg{display:inline-flex;background:#eef4f8;border:1px solid var(--ar-line,#e2e9ef);border-radius:10px;padding:3px;margin-bottom:14px}
.ar-adm-seg button{border:0;background:none;color:var(--ar-muted,#5c727c);font-weight:650;font-size:12.5px;padding:6px 13px;border-radius:7px;cursor:pointer}
.ar-adm-seg button.is-on{background:#fff;color:var(--ar-ink,#12303a);box-shadow:0 1px 2px rgba(16,42,54,.06)}
.ar-adm-ac{position:relative}
.ar-adm-ac-list{position:absolute;z-index:20;left:0;right:0;top:100%;margin:4px 0 0;list-style:none;padding:4px;max-height:260px;overflow-y:auto;background:#fff;border:1px solid var(--ar-line,#e2e9ef);border-radius:12px;box-shadow:0 12px 30px rgba(16,42,54,.14)}
.ar-adm-ac-list li{display:flex;flex-direction:column;padding:8px 10px;border-radius:8px;cursor:pointer}
.ar-adm-ac-list li:hover{background:#f1f5f9}
.ar-adm-ac-list li strong{font-size:13px}.ar-adm-ac-list li span{font-size:11.5px;color:var(--ar-muted,#5c727c)}
.ar-adm-grid-wrap{border-radius:10px}

.ar-adm-card{background:#fff;border:1px solid var(--ar-line,#e2e9ef);border-radius:16px;box-shadow:0 1px 2px rgba(16,42,54,.04),0 8px 22px rgba(16,42,54,.05)}
.ar-adm-card.is-locked{opacity:.5;pointer-events:none;filter:grayscale(.3)}
.ar-adm-card-h{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--ar-line,#e2e9ef)}
.ar-adm-card-h h3{font-size:15px;flex:1;margin:0}
.ar-adm-step-n{width:26px;height:26px;border-radius:50%;background:#e4f1f5;color:#00546a;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.ar-adm-card-b{padding:18px}
.ar-adm-tagok{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#16a34a;background:#e4f5ea;border-radius:20px;padding:3px 10px}
.ar-adm-tagok i,.ar-adm-tagok svg{width:14px;height:14px}

.ar-field{margin-bottom:0}
.ar-field label{display:block;font-size:12px;font-weight:700;color:var(--ar-muted,#5c727c);margin-bottom:6px}
.ar-inp{width:100%;border:1px solid var(--ar-line,#e2e9ef);background:#f6fafc;border-radius:10px;padding:9px 12px;color:var(--ar-ink,#12303a);font:inherit;outline:none}
.ar-inp:focus{border-color:#0a7290;box-shadow:0 0 0 3px #e4f1f5}
.ar-adm-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.ar-adm-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:14px}
@media(max-width:720px){.ar-adm-row2,.ar-adm-row3{grid-template-columns:1fr}}
.ar-adm-hint{font-size:11.5px;color:var(--ar-muted,#5c727c);margin:8px 0 0}
.ar-adm-msg{font-size:12px;font-weight:600;color:var(--ar-muted,#5c727c)}.ar-adm-msg.is-err{color:#e11d48}

.ar-adm-kidform{border:1px dashed var(--ar-line,#e2e9ef);border-radius:12px;padding:15px;background:#f6fafc;margin-bottom:14px}
.ar-adm-kid{border:1px solid var(--ar-line,#e2e9ef);border-radius:12px;margin-bottom:12px;overflow:hidden}
.ar-adm-kid-h{display:flex;align-items:center;gap:11px;padding:12px 14px;background:#f6fafc;cursor:pointer;user-select:none}
.ar-adm-kid-caret{border:0;background:transparent;color:#5c727c;cursor:pointer;padding:4px;display:inline-flex;transition:transform .15s}
.ar-adm-kid-caret i,.ar-adm-kid-caret svg{width:18px;height:18px}
.ar-adm-kid.is-collapsed .ar-adm-kid-b{display:none}
.ar-adm-kid.is-collapsed .ar-adm-kid-caret{transform:rotate(-90deg)}
.ar-adm-kid-pf{width:32px;height:32px;border-radius:9px;background:#00546a;color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px}
.ar-adm-kid-id strong{display:block;font-size:14px}.ar-adm-kid-id small{color:var(--ar-muted,#5c727c);font-size:11.5px}
.ar-adm-dispo-count{margin-left:auto;font-size:11.5px;font-weight:700;color:#00546a;background:#e4f1f5;border-radius:20px;padding:3px 10px}
.ar-adm-kid-b{padding:14px}
.ar-adm-dispo-lbl{font-size:12px;font-weight:700;color:var(--ar-muted,#5c727c);margin-bottom:8px}
.ar-adm-grid{display:grid;grid-template-columns:56px repeat(7,1fr);border:1px solid var(--ar-line,#e2e9ef);border-radius:10px;overflow:hidden;font-size:11px;user-select:none;-webkit-user-select:none;touch-action:none}
.ar-adm-ghd{background:#eef4f8;font-weight:750;color:var(--ar-muted,#5c727c);text-align:center;padding:6px 0;border-bottom:1px solid var(--ar-line,#e2e9ef);transition:background .1s,color .1s}
.ar-adm-gtm{background:#f6fafc;color:#8698a1;text-align:center;display:grid;place-items:center;border-right:1px solid var(--ar-line,#e2e9ef);border-bottom:1px solid #eef3f7;font-weight:600;transition:background .1s,color .1s}
/* Surbrillance repère : ligne (heure) + colonne (jour) survolées */
.ar-adm-gtm.is-hi,.ar-adm-ghd.is-hi{background:#cfe6ec;color:#00546a}
/* Bande horaire pleine (:00) plus marquée pour se repérer verticalement */
.ar-adm-cell[data-h$=":00"],.ar-adm-gtm[data-h$=":00"]{border-top:1px solid #d4e2e8}
.ar-adm-cell{height:26px;border:0;border-right:1px solid #eef3f7;border-bottom:1px solid #eef3f7;background:#fff;cursor:pointer;padding:0;transition:background .1s}
.ar-adm-cell:hover{background:#e4f1f5}
.ar-adm-cell.on{background:#00546a;box-shadow:inset 0 0 0 1px #0a7290}
/* Liens fiche FluentCRM (parent + enfant) */
.ar-adm-crm-link{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:650;color:#0a7290;text-decoration:none}
.ar-adm-crm-link:hover{text-decoration:underline}
.ar-adm-crm-link i,.ar-adm-crm-link svg{width:13px;height:13px}
/* Sur le header foncé du workspace : bouton clair, lisible et cliquable */
.ar-adm-ws-head .ar-adm-crm-link{color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-radius:20px;padding:6px 12px;text-decoration:none;transition:background .15s}
.ar-adm-ws-head .ar-adm-crm-link:hover{background:rgba(255,255,255,.26);text-decoration:none}
.ar-adm-ws-head .ar-adm-crm-link i,.ar-adm-ws-head .ar-adm-crm-link svg{width:15px;height:15px}
.ar-adm-ac-list li{flex-direction:row;align-items:center;gap:8px}
.ar-adm-ac-txt{display:flex;flex-direction:column;flex:1;min-width:0}
.ar-adm-ac-crm{display:inline-flex;align-items:center;color:#0a7290;padding:4px;border-radius:6px}
.ar-adm-ac-crm:hover{background:#dbeaf0}
.ar-adm-ac-crm i,.ar-adm-ac-crm svg{width:15px;height:15px}
.ar-adm-kid-meta{margin-bottom:12px}
.ar-adm-save{font-size:11.5px;font-weight:650;white-space:nowrap;min-width:88px;transition:opacity .15s}
.ar-adm-save.is-saving{color:#8698a1}
.ar-adm-save.is-ok{color:#0a8a5f}
.ar-adm-save.is-err{color:#c0392b}
.ar-adm-kid-note{margin-bottom:14px}
.ar-adm-kid-note textarea{margin-top:4px;resize:vertical}
/* Champ date de naissance : texte jj/mm/aaaa + bouton calendrier (picker natif) */
.ar-dob-wrap{position:relative;display:block}
.ar-dob-wrap .ar-inp{padding-right:38px;width:100%}
.ar-dob-cal{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;cursor:pointer;color:#5c727c;display:inline-flex;align-items:center;padding:4px;border-radius:6px}
.ar-dob-cal:hover{background:#eef4f8;color:#0a7290}
.ar-dob-cal i,.ar-dob-cal svg{width:17px;height:17px}
.ar-dob-native{position:absolute;right:8px;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0}
/* Pipeline (Kanban) */
.ar-kanban{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;align-items:flex-start}
.ar-kcol{flex:1;min-width:240px;background:#f6fafc;border:1px solid #e2e9ef;border-radius:12px;display:flex;flex-direction:column}
.ar-kcol-h{padding:11px 14px;font-weight:700;font-size:13px;color:#17323c;border-bottom:1px solid #e2e9ef;display:flex;align-items:center;gap:8px}
.ar-kcol-n{margin-left:auto;background:#e4f1f5;color:#00546a;font-size:12px;border-radius:20px;padding:1px 9px;font-weight:700}
.ar-kcol-b{padding:10px;display:flex;flex-direction:column;gap:9px}
.ar-kcol-empty{color:#9aa7b0;font-size:13px;text-align:center;padding:10px}
.ar-kc{background:#fff;border:1px solid #e2e9ef;border-radius:10px;padding:11px 12px;cursor:pointer;transition:box-shadow .12s,border-color .12s}
.ar-kc:hover{border-color:#0a7290;box-shadow:0 3px 10px rgba(16,42,54,.1)}
.ar-kc:focus{outline:2px solid #eb981c;outline-offset:1px}
.ar-kc-h{display:flex;align-items:center;gap:6px;font-size:14px;color:#17323c}
.ar-kc-renew{color:#0a7290;font-weight:700}
.ar-kc-kids{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.ar-kc-kid{background:#eef4f8;border-radius:16px;padding:2px 9px;font-size:11.5px;color:#334a54}
.ar-kc-kid em{color:#0a7290;font-style:normal;font-weight:600}
.ar-kc-empty{margin-top:6px;font-size:12px;color:#9aa7b0}
/* Agenda des évals */
.ar-adm-agenda-bar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.ar-adm-agenda-lbl{margin-left:6px;font-size:15px;color:#17323c}
.ar-adm-agenda-body{display:flex;flex-direction:column;gap:10px}
.ar-adm-ag-day{border:1px solid #e2e9ef;border-radius:10px;overflow:hidden}
.ar-adm-ag-day.is-today{border-color:#0a7290;box-shadow:0 0 0 1px #0a7290}
.ar-adm-ag-dh{background:#f6fafc;padding:8px 14px;font-weight:700;color:#334a54;font-size:13px;text-transform:capitalize}
.ar-adm-ag-day.is-today .ar-adm-ag-dh{background:#e4f1f5;color:#00546a}
.ar-adm-ag-empty{padding:10px 14px;color:#9aa7b0;font-size:13px}
.ar-adm-ev{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid #eef3f7}
.ar-adm-ev:first-of-type{border-top:0}
.ar-adm-ev-t{font-weight:700;color:#00546a;min-width:46px}
.ar-adm-ev-id{display:flex;flex-direction:column;flex:1;min-width:0}
.ar-adm-ev-id small{color:#5c727c;font-size:12px}
.ar-adm-ev-st{font-size:11.5px;font-weight:650;color:#5c727c;text-transform:capitalize}
.ar-adm-ev.is-cancelled{opacity:.55}
.ar-adm-ev.is-cancelled .ar-adm-ev-st{color:#c0392b}
/* Vue calendrier (jours × heures) */
.ar-cal-scroll{overflow-x:auto;border:1px solid #e2e9ef;border-radius:10px}
.ar-cal{display:flex;min-width:760px}
.ar-cal-gut{width:52px;flex:0 0 52px;background:#fbfdfe}
.ar-cal-corner{height:36px;border-bottom:1px solid #e2e9ef}
.ar-cal-h{font-size:11px;color:#8698a1;text-align:right;padding:2px 6px 0 0;box-sizing:border-box;border-top:1px solid #eef3f7}
.ar-cal-col{flex:1;min-width:98px;border-left:1px solid #e2e9ef;display:flex;flex-direction:column}
.ar-cal-dh{height:36px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:#334a54;background:#f6fafc;border-bottom:1px solid #e2e9ef;text-transform:capitalize}
.ar-cal-col.is-today .ar-cal-dh{background:#e4f1f5;color:#00546a}
.ar-cal-cells{position:relative}
.ar-cal-line{position:absolute;left:0;right:0;border-top:1px solid #eef3f7}
.ar-cal-ev{position:absolute;left:3px;right:3px;background:#0a7290;color:#fff;border-radius:6px;padding:3px 6px;font-size:11px;line-height:1.25;overflow:hidden;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.ar-cal-ev strong{font-weight:600}
.ar-cal-ev-link{position:absolute;top:2px;right:2px;color:#fff;opacity:.8;display:inline-flex;padding:1px;border-radius:4px}
.ar-cal-ev-link:hover{opacity:1;background:rgba(255,255,255,.2)}
.ar-cal-ev-link i,.ar-cal-ev-link svg{width:12px;height:12px}
.ar-cal-ev:hover{background:#00546a}
.ar-cal-ev:focus{outline:2px solid #eb981c;outline-offset:1px}
.ar-cal-ev.is-cancelled{background:#eef2f5;color:#8698a1;text-decoration:line-through;cursor:default;box-shadow:none}
.ar-adm-h-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ar-adm-kid-left [data-kf-sendpre]{align-self:flex-start;margin-top:2px}
/* Modal choix des enfants à pré-inscrire */
.ar-adm-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.ar-adm-modal-backdrop{position:absolute;inset:0;background:rgba(15,32,42,.5)}
.ar-adm-modal-box{position:relative;width:100%;max-width:440px;background:#fff;border-radius:14px;box-shadow:0 18px 50px rgba(16,42,54,.28);overflow:hidden}
.ar-adm-modal-h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #e2e9ef;font-size:16px;color:#17323c}
.ar-adm-modal-x{border:0;background:transparent;cursor:pointer;color:#5c727c;padding:4px;display:inline-flex}
.ar-adm-modal-b{padding:16px 18px}
.ar-adm-modal-f{display:flex;align-items:center;gap:10px;padding:14px 18px;border-top:1px solid #e2e9ef;background:#f8fafc}
.ar-adm-pre-all{display:flex;align-items:center;gap:8px;margin:8px 0 6px;font-size:14px}
.ar-adm-pre-list{display:flex;flex-direction:column;gap:2px;border-top:1px dashed #e2e9ef;padding-top:8px}
.ar-adm-pre-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;font-size:14px;cursor:pointer}
.ar-adm-pre-item:hover{background:#f1f5f9}
.ar-adm-pre-item.is-inelig{color:#9aa7b0;opacity:.65;cursor:not-allowed}
.ar-adm-pre-item.is-inelig:hover{background:transparent}
.ar-adm-pre-tag{font-size:12px;color:#c0873a;font-style:italic}
.ar-adm-pre-result{margin-top:12px;padding:12px 14px;background:#eef7f3;border:1px solid #cfe6dc;border-radius:10px;font-size:13px;color:#17323c}
.ar-adm-pre-skip{margin-top:8px;color:#8a5a12}
.ar-adm-pre-skip ul{margin:4px 0 0;padding-left:18px}
/* Corps de carte en 2 colonnes : infos à gauche, dispos à droite */
.ar-adm-kid-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.ar-adm-kid-left{display:flex;flex-direction:column;gap:12px;min-width:0}
.ar-adm-kid-left .ar-adm-kid-note{margin-bottom:0;flex:1;display:flex;flex-direction:column}
.ar-adm-kid-left .ar-adm-kid-note textarea{flex:1;min-height:80px}
.ar-adm-kid-right{min-width:0}
@media(max-width:860px){.ar-adm-kid-cols{grid-template-columns:1fr}}
/* Grille dispos plus compacte */
.ar-adm-kid-right .ar-adm-grid{font-size:10.5px}
.ar-adm-kid-right .ar-adm-cell{height:26px}
.ar-adm-kid-right .ar-adm-ghd{padding:5px 0}
.ar-adm-kid-right .ar-adm-gtm{font-size:10px}
/* Grille en pleine longueur, sans défilement interne */
.ar-adm-kid-right .ar-adm-grid-wrap{max-height:none;overflow:visible}
/* Titres/labels : plus lisibles (gris trop fade auparavant) */
.ar-adm .ar-field label,.ar-adm-ws .ar-field label,.ar-adm-dispo-lbl{color:#334a54}
.ar-adm-card-h h3{color:#17323c}
/* Respecter [hidden] dans la console (mes display:flex l'écrasaient) */
.ar-adm [hidden],.ar-adm-ws [hidden]{display:none!important}