/* SPDX-License-Identifier: AGPL-3.0-or-later */
/**
 * SkillsCIEL — design system (charte Saint-Gabriel + tons apaisants Pantone-inspired).
 * Les niveaux d'évaluation (rouge / orange / vert / bleu) restent inchangés ailleurs.
 */
:root {
    /* --- Charte officielle --- */
    --stgab-grey: #7b8890;
    --stgab-red: #e3000b;
    --stgab-navy: #234957;
    --stgab-teal: #65bca3;
    --stgab-purple: #5a2875;

    /* --- Dérivés charte --- */
    --stgab-navy-dark: #1a3642;
    --stgab-navy-muted: #3d6574;
    --stgab-teal-dark: #2d6b5a;
    --stgab-teal-light: #a8d9cb;
    --stgab-teal-soft: #e8f6f1;
    --stgab-purple-dark: #3d1a4f;
    --stgab-purple-soft: #f3eaf7;
    --stgab-grey-dark: #5c6b73;
    --stgab-grey-soft: #eef1f2;
    --stgab-red-soft: #fde8ea;
    --stgab-warm-white: #f6f8f7;
    --stgab-cream: #faf9f7;

    /* --- Layout & typographie --- */
    --sc-page-bg: var(--stgab-warm-white);
    --sc-surface-bg: #ffffff;
    --sc-radius: 0.75rem;
    --sc-accordion-duration: 0.5s;
    /* Motion organique (phase A) — courbes et durées */
    --sc-motion-duration-instant: 0.12s;
    --sc-motion-duration-quick: 0.22s;
    --sc-motion-duration-flow: 0.7s;
    --sc-motion-ease-grow: cubic-bezier(0.34, 1.56, 0.64, 1);
    --sc-motion-ease-flow: cubic-bezier(0.22, 1, 0.36, 1);
    --sc-motion-ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
    --sc-motion-ease-breathe: cubic-bezier(0.33, 1, 0.68, 1);
    --sc-motion-flow-stagger-step: 60ms;
    --sc-motion-flow-offset: 8px;
    --sc-motion-duration-alive: 2.4s;
    --sc-saved-pulse-color: rgba(101, 188, 163, 0.35);
    --sc-saved-pulse-spread: 12px;
    --sc-accent-bar-width-hover: 8px;
    --sc-radius-lg: 1rem;
    --sc-text: var(--stgab-navy-dark);
    --sc-text-muted: var(--stgab-grey-dark);
    --sc-text-subtle: #8a969c;

    /* --- Sémantique UI (hors grille d'évaluation 1–4) --- */
    --sc-link: var(--stgab-navy);
    --sc-link-hover: var(--stgab-teal-dark);
    --sc-primary: var(--stgab-navy);
    --sc-primary-hover: var(--stgab-navy-dark);
    --sc-accent: var(--stgab-teal);
    --sc-accent-hover: var(--stgab-teal-dark);

    /* Barre latérale biseautée (cartes / alertes) */
    --sc-accent-bar-width: 6px;

    --sc-success-fg: var(--stgab-teal-dark);
    --sc-success-bg: var(--stgab-teal-soft);
    --sc-success-border: #b8e4d6;

    --sc-warning-fg: #8a6914;
    --sc-warning-bg: #fdf6e8;
    --sc-warning-border: #e8d4a0;

    --sc-error-fg: #b80009;
    --sc-error-bg: var(--stgab-red-soft);
    --sc-error-border: #f5b3b8;

    --sc-info-fg: var(--stgab-purple);
    --sc-info-bg: var(--stgab-purple-soft);
    --sc-info-border: #d4b8e0;

    /* --- Bandeaux navigation (visibilité renforcée) --- */
    --sc-nav-ddfpt-bg: #d4e4eb;
    --sc-nav-ddfpt-border: var(--stgab-navy);
    --sc-nav-pp-bg: #c5e8dc;
    --sc-nav-pp-border: var(--stgab-teal-dark);
    --sc-nav-prof-pro-bg: #ddd0e8;
    --sc-nav-prof-pro-border: var(--stgab-purple);
    --sc-nav-referent-bg: #cce8df;
    --sc-nav-referent-border: var(--stgab-teal);
    --sc-nav-student-bg: #dde3e6;
    --sc-nav-student-border: var(--stgab-grey);
    --sc-nav-teacher-bg: #e4e8ea;
    --sc-nav-teacher-border: var(--stgab-red);
    --sc-nav-admin-bg: #d8dce0;
    --sc-nav-admin-border: var(--stgab-red);
    --sc-nav-direction-bg: #ede4d4;
    --sc-nav-direction-border: #9a7b2f;

    /* --- Interactions globales --- */
    --sc-hover-menu: var(--stgab-teal-soft);
    --sc-hover-surface: rgba(35, 73, 87, 0.06);
    --sc-ring: rgba(101, 188, 163, 0.5);
    --sc-divider: #e2e8ea;

    /* Colorations PFMP — distinctes des niveaux d'évaluation */
    --sc-coloration-av-fg: var(--stgab-purple);
    --sc-coloration-av-bg: var(--stgab-purple-soft);
    --sc-coloration-elec-fg: var(--stgab-teal-dark);
    --sc-coloration-elec-bg: var(--stgab-teal-soft);
}

/* --- Base --- */
body {
    background-color: var(--sc-page-bg);
    color: var(--sc-text);
}

.sc-body {
    background-color: var(--sc-page-bg);
    color: var(--sc-text);
}

.sc-site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    border-top-width: 1px;
    border-top-style: solid;
    box-shadow: 0 -2px 12px rgba(35, 73, 87, 0.06);
}

.sc-site-footer__inner {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

@media (min-width: 640px) {
    .sc-site-footer__inner {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

.sc-site-footer__bar {
    min-height: 2rem;
}

.sc-site-footer__action-btn,
.sc-site-footer__help-btn {
    min-height: 2rem;
    min-width: 2rem;
    padding: 0.25rem;
}

@media (min-width: 640px) {
    .sc-site-footer__action-btn {
        min-height: 2.5rem;
        min-width: auto;
        padding: 0.25rem 0.5rem;
    }

    .sc-site-footer__help-btn {
        min-height: 2.75rem;
        min-width: 2.75rem;
        padding: 0.375rem;
    }
}

.sc-site-footer-external {
    border-top-color: rgba(123, 136, 144, 0.2);
}

.sc-site-footer--ddfpt {
    background-color: #e8f2f6;
    border-top-color: rgba(35, 73, 87, 0.16);
    color: var(--stgab-navy-muted);
}

.sc-site-footer--pp {
    background-color: #e0f3ec;
    border-top-color: rgba(45, 107, 90, 0.16);
    color: var(--stgab-navy-muted);
}

.sc-site-footer--prof-pro {
    background-color: #eee6f4;
    border-top-color: rgba(90, 40, 117, 0.16);
    color: #5a3d6e;
}

.sc-site-footer--referent {
    background-color: #e6f4ef;
    border-top-color: rgba(101, 188, 163, 0.22);
    color: var(--stgab-navy-muted);
}

.sc-site-footer--student {
    background-color: #eef2f4;
    border-top-color: rgba(123, 136, 144, 0.22);
    color: var(--stgab-grey-dark);
}

.sc-site-footer--teacher {
    background-color: #f2f4f5;
    border-top-color: rgba(123, 136, 144, 0.2);
    color: var(--stgab-grey-dark);
}

.sc-site-footer--direction {
    background-color: #f5f0e8;
    border-top-color: rgba(154, 123, 47, 0.2);
    color: var(--stgab-navy-muted);
}

.sc-site-footer__action {
    font-weight: 500;
    transition: color 0.15s ease;
}

.sc-site-footer--ddfpt .sc-site-footer__action {
    color: var(--stgab-navy);
}
.sc-site-footer--ddfpt .sc-site-footer__action:hover {
    color: var(--stgab-navy-dark);
}

.sc-site-footer--pp .sc-site-footer__action {
    color: var(--stgab-teal-dark);
}
.sc-site-footer--pp .sc-site-footer__action:hover {
    color: var(--stgab-navy-dark);
}

.sc-site-footer--prof-pro .sc-site-footer__action {
    color: var(--stgab-purple);
}
.sc-site-footer--prof-pro .sc-site-footer__action:hover {
    color: var(--stgab-purple-dark);
}

.sc-site-footer--referent .sc-site-footer__action,
.sc-site-footer--student .sc-site-footer__action,
.sc-site-footer--teacher .sc-site-footer__action {
    color: var(--stgab-navy);
}
.sc-site-footer--referent .sc-site-footer__action:hover,
.sc-site-footer--student .sc-site-footer__action:hover,
.sc-site-footer--teacher .sc-site-footer__action:hover {
    color: var(--stgab-teal-dark);
}

.sc-site-footer__help {
    color: var(--stgab-navy);
}
.sc-site-footer__help:hover {
    color: var(--stgab-teal-dark);
    border-color: rgba(101, 188, 163, 0.45);
}
.sc-site-footer--ddfpt .sc-site-footer__help {
    color: var(--stgab-navy);
}
.sc-site-footer--prof-pro .sc-site-footer__help {
    color: var(--stgab-purple);
}

/* --- Composants globaux --- */
.sc-menu-item {
    color: var(--sc-text-muted);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sc-menu-item:hover {
    background-color: var(--sc-hover-menu);
    color: var(--sc-text);
}

.sc-menu-item--active {
    background-color: var(--sc-hover-menu);
    color: var(--stgab-navy);
    font-weight: 600;
}

.sc-admin-label {
    color: var(--stgab-navy);
    background-color: rgba(101, 188, 163, 0.18);
    border-bottom: 1px solid rgba(101, 188, 163, 0.35);
}

.sc-coop-label {
    color: var(--stgab-navy);
    background-color: rgba(59, 130, 246, 0.12);
    border-bottom: 1px solid rgba(59, 130, 246, 0.25);
}

.sc-action-ring-active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sc-ring);
}

.sc-msg-info {
    background-color: var(--sc-info-bg);
    border: 1px solid var(--sc-info-border);
    color: var(--stgab-navy-dark);
}

.sc-msg-info-title {
    color: var(--stgab-navy);
}

.sc-msg-info-link {
    color: var(--stgab-teal-dark);
}

.sc-msg-info-link:hover {
    color: var(--stgab-navy);
}

.sc-kicker {
    color: var(--stgab-teal-dark);
}

/* Barre verticale biseautée — clip par overflow-hidden + border-radius du parent */
.sc-accent-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sc-accent-bar-width);
    pointer-events: none;
    z-index: 1;
    transition: width var(--sc-motion-duration-quick) var(--sc-motion-ease-flow);
}

.sc-accent-bar--stgab-navy { background-color: var(--stgab-navy); }
.sc-accent-bar--stgab-teal { background-color: var(--stgab-teal); }
.sc-accent-bar--stgab-purple { background-color: var(--stgab-purple); }
.sc-accent-bar--stgab-grey { background-color: var(--stgab-grey); }

/* Nuances Tailwind utilisées sur les barres — fallback si CDN ne les génère pas */
.sc-accent-bar.bg-red-500 { background-color: #ef4444; }
.sc-accent-bar.bg-amber-500 { background-color: #f59e0b; }
.sc-accent-bar.bg-orange-500 { background-color: #f97316; }
.sc-accent-bar.bg-sky-500 { background-color: #0ea5e9; }
.sc-accent-bar.bg-indigo-500 { background-color: #6366f1; }
.sc-accent-bar.bg-indigo-900 { background-color: #312e81; }
.sc-accent-bar.bg-violet-500 { background-color: #8b5cf6; }
.sc-accent-bar.bg-purple-500 { background-color: #a855f7; }
.sc-accent-bar.bg-blue-500 { background-color: #3b82f6; }
.sc-accent-bar.bg-green-500 { background-color: #22c55e; }
.sc-accent-bar.bg-slate-500 { background-color: #64748b; }

.sc-link-brand {
    color: var(--stgab-navy);
}

.sc-link-brand:hover {
    color: var(--stgab-teal-dark);
}

.sc-flash-success {
    background-color: var(--sc-success-bg);
    color: var(--sc-success-fg);
    border: 1px solid var(--sc-success-border);
    animation: scSavedPulse 0.9s var(--sc-motion-ease-settle);
}

.sc-flash-error {
    background-color: var(--sc-error-bg);
    color: var(--sc-error-fg);
    border: 1px solid var(--sc-error-border);
}

.sc-flash-warning {
    background-color: var(--sc-warning-bg);
    color: var(--sc-warning-fg);
    border: 1px solid var(--sc-warning-border);
}

/* Balises [AUDIO], [VIDEO], etc. sur les critères de coloration */
.sc-criterion-tag {
    display: inline-block;
    font-weight: 700;
    font-size: 0.85em;
    line-height: 1.25;
    padding: 0 0.3rem;
    border-radius: 0.25rem;
    margin-right: 0.2rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.sc-criterion-tag--av {
    color: var(--sc-coloration-av-fg);
    background-color: var(--sc-coloration-av-bg);
}

.sc-criterion-tag--elec {
    color: var(--sc-coloration-elec-fg);
    background-color: var(--sc-coloration-elec-bg);
}

/* --- Bandeaux navigation --- */
.sc-nav-bar {
    border-bottom-width: 3px;
    border-bottom-style: solid;
}

.sc-nav-bar--ddfpt {
    background-color: var(--sc-nav-ddfpt-bg);
    border-bottom-color: var(--sc-nav-ddfpt-border);
}

.sc-nav-bar--pp {
    background-color: var(--sc-nav-pp-bg);
    border-bottom-color: var(--sc-nav-pp-border);
}

.sc-nav-bar--prof-pro {
    background-color: var(--sc-nav-prof-pro-bg);
    border-bottom-color: var(--sc-nav-prof-pro-border);
}

.sc-nav-bar--referent {
    background-color: var(--sc-nav-referent-bg);
    border-bottom-color: var(--sc-nav-referent-border);
}

.sc-nav-bar--student {
    background-color: var(--sc-nav-student-bg);
    border-bottom-color: var(--sc-nav-student-border);
}

.sc-nav-bar--teacher {
    background-color: var(--sc-nav-teacher-bg);
    border-bottom-color: var(--sc-nav-teacher-border);
}

.sc-nav-bar--admin {
    background-color: var(--sc-nav-admin-bg);
    border-bottom-color: var(--sc-nav-admin-border);
}

.sc-nav-bar--direction {
    background-color: var(--sc-nav-direction-bg);
    border-bottom-color: var(--sc-nav-direction-border);
}

/* Liens navigation */
.sc-nav-link {
    border-bottom-width: 2px;
    border-bottom-style: solid;
}

.sc-nav-link--idle.sc-nav-link--ddfpt {
    border-color: transparent;
    color: var(--stgab-navy-muted);
}
.sc-nav-link--idle.sc-nav-link--ddfpt:hover {
    color: var(--stgab-navy-dark);
    border-color: rgba(35, 73, 87, 0.55);
}
.sc-nav-link--active.sc-nav-link--ddfpt {
    border-color: var(--stgab-navy);
    color: var(--stgab-navy-dark);
    font-weight: 600;
}

.sc-nav-link--idle.sc-nav-link--pp {
    border-color: transparent;
    color: var(--stgab-navy-muted);
}
.sc-nav-link--idle.sc-nav-link--pp:hover {
    color: var(--stgab-navy-dark);
    border-color: var(--stgab-teal);
}
.sc-nav-link--active.sc-nav-link--pp {
    border-color: var(--stgab-teal-dark);
    color: var(--stgab-navy-dark);
    font-weight: 600;
}

.sc-nav-link--idle.sc-nav-link--prof-pro {
    border-color: transparent;
    color: rgba(90, 40, 117, 0.88);
}
.sc-nav-link--idle.sc-nav-link--prof-pro:hover {
    color: var(--stgab-purple-dark);
    border-color: rgba(90, 40, 117, 0.55);
}
.sc-nav-link--active.sc-nav-link--prof-pro {
    border-color: var(--stgab-purple);
    color: var(--stgab-purple-dark);
    font-weight: 600;
}

.sc-nav-link--idle.sc-nav-link--referent {
    border-color: transparent;
    color: var(--stgab-navy-muted);
}
.sc-nav-link--idle.sc-nav-link--referent:hover {
    color: var(--stgab-navy-dark);
    border-color: var(--stgab-teal);
}
.sc-nav-link--active.sc-nav-link--referent {
    border-color: var(--stgab-teal-dark);
    color: var(--stgab-navy-dark);
    font-weight: 600;
}

.sc-nav-link--idle.sc-nav-link--student {
    border-color: transparent;
    color: var(--stgab-grey-dark);
}
.sc-nav-link--idle.sc-nav-link--student:hover {
    color: var(--stgab-navy-dark);
    border-color: var(--stgab-grey);
}
.sc-nav-link--active.sc-nav-link--student {
    border-color: var(--stgab-grey-dark);
    color: var(--stgab-navy-dark);
    font-weight: 600;
}

.sc-nav-link--idle.sc-nav-link--teacher {
    border-color: transparent;
    color: var(--stgab-navy-muted);
}
.sc-nav-link--idle.sc-nav-link--teacher:hover {
    color: var(--stgab-navy-dark);
    border-color: rgba(227, 0, 11, 0.45);
}
.sc-nav-link--active.sc-nav-link--teacher {
    border-color: var(--stgab-red);
    color: var(--stgab-navy-dark);
    font-weight: 600;
}

.sc-nav-link--idle.sc-nav-link--direction {
    border-color: transparent;
    color: var(--stgab-navy-muted);
}
.sc-nav-link--idle.sc-nav-link--direction:hover {
    color: var(--stgab-navy-dark);
    border-color: rgba(154, 123, 47, 0.55);
}
.sc-nav-link--active.sc-nav-link--direction {
    border-color: #9a7b2f;
    color: var(--stgab-navy-dark);
    font-weight: 600;
}

/* Logo, texte utilisateur, badges */
.sc-nav-user-pill {
    padding: 2px;
    gap: 0;
}
.sc-nav-user-pill:hover {
    filter: brightness(0.97);
}
.sc-nav-user-pill__name {
    line-height: 1.25rem;
}

.sc-nav-user-pill--ddfpt {
    background: rgba(35, 73, 87, 0.1);
    border-color: rgba(35, 73, 87, 0.28);
}
.sc-nav-user-pill--pp {
    background: rgba(101, 188, 163, 0.22);
    border-color: rgba(45, 107, 90, 0.38);
}
.sc-nav-user-pill--prof-pro {
    background: rgba(90, 40, 117, 0.1);
    border-color: rgba(90, 40, 117, 0.28);
}
.sc-nav-user-pill--referent {
    background: rgba(101, 188, 163, 0.16);
    border-color: rgba(45, 107, 90, 0.32);
}
.sc-nav-user-pill--student {
    background: rgba(123, 136, 144, 0.14);
    border-color: rgba(123, 136, 144, 0.32);
}
.sc-nav-user-pill--teacher {
    background: rgba(227, 0, 11, 0.07);
    border-color: rgba(227, 0, 11, 0.2);
}
.sc-nav-user-pill--direction {
    background: rgba(154, 123, 47, 0.12);
    border-color: rgba(154, 123, 47, 0.32);
}

.sc-nav-logo-accent--ddfpt { color: var(--stgab-navy); }
.sc-nav-logo-main--ddfpt { color: var(--stgab-navy-dark); }
.sc-nav-user-text--ddfpt { color: var(--stgab-navy-dark); }
.sc-nav-avatar--ddfpt { background: rgba(35, 73, 87, 0.14); color: var(--stgab-navy); border-color: rgba(35, 73, 87, 0.32); }
.sc-nav-badge--ddfpt { background: rgba(35, 73, 87, 0.16); color: var(--stgab-navy-dark); border: 1px solid rgba(35, 73, 87, 0.32); }
.sc-nav-mobile-btn--ddfpt { color: var(--stgab-navy); }
.sc-nav-mobile-btn--ddfpt:hover { color: var(--stgab-navy-dark); background: rgba(35, 73, 87, 0.12); }
.sc-nav-section--ddfpt { color: var(--stgab-navy-muted); }
.sc-nav-mobile-home--ddfpt { color: var(--stgab-navy-dark); background: rgba(35, 73, 87, 0.14); border-color: var(--stgab-navy); }

.sc-nav-logo-accent--pp { color: var(--stgab-teal-dark); }
.sc-nav-logo-main--pp { color: var(--stgab-navy-dark); }
.sc-nav-user-text--pp { color: var(--stgab-navy-dark); }
.sc-nav-avatar--pp { background: rgba(101, 188, 163, 0.32); color: var(--stgab-navy-dark); border-color: rgba(45, 107, 90, 0.45); }
.sc-nav-badge--pp { background: rgba(101, 188, 163, 0.32); color: var(--stgab-navy-dark); border: 1px solid rgba(45, 107, 90, 0.45); }
.sc-nav-mobile-btn--pp { color: var(--stgab-navy); }
.sc-nav-mobile-btn--pp:hover { color: var(--stgab-navy-dark); background: rgba(101, 188, 163, 0.22); }
.sc-nav-section--pp { color: var(--stgab-navy-muted); }
.sc-nav-mobile-home--pp { color: var(--stgab-navy-dark); background: rgba(101, 188, 163, 0.28); border-color: var(--stgab-teal-dark); }

.sc-nav-logo-accent--prof-pro { color: var(--stgab-purple); }
.sc-nav-logo-main--prof-pro { color: var(--stgab-purple-dark); }
.sc-nav-user-text--prof-pro { color: var(--stgab-purple-dark); }
.sc-nav-avatar--prof-pro { background: rgba(90, 40, 117, 0.14); color: var(--stgab-purple-dark); border-color: rgba(90, 40, 117, 0.32); }
.sc-nav-badge--prof-pro { background: rgba(90, 40, 117, 0.16); color: var(--stgab-purple-dark); border: 1px solid rgba(90, 40, 117, 0.32); }
.sc-nav-mobile-btn--prof-pro { color: var(--stgab-purple); }
.sc-nav-mobile-btn--prof-pro:hover { color: var(--stgab-purple-dark); background: rgba(90, 40, 117, 0.12); }
.sc-nav-section--prof-pro { color: rgba(90, 40, 117, 0.75); }
.sc-nav-mobile-home--prof-pro { color: var(--stgab-purple-dark); background: rgba(90, 40, 117, 0.14); border-color: var(--stgab-purple); }

.sc-nav-logo-accent--referent { color: var(--stgab-teal-dark); }
.sc-nav-logo-main--referent { color: var(--stgab-navy-dark); }
.sc-nav-user-text--referent { color: var(--stgab-navy-dark); }
.sc-nav-avatar--referent { background: rgba(101, 188, 163, 0.22); color: var(--stgab-navy-dark); border-color: rgba(45, 107, 90, 0.38); }
.sc-nav-badge--referent { background: rgba(101, 188, 163, 0.24); color: var(--stgab-navy-dark); border: 1px solid rgba(45, 107, 90, 0.42); }
.sc-nav-mobile-btn--referent { color: var(--stgab-navy); }
.sc-nav-mobile-btn--referent:hover { background: rgba(101, 188, 163, 0.18); }
.sc-nav-section--referent { color: var(--stgab-navy-muted); }
.sc-nav-mobile-home--referent { color: var(--stgab-navy-dark); background: rgba(101, 188, 163, 0.22); border-color: var(--stgab-teal); }

.sc-nav-logo-accent--student { color: var(--stgab-grey-dark); }
.sc-nav-logo-main--student { color: var(--stgab-navy-dark); }
.sc-nav-user-text--student { color: var(--stgab-grey-dark); }
.sc-nav-avatar--student { background: rgba(123, 136, 144, 0.22); color: var(--stgab-grey-dark); border-color: rgba(123, 136, 144, 0.4); }
.sc-nav-badge--student { background: rgba(123, 136, 144, 0.2); color: var(--stgab-grey-dark); border: 1px solid rgba(123, 136, 144, 0.36); }
.sc-nav-mobile-btn--student { color: var(--stgab-grey-dark); }
.sc-nav-mobile-btn--student:hover { background: rgba(123, 136, 144, 0.14); }
.sc-nav-section--student { color: var(--stgab-grey); }
.sc-nav-mobile-home--student { color: var(--stgab-navy-dark); background: rgba(123, 136, 144, 0.16); border-color: var(--stgab-grey); }

/* Bandeau contexte élève — navigation précédent / suivant */
.sc-student-neighbor-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transition:
    background-color var(--sc-motion-duration-instant) var(--sc-motion-ease-flow),
    border-color var(--sc-motion-duration-instant) var(--sc-motion-ease-flow),
    transform var(--sc-motion-duration-instant) var(--sc-motion-ease-grow);
}
.sc-student-neighbor-nav-btn:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.45);
}
.sc-student-neighbor-nav-btn:active {
  transform: scale(0.96);
  transition-timing-function: var(--sc-motion-ease-settle);
}
@media (hover: none) and (pointer: coarse) {
  .sc-student-neighbor-nav-btn {
    width: 2.75rem;
    height: 2.75rem;
  }
}

.sc-nav-logo-accent--teacher { color: var(--stgab-red); }
.sc-nav-logo-main--teacher { color: var(--stgab-navy-dark); }
.sc-nav-user-text--teacher { color: var(--stgab-navy-dark); }
.sc-nav-avatar--teacher { background: rgba(227, 0, 11, 0.1); color: var(--stgab-navy-dark); border-color: rgba(227, 0, 11, 0.24); }
.sc-nav-badge--teacher { background: rgba(123, 136, 144, 0.16); color: var(--stgab-navy-dark); border: 1px solid rgba(123, 136, 144, 0.3); }
.sc-nav-mobile-btn--teacher { color: var(--stgab-navy); }
.sc-nav-mobile-btn--teacher:hover { background: rgba(227, 0, 11, 0.08); }
.sc-nav-section--teacher { color: var(--stgab-navy-muted); }
.sc-nav-mobile-home--teacher { color: var(--stgab-navy-dark); background: rgba(227, 0, 11, 0.1); border-color: var(--stgab-red); }

.sc-nav-logo-accent--direction { color: #9a7b2f; }
.sc-nav-logo-main--direction { color: var(--stgab-navy-dark); }
.sc-nav-user-text--direction { color: var(--stgab-navy-dark); }
.sc-nav-avatar--direction { background: rgba(154, 123, 47, 0.14); color: #7a6124; border-color: rgba(154, 123, 47, 0.32); }
.sc-nav-badge--direction { background: rgba(154, 123, 47, 0.16); color: #7a6124; border: 1px solid rgba(154, 123, 47, 0.32); }
.sc-nav-mobile-btn--direction { color: #9a7b2f; }
.sc-nav-mobile-btn--direction:hover { color: #7a6124; background: rgba(154, 123, 47, 0.12); }
.sc-nav-section--direction { color: rgba(122, 97, 36, 0.85); }
.sc-nav-mobile-home--direction { color: var(--stgab-navy-dark); background: rgba(154, 123, 47, 0.14); border-color: #9a7b2f; }

.sc-nav-logo-accent--admin { color: var(--stgab-red); }
.sc-nav-logo-main--admin { color: var(--stgab-navy-dark); }
.sc-nav-user-text--admin { color: var(--stgab-navy-dark); }
.sc-nav-avatar--admin { background: rgba(227, 0, 11, 0.14); color: var(--stgab-navy-dark); border-color: rgba(227, 0, 11, 0.3); }
.sc-nav-badge--admin { background: rgba(227, 0, 11, 0.12); color: var(--stgab-navy-dark); border: 1px solid rgba(227, 0, 11, 0.28); }
.sc-nav-mobile-btn--admin { color: var(--stgab-navy); }
.sc-nav-mobile-btn--admin:hover { background: rgba(227, 0, 11, 0.1); }
.sc-nav-section--admin { color: var(--stgab-navy-muted); }
.sc-nav-mobile-home--admin { color: var(--stgab-navy-dark); background: rgba(227, 0, 11, 0.12); border-color: var(--stgab-red); }
.sc-nav-link--idle.sc-nav-link--admin { border-color: transparent; color: var(--stgab-navy-muted); }
.sc-nav-link--idle.sc-nav-link--admin:hover { color: var(--stgab-navy-dark); border-color: rgba(227, 0, 11, 0.45); }
.sc-nav-link--active.sc-nav-link--admin { color: var(--stgab-navy-dark); border-color: var(--stgab-red); }
.sc-site-footer--admin { background: #eef0f2; border-top-color: rgba(227, 0, 11, 0.2); }

/* Édition inline de texte (administration) */
.sc-page-content-edit-toggle.is-active {
    color: var(--stgab-red);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(227, 0, 11, 0.35);
    border-radius: 0.375rem;
}

body.sc-page-edit-mode main [data-sc-edited] {
    outline: 1px dashed rgba(227, 0, 11, 0.45);
    outline-offset: 2px;
}

body.sc-page-edit-mode main p,
body.sc-page-edit-mode main h1,
body.sc-page-edit-mode main h2,
body.sc-page-edit-mode main h3,
body.sc-page-edit-mode main h4,
body.sc-page-edit-mode main h5,
body.sc-page-edit-mode main h6,
body.sc-page-edit-mode main li,
body.sc-page-edit-mode main td,
body.sc-page-edit-mode main th,
body.sc-page-edit-mode main blockquote,
body.sc-page-edit-mode main figcaption,
body.sc-page-edit-mode main dt,
body.sc-page-edit-mode main dd,
body.sc-page-edit-mode main label,
body.sc-page-edit-mode main .sc-editable-hint {
    cursor: pointer;
    transition: outline-color 0.15s ease, background-color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
    body.sc-page-edit-mode main p:hover,
    body.sc-page-edit-mode main h1:hover,
    body.sc-page-edit-mode main h2:hover,
    body.sc-page-edit-mode main h3:hover,
    body.sc-page-edit-mode main h4:hover,
    body.sc-page-edit-mode main h5:hover,
    body.sc-page-edit-mode main h6:hover,
    body.sc-page-edit-mode main li:hover,
    body.sc-page-edit-mode main td:hover,
    body.sc-page-edit-mode main th:hover,
    body.sc-page-edit-mode main blockquote:hover,
    body.sc-page-edit-mode main figcaption:hover,
    body.sc-page-edit-mode main dt:hover,
    body.sc-page-edit-mode main dd:hover,
    body.sc-page-edit-mode main label:hover {
        outline: 2px dashed rgba(101, 188, 163, 0.85);
        outline-offset: 2px;
        background-color: rgba(101, 188, 163, 0.08);
    }
}

.sc-page-content-editor-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem;
}

.sc-page-content-editor-modal.is-open {
    display: flex;
}

.sc-page-content-editor-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(35, 73, 87, 0.5);
    backdrop-filter: blur(2px);
}

.sc-page-content-editor-modal__panel {
    position: relative;
    width: min(100%, 42rem);
    max-height: min(88vh, 720px);
    display: flex;
    flex-direction: column;
    background: #fff;
    color: #111827;
    border-radius: 1rem;
    box-shadow: 0 20px 45px rgba(35, 73, 87, 0.25);
    overflow: hidden;
}

.sc-page-content-editor-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(90deg, var(--stgab-navy), var(--stgab-navy-dark));
    color: #fff;
}

.sc-page-content-editor-modal__title {
    font-size: 1.05rem;
    font-weight: 700;
}

.sc-page-content-editor-modal__close {
    min-width: 2.25rem;
    min-height: 2.25rem;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.sc-page-content-editor-modal__editor {
    flex: 1;
    min-height: 16rem;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.sc-page-content-editor-modal__editor .ql-toolbar {
    border: 0;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.sc-page-content-editor-modal__editor .ql-container {
    border: 0;
    font-size: 0.95rem;
    flex: 1;
    min-height: 12rem;
    display: flex;
    flex-direction: column;
}

.sc-page-content-editor-modal__editor .ql-editor {
    flex: 1;
    min-height: 12rem;
    max-height: min(50vh, 28rem);
    overflow-y: auto;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    color: #111827;
    caret-color: #111827;
}

.sc-page-content-editor-modal__editor .ql-editor p,
.sc-page-content-editor-modal__editor .ql-editor li,
.sc-page-content-editor-modal__editor .ql-editor span,
.sc-page-content-editor-modal__editor .ql-editor strong,
.sc-page-content-editor-modal__editor .ql-editor em {
    color: inherit;
}

.sc-page-content-editor-modal__editor .ql-editor.ql-blank::before {
    color: #9ca3af;
    font-style: normal;
}

.sc-page-content-editor-modal__editor .ql-toolbar {
    color: #111827;
}

.sc-page-content-editor-modal__editor .ql-toolbar .ql-stroke {
    stroke: #374151;
}

.sc-page-content-editor-modal__editor .ql-toolbar .ql-fill {
    fill: #374151;
}

.sc-page-content-editor-modal__editor .ql-toolbar .ql-picker,
.sc-page-content-editor-modal__editor .ql-toolbar .ql-picker-label {
    color: #111827;
}

.sc-page-content-editor-modal__editor .ql-toolbar .ql-picker-options {
    background: #fff;
    color: #111827;
}

.sc-page-content-editor-modal__editor .ql-toolbar button.ql-list-none {
    width: auto;
    padding: 0 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #111827;
}

.sc-page-content-editor-modal__editor .ql-toolbar button.ql-list-none::before {
    content: 'Sans n°';
}

.sc-page-content-editor-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.sc-page-content-editor-modal__footer-actions {
    display: flex;
    gap: 0.5rem;
}

.sc-page-content-editor-modal__btn {
    min-height: 2.5rem;
    padding: 0.45rem 0.9rem;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    background: #fff;
    color: var(--stgab-navy-dark);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.sc-page-content-editor-modal__btn--primary {
    background: var(--stgab-teal);
    border-color: var(--stgab-teal);
    color: #fff;
}

.sc-page-content-editor-modal__btn--primary:hover {
    background: var(--stgab-teal-dark);
}

.sc-page-content-editor-modal__btn--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--stgab-red);
}

body.sc-page-content-modal-open {
    overflow: hidden;
}

/* Menu taille Quill (px) — sans ces règles, tout s'affiche « Normal » */
.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-item:not([data-value])::before,
.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-label:not([data-value])::before,
.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=""]::before,
.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=""]::before {
    content: 'Par défaut' !important;
}

.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="0.82rem"]::before,
.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="0.82rem"]::before {
    content: 'Détail (0,82 rem)' !important;
    font-size: 0.82rem !important;
}

.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before,
.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before {
    content: '10 px' !important;
    font-size: 10px !important;
}

.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="11px"]::before,
.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="11px"]::before {
    content: '11 px' !important;
    font-size: 11px !important;
}

.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before,
.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before {
    content: '12 px' !important;
    font-size: 12px !important;
}

.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before,
.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before {
    content: '14 px' !important;
    font-size: 14px !important;
}

.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before,
.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before {
    content: '16 px' !important;
    font-size: 16px !important;
}

.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before,
.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before {
    content: '18 px' !important;
    font-size: 18px !important;
}

.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before,
.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before {
    content: '20 px' !important;
    font-size: 20px !important;
}

.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before,
.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before {
    content: '24 px' !important;
    font-size: 24px !important;
}

.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before,
.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before {
    content: '28 px' !important;
    font-size: 28px !important;
}

.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before,
.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before {
    content: '32 px' !important;
    font-size: 32px !important;
}

.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before,
.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before {
    content: 'Petit' !important;
}

.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before,
.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before {
    content: 'Grand' !important;
}

.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before,
.sc-page-content-editor-modal .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before {
    content: 'Très grand' !important;
}

/* Tailles de texte éditables (Quill — classes de repli) */
main .ql-size-small,
.sc-page-content-editor-modal .ql-size-small { font-size: 0.75em; }
main .ql-size-large,
.sc-page-content-editor-modal .ql-size-large { font-size: 1.5em; }
main .ql-size-huge,
.sc-page-content-editor-modal .ql-size-huge { font-size: 2.5em; }

@media (min-width: 640px) {
    .sc-page-content-editor-modal {
        align-items: center;
    }
}

.sc-nav-profile-dot {
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    flex-shrink: 0;
}
.sc-nav-profile-dot--age-fresh { background: #22c55e; }
.sc-nav-profile-dot--age-recent { background: #84cc16; }
.sc-nav-profile-dot--age-warm { background: #f59e0b; }
.sc-nav-profile-dot--age-aging { background: #f97316; }
.sc-nav-profile-dot--age-stale { background: var(--stgab-red); }

/* Veille pédagogique — synthèse markdown */
.sc-pedagogical-watch-summary {
    font-size: var(--pw-summary-font-size, 14px);
    line-height: 1.65;
}
.sc-pedagogical-watch-summary p {
    margin-top: 0.75rem;
}
.sc-pedagogical-watch-summary p:first-child {
    margin-top: 0;
}
.sc-pedagogical-watch-summary ul,
.sc-pedagogical-watch-summary ol {
    margin-top: 0.75rem;
    padding-left: 1.25rem;
}
.sc-pedagogical-watch-summary li + li {
    margin-top: 0.35rem;
}
.sc-pedagogical-watch-summary strong {
    font-weight: 700;
    color: var(--stgab-navy-dark, #1a3642);
}
.sc-pedagogical-watch-summary h1,
.sc-pedagogical-watch-summary h2,
.sc-pedagogical-watch-summary h3 {
    margin-top: 1rem;
    font-weight: 700;
    color: var(--stgab-navy-dark, #1a3642);
}
.sc-pedagogical-watch-summary h1 { font-size: 1.15em; }
.sc-pedagogical-watch-summary h2 { font-size: 1.08em; }
.sc-pedagogical-watch-summary h3 { font-size: 1.02em; }

/* Indicateur environnement dev / bascule prod */
.sc-dev-env-stripe {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 9998;
    background: var(--stgab-red);
    pointer-events: none;
}
.sc-dev-env-dot {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 9999;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background: var(--stgab-red);
    box-shadow:
        0 0 0 3px rgba(227, 0, 11, 0.35),
        0 0 14px rgba(227, 0, 11, 0.65);
    animation: sc-dev-dot-pulse 2s ease-in-out infinite;
    pointer-events: none;
}
.sc-dev-logo-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 9999px;
    background: var(--stgab-red);
    box-shadow: 0 0 0 2px rgba(227, 0, 11, 0.3);
    flex-shrink: 0;
}
@keyframes sc-dev-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.12); opacity: 0.88; }
}
@media (prefers-reduced-motion: reduce) {
    .sc-dev-env-dot { animation: none; }
}
.sc-site-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.75rem;
    padding: 0.35rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}
.sc-site-switch__icon {
    width: 0.85rem;
    height: 0.85rem;
    opacity: 0.85;
    flex-shrink: 0;
}
.sc-site-switch--dev {
    background: rgba(227, 0, 11, 0.12);
    color: var(--stgab-red);
    border: 1px solid rgba(227, 0, 11, 0.45);
}
.sc-site-switch--dev:hover {
    background: rgba(227, 0, 11, 0.2);
    border-color: rgba(227, 0, 11, 0.6);
}
.sc-site-switch--prod {
    background: rgba(123, 136, 144, 0.1);
    color: var(--stgab-grey-dark);
    border: 1px solid rgba(123, 136, 144, 0.28);
}
.sc-site-switch--prod:hover {
    background: rgba(123, 136, 144, 0.18);
    border-color: rgba(123, 136, 144, 0.4);
}
.sc-site-switch--external {
    min-height: 2.25rem;
    font-size: 0.6rem;
}

/* Accès rapides DDFPT dans la barre — conservé pour compatibilité */
.sc-nav-action--primary {
    background: rgba(35, 73, 87, 0.16);
    color: var(--stgab-navy-dark);
    border: 1px solid rgba(35, 73, 87, 0.32);
}
.sc-nav-action--primary:hover {
    background: rgba(35, 73, 87, 0.24);
}
.sc-nav-action--secondary {
    background: rgba(255, 255, 255, 0.9);
    color: var(--stgab-navy-dark);
    border: 1px solid rgba(35, 73, 87, 0.24);
}
.sc-nav-action--secondary:hover {
    background: #fff;
}

/* Carte entreprise PFMP — thème coloration */
.sc-company-header {
    color: #fff;
    padding: 0.75rem 1rem;
}

.sc-company-header--default {
    background: linear-gradient(to right, var(--stgab-navy-dark), var(--stgab-navy));
}

.sc-company-header--av {
    background: linear-gradient(to right, var(--stgab-purple-dark), var(--stgab-purple));
}

.sc-company-header--elec {
    background: linear-gradient(to right, var(--stgab-teal-dark), var(--stgab-teal));
}

.sc-company-header-sub--default { color: rgba(255, 255, 255, 0.72); }
.sc-company-header-sub--av { color: rgba(255, 255, 255, 0.72); }
.sc-company-header-sub--elec { color: rgba(255, 255, 255, 0.78); }

.sc-company-body--default { background-color: rgba(35, 73, 87, 0.06); }
.sc-company-body--av { background-color: var(--stgab-purple-soft); }
.sc-company-body--elec { background-color: var(--stgab-teal-soft); }

.sc-company-label--default { color: rgba(35, 73, 87, 0.55); }
.sc-company-label--av { color: rgba(90, 40, 117, 0.55); }
.sc-company-label--elec { color: rgba(45, 107, 90, 0.55); }

.sc-company-accent--default { color: var(--stgab-navy); }
.sc-company-accent--av { color: var(--stgab-purple); }
.sc-company-accent--elec { color: var(--stgab-teal-dark); }

.sc-company-accent-bg--default { background-color: rgba(35, 73, 87, 0.12); color: var(--stgab-navy); }
.sc-company-accent-bg--av { background-color: rgba(90, 40, 117, 0.14); color: var(--stgab-purple-dark); }
.sc-company-accent-bg--elec { background-color: rgba(101, 188, 163, 0.22); color: var(--stgab-teal-dark); }

.sc-company-specialty {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
}

.sc-company-specialty--default {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.sc-company-specialty--av {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.sc-company-specialty--elec {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
}

.sc-company-specialty--default-proposed,
.sc-company-specialty--av-proposed,
.sc-company-specialty--elec-proposed {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.sc-panel,
.sc-card {
    background-color: var(--sc-surface-bg);
    border: none;
    border-radius: var(--sc-radius);
}

.sc-panel-lg {
    border-radius: var(--sc-radius-lg);
}

/* Cartes : aucun tour */
.sc-card,
.sc-panel,
.ddfpt-card,
.ddfpt-kpi,
.ddfpt-alert,
main section[class*="rounded-xl"],
main section[class*="rounded-2xl"],
main section[class*="rounded-lg"].bg-white,
main section[class*="rounded-lg"].overflow-hidden,
main .ddfpt-card,
main .bg-white[class*="rounded-xl"],
main .bg-white[class*="rounded-2xl"],
main .bg-white[class*="rounded-lg"].overflow-hidden,
main [class*="rounded-xl"].px-4.py-3,
main [class*="rounded-xl"].p-4.bg-gray-50,
main [class*="rounded-xl"].bg-amber-50,
main [class*="rounded-xl"].bg-red-50,
main [class*="rounded-2xl"].bg-amber-50,
main [class*="rounded-2xl"].bg-red-50 {
    border-width: 0 !important;
    border-style: none !important;
    box-shadow: none !important;
}

/* Cartes interactives — légère élévation et barre latérale qui s'épaissit au survol */
.sc-card-lift,
.ddfpt-card {
    transition:
        transform var(--sc-motion-duration-quick) var(--sc-motion-ease-grow),
        background-color var(--sc-motion-duration-instant) var(--sc-motion-ease-flow);
}

.sc-home-priority-card:not(.sc-home-priority-card--empty) {
    transition: transform var(--sc-motion-duration-quick) var(--sc-motion-ease-grow);
}

.sc-card-lift:active,
.ddfpt-card:active {
    transform: translateY(0) scale(0.995);
    transition-duration: var(--sc-motion-duration-instant);
    transition-timing-function: var(--sc-motion-ease-settle);
}

@media (hover: hover) and (pointer: fine) {
    .sc-card-lift:hover,
    .ddfpt-card:hover,
    .sc-home-priority-card:not(.sc-home-priority-card--empty):hover {
        transform: translateY(-2px);
    }

    .sc-card-lift:hover > .sc-accent-bar,
    .ddfpt-card:hover > .sc-accent-bar,
    .sc-home-priority-card:hover > .sc-accent-bar,
    .sc-card-lift:hover .sc-accent-bar:first-child,
    .ddfpt-card:hover .sc-accent-bar:first-child,
    .sc-home-priority-card:hover .sc-accent-bar:first-child {
        width: var(--sc-accent-bar-width-hover);
    }
}

.ddfpt-card:hover {
    box-shadow: none;
}

.ddfpt-soft-ring {
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .sc-accent-bar,
    .sc-card-lift,
    .ddfpt-card,
    .sc-home-priority-card:not(.sc-home-priority-card--empty) {
        transition: none;
    }

    .sc-card-lift:hover,
    .sc-card-lift:active,
    .ddfpt-card:hover,
    .ddfpt-card:active,
    .sc-home-priority-card:not(.sc-home-priority-card--empty):hover {
        transform: none;
    }
}

/* Entrée en cascade (phase B) — apparition fluide des blocs accueil */
@keyframes scFlowIn {
    from {
        opacity: 0;
        transform: translateY(var(--sc-motion-flow-offset));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sc-flow-in {
    animation: scFlowIn var(--sc-motion-duration-flow) var(--sc-motion-ease-flow) both;
    animation-delay: calc(var(--sc-motion-flow-stagger-step) * var(--sc-flow-index, 0));
}

.sc-flow-stagger > .sc-flow-in:nth-child(1) { --sc-flow-index: 0; }
.sc-flow-stagger > .sc-flow-in:nth-child(2) { --sc-flow-index: 1; }
.sc-flow-stagger > .sc-flow-in:nth-child(3) { --sc-flow-index: 2; }
.sc-flow-stagger > .sc-flow-in:nth-child(4) { --sc-flow-index: 3; }
.sc-flow-stagger > .sc-flow-in:nth-child(5) { --sc-flow-index: 4; }
.sc-flow-stagger > .sc-flow-in:nth-child(6) { --sc-flow-index: 5; }
.sc-flow-stagger > .sc-flow-in:nth-child(7) { --sc-flow-index: 6; }
.sc-flow-stagger > .sc-flow-in:nth-child(8) { --sc-flow-index: 7; }
.sc-flow-stagger > .sc-flow-in:nth-child(9) { --sc-flow-index: 8; }
.sc-flow-stagger > .sc-flow-in:nth-child(10) { --sc-flow-index: 9; }
.sc-flow-stagger > .sc-flow-in:nth-child(11) { --sc-flow-index: 10; }
.sc-flow-stagger > .sc-flow-in:nth-child(12) { --sc-flow-index: 11; }

/* Pastilles / raccourcis — micro-réaction au survol et au clic */
.sc-chip-lift {
    transition:
        transform var(--sc-motion-duration-instant) var(--sc-motion-ease-grow),
        background-color var(--sc-motion-duration-instant) var(--sc-motion-ease-flow),
        border-color var(--sc-motion-duration-instant) var(--sc-motion-ease-flow),
        color var(--sc-motion-duration-instant) var(--sc-motion-ease-flow);
}

@media (hover: hover) and (pointer: fine) {
    .sc-chip-lift:hover {
        transform: translateY(-1px);
    }
}

.sc-chip-lift:active {
    transform: scale(0.97);
    transition-timing-function: var(--sc-motion-ease-settle);
}

@media (prefers-reduced-motion: reduce) {
    .sc-flow-in {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .sc-chip-lift,
    .sc-chip-lift:hover,
    .sc-chip-lift:active {
        transition: none;
        transform: none;
    }
}

/* Alertes vivantes et feedback succès (phase C) */
@keyframes scAccentBarAlive {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.42; }
}

@keyframes scSavedPulse {
    0% { box-shadow: 0 0 0 0 var(--sc-saved-pulse-color); }
    100% { box-shadow: 0 0 0 var(--sc-saved-pulse-spread) rgba(101, 188, 163, 0); }
}

@keyframes scLoadingBreathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
}

.sc-alert-alive > .sc-accent-bar {
    animation: scAccentBarAlive var(--sc-motion-duration-alive) var(--sc-motion-ease-breathe) infinite;
}

.sc-saved-flash,
.live-refresh-updated,
.ddfpt-cockpit-sections.is-saved {
    animation: scSavedPulse 0.9s var(--sc-motion-ease-settle);
}

.ddfpt-cockpit-sections.is-saving {
    animation: scLoadingBreathe 1.2s var(--sc-motion-ease-breathe) infinite;
}

.sc-progress-bar {
    transition: width 1s var(--sc-motion-ease-settle);
    transform-origin: left center;
    animation: scProgressSettle 0.45s var(--sc-motion-ease-grow) 1s both;
}

@keyframes scProgressSettle {
    0% { transform: scaleY(1); }
    70% { transform: scaleY(1.14); }
    100% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
    .sc-flash-success,
    .sc-alert-alive > .sc-accent-bar,
    .sc-saved-flash,
    .live-refresh-updated,
    .ddfpt-cockpit-sections.is-saved,
    .ddfpt-cockpit-sections.is-saving,
    .sc-progress-bar {
        animation: none;
    }
}

/* Transitions cross-document (phase D) — Reprendre → fiche cible */
@view-transition {
    navigation: auto;
}

.sc-vt-bridge {
    view-transition-name: sc-page-bridge;
}

::view-transition-old(sc-page-bridge),
::view-transition-new(sc-page-bridge) {
    mix-blend-mode: normal;
    height: 100%;
    overflow: clip;
    animation-duration: 0.55s;
    animation-timing-function: var(--sc-motion-ease-settle);
}

::view-transition-group(sc-page-bridge) {
    animation-duration: 0.55s;
    animation-timing-function: var(--sc-motion-ease-flow);
}

::view-transition-old(root) {
    animation: scVtRootOut 0.28s var(--sc-motion-ease-flow) both;
}

::view-transition-new(root) {
    animation: scVtRootIn 0.38s var(--sc-motion-ease-settle) both;
}

@keyframes scVtRootOut {
    from { opacity: 1; }
    to { opacity: 0.92; }
}

@keyframes scVtRootIn {
    from { opacity: 0.94; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    .sc-vt-bridge {
        view-transition-name: none;
    }
}

.ddfpt-table-row {
    transition: background-color 0.16s ease;
}

.ddfpt-table-row:hover {
    background: #fafafa;
}

.ddfpt-form input[type="text"]:not(.ddfpt-input),
.ddfpt-form input[type="email"]:not(.ddfpt-input),
.ddfpt-form input[type="number"]:not(.ddfpt-input),
.ddfpt-form input[type="date"]:not(.ddfpt-input),
.ddfpt-form input[type="file"],
.ddfpt-form select:not(.ddfpt-select),
.ddfpt-form textarea {
    display: block;
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #0f172a;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ddfpt-form input:focus,
.ddfpt-form select:focus,
.ddfpt-form textarea:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.ddfpt-form ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ddfpt-form li {
    margin-bottom: 0.5rem;
}

.ddfpt-form li label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #334155;
}

/* Champs établissement — selects soignés */
.ddfpt-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 0.375rem;
}

.ddfpt-label--inline {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 0.5rem;
    white-space: nowrap;
}

.ddfpt-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ddfpt-select,
.ddfpt-form .ddfpt-select,
.ddfpt-form select.ddfpt-select {
    appearance: none;
    display: block;
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    padding: 0.5625rem 2.25rem 0.5625rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #0f172a;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.55rem center;
    background-repeat: no-repeat;
    background-size: 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.ddfpt-select:hover,
.ddfpt-form select:hover {
    border-color: #cbd5e1;
}

.ddfpt-select:focus,
.ddfpt-form select.ddfpt-select:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.ddfpt-select--inline {
    width: auto;
    min-width: 11rem;
    max-width: 100%;
    font-size: 0.8125rem;
    padding-top: 0.4375rem;
    padding-bottom: 0.4375rem;
}

.ddfpt-select--active {
    border-color: #c7d2fe;
    background-color: #eef2ff;
    color: #3730a3;
    font-weight: 600;
}

.ddfpt-input,
.ddfpt-form .ddfpt-input {
    display: block;
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    padding: 0.5625rem 0.75rem;
    font-size: 0.875rem;
    color: #0f172a;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ddfpt-input:focus,
.ddfpt-form .ddfpt-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.ddfpt-select-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.ddfpt-select-wrap--inline {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ddfpt-inline-form {
    display: inline-flex;
    align-items: center;
}

.ddfpt-select-status {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6366f1;
    pointer-events: none;
}

.ddfpt-select-wrap--inline .ddfpt-select-status {
    position: static;
    transform: none;
    margin-left: 0.25rem;
}

.ddfpt-select-spinner {
    width: 1rem;
    height: 1rem;
    animation: ddfptSpin 0.7s linear infinite;
}

@keyframes ddfptSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ddfpt-select-spinner {
        animation: none;
    }
}

/* Combobox personnalisé (remplace les listes grises natives) */
.ddfpt-combobox {
    position: relative;
    width: 100%;
}

.ddfpt-combobox--inline {
    width: auto;
    min-width: 11rem;
    max-width: 100%;
}

.ddfpt-combobox-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    padding: 0.5625rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #0f172a;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    text-align: left;
    cursor: pointer;
    appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.ddfpt-combobox--inline .ddfpt-combobox-trigger {
    font-size: 0.8125rem;
    padding-top: 0.4375rem;
    padding-bottom: 0.4375rem;
}

.ddfpt-combobox-trigger:hover {
    border-color: #cbd5e1;
}

.ddfpt-combobox-trigger:focus-visible {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.ddfpt-combobox--active .ddfpt-combobox-trigger {
    border-color: #c7d2fe;
    background-color: #eef2ff;
    color: #3730a3;
}

.ddfpt-combobox-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ddfpt-combobox-value.is-placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.ddfpt-combobox--active .ddfpt-combobox-value:not(.is-placeholder) {
    font-weight: 600;
}

.ddfpt-combobox-chevron {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    color: #94a3b8;
    transition: transform 0.15s ease;
}

.ddfpt-combobox-chevron.is-open {
    transform: rotate(180deg);
}

.ddfpt-combobox-panel {
    position: fixed;
    z-index: 9999;
    visibility: hidden;
    overflow: hidden;
    border-radius: 0.875rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.ddfpt-combobox-list {
    list-style: none;
    margin: 0;
    padding: 0.375rem;
    overflow-y: auto;
    max-height: 15rem;
}

.ddfpt-combobox-option {
    display: block;
    width: 100%;
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 0.625rem;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #334155;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.ddfpt-combobox--inline .ddfpt-combobox-option {
    font-size: 0.8125rem;
}

.ddfpt-combobox-option:hover {
    background: #f8fafc;
    color: #0f172a;
}

.ddfpt-combobox-option.is-selected {
    background: #eef2ff;
    color: #3730a3;
    font-weight: 600;
}

.ddfpt-combobox-option.is-selected:hover {
    background: #e0e7ff;
}

#main-teacher-drop-zone.is-drop-target {
    border-color: #a5b4fc;
    background: #eef2ff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

[data-class-teacher-drag].is-dragging {
    opacity: 0.55;
}

.subject-teacher-class-label {
    display: inline;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    font-size: 0.625rem;
    line-height: 1.25;
    font-weight: 400;
    color: #94a3b8;
    cursor: pointer;
    text-align: left;
    white-space: normal;
    word-break: break-word;
    vertical-align: baseline;
}

.subject-teacher-class-label:hover,
.subject-teacher-class-label:focus-visible {
    color: #64748b;
    text-decoration: underline;
    text-underline-offset: 2px;
    outline: none;
}

.subject-teacher-row--selected {
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.subject-class-unassigned-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid #fecaca;
    background: #fef2f2;
    font-size: 0.625rem;
    line-height: 1.25;
    font-weight: 600;
    color: #b91c1c;
    white-space: normal;
    word-break: break-word;
}

.subject-class-unassigned-badge::before {
    content: '';
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    margin-right: 0.375rem;
    border-radius: 9999px;
    background: #ef4444;
    flex-shrink: 0;
}

/* Panneau affectations matière — grille 2 colonnes (ne pas dépendre du CDN Tailwind) */
.subject-assignment-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

/* Fiche poste enseignant (DDFPT) */
.poste-identity-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 768px) {
    .poste-identity-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.poste-identity-block {
    min-height: 8rem;
}

@media (min-width: 768px) {
    .subject-assignment-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .subject-assignment-panel {
        position: sticky;
        top: 1rem;
        align-self: start;
    }
}

/* =============================================================================
   Mobile-first — tactile, responsive, confort de lecture
   ============================================================================= */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: clip;
}

html,
body {
    max-width: 100%;
}

.sc-body {
    overflow-x: clip;
}

@supports (padding: max(0px)) {
    .sc-body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    .sc-site-footer__inner {
        padding-bottom: max(0.375rem, env(safe-area-inset-bottom));
    }

    @media (min-width: 640px) {
        .sc-site-footer__inner {
            padding-bottom: max(1rem, env(safe-area-inset-bottom));
        }
    }
}

img,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

main img[loading="lazy"] {
    content-visibility: auto;
}

/* Évite le zoom iOS sur focus des champs (< 16px) */
@media (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
    select,
    textarea,
    .ddfpt-combobox-trigger {
        font-size: max(16px, 1rem) !important;
    }

    main {
        line-height: 1.6;
    }

    /* Conteneurs de tableaux larges — défilement horizontal contenu */
    main :is(div, section, form, details, article):has(> table),
    main :is(div, section, form, details, article):has(table.min-w-full),
    main :is(div, section, form, details, article):has(table[class*="min-w-"]) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        max-width: 100%;
    }

    main .overflow-hidden:has(table) {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }
}

/* Conteneur explicite pour tableaux */
.sc-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

@media (max-width: 1023px) {
    .sc-table-scroll table {
        min-width: 640px;
    }
}

/* Tableaux empilés (opt-in : class="sc-table-stack" sur <table>) */
@media (max-width: 639px) {
    .sc-table-stack {
        display: block;
        min-width: 0 !important;
        border: 0;
    }

    .sc-table-stack thead {
        display: none;
    }

    .sc-table-stack tbody {
        display: block;
    }

    .sc-table-stack tr {
        display: block;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        border: 1px solid var(--sc-divider);
        border-radius: var(--sc-radius);
        background: var(--sc-surface-bg);
    }

    .sc-table-stack td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.375rem 0;
        border: 0;
        text-align: right;
    }

    .sc-table-stack td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.6875rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--sc-text-subtle);
        text-align: left;
        flex-shrink: 0;
        max-width: 45%;
    }

    .sc-table-stack td:first-child {
        padding-top: 0;
    }

    .sc-table-stack td:last-child {
        padding-bottom: 0;
    }
}

/* Zones tactiles minimales 44×44 px (appareils touch) */
@media (pointer: coarse) {
    button:not(.sc-touch-compact),
    input[type="submit"]:not(.sc-touch-compact),
    input[type="button"]:not(.sc-touch-compact),
    input[type="reset"]:not(.sc-touch-compact),
    select,
    .ddfpt-combobox-trigger,
    summary {
        min-height: 44px;
    }

    nav a,
    nav button,
    .sc-menu-item,
    dialog button {
        min-height: 44px;
    }

    nav a,
    nav button,
    .sc-menu-item {
        display: inline-flex;
        align-items: center;
    }

    /* Pied de page compact sur mobile — hauteur réduite volontairement */
    footer .sc-site-footer__action-btn,
    footer .sc-site-footer__help-btn {
        min-height: 2rem;
        min-width: 2rem;
    }

    button[aria-label]:not(.sc-touch-compact):not(.sc-site-footer__help-btn),
    .sc-touch-target {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    input[type="checkbox"],
    input[type="radio"] {
        min-height: 0;
        width: 1.25rem;
        height: 1.25rem;
    }

    label:has(> input[type="checkbox"]),
    label:has(> input[type="radio"]) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
    }
}

/* Liens et textes longs — pas de débordement horizontal */
.sc-break-anywhere,
.break-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 767px) {
    .sc-mobile-stack {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .sc-mobile-full {
        width: 100% !important;
    }
}

/* --- Accordéons PFMP (durée globale 0,5 s, courbe respirante) --- */
.sc-accordion-chevron,
.pfmp-chevron {
    transition: transform var(--sc-accordion-duration) var(--sc-motion-ease-breathe);
}

.pfmp-panel-toggle[aria-expanded="true"] .pfmp-chevron {
    transform: rotate(180deg);
}

.pfmp-collapsible {
    overflow: hidden;
    max-height: 8000px;
    opacity: 1;
    transition:
        max-height var(--sc-accordion-duration) var(--sc-motion-ease-settle),
        opacity var(--sc-accordion-duration) var(--sc-motion-ease-flow);
}

.pfmp-collapsible.is-collapsed {
    max-height: 0;
    opacity: 0;
    padding-block: 0;
    visibility: hidden;
    pointer-events: none;
}

.pfmp-company-group .pfmp-company-details {
    overflow: hidden;
    max-height: 2000px;
    opacity: 1;
    transition:
        max-height var(--sc-accordion-duration) var(--sc-motion-ease-settle),
        opacity var(--sc-accordion-duration) var(--sc-motion-ease-flow);
}

.pfmp-company-group[data-collapsed="true"] .pfmp-company-details {
    max-height: 0;
    opacity: 0;
}

.sc-accordion-inline-panel {
    overflow: hidden;
    max-height: 4000px;
    opacity: 1;
    transition:
        max-height var(--sc-accordion-duration) var(--sc-motion-ease-settle),
        opacity var(--sc-accordion-duration) var(--sc-motion-ease-flow);
}

.sc-accordion-inline-panel.is-collapsed {
    max-height: 0;
    opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
    .pfmp-company-group.pfmp-company-hover .pfmp-company-details {
        max-height: 2000px;
        opacity: 1;
    }

    .pfmp-hover-panel.pfmp-hover-panel-active .pfmp-collapsible.is-collapsed {
        max-height: 8000px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .pfmp-hover-panel.pfmp-hover-panel-active .pfmp-hover-panel-toggle[aria-expanded="false"] .pfmp-chevron {
        transform: rotate(180deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-accent-bar {
        transition: none;
    }

    .sc-accordion-chevron,
    .pfmp-chevron,
    .pfmp-collapsible,
    .pfmp-company-group .pfmp-company-details,
    .sc-accordion-inline-panel {
        transition: none !important;
    }
}

/* Accueil / cockpit — cartes « Urgent » et « Cette semaine » vides */
.sc-home-priority-card--empty .sc-home-priority-card__header h2 {
    color: #9ca3af;
    font-size: 1rem;
    font-weight: 600;
}

.sc-home-priority-card--empty .sc-home-priority-card__header .flex.mb-4 {
    margin-bottom: 0;
}

.sc-home-priority-card--empty .sc-home-priority-card__header p {
    color: #9ca3af;
}

.sc-home-priority-card--empty .sc-home-priority-card__header .rounded-full {
    display: none;
}

/* Cockpit PFMP — réorganisation des cartes (DDFPT) */
.ddfpt-cockpit-sortable-section {
    position: relative;
}

.ddfpt-cockpit-drag-handle {
    position: absolute;
    left: var(--sc-accent-bar-width, 6px);
    top: 0;
    bottom: 0;
    z-index: 3;
    width: 1.35rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: linear-gradient(90deg, rgba(35, 73, 87, 0.06), transparent);
    color: var(--stgab-navy-muted, #3d6574);
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.16s ease, background-color 0.16s ease;
    touch-action: none;
}

.ddfpt-cockpit-sortable-section:hover .ddfpt-cockpit-drag-handle,
.ddfpt-cockpit-drag-handle:focus-visible {
    opacity: 1;
}

.ddfpt-cockpit-drag-handle:hover,
.ddfpt-cockpit-drag-handle:focus-visible {
    background: linear-gradient(90deg, rgba(35, 73, 87, 0.12), rgba(35, 73, 87, 0.02));
    outline: none;
}

.ddfpt-cockpit-drag-handle__icon {
    width: 0.55rem;
    height: 0.9rem;
}

.ddfpt-cockpit-sortable-section.is-dragging {
    opacity: 0.55;
}

.ddfpt-cockpit-sortable-section.is-drop-before::before,
.ddfpt-cockpit-sortable-section.is-drop-after::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--stgab-teal, #65bca3);
    border-radius: 999px;
    z-index: 4;
    pointer-events: none;
}

.ddfpt-cockpit-sortable-section.is-drop-before::before {
    top: -0.45rem;
}

.ddfpt-cockpit-sortable-section.is-drop-after::after {
    bottom: -0.45rem;
}

@media (prefers-reduced-motion: reduce) {
    .ddfpt-cockpit-drag-handle {
        transition: none;
    }
}

/* Cockpit PFMP — réduction des cartes au titre */
.ddfpt-card--collapsible {
    position: relative;
}

.ddfpt-card-collapse-toggle {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    transition: color 0.16s ease, background-color 0.16s ease;
}

.ddfpt-card-collapse-toggle:hover,
.ddfpt-card-collapse-toggle:focus-visible {
    color: #4b5563;
    background: rgba(15, 23, 42, 0.05);
    outline: none;
}

.ddfpt-card-collapse-toggle__icon {
    width: 0.95rem;
    height: 0.95rem;
}

.ddfpt-card.is-collapsed > .ddfpt-card-header ~ *:not(.ddfpt-card-collapse-toggle) {
    display: none !important;
}

.ddfpt-card.is-collapsed .ddfpt-card-header {
    border-bottom-color: transparent !important;
    cursor: pointer;
}

.ddfpt-card.is-collapsed .ddfpt-card-header h2,
.ddfpt-card.is-collapsed .ddfpt-card-header h3,
.ddfpt-card.is-collapsed .ddfpt-card-header .ddfpt-card-title {
    color: #9ca3af !important;
}

.ddfpt-card.is-collapsed .ddfpt-card-header .ddfpt-card-header-main > :not(h2):not(h3),
.ddfpt-card.is-collapsed .ddfpt-card-header > div:not(.ddfpt-card-header-main),
.ddfpt-card.is-collapsed .ddfpt-card-header > p:not(.ddfpt-card-title) {
    display: none !important;
}

.ddfpt-card.ddfpt-kpi.is-collapsed .ddfpt-card-header ~ *:not(.ddfpt-card-collapse-toggle) {
    display: none !important;
}

/* --- Boutons de validation flottants (formulaires longs) --- */
.sc-floating-form-actions {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.sc-floating-form-actions--pill {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (max-width: 639px) {
    .sc-floating-form-actions:not(.sc-floating-form-actions--pill) .sc-floating-form-submit {
        width: 100%;
    }
}

/* --- Schéma parcours PFMP (page démo admin) --- */
.sc-pfmp-flow-page {
    width: 100%;
    max-width: 80rem;
}

@media (min-width: 1280px) {
    .sc-pfmp-flow-page {
        max-width: min(100rem, 94vw);
    }
}

@media (min-width: 1536px) {
    .sc-pfmp-flow-page {
        max-width: min(112rem, 96vw);
    }
}

.sc-pfmp-flow-track {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sc-pfmp-flow-step {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.sc-pfmp-flow-arrow {
    display: flex;
    justify-content: center;
    padding: 0.35rem 0;
    color: #9ca3af;
}

.sc-pfmp-flow-arrow-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.sc-pfmp-flow-parallel-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.875rem;
    border: 2px dashed #c7d2fe;
    background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%);
}

.sc-pfmp-flow-parallel-label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    align-self: center;
    margin: 0;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sc-pfmp-flow-parallel-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

.sc-pfmp-flow-parallel-steps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sc-pfmp-flow-parallel-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.125rem 0;
    color: #6366f1;
}

.sc-pfmp-flow-parallel-divider-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background: #e0e7ff;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
}

.sc-pfmp-flow-parallel-group .sc-pfmp-flow-step::after,
.sc-pfmp-flow-parallel-group .sc-pfmp-flow-step::before {
    display: none !important;
}

@media (min-width: 1024px) {
    .sc-pfmp-flow-track {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
        gap: 0.75rem 1rem;
        align-items: start;
    }

    .sc-pfmp-flow-step {
        position: relative;
        min-width: 0;
    }

    .sc-pfmp-flow-arrow {
        display: none;
    }

    .sc-pfmp-flow-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 2.75rem;
        right: -0.65rem;
        width: 0.65rem;
        height: 2px;
        background: linear-gradient(90deg, #d1d5db, #9ca3af);
        z-index: 1;
    }

    .sc-pfmp-flow-step:not(:last-child)::before {
        content: '';
        position: absolute;
        top: calc(2.75rem - 3px);
        right: -0.72rem;
        width: 0;
        height: 0;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 5px solid #9ca3af;
        z-index: 1;
    }

    .sc-pfmp-flow-card {
        height: 100%;
    }

    .sc-pfmp-flow-parallel-group {
        grid-column: span 2;
        padding: 0.875rem;
    }

    .sc-pfmp-flow-parallel-steps {
        flex-direction: row;
        align-items: stretch;
        gap: 0.75rem;
    }

    .sc-pfmp-flow-parallel-divider {
        flex-shrink: 0;
        padding: 0;
        align-self: center;
    }

    .sc-pfmp-flow-parallel-group .sc-pfmp-flow-step {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Phase 4 (6 étapes) : 2 lignes × 3 cartes au lieu d'une seule rangée */
    .sc-pfmp-flow-track--grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 1.25rem;
    }

    .sc-pfmp-flow-track--grid-3 .sc-pfmp-flow-step:nth-child(3n)::after,
    .sc-pfmp-flow-track--grid-3 .sc-pfmp-flow-step:nth-child(3n)::before {
        display: none;
    }
}

@media (min-width: 1280px) {
    .sc-pfmp-flow-track {
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
        gap: 1rem 1.25rem;
    }

    .sc-pfmp-flow-track--grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 1.5rem;
        column-gap: 1.5rem;
    }
}

@media (min-width: 1536px) {
    .sc-pfmp-flow-track {
        grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
        gap: 1.25rem 1.75rem;
    }

    .sc-pfmp-flow-track--grid-3 {
        row-gap: 1.75rem;
        column-gap: 2rem;
    }
}

.sc-pfmp-flow-summary {
    line-height: 1.4;
}

/* Mode nettoyage admin */
.sc-cleanup-mode-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9997;
    background: #b45309;
    color: #fff;
    text-align: center;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}
.sc-body.sc-cleanup-mode-active {
    padding-top: 1.75rem;
}
.sc-cleanup-mode-toggle.is-active {
    color: var(--stgab-red);
    font-weight: 600;
}
.sc-cleanup-target {
    outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
    .sc-cleanup-target:hover {
        outline: 1px dashed rgba(227, 0, 11, 0.35);
    }
}
.sc-cleanup-delete-btn {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: #fff;
    border: 1px solid #fecaca;
    color: #dc2626;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.sc-cleanup-target:hover .sc-cleanup-delete-btn,
.sc-cleanup-target:focus-within .sc-cleanup-delete-btn {
    opacity: 1;
}
.sc-cleanup-delete-btn:hover {
    background: #fef2f2;
}
.sc-cleanup-delete-btn__icon {
    width: 1rem;
    height: 1rem;
}
@media (max-width: 767px) {
    .sc-cleanup-delete-btn {
        opacity: 1;
    }
}