/* =====================================================================
   Anaya Mixup — UI modernisée, thème Lagon Anaya
   ===================================================================== */

/* --- Thème clair (toggle) — lagon doux, lisible --- */
[data-theme="lagoon-light"] {
    --bg-0: #c5dce8;
    --bg-1: #d8eaf2;
    --bg-2: #b8d4e4;
    --surface: #edf4f9;
    --surface-2: #e2eef6;
    --border: #94bdd4;
    --border-soft: #aac9dc;
    --text: #0a2840;
    --text-dim: #1a4460;
    --text-muted: #456880;
    --cyan: #0a85a0;
    --cyan-soft: #0e6e85;
    --coral: #d95620;
    --coral-soft: #e8723a;
    --ok: #15803d;
    --warn: #b45309;
    --danger: #be123c;
    --shadow: 0 10px 32px rgba(8, 40, 60, .1);
    --shadow-glow: 0 0 0 1px rgba(10, 133, 160, .18), 0 6px 24px rgba(8, 60, 90, .08);
    /* Surfaces staff (miroir du mode sombre) */
    --lagon-surface: linear-gradient(155deg, #eef5fa 0%, #e0ebf3 100%);
    --lagon-surface-border: rgba(15, 76, 102, .15);
    --lagon-surface-shadow: 0 10px 28px rgba(8, 40, 60, .08), inset 0 1px 0 rgba(255, 255, 255, .92);
    --lagon-inset: rgba(196, 218, 232, .55);
    --lagon-inset-border: rgba(15, 76, 102, .12);
    --lagon-tabs: rgba(208, 226, 238, .88);
}

[data-theme="lagoon-light"] body.site-body {
    background:
        radial-gradient(1100px 650px at 85% -5%, rgba(46, 200, 230, .14), transparent 58%),
        radial-gradient(800px 500px at 0% 25%, rgba(100, 180, 220, .12), transparent 52%),
        linear-gradient(180deg, var(--bg-1), var(--bg-0));
}

[data-theme="lagoon-light"] .topbar {
    background: rgba(237, 244, 249, .94);
    border-bottom-color: var(--border-soft);
    backdrop-filter: blur(10px);
}

[data-theme="lagoon-light"] .card,
[data-theme="lagoon-light"] .funnel-card,
[data-theme="lagoon-light"] .course-card-mixup {
    background: var(--surface);
    border-color: var(--border-soft);
}

[data-theme="lagoon-light"] input[type=text],
[data-theme="lagoon-light"] input[type=email],
[data-theme="lagoon-light"] input[type=password],
[data-theme="lagoon-light"] input[type=number],
[data-theme="lagoon-light"] input[type=date],
[data-theme="lagoon-light"] input[type=tel],
[data-theme="lagoon-light"] input[type=search],
[data-theme="lagoon-light"] select,
[data-theme="lagoon-light"] textarea {
    background: #f8fcff;
    border-color: var(--border);
    color: var(--text);
}

[data-theme="lagoon-light"] .table thead th {
    background: var(--surface-2);
    color: var(--text-dim);
    border-bottom-color: var(--border);
}

[data-theme="lagoon-light"] .mixup-subnav__tab.is-active,
[data-theme="lagoon-light"] .mixup-account-tab.is-active,
[data-theme="lagoon-light"] .staff-sidebar__link.is-active {
    color: var(--cyan);
    background: linear-gradient(135deg, rgba(10, 133, 160, .14), rgba(10, 133, 160, .05));
    box-shadow: inset 0 0 0 1px rgba(10, 133, 160, .22);
}

[data-theme="lagoon-light"] .staff-sidebar__group-summary {
    color: var(--cyan);
}

[data-theme="lagoon-light"] .mixup-panel__title svg {
    background: rgba(10, 133, 160, .1);
    border-color: rgba(10, 133, 160, .22);
    color: var(--cyan);
}

[data-theme="lagoon-light"] .mixup-panel__title {
    color: var(--text);
}

[data-theme="lagoon-light"] .table td {
    border-bottom-color: var(--border-soft);
    color: var(--text);
}

[data-theme="lagoon-light"] .table tbody tr:hover {
    background: rgba(10, 133, 160, .06);
}

[data-theme="lagoon-light"] .btn-ghost {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-dim);
}

[data-theme="lagoon-light"] .btn-ghost:hover {
    background: rgba(10, 133, 160, .08);
    border-color: var(--cyan);
    color: var(--text);
}

[data-theme="lagoon-light"] .staff-sidebar__section {
    color: var(--cyan);
}

[data-theme="lagoon-light"] .staff-sidebar__collapse {
    border-color: var(--border-soft);
    background: var(--surface-2);
    color: var(--text-dim);
}

[data-theme="lagoon-light"] .staff-sidebar__link:hover {
    background: rgba(10, 133, 160, .08);
}

[data-theme="lagoon-light"] .faq-item--rich {
    background: var(--lagon-inset);
    border-color: var(--lagon-inset-border);
}

[data-theme="lagoon-light"] .help-hub__tab-count {
    background: var(--surface-2);
    color: var(--text-dim);
}

[data-theme="lagoon-light"] .help-menu__trigger:hover,
[data-theme="lagoon-light"] .help-menu__trigger.is-active,
[data-theme="lagoon-light"] .help-menu.is-open .help-menu__trigger {
    background: rgba(10, 133, 160, .1);
    border-color: rgba(10, 133, 160, .22);
    color: var(--text);
}

[data-theme="lagoon-light"] .flash-success {
    background: rgba(34, 197, 94, .16);
    border-color: rgba(22, 163, 74, .45);
    color: #14532d;
}

[data-theme="lagoon-light"] .flash-error {
    background: rgba(244, 63, 94, .12);
    border-color: rgba(225, 29, 72, .42);
    color: #881337;
}

[data-theme="lagoon-light"] .pill-ok {
    color: var(--ok);
    border-color: rgba(22, 163, 74, .45);
    background: rgba(34, 197, 94, .1);
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-dim);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.theme-toggle:hover { border-color: var(--cyan); color: var(--cyan); }

/* --- Dashboard hero (thème plongée Anaya) --- */
@keyframes mixup-caustics-drift {
    0% { transform: translate3d(-2%, 0, 0) scale(1.05); opacity: .55; }
    50% { transform: translate3d(2%, -1%, 0) scale(1.08); opacity: .75; }
    100% { transform: translate3d(-2%, 0, 0) scale(1.05); opacity: .55; }
}

@keyframes mixup-hero-bubble-rise {
    0% { transform: translate3d(0, 105%, 0) scale(.65); opacity: 0; }
    12% { opacity: .55; }
    88% { opacity: .35; }
    100% { transform: translate3d(var(--drift, 8px), -15%, 0) scale(1); opacity: 0; }
}

@keyframes mixup-surface-sway {
    0%, 100% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(-3.5%) translateY(-2px); }
    50% { transform: translateX(-5%) translateY(0); }
    75% { transform: translateX(-2%) translateY(-1px); }
}

@keyframes mixup-surface-sway-alt {
    0%, 100% { transform: translateX(-2%) translateY(0); }
    33% { transform: translateX(2.5%) translateY(-3px); }
    66% { transform: translateX(4%) translateY(-1px); }
}

@keyframes mixup-diver-bubble-wobble {
    0%, 100% { margin-left: 0; }
    50% { margin-left: 3px; }
}

@keyframes mixup-wave-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes mixup-scene-float {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-6px); }
}

@keyframes mixup-diver-bubble-rise {
    0% { transform: translate(0, 0) scale(.35); opacity: 0; }
    12% { opacity: .75; }
    100% { transform: translate(var(--bx, 0), var(--by, -72px)) scale(1); opacity: 0; }
}

@keyframes mixup-fish-swim-left {
    0% { transform: translateX(110%) translateY(0); opacity: 0; }
    8% { opacity: .85; }
    92% { opacity: .75; }
    100% { transform: translateX(-130%) translateY(-6px); opacity: 0; }
}

@keyframes mixup-fish-swim-right {
    0% { transform: translateX(-110%) scaleX(-1) translateY(0); opacity: 0; }
    8% { opacity: .8; }
    92% { opacity: .7; }
    100% { transform: translateX(130%) scaleX(-1) translateY(4px); opacity: 0; }
}

@keyframes mixup-fish-wiggle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes mixup-fish-wiggle-flip {
    0%, 100% { transform: scaleX(-1) translateY(0); }
    50% { transform: scaleX(-1) translateY(-4px); }
}


@keyframes mixup-aqua-diver-drift {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(calc(-50% + 18px), calc(-50% - 6px)); }
}

@keyframes mixup-hero-content-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@keyframes mixup-sonar-pulse {
    0% { transform: scale(.92); opacity: .45; }
    70% { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}

.dash-hero {
    --hero-accent: var(--coral);
    position: relative;
    isolation: isolate;
    border-radius: 22px;
    padding: 2rem 2.15rem 3rem;
    margin-bottom: 1.35rem;
    overflow: hidden;
    border: 1px solid rgba(46, 230, 255, .18);
    background:
        radial-gradient(ellipse 120% 90% at 100% -20%, rgba(255, 107, 61, .22), transparent 52%),
        radial-gradient(ellipse 80% 70% at 0% 100%, rgba(46, 230, 255, .16), transparent 55%),
        linear-gradient(168deg, #041525 0%, #072338 38%, #0c3a52 72%, #0e4a5c 100%);
    box-shadow:
        0 24px 60px rgba(0, 8, 20, .45),
        inset 0 1px 0 rgba(255, 255, 255, .06);
}

.dash-hero::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--hero-accent), rgba(46, 230, 255, .85));
    border-radius: 22px 0 0 22px;
    z-index: 3;
}

[data-theme="lagoon-light"] .dash-hero {
    border-color: rgba(15, 76, 102, .2);
    background:
        radial-gradient(ellipse 100% 80% at 95% -10%, rgba(255, 107, 61, .18), transparent 50%),
        radial-gradient(ellipse 70% 60% at 5% 110%, rgba(46, 230, 255, .2), transparent 55%),
        linear-gradient(168deg, #0a4a62 0%, #12708f 45%, #1a8fad 100%);
    box-shadow: 0 20px 48px rgba(8, 40, 60, .18);
}

.dash-hero__fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.dash-hero__fx:has(.dash-hero__fish-lanes) {
    overflow: visible;
}

.dash-hero__caustics {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(ellipse 28% 22% at 20% 30%, rgba(46, 230, 255, .18), transparent 70%),
        radial-gradient(ellipse 24% 20% at 70% 20%, rgba(111, 200, 255, .14), transparent 68%),
        radial-gradient(ellipse 32% 26% at 55% 65%, rgba(46, 230, 255, .12), transparent 72%),
        radial-gradient(ellipse 20% 18% at 85% 55%, rgba(255, 255, 255, .08), transparent 70%);
    animation: mixup-caustics-drift 14s ease-in-out infinite;
    mix-blend-mode: screen;
}

.dash-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
}
.dash-hero__glow--sun {
    top: -30%;
    right: -8%;
    width: 55%;
    height: 70%;
    background: radial-gradient(circle, rgba(255, 196, 75, .22), transparent 68%);
}
.dash-hero__glow--deep {
    bottom: -25%;
    left: -10%;
    width: 45%;
    height: 55%;
    background: radial-gradient(circle, rgba(46, 230, 255, .2), transparent 70%);
}

.dash-hero__bubbles {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    inset: 0;
}
.dash-hero__bubble {
    --size: calc(5px + (var(--i, 1) * 1.4px));
    --left: calc((var(--i, 1) * 14%) + 4%);
    --drift: calc((var(--i, 1) - 3) * 5px);
    position: absolute;
    left: var(--left);
    bottom: -10%;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .65), rgba(46, 230, 255, .2) 45%, rgba(46, 230, 255, .06) 100%);
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: 0 0 8px rgba(46, 230, 255, .12);
    animation: mixup-hero-bubble-rise calc(7s + var(--i, 1) * .9s) linear infinite;
    animation-delay: calc(var(--i, 1) * -1.1s);
}

.dash-hero__underwater {
    position: absolute;
    left: 0;
    right: 0;
    top: 34%;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.dash-hero__underwater:has(.dash-hero__scene--scuba) .dash-hero__bubbles {
    display: none;
}

.dash-hero__underwater .dash-hero__bubbles {
    inset: 0;
}

.dash-hero__waterline {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 34%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(46, 230, 255, .05) 70%, transparent 100%);
    overflow: hidden;
}

.dash-hero__wave-scroll {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    width: 200%;
    height: 38px;
    will-change: transform;
}
.dash-hero__wave-scroll--back {
    color: rgba(255, 255, 255, .13);
    animation: mixup-wave-scroll 7s linear infinite;
}
.dash-hero__wave-scroll--front {
    color: rgba(46, 230, 255, .17);
    animation: mixup-wave-scroll 5s linear infinite reverse;
    bottom: 2px;
    height: 34px;
    opacity: .9;
}
.dash-hero__wave-tile {
    flex: 0 0 50%;
    width: 50%;
    height: 100%;
    display: block;
}

/* Scène Lottie — poissons autour du centre */
.dash-hero__scene {
    position: absolute;
    left: 54%;
    top: 52%;
    width: min(280px, 46vw);
    height: min(160px, 38vh);
    transform: translate(-50%, -50%);
    animation: mixup-scene-float 5s ease-in-out infinite;
}

.dash-hero__lottie {
    position: absolute;
    opacity: .88;
    filter: drop-shadow(0 6px 16px rgba(0, 16, 32, .4));
}
.dash-hero__lottie svg {
    width: 100% !important;
    height: 100% !important;
}

.dash-hero__underwater:has(.dash-hero__fish-lanes) {
    overflow: hidden;
}

.dash-hero__scene--scuba {
    left: 58%;
    top: 54%;
    width: min(180px, 28vw);
    height: min(140px, 26vh);
    transform: translate(-50%, -50%);
    animation: mixup-scene-float 7s ease-in-out infinite;
    z-index: 2;
}

/* Bancs Lottie — pleine largeur, gouttières hors écran (pas de spawn visible) */
.dash-hero__fish-lanes {
    --fish-comp-w: 2040;
    --fish-visible-w: 1680;
    --fish-gutter: 180;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(
        to right,
        black 4%,
        rgba(0, 0, 0, 0.2) 18%,
        rgba(0, 0, 0, 0.24) 32%,
        rgba(0, 0, 0, 0.26) 38%,
        rgba(0, 0, 0, 0.55) 52%,
        rgba(0, 0, 0, 0.22) 58%,
        rgba(0, 0, 0, 0.55) 64%,
        rgba(0, 0, 0, 0.88) 72%,
        black 80%,
        black 96%
    );
    mask-image: linear-gradient(
        to right,
        black 4%,
        rgba(0, 0, 0, 0.2) 18%,
        rgba(0, 0, 0, 0.24) 32%,
        rgba(0, 0, 0, 0.26) 38%,
        rgba(0, 0, 0, 0.55) 52%,
        rgba(0, 0, 0, 0.22) 58%,
        rgba(0, 0, 0, 0.55) 64%,
        rgba(0, 0, 0, 0.88) 72%,
        black 80%,
        black 96%
    );
}

.dash-hero__fish-lane {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: clamp(36px, 5.5vw, 52px);
    top: var(--lane-top, 50%);
    transform: translateY(-50%);
    overflow: hidden;
    opacity: var(--fish-o, .7);
    pointer-events: none;
}

.dash-hero__fish-lane--top {
    --lane-top: 22%;
}

.dash-hero__fish-lane--mid {
    --lane-top: 52%;
    z-index: 0;
}

.dash-hero__fish-lane--bot {
    --lane-top: 78%;
}

.dash-hero__lottie--fish-group {
    position: relative;
    width: calc(100% * var(--fish-comp-w, 2040) / var(--fish-visible-w, 1680));
    max-width: none;
    margin-left: calc(-100% * var(--fish-gutter, 180) / var(--fish-visible-w, 1680));
    height: 100%;
    overflow: visible;
}

.dash-hero__lottie--fish-group svg {
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
}

/* Plongeur — premier plan, les bancs du couloir central passent derrière */
.dash-hero__scene--scuba .dash-hero__lottie--diver {
    left: 50%;
    top: 52%;
    width: min(148px, 30vw);
    height: min(111px, 22vw);
    transform: translate(-50%, -50%);
    animation: mixup-aqua-diver-drift 9s ease-in-out infinite;
    opacity: .97;
    z-index: 3;
    filter: drop-shadow(0 8px 20px rgba(0, 16, 32, .45));
}

/* Texte hero : laisser le centre libre pour l'aquarium */
@media (min-width: 768px) {
    .dash-hero:has(.dash-hero__scene--scuba) .dash-hero__greeting {
        max-width: 34%;
    }
    .dash-hero:has(.dash-hero__scene--scuba) .dash-hero__content {
        align-items: flex-start;
    }
}

.dash-hero__fish-svg {
    position: absolute;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 4px 10px rgba(0, 16, 32, .35));
    animation: mixup-fish-wiggle 3.5s ease-in-out infinite;
}

.dash-hero__lottie--fish-a {
    left: 2%;
    top: 8%;
    width: 52px;
    height: 52px;
}
.dash-hero__lottie--fish-b {
    right: 0;
    top: 42%;
    width: 46px;
    height: 46px;
}
.dash-hero__lottie--shark {
    left: 38%;
    top: -6%;
    width: 62px;
    height: 62px;
    opacity: .75;
}
.dash-hero__lottie--octopus {
    left: 30%;
    bottom: 0;
    width: 58px;
    height: 58px;
}

/* Profondeur (bas de bannière) */
.dash-hero__depth-floor {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28%;
    background: linear-gradient(0deg, rgba(0, 8, 18, .45) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.dash-hero__content {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.dash-hero__content:has(.dash-hero__head) {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: .85rem;
}
.dash-hero__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}
.dash-hero__head .role-badge {
    flex-shrink: 0;
    margin-top: .15rem;
}

.dash-hero__greeting > * {
    animation: mixup-hero-content-in .65s cubic-bezier(.22, 1, .36, 1) backwards;
}
.dash-hero__greeting > *:nth-child(1) { animation-delay: .06s; }
.dash-hero__greeting > *:nth-child(2) { animation-delay: .14s; }
.dash-hero__greeting > *:nth-child(3) { animation-delay: .22s; }

.dash-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .55rem;
    padding: .32rem .72rem .32rem .55rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .96);
    background: rgba(255, 255, 255, .24);
    border: 1px solid rgba(255, 255, 255, .38);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 14px rgba(0, 10, 24, .22);
}
.dash-hero__eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hero-accent);
    box-shadow: 0 0 0 0 rgba(255, 107, 61, .55);
    animation: mixup-sonar-pulse 2.8s ease-out infinite;
}

.mixup-help-hero { --hero-accent: var(--cyan); }
.mixup-hub-hero { --hero-accent: #ffc44b; }
.admin-hero { --hero-accent: #ffc44b; }
.settings-hero { --hero-accent: #2ee6ff; }

body.settings-shell .card,
body.staff-nav-sidebar[data-staff-area="settings"] .account-shell {
    border-radius: 16px;
}
body.staff-nav-sidebar[data-staff-area="settings"] .account-shell--staff,
body.settings-shell .account-shell--staff {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--lagon-surface-border);
    background: var(--lagon-surface);
    box-shadow: var(--lagon-surface-shadow);
}
[data-theme="lagoon-light"] body.settings-shell .account-shell--staff,
[data-theme="lagoon-light"] body.staff-nav-sidebar[data-staff-area="settings"] .account-shell--staff {
    background: var(--lagon-surface);
    border-color: var(--lagon-surface-border);
    box-shadow: var(--lagon-surface-shadow);
}

/* --- Compte (onglets mixup) --- */
.mixup-account {
    overflow: hidden;
}
.mixup-account-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--lagon-inset-border, rgba(46, 230, 255, .1));
    background: var(--lagon-tabs, rgba(10, 30, 46, .48));
}
[data-theme="lagoon-light"] .mixup-account-tabs {
    background: var(--lagon-tabs);
    border-bottom-color: var(--lagon-inset-border);
}
.mixup-account-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .9rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: .86rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.mixup-account-tab__ico {
    display: inline-flex;
    opacity: .85;
}
.mixup-account-tab:hover,
.mixup-account-tab:focus-visible {
    color: var(--text);
    border-color: rgba(46, 230, 255, .15);
    background: rgba(46, 230, 255, .08);
    outline: none;
}
.mixup-account-tab.is-active {
    color: var(--cyan);
    border-color: rgba(46, 230, 255, .28);
    background: linear-gradient(135deg, rgba(46, 230, 255, .2), rgba(46, 230, 255, .06));
    box-shadow: inset 0 0 0 1px rgba(46, 230, 255, .12);
}
.mixup-account-tab.is-active .mixup-account-tab__ico {
    opacity: 1;
}
.mixup-account-panels {
    padding: 1.35rem 1.4rem 1.5rem;
}
.mixup-account-panel__head {
    margin-bottom: 1.15rem;
}
.mixup-account-panel__head .mixup-panel__title {
    margin: 0 0 .35rem;
}
.mixup-account-panel__lead {
    margin: 0;
    font-size: .88rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.mixup-account-panel__lead strong {
    color: var(--text);
    font-weight: 600;
}
.mixup-account-panel .account-form {
    gap: .85rem;
    max-width: 640px;
}
.mixup-account-panel .form-grid-2 {
    align-items: start;
}
.mixup-account-panel .account-form-actions {
    margin-top: .35rem;
    padding-top: .85rem;
    border-top: 1px solid rgba(46, 230, 255, .1);
}
.mixup-account-panel input[type=text],
.mixup-account-panel input[type=email],
.mixup-account-panel input[type=password],
.mixup-account-panel input[type=search],
.mixup-account-panel input[type=date],
.mixup-account-panel input[type=tel] {
    background: var(--bg-0);
    border-color: var(--border);
    color: var(--text);
}

.mixup-account-panel input:-webkit-autofill,
.mixup-account-panel input:-webkit-autofill:hover,
.mixup-account-panel input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-0) inset;
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    transition: background-color 99999s ease-out;
}
.mixup-account-block {
    margin-top: 1.25rem;
    padding: 1rem 1.05rem;
    border-radius: 14px;
    border: 1px solid var(--lagon-inset-border, rgba(46, 230, 255, .1));
    background: var(--lagon-inset, rgba(10, 30, 46, .38));
}
.mixup-account-block__title {
    margin: 0 0 .65rem;
    font-size: .95rem;
    font-weight: 600;
}
.mixup-account-block--danger {
    border-color: rgba(255, 120, 120, .22);
    background: rgba(255, 80, 80, .05);
}

.mixup-account-panel .form-grid-3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 12px;
}

.mixup-account-panel select {
    width: 100%;
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background: var(--lagon-inset, rgba(10, 30, 46, .38));
    color: var(--text);
    padding: 10px 12px;
}

.mixup-account-panel input[type="date"],
.mixup-account-panel input[type="tel"] {
    width: 100%;
    min-height: 44px;
}

.mixup-account-panel input[type="date"]::-webkit-date-and-time-value {
    color: var(--text);
}

.account-devices-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.account-device-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--border-soft);
    background: var(--lagon-inset, rgba(10, 30, 46, .38));
}

.account-device-card--current {
    border-color: rgba(62, 207, 212, .35);
    background: rgba(62, 207, 212, .06);
}

.account-device-card__main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.account-device-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(62, 207, 212, .22);
    background: rgba(62, 207, 212, .08);
    color: var(--cyan);
    flex-shrink: 0;
}

.account-device-card__body {
    min-width: 0;
}

.account-device-card__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.account-device-badge {
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.account-device-meta {
    margin: 0;
    line-height: 1.4;
}

.account-device-revoke {
    flex-shrink: 0;
}

.account-delete-panel {
    display: grid;
    gap: .75rem;
    align-content: start;
}

.account-delete-warning {
    display: grid;
    gap: .45rem;
    grid-template-columns: auto 1fr;
    align-items: start;
}

.account-delete-warning__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 80, 80, .14);
    color: #ff8a80;
    border: 1px solid rgba(255, 120, 120, .28);
}

.account-delete-warning__title {
    margin: 0;
    color: #ff8a80;
    font-size: .95rem;
    line-height: 1.3;
    grid-column: 2;
}

.account-delete-warning__lead {
    margin: 0;
    grid-column: 2;
    line-height: 1.4;
}

.account-delete-form {
    align-content: start;
    max-width: 420px;
}

.account-delete-form .field {
    align-self: start;
}

.account-delete-form input[type=password] {
    height: auto;
    min-height: 44px;
    max-height: 44px;
    align-self: start;
}

.account-delete-actions {
    justify-content: flex-start;
    gap: 8px;
    margin-top: 0;
    padding-top: .5rem;
}

.account-devices-count {
    margin: 0 0 10px;
}

.mixup-account-panel .account-status {
    margin: 0 0 1rem;
    padding: .65rem .85rem;
    border-radius: 10px;
    background: rgba(46, 230, 255, .06);
    border: 1px solid rgba(46, 230, 255, .12);
    font-size: .88rem;
}
.mixup-account-panel .two-factor-methods {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.mixup-account-panel .two-factor-option {
    padding: .75rem .85rem;
    border-radius: 12px;
    border: 1px solid var(--lagon-inset-border, rgba(46, 230, 255, .1));
    background: var(--lagon-inset, rgba(10, 30, 46, .38));
}
[data-theme="lagoon-light"] .mixup-account-panel .two-factor-option {
    background: var(--lagon-inset);
    border-color: var(--lagon-inset-border);
}
.mixup-account-panel .totp-qr-wrap {
    margin: .5rem 0 1rem;
    padding: .85rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .95);
    display: inline-block;
}
@media (max-width: 640px) {
    .mixup-account-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .65rem;
    }
    .mixup-account-tab {
        flex-shrink: 0;
    }
    .mixup-account-panels {
        padding: 1.1rem 1rem 1.25rem;
    }
    .mixup-account-panel .form-grid-3 {
        grid-template-columns: 1fr;
    }
    .account-delete-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

.dash-hero__greeting h1 {
    margin: 0 0 .45rem;
    font-size: clamp(1.45rem, 3.5vw, 2.05rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.12;
    letter-spacing: -.02em;
    text-shadow: 0 2px 24px rgba(0, 20, 40, .35);
}

.dash-hero__name {
    background: linear-gradient(120deg, #fff 20%, #9ef0ff 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dash-hero__sub {
    margin: 0;
    max-width: 42ch;
    color: rgba(255, 255, 255, .82);
    font-size: .96rem;
    line-height: 1.5;
}

.dash-hero__meta .pill {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .2);
    color: #fff;
    backdrop-filter: blur(8px);
}
.dash-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    width: 100%;
}
.admin-hero .dash-hero__meta .support-hero-pill--muted {
    color: rgba(255, 255, 255, .72);
    font-weight: 500;
}
.admin-hero .dash-hero__meta .support-hero-pill--link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    text-decoration: none;
    color: #fff;
    transition: background .15s ease, border-color .15s ease;
}
.admin-hero .dash-hero__meta .support-hero-pill--link:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .35);
}
.admin-hero .dash-hero__meta .support-status--open {
    background: rgba(56, 189, 248, .22);
    border-color: rgba(56, 189, 248, .45);
    color: #bae6fd;
}
.admin-hero .dash-hero__meta .support-status--answered {
    background: rgba(74, 222, 128, .18);
    border-color: rgba(74, 222, 128, .4);
    color: #bbf7d0;
}
.admin-hero .dash-hero__meta .support-status--closed {
    background: rgba(148, 163, 184, .18);
    border-color: rgba(148, 163, 184, .35);
    color: rgba(255, 255, 255, .78);
}
.admin-hero .dash-hero__meta .support-priority--urgent {
    background: rgba(251, 146, 60, .22);
    border-color: rgba(251, 146, 60, .45);
    color: #fed7aa;
}
[data-support-priority-pill][hidden],
.support-priority--urgent[hidden] { display: none !important; }

/* Badges rôle (Développeur, Gérant…) — plus lisibles sur hero */
.dash-hero__content .role-badge {
    padding: .35rem .85rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 14px rgba(0, 10, 24, .2);
}
.dash-hero__content .role-developer {
    background: rgba(255, 107, 61, .32);
    color: #ffd4c2;
    border: 1px solid rgba(255, 107, 61, .58);
}
.dash-hero__content .role-admin {
    background: rgba(46, 230, 255, .26);
    color: #c8fbff;
    border: 1px solid rgba(46, 230, 255, .52);
}
.dash-hero__content .role-user {
    background: rgba(43, 212, 160, .26);
    color: #b8f5de;
    border: 1px solid rgba(43, 212, 160, .5);
}

@media (prefers-reduced-motion: reduce) {
    .dash-hero__caustics,
    .dash-hero__bubble,
    .dash-hero__wave-scroll,
    .dash-hero__scene,
    .dash-hero__fish-lane,
    .dash-hero__scene--scuba .dash-hero__lottie--diver,
    .dash-hero__eyebrow::before,
    .dash-hero__greeting > * {
        animation: none !important;
    }
    .dash-hero__scene {
        transform: translate(-50%, -50%);
    }
    .dash-hero__scene--scuba .dash-hero__lottie--diver {
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 900px) {
    .dash-hero__scene {
        width: min(220px, 52vw);
        height: 130px;
        left: 58%;
        opacity: .75;
    }
    .dash-hero__scene--scuba {
        left: 58%;
        top: 54%;
        width: min(150px, 34vw);
        height: 120px;
    }
    .dash-hero:has(.dash-hero__scene--scuba) .dash-hero__greeting {
        max-width: 44%;
    }
    .dash-hero__fish-lane--mid {
        display: none;
    }
    .dash-hero__lottie--octopus {
        display: none;
    }
}

@media (max-width: 575px) {
    .dash-hero {
        padding: 1.5rem 1.25rem 2.65rem;
        border-radius: 18px;
    }
    .dash-hero__waterline {
        height: 34%;
    }
    .dash-hero__underwater {
        top: 28%;
    }
    .dash-hero__bubble:nth-child(n+4) { display: none; }
    .dash-hero__scene {
        left: 62%;
        width: 170px;
        height: 110px;
        opacity: .55;
    }
    .dash-hero__scene--scuba {
        left: 56%;
        top: 52%;
        width: min(130px, 38vw);
        height: 105px;
        opacity: .92;
    }
    .dash-hero:has(.dash-hero__scene--scuba) .dash-hero__greeting {
        max-width: 52%;
    }
    .dash-hero__scene--scuba .dash-hero__lottie--diver {
        width: 108px;
        height: 81px;
    }
    .dash-hero__fish-lane--mid,
    .dash-hero__fish-lane--top:nth-child(2),
    .dash-hero__fish-lane--bot:nth-child(6) {
        display: none;
    }
    .dash-hero__lottie--shark,
    .dash-hero__lottie--fish-b {
        display: none;
    }
    .dash-hero__lottie--fish-a {
        width: 40px;
        height: 40px;
    }
}

/* --- Resume card --- */
.resume-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(46,230,255,.08), rgba(255,107,61,.06));
    border: 1px solid rgba(46,230,255,.2);
    box-shadow: var(--shadow-glow);
    text-decoration: none;
    color: inherit;
    transition: transform .2s, border-color .2s;
}
.resume-card:hover {
    transform: translateY(-2px);
    border-color: rgba(46,230,255,.45);
    color: inherit;
}
.resume-card__icon {
    flex-shrink: 0;
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--cyan), #1a9eb8);
    color: #fff;
}
.resume-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.resume-card__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cyan); }
.resume-card__title { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resume-card__meta { font-size: .82rem; color: var(--text-muted); }
.resume-card__remaining { color: var(--coral); font-weight: 700; }
.resume-card__btn { flex-shrink: 0; }

@media (max-width: 575px) {
    .resume-card { flex-wrap: wrap; }
    .resume-card__btn { width: 100%; justify-content: center; }
}

/* --- Funnel stats --- */
.funnel-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 991px) { .funnel-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .funnel-strip { grid-template-columns: 1fr; } }

.funnel-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem 1.1rem;
    border-radius: 16px;
    background:
        linear-gradient(160deg, rgba(20, 55, 78, .75), rgba(12, 34, 50, .88));
    border: 1px solid rgba(46, 230, 255, .12);
    box-shadow: 0 10px 28px rgba(0, 8, 20, .22);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

[data-theme="lagoon-light"] .funnel-card {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow);
}
[data-theme="lagoon-light"] .funnel-card__label {
    color: var(--text-dim);
}
.funnel-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--funnel-accent, var(--cyan));
    opacity: .7;
}
.funnel-card:hover {
    transform: translateY(-2px);
    border-color: var(--funnel-accent, var(--cyan));
    color: inherit;
}
.funnel-card--cyan { --funnel-accent: var(--cyan); }
.funnel-card--coral { --funnel-accent: var(--coral); }
.funnel-card--ok { --funnel-accent: var(--ok); }
.funnel-card--warn { --funnel-accent: var(--warn); }

.funnel-card__icon {
    flex-shrink: 0;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--funnel-accent) 16%, transparent);
    color: var(--funnel-accent);
}
.funnel-card__number {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.funnel-card__number--text { font-size: 1.05rem; }
.funnel-card__label { display: block; font-size: .82rem; font-weight: 600; color: var(--text-dim); }
.funnel-card__hint { display: block; font-size: .72rem; color: var(--funnel-accent); margin-top: .1rem; }

/* --- Course flip cards --- */
.mixup-section { margin-bottom: 2rem; }
.mixup-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.1rem;
    margin: 0 0 1rem;
}
.mixup-see-all { margin-top: .75rem; }

.courses-grid-flip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 1rem;
}
.courses-grid-flip--full { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }

.course-flip {
    position: relative;
    perspective: 1100px;
}
.course-flip__inner {
    position: relative;
    width: 100%;
    transition: transform .55s cubic-bezier(.16, 1, .3, 1);
    transform-style: preserve-3d;
}
.course-flip.is-flipped .course-flip__inner { transform: rotateY(180deg); }

.course-flip__front,
.course-flip__back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 16px;
}
.course-flip__front {
    position: relative;
    z-index: 2;
    transform: rotateY(0deg);
}
.course-flip.is-flipped .course-flip__front {
    pointer-events: none;
}

.course-card-mixup {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem 2.5rem 1rem 1rem;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    transition: transform .25s, border-color .25s;
}
.course-card-mixup:hover {
    transform: translateY(-3px);
    border-color: rgba(46,230,255,.4);
    color: inherit;
}
.course-card-mixup.is-done { border-color: rgba(43,212,160,.35); }
.course-card-mixup__badge {
    align-self: flex-start;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: rgba(46,230,255,.12);
    color: var(--cyan);
}
.course-card-mixup.is-done .course-card-mixup__badge {
    background: rgba(43,212,160,.15);
    color: var(--ok);
}
.course-card-mixup__icon { color: var(--cyan); }
.course-card-mixup h3 { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.course-card-mixup__teaser { margin: 0; }
.course-card-mixup__progress { margin-top: .35rem; }

.course-flip__back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 1rem 1rem 1rem;
    background: linear-gradient(145deg, var(--bg-2), var(--surface));
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.course-flip__back-head {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-bottom: .45rem;
    flex-shrink: 0;
}
.course-flip__back-head h4 {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: .95rem;
    line-height: 1.35;
}
.course-flip__summary {
    font-size: .88rem;
    color: var(--text-dim);
    margin: 0 0 .85rem;
    line-height: 1.5;
}
.course-flip__back-btn {
    position: static;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    margin-top: .05rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.course-flip__toggle {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 3;
    width: 28px; height: 28px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: color .15s, border-color .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.course-flip__toggle .ico { pointer-events: none; }
.course-flip__toggle:hover { color: var(--cyan); border-color: var(--cyan); }
.course-flip.is-flipped .course-flip__toggle { opacity: 0; pointer-events: none; }

/* --- Help --- */
.help-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 900px) { .help-layout { grid-template-columns: 1fr; } }

.faq-item {
    border-bottom: 1px solid var(--border-soft);
    padding: .65rem 0;
}
.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    padding-right: 1.5rem;
    position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 0;
    color: var(--cyan);
    font-weight: 700;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: .5rem 0 0; color: var(--text-dim); font-size: .92rem; line-height: 1.55; }

.help-form textarea { min-height: 120px; resize: vertical; }

/* --- Certificate --- */
.cert-page {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 0 0 1.5rem;
    box-sizing: border-box;
}
.cert-toolbar { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; width: 100%; }

.cert-sheet {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid #1a6b8a;
    box-shadow: 0 20px 60px rgba(8, 40, 60, .2);
    box-sizing: border-box;
    color-scheme: light;
}
.cert-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.9)),
        radial-gradient(ellipse at 70% 20%, rgba(46,230,255,.35), transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(111,200,255,.3), transparent 55%),
        linear-gradient(160deg, #7ec8e3 0%, #b8e4f5 40%, #dff4fc 100%);
}
.cert-inner {
    position: relative;
    z-index: 1;
    padding: 2.5rem 2rem 2rem;
    text-align: center;
    color: #1a3a4a;
}
.cert-logo { margin: 0 auto 1rem; display: block; object-fit: contain; }
.cert-eyebrow { font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: #1a6b8a; margin: 0; }
.cert-header h1 { font-size: 1.75rem; color: #0a3040; margin: .25rem 0; letter-spacing: .02em; }
.cert-subtitle { font-size: 1rem; color: #4a7080; margin: 0 0 1.5rem; }
.cert-content {
    background: rgba(255,255,255,.75);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    margin: 0 auto 1.5rem;
    max-width: 520px;
    border: 1px solid rgba(26,107,138,.15);
}
.cert-intro { margin: 0; font-size: .9rem; color: #5a7080; }
.cert-name { font-size: 1.65rem; font-weight: 700; font-style: italic; margin: .35rem 0; color: #0a2030; }
.cert-text { margin: 0 0 .75rem; font-size: .92rem; }
.cert-level {
    display: inline-block;
    padding: .35rem 1rem;
    border-radius: 999px;
    background: rgba(46,230,255,.2);
    color: #0a5068;
    font-weight: 700;
    margin: 0 0 .75rem;
}
.cert-club {
    margin: .5rem auto;
    padding: .65rem 1rem;
    border-radius: 12px;
    max-width: 320px;
    font-size: .85rem;
    background: rgba(255,107,61,.12);
    border: 1px solid rgba(255,107,61,.25);
}
.cert-meta-label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: #6a8090; margin-bottom: .15rem; }
.cert-number { margin: 1rem 0 0; font-size: .78rem; color: #6a8090; font-family: monospace; letter-spacing: .03em; }
.cert-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 .5rem;
}
.cert-qr-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.cert-footer-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    width: 100%;
    text-align: left;
}
.cert-verify-meta { flex: 1; }
.cert-qr-link {
    display: inline-block;
    padding: .65rem;
    background: #fff;
    border-radius: 14px;
    border: 2px solid rgba(26,107,138,.22);
    box-shadow: 0 8px 24px rgba(8, 40, 60, .12);
    line-height: 0;
    transition: transform .15s ease, box-shadow .15s ease;
}
.cert-qr-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(8, 40, 60, .16);
}
.cert-qr {
    display: block;
    width: 168px;
    height: 168px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.cert-verify-link {
    color: #1a6b8a;
    text-decoration: none;
    font-weight: 700;
}
.cert-verify-link:hover { text-decoration: underline; }
.cert-verify-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: #1a6b8a; margin: .5rem 0 0; }
.cert-date, .cert-validity { margin: .15rem 0; font-size: .82rem; color: #4a6070; }
.cert-sign { text-align: right; flex: 1; }
.cert-sign-name { font-weight: 700; margin: 0; font-size: .95rem; }
.cert-sign-line { margin: .1rem 0; font-size: .75rem; color: #5a7080; }
.cert-platform { margin: 1.5rem 0 0; font-size: .78rem; color: #6a8090; }

.cert-verify-result { text-align: center; padding: 2rem; }
.cert-verify-result .account-form-actions { justify-content: center; }
.cert-verify-ok { color: var(--ok); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.cert-verify-ko { color: var(--danger); font-weight: 600; }
.cert-verify-dl { text-align: left; max-width: 360px; margin: 1rem auto; }
.cert-verify-dl dt { font-size: .75rem; color: var(--text-muted); margin-top: .65rem; }
.cert-verify-dl dd { margin: .1rem 0 0; font-weight: 600; }

.mixup-cert-link { margin-left: .35rem; font-weight: 600; }
.mixup-page-head { margin-bottom: 1.25rem; }
.mixup-student-hero { margin-bottom: 1.25rem; }
.mixup-progress-top { margin-bottom: 1.25rem; }
.mixup-banner { margin-bottom: 1rem; }
.mixup-table-card { padding: 0; overflow: hidden; }

/* --- Admin / dev refresh --- */
body.admin-shell .card,
body.dev-shell .card {
    border-radius: 16px;
    border-color: var(--border-soft);
    box-shadow: var(--shadow);
}
body.admin-shell .page-head h1,
body.dev-shell .page-head h1 {
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
}
body.admin-shell .stat-grid,
body.dev-shell .stat-grid {
    gap: 1rem;
}
body.admin-shell .stat-card,
body.dev-shell .stat-card {
    border-radius: 14px;
    border-left: 3px solid var(--cyan);
    background: linear-gradient(135deg, rgba(46,230,255,.06), transparent);
}

@media print {
    .no-print { display: none !important; }
    .topbar, .site-footer, .user-tabbar, .breadcrumb, .skip-link, .pwa-install-banner,
    .flash, .student-preview-banner, .access-expiry-banner, .staff-sidebar, .staff-nav-toggle,
    .staff-shell > .staff-sidebar { display: none !important; }
    body { background: #fff !important; }
    .main-content, .site-gutter, .staff-main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
    .cert-page { padding: 0; max-width: none; }
    .cert-sheet { box-shadow: none; border-width: 2px; page-break-inside: avoid; }
    .cert-qr-link { box-shadow: none; border-width: 1px; padding: .25rem; }
    .cert-verify-link { color: #1a6b8a !important; text-decoration: none !important; }
}

/* --- Tabbar 5 onglets --- */
.app-user .user-tabbar {
    grid-template-columns: repeat(5, 1fr);
}
.app-user .user-tab-label {
    font-size: .62rem;
}
.topbar-user .theme-toggle { margin-right: .35rem; }
.nav-theme-toggle { margin-right: .5rem; }

/* =====================================================================
   MIXUP UI — refonte visuelle globale (visible vs anaya_formation)
   ===================================================================== */

.mixup-ui .topbar {
    background: rgba(8, 26, 46, .88);
    border-bottom-color: rgba(46, 230, 255, .15);
    box-shadow: 0 4px 24px rgba(0, 8, 24, .35);
}

[data-theme="lagoon-light"] body.mixup-ui .topbar {
    background: rgba(237, 244, 249, .94);
    border-bottom-color: var(--border-soft);
    box-shadow: 0 2px 14px rgba(8, 40, 60, .07);
}

.mixup-ui .mainnav a.is-active {
    background: linear-gradient(135deg, rgba(46,230,255,.18), rgba(46,230,255,.08));
    color: var(--cyan);
    font-weight: 600;
}

.mixup-ui .btn-cta {
    background: linear-gradient(135deg, var(--coral), #ff8a63);
    border: none;
    box-shadow: 0 4px 16px rgba(255, 107, 61, .35);
    font-weight: 700;
}
.mixup-ui .btn-cta:hover {
    box-shadow: 0 6px 22px rgba(255, 107, 61, .45);
    transform: translateY(-1px);
}

.mixup-ui .card {
    border-radius: 18px;
    border-color: rgba(46, 230, 255, .12);
    box-shadow: 0 8px 32px rgba(0, 8, 24, .25);
}

.mixup-ui .app-user .user-tabbar {
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: min(480px, calc(100% - 24px));
    max-width: 480px;
    border-radius: 999px;
    border: 1px solid rgba(46, 230, 255, .2);
    background: rgba(8, 26, 46, .92);
    padding: 6px 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .4), 0 0 0 1px rgba(46, 230, 255, .08);
}

[data-theme="lagoon-light"] body.mixup-ui .app-user .user-tabbar {
    background: rgba(237, 244, 249, .96);
    border-color: var(--border);
    box-shadow: var(--shadow);
}

[data-theme="lagoon-light"] .mixup-ui .card {
    background: var(--surface);
    border-color: var(--border-soft);
    box-shadow: var(--shadow);
}

.mixup-ui .user-tab.is-active {
    background: linear-gradient(135deg, rgba(46,230,255,.2), rgba(46,230,255,.08));
    color: var(--cyan);
    border-radius: 999px;
}

.mixup-ui .app-user .main-content {
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
}

/* --- Auth modernisé --- */
.mixup-auth .auth-card {
    border-radius: 20px;
    border: 1px solid rgba(46, 230, 255, .2);
    background: linear-gradient(160deg, rgba(24, 74, 104, .95), rgba(15, 47, 71, .98));
    box-shadow: 0 20px 60px rgba(0, 8, 24, .5), 0 0 0 1px rgba(46, 230, 255, .1);
    padding: 2rem 1.75rem;
}

[data-theme="lagoon-light"] .mixup-auth .auth-card {
    background: var(--lagon-surface);
    border-color: var(--lagon-surface-border);
    box-shadow: var(--lagon-surface-shadow);
}

.mixup-auth .auth-card h1 {
    font-size: 1.65rem;
    background: linear-gradient(135deg, var(--text), var(--cyan-soft));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mixup-auth .field input {
    border-radius: 12px;
    border-color: rgba(46, 230, 255, .25);
    background: rgba(8, 26, 46, .5);
    padding: .75rem 1rem;
}

[data-theme="lagoon-light"] .mixup-auth .field input {
    background: #f8fcff;
    border-color: var(--border);
}

/* --- Landing --- */
.mixup-landing .feature-card {
    border-radius: 18px;
    border: 1px solid rgba(46, 230, 255, .15);
    background: linear-gradient(145deg, rgba(24,74,104,.6), rgba(15,47,71,.8));
    transition: transform .25s, border-color .25s;
}
.mixup-landing .feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(46, 230, 255, .35);
}

.mixup-landing .hero h1 .grad {
    background: linear-gradient(135deg, var(--cyan), var(--coral));
    -webkit-background-clip: text;
    background-clip: text;
}

/* --- Hub formations --- */
.level-hub-grid-mixup {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 1.25rem;
}

.level-hub-card-mixup {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding: 1.5rem;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(24,74,104,.85), rgba(15,47,71,.95));
    border: 1px solid rgba(46, 230, 255, .18);
    box-shadow: 0 12px 40px rgba(0, 8, 24, .3);
    text-decoration: none;
    color: inherit;
    transition: transform .25s, border-color .25s, box-shadow .25s;
    position: relative;
    overflow: hidden;
}

.level-hub-card-mixup::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cyan), var(--coral));
    opacity: .8;
}

.level-hub-card-mixup:hover {
    transform: translateY(-5px);
    border-color: rgba(46, 230, 255, .4);
    box-shadow: 0 16px 48px rgba(46, 230, 255, .12);
    color: inherit;
}

.level-hub-card-mixup h2 { margin: 0; font-size: 1.25rem; }
.level-hub-card-mixup__badge {
    align-self: flex-start;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: rgba(46, 230, 255, .15);
    color: var(--cyan);
}
.level-hub-card-mixup__icon { color: var(--cyan); opacity: .9; }
.level-hub-card-mixup__cta {
    margin-top: auto;
    font-weight: 700;
    color: var(--coral);
    font-size: .9rem;
}

/* --- Lecteur cours --- */
.mixup-ui .course-reader-head {
    padding: 1.25rem 1.5rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(46,230,255,.08), rgba(255,107,61,.05));
    border: 1px solid rgba(46, 230, 255, .15);
    margin-bottom: 1.25rem;
}

.mixup-ui .reader-toolbar {
    border-radius: 16px;
    border-color: rgba(46, 230, 255, .12);
}

.mixup-ui .progressbar span {
    background: linear-gradient(90deg, var(--cyan), var(--coral));
}

.mixup-ui .account-shell {
    border-radius: 20px;
    overflow: hidden;
    border-color: rgba(46, 230, 255, .15);
}
.mixup-ui .account-shell:not(.account-shell--staff) {
    padding: 0;
    background: var(--lagon-surface, linear-gradient(155deg, rgba(18, 52, 74, .9), rgba(12, 36, 52, .94)));
    border-color: var(--lagon-surface-border, rgba(46, 230, 255, .15));
}
.mixup-ui .account-shell:not(.account-shell--staff) .mixup-account-panels {
    padding: 1rem 1.15rem 1.25rem;
}

.mixup-ui .qcm-mode {
    border-radius: 18px;
    border-top: 3px solid var(--cyan);
}

.mixup-hub-hero { margin-bottom: 1.5rem; }

/* =====================================================================
   Menu Aide (dropdown nav — opaque)
   ===================================================================== */
.help-menu {
    position: relative;
    display: inline-flex;
    z-index: 1;
}

.help-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-dim);
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s;
}

.help-menu__trigger:hover,
.help-menu__trigger.is-active,
.help-menu.is-open .help-menu__trigger {
    color: var(--text);
    background: rgba(46, 230, 255, .12);
    border-color: rgba(46, 230, 255, .28);
}

.help-menu__chevron {
    display: inline-flex;
    transition: transform .2s ease;
    opacity: .75;
}
.help-menu.is-open .help-menu__chevron {
    transform: rotate(180deg);
}

.help-menu__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 300;
    min-width: 240px;
    padding: .5rem;
    border-radius: 14px;
    background-color: #121c28;
    background-image: none;
    opacity: 1;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .25);
    pointer-events: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.help-menu__panel:not([hidden]) {
    display: block;
}

[data-theme="lagoon-light"] .help-menu__panel {
    background-color: var(--surface);
    background-image: none;
    border-color: var(--border);
    box-shadow: var(--shadow);
}

.help-menu__list {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin: 0;
    padding: 0;
}

.help-menu__row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-radius: 10px;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.help-menu__row:hover,
.help-menu__row:focus-visible {
    background: rgba(46, 230, 255, .1);
    color: var(--cyan);
}

.help-menu__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    color: var(--text-muted);
    flex-shrink: 0;
}
.help-menu__row:hover .help-menu__ico {
    color: var(--cyan);
}

.help-menu__row--all {
    margin-top: .25rem;
    padding-top: .85rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-weight: 600;
}
[data-theme="lagoon-light"] .help-menu__row--all {
    border-top-color: rgba(8, 40, 60, .1);
}

.topbar {
    z-index: 200;
}

/* Nav visiteur (non connecté) — actions alignées à droite */
.topbar-inner:has(.mainnav--guest) {
    grid-template-columns: minmax(0, 1fr) auto;
}
.mainnav--guest {
    justify-self: end;
    grid-column: 2;
    gap: 6px;
    flex-wrap: nowrap;
}
.mainnav-guest-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mainnav-guest-divider {
    width: 1px;
    height: 22px;
    margin: 0 6px;
    background: rgba(255, 255, 255, .12);
    flex-shrink: 0;
}
[data-theme="lagoon-light"] .mainnav-guest-divider {
    background: rgba(8, 40, 60, .12);
}
.mainnav-guest-link {
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--text-dim);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s, background .15s;
}
.mainnav-guest-link:hover,
.mainnav-guest-link.is-active {
    color: var(--text);
    background: rgba(46, 230, 255, .1);
}
.mainnav-guest-link.is-active {
    color: var(--cyan);
}
.mainnav-guest-cta {
    margin-left: 2px;
    white-space: nowrap;
}
.mainnav--guest .nav-theme-toggle {
    margin-right: 0;
}

/* Pleine largeur mixup (aperçu client + élève) */
body.mixup-ui.app-user .main-content > .site-gutter,
body.mixup-ui.app-user .main-content.shell {
    max-width: var(--site-max);
    width: min(var(--site-max), calc(100% - 2 * var(--site-gutter)));
}

body.mixup-ui.app-user .action-tiles.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 900px) {
    body.mixup-ui.app-user .funnel-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    body.mixup-ui.app-user .courses-grid-flip {
        grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    }
}

/* Viewport compact — mobile paysage (largeur >768) + tablettes étroites */
@media (max-width: 960px), (max-height: 520px) and (orientation: landscape) {
    .topbar-inner:has(.mainnav--guest) {
        grid-template-columns: 1fr auto;
    }

    .mainnav--guest {
        grid-column: 1 / -1;
    }

    .mainnav-guest-divider { display: none; }

    .mainnav--guest .mainnav-guest-group--auth {
        width: 100%;
        flex-direction: column;
        gap: 6px;
    }

    .mainnav--guest .mainnav-guest-link,
    .mainnav--guest .mainnav-guest-cta {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .mainnav .help-menu {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .mainnav .help-menu__trigger {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    .mainnav .help-menu__panel {
        position: static;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        min-width: 0;
        margin-top: .25rem;
        padding: .35rem;
        border-radius: 12px;
        border: 1px solid var(--border-soft);
        background: var(--surface-2, var(--bg-2));
        box-shadow: none;
        z-index: auto;
    }

    .mainnav .help-menu__row {
        min-height: 44px;
        padding: .65rem .85rem;
    }

    .mixup-subnav {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-bottom: .85rem;
        padding: .4rem;
    }

    .mixup-subnav::-webkit-scrollbar { display: none; }

    .mixup-subnav__tab {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .staff-nav-alpha-prompt {
        display: none !important;
    }

    .funnel-strip--admin {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .65rem;
    }

    .dash-hero {
        padding: 1.2rem 1.35rem 2rem;
        margin-bottom: .85rem;
    }

    .dash-hero__greeting h1 {
        font-size: clamp(1.2rem, 4vw, 1.55rem);
    }

    .dash-hero__head {
        flex-wrap: wrap;
        gap: .65rem;
    }

    .dash-hero__head .role-badge {
        margin-top: 0;
    }

    .dash-hero:has(.dash-hero__scene--scuba) .dash-hero__greeting {
        max-width: 62%;
    }

    .dash-hero__scene--scuba {
        opacity: .75;
    }

    .mixup-table-panel--formation > .table-scroll {
        overflow-x: visible;
        padding: 0 1rem 1rem;
    }

    .formation-hub-table.table-mobile-cards td.col-num {
        background: rgba(0, 0, 0, .28);
        border-color: rgba(46, 230, 255, .32);
    }

    [data-theme="lagoon-light"] .formation-hub-table.table-mobile-cards tbody tr {
        border-color: rgba(37, 104, 146, .28);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
    }

    [data-theme="lagoon-light"] .formation-hub-table.table-mobile-cards td.col-num {
        background: rgba(255, 255, 255, .72);
        border-color: rgba(37, 104, 146, .32);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
    }

    .formation-hub-table.table-mobile-cards,
    .codes-mobile-table.table-mobile-cards,
    .mixup-security-table.table-mobile-cards,
    .mixup-banned-table.table-mobile-cards {
        min-width: 0;
        width: 100%;
    }

    .mixup-table-panel--codes .table-scroll-codes > .table.table-mobile-cards {
        min-width: 0;
        width: 100%;
    }

    .mixup-table-panel--codes .table-scroll-codes {
        overflow-x: visible;
    }

    .mixup-table-panel--security .table-scroll,
    .mixup-table-panel--banned .table-scroll {
        overflow-x: visible;
    }

    .mixup-table-panel--security .mixup-panel__hint,
    .mixup-table-panel--security .codes-table-wrap,
    .mixup-table-panel--banned .codes-table-wrap {
        padding-inline: 1rem;
    }

    .mixup-security-table th:nth-child(2),
    .mixup-security-table td:nth-child(2),
    .mixup-security-table th:nth-child(3),
    .mixup-security-table td:nth-child(3),
    .mixup-security-table th:nth-child(5),
    .mixup-security-table td:nth-child(5),
    .mixup-security-table .security-types-cell,
    .mixup-security-table td.row-actions,
    .security-ip-cell {
        white-space: normal;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    .security-types-cell .tag-compact {
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    .mixup-security-table.table-mobile-cards td.row-actions,
    .mixup-banned-table.table-mobile-cards td.row-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .mixup-security-table.table-mobile-cards td.row-actions .btn,
    .mixup-security-table.table-mobile-cards td.row-actions > form,
    .mixup-banned-table.table-mobile-cards td.row-actions .btn,
    .mixup-banned-table.table-mobile-cards td.row-actions > form {
        display: flex;
        width: 100%;
        max-width: none;
        min-width: 0;
        box-sizing: border-box;
    }

    .codes-mobile-table.table-mobile-cards td.row-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
        max-width: none;
    }

    .codes-mobile-table.table-mobile-cards td.row-actions .btn[data-edit-code] {
        flex: 1 1 8rem;
        width: auto;
        min-width: 0;
        justify-content: center;
    }

    .codes-mobile-table.table-mobile-cards td.row-actions > form {
        flex: 0 0 auto;
        width: auto;
        margin: 0;
    }

    .codes-mobile-table.table-mobile-cards td.row-actions > form .btn {
        width: auto;
        min-width: 44px;
        min-height: 44px;
        padding: 8px 14px;
        justify-content: center;
    }

    .help-hub__search {
        min-width: 0;
        padding: .75rem .85rem;
    }
}

@media (max-width: 768px) {
    /* Bottom sheet Aide uniquement hors menu mobile (ex. nav invité) */
    .help-menu__panel {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        min-width: 0;
        z-index: 400;
        border-radius: 20px 20px 0 0;
        padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    }

    .mainnav .help-menu__panel {
        position: static;
        border-radius: 12px;
        padding: .35rem;
        margin-top: .25rem;
        box-shadow: none;
        z-index: auto;
    }

    .topbar-inner:has(.mainnav--guest) {
        grid-template-columns: 1fr auto;
    }
    .mainnav--guest {
        grid-column: 1 / -1;
    }
    .mainnav-guest-divider { display: none; }
    .mainnav--guest .mainnav-guest-group--auth {
        width: 100%;
        flex-direction: column;
        gap: 6px;
    }
    .mainnav--guest .mainnav-guest-link,
    .mainnav--guest .mainnav-guest-cta {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    .mainnav .help-menu {
        width: 100%;
    }
    .mainnav .help-menu__trigger {
        width: 100%;
        justify-content: center;
    }
    body.mixup-ui.app-user .action-tiles.grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Subnav pills (admin / dev) */
.mixup-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
    padding: .5rem;
    border-radius: 16px;
    background: rgba(8, 26, 46, .5);
    border: 1px solid rgba(46, 230, 255, .12);
}

[data-theme="lagoon-light"] .mixup-subnav {
    background: var(--lagon-inset);
    border-color: var(--lagon-inset-border);
}

.mixup-subnav__tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.mixup-subnav__tab:hover {
    color: var(--text);
    background: rgba(46, 230, 255, .08);
}
.mixup-subnav__tab.is-active {
    color: var(--cyan);
    background: linear-gradient(135deg, rgba(46,230,255,.18), rgba(46,230,255,.06));
    box-shadow: inset 0 0 0 1px rgba(46, 230, 255, .25);
}
.mixup-subnav__tab--out {
    margin-left: auto;
    color: var(--text-dim);
}

/* Admin panels — grille */
.mixup-admin-panels {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1.25rem;
    align-items: start;
}
.mixup-admin-panels--codes {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 1.25rem;
    align-items: start;
}
.mixup-panel--generate-code {
    padding: 1.25rem 1.35rem 1.35rem;
    align-self: start;
}
.mixup-panel--generate-code .form-generate--stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
}
.mixup-panel--generate-code .form-generate--stack .field-formations,
.mixup-panel--generate-code .form-generate--stack .field-duration,
.mixup-panel--generate-code .form-generate--stack .field,
.mixup-panel--generate-code .form-generate--stack .form-hint {
    grid-column: unset;
}
.mixup-panel--generate-code .form-generate--stack .option-list-inline {
    flex-wrap: wrap;
}
.mixup-panel--generate-code .form-generate--stack .form-generate-actions {
    grid-column: unset;
    grid-row: unset;
    justify-content: flex-start;
    margin-top: .15rem;
}
.mixup-admin-panels--security {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}
.mixup-admin-panels--security > .mixup-security-span-full {
    grid-column: 1 / -1;
}
.mixup-admin-panels--security .mixup-panel--ban-ip {
    max-width: none;
    align-self: stretch;
}
.mixup-admin-panels--security .mixup-table-panel--banned {
    min-width: 0;
    align-self: stretch;
}
.mixup-admin-panels--formation {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}
.mixup-table-panel--formation > .mixup-panel__head-row {
    padding: 1.35rem 1.5rem 1.15rem;
    gap: 1rem;
}
.mixup-table-panel--formation > .mixup-panel__head-row .mixup-panel__title {
    margin: 0;
    padding: 0;
}
.mixup-table-panel--formation > .mixup-panel__head-row .btn {
    flex-shrink: 0;
}
.mixup-table-panel--formation > .mixup-panel__title {
    padding: 1.25rem 1.25rem 0;
}
.formation-create-panel {
    margin: 0 1.5rem 1rem;
    padding: 1.1rem 1.15rem 1.15rem;
    border: 1px solid rgba(46, 230, 255, .18);
    border-radius: 14px;
    background: rgba(46, 230, 255, .05);
}
[data-theme="lagoon-light"] .formation-create-panel {
    background: var(--lagon-inset);
    border-color: var(--lagon-inset-border);
}
.formation-create-panel__title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
}
.formation-create-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}
.formation-create-form__grid .field {
    align-self: start;
}
.formation-create-form__hint {
    grid-column: 1 / -1;
    margin: -.35rem 0 0;
}
.formation-create-form__span {
    grid-column: 1 / -1;
}
.formation-create-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1rem;
}
@media (max-width: 720px) {
    .formation-create-form__grid {
        grid-template-columns: 1fr;
    }
}
.mixup-table-panel--formation > .table-scroll {
    padding: 0 1.5rem 1.35rem;
}
@media (min-width: 1200px) {
    body.staff-nav-sidebar {
        --staff-shell-inset: 10px;
    }
}
.mixup-admin-aside-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}
.mixup-panel__head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1.25rem 1.25rem 0;
}
.mixup-panel__head-row .mixup-panel__title {
    margin: 0;
}
.mixup-table-panel .codes-table-wrap {
    padding: 0 1.25rem 1.25rem;
    min-width: 0;
}
.mixup-table-panel .table-scroll-codes,
.mixup-table-panel .table-scroll {
    overflow-x: auto;
    max-width: 100%;
}
.mixup-table-panel .table-scroll-codes > .table {
    min-width: 0;
    width: 100%;
    table-layout: auto;
}
.mixup-table-panel--codes .table-scroll-codes > .table:not(.table-mobile-cards) {
    min-width: 720px;
}
.mixup-audit-panel .audit-filters,
.mixup-audit-panel .audit-results-meta {
    padding-inline: 1.25rem;
}
.mixup-audit-panel .audit-pagination {
    padding: 0 1.25rem 1.15rem;
}
.mixup-audit-panel .audit-filters {
    padding-top: 1rem;
}
.mixup-audit-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.mixup-audit-panel .codes-table-wrap,
.mixup-audit-panel .table-scroll-logs {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
@media (min-width: 961px) {
    .mixup-audit-table {
        width: 100%;
        table-layout: fixed;
    }
    .mixup-audit-table th:nth-child(1),
    .mixup-audit-table td:nth-child(1) {
        width: 10.5rem;
    }
    .mixup-audit-table th:nth-child(2),
    .mixup-audit-table td:nth-child(2) {
        width: 7.5rem;
    }
    .mixup-audit-table th:nth-child(3),
    .mixup-audit-table td:nth-child(3) {
        width: 11rem;
        max-width: 11rem;
    }
    .mixup-audit-table th:nth-child(4),
    .mixup-audit-table td:nth-child(4) {
        width: auto;
    }
    .mixup-audit-table th:nth-child(5),
    .mixup-audit-table td:nth-child(5) {
        width: 11rem;
    }
    .mixup-audit-table .audit-event-cell {
        line-height: 1.45;
    }
}
.mixup-audit-table .audit-account-cell {
    max-width: 11rem;
    overflow: hidden;
    min-width: 0;
}
.mixup-audit-table .audit-account-cell .log-user-link,
.mixup-audit-table .audit-account-cell .audit-account-email {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hub-audit-desc,
.audit-event-cell {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}
.hub-audit-desc .audit-support-link,
.audit-event-cell a {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.mixup-audit-table td,
.mixup-audit-table th {
    vertical-align: top;
    padding-top: .45rem;
    padding-bottom: .45rem;
}
.security-types-cell {
    max-width: none;
}
.security-types-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    align-items: center;
}
.security-types-cell .tag-compact,
.tag.tag-compact {
    display: inline-block;
    max-width: 10rem;
    margin: 0;
    padding: .12rem .42rem;
    font-size: .66rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.security-ip-cell {
    white-space: nowrap;
    width: 1%;
}
.security-ip-cell .ip-chip {
    white-space: nowrap;
    word-break: keep-all;
}
.mixup-security-table {
    width: 100%;
    table-layout: auto;
}
.mixup-security-table th:nth-child(2),
.mixup-security-table td:nth-child(2),
.mixup-security-table th:nth-child(3),
.mixup-security-table td:nth-child(3),
.mixup-security-table th:nth-child(5),
.mixup-security-table td:nth-child(5) {
    white-space: nowrap;
    width: 1%;
}
.mixup-security-table td {
    vertical-align: middle;
}
.mixup-security-table .security-types-cell {
    overflow-wrap: anywhere;
    min-width: 10rem;
}
.mixup-table-panel--security .mixup-panel__hint {
    padding: 0 1.25rem .35rem;
}
.mixup-table-panel--dev-formation .mixup-panel__head-row--dev-formation {
    align-items: flex-end;
    padding-bottom: .25rem;
}
.mixup-table-panel--dev-formation .mixup-panel__head-copy {
    flex: 1;
    min-width: min(100%, 280px);
}
.mixup-table-panel--dev-formation .mixup-panel__head-row .mixup-panel__title {
    padding: 0;
}
.mixup-table-panel--dev-formation .mixup-panel__hint {
    padding: 0;
    margin: .35rem 0 0;
}
.mixup-table-panel--dev-formation .table-search {
    min-width: min(100%, 260px);
    flex: 0 1 280px;
}
.dev-formation-client {
    font-weight: 600;
    color: var(--text);
}
.dev-formation-table td.row-actions {
    vertical-align: middle;
}
.dev-formation-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .35rem .5rem;
    justify-content: flex-end;
    align-items: center;
    max-width: 100%;
}
.dev-formation-actions > form {
    display: inline-flex;
    margin: 0;
}
.status-idle {
    background: rgba(148, 163, 184, .12);
    color: var(--text-muted);
    border: 1px solid rgba(148, 163, 184, .22);
}
.btn-ok-outline {
    border-color: rgba(52, 211, 153, .45) !important;
    color: #34d399 !important;
}
.btn-ok-outline:hover {
    background: rgba(52, 211, 153, .1) !important;
}
.btn-warn-outline {
    border-color: rgba(251, 191, 36, .45) !important;
    color: #fbbf24 !important;
}
.btn-warn-outline:hover {
    background: rgba(251, 191, 36, .1) !important;
}
@media (max-width: 960px) {
    .mixup-table-panel--dev-formation .mixup-panel__head-row--dev-formation {
        align-items: stretch;
    }
    .mixup-table-panel--dev-formation .table-search {
        flex: 1 1 100%;
        max-width: none;
    }
    .dev-formation-table.table-mobile-cards td.row-actions .dev-formation-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .dev-formation-table.table-mobile-cards td.row-actions .dev-formation-actions .btn {
        width: 100%;
    }
}
.maintenance-dev-card.mixup-panel {
    margin-bottom: 1.25rem;
    padding: .45rem .75rem;
}
.maintenance-dev-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .85rem;
    flex-wrap: wrap;
}
.maintenance-dev-bar__status {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    flex: 1 1 220px;
}
.maintenance-dev-bar__ico {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--text-muted);
    opacity: .85;
}
.maintenance-dev-bar__title {
    display: block;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
}
.maintenance-dev-bar__hint {
    display: block;
    font-size: .76rem;
    line-height: 1.25;
    margin-top: .1rem;
}
.maintenance-dev-bar__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
}
.maintenance-dev-card .maintenance-dev-form {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: .5rem;
    margin: 0;
}
.maintenance-dev-card .maintenance-dev-reason {
    display: block;
    margin: 0;
    min-width: 0;
    flex: 0 1 auto;
}
.maintenance-dev-card .maintenance-dev-reason input {
    width: min(220px, 32vw);
    min-height: 32px;
    padding: .3rem .55rem;
    font-size: .82rem;
}
.maintenance-dev-eta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}
.maintenance-dev-eta input[type="number"] {
    width: 4.25rem;
    min-height: 32px;
    padding: .3rem .45rem;
    font-size: .82rem;
}
.maintenance-dev-eta select {
    min-height: 32px;
    padding: .3rem .45rem;
    font-size: .82rem;
    max-width: 7.5rem;
}
.maintenance-dev-eta-hint {
    margin: .45rem 0 0;
    padding: 0 1rem .85rem;
}
.maintenance-reason {
    margin: .75rem 0 0;
    font-size: 1.02rem;
}
.maintenance-eta {
    margin: .5rem 0 0;
}
.maintenance-dev-card .maintenance-dev-form {
    flex-wrap: wrap;
}
.maintenance-dev-card .maintenance-dev-bar__actions .btn {
    min-height: 32px;
    padding: .3rem .65rem;
    font-size: .82rem;
    flex-shrink: 0;
    white-space: nowrap;
}
@media (max-width: 1100px) {
    .mixup-admin-panels--security,
    .mixup-admin-panels--formation,
    .mixup-admin-panels--codes {
        grid-template-columns: 1fr;
    }
    .mixup-admin-panels--security > .mixup-security-span-full {
        grid-column: auto;
    }
}
@media (max-width: 960px) {
    .mixup-admin-panels { grid-template-columns: 1fr; }
    .mixup-table-panel--codes .table-scroll-codes > .table:not(.table-mobile-cards) {
        min-width: 640px;
    }
}

/* Panneaux contenu — glass lagon */
.mixup-panel {
    position: relative;
    isolation: isolate;
    border-radius: 20px;
    padding: 1.45rem 1.55rem;
    background:
        linear-gradient(155deg, rgba(18, 52, 74, .92), rgba(10, 32, 48, .96));
    border: 1px solid rgba(46, 230, 255, .14);
    box-shadow:
        0 16px 40px rgba(0, 10, 24, .28),
        inset 0 1px 0 rgba(255, 255, 255, .05);
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.mixup-panel::before {
    content: "";
    position: absolute;
    top: -35%;
    right: -12%;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(46, 230, 255, .14), transparent 68%);
    pointer-events: none;
}

.mixup-panel::after {
    content: "";
    position: absolute;
    bottom: 12%;
    left: -8%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 107, 61, .08), transparent 70%);
    pointer-events: none;
}

.mixup-panel:hover {
    transform: translateY(-2px);
    border-color: rgba(46, 230, 255, .28);
    box-shadow:
        0 22px 48px rgba(0, 10, 24, .34),
        inset 0 1px 0 rgba(255, 255, 255, .07);
}

[data-theme="lagoon-light"] .mixup-panel {
    background: var(--lagon-surface);
    border-color: var(--lagon-surface-border);
    box-shadow: var(--lagon-surface-shadow);
}

.mixup-panel--accent {
    border-color: rgba(255, 107, 61, .28);
    background:
        linear-gradient(155deg, rgba(28, 48, 62, .95), rgba(14, 36, 52, .98)),
        radial-gradient(ellipse 80% 60% at 0% 100%, rgba(255, 107, 61, .12), transparent 60%);
}
.mixup-panel--accent::after {
    background: radial-gradient(circle, rgba(255, 107, 61, .18), transparent 70%);
}

[data-theme="lagoon-light"] .mixup-panel--accent {
    background:
        linear-gradient(155deg, #f5f9fc 0%, #eef4f8 100%),
        radial-gradient(ellipse 70% 50% at 0% 100%, rgba(217, 86, 32, .1), transparent 60%);
    border-color: rgba(217, 86, 32, .28);
}

.mixup-panel__title {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0 0 1.05rem;
    font-size: 1.06rem;
    font-weight: 700;
}

.mixup-panel__title svg {
    flex-shrink: 0;
    padding: 9px;
    border-radius: 50%;
    background: rgba(46, 230, 255, .12);
    border: 1px solid rgba(46, 230, 255, .22);
    box-shadow: 0 0 0 4px rgba(46, 230, 255, .06);
}

.mixup-panel--accent .mixup-panel__title svg {
    background: rgba(255, 107, 61, .12);
    border-color: rgba(255, 107, 61, .28);
    box-shadow: 0 0 0 4px rgba(255, 107, 61, .06);
}

.help-layout .mixup-panel {
    animation: mixup-hero-content-in .7s cubic-bezier(.22, 1, .36, 1) backwards;
}
.help-layout .help-faq { animation-delay: .08s; }
.help-layout .help-contact { animation-delay: .16s; }

.mixup-panel__subtitle {
    margin: 1.25rem 0 .65rem;
    font-size: .95rem;
}
.mixup-panel__hint { margin: .75rem 0 0; }

@media (prefers-reduced-motion: reduce) {
    .mixup-panel:hover { transform: none; }
    .help-layout .mixup-panel { animation: none; }
}
.mixup-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}

.mixup-validated-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mixup-validated-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--border-soft);
}
.mixup-validated-item a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.mixup-validated-item a:hover strong { color: var(--cyan); }

.mixup-certificates-panel__head {
    margin-bottom: .5rem;
}
.mixup-certificates-list .mixup-certificate-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.mixup-certificate-item__info {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}
.mixup-certificate-item__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
}

.mixup-table-panel { padding: 0 !important; overflow: hidden; }
.mixup-table-panel .mixup-panel__title { padding: 1.25rem 1.25rem 0; }
.mixup-table-panel > .students-toolbar {
    padding: 1.25rem 1.25rem .75rem;
    margin-bottom: 0;
}
.mixup-table-panel > .students-toolbar + .table-scroll {
    padding: 0 1.25rem 1.25rem;
}
.mixup-table-panel .codes-table-wrap { padding: 0 1.25rem 1.25rem; }
.codes-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: 0 1.25rem 1rem;
}
.mixup-table-panel--codes .mixup-panel__title {
    padding-bottom: .35rem;
}

.funnel-strip--admin { margin-bottom: 1.25rem; }

/* Level switcher */
.mixup-ui .level-switcher {
    margin-bottom: 1rem;
}
.mixup-ui .level-pill {
    border-radius: 999px;
    padding: .45rem 1rem;
    border: 1px solid rgba(46, 230, 255, .25);
    background: rgba(46, 230, 255, .08);
}
.mixup-ui .level-pill.is-active {
    background: linear-gradient(135deg, rgba(46,230,255,.22), rgba(46,230,255,.08));
    border-color: var(--cyan);
    box-shadow: 0 0 0 1px rgba(46, 230, 255, .15);
}

.pill-preview {
    background: rgba(255, 196, 75, .15);
    border: 1px solid rgba(255, 196, 75, .45);
    color: var(--warn);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

body.student-preview-mode .topbar {
    border-bottom-color: rgba(255, 196, 75, .25);
}

/* --- Help hub (FAQ / Contact / About / Support) --- */
.hidden { display: none !important; }
.help-subnav { margin-bottom: 1.25rem; }

.help-hub { display: grid; gap: 1rem; }
.help-hub__search {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
}
.help-hub__search-label { display: flex; color: var(--text-muted); }
.help-hub__search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 16px;
    padding: .35rem 0;
    -webkit-appearance: none;
    appearance: none;
}
.help-hub__search-input:focus { outline: none; box-shadow: none; }

.help-hub__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.help-hub__tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: var(--surface);
    color: var(--text-dim);
    font-weight: 600;
    font-size: .88rem;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.help-hub__tab:hover { border-color: rgba(46, 230, 255, .35); color: var(--text); }
.help-hub__tab.is-active {
    background: linear-gradient(135deg, rgba(46, 230, 255, .2), rgba(46, 230, 255, .06));
    border-color: var(--cyan);
    color: var(--text);
    box-shadow: 0 0 0 1px rgba(46, 230, 255, .12);
}
.help-hub__tab-count {
    font-size: .72rem;
    padding: .12rem .45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: var(--text-muted);
}

.help-hub__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 960px) {
    .help-hub__layout { grid-template-columns: 1fr; }
}

.help-faq-panel__intro {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-soft);
}
.help-faq-panel__icon {
    display: flex;
    padding: 12px;
    border-radius: 12px;
    background: rgba(46, 230, 255, .12);
    border: 1px solid rgba(46, 230, 255, .22);
    color: var(--cyan);
}
.help-faq-panel__title { margin: 0 0 .35rem; font-size: 1.15rem; }
.help-faq-panel__desc { margin: 0; color: var(--text-dim); font-size: .92rem; line-height: 1.55; }

.faq-accordion { display: grid; gap: .65rem; }
.faq-item--rich {
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, .02);
}
.faq-item--rich summary {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1rem;
    list-style: none;
    cursor: pointer;
    font-weight: 600;
}
.faq-item--rich summary::-webkit-details-marker { display: none; }
.faq-item__icon {
    display: flex;
    color: var(--cyan);
    flex-shrink: 0;
}
.faq-item__q { flex: 1; }
.faq-item__chev {
    display: flex;
    color: var(--text-muted);
    transition: transform .2s;
}
.faq-item--rich[open] .faq-item__chev { transform: rotate(180deg); }
.faq-item--rich .faq-item__body {
    padding: 0 1rem 1rem 2.75rem;
    color: var(--text-dim);
    font-size: .92rem;
    line-height: 1.6;
}
.faq-item--rich .faq-item__body p { margin: 0; }
.faq-item--rich.is-hidden { display: none; }

.help-aside-cta__icon {
    display: inline-flex;
    margin-bottom: .65rem;
    color: var(--coral);
}
.help-aside-cta__title { margin: 0 0 .5rem; font-size: 1rem; }
.help-aside-links__label {
    margin: 0 0 .75rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.help-aside-links__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .45rem;
}
.help-aside-links__list a {
    display: flex;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
    color: var(--text-dim);
    font-size: .9rem;
    padding: .35rem 0;
}
.help-aside-links__list a:hover { color: var(--cyan); }

.help-contact-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 900px) {
    .help-contact-page__grid { grid-template-columns: 1fr; }
}
.help-contact-page .landing-contact { margin: 0; }
.help-contact-form-card { padding: 1.35rem; }
.help-contact-form { position: relative; }
.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 640px) {
    .form-row-2 { grid-template-columns: 1fr; }
}
.help-contact-form .req { color: var(--danger, #f87171); }
.help-contact-form__submit { display: flex; justify-content: center; margin-top: .5rem; }
.help-contact-form-intro { margin: -.35rem 0 1rem; }
.help-contact-assist { padding: 1.5rem; }
.help-contact-assist__icon {
    display: inline-flex;
    margin-bottom: .65rem;
    color: var(--accent, #7dd3fc);
}
.help-contact-assist__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.15rem;
}
.hp-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
.hp-field__label { font-size: 0; line-height: 0; }

.help-about { display: grid; gap: 1.25rem; }
.help-about__brand {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}
.help-about__logo { object-fit: contain; }
.help-about__lead { margin: 0; line-height: 1.65; color: var(--text-dim); }
.help-about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 768px) {
    .help-about__grid { grid-template-columns: 1fr; }
}
.help-about__list {
    margin: 0 0 1rem;
    padding-left: 1.15rem;
    color: var(--text-dim);
    line-height: 1.65;
}
.help-about__legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.support-page { display: grid; gap: 1rem; }
.support-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
}
.support-empty__icon {
    display: inline-flex;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 50%;
    background: rgba(46, 230, 255, .1);
    color: var(--cyan);
}
.support-page,
.support-admin-page,
.support-list-panel {
    min-width: 0;
    max-width: 100%;
}
.support-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}
.support-list-head .mixup-panel__title {
    min-width: 0;
    flex: 1 1 auto;
}
.support-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem;
    min-width: 0;
    max-width: 100%;
}
.support-list__item {
    min-width: 0;
    max-width: 100%;
}
.support-list__item--dev {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem;
    align-items: stretch;
}
.support-list__item--dev .support-list__link {
    min-width: 0;
}
.support-list__delete {
    display: flex;
    align-items: center;
    padding-right: .25rem;
}
.support-list__delete .btn {
    white-space: nowrap;
}
.support-list__link {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    max-width: 100%;
    padding: .85rem 1rem;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, background .15s;
    overflow: hidden;
}
.support-list__link:hover {
    border-color: rgba(46, 230, 255, .35);
    background: rgba(46, 230, 255, .04);
}
.support-list__main {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.support-list__main strong,
.support-list__main :is(.small, .muted) {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    line-height: 1.35;
}
.mixup-help-hero .dash-hero__greeting h1,
.support-ticket-info__title {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.support-ticket-info__message,
.support-msg__body {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.support-list__empty {
    list-style: none;
    padding: .5rem 0;
    margin: 0;
}
.support-list__item.is-live-new .support-list__link {
    animation: support-live-in .85s ease;
    border-color: rgba(46, 230, 255, .55);
}
@keyframes support-live-in {
    from {
        background: rgba(46, 230, 255, .16);
        border-color: rgba(46, 230, 255, .65);
    }
    to {
        background: rgba(46, 230, 255, .04);
        border-color: rgba(46, 230, 255, .35);
    }
}
.support-status--open {
    background: rgba(46, 230, 255, .12);
    border-color: rgba(46, 230, 255, .35);
    color: var(--cyan);
}
.support-status--answered {
    background: rgba(74, 222, 128, .12);
    border-color: rgba(74, 222, 128, .35);
    color: #86efac;
}
.support-status--closed {
    background: rgba(148, 163, 184, .12);
    border-color: rgba(148, 163, 184, .25);
    color: var(--text-muted);
}
.support-priority--urgent {
    background: rgba(251, 146, 60, .18);
    border-color: rgba(251, 146, 60, .45);
    color: #fdba74;
}
.support-list__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    max-width: 100%;
}
.support-list__link > .pill {
    flex: 0 0 auto;
    max-width: 100%;
}
@media (max-width: 960px) {
    .support-list__link {
        flex-wrap: wrap;
    }
    .support-list__badges,
    .support-list__link > .pill {
        width: 100%;
        justify-content: flex-start;
    }
}
.support-meta-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
}
.support-context-card { padding: 0; }
.support-context-details > .support-context-list {
    margin: 0;
    padding: 0 1.25rem 1rem;
}
.support-context-details > summary.support-context-card__title {
    cursor: pointer;
    list-style: none;
    user-select: none;
    padding: .85rem 1.25rem;
    margin: 0;
}
.support-context-details > summary.support-context-card__title::-webkit-details-marker { display: none; }
.support-context-details > summary.support-context-card__title .support-context-details__chev {
    opacity: .65;
    transition: transform .2s ease;
}
.support-context-card__title-label {
    flex: 1;
    min-width: 0;
}
.support-context-copy {
    flex-shrink: 0;
    margin-left: auto;
}
.support-context-details > summary.support-context-card__title .support-context-copy + .support-context-details__chev {
    margin-left: .35rem;
}
.support-context-details[open] > summary .support-context-details__chev { transform: rotate(180deg); }
.support-context-card__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
}
.support-context-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .55rem;
}
.support-context-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .35rem .75rem;
    padding: .55rem .75rem;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background: rgba(0, 0, 0, .12);
}
.support-context-item--ok { border-color: rgba(74, 222, 128, .28); }
.support-context-item--warn { border-color: rgba(251, 146, 60, .35); background: rgba(251, 146, 60, .06); }
.support-context-item--info { border-color: rgba(46, 230, 255, .22); background: rgba(46, 230, 255, .04); }
.support-context-item__label { font-size: .82rem; color: var(--text-muted); }
.support-context-item__value { font-size: .88rem; font-weight: 600; text-align: right; }
.support-msg--internal {
    border-color: rgba(167, 139, 250, .35);
    background: linear-gradient(155deg, rgba(167, 139, 250, .12), rgba(167, 139, 250, .04));
}
.support-internal-pill {
    font-size: .72rem;
    padding: .12rem .45rem;
    background: rgba(167, 139, 250, .18);
    border-color: rgba(167, 139, 250, .35);
    color: #c4b5fd;
}
.support-pending-pill {
    font-size: .72rem;
    padding: .12rem .45rem;
    background: rgba(251, 191, 36, .14);
    border-color: rgba(251, 191, 36, .4);
    color: #fcd34d;
}
.support-msg.is-editing {
    outline: 2px solid rgba(56, 189, 248, .45);
    outline-offset: 2px;
}
.support-edit-banner {
    margin: 0 0 .75rem;
    padding: .45rem .65rem;
    border-radius: 8px;
    background: rgba(56, 189, 248, .1);
    border: 1px solid rgba(56, 189, 248, .25);
    font-size: .85rem;
}
.support-msg__head-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem .65rem;
    flex-shrink: 0;
}
.support-msg__actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
}
.support-msg__actions .btn-xs,
.support-msg-delete-btn {
    padding: .18rem .5rem;
    font-size: .74rem;
    line-height: 1.25;
    min-height: 0;
    border-radius: 8px;
}
.support-msg-delete-form { margin: 0; display: inline-flex; }
.support-msg-edit-btn.is-active {
    border-color: rgba(46, 230, 255, .45);
    background: rgba(46, 230, 255, .1);
}
.support-msg--internal .support-msg-edit-btn.is-active {
    border-color: rgba(167, 139, 250, .45);
    background: rgba(167, 139, 250, .12);
}
.support-msg-edit-form {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--border-soft);
}
.support-msg-edit-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.support-internal-panel { border-style: dashed; }
.support-internal-hint { margin: -.35rem 0 .85rem; }
.support-reply-actions--compact { margin-top: .65rem; padding-top: 0; border-top: 0; }
.formation-hero { --hero-accent: #7dd3fc; }

.formation-hub-layout { margin-top: 0; }
.formation-section-head {
    margin-bottom: 1rem;
    align-items: center;
}
.formation-section-head__actions,
.card-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.card-head--split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.formation-temp-bulk-delete {
    border-style: dashed;
    opacity: .92;
}
.formation-section-head__title {
    margin: 0 0 .25rem;
    font-size: 1.15rem;
    font-weight: 700;
}
.formation-hub-subnav { margin-bottom: 1rem; }

.support-admin-page {
    display: grid;
    gap: 1.25rem;
}
.support-ticket-info {
    padding: 1.25rem 1.35rem;
    display: grid;
    gap: .85rem;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.support-ticket-info__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .75rem;
}
.support-ticket-info__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
}
.support-ticket-info__id {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--text-muted);
}
.support-ticket-info__category {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
}
.support-ticket-info__dates strong {
    color: var(--text);
    font-weight: 600;
}
.support-ticket-info__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.35;
}
.support-ticket-info__message {
    margin: 0;
    padding: .85rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background: rgba(0, 0, 0, .12);
    line-height: 1.55;
    white-space: pre-wrap;
}
.support-thread-empty {
    margin: 0;
    padding: 1rem 1.1rem;
    border-radius: 10px;
    border: 1px dashed var(--border-soft);
    text-align: center;
    font-size: .9rem;
}
.support-client-card {
    padding: 1.25rem 1.35rem;
    position: relative;
}
.support-client-card__profile { margin-left: auto; }
.support-ticket-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-soft);
}
.support-reply-panel .support-delete-form {
    margin: 0;
}
.support-ticket-controls__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    margin-left: auto;
    padding-left: .65rem;
    border-left: 1px solid var(--border-soft);
}
.support-reply-panel {
    padding: 1.35rem;
    position: relative;
}
.support-thread-page .support-reply-form.card {
    position: relative;
}
.support-reply-panel .support-save-toast {
    top: .85rem;
    right: 1.15rem;
}
.support-save-toast {
    position: absolute;
    top: .65rem;
    right: 1rem;
    z-index: 2;
    font-size: .78rem;
    font-weight: 600;
    padding: .35rem .65rem;
    border-radius: 999px;
    border: 1px solid rgba(74, 222, 128, .35);
    background: rgba(74, 222, 128, .12);
    color: #86efac;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
.support-save-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.support-save-toast.is-error {
    border-color: rgba(248, 113, 113, .4);
    background: rgba(248, 113, 113, .12);
    color: #fca5a5;
}
.support-meta-form.is-saving,
.support-status-form.is-saving,
.support-reply-form.is-saving,
.support-internal-form.is-saving {
    opacity: .65;
    pointer-events: none;
}
.support-client-card__main {
    flex: 1 1 280px;
    min-width: 0;
    display: grid;
    gap: 1rem;
}
.support-client-card__identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
}
.support-client-link {
    color: var(--cyan);
    font-weight: 700;
    text-decoration: none;
}
.support-client-link:hover { text-decoration: underline; }
.support-client-card__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .75rem 1.25rem;
    margin: 0;
}
.support-client-card__meta dt {
    margin: 0 0 .2rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.support-client-card__meta dd { margin: 0; font-weight: 600; }
.support-delete-form {
    display: flex;
    align-items: center;
    margin: 0 0 0 auto;
    padding-left: .65rem;
    border-left: 1px solid var(--border-soft);
}
.support-thread-panel {
    display: grid;
    gap: .85rem;
}
.support-thread-panel__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}
.support-admin-page .support-thread {
    display: grid;
    gap: 1rem;
}
.support-msg__who {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .45rem;
}
.support-reply-panel .mixup-panel__title { margin-bottom: 1rem; }
.support-reply-form .field { margin-bottom: 0; }
.support-reply-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-soft);
}
.support-reply-actions--bar { margin-top: 1rem; }
.support-reply-actions__send {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    margin-left: auto;
}
.support-internal-drawer {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    border: 1px dashed rgba(167, 139, 250, .45);
    background: linear-gradient(155deg, rgba(167, 139, 250, .1), rgba(167, 139, 250, .03));
}
.support-internal-drawer__hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .65rem;
    margin: 0 0 .85rem;
}
.support-internal-drawer__tag {
    flex-shrink: 0;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .22rem .55rem;
    border-radius: 999px;
    background: rgba(167, 139, 250, .2);
    color: #c4b5fd;
    border: 1px solid rgba(167, 139, 250, .38);
}
.support-internal-drawer__hint-text {
    font-size: .82rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.support-internal-drawer .field { margin-bottom: .75rem; }
.support-internal-toggle.is-active {
    border-color: rgba(167, 139, 250, .55);
    background: rgba(167, 139, 250, .12);
    color: #c4b5fd;
}
.support-closed-banner--inline { margin: 0 0 .25rem; }
.support-closed-banner {
    margin: 0;
    padding: .85rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    background: rgba(148, 163, 184, .08);
}
.account-staff-page { display: grid; gap: 1rem; }
.account-staff-card { padding: 1.35rem; display: grid; gap: 1.25rem; }
.account-staff-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.account-staff-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .85rem 1.25rem;
    margin: 0;
}
.account-staff-meta dt {
    margin: 0 0 .2rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.account-staff-meta dd { margin: 0; font-weight: 600; }

.user-profile-details {
    display: grid;
    gap: 1.15rem;
    padding: 1.35rem;
}

.user-profile-details__empty {
    margin: 0;
}

.user-profile-details__contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.user-profile-details__contact-card {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    min-width: 0;
    padding: .95rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--lagon-inset-border, rgba(46, 230, 255, .14));
    background: linear-gradient(145deg, rgba(46, 230, 255, .07), rgba(8, 24, 48, .35));
    color: inherit;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.user-profile-details__contact-card:not(.is-empty):hover,
.user-profile-details__contact-card:not(.is-empty):focus-visible {
    border-color: rgba(46, 230, 255, .45);
    background: linear-gradient(145deg, rgba(46, 230, 255, .12), rgba(8, 24, 48, .4));
    transform: translateY(-1px);
}

.user-profile-details__contact-card.is-empty {
    opacity: .78;
}

.user-profile-details__contact-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background: rgba(46, 230, 255, .14);
    color: var(--cyan);
}

.user-profile-details__contact-card--phone .user-profile-details__contact-icon {
    background: rgba(72, 220, 160, .14);
    color: #5ee4a8;
}

.user-profile-details__contact-body {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
    flex: 1 1 auto;
}

.user-profile-details__contact-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.user-profile-details__contact-value {
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: none;
}

.user-profile-details__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .65rem;
    margin: 0;
}

.user-profile-details__fact {
    padding: .7rem .85rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .05);
}

.user-profile-details__fact dt {
    margin: 0 0 .25rem;
    font-size: .7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.user-profile-details__fact dd {
    margin: 0;
    font-weight: 600;
    font-size: .92rem;
}

.user-profile-details__fact--ip dd {
    margin-top: .1rem;
}

.user-profile-details__subtitle {
    margin: 0;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.user-profile-details__address {
    padding: .95rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--lagon-inset-border, rgba(46, 230, 255, .1));
    background: rgba(0, 0, 0, .14);
}

.user-profile-details__address-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .55rem;
}

.user-profile-details__address-icon {
    display: inline-flex;
    color: var(--cyan);
    opacity: .85;
}

.user-profile-details__address-text {
    margin: 0;
    font-style: normal;
    line-height: 1.55;
    font-weight: 600;
    color: var(--text);
}

[data-theme="lagoon-light"] .user-profile-details__contact-card {
    background: linear-gradient(145deg, rgba(14, 116, 144, .06), rgba(255, 255, 255, .92));
    border-color: var(--lagon-inset-border);
}

[data-theme="lagoon-light"] .user-profile-details__contact-card:not(.is-empty):hover,
[data-theme="lagoon-light"] .user-profile-details__contact-card:not(.is-empty):focus-visible {
    background: linear-gradient(145deg, rgba(14, 116, 144, .1), #fff);
    border-color: rgba(14, 116, 144, .28);
}

[data-theme="lagoon-light"] .user-profile-details__contact-icon {
    background: rgba(14, 116, 144, .1);
    color: var(--cyan);
}

[data-theme="lagoon-light"] .user-profile-details__contact-card--phone .user-profile-details__contact-icon {
    background: rgba(22, 163, 74, .1);
    color: #15803d;
}

[data-theme="lagoon-light"] .user-profile-details__fact {
    background: rgba(14, 116, 144, .04);
    border-color: var(--lagon-inset-border);
}

[data-theme="lagoon-light"] .user-profile-details__address {
    background: rgba(14, 116, 144, .04);
    border-color: var(--lagon-inset-border);
}

@media (max-width: 720px) {
    .user-profile-details__contact {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .support-ticket-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .support-status-form,
    .support-ticket-controls__actions {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }
    .support-reply-actions,
    .support-reply-actions__send {
        flex-direction: column;
        width: 100%;
        margin-left: 0;
    }
    .support-reply-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

.support-back { margin: 0; }
.support-thread { display: grid; gap: .75rem; }
.support-thread-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.support-thread-head--admin {
    align-items: center;
}
.support-thread-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    flex: 1 1 220px;
    min-width: 0;
}
.support-thread-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    flex: 0 0 auto;
}
.support-status-form {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}
.support-status-form__label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-dim);
    white-space: nowrap;
}
@media (max-width: 640px) {
    .support-thread-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .support-delete-form {
        padding-left: 0;
        border-left: 0;
    }
}
.support-msg {
    padding: 1rem 1.1rem;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    background: var(--surface);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.support-msg--staff {
    border-color: rgba(46, 230, 255, .28);
    background: linear-gradient(155deg, rgba(46, 230, 255, .08), rgba(46, 230, 255, .02));
}
.support-msg__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .65rem;
}
.support-msg__body { line-height: 1.6; color: var(--text-dim); font-size: .94rem; }
.support-form__actions { display: flex; justify-content: flex-end; }
.support-resolve-form { margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--border-soft); }
.support-one-ticket-hint { margin: 0 0 1rem; }
.support-removed-notice {
    margin: 0 0 1rem;
    padding: .85rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(46, 230, 255, .28);
    background: rgba(46, 230, 255, .08);
    color: var(--text);
    font-size: .92rem;
    line-height: 1.45;
}
.support-bug-hint {
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 196, 75, .35);
    background: rgba(255, 196, 75, .08);
}
.support-bug-hint__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .35rem;
    font-weight: 600;
    color: var(--warn);
}
.char-counter { text-align: right; font-size: .78rem; }
.support-closed-note { margin: 0; }

[data-theme="lagoon-light"] .help-hub__tab.is-active {
    background: linear-gradient(135deg, rgba(15, 118, 150, .12), rgba(15, 118, 150, .04));
}
[data-theme="lagoon-light"] .faq-item--rich {
    background: rgba(255, 255, 255, .85);
}

/* =====================================================================
   Staff nav alpha — sidebar latérale (gérant / développeur)
   Bascule : body.staff-nav-sidebar via localStorage anaya_staff_nav
   ===================================================================== */
.staff-shell {
    display: contents;
}
.staff-sidebar {
    display: none;
}
.staff-main {
    min-width: 0;
}

body.staff-nav-sidebar {
    --staff-shell-inset: 12px;
    --staff-shell-max: min(1720px, calc(100vw - 2 * var(--staff-shell-inset)));
    --staff-sidebar-width: 292px;
    --staff-sidebar-collapsed: 88px;
    --staff-sidebar-top: calc(72px + env(safe-area-inset-top, 0px));
    --staff-sidebar-max-h: calc(100vh - var(--staff-sidebar-top) - var(--staff-shell-inset) - 8px);
    /* Surfaces lagon — alignées mixup-panel / landing (juste milieu clair/sombre) */
    --lagon-surface: linear-gradient(155deg, rgba(18, 52, 74, .9), rgba(12, 36, 52, .94));
    --lagon-surface-border: rgba(46, 230, 255, .15);
    --lagon-surface-shadow: 0 16px 40px rgba(0, 10, 24, .22), inset 0 1px 0 rgba(255, 255, 255, .05);
    --lagon-inset: rgba(10, 30, 46, .38);
    --lagon-inset-border: rgba(46, 230, 255, .09);
    --lagon-tabs: rgba(10, 30, 46, .48);
}
body.settings-shell {
    --lagon-surface: linear-gradient(155deg, rgba(18, 52, 74, .9), rgba(12, 36, 52, .94));
    --lagon-surface-border: rgba(46, 230, 255, .15);
    --lagon-surface-shadow: 0 16px 40px rgba(0, 10, 24, .22), inset 0 1px 0 rgba(255, 255, 255, .05);
    --lagon-inset: rgba(10, 30, 46, .38);
    --lagon-inset-border: rgba(46, 230, 255, .09);
    --lagon-tabs: rgba(10, 30, 46, .48);
}
body.staff-nav-sidebar .topbar-inner {
    width: calc(100% - 2 * var(--staff-shell-inset));
    max-width: var(--staff-shell-max);
    margin-inline: var(--staff-shell-inset);
}
body.staff-nav-sidebar .staff-shell {
    display: grid;
    grid-template-columns: var(--staff-sidebar-width) minmax(0, 1fr);
    gap: 1.15rem;
    align-items: start;
    width: calc(100% - 2 * var(--staff-shell-inset));
    max-width: var(--staff-shell-max);
    margin-inline: var(--staff-shell-inset);
}
body.staff-nav-sidebar .staff-sidebar {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: var(--staff-sidebar-top);
    align-self: start;
    max-height: var(--staff-sidebar-max-h);
    overflow: hidden;
    padding: 1rem .95rem;
    border-radius: 18px;
    background: var(--lagon-surface);
    border: 1px solid var(--lagon-surface-border);
    box-shadow: var(--lagon-surface-shadow);
}
body.staff-nav-sidebar .staff-main .card.mixup-panel:not(.mixup-panel--accent),
body.staff-nav-sidebar .staff-main .mixup-panel:not(.mixup-panel--accent) {
    background: var(--lagon-surface);
    border-color: var(--lagon-surface-border);
    box-shadow: var(--lagon-surface-shadow);
}
[data-theme="lagoon-light"] body.staff-nav-sidebar .staff-sidebar {
    background: var(--lagon-surface);
    border-color: var(--lagon-surface-border);
    box-shadow: var(--lagon-surface-shadow);
}
[data-theme="lagoon-light"] body.staff-nav-sidebar,
[data-theme="lagoon-light"] body.settings-shell {
    --lagon-surface: linear-gradient(155deg, #eef5fa 0%, #e0ebf3 100%);
    --lagon-surface-border: rgba(15, 76, 102, .15);
    --lagon-surface-shadow: 0 10px 28px rgba(8, 40, 60, .08), inset 0 1px 0 rgba(255, 255, 255, .92);
    --lagon-inset: rgba(196, 218, 232, .55);
    --lagon-inset-border: rgba(15, 76, 102, .12);
    --lagon-tabs: rgba(208, 226, 238, .88);
}

body.staff-nav-sidebar .staff-nav-classic,
body.staff-nav-sidebar .staff-nav-alpha-prompt,
body.staff-nav-sidebar .staff-nav-sidebar-dupe {
    display: none !important;
}
body.staff-nav-sidebar[data-staff-shell="1"] .mainnav-staff-hide {
    display: none !important;
}

body.staff-nav-sidebar.app-user[data-staff-shell="1"] .user-tabbar {
    display: none;
}

body.staff-nav-sidebar .staff-main > .site-gutter {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    min-width: 0;
}
body.staff-nav-sidebar .mixup-admin-panels {
    min-width: 0;
}
body.staff-nav-sidebar .mixup-table-panel--formation {
    min-width: 0;
}

@media (min-width: 1900px) {
    body.staff-nav-sidebar {
        --staff-shell-max: min(2100px, calc(100vw - 2 * var(--staff-shell-inset)));
    }
}

.staff-sidebar__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: 1rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--lagon-inset-border);
    flex-shrink: 0;
}
[data-theme="lagoon-light"] .staff-sidebar__head {
    border-bottom-color: var(--lagon-inset-border);
}
.staff-sidebar__brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.staff-sidebar__brand img {
    height: 40px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}
.staff-sidebar__brand-text {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}
.staff-sidebar__brand-text strong {
    font-size: .88rem;
    line-height: 1.2;
    color: var(--cyan);
}
.staff-sidebar__brand-text span {
    font-size: .72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.staff-sidebar__collapse {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04);
    color: var(--text-muted);
    cursor: pointer;
    display: grid;
    place-items: center;
}
.staff-sidebar__collapse svg {
    transform: rotate(-90deg);
    transition: transform .2s;
}
body.staff-sidebar-collapsed .staff-sidebar__collapse svg {
    transform: rotate(90deg);
}

.staff-sidebar__section {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .55rem;
    padding: 0 .5rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(46, 230, 255, .75);
}
.staff-sidebar__section--foot {
    margin-top: .5rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
[data-theme="lagoon-light"] .staff-sidebar__section--foot {
    border-top-color: rgba(8, 40, 60, .08);
}

.staff-sidebar__body {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 2px;
}

.staff-sidebar__body::-webkit-scrollbar {
    width: 6px;
}

.staff-sidebar__body::-webkit-scrollbar-thumb {
    background: rgba(62, 207, 212, .28);
    border-radius: 999px;
}

.staff-sidebar__body::-webkit-scrollbar-thumb:hover {
    background: rgba(62, 207, 212, .45);
}
.staff-sidebar__group {
    border-radius: 12px;
    border: 1px solid var(--lagon-inset-border);
    background: var(--lagon-inset);
}
[data-theme="lagoon-light"] .staff-sidebar__group {
    border-color: var(--lagon-inset-border);
    background: var(--lagon-inset);
}
.staff-sidebar__group-summary {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .62rem .7rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(46, 230, 255, .85);
    user-select: none;
    font-family: inherit;
    text-align: left;
}
.staff-sidebar__group-label { flex: 1; min-width: 0; }
.staff-sidebar__group-chev {
    display: inline-flex;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    opacity: .75;
}
.staff-sidebar__group.is-open .staff-sidebar__group-chev {
    transform: rotate(180deg);
}
#staff-sidebar:not(.is-ready) .staff-sidebar__body,
#staff-sidebar:not(.is-ready) .staff-sidebar__foot {
    visibility: hidden;
}
.staff-sidebar.is-ready .staff-sidebar__body {
    visibility: visible;
}
.staff-sidebar.is-ready .staff-sidebar__foot {
    visibility: visible;
}
.staff-sidebar__group-body {
    display: grid;
    grid-template-rows: 0fr;
}
.staff-sidebar.is-animated .staff-sidebar__group-body {
    transition: grid-template-rows .34s cubic-bezier(.4, 0, .2, 1);
}
.staff-sidebar__group.is-open .staff-sidebar__group-body {
    grid-template-rows: 1fr;
}
.staff-sidebar__group-inner {
    overflow: hidden;
    min-height: 0;
}
.staff-sidebar__group-inner > .staff-sidebar__nav {
    padding: 0 .35rem .45rem;
}
.staff-sidebar__group .staff-sidebar__link {
    padding: .58rem .72rem;
    font-size: .88rem;
}

.staff-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.staff-sidebar__link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .75rem;
    border-radius: 10px;
    color: var(--text-dim);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    transition: background .15s, color .15s;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.staff-sidebar__link:hover {
    background: rgba(46, 230, 255, .08);
    color: var(--text);
}
.staff-sidebar__link.is-active {
    background: linear-gradient(90deg, rgba(46, 230, 255, .22), rgba(46, 230, 255, .08));
    color: var(--cyan);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(46, 230, 255, .2);
}
.staff-sidebar__link--out {
    margin-top: .35rem;
    color: var(--text-muted);
}
.staff-sidebar__link--logout {
    margin-top: .25rem;
    color: var(--text-muted);
}
.staff-sidebar__link--logout:hover {
    background: rgba(255, 120, 120, .1);
    color: #ff9a9a;
}
.staff-sidebar__link-ico {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.25rem;
    justify-content: center;
}
.staff-sidebar__link-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.staff-sidebar__link-arrow {
    display: inline-flex;
    transform: rotate(-90deg);
    opacity: .85;
}
.staff-sidebar__logout {
    margin: 0;
}

body.staff-sidebar-collapsed .staff-shell {
    grid-template-columns: var(--staff-sidebar-collapsed) minmax(0, 1fr);
}
body.staff-sidebar-collapsed .staff-sidebar__brand-text,
body.staff-sidebar-collapsed .staff-sidebar__section,
body.staff-sidebar-collapsed .staff-sidebar__group-label,
body.staff-sidebar-collapsed .staff-sidebar__group-chev,
body.staff-sidebar-collapsed .staff-sidebar__link-label,
body.staff-sidebar-collapsed .staff-sidebar__link-arrow,
body.staff-sidebar-collapsed .staff-sidebar__alpha-toggle,
body.staff-sidebar-collapsed .staff-sidebar__alpha-badge {
    display: none;
}
body.staff-sidebar-collapsed .staff-sidebar__group {
    border: 0;
    background: transparent;
}
body.staff-sidebar-collapsed .staff-sidebar__group-summary {
    justify-content: center;
    padding: .45rem;
}
body.staff-sidebar-collapsed .staff-sidebar__group .staff-sidebar__nav {
    padding: 0;
}
body.staff-sidebar-collapsed .staff-sidebar__brand {
    justify-content: center;
}
body.staff-sidebar-collapsed .staff-sidebar__link {
    justify-content: center;
    padding-inline: .5rem;
}
body.staff-sidebar-collapsed .staff-sidebar__alpha {
    justify-content: center;
}

.staff-sidebar__foot {
    margin-top: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding-top: .5rem;
}
.staff-sidebar__alpha {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin-top: .75rem;
    padding: .65rem .5rem 0;
    border-top: 1px dashed rgba(46, 230, 255, .2);
}
.staff-sidebar__alpha-badge {
    align-self: flex-start;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .15rem .45rem;
    border-radius: 999px;
    background: rgba(255, 196, 75, .15);
    color: var(--warn);
    border: 1px solid rgba(255, 196, 75, .35);
}
.staff-sidebar__alpha-toggle {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: .78rem;
    text-align: left;
    cursor: pointer;
    padding: .25rem 0;
    font-family: inherit;
    line-height: 1.4;
}
.staff-sidebar__alpha-toggle:hover {
    color: var(--cyan);
}

.staff-nav-alpha-prompt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem 1rem;
    margin-bottom: 1.25rem;
    padding: .75rem 1rem;
    border-radius: 14px;
    border: 1px dashed rgba(46, 230, 255, .25);
    background: rgba(46, 230, 255, .04);
}
.staff-nav-alpha-prompt__badge {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .2rem .5rem;
    border-radius: 999px;
    background: rgba(255, 196, 75, .15);
    color: var(--warn);
    border: 1px solid rgba(255, 196, 75, .35);
}
.staff-nav-alpha-prompt__text {
    flex: 1;
    margin: 0;
    font-size: .85rem;
    color: var(--text-dim);
    min-width: 200px;
}

@media (max-width: 960px) {
    body.staff-nav-sidebar {
        --staff-shell-inset: 12px;
    }
    body.staff-nav-sidebar .topbar-inner,
    body.staff-nav-sidebar .staff-shell {
        width: calc(100% - 2 * var(--staff-shell-inset));
        max-width: none;
        margin-inline: var(--staff-shell-inset);
    }
    body.staff-nav-sidebar .staff-shell {
        grid-template-columns: 1fr;
    }
    body.staff-nav-sidebar .staff-sidebar {
        display: none;
    }
    body.staff-nav-sidebar[data-staff-shell="1"] .mainnav-staff-hide {
        display: revert !important;
    }
    body.staff-nav-sidebar.app-user[data-staff-shell="1"] .user-tabbar {
        display: flex;
    }
    body.staff-nav-sidebar .staff-nav-classic {
        display: flex !important;
    }
    /* Sidebar masquée : réafficher les raccourcis du hub (Clients, Codes, etc.) */
    body.staff-nav-sidebar .mixup-quick-actions.staff-nav-sidebar-dupe {
        display: flex !important;
    }
    body.staff-nav-sidebar .staff-main > .site-gutter {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding-inline: 0;
    }
}

@media (max-width: 768px) {
    body.admin-shell .main-content,
    body.dev-shell .main-content,
    body.settings-shell .main-content {
        padding-top: 12px;
    }

    body.admin-shell .breadcrumb,
    body.dev-shell .breadcrumb,
    body.settings-shell .breadcrumb {
        margin-bottom: 10px;
    }

    .mixup-panel {
        padding: 1rem 1.05rem;
        border-radius: 16px;
    }

    .mixup-table-panel.mixup-panel {
        padding: 0 !important;
    }

    .mixup-panel__head-row {
        padding: 1rem 1rem 0;
    }

    .mixup-table-panel--formation > .mixup-panel__head-row {
        padding: 1.15rem 1.15rem 1rem;
        gap: .85rem;
    }

    .mixup-table-panel .mixup-panel__title,
    .mixup-table-panel--codes .mixup-panel__title {
        padding: 1rem 1rem 0;
    }

    .mixup-table-panel--formation > .table-scroll,
    .mixup-table-panel .codes-table-wrap {
        padding: 0 1.15rem 1.15rem;
    }

    .formation-create-panel {
        margin-inline: 1.15rem;
    }

    .mixup-subnav {
        padding: .35rem;
        margin-bottom: .85rem;
        gap: .35rem;
    }

    .mixup-subnav__tab {
        padding: .48rem .72rem;
        font-size: .84rem;
    }

    .mixup-quick-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .mixup-quick-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .dash-hero {
        margin-bottom: .85rem;
    }
}

@media (max-width: 480px) {
    body.staff-nav-sidebar {
        --staff-shell-inset: 10px;
    }

    .mixup-panel {
        padding: .9rem .85rem;
    }

    .mixup-table-panel.mixup-panel {
        padding: 0 !important;
    }

    .mixup-panel__head-row {
        padding: .85rem .85rem 0;
    }

    .mixup-table-panel--formation > .mixup-panel__head-row {
        padding: 1rem 1rem .85rem;
    }

    .mixup-table-panel--formation > .table-scroll {
        padding-inline: 1rem;
    }

    .formation-create-panel {
        margin-inline: 1rem;
    }

    .dash-hero {
        padding: 1.15rem 1rem 2.35rem;
    }
}

/* --- Auth / landing bubbles v2 (test option A) --- */
@keyframes mixup-auth-bubble-rise {
    0% { transform: translate3d(0, 0, 0) scale(.52); opacity: 0; }
    7% { opacity: .68; }
    22% { transform: translate3d(calc(var(--drift, 10px) * .9), -24vh, 0) scale(.74); opacity: .6; }
    42% { transform: translate3d(calc(var(--drift, 10px) * -.5), -50vh, 0) scale(.86); opacity: .5; }
    62% { transform: translate3d(calc(var(--drift, 10px) * 1), -74vh, 0) scale(.96); opacity: .38; }
    82% { transform: translate3d(calc(var(--drift, 10px) * -.25), -98vh, 0) scale(1.03); opacity: .22; }
    100% { transform: translate3d(calc(var(--drift, 10px) * .12), -118vh, 0) scale(1.08); opacity: 0; }
}

@keyframes mixup-auth-bubble-rise-alt {
    0% { transform: translate3d(0, 12vh, 0) scale(.48); opacity: 0; }
    9% { opacity: .58; }
    28% { transform: translate3d(calc(var(--drift, -10px) * -.75), -20vh, 0) scale(.7); opacity: .54; }
    48% { transform: translate3d(calc(var(--drift, -10px) * .55), -46vh, 0) scale(.84); opacity: .44; }
    68% { transform: translate3d(calc(var(--drift, -10px) * -.95), -70vh, 0) scale(.95); opacity: .32; }
    86% { opacity: .16; }
    100% { transform: translate3d(calc(var(--drift, -10px) * .35), -112vh, 0) scale(1.05); opacity: 0; }
}

.mixup-ui.has-auth-bubbles .auth-bubbles span {
    bottom: -8%;
    background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .65), rgba(46, 230, 255, .22) 45%, rgba(46, 230, 255, .06) 100%);
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow:
        0 0 10px rgba(46, 230, 255, .14),
        inset 0 1px 2px rgba(255, 255, 255, .35);
    will-change: transform, opacity;
    animation-name: mixup-auth-bubble-rise;
    animation-timing-function: linear;
}

.mixup-ui.has-auth-bubbles .auth-bubbles span:nth-child(odd) {
    animation-name: mixup-auth-bubble-rise-alt;
}

.mixup-ui.has-auth-bubbles .auth-bubbles span:nth-child(1)  { --drift: 16px; }
.mixup-ui.has-auth-bubbles .auth-bubbles span:nth-child(2)  { --drift: -12px; }
.mixup-ui.has-auth-bubbles .auth-bubbles span:nth-child(3)  { --drift: 22px; }
.mixup-ui.has-auth-bubbles .auth-bubbles span:nth-child(4)  { --drift: -18px; }
.mixup-ui.has-auth-bubbles .auth-bubbles span:nth-child(5)  { --drift: 10px; }
.mixup-ui.has-auth-bubbles .auth-bubbles span:nth-child(6)  { --drift: -24px; }
.mixup-ui.has-auth-bubbles .auth-bubbles span:nth-child(7)  { --drift: 14px; }
.mixup-ui.has-auth-bubbles .auth-bubbles span:nth-child(8)  { --drift: -8px; }
.mixup-ui.has-auth-bubbles .auth-bubbles span:nth-child(9)  { --drift: 20px; }
.mixup-ui.has-auth-bubbles .auth-bubbles span:nth-child(10) { --drift: -16px; }
.mixup-ui.has-auth-bubbles .auth-bubbles span:nth-child(11) { --drift: 12px; }
.mixup-ui.has-auth-bubbles .auth-bubbles span:nth-child(12) { --drift: -20px; }
.mixup-ui.has-auth-bubbles .auth-bubbles span:nth-child(13) { --drift: 18px; }
.mixup-ui.has-auth-bubbles .auth-bubbles span:nth-child(14) { --drift: -14px; }
.mixup-ui.has-auth-bubbles .auth-bubbles span:nth-child(15) { --drift: 24px; }
.mixup-ui.has-auth-bubbles .auth-bubbles span:nth-child(16) { --drift: -10px; }
.mixup-ui.has-auth-bubbles .auth-bubbles span:nth-child(17) { --drift: 15px; }
.mixup-ui.has-auth-bubbles .auth-bubbles span:nth-child(18) { --drift: -22px; }

[data-theme="lagoon-light"] .mixup-ui.has-auth-bubbles .auth-bubbles span {
    box-shadow:
        0 0 12px rgba(10, 133, 160, .18),
        inset 0 1px 2px rgba(255, 255, 255, .5);
}

@media (prefers-reduced-motion: reduce) {
    .mixup-ui.has-auth-bubbles .auth-bubbles span {
        animation: none !important;
        opacity: .15;
        transform: none;
    }
}

/* Édition visuelle chapitre (gérant) */
.course-edit-live {
    display: flex;
    flex-direction: column;
    gap: 12px;
    --live-bar-offset: 58px;
}

.course-edit-live-form {
    display: none;
}

.course-edit-live-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.course-edit-live-body--slides-open {
    grid-template-columns: minmax(0, 1fr) var(--slides-panel-width, minmax(320px, 38vw));
}

.course-edit-live-body--slides-wide {
    grid-template-columns: minmax(0, 1fr) var(--slides-panel-width, minmax(420px, 52vw));
}

.course-edit-live-body--slides-focus {
    display: block;
    position: relative;
}

.course-edit-live-body--slides-focus .course-edit-live-main {
    visibility: hidden;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.course-edit-live-body--slides-focus .course-edit-live-slides {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    top: calc(var(--header-h, 56px) + var(--live-bar-offset, 58px) + 8px);
    z-index: 120;
    width: auto;
    max-width: none;
    max-height: none;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
}

.course-edit-live-body--slides-focus .course-edit-live-slides__grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
    max-height: calc(100dvh - var(--header-h, 56px) - var(--live-bar-offset, 58px) - 100px);
    max-height: calc(100vh - var(--header-h, 56px) - var(--live-bar-offset, 58px) - 100px);
}

.course-edit-live-main {
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

.course-edit-live-preview {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

.course-edit-live-preview .course-reader {
    overflow-x: hidden;
}

.live-image-wrap:not(.live-image-wrap--inline) {
    max-width: 100%;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.live-image-wrap:not(.live-image-wrap--inline) .reader-figure {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.live-image-wrap:not(.live-image-wrap--inline) img.reader-img {
    display: block;
    max-width: min(100%, var(--reader-img-max-w, 280px));
    width: auto;
    height: auto;
    max-height: min(var(--reader-img-max-h, var(--reader-solo-max-height, 320px)), 40vh);
    object-fit: contain;
}

.live-image-wrap--inline {
    margin: 0;
    width: fit-content;
    max-width: 100%;
}

.course-edit-live-slides {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 320px;
    max-width: 100%;
    height: var(--slides-panel-height, calc(100vh - var(--header-h, 56px) - 88px));
    max-height: var(--slides-panel-height, calc(100vh - var(--header-h, 56px) - 88px));
    position: sticky;
    top: calc(var(--header-h, 56px) + var(--live-bar-offset, 58px) + 10px);
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 12px 14px;
    border-radius: 16px;
    background: linear-gradient(165deg, rgba(10, 32, 52, .97), rgba(6, 22, 36, .95));
    border: 1px solid rgba(62, 207, 212, .14);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .32);
    overflow: visible;
    z-index: 5;
}

.course-edit-live-slides__resize-edge {
    position: absolute;
    z-index: 8;
    padding: 0;
    border: 0;
    background: transparent;
    touch-action: none;
}

.course-edit-live-slides__resize-edge--left {
    left: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    transform: translateX(-50%);
    cursor: col-resize;
}

.course-edit-live-slides__resize-edge--bottom {
    left: 0;
    right: 0;
    bottom: 0;
    height: 10px;
    transform: translateY(50%);
    cursor: row-resize;
}

.course-edit-live-slides__resize-edge::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    background: rgba(62, 207, 212, .35);
    opacity: 0;
    transition: opacity .15s ease, background .15s ease;
}

.course-edit-live-slides__resize-edge--left::after {
    left: 50%;
    top: 18%;
    bottom: 18%;
    width: 3px;
    transform: translateX(-50%);
}

.course-edit-live-slides__resize-edge--bottom::after {
    left: 18%;
    right: 18%;
    top: 50%;
    height: 3px;
    transform: translateY(-50%);
}

.course-edit-live-slides:hover .course-edit-live-slides__resize-edge::after,
.course-edit-live-slides:focus-within .course-edit-live-slides__resize-edge::after,
body.course-edit-live-slides-resizing .course-edit-live-slides__resize-edge::after {
    opacity: 1;
}

.course-edit-live-slides__resize-edge:hover::after,
.course-edit-live-slides__resize-edge:focus-visible::after {
    background: rgba(62, 207, 212, .75);
}

body.course-edit-live-slides-resizing {
    user-select: none;
    cursor: col-resize;
}

body.course-edit-live-slides-resizing--y {
    cursor: row-resize;
}

.course-edit-live-body--slides-focus .course-edit-live-slides__resize-edge,
.course-edit-live-slides:not(.is-open) .course-edit-live-slides__resize-edge {
    display: none;
}

.course-edit-live-body:not(.course-edit-live-body--slides-open):not(.course-edit-live-body--slides-wide):not(.course-edit-live-body--slides-focus) .course-edit-live-slides {
    display: none;
}

.course-edit-live-slides:not(.is-open) {
    display: none;
}

.course-edit-live-slides__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 10px;
    flex-shrink: 0;
}

.course-edit-live-slides__title-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 140px;
    min-width: 0;
}

.course-edit-live-slides__head strong {
    font-size: .92rem;
    letter-spacing: .01em;
    white-space: nowrap;
}

.course-edit-live-slides__count {
    font-size: .75rem;
}

.course-edit-live-slides__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 1 auto;
    margin-left: auto;
}

.course-edit-live-slides__actions .btn {
    padding: 4px 10px;
    font-size: .78rem;
    white-space: nowrap;
}

.course-edit-live-slides__actions .btn[aria-pressed="true"] {
    border-color: rgba(62, 207, 212, .55);
    background: rgba(62, 207, 212, .12);
    color: var(--cyan, #3ecfd4);
}

.course-edit-live-slides__hint {
    margin: 0;
    line-height: 1.4;
    flex-shrink: 0;
}

.course-edit-live-slides__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 4px 8px 2px;
    min-height: 0;
    flex: 1 1 auto;
    align-content: start;
    scrollbar-gutter: stable;
}

.course-edit-live-body--slides-wide .course-edit-live-slides__grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.course-edit-live-slides__card {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.course-edit-live-slides__card figcaption {
    color: rgba(255, 255, 255, .7);
    font-weight: 600;
    font-size: .78rem;
    padding-left: 2px;
}

.course-edit-live-slides__zoom {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: rgba(0, 0, 0, .35);
    cursor: zoom-in;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.course-edit-live-slides__zoom:hover,
.course-edit-live-slides__zoom:focus-visible {
    border-color: rgba(62, 207, 212, .45);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    transform: translateY(-1px);
}

.course-edit-live-slides__zoom img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    background: rgba(0, 0, 0, .25);
}

.course-edit-live-slides-reopen {
    display: none;
}

@media (max-width: 1100px) {
    .course-edit-live-body--slides-open,
    .course-edit-live-body--slides-wide,
    .course-edit-live-body--slides-focus {
        grid-template-columns: minmax(0, 1fr);
    }

    .course-edit-live-slides {
        grid-column: 1;
        position: relative;
        top: 0;
        height: min(62vh, 560px);
        max-height: min(62vh, 560px);
    }

    .course-edit-live-body--slides-wide .course-edit-live-slides__grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    }

    .course-edit-live-slides__resize-edge {
        display: none;
    }
}

@media (max-width: 720px) {
    .course-edit-live {
        --live-bar-offset: 52px;
        gap: 8px;
    }

    .course-edit-live-body,
    .course-edit-live-body--slides-open,
    .course-edit-live-body--slides-wide {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .course-edit-live-slides {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        height: min(48vh, 420px);
        max-height: min(48vh, 420px);
        position: relative;
        top: auto;
        padding: 10px;
        border-radius: 12px;
    }

    .course-edit-live-body--slides-wide .course-edit-live-slides__grid,
    .course-edit-live-body--slides-focus .course-edit-live-slides__grid {
        grid-template-columns: 1fr;
    }

    .course-edit-live-body--slides-focus .course-edit-live-slides {
        position: fixed;
        z-index: 120;
        left: max(6px, env(safe-area-inset-left));
        right: max(6px, env(safe-area-inset-right));
        bottom: max(6px, env(safe-area-inset-bottom));
        top: calc(var(--header-h, 56px) + var(--live-bar-offset, 52px) + 6px);
        width: auto;
        height: auto;
        max-height: none;
        border-radius: 14px;
    }

    .course-edit-live-body--slides-focus .course-edit-live-slides__grid {
        max-height: calc(100dvh - var(--header-h, 56px) - var(--live-bar-offset, 52px) - 100px);
        max-height: calc(100vh - var(--header-h, 56px) - var(--live-bar-offset, 52px) - 100px);
    }

    .course-edit-live-slides__head {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .course-edit-live-slides__actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .course-edit-live-slides__actions::-webkit-scrollbar {
        display: none;
    }

    .course-edit-live-slides__actions .btn {
        flex: 0 0 auto;
    }

    .course-edit-live-slides__actions [data-slide-panel-wide] {
        display: none;
    }

    .course-edit-live-slides__resize-edge {
        display: none;
    }

    .course-edit-live-slides__hint {
        font-size: .78rem;
    }

    .course-edit-live-bar {
        top: calc(var(--header-h, 56px) + max(4px, env(safe-area-inset-top)));
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 12px;
    }

    .course-edit-live-bar__start {
        width: 100%;
        min-width: 0;
    }

    .course-edit-live-bar__title {
        display: block;
        flex: 1;
        font-size: .82rem;
        max-width: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .course-edit-live-bar__actions {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
        padding-bottom: 2px;
        justify-content: flex-start;
    }

    .course-edit-live-bar__actions::-webkit-scrollbar {
        display: none;
    }

    .course-edit-live-bar__actions .btn {
        flex: 0 0 auto;
        font-size: .74rem;
        padding: 6px 10px;
        white-space: nowrap;
    }

    .course-edit-live-bar__status:not([hidden]) {
        width: 100%;
        justify-content: center;
        margin-right: auto;
    }

    .course-edit-live .gemini-import-panel {
        margin-top: 0;
    }
}

.live-pptx-pick--slide img {
    object-fit: contain;
    background: rgba(0, 0, 0, .2);
}

.course-edit-live-bar {
    position: sticky;
    top: calc(var(--header-h, 56px) + 6px);
    z-index: 55;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 10px 14px;
    margin: 0 0 4px;
    border-radius: 14px;
    background: rgba(8, 28, 44, .94);
    border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
}

.course-edit-live-bar.is-stuck {
    border-color: rgba(62, 207, 212, .22);
    box-shadow: 0 10px 32px rgba(0, 0, 0, .38);
}

.course-edit-live-bar__start {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.course-edit-live-bar__title {
    font-weight: 600;
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(42vw, 320px);
}

.course-edit-live-bar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.course-edit-live-bar__actions [data-slide-panel-bar-toggle][aria-pressed="true"] {
    border-color: rgba(62, 207, 212, .55);
    background: rgba(62, 207, 212, .1);
    color: var(--accent, #3ecfd4);
}

.course-edit-live-preview .course-reader {
    margin-top: 0;
    max-width: 100%;
    min-width: 0;
}

.course-reader-read-status.is-edit {
    color: var(--accent, #3ecfd4);
    border: 1px solid rgba(62, 207, 212, .35);
    background: rgba(62, 207, 212, .08);
}

.course-content-editor-dialog {
    width: min(960px, calc(100vw - 24px));
    max-width: min(960px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    margin: auto;
}

.course-content-editor-dialog__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 24px);
    padding: 18px 20px 16px;
    overflow: hidden;
}

.course-content-editor-dialog .edit-dialog-head {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.course-content-editor-dialog .edit-dialog-head h3 {
    font-size: 1.05rem;
}

.course-content-editor-dialog .edit-dialog-head [data-close-content-editor] {
    margin-left: auto;
    flex-shrink: 0;
}

.course-content-editor-dialog .edit-dialog-foot {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 12px;
    background: var(--surface, #0f2f47);
    position: sticky;
    bottom: 0;
}

.blocks-editor--dialog {
    flex: 1 1 auto;
    min-height: min(58vh, 620px);
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    -webkit-overflow-scrolling: touch;
}

.blocks-editor--dialog .blocks-editor-section {
    margin-bottom: 12px;
    overflow: visible;
}

.blocks-editor--dialog .blocks-editor-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.blocks-editor--dialog .blocks-editor-section-head input {
    flex: 1 1 14rem;
    min-width: 0;
    width: auto;
}

.blocks-editor--dialog .blocks-editor-section-meta {
    font-size: .82rem;
    color: var(--text-dim, rgba(255, 255, 255, .65));
    white-space: nowrap;
    flex-shrink: 0;
}

.blocks-editor--dialog .blocks-editor-blocks {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.blocks-editor--dialog .blocks-editor-block {
    margin-top: 0;
}

.blocks-editor--dialog .blocks-editor-rich-body {
    min-height: 140px;
}

.blocks-editor--dialog textarea[data-objective] {
    min-height: 5.5rem;
    resize: vertical;
}

.blocks-editor--dialog .field textarea,
.blocks-editor--dialog .field input[type="text"],
.blocks-editor--dialog .field input[type="number"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.course-edit-live-bar__status.is-saved {
    color: var(--ok, #2bd4a0);
    font-weight: 600;
}

.course-edit-live-bar__status.is-error {
    color: var(--warn, #ffb347);
    font-weight: 600;
}

.course-edit-live-bar__status.is-saving,
.course-edit-live-bar__status[data-state="pending"] {
    color: var(--cyan, #3ecfd4);
    font-weight: 600;
}

.course-edit-live-bar__status:not([hidden]) {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(255, 255, 255, .1);
    white-space: nowrap;
}

.course-reader.is-live-editing [data-live-flash]:empty::before {
    content: 'Résumé court pour le mode pas à pas — laissez vide pour masquer, ou écrivez votre synthèse ici';
    color: var(--text-dim, rgba(255, 255, 255, .55));
}

.course-reader.is-live-editing [data-live-flash] {
    cursor: text;
    position: relative;
    outline: none;
    border-radius: 0;
    min-height: 1.4em;
}

.course-reader.is-live-editing [data-live-flash]:hover,
.course-reader.is-live-editing [data-live-flash]:focus {
    background: rgba(62, 207, 212, .03);
}

/* Édition inline — repères en L pointillés (pas de grand rectangle) */
.course-reader.is-live-editing [data-live-objective],
.course-reader.is-live-editing [data-live-section-title],
.course-reader.is-live-editing [data-live-block][data-block-type="text"] [data-live-editable="html"],
.course-reader.is-live-editing [data-live-block][data-block-type="list"] li,
.course-reader.is-live-editing [data-live-block][data-block-type="safety"] [data-live-editable="text"],
.course-reader.is-live-editing [data-live-block][data-block-type="takeaway"] [data-live-editable="text"] {
    cursor: text;
    position: relative;
    outline: none !important;
    border-radius: 0;
    transition: background .15s ease;
}

.course-reader.is-live-editing [data-live-objective]::after,
.course-reader.is-live-editing [data-live-section-title]::after,
.course-reader.is-live-editing [data-live-flash]::after,
.course-reader.is-live-editing [data-live-block][data-block-type="text"] [data-live-editable="html"]::after,
.course-reader.is-live-editing [data-live-block][data-block-type="list"] li::after,
.course-reader.is-live-editing [data-live-block][data-block-type="safety"] [data-live-editable="text"]::after,
.course-reader.is-live-editing [data-live-block][data-block-type="takeaway"] [data-live-editable="text"]::after {
    content: '';
    position: absolute;
    inset: -3px;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity .15s ease;
    --lc: rgba(62, 207, 212, .72);
    --lc-strong: rgba(62, 207, 212, .95);
    --lc-arm: 14px;
    background:
        repeating-linear-gradient(90deg, var(--lc) 0 3px, transparent 3px 6px) 0 0 / var(--lc-arm) 1px no-repeat,
        repeating-linear-gradient(180deg, var(--lc) 0 3px, transparent 3px 6px) 0 0 / 1px var(--lc-arm) no-repeat,
        repeating-linear-gradient(90deg, var(--lc) 0 3px, transparent 3px 6px) 100% 0 / var(--lc-arm) 1px no-repeat,
        repeating-linear-gradient(180deg, var(--lc) 0 3px, transparent 3px 6px) 100% 0 / 1px var(--lc-arm) no-repeat,
        repeating-linear-gradient(90deg, var(--lc) 0 3px, transparent 3px 6px) 0 100% / var(--lc-arm) 1px no-repeat,
        repeating-linear-gradient(180deg, var(--lc) 0 3px, transparent 3px 6px) 0 100% / 1px var(--lc-arm) no-repeat,
        repeating-linear-gradient(90deg, var(--lc) 0 3px, transparent 3px 6px) 100% 100% / var(--lc-arm) 1px no-repeat,
        repeating-linear-gradient(180deg, var(--lc) 0 3px, transparent 3px 6px) 100% 100% / 1px var(--lc-arm) no-repeat;
}

.course-reader.is-live-editing [data-live-objective]:hover::after,
.course-reader.is-live-editing [data-live-objective]:focus::after,
.course-reader.is-live-editing [data-live-section-title]:hover::after,
.course-reader.is-live-editing [data-live-section-title]:focus::after,
.course-reader.is-live-editing [data-live-flash]:hover::after,
.course-reader.is-live-editing [data-live-flash]:focus::after,
.course-reader.is-live-editing [data-live-block][data-block-type="text"] [data-live-editable="html"]:hover::after,
.course-reader.is-live-editing [data-live-block][data-block-type="text"] [data-live-editable="html"]:focus::after,
.course-reader.is-live-editing [data-live-block][data-block-type="list"] li:hover::after,
.course-reader.is-live-editing [data-live-block][data-block-type="list"] li:focus::after,
.course-reader.is-live-editing [data-live-block][data-block-type="safety"] [data-live-editable="text"]:hover::after,
.course-reader.is-live-editing [data-live-block][data-block-type="safety"] [data-live-editable="text"]:focus::after,
.course-reader.is-live-editing [data-live-block][data-block-type="takeaway"] [data-live-editable="text"]:hover::after,
.course-reader.is-live-editing [data-live-block][data-block-type="takeaway"] [data-live-editable="text"]:focus::after,
.course-reader.is-live-editing [data-live-block].is-editing [data-live-editable="html"]::after,
.course-reader.is-live-editing [data-live-block].is-editing [data-live-editable="text"]::after,
.course-reader.is-live-editing [data-live-block].is-editing li::after {
    opacity: 1;
}

.course-reader.is-live-editing [data-live-objective]:hover,
.course-reader.is-live-editing [data-live-section-title]:hover,
.course-reader.is-live-editing [data-live-block][data-block-type="text"] [data-live-editable="html"]:hover,
.course-reader.is-live-editing [data-live-block][data-block-type="list"] li:hover,
.course-reader.is-live-editing [data-live-block][data-block-type="safety"] [data-live-editable="text"]:hover,
.course-reader.is-live-editing [data-live-block][data-block-type="takeaway"] [data-live-editable="text"]:hover {
    background: rgba(62, 207, 212, .03);
}

.course-reader.is-live-editing [data-live-block].is-editing,
.course-reader.is-live-editing [data-live-objective]:focus,
.course-reader.is-live-editing [data-live-section-title]:focus {
    outline: none !important;
    background: rgba(62, 207, 212, .04);
}

.course-reader.is-live-editing [data-live-block].is-editing [data-live-editable="html"]::after,
.course-reader.is-live-editing [data-live-block].is-editing [data-live-editable="text"]::after,
.course-reader.is-live-editing [data-live-objective]:focus::after,
.course-reader.is-live-editing [data-live-section-title]:focus::after {
    opacity: 1;
    --lc: var(--lc-strong);
}

/* Texte à côté d'une photo : clics dans le vide passent à travers vers l'image */
.course-reader.is-live-editing .reader-media-row__body > .live-block-wrap,
.course-reader.is-live-editing .reader-media-row__body > .reader-block-text,
.course-reader.is-live-editing .reader-media-row__body > .reader-block-list {
    pointer-events: none;
}
.course-reader.is-live-editing .reader-media-row__body > .live-block-wrap *,
.course-reader.is-live-editing .reader-media-row__body > .reader-block-text *,
.course-reader.is-live-editing .reader-media-row__body > .reader-block-list * {
    pointer-events: auto;
}
.course-reader.is-live-editing .reader-media-row__body [data-live-editable="html"] {
    pointer-events: none;
}
.course-reader.is-live-editing .reader-media-row__body [data-live-editable="html"] > * {
    pointer-events: auto;
}
.course-reader.is-live-editing .reader-media-row__media {
    position: relative;
    z-index: 2;
}

.live-section-add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, .12);
}

.live-section-add__label {
    flex: 0 0 auto;
}

.live-course-add {
    margin-top: 16px;
    padding: 12px 14px;
    text-align: center;
}

.course-reader.is-live-editing [data-live-objective]:empty::before {
    content: 'Objectif du module (optionnel — laissez vide pour masquer aux élèves)';
    color: var(--text-dim, rgba(255, 255, 255, .55));
}

.course-edit-live .gemini-import-panel {
    margin-top: 4px;
}

.course-reader.is-live-editing [data-live-editable="image"],
.course-reader.is-live-editing .reader-img-placeholder {
    cursor: zoom-in;
    position: relative;
}

.course-reader.is-live-editing .reader-img-trigger--editable {
    cursor: zoom-in;
}

.course-reader.is-live-editing .reader-img-trigger--editable .reader-img {
    pointer-events: auto;
}

/* Repères en L aux coins — la zone centrale reste cliquable (agrandir) */
.course-reader.is-live-editing .reader-img-trigger--editable::after,
.course-reader.is-live-editing .reader-img-placeholder::after {
    content: '';
    position: absolute;
    inset: -4px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity .15s ease;
    --corner-color: rgba(62, 207, 212, .88);
    --corner-arm: 18px;
    --corner-thick: 2px;
    background:
        linear-gradient(var(--corner-color), var(--corner-color)) 0 0 / var(--corner-arm) var(--corner-thick) no-repeat,
        linear-gradient(var(--corner-color), var(--corner-color)) 0 0 / var(--corner-thick) var(--corner-arm) no-repeat,
        linear-gradient(var(--corner-color), var(--corner-color)) 100% 0 / var(--corner-arm) var(--corner-thick) no-repeat,
        linear-gradient(var(--corner-color), var(--corner-color)) 100% 0 / var(--corner-thick) var(--corner-arm) no-repeat,
        linear-gradient(var(--corner-color), var(--corner-color)) 0 100% / var(--corner-arm) var(--corner-thick) no-repeat,
        linear-gradient(var(--corner-color), var(--corner-color)) 0 100% / var(--corner-thick) var(--corner-arm) no-repeat,
        linear-gradient(var(--corner-color), var(--corner-color)) 100% 100% / var(--corner-arm) var(--corner-thick) no-repeat,
        linear-gradient(var(--corner-color), var(--corner-color)) 100% 100% / var(--corner-thick) var(--corner-arm) no-repeat;
}

.live-image-wrap:hover .reader-img-trigger--editable::after,
.live-image-wrap.is-image-active .reader-img-trigger--editable::after,
.live-image-wrap:hover .reader-img-placeholder::after,
.live-image-wrap.is-image-active .reader-img-placeholder::after,
.reader-media-row__media:hover .reader-img-trigger--editable::after,
.reader-media-row__media.is-image-active .reader-img-trigger--editable::after,
.reader-media-row__media:hover .reader-img-placeholder::after,
.reader-media-row__media.is-image-active .reader-img-placeholder::after,
[data-live-editable="image"].is-image-active::after,
.reader-img-placeholder.is-image-active::after {
    opacity: 1;
}

.course-reader.is-live-editing .reader-img-edit-hint {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: .72rem;
    background: rgba(8, 28, 44, .82);
    color: #fff;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    white-space: nowrap;
}

.live-image-wrap:hover .reader-img-edit-hint,
.live-image-wrap.is-image-active .reader-img-edit-hint,
.reader-media-row__media:hover .reader-img-edit-hint,
.reader-media-row__media.is-image-active .reader-img-edit-hint,
[data-live-editable="image"].is-image-active .reader-img-edit-hint {
    opacity: 1;
}

.course-reader.is-live-editing .reader-img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    width: var(--reader-img-max-w, 280px);
    max-width: 100%;
    min-height: min(var(--reader-img-max-h, 180px), 28vh);
    padding: 20px;
    border: none;
    border-radius: 12px;
    background: rgba(62, 207, 212, .05);
    text-align: center;
}

.course-reader.is-live-editing .reader-figure--editable figcaption[data-live-caption] {
    margin-top: 8px;
    cursor: text;
    position: relative;
    outline: none !important;
}

.course-reader.is-live-editing .reader-figure--editable figcaption[data-live-caption]::after {
    content: '';
    position: absolute;
    inset: -2px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    --lc: rgba(62, 207, 212, .72);
    --lc-arm: 10px;
    background:
        repeating-linear-gradient(90deg, var(--lc) 0 3px, transparent 3px 6px) 0 0 / var(--lc-arm) 1px no-repeat,
        repeating-linear-gradient(180deg, var(--lc) 0 3px, transparent 3px 6px) 0 0 / 1px var(--lc-arm) no-repeat,
        repeating-linear-gradient(90deg, var(--lc) 0 3px, transparent 3px 6px) 100% 0 / var(--lc-arm) 1px no-repeat,
        repeating-linear-gradient(180deg, var(--lc) 0 3px, transparent 3px 6px) 100% 0 / 1px var(--lc-arm) no-repeat,
        repeating-linear-gradient(90deg, var(--lc) 0 3px, transparent 3px 6px) 0 100% / var(--lc-arm) 1px no-repeat,
        repeating-linear-gradient(180deg, var(--lc) 0 3px, transparent 3px 6px) 0 100% / 1px var(--lc-arm) no-repeat,
        repeating-linear-gradient(90deg, var(--lc) 0 3px, transparent 3px 6px) 100% 100% / var(--lc-arm) 1px no-repeat,
        repeating-linear-gradient(180deg, var(--lc) 0 3px, transparent 3px 6px) 100% 100% / 1px var(--lc-arm) no-repeat;
}

.course-reader.is-live-editing .reader-figure--editable figcaption[data-live-caption]:hover::after,
.course-reader.is-live-editing .reader-figure--editable figcaption[data-live-caption]:focus::after {
    opacity: 1;
}

.course-reader.is-live-editing .reader-figure--editable figcaption[data-live-caption]:hover,
.course-reader.is-live-editing .reader-figure--editable figcaption[data-live-caption]:focus {
    background: rgba(62, 207, 212, .03);
}

.live-image-popover {
    position: fixed;
    z-index: 10050;
    width: min(580px, calc(100vw - 20px));
    max-height: min(680px, calc(100vh - 20px));
    overflow-y: auto;
    padding: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}

.live-image-popover__pptx {
    margin-top: 12px;
}

.live-pptx-gallery__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.live-pptx-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: min(70vh, 640px);
    overflow-y: auto;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid rgba(62, 207, 212, .25);
    border-radius: 10px;
    background: rgba(0, 0, 0, .2);
}

.live-pptx-gallery__slide-head {
    font-size: .78rem;
    font-weight: 600;
    color: rgba(62, 207, 212, .9);
    padding: 4px 2px 2px;
    position: sticky;
    top: 0;
    background: rgba(8, 28, 44, .95);
    z-index: 1;
}

.live-pptx-gallery__slide-head:not(:first-child) {
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 10px;
}

.live-pptx-gallery__slide-head + .live-pptx-pick,
.live-pptx-gallery__slide-head ~ .live-pptx-pick {
    /* picks follow head inline in flex column */
}

.live-pptx-gallery .live-pptx-pick {
    width: 100%;
}

.live-pptx-pick {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    text-align: left;
}

.live-pptx-pick--large {
    border-color: rgba(62, 207, 212, .25);
    background: rgba(62, 207, 212, .06);
}

.live-pptx-pick:hover,
.live-pptx-pick:focus-visible {
    border-color: rgba(62, 207, 212, .75);
    background: rgba(62, 207, 212, .1);
    outline: none;
}

.live-pptx-pick img {
    flex: 0 0 auto;
    width: 120px;
    height: 90px;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
}

.live-pptx-pick--large img {
    width: 160px;
    height: 115px;
}

.live-pptx-pick__meta {
    font-size: .8rem;
    color: var(--text-dim, rgba(255, 255, 255, .75));
    line-height: 1.35;
}

.live-pptx-gallery__kind-head {
    font-size: .82rem;
    font-weight: 700;
    color: rgba(255, 200, 120, .95);
    padding: 10px 2px 4px;
    margin-top: 6px;
}

.live-pptx-gallery__kind-head:first-child {
    margin-top: 0;
}

.live-pptx-pick--text {
    opacity: .72;
}

.live-pptx-pick--text img {
    width: 100px;
    height: 72px;
}

.live-pptx-slide-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.live-pptx-slide-block:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.live-pptx-pick--slide-preview img {
    width: 100%;
    max-width: 520px;
    height: auto;
    max-height: 180px;
    object-fit: contain;
}

.live-pptx-embeds {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 4px;
}

.live-pptx-pick--embed {
    flex: 0 1 auto;
    width: auto;
    max-width: calc(50% - 4px);
}

.live-pptx-pick--embed img {
    width: 100px;
    height: 75px;
}

.live-image-popover__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.live-image-popover__head-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.reader-lightbox[data-live-image-lightbox] {
    z-index: 10100;
}

.live-image-popover__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}

.live-image-popover__moves {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.live-image-popover__delete,
.live-image-chrome__delete,
.live-block-chrome__delete,
.live-block-inline-delete {
    color: var(--warn, #ffb347);
}

.reader-block-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    pointer-events: none;
}

.reader-block-top .reader-block-label {
    margin-bottom: 0;
}

.reader-block-toolbar {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}

.course-reader.is-live-editing .reader-block-text,
.course-reader.is-live-editing .reader-block-list {
    position: relative;
    padding-right: 36px;
}

.reader-block-text-body {
    min-height: 1.4em;
}

.live-block-inline-delete,
.live-section-inline-delete,
.live-image-chrome__delete {
    user-select: none;
    -webkit-user-select: none;
}

.live-delete-icon {
    display: block;
    line-height: 1;
    pointer-events: none;
}

.reader-block-toolbar,
.reader-block-top,
.live-image-chrome,
.live-block-chrome {
    user-select: none;
}

.live-block-inline-delete {
    flex-shrink: 0;
    min-width: 28px;
    min-height: 28px;
    padding: 2px 6px;
    line-height: 1;
    opacity: .75;
    cursor: pointer;
}

.live-section-inline-delete {
    align-self: center;
}

.live-block-inline-delete:hover {
    opacity: 1;
}

.course-reader.is-live-editing .live-block-inline-delete {
    outline: none;
    pointer-events: auto;
}

.course-reader.is-live-editing .reader-block-toolbar,
.course-reader.is-live-editing .reader-block-top {
    pointer-events: none;
}

.course-reader.is-live-editing .reader-block-toolbar .live-block-inline-delete,
.course-reader.is-live-editing .reader-block-top .live-block-inline-delete {
    pointer-events: auto;
}

.live-block-wrap {
    position: relative;
    margin: 12px 0;
}

.live-block-chrome {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
    padding: 4px 6px;
    border-radius: 8px;
    background: rgba(62, 207, 212, .06);
    border: 1px solid rgba(62, 207, 212, .15);
}

.live-image-wrap {
    position: relative;
    margin: 12px 0;
    user-select: none;
    -webkit-user-select: none;
}

.course-reader.is-live-editing .reader-img-placeholder__icon {
    font-size: 2rem;
}

.course-reader.is-live-editing .reader-img-placeholder__text {
    font-size: .92rem;
    color: var(--text-dim, rgba(255, 255, 255, .75));
    line-height: 1.45;
}

.course-reader.is-live-editing .reader-img-placeholder__file {
    font-size: .78rem;
    color: var(--text-dim, rgba(255, 255, 255, .55));
    font-family: ui-monospace, monospace;
}

.live-image-wrap.is-image-active,
.reader-media-row__media.is-image-active {
    outline: none;
    border-radius: 0;
}

.course-reader.is-live-editing .reader-media-row__media {
    user-select: none;
    -webkit-user-select: none;
}

.course-reader.is-live-editing .reader-media-row:not(.reader-media-row--stack) .reader-media-row__body {
    display: flow-root;
}

.course-reader.is-live-editing .reader-media-row--wrap .reader-media-row__body > .live-block-wrap,
.course-reader.is-live-editing .reader-media-row--wrap .reader-media-row__body > .reader-block-text,
.course-reader.is-live-editing .reader-media-row--wrap .reader-media-row__body > .reader-block-list {
    min-width: 0;
}

.course-reader.is-live-editing .reader-media-row--wrap .reader-media-row__body .reader-block-text,
.course-reader.is-live-editing .reader-media-row--wrap .reader-media-row__body .reader-block-list {
    margin: 0;
}

.course-reader.is-live-editing .reader-field-line {
    position: relative;
    padding-right: 3.25rem;
}
.course-reader.is-live-editing .live-field-color-btn {
    position: absolute;
    top: .2em;
    right: 1.65rem;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    background: var(--swatch, var(--cyan));
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}
.course-reader.is-live-editing .reader-field-line:hover .live-field-color-btn,
.course-reader.is-live-editing .reader-field-line:focus-within .live-field-color-btn {
    opacity: 1;
}
.live-field-color-popover {
    position: fixed;
    z-index: 10050;
    width: 268px;
    padding: 12px 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}
.live-field-color-popover__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: .9rem;
}
.live-field-color-popover__wheel {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}
.live-field-color-input {
    -webkit-appearance: none;
    appearance: none;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 3px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    overflow: hidden;
}
.live-field-color-input::-webkit-color-swatch-wrapper {
    padding: 0;
}
.live-field-color-input::-webkit-color-swatch {
    border: 0;
    border-radius: 50%;
}
.live-field-color-input::-moz-color-swatch {
    border: 0;
    border-radius: 50%;
}
.live-field-color-popover__label {
    margin-bottom: 10px;
}
.live-field-color-popover__confirm {
    width: 100%;
}
.course-reader.is-live-editing .live-field-delete {
    position: absolute;
    top: .15em;
    right: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 107, 61, .15);
    color: var(--warn, #ff6b3d);
    cursor: pointer;
    line-height: 1;
    opacity: 0;
    transition: opacity .15s ease;
}
.course-reader.is-live-editing .reader-field-line:hover .live-field-delete,
.course-reader.is-live-editing .reader-field-line:focus-within .live-field-delete {
    opacity: 1;
}
.course-reader.is-live-editing .reader-organ-block {
    position: relative;
}
.course-reader.is-live-editing .live-organ-chrome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    background: transparent;
    user-select: none;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity .15s ease, max-height .2s ease, margin .2s ease;
}
.course-reader.is-live-editing .reader-organ-block:hover .live-organ-chrome,
.course-reader.is-live-editing .reader-organ-block:focus-within .live-organ-chrome {
    opacity: 1;
    max-height: 36px;
    pointer-events: auto;
}
.course-reader.is-live-editing .live-organ-chrome .btn {
    font-size: .72rem;
    padding: 2px 8px;
    min-height: 0;
    line-height: 1.35;
}
.course-reader.is-live-editing .live-organ-chrome__delete {
    margin-left: auto;
    color: var(--warn, #ff6b3d);
}
.course-reader.is-live-editing .live-section-add {
    flex-wrap: wrap;
}

.course-reader.is-live-editing .reader-media-row .live-block-wrap {
    margin: 0;
}
.course-reader.is-live-editing .reader-media-row .reader-block-text [data-live-editable="html"]:focus {
    outline: none !important;
    background: rgba(62, 207, 212, .03);
}
.course-reader.is-live-editing .reader-media-row [data-live-block][data-block-type="text"].is-editing {
    outline: none;
    background: transparent;
}
.course-reader.is-live-editing .live-image-wrap--inline .live-image-chrome {
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    pointer-events: none;
    transition: opacity .15s ease, max-height .2s ease, margin .2s ease, padding .2s ease;
}
.course-reader.is-live-editing .live-image-wrap--inline:hover .live-image-chrome,
.course-reader.is-live-editing .live-image-wrap--inline.is-image-active .live-image-chrome,
.course-reader.is-live-editing .live-image-wrap--inline:focus-within .live-image-chrome {
    opacity: 1;
    max-height: 120px;
    margin-bottom: 8px;
    padding: 6px 8px;
    border: 1px solid rgba(62, 207, 212, .2);
    pointer-events: auto;
}

.course-reader.is-live-editing [data-live-editable="image"]:focus,
.course-reader.is-live-editing .reader-img-placeholder:focus {
    outline: none;
    box-shadow: none;
}

.live-image-chrome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-bottom: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(62, 207, 212, .08);
    border: 1px solid rgba(62, 207, 212, .2);
}

.live-image-chrome__order,
.live-image-chrome__align,
.live-image-chrome__size {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.live-image-chrome__align .btn.is-active,
.live-image-chrome__size .btn.is-active,
.live-image-popover__moves .btn.is-active {
    background: rgba(62, 207, 212, .18);
    color: var(--accent, #3ecfd4);
    border-color: rgba(62, 207, 212, .35);
}

.live-image-chrome .btn:disabled {
    opacity: .35;
    pointer-events: none;
}

@media (hover: none), (pointer: coarse) {
    .course-reader.is-live-editing .live-field-color-btn,
    .course-reader.is-live-editing .live-field-delete {
        opacity: 1;
    }

    .course-reader.is-live-editing .reader-field-line {
        padding-right: 3.5rem;
    }

    .course-reader.is-live-editing .live-organ-chrome {
        opacity: 1;
        max-height: 120px;
        margin: 0 0 6px;
        padding: 6px 8px;
        border: 1px solid rgba(62, 207, 212, .2);
        background: rgba(62, 207, 212, .08);
        pointer-events: auto;
    }

    .course-reader.is-live-editing .live-image-wrap--inline.is-image-active .live-image-chrome,
    .course-reader.is-live-editing .live-image-wrap--gallery.is-image-active .live-image-chrome {
        opacity: 1;
        max-height: 160px;
        margin-bottom: 8px;
        padding: 6px 8px;
        border: 1px solid rgba(62, 207, 212, .2);
        pointer-events: auto;
    }

    .course-reader.is-live-editing .reader-block-image--solo .live-image-chrome {
        opacity: 1;
        pointer-events: auto;
    }

    .live-image-chrome__align .btn,
    .live-image-chrome__size .btn {
        min-width: 2.1rem;
        min-height: 2.1rem;
    }
}

/* =====================================================================
   Thème clair — composants récents (compte, sidebar client, éditeur live)
   ===================================================================== */
[data-theme="lagoon-light"] .staff-nav-alpha-prompt {
    border-color: rgba(10, 133, 160, .28);
    background: rgba(10, 133, 160, .06);
}

[data-theme="lagoon-light"] .staff-sidebar__alpha-badge {
    background: rgba(180, 83, 9, .12);
    color: var(--warn);
    border-color: rgba(180, 83, 9, .28);
}

[data-theme="lagoon-light"] .staff-sidebar__body::-webkit-scrollbar-thumb {
    background: rgba(10, 133, 160, .28);
}

[data-theme="lagoon-light"] .staff-sidebar__body::-webkit-scrollbar-thumb:hover {
    background: rgba(10, 133, 160, .42);
}

[data-theme="lagoon-light"] .mixup-account-panel .account-form-actions {
    border-top-color: var(--lagon-inset-border);
}

[data-theme="lagoon-light"] .mixup-account-panel input:-webkit-autofill,
[data-theme="lagoon-light"] .mixup-account-panel input:-webkit-autofill:hover,
[data-theme="lagoon-light"] .mixup-account-panel input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #f8fcff inset;
    -webkit-text-fill-color: var(--text);
}

[data-theme="lagoon-light"] .mixup-account-block--danger {
    border-color: rgba(190, 18, 60, .22);
    background: rgba(190, 18, 60, .06);
}

[data-theme="lagoon-light"] .mixup-account-panel .account-status {
    background: rgba(10, 133, 160, .08);
    border: 1px solid rgba(10, 133, 160, .16);
    color: var(--text-dim);
}

[data-theme="lagoon-light"] .account-device-card {
    background: var(--lagon-inset);
    border-color: var(--lagon-inset-border);
}

[data-theme="lagoon-light"] .account-device-card--current {
    border-color: rgba(10, 133, 160, .35);
    background: rgba(10, 133, 160, .08);
}

[data-theme="lagoon-light"] .account-device-card__icon {
    border-color: rgba(10, 133, 160, .24);
    background: rgba(10, 133, 160, .1);
    color: var(--cyan);
}

[data-theme="lagoon-light"] .account-delete-warning__ico {
    background: rgba(190, 18, 60, .12);
    color: var(--danger);
    border-color: rgba(190, 18, 60, .28);
}

[data-theme="lagoon-light"] .account-delete-warning__title {
    color: var(--danger);
}

[data-theme="lagoon-light"] .course-edit-live-bar {
    background: rgba(237, 244, 249, .96);
    border-color: var(--border-soft);
    box-shadow: var(--shadow);
    color: var(--text);
}

[data-theme="lagoon-light"] .course-edit-live-bar.is-stuck {
    border-color: rgba(10, 133, 160, .28);
    box-shadow: var(--shadow-glow);
}

[data-theme="lagoon-light"] .course-edit-live-bar__title {
    color: var(--text);
}

[data-theme="lagoon-light"] .course-edit-live-bar__actions [data-slide-panel-bar-toggle][aria-pressed="true"] {
    border-color: rgba(10, 133, 160, .45);
    background: rgba(10, 133, 160, .1);
    color: var(--cyan);
}

[data-theme="lagoon-light"] .course-edit-live-bar__status:not([hidden]) {
    background: rgba(10, 133, 160, .1);
    border-color: rgba(10, 133, 160, .2);
}

[data-theme="lagoon-light"] .course-edit-live-bar__status.is-saved {
    color: var(--ok);
}

[data-theme="lagoon-light"] .course-edit-live-bar__status.is-error {
    color: var(--warn);
}

[data-theme="lagoon-light"] .course-edit-live-bar__status.is-saving,
[data-theme="lagoon-light"] .course-edit-live-bar__status[data-state="pending"] {
    color: var(--cyan);
}

[data-theme="lagoon-light"] .course-edit-live-slides {
    background: var(--lagon-surface);
    border-color: var(--lagon-surface-border);
    box-shadow: var(--lagon-surface-shadow);
}

[data-theme="lagoon-light"] .course-edit-live-slides__head strong {
    color: var(--text);
}

[data-theme="lagoon-light"] .course-edit-live-slides__count,
[data-theme="lagoon-light"] .course-edit-live-slides__hint {
    color: var(--text-muted);
}

[data-theme="lagoon-light"] .course-edit-live-slides__actions .btn[aria-pressed="true"] {
    border-color: rgba(10, 133, 160, .45);
    background: rgba(10, 133, 160, .12);
    color: var(--cyan);
}

[data-theme="lagoon-light"] .course-edit-live-slides__card figcaption {
    color: var(--text-dim);
}

[data-theme="lagoon-light"] .course-edit-live-slides__zoom {
    border-color: var(--border-soft);
    background: var(--surface);
}

[data-theme="lagoon-light"] .course-edit-live-slides__zoom:hover,
[data-theme="lagoon-light"] .course-edit-live-slides__zoom:focus-visible {
    border-color: rgba(10, 133, 160, .35);
    box-shadow: 0 0 0 3px rgba(10, 133, 160, .12);
}

[data-theme="lagoon-light"] .course-edit-live-slides__resize-edge::after {
    background: rgba(10, 133, 160, .35);
}

[data-theme="lagoon-light"] .course-edit-live-slides__resize-edge:hover::after,
[data-theme="lagoon-light"] .course-edit-live-slides__resize-edge:focus-visible::after {
    background: rgba(10, 133, 160, .55);
}

[data-theme="lagoon-light"] .course-edit-live-body--slides-focus .course-edit-live-slides {
    box-shadow: 0 20px 48px rgba(8, 40, 60, .16);
}

[data-theme="lagoon-light"] .course-reader-read-status.is-edit {
    color: var(--cyan);
    border-color: rgba(10, 133, 160, .32);
    background: rgba(10, 133, 160, .08);
}

[data-theme="lagoon-light"] .course-reader.is-live-editing [data-live-objective]:empty::before {
    color: var(--text-muted);
}

[data-theme="lagoon-light"] .course-reader.is-live-editing [data-live-objective]:hover,
[data-theme="lagoon-light"] .course-reader.is-live-editing [data-live-section-title]:hover,
[data-theme="lagoon-light"] .course-reader.is-live-editing [data-live-block][data-block-type="text"] [data-live-editable="html"]:hover,
[data-theme="lagoon-light"] .course-reader.is-live-editing [data-live-block][data-block-type="list"] li:hover,
[data-theme="lagoon-light"] .course-reader.is-live-editing [data-live-block][data-block-type="safety"] [data-live-editable="text"]:hover,
[data-theme="lagoon-light"] .course-reader.is-live-editing [data-live-block][data-block-type="takeaway"] [data-live-editable="text"]:hover,
[data-theme="lagoon-light"] .course-reader.is-live-editing .reader-figure--editable figcaption[data-live-caption]:hover {
    background: rgba(10, 133, 160, .06);
}

[data-theme="lagoon-light"] .course-reader.is-live-editing [data-live-block].is-editing,
[data-theme="lagoon-light"] .course-reader.is-live-editing [data-live-objective]:focus,
[data-theme="lagoon-light"] .course-reader.is-live-editing [data-live-section-title]:focus {
    outline: none !important;
    background: rgba(10, 133, 160, .08);
}

[data-theme="lagoon-light"] .course-reader.is-live-editing [data-live-objective]::after,
[data-theme="lagoon-light"] .course-reader.is-live-editing [data-live-section-title]::after,
[data-theme="lagoon-light"] .course-reader.is-live-editing [data-live-flash]::after,
[data-theme="lagoon-light"] .course-reader.is-live-editing [data-live-block][data-block-type="text"] [data-live-editable="html"]::after,
[data-theme="lagoon-light"] .course-reader.is-live-editing [data-live-block][data-block-type="list"] li::after,
[data-theme="lagoon-light"] .course-reader.is-live-editing [data-live-block][data-block-type="safety"] [data-live-editable="text"]::after,
[data-theme="lagoon-light"] .course-reader.is-live-editing [data-live-block][data-block-type="takeaway"] [data-live-editable="text"]::after {
    --lc: rgba(10, 133, 160, .72);
    --lc-strong: rgba(10, 133, 160, .95);
}

[data-theme="lagoon-light"] .live-block-chrome,
[data-theme="lagoon-light"] .course-reader.is-live-editing .live-organ-chrome,
[data-theme="lagoon-light"] .course-reader.is-live-editing .live-image-wrap--inline.is-image-active .live-image-chrome {
    background: rgba(10, 133, 160, .06);
    border-color: rgba(10, 133, 160, .18);
}

[data-theme="lagoon-light"] .live-image-wrap.is-image-active,
[data-theme="lagoon-light"] .reader-media-row__media.is-image-active {
    outline: none;
}

[data-theme="lagoon-light"] .course-reader.is-live-editing .reader-img-trigger--editable::after,
[data-theme="lagoon-light"] .course-reader.is-live-editing .reader-img-placeholder::after {
    --corner-color: rgba(10, 133, 160, .9);
}

[data-theme="lagoon-light"] .course-reader.is-live-editing .live-field-color-btn {
    border-color: rgba(8, 40, 60, .22);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .65);
}

[data-theme="lagoon-light"] .live-field-color-input {
    border-color: var(--border-soft);
}

[data-theme="lagoon-light"] .live-field-color-popover {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow);
}

[data-theme="lagoon-light"] .live-image-popover {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow);
}

[data-theme="lagoon-light"] .live-pptx-gallery {
    background: var(--surface-2);
    border-color: var(--border-soft);
}

[data-theme="lagoon-light"] .live-pptx-gallery__slide-head {
    color: var(--cyan);
    background: var(--surface);
}

[data-theme="lagoon-light"] .live-pptx-gallery__slide-head:not(:first-child) {
    border-top-color: var(--border-soft);
}

[data-theme="lagoon-light"] .live-pptx-pick {
    background: var(--surface);
}

[data-theme="lagoon-light"] .live-pptx-pick:hover,
[data-theme="lagoon-light"] .live-pptx-pick:focus-visible {
    background: rgba(10, 133, 160, .06);
    border-color: rgba(10, 133, 160, .28);
}

[data-theme="lagoon-light"] .live-pptx-pick--slide img {
    background: var(--surface-2);
}

[data-theme="lagoon-light"] .course-content-editor-dialog .edit-dialog-foot {
    background: var(--surface);
    border-top: 1px solid var(--border-soft);
}

/* --- Signalement bug (FAB) --- */
.bug-report-fab {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    z-index: 48;
    width: 3.25rem;
    height: 3.25rem;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(145deg, #f07850 0%, #d94a20 100%);
    box-shadow: 0 10px 28px rgba(217, 74, 32, .45);
    transition: transform .15s ease, box-shadow .15s ease;
}
.bug-report-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(217, 74, 32, .5);
}
.bug-report-fab:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
}
body.app-user .bug-report-fab {
    bottom: calc(4.75rem + env(safe-area-inset-bottom));
}
.bug-report-fab__ico { display: flex; }

.bug-report-dialog {
    width: min(92vw, 28rem);
    max-height: 90vh;
    padding: 0;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.bug-report-dialog::backdrop {
    background: rgba(4, 16, 28, .62);
    backdrop-filter: blur(2px);
}
.bug-report-dialog__form {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem 1rem 1.1rem;
}
.bug-report-dialog__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}
.bug-report-dialog__title {
    margin: 0;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: .45rem;
}
.bug-report-dialog__close {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: .2rem;
}
.bug-report-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
}
.bug-report-dialog__status.is-error { color: #fb923c; }
.bug-context-value { text-align: left; white-space: pre-wrap; word-break: break-word; }
.bug-context-pre {
    margin: .75rem 0 0;
    padding: .75rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, .2);
    font-size: .72rem;
    overflow: auto;
    max-height: 240px;
}
.bug-report-dev-page .support-back {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

/* --- Beta testeur (FAB + dialogs) --- */
.beta-tester-dialog__lead { margin: 0; line-height: 1.55; }
.beta-tester-dialog__actions {
    flex-direction: column;
    align-items: stretch;
    gap: .65rem;
}
.beta-tester-dialog__actions-main {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
}
.beta-tester-dialog--final {
    width: min(94vw, 34rem);
}
.beta-star-rating {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.beta-star-rating__item {
    display: inline-flex;
    cursor: pointer;
}
.beta-star-rating__item input { position: absolute; opacity: 0; pointer-events: none; }
.beta-star-rating__item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: 8px;
    border: 1px solid var(--border-soft);
    background: rgba(0, 0, 0, .15);
    font-weight: 700;
    color: var(--text-dim);
}
.beta-star-rating__item input:checked + span,
.beta-star-rating__item input:focus-visible + span {
    border-color: var(--cyan);
    color: var(--cyan-soft);
    background: rgba(46, 230, 255, .12);
}
.beta-choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}
.codes-generate-beta { margin-bottom: .5rem; }

.beta-welcome-dialog {
    width: min(92vw, 28rem);
    max-height: min(90vh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1rem));
    padding: 0;
    border: 2px solid #e85d4a;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(80, 18, 18, .96) 0%, rgba(28, 8, 8, .98) 100%);
    color: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    margin: auto;
    overflow: hidden;
}
.beta-welcome-dialog::backdrop {
    background: rgba(8, 4, 4, .72);
    backdrop-filter: blur(3px);
}
.beta-welcome-dialog__form {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: max(1.1rem, env(safe-area-inset-top, 0px)) 1.15rem max(1.15rem, env(safe-area-inset-bottom, 0px));
    max-height: min(90vh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1rem));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.beta-welcome-dialog__title {
    margin: 0;
    font-size: 1.15rem;
    color: #ffb4a8;
}
.beta-welcome-dialog__body p {
    margin: 0 0 .65rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
}
.beta-welcome-dialog__list {
    margin: 0 0 .85rem 1.1rem;
    padding: 0;
    line-height: 1.5;
    color: rgba(255, 255, 255, .92);
}
.beta-welcome-dialog__list li { margin-bottom: .35rem; }
.beta-welcome-dialog__notice {
    margin: .85rem 0 0;
    padding: .75rem .85rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 120, 90, .45);
    background: rgba(255, 90, 60, .12);
    line-height: 1.55;
    color: #ffd4cc;
}
.beta-welcome-dialog__body p:last-child { margin-bottom: 0; }
.beta-welcome-dialog__dismiss { color: rgba(255, 255, 255, .88); }
.beta-welcome-dialog__actions { display: flex; justify-content: flex-end; }

.password-wrap {
    position: relative;
    display: block;
}
.password-wrap input[type="password"],
.password-wrap input[type="text"] {
    width: 100%;
    padding-right: 2.75rem;
}
.password-toggle {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted, #8a8a8a);
    cursor: pointer;
}
.password-toggle:hover,
.password-toggle:focus-visible {
    color: var(--text, #1a1a1a);
    background: rgba(0, 0, 0, .06);
    outline: none;
}
.password-toggle__ico { display: block; }
.tag-warn {
    background: rgba(232, 93, 74, .18);
    color: #c44;
    border: 1px solid rgba(232, 93, 74, .35);
}

@media (max-width: 720px) {
    .beta-welcome-dialog {
        width: min(96vw, 28rem);
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - .5rem);
    }
    .beta-welcome-dialog__form {
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - .5rem);
    }
    .course-reader.is-live-editing .reader-media-row:not(.reader-media-row--stack) .reader-media-row__body {
        display: flex;
        flex-direction: column;
    }
    .course-reader.is-live-editing .reader-media-row:not(.reader-media-row--stack) .reader-media-row__body > .live-block-wrap,
    .course-reader.is-live-editing .reader-media-row:not(.reader-media-row--stack) .reader-media-row__body > .reader-block-text,
    .course-reader.is-live-editing .reader-media-row:not(.reader-media-row--stack) .reader-media-row__body > .reader-block-list {
        order: 1;
    }
    .course-reader.is-live-editing .reader-media-row:not(.reader-media-row--stack) .reader-media-row__media {
        order: 2;
        float: none;
        align-self: center;
    }
    .live-image-popover {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px - env(safe-area-inset-bottom));
        padding: 12px;
    }
    .live-image-popover__moves .btn {
        min-height: 2.35rem;
        padding-left: 10px;
        padding-right: 10px;
    }
    .live-field-color-popover {
        width: min(calc(100vw - 16px), 268px);
        max-height: calc(100dvh - 24px - env(safe-area-inset-bottom));
        overflow-y: auto;
    }
    .live-image-chrome {
        gap: 4px 6px;
        padding: 6px;
    }
    .live-image-chrome__align .btn,
    .live-image-chrome__size .btn {
        min-width: 2.25rem;
        min-height: 2.25rem;
        font-size: .82rem;
    }
    .bug-report-fab {
        right: max(.75rem, env(safe-area-inset-right));
        bottom: max(1rem, env(safe-area-inset-bottom));
    }
}