/* ==========================================================================
   SYGMUTE — Thème d'interface moderne
   Couche chargée APRÈS Bootstrap (front.css) et style1.css.
   Elle modernise l'apparence sans modifier le HTML métier des pages :
   les motifs récurrents (en-tête « ESPACE … », bandeau .hero-exeat, cartes,
   tableaux, formulaires) sont restylés ici, une seule fois pour tous les espaces.

   Sommaire
     1. Jetons de design
     2. Base et coque de l'application
     3. Bannière, menu et barre de contexte
     4. En-têtes de page
     5. Cartes, tableaux, badges
     6. Formulaires et boutons
     7. Pagination, alertes, modales, menus déroulants
     8. Pied de page
     9. Pages publiques (connexion, mot de passe)
    10. Adaptations mobiles et impression
   ========================================================================== */

/* 1. Jetons de design ===================================================== */
:root {
    --sy-green: #12933e;          /* vert institutionnel (menu, actions principales) */
    --sy-green-600: #0f8236;
    --sy-green-700: #0b6b2c;
    --sy-green-50: #ecf7f0;
    --sy-green-100: #d3eedc;
    --sy-orange: #f08a24;         /* orange du drapeau (repère d'état actif) */
    --sy-orange-50: #fff4e8;
    --sy-orange-700: #b85f08;

    --sy-ink: #17211b;            /* texte principal */
    --sy-ink-2: #3c4842;          /* texte secondaire */
    --sy-muted: #6b7770;          /* texte d'aide */
    --sy-line: #e3e8e5;           /* bordures */
    --sy-line-2: #eef2ef;         /* séparateurs légers */
    --sy-bg: #f3f5f4;             /* fond de l'application */
    --sy-surface: #ffffff;
    --sy-surface-2: #f8faf9;

    --sy-red: #d23f31;
    --sy-red-50: #fdeeec;
    --sy-blue: #1f6fd1;
    --sy-blue-50: #eaf2fc;
    --sy-amber: #b7791f;
    --sy-amber-50: #fdf5e4;

    --sy-radius-sm: 6px;
    --sy-radius: 10px;
    --sy-radius-lg: 14px;
    --sy-shadow-sm: 0 1px 2px rgba(16, 24, 20, .06);
    --sy-shadow: 0 1px 2px rgba(16, 24, 20, .05), 0 4px 14px rgba(16, 24, 20, .06);
    --sy-shadow-lg: 0 12px 32px rgba(16, 24, 20, .14), 0 2px 6px rgba(16, 24, 20, .06);
    --sy-focus: 0 0 0 3px rgba(18, 147, 62, .22);

    --sy-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sy-shell-max: 1320px;       /* largeur de la page (comme l'ancien container-md) */
    --sy-outside: #e6e9e7;        /* fond autour de la page */
    --sy-shell-shadow: 0 0 20px rgba(0, 0, 0, .33);   /* ombre « page soulevée » d'origine */
    --sy-gutter: 24px;

    /* Alignement des variables Bootstrap sur la charte */
    --bs-body-font-family: var(--sy-font);
    --bs-body-color: var(--sy-ink);
    --bs-body-bg: var(--sy-bg);
    --bs-success: var(--sy-green);
    --bs-success-rgb: 18, 147, 62;
    --bs-primary: var(--sy-green);
    --bs-primary-rgb: 18, 147, 62;
    --bs-border-color: var(--sy-line);
}

/* 2. Base et coque ========================================================= */
html { -webkit-text-size-adjust: 100%; }

body.sy-app,
body.sy-public {
    font-family: var(--sy-font);
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--sy-ink);
    background: var(--sy-outside) !important;
    background-image: none !important;
    padding: 0 !important;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01";
}

.sy-app h1, .sy-app h2, .sy-app h3, .sy-app h4, .sy-app h5, .sy-app h6,
.sy-public h1, .sy-public h2, .sy-public h3, .sy-public h4, .sy-public h5, .sy-public h6 {
    font-family: var(--sy-font);
    color: var(--sy-ink);
    letter-spacing: -.01em;
}

.sy-app a { color: var(--sy-green-600); }
.sy-app a:hover { color: var(--sy-green-700); }
.sy-app .text-success { color: var(--sy-green) !important; }
.sy-app .bg-success { background-color: var(--sy-green) !important; }
.sy-app .text-muted { color: var(--sy-muted) !important; }
.sy-app ::selection { background: var(--sy-green-100); }

.sy-shell {
    max-width: var(--sy-shell-max);
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--sy-bg);
    box-shadow: var(--sy-shell-shadow);
}

.sy-main {
    flex: 1 0 auto;
    padding: 20px var(--sy-gutter) 40px;
}

/* La rangée conserve le comportement Bootstrap attendu par les pages,
   sans gouttière parasite. */
.sy-content { --bs-gutter-x: 0; margin: 0; row-gap: 16px; }
.sy-content > * { padding-left: 0; padding-right: 0; }

/* 3. Bannière, menu, contexte ============================================== */
.sy-header { position: relative; z-index: 1020; }

.sy-banner { line-height: 0; background: #fbe6c8; }
.sy-banner img { display: block; width: 100%; height: auto; }

.sy-nav {
    --sy-nav-h: 58px;
    background: var(--sy-green) !important;
    padding: 0;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .06), 0 6px 18px rgba(11, 107, 44, .18);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.sy-nav__inner {
    min-height: var(--sy-nav-h);
    padding: 0 16px;
    gap: 8px;
    flex-wrap: wrap;
}

/* Pastille d'espace (gauche) */
.sy-nav__space {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    margin-right: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff !important;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease;
}
.sy-nav__space:hover { background: rgba(255, 255, 255, .2); }
.sy-nav__space-icon {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--sy-green);
    font-size: 16px;
}
.sy-nav__space-text { display: flex; flex-direction: column; line-height: 1.1; }
.sy-nav__space-text small {
    font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .8;
}
.sy-nav__space-text strong { font-size: 14px; font-weight: 700; letter-spacing: .01em; }

/* Liens de premier niveau */
.sy-nav .navbar-collapse { align-items: stretch; }
.sy-nav__menu { gap: 2px; align-items: stretch; }
.sy-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    min-height: var(--sy-nav-h);
    padding: 0 14px !important;
    color: #fff !important;
    font-family: var(--sy-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    border-top: 3px solid transparent;
    transition: background .15s ease, color .15s ease;
}
.sy-nav .nav-link > .fa { font-size: 15px; opacity: .85; }
.sy-nav .nav-link:hover,
.sy-nav .nav-link:focus-visible,
.sy-nav .nav-item.show > .nav-link { background: rgba(255, 255, 255, .12); }
.sy-nav .nav-link:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* Signature visuelle conservée : onglet actif blanc + texte et filet orange */
.sy-nav .nav-link.active {
    background: #fff;
    color: var(--sy-orange) !important;
    border-bottom-color: var(--sy-orange);
}
.sy-nav .nav-link.active > .fa { opacity: 1; }
.sy-nav .dropdown-toggle::after {
    border: 0;
    content: "\f107";
    font-family: FontAwesome;
    font-size: 14px;
    margin-left: 2px;
    vertical-align: 0;
    opacity: .8;
    transition: transform .15s ease;
}
.sy-nav .nav-item.show > .dropdown-toggle::after { transform: rotate(180deg); }

/* Partie droite : bascule d'espace + compte */
.sy-nav__right { margin-left: auto; align-items: center; gap: 6px; }
.sy-nav__switch {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--sy-orange);
    color: #fff !important;
    font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    text-decoration: none; white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.sy-nav__switch:hover { background: var(--sy-orange-700); }
.sy-nav .sy-nav__account { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; gap: 10px; }
.sy-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .7);
    background: #fff;
    flex-shrink: 0;
}
.sy-avatar--initials {
    display: grid; place-items: center;
    background: #fff; color: var(--sy-green-700);
    font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
}
.sy-nav__toggler {
    border: 0; color: #fff; font-size: 22px; padding: 8px 10px; margin-left: auto;
    border-radius: var(--sy-radius-sm);
}
.sy-nav__toggler:focus { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }

/* Panneaux déroulants (« méga-menu ») */
.sy-nav .dropdown-menu { margin-top: 0 !important; }
.sy-mega {
    padding: 10px;
    min-width: 330px;
    border: 1px solid var(--sy-line);
    border-top: 3px solid var(--sy-orange);
    border-radius: 0 0 var(--sy-radius-lg) var(--sy-radius-lg);
    box-shadow: var(--sy-shadow-lg);
}
.sy-mega.show { display: grid; gap: 4px 14px; }
.sy-mega--wide.show { grid-template-columns: repeat(2, minmax(290px, 1fr)); min-width: 620px; }
.sy-mega--3.show { grid-template-columns: repeat(3, minmax(260px, 1fr)); min-width: 820px; }
.sy-mega__section { display: flex; flex-direction: column; gap: 2px; }
.sy-mega__title {
    padding: 8px 10px 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--sy-muted);
}
.sy-mega__link {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 9px 10px;
    border-radius: var(--sy-radius);
    color: var(--sy-ink) !important;
    text-decoration: none;
    transition: background .12s ease;
}
.sy-mega__link:hover, .sy-mega__link:focus-visible { background: var(--sy-green-50); }
.sy-mega__link:focus-visible { outline: 2px solid var(--sy-green); outline-offset: -2px; }
.sy-mega__icon {
    width: 34px; height: 34px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 9px;
    background: var(--sy-green-50);
    color: var(--sy-green);
    font-size: 15px;
}
.sy-mega__text { display: flex; flex-direction: column; min-width: 0; padding-top: 1px; }
.sy-mega__label { font-size: 14px; font-weight: 600; line-height: 1.3; }
.sy-mega__label em {
    font-style: normal; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    padding: 2px 6px; margin-left: 4px; border-radius: 4px; background: var(--sy-line-2); color: var(--sy-muted);
}
.sy-mega__desc { font-size: 12.5px; color: var(--sy-muted); line-height: 1.35; margin-top: 2px; }
.sy-mega__link.is-active { background: var(--sy-orange-50); }
.sy-mega__link.is-active .sy-mega__icon { background: var(--sy-orange); color: #fff; }
.sy-mega__link.is-active .sy-mega__label { color: var(--sy-orange-700); }
.sy-mega__link.is-disabled { opacity: .55; pointer-events: none; }

/* Menu « Mon compte » */
.sy-account {
    min-width: 270px; padding: 8px;
    border: 1px solid var(--sy-line);
    border-radius: var(--sy-radius-lg);
    box-shadow: var(--sy-shadow-lg);
}
.sy-account__head {
    display: flex; flex-direction: column;
    padding: 10px 12px 12px; margin-bottom: 6px;
    border-bottom: 1px solid var(--sy-line-2);
}
.sy-account__head strong { font-size: 14px; color: var(--sy-ink); }
.sy-account__head small { font-size: 12.5px; color: var(--sy-muted); }
.sy-account .dropdown-item {
    border-radius: var(--sy-radius-sm);
    padding: 9px 12px; font-size: 14px; font-weight: 500;
    color: var(--sy-ink-2);
}
.sy-account .dropdown-item .fa { color: var(--sy-muted); margin-right: 6px; }
.sy-account .dropdown-item:hover { background: var(--sy-green-50); color: var(--sy-ink); }
.sy-account .sy-account__logout { color: var(--sy-red); font-weight: 600; }
.sy-account .sy-account__logout .fa { color: var(--sy-red); }
.sy-account .sy-account__logout:hover { background: var(--sy-red-50); color: var(--sy-red); }

/* Barre de contexte : fil d'Ariane + année scolaire */
.sy-context {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px 20px;
    padding: 10px var(--sy-gutter);
    background: var(--sy-surface);
    border-bottom: 1px solid var(--sy-line);
}
.sy-crumbs {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    font-size: 13.5px; color: var(--sy-muted);
}
.sy-crumbs a { color: var(--sy-muted); text-decoration: none; font-weight: 500; }
.sy-crumbs a:hover { color: var(--sy-green); }
.sy-crumbs .fa { font-size: 12px; opacity: .6; }
.sy-crumbs strong { color: var(--sy-ink); font-weight: 600; }

.sy-year { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sy-year__form { display: flex; align-items: center; gap: 8px; margin: 0; }
.sy-year__label {
    font-size: 12.5px; font-weight: 600; color: var(--sy-muted); margin: 0; white-space: nowrap;
}
.sy-year__select.form-select { width: auto; min-width: 190px; font-weight: 600; }
.sy-year--error { color: var(--sy-amber); font-size: 13.5px; gap: 8px; }
.sy-status {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 11px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.sy-status__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sy-status__hint { font-weight: 500; opacity: .85; }
.sy-status--open    { background: var(--sy-green-50); color: var(--sy-green-700); }
.sy-status--open .sy-status__dot { box-shadow: 0 0 0 3px rgba(18, 147, 62, .18); }
.sy-status--prep    { background: var(--sy-blue-50); color: var(--sy-blue); }
.sy-status--closed  { background: var(--sy-amber-50); color: var(--sy-amber); }
.sy-status--archive { background: var(--sy-line-2); color: var(--sy-muted); }
.sy-year-notice {
    flex-basis: 100%;
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px;
    border-radius: var(--sy-radius);
    background: var(--sy-amber-50);
    color: #7a5212;
    font-size: 13.5px;
}
.sy-year-notice .fa { margin-top: 3px; }

/* 4. En-têtes de page ===================================================== */
/* Motif historique : bloc « ESPACE … » encadré + bandeau .hero-exeat.
   Il devient un en-tête de page compact, aligné à gauche. */
.sy-content > .my-0.p-3.bg-body.shadow-sm:has(.hero-exeat),
.sy-content > .my-0.p-3.bg-body.shadow-sm:has(> .text-center > h3.border-dark) {
    background: transparent !important;
    box-shadow: none !important;
    padding: 4px 0 0 !important;
    margin: 0 !important;
}
.sy-content .text-center.mb-4:has(> h3.border-dark) { text-align: left !important; margin-bottom: 6px !important; }
.sy-content h3.border-dark.w-50 {
    display: inline-flex; align-items: center; gap: 8px;
    width: auto !important;
    margin: 0 !important;
    padding: 5px 12px !important;
    border: 0 !important;
    border-radius: 999px;
    background: var(--sy-green-50) !important;
    color: var(--sy-green-700) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .09em;
    text-transform: uppercase;
    line-height: 1.4;
}
.sy-content h3.border-dark.w-50::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sy-orange);
}
.sy-content .hero-exeat {
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
    text-align: left !important;
    padding: 6px 0 4px !important;
}
.sy-content .hero-exeat > .container { max-width: none; padding: 0; }
.sy-content .hero-exeat h1,
.sy-content .hero-exeat .display-6 {
    font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem) !important;
    font-weight: 800 !important;
    letter-spacing: .005em;
    text-transform: uppercase;   /* homogénéise les titres saisis en minuscules */
    margin-bottom: 4px !important;
    color: var(--sy-ink);
}
.sy-content .hero-exeat .text-muted { font-size: 15px; color: var(--sy-muted) !important; }

/* Blocs de contenu des pages (anciens « .my-3.p-3.bg-body.shadow-sm ») */
.sy-content > .my-3.p-3.bg-body.shadow-sm,
.sy-content > .my-2.p-3.bg-body.shadow-sm,
.sy-content > .p-3.bg-body.shadow-sm {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.sy-content > .my-3.p-3.bg-body.shadow-sm > .row,
.sy-content > .my-2.p-3.bg-body.shadow-sm > .row { --bs-gutter-x: 1rem; }

/* Pages de cycle annuel (gabarits workflow/*) */
.sy-content > .container-fluid.py-3 { padding: 4px 0 0 !important; }
.sy-content > .container-fluid.py-3 > .mb-3:first-child h3,
.sy-content > .container-fluid.py-3 > .d-flex:first-child h3,
.sy-content h2:first-child {
    font-size: clamp(1.4rem, 1.1rem + .9vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -.02em;
}
.sy-content .fs-3.fw-bold { font-weight: 800 !important; letter-spacing: -.02em; }

/* 5. Cartes, tableaux, badges ============================================= */
.sy-app .card,
.sy-public .card {
    border: 1px solid var(--sy-line);
    border-radius: var(--sy-radius-lg);
    box-shadow: var(--sy-shadow-sm);
    background: var(--sy-surface);
    overflow: hidden;
}
.sy-app .card.shadow-sm { box-shadow: var(--sy-shadow-sm) !important; }
.sy-app .card-header {
    background: var(--sy-surface);
    border-bottom: 1px solid var(--sy-line);
    padding: 16px 20px;
}
.sy-app .card-header > hr { border-color: var(--sy-line-2); opacity: 1; margin: 12px -20px !important; }
.sy-app .card-header h5 { font-size: 15px; font-weight: 600; color: var(--sy-ink-2); }
.sy-app .card-header h5 strong { color: var(--sy-ink) !important; font-weight: 800; font-size: 17px; }
.sy-app .card-body { padding: 18px 20px; }
.sy-app .card-body.p-0 { padding: 0; }
.sy-app .card-footer { background: var(--sy-surface-2); border-top: 1px solid var(--sy-line); }

.sy-app .table {
    --bs-table-hover-bg: var(--sy-surface-2);
    --bs-table-striped-bg: var(--sy-surface-2);
    margin-bottom: 0;
    color: var(--sy-ink);
    font-size: 14px;
}
.sy-app .table > :not(caption) > * > * {
    padding: 13px 16px;
    border-bottom-color: var(--sy-line-2);
}
.sy-app .table > :not(:first-child) { border-top: 0 !important; }
.sy-app .table thead th,
.sy-app .table > thead > tr > * {
    background: var(--sy-surface-2) !important;
    color: var(--sy-muted) !important;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--sy-line) !important;
    padding-top: 11px; padding-bottom: 11px;
    white-space: nowrap;
}
.sy-app .table-hover > tbody > tr { transition: background .12s ease; }
.sy-app .table tbody tr:last-child > * { border-bottom: 0; }
.sy-app .table-dark,
.sy-app .table > thead.table-dark > tr > * { color: var(--sy-muted) !important; }
.sy-app .table-responsive { border-radius: inherit; }

/* Avatars des listes */
.sy-app .avatar,
.sy-app .img-radius {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--sy-line-2);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--sy-line);
}

/* Badges « doux » utilisés dans toutes les listes */
.sy-app .badge {
    --bs-badge-border-radius: 6px;
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .38em .62em;
}
.sy-app .badge.bg-light-danger,  .sy-app .bg-light-danger  { background: var(--sy-red-50) !important; color: #b42f22 !important; }
.sy-app .badge.bg-light-primary, .sy-app .bg-light-primary { background: var(--sy-green-50) !important; color: var(--sy-green-700) !important; }
.sy-app .badge.bg-light-info,    .sy-app .bg-light-info    { background: var(--sy-blue-50) !important; color: var(--sy-blue) !important; }
.sy-app .badge.bg-light-warning, .sy-app .bg-light-warning { background: var(--sy-amber-50) !important; color: var(--sy-amber) !important; }
.sy-app .badge.bg-light-orange,  .sy-app .bg-light-orange  { background: var(--sy-orange-50) !important; color: var(--sy-orange-700) !important; }
.sy-app .badge.bg-light-second,  .sy-app .bg-light-second,
.sy-app .badge.bg-light-secondary { background: var(--sy-line-2) !important; color: var(--sy-ink-2) !important; }
.sy-app .badge-soft-success { background: var(--sy-green-50); color: var(--sy-green-700); }
.sy-app .badge-soft-danger  { background: var(--sy-red-50);   color: #b42f22; }
.sy-app .badge-soft-warning { background: var(--sy-amber-50); color: var(--sy-amber); }
.sy-app .badge-soft-info    { background: var(--sy-blue-50);  color: var(--sy-blue); }
.sy-app .badge-soft-dark    { background: var(--sy-line-2);   color: var(--sy-ink-2); }

/* 6. Formulaires et boutons =============================================== */
.sy-app .form-label,
.sy-public .form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sy-ink-2);
    margin-bottom: 6px;
}
.sy-app .form-control,
.sy-app .form-select,
.sy-public .form-control,
.sy-public .form-select {
    min-height: 40px;
    border: 1px solid #d3dbd6;
    border-radius: var(--sy-radius-sm);
    background-color: #fff;
    color: var(--sy-ink);
    font-size: 14.5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sy-app .form-control-sm, .sy-app .form-select-sm { min-height: 34px; font-size: 13.5px; }
.sy-app textarea.form-control { min-height: 90px; }
.sy-app .form-control::placeholder, .sy-public .form-control::placeholder { color: #9aa59f; }
.sy-app .form-control:hover, .sy-app .form-select:hover { border-color: #b8c4bd; }
.sy-app .form-control:focus,
.sy-app .form-select:focus,
.sy-public .form-control:focus,
.sy-public .form-select:focus {
    border-color: var(--sy-green);
    box-shadow: var(--sy-focus);
}
.sy-app .form-control:disabled, .sy-app .form-control[readonly], .sy-app .form-select:disabled {
    background-color: var(--sy-surface-2);
    color: var(--sy-muted);
}
.sy-app .form-check-input:checked { background-color: var(--sy-green); border-color: var(--sy-green); }
.sy-app .form-check-input:focus { box-shadow: var(--sy-focus); border-color: var(--sy-green); }
.sy-app .input-group > .btn { min-height: 40px; }
.sy-app .input-group-text { background: var(--sy-surface-2); border-color: #d3dbd6; color: var(--sy-muted); }
.sy-app .text-danger { color: var(--sy-red) !important; }
.sy-app fieldset, .sy-app legend { font-family: var(--sy-font); }

/* Boutons */
.sy-app .btn,
.sy-public .btn {
    border-radius: var(--sy-radius-sm);
    font-family: var(--sy-font);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .01em;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.sy-app .btn:active { transform: translateY(1px); }
.sy-app .btn:focus-visible, .sy-public .btn:focus-visible { box-shadow: var(--sy-focus); }
.sy-app .btn-sm { padding: 6px 11px; font-size: 13px; }
.sy-app .btn-lg { padding: 11px 20px; font-size: 15.5px; }
.sy-app .btn .fa { font-size: 1.05em; }

.sy-app .btn-success, .sy-app .btn-primary,
.sy-public .btn-success, .sy-public .btn-primary {
    background: var(--sy-green); border-color: var(--sy-green); color: #fff;
}
.sy-app .btn-success:hover, .sy-app .btn-primary:hover,
.sy-public .btn-success:hover, .sy-public .btn-primary:hover {
    background: var(--sy-green-700); border-color: var(--sy-green-700); color: #fff;
}
.sy-app .btn-secondary, .sy-app .btn-dark {
    background: #2f3a34; border-color: #2f3a34; color: #fff;
}
.sy-app .btn-secondary:hover, .sy-app .btn-dark:hover { background: #1d2520; border-color: #1d2520; color: #fff; }
.sy-app .btn-danger { background: var(--sy-red); border-color: var(--sy-red); }
.sy-app .btn-danger:hover { background: #b42f22; border-color: #b42f22; }
.sy-app .btn-warning { background: var(--sy-orange); border-color: var(--sy-orange); color: #fff; }
.sy-app .btn-warning:hover { background: var(--sy-orange-700); border-color: var(--sy-orange-700); color: #fff; }
.sy-app .btn-info { background: var(--sy-blue); border-color: var(--sy-blue); color: #fff; }
.sy-app .btn-light, .sy-app .btn-outline-secondary {
    background: #fff; border-color: #d3dbd6; color: var(--sy-ink-2);
}
.sy-app .btn-light:hover, .sy-app .btn-outline-secondary:hover { background: var(--sy-surface-2); border-color: #b8c4bd; color: var(--sy-ink); }
.sy-app .btn-outline-success, .sy-app .btn-outline-primary { color: var(--sy-green); border-color: var(--sy-green); }
.sy-app .btn-outline-success:hover, .sy-app .btn-outline-primary:hover { background: var(--sy-green); color: #fff; }

/* Boutons d'action des lignes de tableau : carrés, discrets, colorés au survol */
.sy-app td .btn-group { gap: 6px; }
.sy-app td .btn-sm {
    width: 34px; height: 34px;
    padding: 0;
    margin: 0 !important;
    border-radius: 8px !important;
}
.sy-app td .btn-sm:has(> span), .sy-app td .btn-sm:has(> b) { width: auto; padding: 0 10px; }
.sy-app td .btn-secondary.btn-sm,
.sy-app td .btn-dark.btn-sm,
.sy-app td .btn-info.btn-sm,
.sy-app td .btn-primary.btn-sm {
    background: var(--sy-surface-2);
    border-color: var(--sy-line);
    color: var(--sy-ink-2) !important;
}
.sy-app td .btn-secondary.btn-sm .fa, .sy-app td .btn-dark.btn-sm .fa,
.sy-app td .btn-info.btn-sm .fa, .sy-app td .btn-primary.btn-sm .fa { color: inherit !important; }
.sy-app td .btn-secondary.btn-sm:hover,
.sy-app td .btn-dark.btn-sm:hover,
.sy-app td .btn-info.btn-sm:hover,
.sy-app td .btn-primary.btn-sm:hover { background: var(--sy-green-50); border-color: var(--sy-green-100); color: var(--sy-green-700) !important; }
.sy-app td .btn-danger.btn-sm { background: var(--sy-red-50); border-color: #f7d4cf; color: var(--sy-red) !important; }
.sy-app td .btn-danger.btn-sm .fa { color: inherit !important; }
.sy-app td .btn-danger.btn-sm:hover { background: var(--sy-red); border-color: var(--sy-red); color: #fff !important; }
.sy-app td .btn-success.btn-sm { background: var(--sy-green-50); border-color: var(--sy-green-100); color: var(--sy-green-700) !important; }
.sy-app td .btn-success.btn-sm .fa { color: inherit !important; }
.sy-app td .btn-success.btn-sm:hover { background: var(--sy-green); color: #fff !important; }

/* 7. Pagination, alertes, modales, menus ================================== */
.sy-app .pagination { gap: 4px; flex-wrap: wrap; margin: 6px 0; }
.sy-app .page-item.bg-info { background: transparent !important; }
.sy-app .page-link {
    border: 1px solid var(--sy-line);
    border-radius: 8px !important;
    min-width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 10px;
    font-size: 13.5px; font-weight: 600;
    color: var(--sy-ink-2) !important;
    background: #fff;
}
.sy-app .page-link:hover { background: var(--sy-green-50); border-color: var(--sy-green-100); color: var(--sy-green-700) !important; }
.sy-app .page-link:focus { box-shadow: var(--sy-focus); }
.sy-app .page-item.active .page-link {
    background: var(--sy-green) !important;
    border-color: var(--sy-green) !important;
    color: #fff !important;
}
.sy-app .page-item.disabled .page-link { background: transparent; color: #a8b2ac !important; border-color: transparent; }

.sy-app .alert,
.sy-public .alert {
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: var(--sy-radius);
    font-size: 14px;
    padding: 12px 16px;
    text-align: left !important;
}
.sy-app .alert-success, .sy-public .alert-success { background: var(--sy-green-50); border-color: var(--sy-green-100); border-left-color: var(--sy-green); color: #0d5a26; }
.sy-app .alert-danger,  .sy-public .alert-danger  { background: var(--sy-red-50);   border-color: #f7d4cf; border-left-color: var(--sy-red); color: #8f2419; }
.sy-app .alert-warning, .sy-public .alert-warning { background: var(--sy-amber-50); border-color: #f3e2bb; border-left-color: #d69a2d; color: #6e4c10; }
.sy-app .alert-info,    .sy-public .alert-info    { background: var(--sy-blue-50);  border-color: #cfe0f6; border-left-color: var(--sy-blue); color: #184f93; }

.sy-app .modal-content { border: 0; border-radius: var(--sy-radius-lg); box-shadow: var(--sy-shadow-lg); }
.sy-app .modal-header { border-bottom: 1px solid var(--sy-line); padding: 16px 20px; }
.sy-app .modal-header.bg-success, .sy-app .modal-header.bg-primary { color: #fff; }
.sy-app .modal-title { font-weight: 700; font-size: 17px; }
.sy-app .modal-footer { border-top: 1px solid var(--sy-line); background: var(--sy-surface-2); }

.sy-app .nav-tabs { border-bottom: 1px solid var(--sy-line); gap: 4px; }
.sy-app .nav-tabs .nav-link {
    border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    color: var(--sy-muted); font-weight: 600; padding: 10px 14px;
}
.sy-app .nav-tabs .nav-link.active { color: var(--sy-green-700); border-bottom-color: var(--sy-green); background: transparent; }

/* Menus déroulants hors navigation principale */
.sy-app .sy-content .dropdown-menu {
    border: 1px solid var(--sy-line);
    border-radius: var(--sy-radius);
    box-shadow: var(--sy-shadow-lg);
    padding: 6px;
}
.sy-app .sy-content .dropdown-item { border-radius: var(--sy-radius-sm); padding: 8px 12px; font-size: 14px; border: 0; }
.sy-app .sy-content .dropdown-item:hover { background: var(--sy-green-50); color: var(--sy-ink) !important; }

.sy-app hr { border-color: var(--sy-line); opacity: 1; }
.sy-app .border-dark { border-color: var(--sy-line) !important; }

/* 8. Pied de page ========================================================= */
.sy-shell > footer,
.sy-public-shell > footer {
    margin: 0 !important;
    background: linear-gradient(180deg, #12933e 0%, #0e7a33 100%) !important;
    padding-top: 28px !important;
    padding-bottom: 18px;
}
.sy-shell > footer a, .sy-public-shell > footer a { color: rgba(255, 255, 255, .88) !important; text-decoration: none; }
.sy-shell > footer a:hover, .sy-public-shell > footer a:hover { color: #fff !important; text-decoration: underline; }
.sy-shell > footer h5, .sy-shell > footer h4, .sy-shell > footer h6,
.sy-public-shell > footer h5, .sy-public-shell > footer h4, .sy-public-shell > footer h6 {
    color: #fff; font-weight: 700; letter-spacing: .02em;
}

/* 9. Pages publiques ======================================================= */
.sy-public-shell {
    max-width: var(--sy-shell-max);
    margin: 0 auto;
    min-height: 100vh;
    display: flex; flex-direction: column;
    background: var(--sy-bg);
    box-shadow: var(--sy-shell-shadow);
}
.sy-public-main { flex: 1 0 auto; padding: 32px var(--sy-gutter) 48px; }

.sy-topbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px;
    padding: 0 20px;
    min-height: 52px;
    background: var(--sy-green);
    color: #fff;
    font-size: 14.5px;
}
.sy-topbar a { color: #fff !important; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.sy-topbar a:hover { text-decoration: underline; }
.sy-topbar__sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .35); }
.sy-topbar__end { margin-left: auto; }

.sy-ticker {
    display: flex; align-items: stretch;
    background: #2b322e;
    color: #fff;
    min-height: 40px;
    overflow: hidden;
}
.sy-ticker__tag {
    display: flex; align-items: center;
    padding: 0 16px;
    background: var(--sy-red);
    font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
    white-space: nowrap;
}
.sy-ticker__body { flex: 1; display: flex; align-items: center; min-width: 0; padding: 0 14px; font-size: 14px; }
.sy-ticker__body marquee { width: 100%; }

.sy-auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: 40px;
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
}
.sy-auth__intro h1 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; margin: 14px 0 12px; }
.sy-auth__intro p { color: var(--sy-ink-2); font-size: 16px; max-width: 52ch; }
.sy-auth__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px; border-radius: 999px;
    background: var(--sy-green-50); color: var(--sy-green-700);
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.sy-auth__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sy-orange); }
.sy-auth__steps { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.sy-auth__steps li {
    display: flex; gap: 12px; align-items: center;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--sy-line);
    border-radius: var(--sy-radius);
    font-size: 14px;
}
.sy-auth__steps .fa {
    width: 34px; height: 34px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 9px; background: var(--sy-green-50); color: var(--sy-green);
}
.sy-auth__steps strong { display: block; color: var(--sy-ink); }
.sy-auth__steps small { color: var(--sy-muted); }

.sy-auth-card {
    background: #fff;
    border: 1px solid var(--sy-line);
    border-radius: 18px;
    box-shadow: var(--sy-shadow-lg);
    padding: 32px;
}
.sy-auth-card__head { margin-bottom: 22px; }
.sy-auth-card__head h2 { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.sy-auth-card__head p { margin: 0; color: var(--sy-muted); font-size: 14px; }
.sy-auth-card .form-control { min-height: 46px; font-size: 15px; }
.sy-field { position: relative; margin-bottom: 16px; }
.sy-field__icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: #9aa59f; pointer-events: none;
}
.sy-field .form-control { padding-left: 40px; }
.sy-field__toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    border: 0; background: transparent; color: var(--sy-muted);
    width: 36px; height: 36px; border-radius: 8px;
}
.sy-field__toggle:hover { background: var(--sy-line-2); color: var(--sy-ink); }
.sy-auth-card .btn { min-height: 46px; font-size: 15px; width: 100%; }
.sy-auth-card__links { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: -4px 0 18px; font-size: 13.5px; }
.sy-auth-card__links a { color: var(--sy-green-600); font-weight: 600; text-decoration: none; }
.sy-auth-card__links a:hover { text-decoration: underline; }
.sy-auth-card__foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--sy-line-2); text-align: center; font-size: 13px; color: var(--sy-muted); }
.sy-auth-card__foot a { color: var(--sy-ink-2); font-weight: 600; }

/* 10. Mobile et impression ================================================ */
/* Page soulevée : marges latérales visibles dès la tablette */
@media (min-width: 768px) {
    .sy-shell, .sy-public-shell { width: calc(100% - 48px); }
}
@media (max-width: 767.98px) {
    .sy-shell, .sy-public-shell { box-shadow: none; }
}
@media (max-width: 1199.98px) {
    .sy-nav { position: relative; }
    .sy-nav__inner { padding: 8px 12px; }
    .sy-nav .navbar-collapse { padding: 6px 0 10px; }
    .sy-nav .nav-link { min-height: 46px; border-radius: var(--sy-radius-sm); border-top: 0; border-bottom: 0; }
    .sy-nav .nav-link.active { border-left: 3px solid var(--sy-orange); }
    .sy-nav__right { margin-left: 0; align-items: stretch; border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 8px; margin-top: 6px; }
    .sy-nav__switch { justify-content: center; margin: 4px 0; }
    .sy-mega, .sy-mega--wide.show, .sy-mega--3.show {
        min-width: 0 !important;
        grid-template-columns: 1fr !important;
        border-radius: var(--sy-radius);
        border-top-width: 1px;
        box-shadow: none;
        margin: 2px 0 8px !important;
    }
    .sy-account { box-shadow: none; }
}
@media (max-width: 991.98px) {
    .sy-auth { grid-template-columns: 1fr; gap: 24px; }
    .sy-auth__intro { order: 2; }
}
@media (max-width: 767.98px) {
    :root { --sy-gutter: 14px; }
    .sy-main { padding-top: 14px; }
    .sy-context { padding: 10px var(--sy-gutter); }
    .sy-year__select.form-select { min-width: 0; flex: 1; }
    .sy-year, .sy-year__form { width: 100%; }
    .sy-app .card-header, .sy-app .card-body { padding: 14px; }
    .sy-app .card-header > hr { margin: 10px -14px !important; }
    .sy-app .table > :not(caption) > * > * { padding: 11px 12px; }
    .sy-auth-card { padding: 22px; }
    .sy-public-main { padding-top: 20px; }
    .sy-topbar .sy-topbar__sep, .sy-topbar .sy-topbar__mail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sy-app *, .sy-public * { transition: none !important; }
}
@media print {
    .sy-nav, .sy-context, .sy-banner, .sy-shell > footer { display: none !important; }
    .sy-shell { box-shadow: none; max-width: none; }
    body.sy-app { background: #fff !important; }
}

/* Ajustements complémentaires ============================================= */
.sy-app hr { background-color: var(--sy-line); color: var(--sy-line); height: 1px; border: 0; opacity: 1; }
.sy-app td b.text-muted, .sy-app td strong.text-muted { color: var(--sy-ink) !important; font-weight: 600; }

/* Ajustement automatique du menu (voir sygmute-ui.js) ===================== */
/* 1er niveau : menu compact quand les entrées ne tiennent pas sur une ligne. */
.sy-nav--compact .nav-link { padding: 0 10px !important; font-size: 12.5px; letter-spacing: .03em; gap: 6px; }
.sy-nav--compact .sy-nav__menu > .nav-item > .nav-link > .fa { display: none; }
.sy-nav--compact .sy-nav__space { padding-right: 6px; }
.sy-nav--compact .sy-nav__space-text { display: none; }
.sy-nav--compact .sy-nav__account-name { display: none; }

/* 2e niveau : menu replié derrière le bouton ☰, même sur grand écran. */
.sy-nav--collapsed { position: relative; }
.sy-nav--collapsed .sy-nav__inner { padding: 8px 12px; }
.sy-nav--collapsed .navbar-collapse { padding: 6px 0 10px; }
.sy-nav--collapsed .sy-nav__menu,
.sy-nav--collapsed .sy-nav__right { flex-direction: column; width: 100%; }
.sy-nav--collapsed .nav-link { min-height: 46px; border-radius: var(--sy-radius-sm); border-top: 0; border-bottom: 0; }
.sy-nav--collapsed .nav-link.active { border-left: 3px solid var(--sy-orange); }
.sy-nav--collapsed .sy-nav__right { margin-left: 0; align-items: stretch; border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 8px; margin-top: 6px; }
.sy-nav--collapsed .sy-nav__switch { justify-content: center; margin: 4px 0; }
.sy-nav--collapsed .dropdown-menu { position: static; float: none; }
.sy-nav--collapsed .sy-mega,
.sy-nav--collapsed .sy-mega--wide.show,
.sy-nav--collapsed .sy-mega--3.show {
    min-width: 0 !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    border-radius: var(--sy-radius);
    border-top-width: 1px;
    box-shadow: none;
    margin: 2px 0 8px !important;
    transform: none !important;
}
.sy-nav--collapsed .sy-account { box-shadow: none; }

/* Le menu ne doit jamais sortir de l'écran : à défaut, il défile au lieu d'être coupé. */
.sy-nav .navbar-collapse { min-width: 0; }