/* ==========================================================================
   S-GAHO — Thème Elite Hadj
   Feuille commune chargée une seule fois par layout.blade.php, après portal.css.
     1. Charte (variables, clair + sombre)  6. Cartes, indicateurs
     2. Base                                7. Tableaux, badges
     3. Utilitaires, menus                  8. Onglets, pagination, états
     4. Cadre : barre haute, sidebar, pied  9. Modales, formulaires, fiche
     5. Page, boutons                      10. Connexion
                                           11. Impression, mouvement réduit
   Toute couleur, taille ou ombre passe par une variable de :root.
   Les valeurs de la section 1 reprennent tokens.json du design system S-GAHO.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CHARTE
   Couleurs échantillonnées sur le logo Elite Hadj : vert du dôme, or du
   croissant et de l'avion. Jamais la même valeur en clair et en sombre.
   -------------------------------------------------------------------------- */
:root {
    color-scheme: light;

    /* Surfaces et encre */
    --sg-surface-100: #FFFFFF;        /* fond de page */
    --sg-surface-200: #F6F8F6;        /* cartes, panneaux */
    --sg-surface-300: #ECF0ED;        /* puits : en-têtes de tableau, champs */
    --sg-border: #DCE3DD;
    --sg-ink: #0C1A12;
    --sg-ink-muted: #5B6B61;
    --sg-ink-faint: #8C9A91;          /* désactivé, décoratif */

    /* Identité */
    --sg-brand-green: #06402A;        /* actions principales, liens, navigation active */
    --sg-brand-green-rgb: 6, 64, 42;
    --sg-brand-green-strong: #022B19; /* survol, pression */
    --sg-brand-green-soft: #E6EFE8;   /* ligne sélectionnée, survol léger */
    --sg-brand-gold: #9A7322;         /* accent : totaux, reçus — à doser */
    --sg-brand-gold-soft: #FBF3E1;

    /* Statuts — toujours pastille + libellé, jamais la couleur seule
       success : payé, dossier complet, visa validé
       warning : acompte en attente, document manquant
       danger  : solde en retard, annulé, action destructive
       info    : information neutre, en préparation */
    --sg-success: #1F7A4A;
    --sg-success-soft: #E7F5EC;
    --sg-warning: #9A6B13;
    --sg-warning-soft: #FBF1DD;
    --sg-danger: #A6291F;
    --sg-danger-soft: #FBE9E7;
    --sg-info: #2B5C8A;
    --sg-info-soft: #E8F0F8;
    --sg-overlay: rgba(6, 20, 13, .5);

    /* Texte posé sur un aplat de couleur (bouton plein) */
    --sg-on-fill: #FFFFFF;

    --sg-focus-ring: 0 0 0 3px rgba(var(--sg-brand-green-rgb), .22);

    /* Sidebar et scène de connexion : vert du dôme, or du croissant.
       Valeurs dérivées des jetons brand-green / brand-gold (variantes sur fond sombre). */
    --sg-sb-width: 252px;
    --sg-sb-width-mini: 78px;
    --sg-sb-bg: #06402A;
    --sg-sb-bg-deep: #022B19;
    --sg-sb-glow: rgba(46, 154, 100, .38);
    --sg-sb-border: rgba(255, 255, 255, .10);
    --sg-sb-text: rgba(237, 243, 238, .86);
    --sg-sb-text-strong: #FFFFFF;
    --sg-sb-muted: #9FB3A6;           /* libellés de section */
    --sg-sb-icon: rgba(237, 243, 238, .74);
    --sg-sb-tile: rgba(255, 255, 255, .07);
    --sg-sb-hover-bg: rgba(255, 255, 255, .07);
    --sg-sb-guide: rgba(255, 255, 255, .18);
    --sg-sb-accent: #D4A339;          /* or du logo, sur vert sombre */
    --sg-sb-accent-soft: rgba(212, 163, 57, .17);
    --sg-sb-accent-line: rgba(212, 163, 57, .32);
    --sg-sb-on-accent: #022B19;
    --sg-sb-brand-bg: #FFFFFF;        /* médaillon : le logo n'existe que sur fond blanc */
    /* Trame : étoile à huit branches (deux carrés croisés), trait or très léger */
    --sg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96' fill='none' stroke='%23D4A339' stroke-opacity='.2' stroke-width='1'%3E%3Crect x='26' y='26' width='44' height='44'/%3E%3Crect x='26' y='26' width='44' height='44' transform='rotate(45 48 48)'/%3E%3Cpath d='M48 0v17M48 79v17M0 48h17M79 48h17'/%3E%3Ccircle cx='0' cy='0' r='7'/%3E%3Ccircle cx='96' cy='0' r='7'/%3E%3Ccircle cx='0' cy='96' r='7'/%3E%3Ccircle cx='96' cy='96' r='7'/%3E%3C/svg%3E");

    /* Typographie : trois familles, trois rôles */
    --sg-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;          /* titres, connexion, documents */
    --sg-font-sans: "Inter", -apple-system, "Segoe UI", sans-serif;             /* interface */
    --sg-font-mono: "SG Chiffres", "JetBrains Mono", ui-monospace, "SF Mono", monospace;       /* montants, numéros : chiffres en IBM Plex (zéro sans point, pas de « θ »), lettres en JetBrains Mono */

    --sg-fs-label: .6875rem;   /* 11 — label-uppercase */
    --sg-fs-caption: .75rem;   /* 12 */
    --sg-fs-body: .875rem;     /* 14 */
    --sg-fs-body-lg: 1rem;     /* 16 */
    --sg-fs-heading: 1.125rem; /* 18 */
    --sg-fs-figure-lg: 1.375rem; /* 22 */
    --sg-fs-display-md: 1.5rem;  /* 24 */
    --sg-fs-display-lg: 2rem;    /* 32 */
    --sg-fs-display-xl: 2.75rem; /* 44 */
    --sg-tracking-caps: .06em;

    /* Espacements (base 4 px) */
    --sg-space-1: 4px;
    --sg-space-2: 8px;
    --sg-space-3: 12px;
    --sg-space-4: 16px;
    --sg-space-5: 24px;
    --sg-space-6: 32px;
    --sg-space-7: 48px;
    --sg-space-8: 64px;

    /* Rayons */
    --sg-radius-sm: 6px;
    --sg-radius-md: 10px;
    --sg-radius-lg: 16px;
    --sg-radius-full: 999px;

    /* Ombres, teintées vert très sombre. Chaque niveau superpose une ombre de
       contact (nette, courte) et une ombre d'ambiance (large, diffuse). */
    --sg-shadow-xs: 0 1px 2px rgba(6, 20, 13, .05);
    --sg-shadow-sm: 0 1px 2px rgba(6, 20, 13, .06), 0 2px 6px rgba(6, 20, 13, .04);
    --sg-shadow-md: 0 2px 4px rgba(6, 20, 13, .05), 0 10px 24px rgba(6, 20, 13, .09);
    --sg-shadow-lg: 0 4px 8px rgba(6, 20, 13, .05), 0 20px 48px rgba(6, 20, 13, .15);
    --sg-shadow-xl: 0 8px 16px rgba(6, 20, 13, .07), 0 32px 80px rgba(6, 20, 13, .24);
    --sg-shadow-brand: 0 6px 16px rgba(var(--sg-brand-green-rgb), .24); /* boutons primaires au survol */

    /* Fonds du cadre : page légèrement teintée, cartes blanches — c'est ce contraste
       qui laisse lire les ombres. En sombre, les cartes sont plus claires que la page. */
    --sg-page-bg: var(--sg-surface-200);
    --sg-card-bg: var(--sg-surface-100);
    --sg-well-bg: var(--sg-surface-200);  /* en-têtes de tableau, pieds de modale */

    /* Mise en page */
    --sg-page-gutter: 32px;
    --sg-fs-title: 1.75rem;      /* 28 — titre de page */
    --sg-fs-figure-xl: 1.5rem;   /* 24 — chiffres clés du tableau de bord */

    /* Contrôles */
    --sg-control-h-sm: 32px;
    --sg-control-h: 40px;
    --sg-topbar-h: 68px;

    /* Mouvement */
    --sg-ease: cubic-bezier(.2, 0, 0, 1);
    --sg-ease-out: cubic-bezier(.16, 1, .3, 1);  /* entrées : départ vif, arrivée douce */
    --sg-t-fast: 150ms var(--sg-ease);
    --sg-t: 220ms var(--sg-ease);
    --sg-t-slow: 420ms var(--sg-ease-out);

    /* Profondeur */
    --sg-z-topbar: 1039;
    --sg-z-overlay: 1037;
    --sg-z-sidebar: 1038;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --sg-surface-100: #0B1510;
    --sg-surface-200: #11201A;
    --sg-surface-300: #17271F;
    --sg-border: #223A2E;
    --sg-ink: #EDF3EE;
    --sg-ink-muted: #9FB3A6;
    --sg-ink-faint: #718479;

    --sg-brand-green: #2E9A64;
    --sg-brand-green-rgb: 46, 154, 100;
    --sg-brand-green-strong: #1C7A4F;
    --sg-brand-green-soft: #15271F;
    --sg-brand-gold: #D4A339;
    --sg-brand-gold-soft: #2B2313;

    --sg-success: #3FBE82;
    --sg-success-soft: #15291E;
    --sg-warning: #E0B254;
    --sg-warning-soft: #2B2210;
    --sg-danger: #E2655A;
    --sg-danger-soft: #2B1816;
    --sg-info: #6CA8DE;
    --sg-info-soft: #15212B;
    --sg-overlay: rgba(0, 0, 0, .65);

    --sg-on-fill: #0B1510;

    --sg-sb-bg: #11201A;
    --sg-sb-bg-deep: #0B1510;
    --sg-sb-glow: rgba(46, 154, 100, .2);
    --sg-sb-border: #223A2E;

    --sg-shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --sg-shadow-sm: 0 1px 2px rgba(0, 0, 0, .32), 0 2px 6px rgba(0, 0, 0, .2);
    --sg-shadow-md: 0 2px 4px rgba(0, 0, 0, .3), 0 10px 24px rgba(0, 0, 0, .36);
    --sg-shadow-lg: 0 4px 8px rgba(0, 0, 0, .3), 0 20px 48px rgba(0, 0, 0, .5);
    --sg-shadow-xl: 0 8px 16px rgba(0, 0, 0, .35), 0 32px 80px rgba(0, 0, 0, .6);

    --sg-page-bg: var(--sg-surface-100);
    --sg-card-bg: var(--sg-surface-200);
    --sg-well-bg: var(--sg-surface-300);
}

/* Bootstrap 5.2 lit ses propres variables : on les branche sur la charte.
   « html:root » l'emporte sur le :root de portal.css, que certaines vues rechargent dans le corps de page. */
html:root,
html:root[data-theme="dark"] {
    --bs-primary: var(--sg-brand-green);
    --bs-primary-rgb: var(--sg-brand-green-rgb);
    --bs-success: var(--sg-success);
    --bs-warning: var(--sg-warning);
    --bs-danger: var(--sg-danger);
    --bs-info: var(--sg-info);
    --bs-body-bg: var(--sg-surface-100);
    --bs-body-color: var(--sg-ink);
    --bs-border-color: var(--sg-border);
    --bs-border-color-translucent: var(--sg-border);
    --bs-link-color: var(--sg-brand-green);
    --bs-link-hover-color: var(--sg-brand-green-strong);
    --bs-font-sans-serif: var(--sg-font-sans);
    --bs-font-monospace: var(--sg-font-mono);
    --bs-body-font-family: var(--sg-font-sans);
    --bs-body-font-size: var(--sg-fs-body);
}

/* --------------------------------------------------------------------------
   2. BASE
   « html body » et « body.app » l'emportent sur portal.css et sur les blocs
   <style> que certaines vues déclarent encore en fin de page.
   -------------------------------------------------------------------------- */
html body {
    font-family: var(--sg-font-sans);
    font-size: var(--sg-fs-body);
    line-height: 1.5;
    color: var(--sg-ink);
    background: var(--sg-surface-100);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.app {
    padding-top: 0;
    background: var(--sg-page-bg);
}

/* Entrées : le contenu monte de quelques pixels en apparaissant */
@keyframes sg-fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes sg-pop {
    from {
        opacity: 0;
        scale: .96;
    }
}

/* « backwards » et non « both » : une fois l'entrée jouée, plus aucun transform ne reste
   sur le conteneur, sinon les modales qu'il contient passeraient sous leur voile. */
.sg-content {
    animation: sg-fade-up var(--sg-t-slow) backwards;
}

body.app a {
    color: var(--sg-brand-green);
    text-decoration: none;
}

body.app a:hover {
    color: var(--sg-brand-green-strong);
}

body.app h1, body.app h2, body.app h3,
body.app h4, body.app h5, body.app h6 {
    color: var(--sg-ink);
}

body.app hr {
    border-color: var(--sg-border);
    opacity: 1;
}

:focus-visible {
    outline: 2px solid var(--sg-brand-green);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. UTILITAIRES, MENUS
   -------------------------------------------------------------------------- */
/* Nombres (montants, téléphones, dates) : Inter à chiffres tabulaires, alignés en colonne.
   Les codes (n° de dossier, passeport) gardent la chasse fixe via .sg-ref. */
.sg-num,
.sg-amount {
    font-family: var(--sg-font-sans);
    font-feature-settings: "tnum" 1, "cv11" 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.sg-ref {
    font-family: var(--sg-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* Inter : réglages de lecture (zéro barré désactivé, chiffres tabulaires dans les tableaux) */
body.app {
    font-feature-settings: "cv11" 1, "ss01" 0;
    -webkit-font-smoothing: antialiased;
}

.sg-amount {
    white-space: nowrap;
    text-align: right;
}

.sg-amount .sg-currency {
    margin-left: .35em;
    font-family: var(--sg-font-sans);
    font-size: .8em;
    font-weight: 600;
    color: var(--sg-ink-muted);
    letter-spacing: .02em;
}

.sg-amount.is-total {
    color: var(--sg-brand-gold);
    font-weight: 500;
}

.sg-amount.is-due {
    color: var(--sg-danger);
    font-weight: 500;
}

td.sg-amount,
th.sg-amount {
    text-align: right !important;
}

.sg-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.app .text-muted { color: var(--sg-ink-muted) !important; }
body.app .text-danger { color: var(--sg-danger) !important; }
body.app .text-success { color: var(--sg-success) !important; }
body.app .text-warning { color: var(--sg-warning) !important; }
body.app .text-info { color: var(--sg-info) !important; }
body.app .text-primary { color: var(--sg-brand-green) !important; }
body.app .border-bottom { border-color: var(--sg-border) !important; }
body.app .shadow-sm { box-shadow: var(--sg-shadow-sm) !important; }

/* Menus déroulants */
body.app .dropdown-menu {
    --bs-dropdown-bg: var(--sg-surface-100);
    --bs-dropdown-color: var(--sg-ink);
    --bs-dropdown-border-color: var(--sg-border);
    --bs-dropdown-link-color: var(--sg-ink);
    --bs-dropdown-link-hover-color: var(--sg-ink);
    --bs-dropdown-link-hover-bg: var(--sg-brand-green-soft);
    --bs-dropdown-link-active-color: var(--sg-ink);
    --bs-dropdown-link-active-bg: var(--sg-brand-green-soft);
    --bs-dropdown-divider-bg: var(--sg-border);
    min-width: 12rem;
    padding: 6px;
    font-family: var(--sg-font-sans);
    font-size: var(--sg-fs-body);
    color: var(--sg-ink);
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    box-shadow: var(--sg-shadow-lg);
}

/* Popper place le menu avec « transform » : on anime « scale », qui se compose avec lui */
body.app .dropdown-menu.show {
    transform-origin: top;
    animation: sg-pop 180ms var(--sg-ease-out) both;
}

body.app .dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--sg-space-2);
    min-height: 36px;
    padding: 6px var(--sg-space-3);
    font-weight: 500;
    color: var(--sg-ink);
    border-radius: 8px;
    transition: background var(--sg-t-fast), color var(--sg-t-fast);
}

body.app .dropdown-item:hover,
body.app .dropdown-item:focus {
    color: var(--sg-ink);
    background: var(--sg-brand-green-soft);
}

body.app .dropdown-item.text-danger:hover {
    background: var(--sg-danger-soft);
}

/* Les icônes des menus d'action portent encore une couleur en ligne : on la neutralise */
body.app .dropdown-item svg {
    flex: none;
    color: var(--sg-ink-muted) !important;
}

body.app .dropdown-item.text-danger svg {
    color: var(--sg-danger) !important;
}

body.app .dropdown-toggle.no-toggle-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sg-control-h-sm);
    height: var(--sg-control-h-sm);
    border-radius: var(--sg-radius-sm);
    cursor: pointer;
    transition: background var(--sg-t-fast);
}

body.app .dropdown-toggle.no-toggle-arrow:hover {
    background: var(--sg-surface-300);
}

body.app .dropdown-toggle.no-toggle-arrow svg {
    color: var(--sg-ink-muted) !important;
}

/* --------------------------------------------------------------------------
   4. CADRE : BARRE HAUTE, SIDEBAR, PIED DE PAGE
   La barre haute est claire, pleine largeur, et porte la marque à gauche.
   La sidebar s'accroche dessous : vert du dôme, or réservé à l'état actif.
   -------------------------------------------------------------------------- */
.sg-topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--sg-z-topbar);
    display: flex;
    align-items: center;
    gap: var(--sg-space-3);
    height: var(--sg-topbar-h);
    padding: 0 var(--sg-page-gutter) 0 0;
    color: var(--sg-ink);
    background: var(--sg-card-bg);
    border-bottom: 1px solid var(--sg-border);
    box-shadow: var(--sg-shadow-sm);
}

/* Filet or sous la marque : il fait le lien avec la sidebar verte, puis s'efface */
.sg-topbar::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--sg-sb-accent) 0, var(--sg-sb-accent) var(--sg-sb-width), transparent calc(var(--sg-sb-width) + 220px));
    pointer-events: none;
}

/* Marque : occupe exactement la largeur de la sidebar, pour que tout s'aligne dessous */
.sg-topbar .sg-brand {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--sg-space-3);
    width: var(--sg-sb-width);
    height: 100%;
    padding: 0 var(--sg-space-4);
    overflow: hidden;
    /* un simple filet vertical délimite la zone de marque, dans l'axe du bord de la sidebar */
    border-right: 1px solid var(--sg-border);
    transition: width var(--sg-t);
}

.sg-brand__medallion {
    display: grid;
    flex: none;
    place-items: center;
    width: 46px;
    height: 46px;
    background: var(--sg-sb-brand-bg);
    border-radius: 13px;
    box-shadow: 0 0 0 1px var(--sg-sb-accent);
}

.sg-brand__medallion img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.sg-brand__text {
    white-space: nowrap;
}

.sg-brand__name {
    display: block;
    font-family: var(--sg-font-display);
    font-size: 1.3125rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--sg-brand-green);
    letter-spacing: .005em;
}

.sg-brand__tagline {
    display: block;
    margin-top: 4px;
    font-size: .625rem;
    font-weight: 700;
    color: var(--sg-brand-gold);
    letter-spacing: .2em;
    text-transform: uppercase;
}

/* Boutons de la barre */
body.app .sg-icon-btn {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: var(--sg-control-h);
    height: var(--sg-control-h);
    padding: 0;
    font-size: 15px;
    color: var(--sg-ink-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: background var(--sg-t-fast), color var(--sg-t-fast), border-color var(--sg-t-fast), transform var(--sg-t-fast);
}

body.app .sg-icon-btn:hover {
    color: var(--sg-brand-green);
    background: var(--sg-brand-green-soft);
}

body.app .sg-icon-btn:active {
    transform: scale(.92);
}

body.app .sg-icon-btn:focus-visible,
body.app .sg-user:focus-visible {
    outline: 2px solid var(--sg-brand-green);
    outline-offset: 2px;
}

/* Bouton du menu : il réduit ou agrandit la sidebar */
body.app .sg-topbar__toggle {
    color: var(--sg-brand-green);
    background: var(--sg-brand-green-soft);
}

body.app .sg-topbar__toggle:hover {
    color: var(--sg-on-fill);
    background: var(--sg-brand-green);
}

.sg-topbar__toggle svg {
    transition: transform var(--sg-t);
}

html.sg-mini .sg-topbar__toggle svg {
    transform: scaleX(-1);
}

.sg-topbar__search {
    position: relative;
    flex: 1 1 auto;
    max-width: 400px;
    margin: 0;
}

.sg-topbar__search svg,
.sg-topbar__search i {
    position: absolute;
    top: 50%;
    left: 14px;
    font-size: 13px;
    color: var(--sg-ink-faint);
    transform: translateY(-50%);
    pointer-events: none;
}

body.app .sg-topbar__search .form-control {
    padding-left: 40px;
    background: var(--sg-surface-300);
    border-color: transparent;
    border-radius: 12px;
}

body.app .sg-topbar__search .form-control:focus {
    background: var(--sg-surface-100);
    border-color: var(--sg-brand-green);
}

.sg-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--sg-space-1);
    margin-left: auto;
}

.sg-topbar__date {
    display: inline-flex;
    align-items: center;
    gap: var(--sg-space-2);
    height: var(--sg-control-h-sm);
    margin-right: var(--sg-space-2);
    padding: 0 var(--sg-space-3);
    font-size: var(--sg-fs-caption);
    font-weight: 600;
    color: var(--sg-ink-muted);
    white-space: nowrap;
    background: var(--sg-surface-300);
    border-radius: var(--sg-radius-full);
}

.sg-topbar__date svg {
    color: var(--sg-brand-gold);
}

.sg-topbar__sep {
    width: 1px;
    height: 24px;
    margin: 0 var(--sg-space-2);
    background: var(--sg-border);
}

/* Bascule de thème : une seule des deux icônes est visible */
.sg-theme-toggle .sg-theme-toggle__sun,
:root[data-theme="dark"] .sg-theme-toggle .sg-theme-toggle__moon {
    display: none;
}

:root[data-theme="dark"] .sg-theme-toggle .sg-theme-toggle__sun {
    display: inline-flex;
}

body.app .sg-user {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 var(--sg-space-3) 0 5px;
    color: var(--sg-ink);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    transition: background var(--sg-t-fast), border-color var(--sg-t-fast);
}

body.app .sg-user:hover,
body.app .sg-user[aria-expanded="true"] {
    background: var(--sg-surface-300);
    border-color: var(--sg-border);
}

body.app .sg-user::after {
    margin-left: 2px;
    color: var(--sg-ink-faint);
}

.sg-avatar {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--sg-on-fill);
    letter-spacing: .02em;
    text-transform: uppercase;
    background: var(--sg-brand-green);
    border-radius: 12px;
}

.sg-user__text {
    text-align: left;
}

.sg-user__name {
    display: block;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--sg-ink);
}

.sg-user__role {
    display: block;
    font-size: var(--sg-fs-label);
    font-weight: 600;
    color: var(--sg-brand-gold);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Sidebar : dégradé du vert du dôme, accrochée sous la barre haute */
.sg-sidebar {
    position: fixed;
    inset: var(--sg-topbar-h) auto 0 0;
    z-index: var(--sg-z-sidebar);
    display: flex;
    flex-direction: column;
    width: var(--sg-sb-width);
    overflow: hidden;
    color: var(--sg-sb-text);
    background: linear-gradient(175deg, var(--sg-sb-bg) 0%, var(--sg-sb-bg-deep) 78%);
    border-right: 1px solid var(--sg-sb-border);
    box-shadow: 4px 0 24px rgba(6, 20, 13, .12);
    transition: transform var(--sg-t), width var(--sg-t);
}

/* Trame en étoiles à huit branches, estompée vers le bas */
.sg-sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--sg-pattern);
    background-size: 72px 72px;
    opacity: .5;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 42%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 42%);
    pointer-events: none;
}

.sg-sidebar > * {
    position: relative;
    z-index: 1;
}

.sg-sidebar__nav {
    flex: 1 1 auto;
    padding: var(--sg-space-3) var(--sg-space-3) var(--sg-space-4);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--sg-sb-guide) transparent;
}

.sg-nav,
.sg-nav__sub {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sg-nav__section {
    display: flex;
    align-items: center;
    gap: var(--sg-space-2);
    padding: var(--sg-space-4) var(--sg-space-2) var(--sg-space-2);
    font-size: .625rem;
    font-weight: 700;
    color: var(--sg-sb-muted);
    letter-spacing: .16em;
    text-transform: uppercase;
}

.sg-nav__section::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--sg-sb-border);
}

.sg-sidebar .sg-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sg-space-3);
    min-height: 40px;
    margin-bottom: 2px;
    padding: 0 10px 0 5px;
    font-size: .84375rem;
    white-space: nowrap;
    font-weight: 500;
    color: var(--sg-sb-text);
    border: 1px solid transparent;
    border-radius: 11px;
    transition: background var(--sg-t-fast), color var(--sg-t-fast), border-color var(--sg-t-fast);
}

.sg-sidebar .sg-nav__link:hover {
    color: var(--sg-sb-text-strong);
    background: var(--sg-sb-hover-bg);
}

.sg-sidebar .sg-nav__link:focus-visible {
    outline: 2px solid var(--sg-sb-accent);
    outline-offset: 1px;
}

/* Icône dans une tuile arrondie : donne le rythme vertical du menu */
.sg-nav__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    font-size: 12px;
    color: var(--sg-sb-icon);
    background: var(--sg-sb-tile);
    border-radius: 10px;
    transition: background var(--sg-t-fast), color var(--sg-t-fast);
}

.sg-nav__label {
    flex: 1 1 auto;
    min-width: 0;
}

.sg-nav__chevron {
    flex: none;
    font-size: 9px;
    color: var(--sg-sb-muted);
    transition: transform var(--sg-t);
}

.sg-nav__link[aria-expanded="true"] .sg-nav__chevron {
    transform: rotate(180deg);
}

.sg-sidebar .sg-nav__link:hover .sg-nav__icon {
    color: var(--sg-sb-accent);
    transform: scale(1.08);
}

.sg-sidebar .sg-nav__link:active {
    transform: scale(.985);
}

/* État actif : voile doré, tuile pleine or */
.sg-sidebar .sg-nav__link.active {
    font-weight: 600;
    color: var(--sg-sb-text-strong);
    background: linear-gradient(90deg, var(--sg-sb-accent-soft), transparent 92%);
    border-color: var(--sg-sb-accent-line);
}

.sg-sidebar .sg-nav__link.active .sg-nav__icon {
    color: var(--sg-sb-on-accent);
    background: var(--sg-sb-accent);
    box-shadow: 0 4px 12px var(--sg-sb-accent-soft);
}

.sg-sidebar .sg-nav__link.active .sg-nav__chevron {
    color: var(--sg-sb-accent);
}

.sg-nav__sub {
    position: relative;
    margin: 4px 0 var(--sg-space-2) 20px;
    padding-left: var(--sg-space-4);
}

.sg-nav__sub::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    width: 1px;
    background: var(--sg-sb-guide);
}

.sg-sidebar .sg-nav__sublink {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 0 var(--sg-space-3);
    font-size: .8rem;
    white-space: nowrap;
    color: var(--sg-sb-text);
    border-radius: var(--sg-radius-sm);
    transition: background var(--sg-t-fast), color var(--sg-t-fast);
}

/* Puce posée sur le fil conducteur */
.sg-sidebar .sg-nav__sublink::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--sg-space-4) * -1 - 2px);
    width: 5px;
    height: 5px;
    background: var(--sg-sb-guide);
    border-radius: var(--sg-radius-full);
    transform: translateY(-50%);
    transition: background var(--sg-t-fast), box-shadow var(--sg-t-fast);
}

.sg-sidebar .sg-nav__sublink:hover {
    color: var(--sg-sb-text-strong);
    background: var(--sg-sb-hover-bg);
}

.sg-sidebar .sg-nav__sublink.active {
    font-weight: 600;
    color: var(--sg-sb-accent);
}

.sg-sidebar .sg-nav__sublink.active::before {
    background: var(--sg-sb-accent);
    box-shadow: 0 0 0 3px var(--sg-sb-accent-soft);
}

/* Pied de sidebar : carte de l'utilisateur connecté */
.sg-sidebar__user {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--sg-space-3);
    margin: 0 var(--sg-space-3) var(--sg-space-3);
    padding: 10px var(--sg-space-3);
    background: var(--sg-sb-tile);
    border: 1px solid var(--sg-sb-border);
    border-radius: 14px;
}

.sg-sidebar__user-text {
    min-width: 0;
}

.sg-sidebar__user-name {
    display: block;
    overflow: hidden;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--sg-sb-text-strong);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-sidebar__user-role {
    display: block;
    font-size: var(--sg-fs-caption);
    color: var(--sg-sb-accent);
    text-transform: capitalize;
}

.sg-sidebar .sg-sidebar__logout {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-left: auto;
    font-size: 13px;
    color: var(--sg-sb-icon);
    border-radius: 10px;
    transition: background var(--sg-t-fast), color var(--sg-t-fast);
}

.sg-sidebar .sg-sidebar__logout:hover {
    color: var(--sg-sb-text-strong);
    background: var(--sg-sb-hover-bg);
}

.sg-sidebar .sg-avatar {
    color: var(--sg-sb-on-accent);
    background: var(--sg-sb-accent);
}

.sg-overlay {
    position: fixed;
    inset: var(--sg-topbar-h) 0 0 0;
    z-index: var(--sg-z-overlay);
    display: none;
    background: var(--sg-overlay);
}

/* Colonne principale */
.sg-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-left: var(--sg-sb-width);
    padding-top: var(--sg-topbar-h);
    transition: margin-left var(--sg-t);
}

.sg-content {
    flex: 1 1 auto;
    min-width: 0;
}

/* Pied de page : une ligne discrète, filet doré qui s'estompe */
.sg-footer {
    position: relative;
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sg-space-2) var(--sg-space-4);
    margin: 0 var(--sg-page-gutter);
    padding: var(--sg-space-4) 0 var(--sg-space-5);
    font-size: var(--sg-fs-caption);
    color: var(--sg-ink-muted);
}

.sg-footer::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--sg-brand-gold), var(--sg-border) 22%, var(--sg-border));
}

.sg-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sg-space-2);
}

.sg-footer__brand strong {
    font-family: var(--sg-font-display);
    font-size: .875rem;
    font-weight: 600;
    color: var(--sg-ink);
}

.sg-footer__dot {
    width: 4px;
    height: 4px;
    background: var(--sg-brand-gold);
    border-radius: var(--sg-radius-full);
}

body.app .sg-footer a {
    font-weight: 600;
    color: var(--sg-brand-green);
}

/* Menu réduit (écran large) : seules les icônes restent, la marque se replie sur son médaillon */
@media (min-width: 1200px) {
    html.sg-mini .sg-sidebar,
    html.sg-mini .sg-topbar .sg-brand {
        width: var(--sg-sb-width-mini);
    }

    html.sg-mini .sg-main {
        margin-left: var(--sg-sb-width-mini);
    }

    html.sg-mini .sg-brand__text,
    html.sg-mini .sg-nav__label,
    html.sg-mini .sg-nav__chevron,
    html.sg-mini .sg-sidebar__user-text,
    html.sg-mini .sg-sidebar .sg-sidebar__logout,
    html.sg-mini .sg-sidebar .collapse,
    html.sg-mini .sg-sidebar .collapsing {
        display: none !important;
    }

    html.sg-mini .sg-topbar .sg-brand {
        justify-content: center;
        padding: 0;
    }

    html.sg-mini .sg-topbar::after {
        background: linear-gradient(90deg, var(--sg-sb-accent) 0, var(--sg-sb-accent) var(--sg-sb-width-mini), transparent calc(var(--sg-sb-width-mini) + 220px));
    }

    html.sg-mini .sg-sidebar__nav {
        padding-right: 0;
        padding-left: 0;
        scrollbar-width: none;
    }

    /* Le libellé de section disparaît, son filet reste comme séparateur */
    html.sg-mini .sg-nav__section {
        gap: 0;
        padding: var(--sg-space-3) var(--sg-space-4) var(--sg-space-2);
        font-size: 0;
    }

    html.sg-mini .sg-sidebar .sg-nav__link {
        justify-content: center;
        width: 46px;
        margin-right: auto;
        margin-left: auto;
        padding: 0;
    }

    html.sg-mini .sg-sidebar .sg-nav__link.active {
        background: var(--sg-sb-accent-soft);
    }

    html.sg-mini .sg-sidebar__user {
        justify-content: center;
        margin-right: 0;
        margin-left: 0;
        padding: var(--sg-space-2) 0;
        background: transparent;
        border-color: transparent;
    }
}

/* Petit écran : la sidebar devient un tiroir, la marque se réduit au médaillon */
@media (max-width: 1199.98px) {
    .sg-topbar {
        gap: var(--sg-space-2);
        padding-right: var(--sg-space-3);
    }

    .sg-topbar .sg-brand {
        width: auto;
        padding: 0 var(--sg-space-2) 0 var(--sg-space-3);
    }

    .sg-topbar::after {
        background: linear-gradient(90deg, var(--sg-sb-accent), transparent 60%);
    }

    .sg-sidebar {
        transform: translateX(-100%);
    }

    .sg-sidebar.is-open {
        transform: none;
        box-shadow: var(--sg-shadow-lg);
    }

    .sg-sidebar.is-open + .sg-overlay {
        display: block;
    }

    .sg-main {
        margin-left: 0;
    }

    .sg-topbar__date {
        display: none;
    }

    .sg-footer {
        margin: 0 var(--sg-space-4);
    }
}

@media (max-width: 767.98px) {
    .sg-brand__text,
    .sg-user__text,
    .sg-topbar__sep {
        display: none;
    }

    body.app .sg-user {
        padding-right: 5px;
    }

    .sg-footer {
        justify-content: center;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   5. PAGE, BOUTONS
   -------------------------------------------------------------------------- */
/* Les vues enveloppent leur contenu dans .app-content : c'est lui qui donne la marge de page */
body.app .app-content {
    padding: var(--sg-space-6) var(--sg-page-gutter) var(--sg-space-7) !important;
}

body.app .app-content .container-xl,
body.app .app-content .container {
    max-width: 1440px;
    padding-right: 0;
    padding-left: 0;
}

@media (max-width: 767.98px) {
    body.app .app-content {
        padding: var(--sg-space-4) var(--sg-space-4) var(--sg-space-6) !important;
    }
}

/* Titre de page : Fraunces, la seule place du serif dans l'interface courante */
body.app .app-page-title,
body.app .page-title,
.sg-page-title {
    margin: 0;
    font-family: var(--sg-font-display);
    font-size: var(--sg-fs-title);
    font-weight: 600;
    line-height: 2.25rem;
    color: var(--sg-ink);
    letter-spacing: -.015em;
}

body.app .page-header,
.sg-page-header {
    margin-bottom: var(--sg-space-6);
}

.sg-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sg-space-3) var(--sg-space-4);
}

.sg-page-header__sub {
    margin: var(--sg-space-1) 0 0;
    color: var(--sg-ink-muted);
}

.sg-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sg-space-2);
}

body.app .breadcrumb {
    --bs-breadcrumb-divider-color: var(--sg-ink-faint);
    --bs-breadcrumb-item-active-color: var(--sg-ink-muted);
    margin: var(--sg-space-1) 0 0;
    padding: 0;
    font-size: var(--sg-fs-caption);
    font-weight: 500;
    background: transparent;
}

body.app .breadcrumb-item,
body.app .breadcrumb-item.active {
    color: var(--sg-ink-muted);
}

body.app .breadcrumb-item a {
    color: var(--sg-brand-green);
}

/* Boutons : primaire (vert), doré (rare), fantôme, destructeur — hauteur fixe */
body.app .btn,
.sg-btn {
    --bs-btn-font-family: var(--sg-font-sans);
    --bs-btn-focus-box-shadow: var(--sg-focus-ring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sg-space-2);
    height: var(--sg-control-h);
    padding: 0 18px;
    font-family: var(--sg-font-sans);
    font-size: var(--sg-fs-body);
    font-weight: 600;
    line-height: 1;
    letter-spacing: .005em;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--sg-radius-md);
    box-shadow: var(--sg-shadow-xs);
    cursor: pointer;
    transition: background var(--sg-t-fast), border-color var(--sg-t-fast), color var(--sg-t-fast),
        box-shadow var(--sg-t), transform var(--sg-t-fast);
}

/* Le bouton se soulève d'un pixel au survol et s'enfonce au clic */
body.app .btn:hover,
.sg-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--sg-shadow-sm);
}

body.app .btn:active,
.sg-btn:active {
    transform: translateY(0) scale(.98);
    box-shadow: none;
}

body.app .btn-primary:hover,
body.app .app-btn-primary:hover,
.sg-btn--primary:hover {
    box-shadow: var(--sg-shadow-brand);
}

body.app .btn-link,
body.app .btn-link:hover {
    transform: none;
    box-shadow: none;
}

body.app .btn:focus-visible,
.sg-btn:focus-visible {
    outline: 0;
    box-shadow: var(--sg-focus-ring);
}

body.app .btn-sm {
    height: var(--sg-control-h-sm);
    padding: 0 var(--sg-space-3);
    font-size: .8125rem;
    border-radius: var(--sg-radius-sm);
}

body.app .btn:disabled,
body.app .btn.disabled {
    opacity: .55;
    cursor: not-allowed;
}

body.app .btn-primary,
body.app .app-btn-primary,
.sg-btn--primary {
    color: var(--sg-on-fill);
    background: var(--sg-brand-green);
    border-color: var(--sg-brand-green);
}

body.app .btn-primary:hover,
body.app .btn-primary:focus,
body.app .btn-primary:active,
body.app .app-btn-primary:hover,
body.app .app-btn-primary:focus,
body.app .app-btn-primary:active,
.sg-btn--primary:hover {
    color: var(--sg-on-fill);
    background: var(--sg-brand-green-strong);
    border-color: var(--sg-brand-green-strong);
}

body.app .btn-success {
    color: var(--sg-on-fill);
    background: var(--sg-success);
    border-color: var(--sg-success);
}

body.app .btn-info {
    color: var(--sg-on-fill);
    background: var(--sg-info);
    border-color: var(--sg-info);
}

body.app .btn-warning,
.sg-btn--gold {
    color: var(--sg-on-fill);
    background: var(--sg-brand-gold);
    border-color: var(--sg-brand-gold);
}

body.app .btn-danger,
.sg-btn--danger {
    color: var(--sg-on-fill);
    background: var(--sg-danger);
    border-color: var(--sg-danger);
}

body.app .btn-success:hover,
body.app .btn-info:hover,
body.app .btn-warning:hover,
body.app .btn-danger:hover,
.sg-btn--gold:hover,
.sg-btn--danger:hover {
    color: var(--sg-on-fill);
    filter: brightness(.9);
}

body.app .btn-secondary,
body.app .btn-light,
body.app .btn-default,
body.app .app-btn-secondary,
body.app .btn-outline-primary,
body.app .btn-outline-secondary,
.sg-btn--ghost {
    color: var(--sg-ink);
    background: transparent;
    border-color: var(--sg-border);
}

body.app .btn-secondary:hover,
body.app .btn-light:hover,
body.app .btn-default:hover,
body.app .app-btn-secondary:hover,
body.app .btn-outline-primary:hover,
body.app .btn-outline-secondary:hover,
.sg-btn--ghost:hover {
    color: var(--sg-ink);
    background: var(--sg-surface-300);
    border-color: var(--sg-ink-faint);
}

body.app .btn-outline-danger {
    color: var(--sg-danger);
    background: transparent;
    border-color: var(--sg-border);
}

body.app .btn-outline-danger:hover {
    color: var(--sg-danger);
    background: var(--sg-danger-soft);
    border-color: var(--sg-danger);
}

body.app .btn-link {
    height: auto;
    padding: 0;
    color: var(--sg-brand-green);
}

body.app .btn-close {
    opacity: .6;
}

:root[data-theme="dark"] body.app .btn-close {
    filter: invert(1) grayscale(1);
}

/* Petits boutons d'action hérités (pastilles vertes / rouges) */
body.app .bg-success-light {
    color: var(--sg-success) !important;
    background: var(--sg-success-soft) !important;
    border-color: transparent;
}

body.app .bg-danger-light {
    color: var(--sg-danger) !important;
    background: var(--sg-danger-soft) !important;
    border-color: transparent;
}

/* --------------------------------------------------------------------------
   6. CARTES, INDICATEURS
   -------------------------------------------------------------------------- */
body.app .card,
body.app .app-card,
.sg-card {
    --bs-card-bg: var(--sg-card-bg);
    --bs-card-border-color: var(--sg-border);
    --bs-card-cap-bg: transparent;
    --bs-card-border-radius: var(--sg-radius-lg);
    --bs-card-inner-border-radius: calc(var(--sg-radius-lg) - 1px);
    color: var(--sg-ink);
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-lg);
    box-shadow: var(--sg-shadow-sm);
}

.sg-card {
    padding: var(--sg-space-5);
}

/* Beaucoup de vues imbriquent .app-card dans .card : une seule surface visible */
body.app .card .app-card,
body.app .card .card,
body.app .app-card .app-card,
body.app .tab-pane > .app-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
}

body.app .card-body {
    padding: var(--sg-space-5);
}

body.app .card-header,
body.app .app-card-header {
    padding: var(--sg-space-4) var(--sg-space-5);
    background: transparent;
    border-bottom: 1px solid var(--sg-border);
}

body.app .card-footer,
body.app .app-card-footer {
    padding: var(--sg-space-4) var(--sg-space-5);
    background: transparent;
    border-top: 1px solid var(--sg-border);
}

body.app .card-title,
body.app .app-card-title,
body.app .form-title {
    margin: 0;
    font-family: var(--sg-font-sans);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    color: var(--sg-ink);
    letter-spacing: -.005em;
}

/* Indicateurs du tableau de bord : étiquette → chiffre, icône discrète.
   Ils arrivent en cascade et se soulèvent au survol. */
body.app .card.bg-one,
body.app .card.bg-two,
body.app .card.bg-three,
body.app .card.bg-four {
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-lg);
    animation: sg-fade-up var(--sg-t-slow) backwards;
    transition: transform var(--sg-t), box-shadow var(--sg-t), border-color var(--sg-t);
}

body.app .card.bg-two { animation-delay: 60ms; }
body.app .card.bg-three { animation-delay: 120ms; }
body.app .card.bg-four { animation-delay: 180ms; }

body.app .card.bg-one:hover,
body.app .card.bg-two:hover,
body.app .card.bg-three:hover,
body.app .card.bg-four:hover {
    border-color: var(--sg-ink-faint);
    box-shadow: var(--sg-shadow-md);
    transform: translateY(-3px);
}

body.app .db-widgets {
    flex-direction: row-reverse;
    gap: var(--sg-space-4);
}

body.app .db-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    font-size: 19px;
    color: var(--sg-brand-green);
    background: var(--sg-brand-green-soft) !important;
    border-radius: 14px;
    transition: transform var(--sg-t);
}

body.app .card:hover .db-icon {
    transform: scale(1.06) rotate(-4deg);
}

body.app .bg-four .db-icon {
    color: var(--sg-brand-gold);
    background: var(--sg-brand-gold-soft) !important;
}

body.app .db-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column-reverse;
    min-width: 0;
    text-align: left;
}

body.app .db-info h6 {
    margin: 0 0 var(--sg-space-1);
    font-size: var(--sg-fs-label);
    font-weight: 700;
    color: var(--sg-ink-muted);
    letter-spacing: var(--sg-tracking-caps);
    text-transform: uppercase;
}

body.app .db-info h3,
body.app .db-info h4,
body.app .db-info h5,
body.app .stats-figure,
.sg-figure {
    margin: 0;
    font-family: var(--sg-font-mono);
    font-size: var(--sg-fs-figure-xl);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 2rem;
    color: var(--sg-ink);
    letter-spacing: -.02em;
    white-space: nowrap;
}

body.app .db-info .sg-amount {
    text-align: left;
}

body.app .bg-four .db-info h5 {
    color: var(--sg-brand-gold);
}

body.app .stats-type {
    font-size: var(--sg-fs-label);
    font-weight: 700;
    color: var(--sg-ink-muted);
    letter-spacing: var(--sg-tracking-caps);
    text-transform: uppercase;
}

/* Barre de progression */
body.app .progress {
    --bs-progress-bg: var(--sg-surface-300);
    --bs-progress-bar-bg: var(--sg-brand-green);
    --bs-progress-bar-color: var(--sg-on-fill);
    height: 8px;
    background: var(--sg-surface-300);
    border-radius: var(--sg-radius-full);
}

body.app .progress-bar {
    font-size: 0;
    background: var(--sg-brand-green);
    border-radius: var(--sg-radius-full);
}

/* --------------------------------------------------------------------------
   7. TABLEAUX, BADGES
   -------------------------------------------------------------------------- */
body.app .table-responsive {
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    background: var(--sg-card-bg);
}

body.app .table {
    --bs-table-color: var(--sg-ink);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--sg-border);
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: var(--sg-ink);
    --bs-table-hover-bg: var(--sg-brand-green-soft);
    --bs-table-hover-color: var(--sg-ink);
    margin-bottom: 0;
    font-size: var(--sg-fs-body);
    color: var(--sg-ink);
    background: transparent;
    border-color: var(--sg-border);
}

body.app .table > thead > tr > th {
    padding: 13px var(--sg-space-4);
    font-size: var(--sg-fs-label);
    font-weight: 700;
    line-height: .875rem;
    color: var(--sg-ink-muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    background: var(--sg-well-bg);
    border: 0;
    border-bottom: 1px solid var(--sg-border);
    box-shadow: none;
}

body.app .table > tbody > tr > td,
body.app .table > tbody > tr > th {
    height: 56px;
    padding: 10px var(--sg-space-4);
    font-size: var(--sg-fs-body);
    color: var(--sg-ink);
    vertical-align: middle;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--sg-border);
    box-shadow: none;
}

body.app .table > tbody > tr:last-child > td {
    border-bottom: 0;
}

body.app .table > tbody > tr,
body.app .table > tbody > tr:nth-of-type(odd) {
    background: transparent;
    transition: background var(--sg-t-fast);
}

body.app .table > tbody > tr:hover,
body.app .table > tbody > tr:nth-of-type(odd):hover {
    background: var(--sg-brand-green-soft);
}

body.app .table > .table-group-divider {
    border-top: 0;
}

body.app .table.table-bordered > :not(caption) > * > * {
    border-right: 1px solid var(--sg-border);
}

/* Photos de profil dans les listes */
body.app .table .profile-image {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: var(--sg-radius-full);
    box-shadow: 0 0 0 2px var(--sg-card-bg), 0 0 0 3px var(--sg-border);
}

/* Badge de statut : pastille 6 px + libellé, fond doux, jamais d'aplat plein */
.sg-badge,
body.app .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    font-family: var(--sg-font-sans);
    font-size: var(--sg-fs-caption);
    font-weight: 500;
    line-height: 1rem;
    color: var(--sg-info);
    white-space: nowrap;
    background: var(--sg-info-soft) !important;
    border-radius: var(--sg-radius-full);
}

.sg-badge__dot,
body.app .badge::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: var(--sg-radius-full);
}

.sg-badge--success,
body.app .badge.bg-success,
body.app .badge.badge-success {
    color: var(--sg-success) !important;
    background: var(--sg-success-soft) !important;
}

.sg-badge--warning,
body.app .badge.bg-warning,
body.app .badge.badge-warning {
    color: var(--sg-warning) !important;
    background: var(--sg-warning-soft) !important;
}

.sg-badge--danger,
body.app .badge.bg-danger,
body.app .badge.badge-danger {
    color: var(--sg-danger) !important;
    background: var(--sg-danger-soft) !important;
}

.sg-badge--info,
body.app .badge.bg-info,
body.app .badge.bg-primary,
body.app .badge.bg-secondary,
body.app .badge.badge-info {
    color: var(--sg-info) !important;
    background: var(--sg-info-soft) !important;
}

.sg-badge--gold {
    color: var(--sg-brand-gold);
    background: var(--sg-brand-gold-soft) !important;
}

/* --------------------------------------------------------------------------
   8. ONGLETS, PAGINATION, ÉTATS
   -------------------------------------------------------------------------- */
body.app .app-nav-tabs {
    gap: var(--sg-space-4);
    padding: 0;
    background: transparent;
    border-bottom: 1px solid var(--sg-border);
    border-radius: 0;
    box-shadow: none !important;
}

body.app .app-nav-tabs .nav-link {
    flex: none !important;
    padding: var(--sg-space-2) 0 var(--sg-space-3);
    font-size: var(--sg-fs-body);
    font-weight: 600;
    color: var(--sg-ink-muted);
    text-align: left !important;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

body.app .app-nav-tabs .nav-link:hover {
    color: var(--sg-ink);
}

body.app .app-nav-tabs .nav-link.active,
body.app .app-nav-tabs .nav-link:only-child {
    color: var(--sg-brand-green);
    background: transparent;
    border-bottom-color: var(--sg-brand-green);
}

body.app .app-pagination {
    margin-top: var(--sg-space-5) !important;
}

body.app .pagination {
    --bs-pagination-bg: transparent;
    --bs-pagination-color: var(--sg-ink);
    --bs-pagination-border-color: var(--sg-border);
    --bs-pagination-hover-bg: var(--sg-surface-300);
    --bs-pagination-hover-color: var(--sg-ink);
    --bs-pagination-hover-border-color: var(--sg-border);
    --bs-pagination-active-bg: var(--sg-brand-green);
    --bs-pagination-active-border-color: var(--sg-brand-green);
    --bs-pagination-active-color: var(--sg-on-fill);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-color: var(--sg-ink-faint);
    --bs-pagination-disabled-border-color: var(--sg-border);
    gap: var(--sg-space-1);
    margin: 0;
    font-size: var(--sg-fs-body);
}

body.app .pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--sg-control-h-sm);
    height: var(--sg-control-h-sm);
    padding: 0 var(--sg-space-2);
    font-family: var(--sg-font-mono);
    font-size: .8125rem;
    color: var(--sg-ink);
    background: transparent;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-sm) !important;
}

body.app .pagination .page-link:hover {
    background: var(--sg-surface-300);
}

body.app .pagination .page-item.active .page-link {
    color: var(--sg-on-fill);
    background: var(--sg-brand-green);
    border-color: var(--sg-brand-green);
}

body.app .pagination .page-item.disabled .page-link {
    color: var(--sg-ink-faint);
}

body.app .app-pagination p.text-muted,
body.app nav .small.text-muted {
    margin: 0;
    font-size: var(--sg-fs-caption);
}

/* Bandeaux : fond doux + filet de la couleur du statut */
body.app .alert {
    padding: var(--sg-space-3) var(--sg-space-4);
    font-size: var(--sg-fs-body);
    color: var(--sg-info);
    background: var(--sg-info-soft);
    border: 0;
    border-left: 3px solid currentColor;
    border-radius: var(--sg-radius-sm);
}

body.app .alert ul {
    margin: 0;
    padding-left: var(--sg-space-4);
}

body.app .alert-success {
    color: var(--sg-success);
    background: var(--sg-success-soft);
}

body.app .alert-warning {
    color: var(--sg-warning);
    background: var(--sg-warning-soft);
}

body.app .alert-danger {
    color: var(--sg-danger);
    background: var(--sg-danger-soft);
}

.sg-empty {
    padding: var(--sg-space-7) var(--sg-space-4);
    color: var(--sg-ink-muted);
    text-align: center;
}

/* --------------------------------------------------------------------------
   9. MODALES, FORMULAIRES, FICHE
   -------------------------------------------------------------------------- */
body.app .modal {
    --bs-modal-bg: var(--sg-surface-100);
    --bs-modal-color: var(--sg-ink);
    --bs-modal-border-color: var(--sg-border);
    --bs-modal-border-radius: var(--sg-radius-lg);
    --bs-modal-header-border-color: var(--sg-border);
    --bs-modal-footer-border-color: var(--sg-border);
    --bs-modal-box-shadow: var(--sg-shadow-xl);
    --bs-modal-width: 560px;
    font-family: var(--sg-font-sans);
}

/* Largeurs de fenêtre : 400 (confirmation), 560 (formulaire courant), 840 (fiche, tableau) */
@media (min-width: 576px) {
    body.app .modal-sm { --bs-modal-width: 400px; }
}

@media (min-width: 992px) {
    body.app .modal-lg,
    body.app .modal-xl { --bs-modal-width: 840px; }
}

@media (min-width: 1200px) {
    body.app .modal-xl { --bs-modal-width: 1080px; }
}

/* Ouverture : la fenêtre monte légèrement en grossissant, au lieu de tomber du haut */
body.app .modal.fade .modal-dialog {
    transform: translateY(16px) scale(.97);
    transition: transform 280ms var(--sg-ease-out);
}

body.app .modal.show .modal-dialog {
    transform: none;
}

body.app .modal-content {
    color: var(--sg-ink);
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-lg);
    box-shadow: var(--sg-shadow-xl);
}

body.app .modal-header,
body.app .modal-footer {
    padding: 18px var(--sg-space-5);
    border-color: var(--sg-border);
}

body.app .modal-footer {
    gap: var(--sg-space-2);
    background: var(--sg-well-bg);
    border-radius: 0 0 var(--sg-radius-lg) var(--sg-radius-lg);
}

body.app .modal-footer > * {
    margin: 0;
}

body.app .modal-body {
    padding: var(--sg-space-5);
}

body.app .modal-title {
    font-family: var(--sg-font-sans);
    font-size: var(--sg-fs-heading);
    font-weight: 700;
    color: var(--sg-ink);
}

.modal-backdrop {
    --bs-backdrop-bg: var(--sg-sb-bg-deep);
    --bs-backdrop-opacity: .5;
}

body.app .form-label,
body.app label {
    margin-bottom: 6px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sg-ink);
}

body.app .form-control,
body.app .form-select {
    min-height: var(--sg-control-h);
    padding: 8px var(--sg-space-3);
    font-family: var(--sg-font-sans);
    font-size: var(--sg-fs-body);
    font-weight: 500;
    line-height: 1.4;
    color: var(--sg-ink);
    background-color: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 8px;
    box-shadow: var(--sg-shadow-xs);
    transition: border-color var(--sg-t-fast), box-shadow var(--sg-t);
}

body.app .form-select {
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238C9A91' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

body.app .form-control-sm {
    min-height: var(--sg-control-h-sm);
    padding: 4px var(--sg-space-2);
    font-size: .8125rem;
}

body.app .form-select.form-control-sm {
    padding-right: 2rem;
}

body.app textarea.form-control {
    min-height: 96px;
}

body.app .form-control::placeholder {
    font-weight: 400;
    color: var(--sg-ink-faint);
}

body.app .form-control:hover,
body.app .form-select:hover {
    border-color: var(--sg-ink-faint);
}

body.app .form-control:focus,
body.app .form-select:focus {
    color: var(--sg-ink);
    background-color: var(--sg-surface-100);
    border-color: var(--sg-brand-green);
    box-shadow: var(--sg-focus-ring);
    outline: 0;
}

body.app .form-control:disabled,
body.app .form-control[readonly],
body.app .form-select:disabled {
    color: var(--sg-ink-muted);
    background-color: var(--sg-surface-300);
}

body.app .form-control[type="file"] {
    padding: 6px var(--sg-space-2);
}

body.app .form-check-input {
    background-color: var(--sg-surface-100);
    border-color: var(--sg-ink-faint);
}

body.app .form-check-input:checked {
    background-color: var(--sg-brand-green);
    border-color: var(--sg-brand-green);
}

body.app .input-group-text {
    font-size: var(--sg-fs-body);
    color: var(--sg-ink-muted);
    background: var(--sg-surface-300);
    border-color: var(--sg-border);
}

body.app .invalid-feedback,
body.app .form-text.text-danger {
    font-size: var(--sg-fs-caption);
    color: var(--sg-danger);
}

body.app .form-control.is-invalid {
    border-color: var(--sg-danger);
}

/* Fiche : libellé discret au-dessus de la valeur */
body.app .item {
    padding: var(--sg-space-3) 0;
    border-color: var(--sg-border) !important;
}

body.app .item-label {
    margin-bottom: 2px;
    font-size: var(--sg-fs-label);
    font-weight: 700;
    color: var(--sg-ink-muted);
    letter-spacing: var(--sg-tracking-caps);
    text-transform: uppercase;
}

body.app .item-label strong {
    font-weight: inherit;
}

body.app .item-data {
    font-size: var(--sg-fs-body);
    font-weight: 500;
    color: var(--sg-ink);
}

/* Étapes de formulaire (bs-stepper) */
body.app .bs-stepper .step-trigger {
    color: var(--sg-ink-muted);
}

body.app .bs-stepper .bs-stepper-circle {
    font-family: var(--sg-font-mono);
    background: var(--sg-ink-faint);
}

body.app .bs-stepper .active .bs-stepper-circle {
    color: var(--sg-on-fill);
    background: var(--sg-brand-green);
}

body.app .bs-stepper .active .bs-stepper-label {
    color: var(--sg-ink);
}

body.app .bs-stepper .line {
    background: var(--sg-border);
}

/* --------------------------------------------------------------------------
   ALERTES : boîtes de dialogue (SweetAlert2) et notifications (assets/js/sgaho-alertes.js)
   -------------------------------------------------------------------------- */
:root {
    --sg-alerte-vert: linear-gradient(145deg, #0B6B45 0%, #06402A 100%);
    --sg-alerte-rouge: linear-gradient(145deg, #D2493D 0%, #A6291F 100%);
    --sg-alerte-or: linear-gradient(145deg, #D4A339 0%, #9A7322 100%);
    --sg-alerte-bleu: linear-gradient(145deg, #3D78AE 0%, #2B5C8A 100%);
}

/* --- Thème commun à toutes les fenêtres SweetAlert2 (y compris celles des anciennes pages) --- */
.swal2-container.swal2-backdrop-show {
    background: rgba(22, 32, 58, .45) !important;
    backdrop-filter: blur(3px);
}

.swal2-popup {
    font-family: var(--sg-font-sans) !important;
    color: var(--sg-ink) !important;
    background: var(--sg-card-bg) !important;
    border: 0 !important;
    border-radius: 20px !important;
    box-shadow: 0 0 0 1px rgba(6, 20, 13, .06), 0 30px 70px -18px rgba(6, 20, 13, .45) !important;
}

.swal2-title {
    font-family: var(--sg-font-sans) !important;
    font-size: 1.1875rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    color: var(--sg-ink) !important;
    letter-spacing: -.01em;
}

.swal2-html-container {
    font-size: .875rem !important;
    line-height: 1.6 !important;
    color: var(--sg-ink-muted) !important;
}

.swal2-icon.swal2-success { border-color: rgba(31, 122, 74, .3) !important; color: var(--sg-success) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--sg-success) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(31, 122, 74, .3) !important; }
.swal2-icon.swal2-error { border-color: var(--sg-danger) !important; color: var(--sg-danger) !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--sg-danger) !important; }
.swal2-icon.swal2-warning { border-color: var(--sg-or-clair, #D4A339) !important; color: var(--sg-or-clair, #D4A339) !important; }
.swal2-icon.swal2-info, .swal2-icon.swal2-question { border-color: var(--sg-info) !important; color: var(--sg-info) !important; }

.swal2-styled {
    height: 44px;
    padding: 0 20px !important;
    font-size: .875rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.swal2-styled.swal2-confirm {
    color: #FFFFFF !important;
    background: var(--sg-alerte-vert) !important;
}

.swal2-styled.swal2-confirm.sg-swal-danger {
    background: var(--sg-alerte-rouge) !important;
}

.swal2-styled.swal2-cancel {
    color: var(--sg-ink) !important;
    background: var(--sg-card-bg) !important;
    border: 1px solid var(--sg-border) !important;
}

.swal2-timer-progress-bar {
    background: var(--sg-or-clair, #D4A339) !important;
}

.swal2-input,
.swal2-textarea,
.swal2-select {
    font-family: var(--sg-font-sans) !important;
    color: var(--sg-ink) !important;
    background: var(--sg-card-bg) !important;
    border: 1px solid color-mix(in srgb, var(--sg-ink-faint) 40%, var(--sg-border)) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.swal2-input:focus,
.swal2-textarea:focus {
    border-color: var(--sg-brand-green) !important;
    box-shadow: 0 0 0 4px rgba(var(--sg-brand-green-rgb), .12) !important;
}

/* --- Boîtes de dialogue S-GAHO (SgAlerte.confirmer) --- */
.swal2-popup.sg-dialog {
    width: min(440px, calc(100vw - 32px)) !important;
    padding: 0 !important;
    overflow: hidden;
}

.sg-dialog--danger { --sg-dialog-plein: var(--sg-alerte-rouge); --sg-dialog-halo: rgba(166, 41, 31, .35); }
.sg-dialog--attention { --sg-dialog-plein: var(--sg-alerte-or); --sg-dialog-halo: rgba(212, 163, 57, .4); }
.sg-dialog--info { --sg-dialog-plein: var(--sg-alerte-bleu); --sg-dialog-halo: rgba(43, 92, 138, .35); }
.sg-dialog--succes { --sg-dialog-plein: var(--sg-alerte-vert); --sg-dialog-halo: rgba(6, 64, 42, .35); }

/* Pastille d'icône pleine, icône blanche (remplace les icônes animées de SweetAlert2) */
.swal2-popup.sg-dialog .swal2-icon.sg-dialog__ico {
    width: 64px;
    height: 64px;
    margin: 34px auto 0;
    color: #FFFFFF !important;
    background: var(--sg-dialog-plein);
    border: 0 !important;
    border-radius: 20px;
    box-shadow: 0 14px 30px -10px var(--sg-dialog-halo), 0 0 0 8px color-mix(in srgb, var(--sg-card-bg) 0%, transparent);
    animation: sg-dialog-ico 520ms var(--sg-ease-out) both;
}

.swal2-popup.sg-dialog .swal2-icon.sg-dialog__ico .swal2-icon-content {
    display: grid;
    place-items: center;
    font-size: 26px;
}

.swal2-popup.sg-dialog .sg-dialog__titre {
    padding: 18px 28px 0 !important;
}

.swal2-popup.sg-dialog .sg-dialog__texte {
    margin: 8px 0 0 !important;
    padding: 0 30px !important;
}

.swal2-popup.sg-dialog .sg-dialog__texte strong {
    color: var(--sg-ink);
}

.swal2-popup.sg-dialog .sg-dialog__saisie {
    width: auto !important;
    height: 44px !important;
    margin: 18px 28px 0 !important;
    padding: 0 14px !important;
    font-size: .875rem !important;
}

.swal2-popup.sg-dialog .sg-dialog__erreur {
    margin: 10px 28px 0 !important;
    font-size: .8125rem !important;
    font-weight: 600;
    color: var(--sg-danger) !important;
    background: var(--sg-danger-soft) !important;
    border-radius: 8px;
}

.swal2-popup.sg-dialog .sg-dialog__actions {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
    margin: 26px 0 0 !important;
    padding: 16px 22px 20px !important;
    background: var(--sg-well-bg);
    border-top: 1px solid var(--sg-border);
}

.sg-dialog__btn {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    margin: 0 !important;
    padding: 0 16px;
    font-family: var(--sg-font-sans);
    font-size: .875rem;
    font-weight: 700;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 180ms var(--sg-ease-out), box-shadow 200ms ease, background 150ms ease;
}

.sg-dialog__btn--confirmer {
    color: #FFFFFF;
    background: var(--sg-dialog-plein);
    box-shadow: 0 10px 22px -10px var(--sg-dialog-halo), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.sg-dialog__btn--confirmer:hover {
    box-shadow: 0 14px 26px -10px var(--sg-dialog-halo), inset 0 1px 0 rgba(255, 255, 255, .2);
    transform: translateY(-1px);
}

.sg-dialog__btn--annuler {
    color: var(--sg-ink);
    background: var(--sg-card-bg);
    box-shadow: inset 0 0 0 1px var(--sg-border);
}

.sg-dialog__btn--annuler:hover {
    background: var(--sg-surface-300);
}

.sg-dialog__btn:focus {
    outline: 0;
}

.sg-dialog__btn--annuler:focus-visible {
    box-shadow: inset 0 0 0 1px var(--sg-border), 0 0 0 3px rgba(var(--sg-brand-green-rgb), .2);
}

.sg-dialog__btn--confirmer:focus-visible {
    box-shadow: 0 0 0 3px var(--sg-dialog-halo);
}

.sg-dialog--entree { animation: sg-dialog-entree 340ms var(--sg-ease-out) both; }
.sg-dialog--sortie { animation: sg-dialog-sortie 180ms ease-in both; }

@keyframes sg-dialog-entree {
    from { opacity: 0; transform: translateY(12px) scale(.94); }
    to { opacity: 1; transform: none; }
}

@keyframes sg-dialog-sortie {
    to { opacity: 0; transform: translateY(6px) scale(.97); }
}

@keyframes sg-dialog-ico {
    0% { opacity: 0; transform: scale(.6) rotate(-12deg); }
    60% { opacity: 1; transform: scale(1.08) rotate(3deg); }
    100% { transform: none; }
}

/* --- Notifications empilées (en haut à droite, sous la barre du haut) --- */
.sg-toasts {
    position: fixed;
    top: 84px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(390px, calc(100vw - 32px));
    pointer-events: none;
}

.sg-toast {
    --sg-toast-plein: var(--sg-alerte-bleu);
    --sg-toast-couleur: var(--sg-info);
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 14px 12px 16px 14px;
    overflow: hidden;
    color: var(--sg-ink);
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 16px;
    box-shadow: 0 18px 40px -14px rgba(6, 20, 13, .35), 0 2px 6px rgba(6, 20, 13, .06);
    pointer-events: auto;
    animation: sg-toast-entree 420ms var(--sg-ease-out) both;
    transition: opacity 220ms ease, transform 260ms var(--sg-ease-out), height 280ms ease, margin 280ms ease, padding 280ms ease;
}

.sg-toast--succes { --sg-toast-plein: var(--sg-alerte-vert); --sg-toast-couleur: var(--sg-success); }
.sg-toast--erreur { --sg-toast-plein: var(--sg-alerte-rouge); --sg-toast-couleur: var(--sg-danger); }
.sg-toast--attention { --sg-toast-plein: var(--sg-alerte-or); --sg-toast-couleur: #B8891F; }

.sg-toast::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    content: "";
    background: var(--sg-toast-plein);
}

.sg-toast.is-sortie {
    opacity: 0;
    transform: translateX(40px) scale(.96);
}

.sg-toast__ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 38px;
    height: 38px;
    font-size: 16px;
    color: #FFFFFF;
    background: var(--sg-toast-plein);
    border-radius: 11px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

.sg-toast__corps {
    min-width: 0;
    padding-top: 1px;
}

.sg-toast__titre {
    display: block;
    font-size: .875rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--sg-ink);
}

.sg-toast__message {
    margin: 3px 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--sg-ink-muted);
    overflow-wrap: anywhere;
}

body.app .sg-toast__action {
    display: inline-flex;
    margin-top: 8px;
    padding: 0;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--sg-toast-couleur);
    text-decoration: none;
    background: none;
    border: 0;
}

body.app .sg-toast__action:hover {
    text-decoration: underline;
}

body.app .sg-toast__fermer {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: -2px -2px 0 0;
    padding: 0;
    font-size: 13px;
    color: var(--sg-ink-faint);
    background: transparent;
    border: 0;
    border-radius: 8px;
    transition: background 150ms ease, color 150ms ease;
}

body.app .sg-toast__fermer:hover {
    color: var(--sg-ink);
    background: var(--sg-well-bg);
}

.sg-toast__temps {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: color-mix(in srgb, var(--sg-toast-couleur) 12%, transparent);
}

.sg-toast__temps > span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--sg-toast-plein);
    transform-origin: left center;
    animation: sg-toast-temps linear forwards;
}

.sg-toast:hover .sg-toast__temps > span {
    animation-play-state: paused;
}

@keyframes sg-toast-entree {
    from { opacity: 0; transform: translateX(48px) scale(.96); }
    to { opacity: 1; transform: none; }
}

@keyframes sg-toast-temps {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (max-width: 575.98px) {
    .sg-toasts {
        top: auto;
        right: 16px;
        bottom: 16px;
        flex-direction: column-reverse;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sg-toast,
    .sg-dialog--entree,
    .swal2-popup.sg-dialog .swal2-icon.sg-dialog__ico {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   9b. LISTES : BARRE D'OUTILS, FILTRES, TABLEAU, PAGINATION
   Une liste tient dans une seule carte : barre d'outils, tableau, pagination.
   -------------------------------------------------------------------------- */
body.app .sg-list {
    overflow: hidden;
}

.sg-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sg-space-2) var(--sg-space-3);
    padding: var(--sg-space-3) var(--sg-space-5);
    border-bottom: 1px solid var(--sg-border);
}

.sg-toolbar--filters {
    background: var(--sg-well-bg);
}

.sg-toolbar__spacer {
    flex: 1 1 auto;
}

/* Libellé + liste qui doivent rester ensemble quand la barre passe à la ligne */
.sg-toolbar__group {
    display: inline-flex;
    align-items: center;
    gap: var(--sg-space-2);
}

.sg-toolbar__label {
    font-size: var(--sg-fs-label);
    font-weight: 700;
    color: var(--sg-ink-faint);
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Onglets segmentés : un seul choix actif, compteur en mono */
.sg-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--sg-surface-300);
    border-radius: var(--sg-radius-md);
}

body.app .sg-seg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 var(--sg-space-3);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sg-ink-muted);
    white-space: nowrap;
    border-radius: 8px;
    transition: background var(--sg-t-fast), color var(--sg-t-fast), box-shadow var(--sg-t-fast);
}

body.app .sg-seg:hover {
    color: var(--sg-brand-green);
}

body.app .sg-seg[aria-current="true"] {
    color: var(--sg-on-fill);
    background: var(--sg-brand-green);
    box-shadow: var(--sg-shadow-brand);
}

.sg-seg__count {
    min-width: 20px;
    padding: 1px 6px;
    font-family: var(--sg-font-mono);
    font-size: var(--sg-fs-label);
    font-variant-numeric: tabular-nums;
    color: var(--sg-ink-muted);
    text-align: center;
    background: var(--sg-card-bg);
    border-radius: var(--sg-radius-full);
}

.sg-seg[aria-current="true"] .sg-seg__count {
    color: inherit;
    background: rgba(255, 255, 255, .2);
}

/* Recherche */
.sg-search {
    position: relative;
    flex: 0 1 320px;
    min-width: 200px;
}

.sg-search > svg,
.sg-search > i {
    position: absolute;
    top: 50%;
    left: 12px;
    font-size: 13px;
    color: var(--sg-ink-faint);
    transform: translateY(-50%);
    pointer-events: none;
}

body.app .sg-search .form-control {
    min-height: 36px;
    height: 36px;
    padding: 0 var(--sg-space-3) 0 36px;
}

/* Listes de filtres compactes ; « is-set » signale un filtre actif */
body.app select.sg-select {
    width: auto;
    min-height: 36px;
    height: 36px;
    padding: 0 30px 0 var(--sg-space-3);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sg-ink-muted);
    background-position: right 9px center;
    background-size: 12px 12px;
    cursor: pointer;
}

body.app select.sg-select.is-set {
    color: var(--sg-brand-green);
    background-color: var(--sg-brand-green-soft);
    border-color: var(--sg-brand-green);
}

body.app .sg-toolbar .btn {
    height: 36px;
    padding: 0 14px;
    font-size: .8125rem;
}

body.app .sg-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sg-danger);
}

/* Tableau de liste */
.sg-table-wrap {
    position: relative;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--sg-border) transparent;
}

table.sg-table {
    width: 100%;
    margin: 0;
    font-size: var(--sg-fs-body);
    border-spacing: 0;
    border-collapse: separate;
}

table.sg-table thead th {
    height: 44px;
    padding: 0 var(--sg-space-4);
    font-size: var(--sg-fs-label);
    font-weight: 700;
    color: var(--sg-brand-green);
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    background: var(--sg-brand-green-soft);
    border-bottom: 1px solid var(--sg-border);
}

table.sg-table thead th:first-child,
table.sg-table tbody td:first-child {
    padding-left: var(--sg-space-5);
}

table.sg-table thead th:last-child,
table.sg-table tbody td:last-child {
    padding-right: var(--sg-space-5);
}

table.sg-table tbody td {
    height: 64px;
    padding: var(--sg-space-2) var(--sg-space-4);
    color: var(--sg-ink);
    vertical-align: middle;
    border-bottom: 1px solid var(--sg-border);
}

table.sg-table tbody tr:last-child td {
    border-bottom: 0;
}

table.sg-table tbody tr {
    transition: background var(--sg-t-fast);
}

table.sg-table tbody tr:hover {
    background: var(--sg-well-bg);
}

table.sg-table tbody tr.is-clickable {
    cursor: pointer;
}

table.sg-table tbody tr.is-clickable:focus-visible {
    background: var(--sg-brand-green-soft);
    box-shadow: inset 3px 0 0 var(--sg-brand-green);
    outline: 0;
}

table.sg-table .sg-col-actions {
    width: 1%;
    text-align: right;
    white-space: nowrap;
    cursor: default;
}

/* Cellule « personne » : photo ou monogramme + nom + numéro de dossier */
.sg-entity {
    display: flex;
    align-items: center;
    gap: var(--sg-space-3);
    min-width: 220px;
}

.sg-monogram {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--sg-brand-green);
    letter-spacing: .02em;
    text-transform: uppercase;
    background: var(--sg-brand-green-soft);
    border-radius: 12px;
}

.sg-monogram.is-gold {
    color: var(--sg-brand-gold);
    background: var(--sg-brand-gold-soft);
}

.sg-monogram img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sg-monogram--lg {
    width: 88px;
    height: 88px;
    font-size: 1.75rem;
    border-radius: 24px;
}

.sg-entity__text,
.sg-cell-stack {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.sg-entity__name {
    max-width: 280px;
    overflow: hidden;
    font-weight: 700;
    color: var(--sg-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-entity__sub,
.sg-cell-sub {
    font-family: var(--sg-font-mono);
    font-size: var(--sg-fs-caption);
    color: var(--sg-ink-muted);
}

.sg-cell-sub.is-sans {
    font-family: var(--sg-font-sans);
}

.sg-cell-empty {
    font-family: var(--sg-font-sans);
    font-weight: 500;
    color: var(--sg-ink-faint);
}

.sg-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

body.app .sg-row-btn {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 13px;
    color: var(--sg-ink-muted);
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--sg-t-fast), color var(--sg-t-fast), transform var(--sg-t-fast);
}

body.app .sg-row-btn:hover {
    color: var(--sg-brand-green);
    background: var(--sg-brand-green-soft);
}

body.app .sg-row-btn.is-danger:hover {
    color: var(--sg-danger);
    background: var(--sg-danger-soft);
}

body.app .sg-row-btn:active {
    transform: scale(.92);
}

/* État vide */
.sg-empty__icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--sg-space-3);
    font-size: 22px;
    color: var(--sg-brand-green);
    background: var(--sg-brand-green-soft);
    border-radius: 18px;
}

.sg-empty__title {
    margin: 0 0 var(--sg-space-1);
    font-size: 1rem;
    font-weight: 700;
    color: var(--sg-ink);
}

/* Pagination en pied de carte */
.sg-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sg-space-3);
    padding: var(--sg-space-3) var(--sg-space-5);
    font-size: .8125rem;
    color: var(--sg-ink-muted);
    border-top: 1px solid var(--sg-border);
}

.sg-pagination strong {
    font-family: var(--sg-font-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--sg-ink);
}

.sg-pagination__side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sg-space-4);
}

.sg-pagination__size {
    display: inline-flex;
    align-items: center;
    gap: var(--sg-space-2);
}

.sg-pages {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.app .sg-page {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 var(--sg-space-2);
    font-family: var(--sg-font-mono);
    font-size: .8125rem;
    color: var(--sg-ink);
    border: 1px solid var(--sg-border);
    border-radius: 9px;
    transition: background var(--sg-t-fast), border-color var(--sg-t-fast), color var(--sg-t-fast);
}

body.app a.sg-page:hover {
    color: var(--sg-brand-green);
    background: var(--sg-brand-green-soft);
    border-color: var(--sg-brand-green);
}

body.app .sg-page[aria-current="page"] {
    color: var(--sg-on-fill);
    background: var(--sg-brand-green);
    border-color: var(--sg-brand-green);
}

body.app .sg-page.is-disabled {
    color: var(--sg-ink-faint);
    background: var(--sg-well-bg);
}

body.app .sg-page.is-gap {
    border-color: transparent;
}

/* ===== Tableau de liste, version aérée : une information par colonne ===== */

/* Bouton carré (icône seule) dans une barre d'outils */
body.app .sg-toolbar .btn.sg-btn-carre {
    width: 36px;
    padding: 0;
}

/* Numéro de ligne */
table.sg-table .sg-col-num {
    width: 56px;
    padding-right: 0;
    font-family: var(--sg-font-mono);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--sg-ink-faint);
    text-align: center;
}

table.sg-table thead th.sg-col-num,
table.sg-table thead th.sg-col-actions {
    text-align: center;
}

/* Étiquette : numéro de dossier, compteur « +1 » */
.sg-tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    font-family: var(--sg-font-mono);
    font-size: .75rem;
    font-weight: 500;
    color: var(--sg-ink);
    white-space: nowrap;
    background: var(--sg-surface-300);
    border: 1px solid var(--sg-border);
    border-radius: 7px;
}

.sg-tag--soft {
    height: 20px;
    margin-left: 6px;
    padding: 0 6px;
    font-size: .6875rem;
    color: var(--sg-brand-green);
    background: var(--sg-brand-green-soft);
    border-color: transparent;
}

/* Boutons d'action : tuiles teintées, chaque action a sa couleur ; au survol, la tuile se remplit */
.sg-row-actions {
    gap: 6px;
}

body.app .sg-row-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 13px;
    color: var(--sg-ink-muted);
    background: var(--sg-surface-300);
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--sg-t-fast), color var(--sg-t-fast), border-color var(--sg-t-fast),
        box-shadow var(--sg-t), transform var(--sg-t-fast);
}

body.app .sg-row-btn.is-info {
    color: var(--sg-info);
    background: var(--sg-info-soft);
    border-color: color-mix(in srgb, var(--sg-info) 18%, transparent);
}

body.app .sg-row-btn.is-primaire {
    color: var(--sg-brand-green);
    background: var(--sg-brand-green-soft);
    border-color: color-mix(in srgb, var(--sg-brand-green) 18%, transparent);
}

body.app .sg-row-btn.is-danger {
    color: var(--sg-danger);
    background: var(--sg-danger-soft);
    border-color: color-mix(in srgb, var(--sg-danger) 18%, transparent);
}

body.app .sg-row-btn:hover {
    color: var(--sg-on-fill);
    background: var(--sg-ink-muted);
    transform: translateY(-2px);
    box-shadow: var(--sg-shadow-md);
}

body.app .sg-row-btn.is-info:hover {
    background: var(--sg-info);
    border-color: var(--sg-info);
}

body.app .sg-row-btn.is-primaire:hover {
    background: var(--sg-brand-green);
    border-color: var(--sg-brand-green);
}

body.app .sg-row-btn.is-danger:hover {
    background: var(--sg-danger);
    border-color: var(--sg-danger);
}

body.app .sg-row-btn:active {
    transform: translateY(0) scale(.94);
    box-shadow: none;
}

/* Infobulle au survol et au clavier */
body.app .sg-row-btn[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    right: 50%;
    bottom: calc(100% + 8px);
    z-index: 5;
    padding: 5px 9px;
    font-family: var(--sg-font-sans);
    font-size: .6875rem;
    font-weight: 600;
    color: var(--sg-surface-100);
    white-space: nowrap;
    background: var(--sg-ink);
    border-radius: 6px;
    box-shadow: var(--sg-shadow-md);
    opacity: 0;
    transform: translate(50%, 4px);
    transition: opacity var(--sg-t-fast), transform var(--sg-t-fast);
    pointer-events: none;
}

body.app .sg-row-btn[data-tip]:hover::after,
body.app .sg-row-btn[data-tip]:focus-visible::after {
    opacity: 1;
    transform: translate(50%, 0);
}

/* Infobulles des actions de ligne : alignées à droite du bouton (elles s'ouvrent vers la gauche),
   pour ne jamais déborder du tableau, même invisibles (sinon une barre de défilement apparaît) */
body.app .sg-row-actions > .sg-row-btn[data-tip]::after {
    right: 0;
    transform: translate(0, 4px);
}

body.app .sg-row-actions > .sg-row-btn[data-tip]:hover::after,
body.app .sg-row-actions > .sg-row-btn[data-tip]:focus-visible::after {
    transform: translate(0, 0);
}

/* Bouton texte compact (ex. « Restaurer » dans les archives) */
body.app .sg-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sg-brand-green);
    background: var(--sg-brand-green-soft);
    border: 1px solid color-mix(in srgb, var(--sg-brand-green) 20%, transparent);
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--sg-t-fast), color var(--sg-t-fast);
}

body.app .sg-action-pill:hover {
    color: var(--sg-on-fill);
    background: var(--sg-brand-green);
}

/* Lignes : séparation plus nette, survol plus lisible, cellules sur une seule ligne */
table.sg-table thead th,
table.sg-table tbody td {
    padding-right: 12px;
    padding-left: 12px;
}

table.sg-table tbody td {
    height: 60px;
    white-space: nowrap;
}

table.sg-table .sg-entity {
    min-width: 0;
}

table.sg-table .sg-entity__name {
    max-width: 220px;
}

/* Colonne secondaire : masquée quand la place manque (l'information reste dans la fiche) */
@media (max-width: 1599.98px) {
    table.sg-table .sg-col-large {
        display: none;
    }
}

table.sg-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--sg-well-bg) 55%, transparent);
}

table.sg-table tbody tr:hover {
    background: var(--sg-brand-green-soft);
}

table.sg-table tbody tr.is-clickable:hover td:nth-child(2) .sg-entity__name {
    color: var(--sg-brand-green);
}

/* ===== En-tête de page en carte (x-sg.hero) ===== */
.sg-hero {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sg-space-5);
    margin-bottom: var(--sg-space-5);
    padding: var(--sg-space-5) var(--sg-space-6);
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-lg);
    box-shadow: var(--sg-shadow-sm);
    animation: sg-fade-up 360ms var(--sg-ease-out) backwards;
}

/* Liseré vert à gauche (sans overflow: hidden, pour laisser déborder le menu d'export) */
.sg-hero::before {
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    width: 5px;
    content: "";
    background: var(--sg-brand-green);
    border-radius: var(--sg-radius-lg) 0 0 var(--sg-radius-lg);
}

.sg-hero:has(.dropdown-menu.show) {
    z-index: 20;
}

.sg-registre__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: var(--sg-space-1);
    font-size: var(--sg-fs-label);
    font-weight: 700;
    color: var(--sg-ink-faint);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.sg-registre__label svg {
    color: var(--sg-brand-gold);
}

.sg-hero__tuile {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 60px;
    height: 60px;
    font-size: 24px;
    color: #FFFFFF;
    background: linear-gradient(145deg, #D7A94A 0%, var(--sg-brand-gold) 100%);
    border-radius: 16px;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--sg-brand-gold) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.sg-hero__texte {
    flex: 1 1 320px;
    min-width: 0;
}

.sg-hero__fil {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 4px;
    padding: 0;
    font-size: .8125rem;
    list-style: none;
}

.sg-hero__fil li {
    display: inline-flex;
    align-items: center;
    color: var(--sg-ink-muted);
}

.sg-hero__fil li + li::before {
    margin: 0 8px;
    font-size: .75rem;
    color: var(--sg-ink-faint);
    content: "›";
}

body.app .sg-hero__fil a {
    color: var(--sg-ink-muted);
    text-decoration: none;
}

body.app .sg-hero__fil a:hover {
    color: var(--sg-brand-green);
}

.sg-hero__fil [aria-current] {
    font-weight: 600;
    color: var(--sg-ink);
}

.sg-hero__titre {
    margin: 0;
    font-family: var(--sg-font-sans);
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--sg-ink);
    letter-spacing: -.02em;
}

.sg-hero__sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px var(--sg-space-3);
    margin: 6px 0 0;
    font-size: .875rem;
    color: var(--sg-ink-muted);
}

.sg-hero__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    font-family: var(--sg-font-mono);
    font-size: .75rem;
    color: var(--sg-ink);
    background: var(--sg-well-bg);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-full);
}

.sg-hero__date svg {
    color: var(--sg-brand-gold);
}

.sg-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sg-space-2);
}

body.app .sg-hero__actions .btn {
    height: 44px;
    padding: 0 var(--sg-space-5);
    font-size: .875rem;
    font-weight: 700;
    border-radius: 10px;
}

/* Menu d'export */
body.app .sg-btn-export.dropdown-toggle::after {
    margin-left: 8px;
    vertical-align: middle;
}

body.app .sg-menu-export {
    min-width: 240px;
    padding: 6px;
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    box-shadow: var(--sg-shadow-lg);
}

.sg-menu-export__titre {
    padding: 6px 10px 8px;
    font-size: var(--sg-fs-label);
    font-weight: 700;
    color: var(--sg-ink-faint);
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.app .sg-menu-export .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sg-ink);
    border-radius: 8px;
}

body.app .sg-menu-export .dropdown-item svg {
    width: 16px;
    color: var(--sg-brand-gold);
}

body.app .sg-menu-export .dropdown-item:hover {
    color: var(--sg-brand-green);
    background: var(--sg-brand-green-soft);
}

/* ===== Registre : carte de liste titrée ===== */
body.app .sg-registre {
    overflow: visible; /* le panneau « Filtres » doit pouvoir déborder de la carte */
    border-radius: var(--sg-radius-lg);
    box-shadow: var(--sg-shadow-sm);
}

.sg-registre__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sg-space-3);
    padding: 18px var(--sg-space-5);
    border-bottom: 1px solid var(--sg-border);
}

.sg-registre__titre {
    margin: 0;
    font-family: var(--sg-font-sans);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--sg-ink);
}

.sg-registre__total {
    font-size: .875rem;
    color: var(--sg-ink-muted);
}

.sg-registre__total strong {
    font-weight: 700;
    color: var(--sg-ink);
}

.sg-registre__outils {
    padding: var(--sg-space-4) var(--sg-space-5) var(--sg-space-3);
}

.sg-registre__ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sg-space-2) var(--sg-space-3);
}

.sg-registre__ligne--plus {
    margin-top: var(--sg-space-3);
}

body.app .sg-registre .sg-segmented {
    padding: 4px;
    background: var(--sg-well-bg);
    border: 1px solid var(--sg-border);
    border-radius: 12px;
}

body.app .sg-registre .sg-seg {
    height: 36px;
    padding: 0 14px;
    font-size: .875rem;
}

body.app .sg-registre .sg-search {
    flex: 0 1 380px;
}

body.app .sg-registre .sg-search .form-control,
body.app .sg-registre select.sg-select {
    min-height: 42px;
    height: 42px;
    font-size: .875rem;
    border-radius: 10px;
}

body.app .sg-registre select.sg-select {
    min-width: 150px;
    padding-left: 14px;
}

body.app .sg-registre .sg-search .form-control {
    padding-right: 40px;
}

.sg-search__kbd {
    position: absolute;
    top: 50%;
    right: 10px;
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-family: var(--sg-font-mono);
    font-size: .75rem;
    color: var(--sg-ink-muted);
    background: var(--sg-well-bg);
    border: 1px solid var(--sg-border);
    border-radius: 6px;
    box-shadow: none;
    transform: translateY(-50%);
    pointer-events: none;
}

.sg-search:focus-within .sg-search__kbd {
    opacity: 0;
}

body.app .sg-registre .sg-reset {
    margin-left: var(--sg-space-2);
}

/* Tableau du registre : en-tête teinté, lignes hautes, cellules à deux niveaux */
table.sg-table--registre thead th {
    height: 52px;
    font-size: .71875rem;
    font-weight: 800;
    color: var(--sg-brand-green);
    letter-spacing: .1em;
    background: color-mix(in srgb, var(--sg-brand-green-soft) 75%, var(--sg-card-bg));
    border-top: 1px solid var(--sg-border);
}

table.sg-table--registre tbody td {
    height: 74px;
}

table.sg-table--registre tbody tr:nth-child(even) {
    background: transparent;
}

table.sg-table--registre tbody tr:hover {
    background: color-mix(in srgb, var(--sg-brand-green-soft) 55%, transparent);
}

table.sg-table--registre .sg-col-num {
    font-size: .875rem;
    color: var(--sg-ink-muted);
}

table.sg-table--registre .sg-monogram {
    width: 44px;
    height: 44px;
    font-size: .875rem;
    border-radius: 10px;
}

table.sg-table--registre .sg-entity__name {
    font-size: .9375rem;
    font-weight: 800;
    letter-spacing: .01em;
}

table.sg-table--registre .sg-entity__sub {
    margin-top: 2px;
    font-size: .8125rem;
    letter-spacing: .04em;
}

.sg-cell-main {
    max-width: 240px;
    overflow: hidden;
    font-size: .875rem;
    font-weight: 500;
    color: var(--sg-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

table.sg-table--registre .sg-cell-sub {
    max-width: 240px;
    overflow: hidden;
    margin-top: 2px;
    font-size: .8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-cell-main.sg-num {
    letter-spacing: .06em;
}

.sg-cell-ico {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.sg-cell-ico > svg {
    flex: none;
    font-size: 14px;
    color: var(--sg-brand-gold);
}

.sg-cell-ico.is-vide {
    font-size: .875rem;
    color: var(--sg-ink-faint);
}

.sg-cell-ico.is-vide > svg {
    color: var(--sg-ink-faint);
}

/* Passeport : bouton « Consulter », états manquant / expiré */
body.app .sg-btn-consulter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--sg-ink);
    text-decoration: none;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 8px;
    box-shadow: var(--sg-shadow-xs);
    transition: border-color var(--sg-t-fast), color var(--sg-t-fast), background var(--sg-t-fast);
}

body.app .sg-btn-consulter:hover {
    color: var(--sg-brand-green);
    background: var(--sg-brand-green-soft);
    border-color: var(--sg-brand-green);
}

.sg-etat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .8125rem;
    font-weight: 700;
    white-space: nowrap;
}

.sg-etat--warning { color: var(--sg-warning); }
.sg-etat--danger { color: var(--sg-danger); }

/* Statut : pastille arrondie avec icône */
.sg-statut {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 12px;
    font-size: .8125rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--sg-radius-full);
}

.sg-statut--success {
    color: var(--sg-success);
    background: var(--sg-success-soft);
    border-color: color-mix(in srgb, var(--sg-success) 30%, transparent);
}

.sg-statut--warning {
    color: var(--sg-warning);
    background: var(--sg-warning-soft);
    border-color: color-mix(in srgb, var(--sg-warning) 35%, transparent);
}

.sg-statut--danger {
    color: var(--sg-danger);
    background: var(--sg-danger-soft);
    border-color: color-mix(in srgb, var(--sg-danger) 28%, transparent);
}

.sg-statut--info {
    color: var(--sg-info);
    background: var(--sg-info-soft);
    border-color: color-mix(in srgb, var(--sg-info) 28%, transparent);
}

.sg-statut--neutre {
    color: var(--sg-ink-muted);
    background: var(--sg-well-bg);
    border-color: var(--sg-border);
}

/* Actions de ligne : icônes simples, teintées au survol */
table.sg-table--registre .sg-row-actions {
    gap: 4px;
}

body.app table.sg-table--registre .sg-row-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
    color: var(--sg-ink-muted);
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.app table.sg-table--registre .sg-row-btn:hover {
    color: var(--sg-brand-green);
    background: var(--sg-brand-green-soft);
}

body.app table.sg-table--registre .sg-row-btn.is-danger:hover {
    color: var(--sg-danger);
    background: var(--sg-danger-soft);
}

/* Pagination : compte à gauche, pages + lignes par page à droite */
.sg-pagination {
    padding: var(--sg-space-4) var(--sg-space-5);
}

.sg-pagination__compte {
    margin: 0;
    font-size: .875rem;
}

.sg-pagination__compte strong {
    font-family: var(--sg-font-sans);
    font-weight: 700;
}

.sg-pagination__droite {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sg-space-3) var(--sg-space-5);
}

.sg-pagination__size label {
    font-size: .875rem;
    font-weight: 700;
    color: var(--sg-ink-muted);
}

body.app .sg-pagination__size select.sg-select {
    min-width: 76px;
    height: 40px;
    font-family: var(--sg-font-mono);
    border-radius: 10px;
}

body.app .sg-pages .sg-page {
    min-width: 38px;
    height: 38px;
    font-weight: 600;
    border-radius: 10px;
}

@media (max-width: 767.98px) {
    .sg-hero {
        padding: var(--sg-space-4);
    }

    .sg-hero__tuile {
        width: 48px;
        height: 48px;
        font-size: 19px;
    }

    .sg-hero__actions {
        width: 100%;
    }

    body.app .sg-registre .sg-search {
        flex: 1 1 100%;
    }
}

/* ===== Bandeau d'indicateurs (cartes cliquables) ===== */
.sg-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sg-space-4);
    margin-bottom: var(--sg-space-5);
}

body.app .sg-kpi {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--sg-space-4);
    padding: 20px;
    color: inherit;
    text-decoration: none;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-lg);
    box-shadow: var(--sg-shadow-xs);
    transition: transform var(--sg-t), box-shadow var(--sg-t), border-color var(--sg-t);
    animation: sg-fade-up 420ms var(--sg-ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 60ms + 80ms);
}

body.app a.sg-kpi:hover {
    border-color: color-mix(in srgb, var(--sg-kpi) 35%, var(--sg-border));
    box-shadow: var(--sg-shadow-md);
    transform: translateY(-2px);
}

.sg-kpi--vert { --sg-kpi: var(--sg-brand-green); --sg-kpi-soft: var(--sg-brand-green-soft); }
.sg-kpi--or { --sg-kpi: var(--sg-brand-gold); --sg-kpi-soft: var(--sg-brand-gold-soft); }
.sg-kpi--rouge { --sg-kpi: var(--sg-danger); --sg-kpi-soft: var(--sg-danger-soft); }
.sg-kpi--gris { --sg-kpi: var(--sg-ink-muted); --sg-kpi-soft: var(--sg-well-bg); }

.sg-kpi__icone {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 48px;
    height: 48px;
    font-size: 19px;
    color: var(--sg-kpi);
    background: var(--sg-kpi-soft);
    border: 1px solid color-mix(in srgb, var(--sg-kpi) 16%, transparent);
    border-radius: 14px;
}

.sg-kpi__corps {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sg-kpi__libelle {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sg-ink-muted);
}

.sg-kpi__valeur {
    margin: 2px 0;
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--sg-ink);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.sg-kpi__note {
    overflow: hidden;
    font-size: .75rem;
    color: var(--sg-ink-faint);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-kpi__fleche {
    position: absolute;
    top: 18px;
    right: 18px;
    font-size: 12px;
    color: var(--sg-ink-faint);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--sg-t), transform var(--sg-t), color var(--sg-t);
}

.sg-kpi:hover .sg-kpi__fleche {
    color: var(--sg-kpi);
    opacity: 1;
    transform: none;
}

@media (max-width: 1199.98px) {
    .sg-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .sg-kpis {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sg-registre__desc {
    margin: 2px 0 0;
    font-size: .8125rem;
    color: var(--sg-ink-faint);
}

/* ===== Bouton « Filtres » et panneau déroulant ===== */
body.app .sg-btn-filtres {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    font-size: .875rem;
    font-weight: 700;
    color: var(--sg-ink);
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 10px;
    box-shadow: var(--sg-shadow-xs);
    transition: border-color var(--sg-t-fast), background var(--sg-t-fast), color var(--sg-t-fast);
}

body.app .sg-btn-filtres:hover,
body.app .sg-btn-filtres[aria-expanded="true"] {
    color: var(--sg-brand-green);
    border-color: var(--sg-brand-green);
}

body.app .sg-btn-filtres.is-set {
    color: var(--sg-brand-green);
    background: var(--sg-brand-green-soft);
    border-color: var(--sg-brand-green);
}

.sg-btn-filtres__nb {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: .6875rem;
    color: var(--sg-on-fill);
    background: var(--sg-brand-green);
    border-radius: var(--sg-radius-full);
}

body.app .sg-panneau-filtres {
    width: 300px;
    padding: var(--sg-space-4);
    border: 1px solid var(--sg-border);
    border-radius: 14px;
    box-shadow: var(--sg-shadow-lg);
}

.sg-panneau-filtres__titre {
    margin: 0 0 var(--sg-space-3);
    font-size: var(--sg-fs-label);
    font-weight: 700;
    color: var(--sg-brand-gold);
    letter-spacing: .1em;
    text-transform: uppercase;
}

body.app .sg-panneau-filtres.show {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body.app .sg-panneau-filtres__titre {
    margin: 0;
}

body.app .sg-panneau-filtres__champ {
    display: block;
    margin: 0;
}

.sg-panneau-filtres__champ > span {
    display: block;
    margin-bottom: 5px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--sg-ink-muted);
}

body.app .sg-panneau-filtres select.sg-select {
    width: 100%;
    height: 40px;
    min-height: 40px;
    border-radius: 9px;
}

/* ===== Puces des filtres actifs ===== */
.sg-puces {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: var(--sg-space-3);
}

body.app .sg-puce {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 10px 0 12px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sg-brand-green);
    text-decoration: none;
    background: var(--sg-brand-green-soft);
    border: 1px solid color-mix(in srgb, var(--sg-brand-green) 25%, transparent);
    border-radius: var(--sg-radius-full);
    transition: background var(--sg-t-fast), color var(--sg-t-fast), border-color var(--sg-t-fast);
}

body.app .sg-puce svg {
    font-size: 11px;
    opacity: .7;
}

body.app .sg-puce:hover {
    color: var(--sg-danger);
    background: var(--sg-danger-soft);
    border-color: color-mix(in srgb, var(--sg-danger) 30%, transparent);
}

/* ===== Tableau : finitions proches des maquettes ===== */
.sg-registre__outils {
    padding-bottom: var(--sg-space-4);
}

table.sg-table--registre thead th {
    height: 54px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: .75rem;
    color: color-mix(in srgb, var(--sg-brand-green) 85%, var(--sg-ink));
    background: color-mix(in srgb, var(--sg-brand-green-soft) 85%, var(--sg-card-bg));
    border-bottom: 1px solid color-mix(in srgb, var(--sg-brand-green) 12%, var(--sg-border));
}

table.sg-table--registre tbody td {
    height: 78px;
    padding-right: 16px;
    padding-left: 16px;
    font-size: .9375rem;
    border-bottom-color: color-mix(in srgb, var(--sg-border) 70%, transparent);
}

table.sg-table--registre thead th {
    padding-right: 16px;
    padding-left: 16px;
}

table.sg-table--registre td.sg-col-actions {
    width: 1%;
    padding-right: 20px;
}

/* Localisation : seulement sur grand écran (l'information reste dans la fiche) */
@media (max-width: 1799.98px) {
    table.sg-table--registre .sg-col-large {
        display: none;
    }
}

table.sg-table--registre .sg-col-num {
    width: 72px;
    padding-left: 28px;
    text-align: left;
}

table.sg-table--registre .sg-monogram {
    width: 46px;
    height: 46px;
    font-size: .9375rem;
    font-weight: 800;
    color: var(--sg-ink);
    background: var(--sg-surface-300);
    border: 1px solid var(--sg-border);
    border-radius: 12px;
}

table.sg-table--registre .sg-entity {
    gap: 14px;
}

table.sg-table--registre .sg-entity__name {
    font-size: 1rem;
}

table.sg-table--registre .sg-entity__sub,
table.sg-table--registre .sg-cell-sub {
    font-size: .8125rem;
    color: var(--sg-ink-muted);
}

table.sg-table--registre .sg-cell-main {
    font-size: .9375rem;
}

table.sg-table--registre .sg-statut {
    height: 32px;
    padding: 0 14px;
}

body.app table.sg-table--registre .sg-row-btn {
    width: 38px;
    height: 38px;
    font-size: 17px;
}

/* ===== Tailles harmonisées (grille de 4 px, comme les maquettes) ===== */
/* En-tête */
.sg-hero {
    gap: var(--sg-space-4);
    padding: 20px var(--sg-space-5) 20px 28px;
}

.sg-hero__tuile {
    width: 52px;
    height: 52px;
    font-size: 21px;
    border-radius: 14px;
}

.sg-hero__titre {
    font-size: 1.5rem;
}

.sg-hero__sub {
    margin-top: 4px;
    font-size: .8125rem;
}

body.app .sg-hero__actions .btn {
    height: 40px;
    padding: 0 18px;
    font-size: .8125rem;
}

/* Indicateurs */
.sg-kpis {
    gap: var(--sg-space-4);
}

body.app .sg-kpi {
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
}

.sg-kpi__icone {
    width: 44px;
    height: 44px;
    font-size: 17px;
    border-radius: 12px;
}

.sg-kpi__libelle {
    font-size: .75rem;
}

.sg-kpi__valeur {
    margin: 1px 0;
    font-size: 1.5rem;
}

.sg-kpi__note {
    font-size: .71875rem;
}

/* Registre */
.sg-registre__head {
    padding: 16px var(--sg-space-5);
}

.sg-registre__titre {
    font-size: 1rem;
}

.sg-registre__outils {
    padding: 14px var(--sg-space-5);
}

body.app .sg-registre .sg-seg {
    height: 32px;
    padding: 0 12px;
    font-size: .8125rem;
}

body.app .sg-registre .sg-search .form-control,
body.app .sg-registre select.sg-select,
body.app .sg-btn-filtres {
    min-height: 38px;
    height: 38px;
    font-size: .8125rem;
}

/* Tableau */
table.sg-table--registre thead th {
    height: 46px;
    font-size: .6875rem;
}

table.sg-table--registre tbody td {
    height: 66px;
    font-size: .875rem;
}

table.sg-table--registre .sg-monogram {
    width: 40px;
    height: 40px;
    font-size: .8125rem;
    border-radius: 10px;
}

table.sg-table--registre .sg-entity {
    gap: 12px;
}

table.sg-table--registre .sg-entity__name {
    font-size: .875rem;
}

table.sg-table--registre .sg-entity__sub,
table.sg-table--registre .sg-cell-sub {
    font-size: .75rem;
}

table.sg-table--registre .sg-cell-main {
    font-size: .875rem;
}

table.sg-table--registre .sg-statut {
    height: 28px;
    padding: 0 11px;
    font-size: .75rem;
}

body.app table.sg-table--registre .sg-btn-consulter {
    height: 30px;
    font-size: .75rem;
}

table.sg-table--registre .sg-etat {
    font-size: .75rem;
}

body.app table.sg-table--registre .sg-row-btn {
    width: 34px;
    height: 34px;
    font-size: 15px;
}

/* Pagination */
.sg-pagination {
    padding: 12px var(--sg-space-5);
}

.sg-pagination__compte,
.sg-pagination__size label {
    font-size: .8125rem;
}

body.app .sg-pages .sg-page {
    min-width: 34px;
    height: 34px;
    font-size: .8125rem;
    border-radius: 9px;
}

body.app .sg-pagination__size select.sg-select {
    min-width: 70px;
    height: 34px;
    min-height: 34px;
    border-radius: 9px;
}

/* ===== Aperçu d'un client (fenêtre ouverte au clic sur une ligne) ===== */
.sg-apercu__head {
    gap: 14px;
}

body.app .sg-apercu .sg-apercu__avatar {
    width: 52px;
    height: 52px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--sg-ink);
    background: var(--sg-surface-300);
    border: 1px solid var(--sg-border);
    border-radius: 14px;
}

.sg-apercu__meta {
    margin: 3px 0 0;
    font-family: var(--sg-font-mono);
    font-size: .75rem;
    color: var(--sg-ink-muted);
    letter-spacing: .03em;
}

body.app .sg-modal.sg-apercu .modal-body {
    padding: var(--sg-space-5);
    background: var(--sg-well-bg);
}

.sg-apercu__chiffres {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.sg-apercu__chiffres > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 12px;
}

.sg-apercu__chiffres span {
    font-size: .71875rem;
    font-weight: 600;
    color: var(--sg-ink-muted);
}

.sg-apercu__chiffres strong {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--sg-ink);
    font-variant-numeric: tabular-nums;
}

.sg-apercu__chiffres strong.is-du {
    color: var(--sg-danger);
}

.sg-apercu__alerte {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 14px;
    font-size: .8125rem;
    color: var(--sg-warning);
    background: var(--sg-warning-soft);
    border: 1px solid color-mix(in srgb, var(--sg-warning) 25%, transparent);
    border-radius: 10px;
}

.sg-apercu__grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.sg-apercu__bloc {
    padding: 14px 16px;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 12px;
}

.sg-apercu__bloc h6 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--sg-ink);
}

.sg-apercu__bloc h6 > svg {
    font-size: 12px;
    color: var(--sg-brand-gold);
}

.sg-apercu__etat {
    height: 22px !important;
    margin-left: auto;
    padding: 0 9px !important;
    font-size: .6875rem !important;
}

.sg-apercu__bloc dl {
    margin: 0;
}

.sg-apercu__bloc dl > div {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 8px;
    padding: 6px 0;
    border-top: 1px dashed var(--sg-border);
}

.sg-apercu__bloc dl > div:first-child {
    border-top: 0;
}

.sg-apercu__bloc dt {
    font-size: .75rem;
    font-weight: 500;
    color: var(--sg-ink-muted);
}

.sg-apercu__bloc dd {
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sg-ink);
    overflow-wrap: anywhere;
}

.sg-apercu__bloc dd.is-vide {
    font-weight: 400;
    color: var(--sg-ink-faint);
}

.sg-apercu__voyages {
    margin-top: 12px;
}

.sg-apercu__voyage + .sg-apercu__voyage {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--sg-border);
}

.sg-apercu__voyage-haut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sg-apercu__voyage-haut strong {
    margin-right: 8px;
    font-size: .875rem;
}

.sg-apercu__voyage-haut .sg-num {
    font-size: .75rem;
    color: var(--sg-ink-muted);
}

.sg-apercu__voyage-haut .sg-statut {
    height: 24px;
    padding: 0 10px;
    font-size: .71875rem;
}

.sg-apercu__barre {
    height: 6px;
    margin: 8px 0 6px;
    overflow: hidden;
    background: var(--sg-surface-300);
    border-radius: var(--sg-radius-full);
}

.sg-apercu__barre > span {
    display: block;
    height: 100%;
    background: var(--sg-brand-green);
    border-radius: inherit;
}

.sg-apercu__voyage-bas,
.sg-apercu__vide {
    margin: 0;
    font-size: .75rem;
    color: var(--sg-ink-muted);
}

@media (max-width: 767.98px) {
    .sg-apercu__grille,
    .sg-apercu__chiffres {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media print {
    .sg-kpis,
    .sg-hero__actions,
    .sg-registre__outils,
    .sg-col-actions,
    .sg-pagination__droite {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   9c. FENÊTRES DE SAISIE, FICHE
   -------------------------------------------------------------------------- */
/* Voile : bleu nuit translucide, comme les fenêtres des modèles de référence */
body.app .modal-backdrop.show {
    --bs-backdrop-bg: #16203A;
    --bs-backdrop-opacity: .45;
}

/* Fenêtre : en-tête et pied fixes, seul le corps défile */
body.app .sg-modal .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 3.5rem);
    overflow: hidden;
    border-radius: 18px;
    box-shadow: var(--sg-shadow-lg);
}

body.app .sg-modal .modal-header {
    align-items: center;
    gap: var(--sg-space-3);
    padding: 20px var(--sg-space-5);
    background: var(--sg-card-bg);
}

/* Pastille : verte en ajout, or en modification, rouge pour une suppression */
.sg-modal__icon {
    position: relative;
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 42px;
    height: 42px;
    font-size: 17px;
    color: var(--sg-brand-green);
    background: var(--sg-brand-green-soft);
    border: 1px solid rgba(var(--sg-brand-green-rgb), .14);
    border-radius: 12px;
    transition: background var(--sg-t), color var(--sg-t);
}

.sg-modal__icon-edition,
.sg-modal--edition .sg-modal__icon-ajout {
    display: none;
}

.sg-modal--edition .sg-modal__icon-edition {
    display: inline;
}

.sg-modal--edition .sg-modal__icon {
    color: var(--sg-brand-gold);
    background: var(--sg-brand-gold-soft);
    border-color: color-mix(in srgb, var(--sg-brand-gold) 22%, transparent);
}

.sg-modal--danger .sg-modal__icon {
    color: var(--sg-danger);
    background: var(--sg-danger-soft);
    border-color: color-mix(in srgb, var(--sg-danger) 20%, transparent);
}

.sg-modal__titres {
    flex: 1 1 auto;
    min-width: 0;
}

body.app .sg-modal .modal-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
}

.sg-modal__sub {
    margin: 2px 0 0;
    overflow: hidden;
    font-size: .8125rem;
    color: var(--sg-ink-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.app .sg-modal__close {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 15px;
    color: var(--sg-ink-muted);
    background: transparent;
    border: 1px solid var(--sg-border);
    border-radius: 9px;
    transition: background var(--sg-t-fast), color var(--sg-t-fast), border-color var(--sg-t-fast);
}

body.app .sg-modal__close:hover {
    color: var(--sg-ink);
    background: var(--sg-well-bg);
    border-color: var(--sg-ink-faint);
}

body.app .sg-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(72vh, calc(100vh - 220px));
    padding: var(--sg-space-6);
    overflow-y: auto;
}

body.app .sg-modal .modal-footer {
    flex-wrap: nowrap;
    padding: 14px var(--sg-space-5);
}

body.app .sg-modal .modal-footer .btn {
    min-width: 108px;
}

/* --- Formulaire long (taille xl) : sections les unes sous les autres --- */
@media (min-width: 1200px) {
    body.app .sg-modal--xl .modal-dialog {
        --bs-modal-width: 1080px;
    }
}

body.app .sg-modal--xl .modal-body {
    max-height: min(74vh, calc(100vh - 200px));
    padding: var(--sg-space-5) var(--sg-space-6) var(--sg-space-6);
}

/* Section : titre avec icône et filet, champs en dessous */
.sg-fsec + .sg-fsec {
    margin-top: var(--sg-space-6);
}

.sg-fsec__head {
    display: flex;
    align-items: center;
    gap: var(--sg-space-3);
    margin: 0 0 18px;
    padding-bottom: var(--sg-space-3);
    border-bottom: 1px solid var(--sg-border);
}

.sg-fsec__icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    font-size: 13px;
    color: var(--sg-brand-gold);
    background: var(--sg-brand-gold-soft);
    border-radius: 9px;
}

.sg-fsec__titres {
    min-width: 0;
}

.sg-fsec__titre {
    margin: 0;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sg-ink);
}

.sg-fsec__desc {
    margin: 1px 0 0;
    font-size: .78125rem;
    color: var(--sg-ink-muted);
}

/* Grille de champs : deux colonnes (trois dans les sections), une seule sur petit écran */
.sg-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sg-space-4) var(--sg-space-5);
}

.sg-form-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px var(--sg-space-4);
}

.sg-form-grid > .is-wide {
    grid-column: 1 / -1;
}

.sg-form-grid > .is-double {
    grid-column: span 2;
}

/* Champ : libellé, contrôle avec icône intégrée, erreur, aide */
.sg-champ {
    min-width: 0;
}

body.app .sg-champ__label {
    display: block;
    margin-bottom: 6px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sg-ink);
}

.sg-champ__control {
    position: relative;
}

.sg-champ__icon {
    position: absolute;
    top: calc(var(--sg-control-h) / 2);
    left: 14px;
    z-index: 2;
    width: 14px;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--sg-ink-faint);
    pointer-events: none;
    transition: color var(--sg-t-fast);
}

body.app .sg-champ__control.has-icon > .form-control,
body.app .sg-champ__control.has-icon > .form-select {
    padding-left: 38px;
}

.sg-champ__control:focus-within .sg-champ__icon {
    color: var(--sg-brand-green);
}

body.app .sg-modal .form-control,
body.app .sg-modal .form-select {
    border-color: color-mix(in srgb, var(--sg-ink-faint) 45%, var(--sg-border));
}

body.app .sg-modal .form-control:hover,
body.app .sg-modal .form-select:hover {
    border-color: var(--sg-ink-faint);
}

body.app .sg-modal .form-control:focus,
body.app .sg-modal .form-select:focus {
    border-color: var(--sg-brand-green);
}

body.app .sg-modal textarea.form-control {
    min-height: 84px;
    resize: vertical;
}

.sg-champ__erreur {
    display: none;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    font-size: var(--sg-fs-caption);
    font-weight: 600;
    color: var(--sg-danger);
}

.sg-champ.is-invalid .sg-champ__erreur {
    display: flex;
    animation: sg-fade-up 220ms var(--sg-ease-out) backwards;
}

body.app .sg-champ.is-invalid .form-control,
body.app .sg-champ.is-invalid .form-select,
body.app .sg-champ.is-invalid .sg-drop {
    border-color: var(--sg-danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sg-danger) 14%, transparent);
}

.sg-champ.is-invalid .sg-champ__icon {
    color: var(--sg-danger);
}

.sg-champ__aide {
    margin: 5px 0 0;
    font-size: var(--sg-fs-caption);
    line-height: 1.45;
    color: var(--sg-ink-muted);
}

.sg-champ__aide:empty {
    display: none;
}

/* Dépôt de fichier : zone en pointillés, nom du fichier choisi, aperçu des images */
body.app .sg-drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sg-space-3);
    min-height: 64px;
    margin: 0;
    padding: 10px var(--sg-space-3);
    background: var(--sg-well-bg);
    border: 1.5px dashed color-mix(in srgb, var(--sg-ink-faint) 60%, var(--sg-border));
    border-radius: 12px;
    cursor: pointer;
    transition: border-color var(--sg-t-fast), background var(--sg-t-fast);
}

body.app .sg-drop:hover,
body.app .sg-drop:focus-within {
    background: var(--sg-brand-green-soft);
    border-color: var(--sg-brand-green);
}

.sg-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

.sg-drop__icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    font-size: 16px;
    color: var(--sg-brand-green);
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 10px;
    box-shadow: var(--sg-shadow-xs);
}

.sg-drop.has-file .sg-drop__icon {
    color: var(--sg-on-fill);
    background: var(--sg-brand-green);
    border-color: var(--sg-brand-green);
}

.sg-drop__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.sg-drop__titre {
    overflow: hidden;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sg-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-drop__aide {
    font-size: var(--sg-fs-caption);
    color: var(--sg-ink-muted);
}

.sg-drop__apercu {
    flex: none;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border: 1px solid var(--sg-border);
    border-radius: 8px;
}

/* Erreurs renvoyées par le serveur, en tête du formulaire */
.sg-form-alert {
    display: flex;
    gap: var(--sg-space-3);
    margin-bottom: var(--sg-space-4);
    padding: var(--sg-space-3) var(--sg-space-4);
    font-size: .8125rem;
    color: var(--sg-danger);
    background: var(--sg-danger-soft);
    border: 1px solid color-mix(in srgb, var(--sg-danger) 25%, transparent);
    border-radius: 12px;
}

.sg-form-alert > i {
    margin-top: 3px;
}

.sg-form-alert ul {
    margin: 4px 0 0;
    padding-left: 18px;
}

/* Pied : mention des champs obligatoires à gauche, actions à droite */
.sg-modal__mention {
    margin: 0 auto 0 0 !important;
    font-size: .8125rem;
    color: var(--sg-ink-muted);
}

@media (max-width: 991.98px) {
    .sg-form-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.sg-form-section {
    margin: 0 0 var(--sg-space-4);
    font-size: var(--sg-fs-label);
    font-weight: 700;
    color: var(--sg-brand-gold);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sg-required {
    color: var(--sg-danger);
}

.sg-hint {
    margin-top: 4px;
    font-size: var(--sg-fs-caption);
    color: var(--sg-ink-muted);
}

@media (max-width: 767.98px) {
    .sg-form-grid,
    .sg-form-grid--3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .sg-form-grid > .is-double {
        grid-column: auto;
    }

    .sg-fsec {
        padding: var(--sg-space-4);
    }
}

/* Choix multiples sous forme de pastilles cochables (mahrams, kits) */
.sg-checks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sg-space-2);
    max-height: 132px;
    padding: var(--sg-space-3);
    overflow-y: auto;
    background: var(--sg-well-bg);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-md);
}

.sg-check {
    position: relative;
}

.sg-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

body.app .sg-check label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    margin: 0;
    padding: 0 var(--sg-space-3);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sg-ink-muted);
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-full);
    cursor: pointer;
    transition: background var(--sg-t-fast), border-color var(--sg-t-fast), color var(--sg-t-fast);
}

body.app .sg-check label::before {
    content: "";
    width: 8px;
    height: 8px;
    border: 1.5px solid var(--sg-ink-faint);
    border-radius: var(--sg-radius-full);
    transition: background var(--sg-t-fast), border-color var(--sg-t-fast);
}

body.app .sg-check input:checked + label {
    color: var(--sg-brand-green);
    background: var(--sg-brand-green-soft);
    border-color: var(--sg-brand-green);
}

body.app .sg-check input:checked + label::before {
    background: var(--sg-brand-green);
    border-color: var(--sg-brand-green);
}

body.app .sg-check input:focus-visible + label {
    box-shadow: var(--sg-focus-ring);
}

/* Fiche : bandeau d'identité + cartes d'informations */
.sg-profile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sg-space-5);
    padding: var(--sg-space-5);
}

.sg-profile__main {
    flex: 1 1 260px;
    min-width: 0;
}

.sg-profile__name {
    margin: 0;
    font-family: var(--sg-font-display);
    font-size: var(--sg-fs-title);
    font-weight: 600;
    line-height: 2.25rem;
    color: var(--sg-ink);
    letter-spacing: -.015em;
}

.sg-profile__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sg-space-2) var(--sg-space-4);
    margin-top: var(--sg-space-2);
    font-size: .8125rem;
    color: var(--sg-ink-muted);
}

.sg-profile__meta svg {
    margin-right: 6px;
    color: var(--sg-ink-faint);
}

.sg-profile__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sg-space-2);
}

/* Liste « libellé → valeur » */
.sg-dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sg-space-4) var(--sg-space-5);
    margin: 0;
}

.sg-dl > div {
    min-width: 0;
}

.sg-dl > .is-wide {
    grid-column: 1 / -1;
}

.sg-dl dt {
    margin-bottom: 4px;
    font-size: var(--sg-fs-label);
    font-weight: 700;
    color: var(--sg-ink-faint);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sg-dl dd {
    margin: 0;
    font-size: var(--sg-fs-body);
    font-weight: 600;
    color: var(--sg-ink);
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .sg-dl {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sg-space-2);
}

.sg-chip {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 var(--sg-space-3);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sg-ink);
    background: var(--sg-well-bg);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-full);
}

/* --------------------------------------------------------------------------
   9e. FENÊTRES DE SAISIE : FINITIONS (carte vivante, champs, choix, pied)
   -------------------------------------------------------------------------- */
body.app .sg-modal .modal-content {
    border: 0;
    border-radius: 20px;
    box-shadow: 0 0 0 1px rgba(6, 20, 13, .06), 0 24px 64px -12px rgba(6, 20, 13, .35);
}

body.app .sg-modal .modal-header {
    padding: 20px 28px;
    border-bottom: 1px solid var(--sg-border);
}

.sg-modal__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
}

body.app .sg-modal .modal-title {
    font-size: 1.125rem;
}

/* Pied : mentions à gauche, actions à droite */
body.app .sg-modal .modal-footer {
    padding: 14px 28px;
    background: var(--sg-card-bg);
    border-top: 1px solid var(--sg-border);
}

body.app .sg-modal .modal-footer .btn {
    height: 42px;
    padding: 0 20px;
    font-size: .875rem;
    font-weight: 700;
    border-radius: 10px;
}

.sg-modal__mention {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 18px;
}

.sg-modal__raccourci {
    color: var(--sg-ink-faint);
}

.sg-modal__raccourci kbd {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 20px;
    padding: 0 5px;
    font-family: var(--sg-font-mono);
    font-size: .6875rem;
    color: var(--sg-ink-muted);
    background: var(--sg-well-bg);
    border: 1px solid var(--sg-border);
    border-bottom-width: 2px;
    border-radius: 5px;
    box-shadow: none;
}

/* --- Champs : hauteur 42, bordure nette, anneau de focus doux --- */
body.app .sg-modal .sg-champ__label {
    margin-bottom: 7px;
    font-size: .78125rem;
    font-weight: 600;
    color: var(--sg-ink);
    letter-spacing: .005em;
}

.sg-champ__label-aide {
    font-weight: 400;
    color: var(--sg-ink-faint);
}

body.app .sg-modal .form-control,
body.app .sg-modal .form-select {
    min-height: 42px;
    font-size: .875rem;
    background-color: var(--sg-card-bg);
    border: 1px solid color-mix(in srgb, var(--sg-ink-faint) 38%, var(--sg-border));
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(6, 20, 13, .04);
    transition: border-color 150ms ease, box-shadow 200ms ease, background-color 150ms ease;
}

body.app .sg-modal .form-control:hover,
body.app .sg-modal .form-select:hover {
    border-color: color-mix(in srgb, var(--sg-ink-faint) 75%, var(--sg-border));
}

body.app .sg-modal .form-control:focus,
body.app .sg-modal .form-select:focus {
    border-color: var(--sg-brand-green);
    box-shadow: 0 0 0 4px rgba(var(--sg-brand-green-rgb), .12);
}

body.app .sg-modal .sg-champ__control.has-icon > .form-control,
body.app .sg-modal .sg-champ__control.has-icon > .form-select {
    padding-left: 40px;
}

body.app .sg-modal .sg-champ__icon {
    top: 21px;
    left: 15px;
    font-size: 13px;
}

body.app .sg-modal select.sg-select {
    min-height: 34px;
    height: 34px;
    font-size: .8125rem;
    border-radius: 8px;
}

body.app .sg-modal .sg-drop {
    min-height: 72px;
    padding: 12px 16px;
    border-radius: 12px;
}

/* --- Bascule à deux options (genre) --- */
.sg-segment {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: 4px;
    height: 42px;
    padding: 4px;
    background: var(--sg-well-bg);
    border: 1px solid var(--sg-border);
    border-radius: 10px;
}

.sg-segment__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

body.app .sg-segment__option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sg-ink-muted);
    border-radius: 7px;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

body.app .sg-segment__option:hover {
    color: var(--sg-ink);
}

body.app .sg-segment__input:checked + .sg-segment__option {
    color: var(--sg-brand-green);
    background: var(--sg-card-bg);
    box-shadow: 0 1px 2px rgba(6, 20, 13, .08), 0 0 0 1px rgba(6, 20, 13, .04);
}

body.app .sg-segment__input:focus-visible + .sg-segment__option {
    box-shadow: var(--sg-focus-ring);
}

.sg-champ.is-invalid .sg-segment {
    border-color: var(--sg-danger);
}

/* --- Mahrams : cartes cochables avec lien de parenté --- */
.sg-choix-mahrams {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.sg-choix-mahram {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 10px;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.sg-choix-mahram:hover {
    border-color: color-mix(in srgb, var(--sg-ink-faint) 60%, var(--sg-border));
}

.sg-choix-mahram:has(.sg-choix-mahram__case:checked) {
    background: var(--sg-brand-green-soft);
    border-color: color-mix(in srgb, var(--sg-brand-green) 45%, transparent);
}

.sg-choix-mahram__case {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

body.app .sg-choix-mahram__nom {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sg-ink);
    cursor: pointer;
}

.sg-choix-mahram__ini {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    font-size: .6875rem;
    font-weight: 800;
    color: var(--sg-ink-muted);
    background: var(--sg-surface-300);
    border-radius: 9px;
    transition: background 150ms ease, color 150ms ease;
}

.sg-choix-mahram__case:checked + .sg-choix-mahram__nom .sg-choix-mahram__ini {
    color: var(--sg-on-fill);
    background: var(--sg-brand-green);
}

.sg-choix-mahram__coche {
    margin-left: auto;
    color: var(--sg-brand-green);
    opacity: 0;
    transform: scale(.6);
    transition: opacity 150ms ease, transform 200ms var(--sg-ease-out);
}

.sg-choix-mahram__case:checked + .sg-choix-mahram__nom .sg-choix-mahram__coche {
    opacity: 1;
    transform: none;
}

.sg-choix-mahram__case:focus-visible + .sg-choix-mahram__nom .sg-choix-mahram__ini {
    box-shadow: var(--sg-focus-ring);
}

body.app .sg-choix-mahram select.sg-select {
    flex: none;
    width: 118px;
}

/* --- Kits : puces cochables --- */
.sg-choix-kits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sg-choix-kit__case {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

body.app .sg-choix-kit {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 36px;
    margin: 0;
    padding: 0 16px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sg-ink-muted);
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-full);
    cursor: pointer;
    transition: all 160ms ease;
}

/* Coche masquée tant que le kit n'est pas choisi (une icône à largeur nulle déborde et capte les clics) */
body.app .sg-choix-kit svg {
    display: none;
}

body.app .sg-choix-kit:hover {
    color: var(--sg-ink);
    border-color: color-mix(in srgb, var(--sg-ink-faint) 60%, var(--sg-border));
}

body.app .sg-choix-kit__case:checked + .sg-choix-kit {
    color: var(--sg-brand-green);
    background: var(--sg-brand-green-soft);
    border-color: color-mix(in srgb, var(--sg-brand-green) 45%, transparent);
}

body.app .sg-choix-kit__case:checked + .sg-choix-kit svg {
    display: inline-block;
    width: 12px;
    margin-right: 7px;
    animation: sg-fade-up 200ms var(--sg-ease-out) backwards;
}

body.app .sg-choix-kit__case:focus-visible + .sg-choix-kit {
    box-shadow: var(--sg-focus-ring);
}

/* --- Sections numérotées --- */
.sg-fsec + .sg-fsec {
    margin-top: 32px;
}

.sg-fsec__head {
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 14px;
}

.sg-fsec__num {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    font-family: var(--sg-font-mono);
    font-size: .75rem;
    font-weight: 600;
    color: var(--sg-brand-gold);
    background: var(--sg-brand-gold-soft);
    border: 1px solid color-mix(in srgb, var(--sg-brand-gold) 25%, transparent);
    border-radius: 10px;
}

.sg-fsec__titre {
    font-size: .9375rem;
    letter-spacing: -.005em;
}

.sg-form-grid--3 {
    gap: 18px 16px;
}

/* --- Formulaire avec carte vivante : deux volets --- */
body.app .sg-modal--carte .modal-body {
    max-height: min(78vh, calc(100vh - 190px));
    padding: 0;
}

.sg-saisie {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: start;
}

.sg-saisie__form {
    min-width: 0;
    padding: 26px 32px 32px;
}

.sg-saisie__carte {
    position: sticky;
    top: 0;
    min-height: min(78vh, calc(100vh - 190px));
    padding: 28px 24px 24px;
    color: #FFFFFF;
    text-align: center;
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0) 0 0 / 18px 18px,
        radial-gradient(120% 55% at 0% 0%, rgba(212, 163, 57, .28), transparent 60%),
        radial-gradient(90% 50% at 100% 100%, rgba(46, 154, 100, .35), transparent 60%),
        linear-gradient(165deg, #06402A 0%, #0A4F34 55%, #052E1E 100%);
}

.sg-carte {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sg-carte__label {
    margin: 0 0 20px;
    font-size: .6875rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .6);
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Photo : cercle cliquable avec pastille appareil photo */
body.app .sg-avatar-up {
    position: relative;
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    margin: 0;
    background: rgba(255, 255, 255, .1);
    border: 3px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: transform 250ms var(--sg-ease-out), box-shadow 250ms ease;
}

body.app .sg-avatar-up:hover {
    box-shadow: 0 14px 36px rgba(0, 0, 0, .32), 0 0 0 6px rgba(255, 255, 255, .12);
    transform: translateY(-2px);
}

.sg-avatar-up img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.sg-avatar-up__init {
    font-family: var(--sg-font-display);
    font-size: 2.125rem;
    font-weight: 600;
    color: #FFFFFF;
}

.sg-avatar-up__init svg {
    font-size: 2.25rem;
    opacity: .6;
}

.sg-avatar-up__badge {
    position: absolute;
    right: 0;
    bottom: 2px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    font-size: 13px;
    color: #FFFFFF;
    background: linear-gradient(145deg, #D7A94A, #9A7322);
    border: 3px solid #0A4F34;
    border-radius: 50%;
}

.sg-avatar-up input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.sg-carte__aide {
    margin: 10px 0 0;
    font-size: .71875rem;
    color: rgba(255, 255, 255, .55);
}

body.app .sg-carte .sg-carte__nom {
    max-width: 100%;
    margin: 16px 0 0;
    overflow: hidden;
    font-family: var(--sg-font-display);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.25;
    color: #FFFFFF;
    text-overflow: ellipsis;
}

.sg-carte__meta {
    margin: 4px 0 0;
    font-family: var(--sg-font-mono);
    font-size: .71875rem;
    color: rgba(255, 255, 255, .7);
    letter-spacing: .03em;
}

/* Complétion : anneau doré */
.sg-carte__progres {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-top: 22px;
    padding: 14px;
    text-align: left;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 14px;
    backdrop-filter: blur(4px);
}

.sg-carte__progres svg {
    flex: none;
    width: 60px;
    height: 60px;
    transform: rotate(-90deg);
}

.sg-carte__progres circle {
    fill: none;
    stroke-width: 6;
}

.sg-carte__piste {
    stroke: rgba(255, 255, 255, .14);
}

.sg-carte__anneau {
    stroke: #E2B85A;
    stroke-linecap: round;
    transition: stroke-dashoffset 600ms var(--sg-ease-out), stroke 300ms ease;
}

.sg-carte__anneau.is-complet {
    stroke: #3FBE82;
}

.sg-carte__progres > div {
    display: flex;
    flex-direction: column;
}

.sg-carte__progres strong {
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.sg-carte__progres span {
    font-size: .78125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
}

.sg-carte__progres small {
    font-size: .6875rem;
    color: rgba(255, 255, 255, .55);
}

/* Points clés */
.sg-carte__points {
    width: 100%;
    margin: 16px 0 0;
    padding: 0;
    text-align: left;
    list-style: none;
}

.sg-carte__points li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 2px;
    font-size: .78125rem;
    border-bottom: 1px dashed rgba(255, 255, 255, .12);
}

.sg-carte__points li:last-child {
    border-bottom: 0;
}

.sg-carte__points svg {
    flex: none;
    width: 14px;
    color: #E2B85A;
}

.sg-carte__points span {
    color: rgba(255, 255, 255, .62);
}

.sg-carte__points b {
    max-width: 140px;
    margin-left: auto;
    overflow: hidden;
    font-weight: 600;
    color: #FFFFFF;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-carte__points b.is-vide {
    font-weight: 400;
    color: rgba(255, 255, 255, .35);
}

.sg-carte__note {
    display: flex;
    gap: 8px;
    margin: 18px 0 0;
    font-size: .6875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .5);
    text-align: left;
}

.sg-carte__note svg {
    flex: none;
    margin-top: 2px;
}

/* --- Entrée : la carte puis les sections apparaissent en cascade --- */
.sg-modal.show .sg-carte > * {
    animation: sg-fade-up 460ms var(--sg-ease-out) backwards;
}

.sg-modal.show .sg-carte > :nth-child(2) { animation-delay: 60ms; }
.sg-modal.show .sg-carte > :nth-child(n+3) { animation-delay: 120ms; }

.sg-modal.show .sg-fsec {
    animation: sg-fade-up 460ms var(--sg-ease-out) backwards;
}

.sg-modal.show .sg-fsec:nth-of-type(2) { animation-delay: 50ms; }
.sg-modal.show .sg-fsec:nth-of-type(3) { animation-delay: 100ms; }
.sg-modal.show .sg-fsec:nth-of-type(n+4) { animation-delay: 150ms; }

@media (max-width: 991.98px) {
    .sg-saisie {
        grid-template-columns: minmax(0, 1fr);
    }

    .sg-saisie__carte {
        position: static;
        min-height: 0;
    }

    .sg-carte__points,
    .sg-carte__note {
        display: none;
    }

    .sg-saisie__form {
        padding: 22px;
    }

    .sg-modal__raccourci {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   9f. INDICATEURS À TUILE PLEINE, ACCENTS DORÉS, VUE DÉTAILLÉE D'UN CLIENT
   -------------------------------------------------------------------------- */
:root {
    --sg-or-clair: #D4A339;
    --sg-or-fonce: #9A7322;
    --sg-or-degrade: linear-gradient(145deg, #D4A339 0%, #9A7322 100%);
    --sg-vert-degrade: linear-gradient(145deg, #0B6B45 0%, #06402A 100%);
}

/* Indicateurs : tuile en couleur pleine, icône blanche */
.sg-kpi--vert { --sg-kpi-plein: var(--sg-vert-degrade); }
.sg-kpi--or { --sg-kpi-plein: var(--sg-or-degrade); }
.sg-kpi--rouge { --sg-kpi-plein: linear-gradient(145deg, #D2493D 0%, #A6291F 100%); }
.sg-kpi--gris { --sg-kpi-plein: linear-gradient(145deg, #7C8B82 0%, #4F5E55 100%); }

.sg-kpi__icone {
    color: #FFFFFF;
    background: var(--sg-kpi-plein);
    border: 0;
    box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--sg-kpi) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22);
}

body.app a.sg-kpi:hover .sg-kpi__icone {
    transform: scale(1.04);
}

.sg-kpi__icone {
    transition: transform 250ms var(--sg-ease-out);
}

/* Accents dorés de la liste */
.sg-hero__tuile {
    background: var(--sg-or-degrade);
}

.sg-registre__titre {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sg-registre__titre::before {
    width: 4px;
    height: 18px;
    content: "";
    background: var(--sg-or-degrade);
    border-radius: 4px;
}

table.sg-table--registre .sg-col-num {
    font-weight: 600;
    color: var(--sg-or-fonce);
}

:root[data-theme="dark"] table.sg-table--registre .sg-col-num {
    color: var(--sg-or-clair);
}

table.sg-table--registre .sg-cell-ico > svg {
    color: var(--sg-or-clair);
}

/* ===== Vue détaillée ===== */
body.app .sg-detail .modal-content {
    overflow: hidden;
    background: var(--sg-card-bg);
    border: 0;
    border-radius: 22px;
    box-shadow: 0 0 0 1px rgba(6, 20, 13, .06), 0 30px 80px -16px rgba(6, 20, 13, .45);
}

@media (min-width: 1200px) {
    body.app .sg-detail .modal-dialog {
        --bs-modal-width: 1100px;
    }
}

/* Bandeau : vert profond, lueur dorée, trame de points */
.sg-detail__bandeau {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 26px 28px 58px;
    color: #FFFFFF;
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0) 0 0 / 18px 18px,
        radial-gradient(70% 140% at 100% 0%, rgba(212, 163, 57, .38), transparent 60%),
        radial-gradient(60% 120% at 0% 100%, rgba(46, 154, 100, .35), transparent 60%),
        linear-gradient(120deg, #052E1E 0%, #06402A 45%, #0A5537 100%);
}

.sg-detail__bandeau::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    content: "";
    background: var(--sg-or-degrade);
}

.sg-detail__avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 84px;
    height: 84px;
    overflow: hidden;
    font-family: var(--sg-font-display);
    font-size: 1.875rem;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--sg-or-degrade);
    border: 3px solid rgba(255, 255, 255, .9);
    border-radius: 24px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
}

.sg-detail__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sg-detail__ident {
    flex: 1 1 auto;
    min-width: 0;
}

.sg-detail__dossier {
    margin: 0;
    font-family: var(--sg-font-mono);
    font-size: .75rem;
    font-weight: 500;
    color: var(--sg-or-clair);
    letter-spacing: .12em;
    text-transform: uppercase;
}

body.app .sg-detail .sg-detail__nom {
    margin: 2px 0 10px;
    overflow: hidden;
    font-family: var(--sg-font-display);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: #FFFFFF;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-detail__puces {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sg-detail__puce {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    font-size: .75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--sg-radius-full);
}

.sg-detail__puce svg {
    font-size: 11px;
    opacity: .8;
}

.sg-detail__puce.is-ok { color: #8FE3B8; background: rgba(63, 190, 130, .16); border-color: rgba(63, 190, 130, .35); }
.sg-detail__puce.is-ko { color: #FFB3AB; background: rgba(226, 101, 90, .18); border-color: rgba(226, 101, 90, .4); }
.sg-detail__puce.is-alerte { color: #F2CF7E; background: rgba(212, 163, 57, .18); border-color: rgba(212, 163, 57, .42); }

.sg-detail__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
}

body.app .sg-detail__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: .8125rem;
    font-weight: 700;
    color: #FFFFFF;
    border: 0;
    border-radius: 11px;
    transition: transform 200ms var(--sg-ease-out), background 150ms ease, box-shadow 200ms ease;
}

body.app .sg-detail__btn--or {
    padding: 0 18px;
    background: var(--sg-or-degrade);
    box-shadow: 0 8px 18px -6px rgba(212, 163, 57, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
}

body.app .sg-detail__btn--or:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -6px rgba(212, 163, 57, .8), inset 0 1px 0 rgba(255, 255, 255, .25);
}

body.app .sg-detail__btn--verre {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
}

body.app .sg-detail__btn--verre:hover {
    background: rgba(255, 255, 255, .2);
}

/* Indicateurs chevauchant le bandeau */
.sg-detail__stats {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: -36px 28px 0;
}

.sg-detail__stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 14px;
    box-shadow: 0 10px 24px -10px rgba(6, 20, 13, .25);
}

.sg-detail__stat--vert { --sg-tuile: var(--sg-vert-degrade); }
.sg-detail__stat--or { --sg-tuile: var(--sg-or-degrade); }
.sg-detail__stat--rouge { --sg-tuile: linear-gradient(145deg, #D2493D 0%, #A6291F 100%); }
.sg-detail__stat--bleu { --sg-tuile: linear-gradient(145deg, #3D78AE 0%, #2B5C8A 100%); }

.sg-detail__tuile {
    display: grid;
    flex: none;
    place-items: center;
    width: 42px;
    height: 42px;
    font-size: 16px;
    color: #FFFFFF;
    background: var(--sg-tuile, var(--sg-vert-degrade));
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

.sg-detail__stat small {
    display: block;
    font-size: .71875rem;
    font-weight: 600;
    color: var(--sg-ink-muted);
}

.sg-detail__stat strong {
    display: block;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--sg-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sg-detail__stat--or strong { color: var(--sg-or-fonce); }
:root[data-theme="dark"] .sg-detail__stat--or strong { color: var(--sg-or-clair); }
.sg-detail__stat--rouge strong { color: var(--sg-danger); }

/* Onglets : soulignement doré */
.sg-detail__onglets {
    display: flex;
    gap: 4px;
    margin-top: 18px;
    padding: 0 28px;
    overflow-x: auto;
    border-bottom: 1px solid var(--sg-border);
}

body.app .sg-detail__onglet {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 14px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sg-ink-muted);
    background: transparent;
    border: 0;
    transition: color 150ms ease;
}

body.app .sg-detail__onglet svg {
    font-size: 12px;
}

body.app .sg-detail__onglet:hover {
    color: var(--sg-ink);
}

body.app .sg-detail__onglet.is-actif {
    color: var(--sg-ink);
}

body.app .sg-detail__onglet.is-actif svg {
    color: var(--sg-or-clair);
}

body.app .sg-detail__onglet::after {
    position: absolute;
    right: 10px;
    bottom: -1px;
    left: 10px;
    height: 3px;
    content: "";
    background: var(--sg-or-degrade);
    border-radius: 3px 3px 0 0;
    transform: scaleX(0);
    transition: transform 250ms var(--sg-ease-out);
}

body.app .sg-detail__onglet.is-actif::after {
    transform: scaleX(1);
}

.sg-detail__onglet span:empty {
    display: none;
}

.sg-detail__onglet span {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--sg-or-fonce);
    background: var(--sg-brand-gold-soft);
    border-radius: var(--sg-radius-full);
}

body.app .sg-detail .modal-body {
    max-height: min(56vh, calc(100vh - 330px));
    padding: 22px 28px 28px;
    overflow-y: auto;
    background: var(--sg-well-bg);
}

.sg-detail__volet {
    display: none;
}

.sg-detail__volet.is-actif {
    display: block;
    animation: sg-fade-up 320ms var(--sg-ease-out) backwards;
}

/* Alerte « à compléter » */
.sg-detail__alerte {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px 14px;
    background: var(--sg-brand-gold-soft);
    border: 1px solid color-mix(in srgb, var(--sg-or-clair) 35%, transparent);
    border-radius: 12px;
}

.sg-detail__alerte-ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #FFFFFF;
    background: var(--sg-or-degrade);
    border-radius: 10px;
}

.sg-detail__alerte strong {
    display: block;
    font-size: .8125rem;
    color: var(--sg-ink);
}

.sg-detail__alerte span:not(.sg-detail__alerte-ico) {
    font-size: .78125rem;
    color: var(--sg-ink-muted);
}

/* Blocs d'informations */
.sg-detail__grille {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.sg-detail__bloc {
    padding: 16px 18px;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(6, 20, 13, .04);
}

.sg-detail__bloc h6 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: .84375rem;
    font-weight: 700;
    color: var(--sg-ink);
}

.sg-detail__bloc h6 > span {
    display: grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    font-size: 12px;
    color: #FFFFFF;
    background: var(--sg-or-degrade);
    border-radius: 8px;
}

.sg-detail__etat {
    margin-left: auto;
    padding: 2px 9px;
    font-size: .6875rem;
    font-style: normal;
    font-weight: 700;
    border-radius: var(--sg-radius-full);
}

.sg-detail__etat.is-success { color: var(--sg-success); background: var(--sg-success-soft); }
.sg-detail__etat.is-danger { color: var(--sg-danger); background: var(--sg-danger-soft); }
.sg-detail__etat.is-warning { color: var(--sg-warning); background: var(--sg-warning-soft); }
.sg-detail__etat.is-info { color: var(--sg-info); background: var(--sg-info-soft); }

.sg-detail__bloc dl {
    margin: 0;
}

.sg-detail__bloc dl > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-top: 1px dashed var(--sg-border);
}

.sg-detail__bloc dl > div:first-child {
    border-top: 0;
}

.sg-detail__bloc dt {
    flex: none;
    font-size: .75rem;
    font-weight: 500;
    color: var(--sg-ink-muted);
}

.sg-detail__bloc dd {
    min-width: 0;
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sg-ink);
    text-align: right;
    overflow-wrap: anywhere;
}

.sg-detail__bloc dd.is-vide {
    font-weight: 400;
    color: var(--sg-ink-faint);
}

/* Voyages */
.sg-detail__voyage {
    padding: 16px 18px;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 14px;
}

.sg-detail__voyage + .sg-detail__voyage {
    margin-top: 12px;
}

.sg-detail__voyage-haut {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sg-detail__voyage-ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    font-size: 16px;
    color: #FFFFFF;
    background: var(--sg-vert-degrade);
    border-radius: 11px;
}

.sg-detail__voyage-titre {
    flex: 1 1 auto;
    min-width: 0;
}

.sg-detail__voyage-titre strong {
    display: block;
    font-size: .9375rem;
    color: var(--sg-ink);
}

.sg-detail__voyage-titre span {
    font-size: .75rem;
    color: var(--sg-ink-muted);
}

.sg-detail__voyage-chiffres {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.sg-detail__voyage-chiffres > div {
    padding: 10px 12px;
    background: var(--sg-well-bg);
    border-radius: 10px;
}

.sg-detail__voyage-chiffres small {
    display: block;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--sg-ink-muted);
}

.sg-detail__voyage-chiffres strong {
    font-size: .9375rem;
    font-weight: 800;
    color: var(--sg-ink);
    font-variant-numeric: tabular-nums;
}

.sg-detail__voyage-chiffres .is-or strong { color: var(--sg-or-fonce); }
.sg-detail__voyage-chiffres .is-du strong { color: var(--sg-danger); }
:root[data-theme="dark"] .sg-detail__voyage-chiffres .is-or strong { color: var(--sg-or-clair); }

.sg-detail__barre {
    height: 8px;
    margin-top: 14px;
    overflow: hidden;
    background: var(--sg-surface-300);
    border-radius: var(--sg-radius-full);
}

.sg-detail__barre > span {
    display: block;
    height: 100%;
    background: var(--sg-or-degrade);
    border-radius: inherit;
    transition: width 700ms var(--sg-ease-out);
}

.sg-detail__barre-texte {
    margin: 6px 0 0;
    font-size: .71875rem;
    font-weight: 600;
    color: var(--sg-ink-muted);
    text-align: right;
}

.sg-detail__sous-titre {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 10px;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--sg-or-fonce);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sg-detail__sous-titre::after {
    flex: 1;
    height: 1px;
    content: "";
    background: var(--sg-border);
}

:root[data-theme="dark"] .sg-detail__sous-titre { color: var(--sg-or-clair); }

/* Versements */
.sg-detail__table {
    width: 100%;
    overflow: hidden;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
}

.sg-detail__table td {
    padding: 11px 14px;
    font-size: .8125rem;
    color: var(--sg-ink);
    border-top: 1px solid var(--sg-border);
}

.sg-detail__table tr:first-child td {
    border-top: 0;
}

.sg-detail__table td:first-child {
    width: 48px;
}

.sg-detail__mini-ico {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    font-size: 11px;
    color: #FFFFFF;
    background: var(--sg-or-degrade);
    border-radius: 8px;
}

.sg-detail__montant {
    font-weight: 800;
    color: var(--sg-success);
    text-align: right;
    white-space: nowrap;
}

/* Documents et visas */
.sg-detail__docs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}

body.app .sg-detail__doc,
.sg-detail__visa {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: var(--sg-ink);
    text-decoration: none;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    transition: border-color 150ms ease, transform 200ms var(--sg-ease-out), box-shadow 200ms ease;
}

body.app .sg-detail__doc:hover {
    border-color: color-mix(in srgb, var(--sg-or-clair) 55%, var(--sg-border));
    box-shadow: 0 8px 20px -10px rgba(6, 20, 13, .3);
    transform: translateY(-2px);
}

body.app .sg-detail__doc > svg:last-child {
    margin-left: auto;
    font-size: 11px;
    color: var(--sg-ink-faint);
}

.sg-detail__visa + .sg-detail__visa {
    margin-top: 10px;
}

.sg-detail__doc-ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 38px;
    height: 38px;
    font-size: 15px;
    color: #FFFFFF;
    background: linear-gradient(145deg, #3D78AE 0%, #2B5C8A 100%);
    border-radius: 10px;
}

.sg-detail__doc-ico.is-or {
    background: var(--sg-or-degrade);
}

.sg-detail__doc-texte {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.sg-detail__doc-texte strong {
    overflow: hidden;
    font-size: .8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-detail__doc-texte small {
    font-size: .71875rem;
    color: var(--sg-ink-muted);
}

.sg-detail__visa .sg-statut {
    height: 26px;
    font-size: .71875rem;
}

/* Historique : frise verticale */
.sg-detail__frise {
    position: relative;
    margin: 0;
    padding: 4px 0 0;
    list-style: none;
}

.sg-detail__frise::before {
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 17px;
    width: 2px;
    content: "";
    background: linear-gradient(var(--sg-or-clair), var(--sg-border));
}

.sg-detail__frise li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
}

.sg-detail__frise-pt {
    position: relative;
    z-index: 1;
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    font-size: 13px;
    color: #FFFFFF;
    background: var(--sg-vert-degrade);
    border: 3px solid var(--sg-well-bg);
    border-radius: 50%;
}

.sg-detail__frise li.is-or .sg-detail__frise-pt {
    background: var(--sg-or-degrade);
}

.sg-detail__frise li > div {
    flex: 1;
    padding: 10px 14px;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 12px;
}

.sg-detail__frise strong {
    display: block;
    font-size: .8125rem;
    color: var(--sg-ink);
}

.sg-detail__frise small {
    font-size: .75rem;
    color: var(--sg-ink-muted);
}

.sg-detail__vide {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    font-size: .8125rem;
    color: var(--sg-ink-muted);
    background: var(--sg-card-bg);
    border: 1px dashed var(--sg-border);
    border-radius: 12px;
}

.sg-detail__vide svg {
    color: var(--sg-or-clair);
}

/* Entrée de la fenêtre */
.sg-detail.show .sg-detail__stat {
    animation: sg-fade-up 420ms var(--sg-ease-out) backwards;
}

.sg-detail.show .sg-detail__stat:nth-child(2) { animation-delay: 50ms; }
.sg-detail.show .sg-detail__stat:nth-child(3) { animation-delay: 100ms; }
.sg-detail.show .sg-detail__stat:nth-child(4) { animation-delay: 150ms; }

@media (max-width: 991.98px) {
    .sg-detail__grille {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sg-detail__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .sg-detail__bandeau {
        flex-wrap: wrap;
    }

    .sg-detail__grille,
    .sg-detail__voyage-chiffres {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --------------------------------------------------------------------------
   9g. SELECT2, DRAPEAUX, STATUTS, CHAMPS CONDITIONNELS, VISIONNEUSE PDF
   -------------------------------------------------------------------------- */
/* --- Select2 aux couleurs de la charte (même hauteur et même bordure que les champs) --- */
body.app .select2-container { font-family: var(--sg-font-sans); }

body.app .select2-container--default .select2-selection--single,
body.app .select2-container--default .select2-selection--multiple {
    min-height: 42px;
    background: var(--sg-card-bg);
    border: 1px solid color-mix(in srgb, var(--sg-ink-faint) 38%, var(--sg-border));
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(6, 20, 13, .04);
    transition: border-color 150ms ease, box-shadow 200ms ease;
}

body.app .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 36px 0 14px;
    font-size: .875rem;
    font-weight: 500;
    line-height: 40px;
    color: var(--sg-ink);
}

body.app .select2-container--default .select2-selection--single .select2-selection__placeholder,
body.app .select2-container--default .select2-search--inline .select2-search__field::placeholder {
    font-weight: 400;
    color: var(--sg-ink-faint);
}

body.app .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 10px;
    height: 40px;
}

body.app .select2-container--default.select2-container--focus .select2-selection--multiple,
body.app .select2-container--default.select2-container--open .select2-selection--single,
body.app .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--sg-brand-green);
    box-shadow: 0 0 0 4px rgba(var(--sg-brand-green-rgb), .12);
}

body.app .select2-container--default .select2-selection--multiple {
    padding: 4px 8px;
}

body.app .select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    margin: 3px 6px 3px 0;
    padding: 0 10px 0 4px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sg-brand-green);
    background: var(--sg-brand-green-soft);
    border: 1px solid color-mix(in srgb, var(--sg-brand-green) 30%, transparent);
    border-radius: var(--sg-radius-full);
}

body.app .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: static;
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 14px;
    color: var(--sg-brand-green);
    background: rgba(255, 255, 255, .7);
    border: 0;
    border-radius: 50%;
}

body.app .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #FFFFFF;
    background: var(--sg-danger);
}

body.app .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding: 0;
}

body.app .select2-container--default .select2-search--inline .select2-search__field {
    height: 28px;
    margin: 3px 0 0 4px;
    font-family: var(--sg-font-sans);
    font-size: .875rem;
}

body.app .select2-dropdown {
    overflow: hidden;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    box-shadow: var(--sg-shadow-lg);
}

body.app .select2-container--open .select2-dropdown--below { margin-top: 4px; }
body.app .select2-container--open .select2-dropdown--above { margin-top: -4px; }

body.app .select2-search--dropdown {
    padding: 8px;
}

body.app .select2-container--default .select2-search--dropdown .select2-search__field {
    height: 36px;
    padding: 0 10px;
    font-size: .8125rem;
    color: var(--sg-ink);
    background: var(--sg-well-bg);
    border: 1px solid var(--sg-border);
    border-radius: 8px;
    outline: 0;
}

body.app .select2-results__option {
    padding: 8px 12px;
    font-size: .8125rem;
    color: var(--sg-ink);
}

body.app .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    color: var(--sg-brand-green);
    background: var(--sg-brand-green-soft);
}

body.app .select2-container--default .select2-results__option--selected {
    font-weight: 700;
    background: var(--sg-brand-gold-soft);
}

body.app .select2-results > .select2-results__options {
    max-height: 260px;
}

.sg-champ.is-invalid .select2-selection {
    border-color: var(--sg-danger) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sg-danger) 14%, transparent) !important;
}

/* Drapeaux */
.sg-s2-pays {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.sg-s2-pays .fi,
.sg-drapeau {
    width: 1.33em;
    line-height: 1em;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(6, 20, 13, .12);
}

.sg-s2-sans-drapeau {
    display: inline-grid;
    place-items: center;
    width: 1.33em;
    font-size: 10px;
    color: var(--sg-ink-faint);
}

.sg-s2-nouveau {
    font-weight: 700;
    color: var(--sg-or-fonce);
}

.sg-s2-voyage {
    display: flex;
    flex-direction: column;
}

.sg-s2-voyage small {
    font-size: .71875rem;
    color: var(--sg-ink-muted);
}

/* --- Tableau : sexe et âge, voyages multiples, paiement, lignes suspendues --- */
.sg-sexe {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.sg-sexe__ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    font-size: 13px;
    color: #FFFFFF;
    background: linear-gradient(145deg, #3D78AE 0%, #2B5C8A 100%);
    border-radius: 9px;
}

.sg-sexe.is-femme .sg-sexe__ico {
    background: linear-gradient(145deg, #C7578A 0%, #9C3466 100%);
}

.sg-entity__pays {
    font-family: var(--sg-font-sans);
    letter-spacing: 0;
}

.sg-plus {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 18px;
    margin-left: 4px;
    padding: 0 5px;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--sg-or-fonce);
    background: var(--sg-brand-gold-soft);
    border-radius: var(--sg-radius-full);
}

.sg-paiement::before {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    vertical-align: middle;
    content: "";
    background: currentColor;
    border-radius: 50%;
}

.sg-paiement--success { color: var(--sg-success) !important; }
.sg-paiement--warning { color: var(--sg-warning) !important; }
.sg-paiement--danger { color: var(--sg-danger) !important; }

.sg-statut--gold {
    color: var(--sg-or-fonce);
    background: var(--sg-brand-gold-soft);
    border-color: color-mix(in srgb, var(--sg-or-clair) 40%, transparent);
}

table.sg-table--registre tbody tr.is-suspendu td:not(.sg-col-actions) {
    opacity: .62;
}

table.sg-table--registre tbody tr.is-suspendu .sg-statut {
    opacity: 1;
}

/* --- Champs « Précisez », blocs conditionnels --- */
body.app .sg-modal .sg-champ__control.has-icon > .sg-autre {
    padding-left: 14px;
}

body.app .sg-modal .sg-autre {
    margin-top: 8px;
    animation: sg-fade-up 240ms var(--sg-ease-out) backwards;
}

.sg-champ.is-apparition {
    animation: sg-fade-up 280ms var(--sg-ease-out) backwards;
}

/* Oui / Non */
body.app .sg-segment--oui-non .sg-segment__input:checked + .sg-segment__option.is-oui {
    color: #FFFFFF;
    background: var(--sg-vert-degrade);
}

body.app .sg-segment--oui-non .sg-segment__input:checked + .sg-segment__option.is-non {
    color: var(--sg-danger);
}

/* Liens de parenté des mahrams choisis */
.sg-liens-mahram {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
    margin-top: -6px;
}

.sg-liens-mahram__vide {
    grid-column: 1 / -1;
    margin: 0;
    padding: 10px 12px;
    font-size: .78125rem;
    color: var(--sg-ink-muted);
    background: var(--sg-well-bg);
    border: 1px dashed var(--sg-border);
    border-radius: 10px;
}

.sg-liens-mahram__vide svg { color: var(--sg-or-clair); margin-right: 4px; }

.sg-lien-mahram {
    display: grid;
    grid-template-columns: auto 1fr 150px;
    gap: 6px 10px;
    align-items: center;
    padding: 8px 10px;
    background: var(--sg-brand-green-soft);
    border: 1px solid color-mix(in srgb, var(--sg-brand-green) 30%, transparent);
    border-radius: 12px;
    animation: sg-fade-up 260ms var(--sg-ease-out) backwards;
}

.sg-lien-mahram__ini {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    font-size: .6875rem;
    font-weight: 800;
    color: #FFFFFF;
    background: var(--sg-vert-degrade);
    border-radius: 9px;
}

.sg-lien-mahram__nom {
    overflow: hidden;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--sg-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.app .sg-lien-mahram select.sg-select {
    width: 100%;
}

body.app .sg-modal .sg-lien-mahram .sg-autre {
    grid-column: 2 / -1;
    min-height: 34px;
    margin-top: 0;
}

.sg-form-grid > [hidden],
.sg-champ[hidden] {
    display: none !important;
}

.sg-carte__erreur {
    margin: 8px 0 0;
    padding: 6px 10px;
    font-size: .71875rem;
    font-weight: 600;
    color: #FFD5D0;
    background: rgba(226, 101, 90, .2);
    border: 1px solid rgba(226, 101, 90, .45);
    border-radius: 8px;
}

/* Vue détaillée : bandeau « suspendu » */
.sg-detail__alerte.is-suspendu {
    background: var(--sg-danger-soft);
    border-color: color-mix(in srgb, var(--sg-danger) 30%, transparent);
}

.sg-detail__alerte.is-suspendu .sg-detail__alerte-ico {
    background: linear-gradient(145deg, #D2493D 0%, #A6291F 100%);
}

.sg-detail__alerte + .sg-detail__alerte[hidden] { display: none; }

.sg-swal-texte {
    margin: 0;
    font-size: .875rem;
    line-height: 1.6;
}

/* --- Visionneuse PDF (PDF.js) --- */
body.app .sg-pdf .modal-content {
    overflow: hidden;
    background: #2A3330;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 30px 80px -16px rgba(6, 20, 13, .55);
}

@media (min-width: 1200px) {
    body.app .sg-pdf .modal-dialog { --bs-modal-width: 1000px; }
}

.sg-pdf__barre {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    color: #FFFFFF;
    background: linear-gradient(120deg, #052E1E 0%, #06402A 60%, #0A5537 100%);
    border-bottom: 3px solid var(--sg-or-clair);
}

.sg-pdf__ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    font-size: 17px;
    background: var(--sg-or-degrade);
    border-radius: 11px;
}

.sg-pdf__titres {
    flex: 1 1 auto;
    min-width: 0;
}

body.app .sg-pdf__titres h5 {
    margin: 0;
    overflow: hidden;
    font-size: .9375rem;
    font-weight: 700;
    color: #FFFFFF;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-pdf__titres small {
    font-size: .75rem;
    color: rgba(255, 255, 255, .65);
}

.sg-pdf__zoom {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
}

.sg-pdf__zoom span {
    min-width: 48px;
    font-family: var(--sg-font-mono);
    font-size: .75rem;
    text-align: center;
}

body.app .sg-pdf__zoom button,
body.app .sg-pdf__fermer {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #FFFFFF;
    background: transparent;
    border: 0;
    border-radius: 8px;
}

body.app .sg-pdf__zoom button:hover,
body.app .sg-pdf__fermer:hover {
    background: rgba(255, 255, 255, .14);
}

body.app .sg-pdf__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    font-size: .8125rem;
    font-weight: 700;
    color: #FFFFFF;
    text-decoration: none;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
}

body.app .sg-pdf__btn:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, .2);
}

body.app .sg-pdf__btn--or {
    background: var(--sg-or-degrade);
    border: 0;
    box-shadow: 0 8px 18px -8px rgba(212, 163, 57, .8);
}

.sg-pdf__pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    height: min(78vh, calc(100vh - 160px));
    padding: 26px;
    overflow: auto;
    background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .05) 1px, transparent 0) 0 0 / 16px 16px, #2A3330;
}

.sg-pdf__feuille {
    position: relative;
    flex: none;
    background: #FFFFFF;
    border-radius: 4px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
    animation: sg-fade-up 360ms var(--sg-ease-out) backwards;
}

.sg-pdf__feuille canvas {
    display: block;
    border-radius: 4px;
}

.sg-pdf__num {
    position: absolute;
    right: 10px;
    bottom: -20px;
    font-size: .6875rem;
    color: rgba(255, 255, 255, .55);
}

.sg-pdf__cadre {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    border: 0;
    border-radius: 6px;
}

.sg-pdf__chargement {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: auto;
    font-size: .875rem;
    color: rgba(255, 255, 255, .8);
}

.sg-pdf__chargement.is-erreur {
    color: #FFB3AB;
}

.sg-pdf__spinner {
    width: 22px;
    height: 22px;
    border: 3px solid rgba(255, 255, 255, .2);
    border-top-color: var(--sg-or-clair);
    border-radius: 50%;
    animation: sg-tourne 800ms linear infinite;
}

@keyframes sg-tourne {
    to { transform: rotate(360deg); }
}

@media (max-width: 767.98px) {
    .sg-pdf__btn span,
    .sg-pdf__zoom {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   9h. FENÊTRE DE SAISIE AGRANDIE, PHOTOS, SOUSCRIPTIONS, RECADRAGE
   -------------------------------------------------------------------------- */
/* Ajout / modification : plus d'espace (jusqu'à 1360 px, presque toute la hauteur) */
@media (min-width: 1200px) {
    body.app .sg-modal--xl .modal-dialog {
        --bs-modal-width: min(1360px, calc(100vw - 48px));
        --bs-modal-margin: 1.25rem;
    }
}

body.app .sg-modal--carte .modal-content {
    max-height: calc(100vh - 2.5rem);
}

body.app .sg-modal--carte .modal-body {
    max-height: min(84vh, calc(100vh - 170px));
}

.sg-saisie {
    grid-template-columns: 320px minmax(0, 1fr);
}

.sg-saisie__carte {
    min-height: min(84vh, calc(100vh - 170px));
}

.sg-saisie__form {
    padding: 28px 40px 36px;
}

.sg-form-grid--3 {
    gap: 20px 20px;
}

/* --- Photos : toutes tailles et orientations, recadrées en carré sans déformation (visage vers le haut) --- */
.sg-monogram img,
.sg-avatar-up img,
.sg-detail__avatar img,
.sg-apercu__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
    image-orientation: from-image;
}

body.app .sg-avatar-up {
    overflow: hidden;
}

body.app .sg-avatar-up img {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.sg-avatar-up__badge {
    z-index: 2;
}

/* Copie du passeport : vignette plus lisible, image entière visible */
.sg-drop__apercu {
    width: 72px;
    height: 52px;
    object-fit: cover;
    object-position: center;
    background: var(--sg-surface-300);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(6, 20, 13, .12);
}

.sg-champ__aide a {
    font-weight: 700;
    color: var(--sg-brand-green);
}

/* --- Souscriptions aux voyages : une carte par voyage --- */
.sg-souscriptions {
    display: grid;
    gap: 10px;
    margin-top: -6px;
}

.sg-souscription {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 170px 150px 150px;
    gap: 12px 16px;
    align-items: center;
    padding: 12px 16px;
    background: var(--sg-card-bg);
    border: 1px solid color-mix(in srgb, var(--sg-or-clair) 40%, var(--sg-border));
    border-left: 4px solid var(--sg-or-clair);
    border-radius: 12px;
    animation: sg-fade-up 260ms var(--sg-ease-out) backwards;
}

.sg-souscription__ico {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    font-size: 16px;
    color: #FFFFFF;
    background: var(--sg-or-degrade);
    border-radius: 11px;
}

.sg-souscription__texte {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sg-souscription__nom {
    overflow: hidden;
    font-size: .875rem;
    font-weight: 800;
    color: var(--sg-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-souscription__prix {
    font-family: var(--sg-font-mono);
    font-size: .71875rem;
    color: var(--sg-ink-muted);
}

body.app .sg-souscription__champ {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

.sg-souscription__champ > span {
    font-size: .6875rem;
    font-weight: 700;
    color: var(--sg-ink-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.app .sg-modal .sg-souscription .form-control,
body.app .sg-modal .sg-souscription select.sg-select {
    width: 100%;
    min-height: 36px;
    height: 36px;
    font-size: .8125rem;
}

.sg-souscription__total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 6px 12px;
    background: var(--sg-brand-gold-soft);
    border-radius: 10px;
}

.sg-souscription__total small {
    font-size: .6875rem;
    font-weight: 700;
    color: var(--sg-ink-muted);
}

.sg-souscription__total strong {
    font-size: .9375rem;
    font-weight: 800;
    color: var(--sg-or-fonce);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

:root[data-theme="dark"] .sg-souscription__total strong {
    color: var(--sg-or-clair);
}

.sg-souscription__verrou {
    position: absolute;
    top: -8px;
    right: -8px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    font-size: 10px;
    color: #FFFFFF;
    background: var(--sg-alerte-vert);
    border: 2px solid var(--sg-card-bg);
    border-radius: 50%;
}

@media (max-width: 1199.98px) {
    .sg-souscription {
        grid-template-columns: auto minmax(0, 1fr) 1fr;
    }

    .sg-souscription__total {
        grid-column: 2 / -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* --- Recadrage de la photo (Cropper.js dans une boîte de dialogue) --- */
.swal2-popup.sg-dialog.sg-dialog--recadrage {
    width: min(620px, calc(100vw - 32px)) !important;
}

.sg-dialog--recadrage .sg-dialog__titre {
    padding-top: 24px !important;
}

.sg-recadrage {
    height: min(420px, 55vh);
    margin-top: 14px;
    overflow: hidden;
    background: #0B1510;
    border-radius: 14px;
}

.sg-recadrage img {
    display: block;
    max-width: 100%;
}

.sg-recadrage .cropper-view-box,
.sg-recadrage .cropper-face {
    border-radius: 50%;
}

.sg-recadrage .cropper-view-box {
    outline: 2px solid var(--sg-or-clair);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45);
}

.sg-recadrage .cropper-point {
    width: 10px;
    height: 10px;
    background: var(--sg-or-clair);
    border-radius: 50%;
    opacity: 1;
}

.sg-recadrage__outils {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

body.app .sg-recadrage__outils button,
.sg-recadrage__outils button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    font-size: 15px;
    color: var(--sg-ink);
    background: var(--sg-well-bg);
    border: 1px solid var(--sg-border);
    border-radius: 10px;
    cursor: pointer;
}

.sg-recadrage__outils button:hover {
    color: var(--sg-brand-green);
    border-color: var(--sg-brand-green);
}

.sg-recadrage__aide {
    margin: 10px 0 0;
    font-size: .78125rem;
    color: var(--sg-ink-muted);
}

/* --------------------------------------------------------------------------
   9i. FINITIONS : POLICE INTER, BARRE LATÉRALE, TAILLES, VUE DÉTAILLÉE ENRICHIE
   -------------------------------------------------------------------------- */
/* Barre latérale : fond d'origine (dégradé du vert du dôme + trame en étoiles, section « Sidebar » plus haut) */

.sg-sidebar .sg-nav__link {
    font-size: .90625rem;
    font-weight: 500;
}

.sg-sidebar .sg-nav__link.active {
    background: linear-gradient(90deg, rgba(212, 163, 57, .22) 0%, rgba(212, 163, 57, .06) 100%);
    box-shadow: inset 3px 0 0 #D4A339;
}

/* Icônes de la barre latérale : toujours blanches (au repos, au survol et sur l'élément actif) */
.sg-sidebar .sg-nav__icon,
.sg-sidebar .sg-nav__link:hover .sg-nav__icon,
.sg-sidebar .sg-nav__link.active .sg-nav__icon {
    color: #FFFFFF;
}

/* --- Noms : Inter très gras plutôt que la police de titrage (plus net, plus moderne) --- */
body.app .sg-detail .sg-detail__nom,
body.app .sg-carte .sg-carte__nom,
.sg-avatar-up__init,
.sg-detail__avatar {
    font-family: var(--sg-font-sans);
    font-weight: 800;
    letter-spacing: -.02em;
}

/* --- Tailles : lecture confortable (tableau, indicateurs, en-tête, pagination) --- */
.sg-hero__titre { font-size: 1.75rem; }
.sg-hero__sub { font-size: .875rem; }
body.app .sg-hero__actions .btn { height: 44px; font-size: .875rem; }

.sg-kpi__icone { width: 50px; height: 50px; font-size: 19px; }
.sg-kpi__libelle { font-size: .8125rem; }
.sg-kpi__valeur { font-size: 1.75rem; font-weight: 800; }
.sg-kpi__note { font-size: .75rem; }

.sg-registre__titre { font-size: 1.125rem; }
.sg-registre__desc { font-size: .8125rem; }
body.app .sg-registre .sg-seg { height: 36px; font-size: .875rem; }
body.app .sg-registre .sg-search .form-control,
body.app .sg-registre select.sg-select,
body.app .sg-btn-filtres { min-height: 42px; height: 42px; font-size: .875rem; }

table.sg-table--registre thead th { height: 50px; font-size: .71875rem; letter-spacing: .08em; }
table.sg-table--registre tbody td { height: 74px; padding-right: 12px; padding-left: 12px; font-size: .9375rem; }
table.sg-table--registre thead th { padding-right: 12px; padding-left: 12px; }
table.sg-table--registre tbody td.sg-col-actions:last-child { padding-right: 16px; }
table.sg-table--registre .sg-row-actions { gap: 2px; }

/* Seconde ligne des cellules (âge, expiration, email) : Inter à chiffres tabulaires ; seuls les codes restent en chasse fixe */
table.sg-table--registre .sg-cell-sub {
    font-family: var(--sg-font-sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* Portables (moins de 1500 px) : même tableau, un peu plus compact, sans icônes décoratives */
@media (max-width: 1499.98px) {
    table.sg-table--registre thead th,
    table.sg-table--registre tbody td { padding-right: 8px; padding-left: 8px; }
    table.sg-table--registre tbody td { height: 68px; font-size: .875rem; }
    table.sg-table--registre .sg-cell-main,
    table.sg-table--registre .sg-entity__name { font-size: .875rem; }
    table.sg-table--registre .sg-entity__sub,
    table.sg-table--registre .sg-cell-sub { font-size: .75rem; }
    table.sg-table--registre .sg-monogram { width: 40px; height: 40px; }
    table.sg-table--registre .sg-entity { gap: 10px; }
    .sg-sexe__ico,
    table.sg-table--registre .sg-cell-ico > svg { display: none; }
    table.sg-table--registre .sg-statut { padding: 0 9px; font-size: .75rem; }
    body.app table.sg-table--registre tbody .sg-row-btn { width: 32px; height: 32px; font-size: 14px; }
    table.sg-table--registre tbody td.sg-col-actions:last-child { padding-right: 10px; }
    table.sg-table--registre tbody td:first-child,
    table.sg-table--registre thead th:first-child { padding-left: 14px; }
    table.sg-table--registre .sg-col-num { width: 52px; padding-left: 16px; }
    table.sg-table--registre .sg-entity__name { max-width: 190px; }
    table.sg-table--registre .sg-cell-main,
    table.sg-table--registre .sg-cell-sub { max-width: 165px; }
    table.sg-table--registre thead th { font-size: .6875rem; letter-spacing: .06em; }
}

/* Petits portables : l'impression reste accessible depuis la vue détaillée */
@media (max-width: 1399.98px) {
    table.sg-table--registre .js-cl-pdf { display: none; }
    table.sg-table--registre .sg-entity { min-width: 0; }
    table.sg-table--registre .sg-entity__name { max-width: 170px; }
    table.sg-table--registre .sg-entity__pays { display: none; }
    table.sg-table--registre .sg-col-num { width: 42px; padding-left: 12px; font-size: .8125rem; }
    table.sg-table--registre .sg-statut { gap: 5px; padding: 0 8px; }
    table.sg-table--registre .sg-monogram { width: 36px; height: 36px; font-size: .8125rem; }
    table.sg-table--registre thead th,
    table.sg-table--registre tbody td { padding-right: 5px; padding-left: 5px; }
    table.sg-table--registre .sg-cell-main,
    table.sg-table--registre .sg-cell-sub { max-width: 140px; }
}
table.sg-table--registre .sg-col-num { font-size: .9375rem; }
table.sg-table--registre .sg-monogram { width: 46px; height: 46px; font-size: .9375rem; border-radius: 12px; }
table.sg-table--registre .sg-entity__name { font-size: .9375rem; font-weight: 700; }
table.sg-table--registre .sg-entity__sub,
table.sg-table--registre .sg-cell-sub { font-size: .8125rem; }
table.sg-table--registre .sg-cell-main { font-size: .9375rem; }
table.sg-table--registre .sg-statut { height: 30px; padding: 0 12px; font-size: .8125rem; }
table.sg-table--registre .sg-etat,
body.app table.sg-table--registre .sg-btn-consulter { font-size: .8125rem; }
body.app table.sg-table--registre .sg-row-btn { width: 38px; height: 38px; font-size: 16px; }
.sg-sexe__ico { width: 34px; height: 34px; font-size: 14px; border-radius: 10px; }

.sg-pagination__compte,
.sg-pagination__size label { font-size: .875rem; }
body.app .sg-pages .sg-page { min-width: 38px; height: 38px; font-size: .875rem; }
body.app .sg-pagination__size select.sg-select { height: 38px; min-height: 38px; }

/* --- Vue détaillée : tailles et nouveaux éléments --- */
@media (min-width: 1200px) {
    body.app .sg-detail .modal-dialog { --bs-modal-width: min(1240px, calc(100vw - 48px)); }
}

body.app .sg-detail .sg-detail__nom { font-size: 2rem; }
.sg-detail__avatar { width: 92px; height: 92px; font-size: 2rem; }
.sg-detail__puce { height: 28px; font-size: .8125rem; }
.sg-detail__stat { padding: 16px 18px; }
.sg-detail__tuile { width: 46px; height: 46px; font-size: 18px; }
.sg-detail__stat small { font-size: .78125rem; }
.sg-detail__stat strong { font-size: 1.3125rem; }
body.app .sg-detail__onglet { height: 50px; font-size: .875rem; }
body.app .sg-detail .modal-body { max-height: min(60vh, calc(100vh - 360px)); }
.sg-detail__bloc { padding: 18px 20px; }
.sg-detail__bloc h6 { font-size: .9375rem; }
.sg-detail__bloc h6 > span { width: 30px; height: 30px; }
.sg-detail__bloc dt { font-size: .8125rem; }
.sg-detail__bloc dd { font-size: .875rem; }
.sg-detail__bloc dd.is-rouge { color: var(--sg-danger); }
.sg-detail__bloc dd.is-or { color: var(--sg-or-fonce); }
:root[data-theme="dark"] .sg-detail__bloc dd.is-or { color: var(--sg-or-clair); }

/* Contact en un clic (bandeau) */
.sg-detail__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

body.app .sg-detail__contact {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    font-size: .8125rem;
    font-weight: 600;
    color: #FFFFFF;
    text-decoration: none;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 9px;
    cursor: pointer;
    transition: background 150ms ease, transform 180ms var(--sg-ease-out);
}

body.app .sg-detail__contact:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, .22);
    transform: translateY(-1px);
}

body.app .sg-detail__contact.is-whatsapp {
    background: rgba(37, 211, 102, .22);
    border-color: rgba(37, 211, 102, .5);
}

body.app .sg-detail__contact svg {
    font-size: 12px;
}

/* Total versé : pourcentage et barre */
.sg-detail__stat-corps {
    flex: 1 1 auto;
    min-width: 0;
}

.sg-detail__stat small em {
    font-style: normal;
    font-weight: 700;
    color: var(--sg-or-fonce);
}

.sg-detail__stat-barre {
    display: block;
    height: 5px;
    margin-top: 6px;
    overflow: hidden;
    background: var(--sg-surface-300);
    border-radius: var(--sg-radius-full);
}

.sg-detail__stat-barre > span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--sg-or-degrade);
    border-radius: inherit;
    transition: width 700ms var(--sg-ease-out);
}

/* Complétude du dossier */
.sg-detail__completude {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 14px;
    padding: 18px 22px;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(6, 20, 13, .04);
}

.sg-detail__anneau {
    position: relative;
    flex: none;
    width: 84px;
    height: 84px;
}

.sg-detail__anneau svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.sg-detail__anneau circle {
    fill: none;
    stroke-width: 6;
}

.sg-detail__anneau-piste {
    stroke: var(--sg-surface-300);
}

.sg-detail__anneau-valeur {
    stroke: #D4A339;
    stroke-linecap: round;
    transition: stroke-dashoffset 800ms var(--sg-ease-out);
}

.sg-detail__anneau-valeur.is-complet {
    stroke: var(--sg-success);
}

.sg-detail__anneau strong {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--sg-ink);
    font-variant-numeric: tabular-nums;
}

.sg-detail__completude-texte {
    flex: 1 1 auto;
    min-width: 0;
}

.sg-detail__completude-texte h6 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--sg-ink);
}

.sg-detail__completude-texte p {
    margin: 2px 0 10px;
    font-size: .8125rem;
    color: var(--sg-ink-muted);
}

.sg-detail__controles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sg-detail__controles li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    font-size: .78125rem;
    font-weight: 600;
    border-radius: var(--sg-radius-full);
}

.sg-detail__controles li.is-ok {
    color: var(--sg-success);
    background: var(--sg-success-soft);
}

.sg-detail__controles li.is-manque {
    color: var(--sg-ink-muted);
    background: var(--sg-well-bg);
    box-shadow: inset 0 0 0 1px var(--sg-border);
}

.sg-detail__controles li.is-manque svg {
    color: var(--sg-danger);
}

@media (max-width: 767.98px) {
    .sg-detail__completude {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- En-tête des fenêtres de saisie : pastille pleine, icône blanche (vert en ajout, or en modification) --- */
body.app .sg-modal .sg-modal__icon {
    width: 46px;
    height: 46px;
    font-size: 18px;
    color: #F5A93A; /* orange doré sur vert plein */
    background: linear-gradient(145deg, #0B6B45 0%, #06402A 100%);
    border: 0;
    border-radius: 13px;
    box-shadow: 0 8px 18px -8px rgba(6, 64, 42, .7), inset 0 1px 0 rgba(255, 255, 255, .18);
}

body.app .sg-modal.sg-modal--edition .sg-modal__icon {
    color: #FFFFFF;
    background: linear-gradient(145deg, #E0B556 0%, #9A7322 100%);
    box-shadow: 0 8px 18px -8px rgba(154, 115, 34, .75), inset 0 1px 0 rgba(255, 255, 255, .25);
}

body.app .sg-modal.sg-modal--danger .sg-modal__icon {
    color: #FFFFFF;
    background: linear-gradient(145deg, #D2493D 0%, #A6291F 100%);
}

/* --------------------------------------------------------------------------
   9j. EN-TÊTE DE PAGE (x-sg.hero) : CARTE CLAIRE, COMPTEUR, INFORMATIONS, ACTIONS, MENU D'EXPORT
   -------------------------------------------------------------------------- */
.sg-hero {
    gap: 18px;
    padding: 20px 24px 20px 28px;
}

/* Tuile dorée, halo léger */
.sg-hero__tuile {
    width: 54px;
    height: 54px;
    font-size: 22px;
    color: #FFFFFF;
    background: linear-gradient(145deg, #E0B556 0%, #9A7322 100%);
    border-radius: 15px;
    box-shadow: 0 0 0 5px var(--sg-brand-gold-soft), 0 8px 18px -8px rgba(154, 115, 34, .7), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.sg-hero__fil {
    margin-bottom: 2px;
}

/* Titre + compteur */
.sg-hero__ligne-titre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

body.app .sg-hero .sg-hero__titre {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--sg-ink);
    letter-spacing: -.02em;
}

.sg-hero__compte {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    height: 26px;
    padding: 4px 10px 0;
    font-size: .8125rem;
    font-weight: 800;
    color: var(--sg-or-fonce);
    font-variant-numeric: tabular-nums;
    background: var(--sg-brand-gold-soft);
    border: 1px solid color-mix(in srgb, var(--sg-or-clair) 40%, transparent);
    border-radius: var(--sg-radius-full);
}

.sg-hero__compte small {
    font-size: .6875rem;
    font-weight: 600;
    opacity: .85;
}

:root[data-theme="dark"] .sg-hero__compte {
    color: var(--sg-or-clair);
}

.sg-hero .sg-hero__sub {
    display: block;
    margin: 3px 0 0;
    font-size: .8125rem;
    color: var(--sg-ink-muted);
}

/* Ligne d'informations : date, activité, mise à jour */
.sg-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.sg-hero__info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 9px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--sg-ink-muted);
    background: var(--sg-well-bg);
    border: 1px solid var(--sg-border);
    border-radius: 8px;
}

.sg-hero__info svg {
    font-size: 11px;
    color: var(--sg-or-clair);
}

.sg-hero__info.is-or {
    color: var(--sg-or-fonce);
    background: var(--sg-brand-gold-soft);
    border-color: color-mix(in srgb, var(--sg-or-clair) 35%, transparent);
}

:root[data-theme="dark"] .sg-hero__info.is-or {
    color: var(--sg-or-clair);
}

/* Actions */
.sg-hero__actions {
    gap: 8px;
    align-self: center;
}

body.app .sg-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    font-family: var(--sg-font-sans);
    font-size: .875rem;
    font-weight: 700;
    white-space: nowrap;
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    transition: transform 200ms var(--sg-ease-out), box-shadow 200ms ease, background 150ms ease, border-color 150ms ease;
}

body.app .sg-hero__btn:hover {
    transform: translateY(-1px);
}

body.app .sg-hero__btn:active {
    transform: translateY(0) scale(.98);
}

/* Exporter : bouton blanc bordé */
body.app .sg-hero__btn--verre {
    color: var(--sg-ink);
    background: var(--sg-card-bg);
    box-shadow: inset 0 0 0 1px var(--sg-border), 0 1px 2px rgba(6, 20, 13, .05);
}

body.app .sg-hero__btn--verre svg:first-child {
    color: var(--sg-brand-green);
}

body.app .sg-hero__btn--verre:hover,
body.app .sg-hero__btn--verre[aria-expanded="true"] {
    color: var(--sg-brand-green);
    background: var(--sg-brand-green-soft);
    box-shadow: inset 0 0 0 1px var(--sg-brand-green);
}

.sg-hero__chevron {
    font-size: 10px;
    opacity: .6;
    transition: transform 200ms ease;
}

.sg-hero__btn[aria-expanded="true"] .sg-hero__chevron {
    transform: rotate(180deg);
}

/* Nouveau client : bouton vert plein (action principale de la charte) */
body.app .sg-hero__btn--or {
    padding: 0 10px 0 8px;
    color: #FFFFFF;
    background: linear-gradient(145deg, #0B6B45 0%, #06402A 100%);
    box-shadow: 0 8px 18px -8px rgba(6, 64, 42, .7), inset 0 1px 0 rgba(255, 255, 255, .15);
}

body.app .sg-hero__btn--or:hover {
    color: #FFFFFF;
    box-shadow: 0 12px 22px -8px rgba(6, 64, 42, .8), inset 0 1px 0 rgba(255, 255, 255, .15);
}

.sg-hero__btn-ico {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    font-size: 12px;
    color: #FFFFFF;
    background: linear-gradient(145deg, #E0B556 0%, #9A7322 100%);
    border-radius: 8px;
}

.sg-hero__btn kbd {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    font-family: var(--sg-font-sans);
    font-size: .6875rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 6px;
    box-shadow: none;
}

/* Menu d'export : une ligne par format */
body.app .sg-export {
    width: 320px;
    margin-top: 6px !important;
    padding: 6px;
    border: 1px solid var(--sg-border);
    border-radius: 14px;
    box-shadow: 0 20px 44px -18px rgba(6, 20, 13, .4);
}

.sg-export__titre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 4px;
    padding: 8px 10px 9px;
    border-bottom: 1px solid var(--sg-border);
}

.sg-export__titre span {
    font-size: .6875rem;
    font-weight: 700;
    color: var(--sg-ink-faint);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sg-export__titre strong {
    padding: 2px 8px;
    font-size: .71875rem;
    font-weight: 800;
    color: var(--sg-or-fonce);
    background: var(--sg-brand-gold-soft);
    border-radius: var(--sg-radius-full);
}

:root[data-theme="dark"] .sg-export__titre strong {
    color: var(--sg-or-clair);
}

body.app .sg-export__item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 10px;
    color: var(--sg-ink);
    text-align: left;
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: 10px;
    transition: background 150ms ease;
}

body.app .sg-export__item:hover {
    color: var(--sg-ink);
    background: var(--sg-well-bg);
}

.sg-export__ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    font-size: 15px;
    color: #FFFFFF;
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

.sg-export__ico.is-rouge { background: linear-gradient(145deg, #D2493D 0%, #A6291F 100%); }
.sg-export__ico.is-vert { background: linear-gradient(145deg, #1F9D5B 0%, #0E6B3B 100%); }
.sg-export__ico.is-bleu { background: linear-gradient(145deg, #3D78AE 0%, #2B5C8A 100%); }

.sg-export__texte {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sg-export__texte strong {
    font-size: .8125rem;
    font-weight: 700;
}

.sg-export__texte small {
    font-size: .71875rem;
    color: var(--sg-ink-muted);
}

@media (max-width: 991.98px) {
    .sg-hero {
        padding: 18px;
    }

    .sg-hero__btn kbd {
        display: none;
    }

    .sg-hero__actions {
        width: 100%;
    }

    .sg-hero__actions > *,
    body.app .sg-hero__actions .sg-hero__btn {
        flex: 1 1 0;
    }

    .sg-hero__actions .dropdown .sg-hero__btn {
        width: 100%;
    }
}

/* --- Démarcheurs / mahrams : compléments partagés --- */
.sg-kpi--bleu { --sg-kpi: var(--sg-info); --sg-kpi-soft: var(--sg-info-soft); --sg-kpi-plein: linear-gradient(145deg, #3D78AE 0%, #2B5C8A 100%); }

/* Champ avec unité à droite (FCFA, %) */
.sg-suffixe {
    position: relative;
}

body.app .sg-modal .sg-suffixe .form-control {
    padding-right: 64px;
}

body.app .sg-modal .sg-champ__control.has-icon .sg-suffixe .form-control {
    padding-left: 40px;
}

.sg-suffixe > span {
    position: absolute;
    top: 50%;
    right: 6px;
    min-width: 50px;
    padding: 4px 8px;
    font-size: .75rem;
    font-weight: 800;
    color: var(--sg-or-fonce);
    text-align: center;
    background: var(--sg-brand-gold-soft);
    border-radius: 7px;
    transform: translateY(-50%);
}

.sg-dm-aide {
    grid-column: span 1;
    align-self: center;
    margin: 0;
}

/* Carte vivante : simulation de commission */
.sg-carte__simulation {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    margin-top: 16px;
    padding: 14px;
    text-align: center;
    background: rgba(212, 163, 57, .14);
    border: 1px solid rgba(212, 163, 57, .4);
    border-radius: 14px;
}

.sg-carte__simulation small {
    font-size: .71875rem;
    color: rgba(255, 255, 255, .7);
}

.sg-carte__simulation strong {
    font-size: 1.375rem;
    font-weight: 800;
    color: #F2CF7E;
    font-variant-numeric: tabular-nums;
}

/* Tableaux des vues détaillées (clients apportés, commissions, pèlerines) */
.sg-detail__table--entete thead th {
    padding: 10px 14px;
    font-size: .6875rem;
    font-weight: 800;
    color: color-mix(in srgb, var(--sg-brand-green) 85%, var(--sg-ink));
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: left;
    background: color-mix(in srgb, var(--sg-brand-green-soft) 85%, var(--sg-card-bg));
}

.sg-detail__table--entete td:first-child {
    width: auto;
}

.sg-detail__table--entete .is-droite {
    text-align: right;
    white-space: nowrap;
}

.sg-detail__table--entete .sg-statut {
    height: 24px;
    padding: 0 9px;
    font-size: .71875rem;
}

/* --------------------------------------------------------------------------
   9k. ANALYSE > CLIENTS : FILTRES, MENU DES SITUATIONS, SYNTHÈSE, RÉPARTITIONS, TABLEAU
   -------------------------------------------------------------------------- */
.sg-an-filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 18px;
    padding: 14px 18px;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 14px;
    box-shadow: var(--sg-shadow-xs);
}

.sg-an-filtres__titre {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: 4px;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--sg-ink-faint);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.sg-an-filtres__titre svg { color: var(--sg-or-clair); }

body.app .sg-an-filtres select.sg-select,
body.app .sg-an-filtres .form-control {
    height: 38px;
    min-height: 38px;
    font-size: .8125rem;
    border-radius: 9px;
}

body.app .sg-an-filtres__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: .8125rem;
    color: var(--sg-ink-muted);
}

body.app .sg-an-filtres__date .form-control {
    width: 140px;
}

body.app .sg-an-filtres select.sg-select {
    max-width: 175px;
}

body.app .sg-an-filtres__appliquer {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    font-size: .8125rem;
    font-weight: 700;
    color: #FFFFFF;
    background: linear-gradient(145deg, #0B6B45 0%, #06402A 100%);
    border: 0;
    border-radius: 9px;
}

/* Disposition : menu à gauche, contenu à droite */
.sg-an {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.sg-an__menu {
    position: sticky;
    top: calc(var(--sg-topbar-h) + 16px);
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 16px;
    box-shadow: var(--sg-shadow-xs);
}

.sg-an__menu-titre {
    margin: 2px 8px 8px;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--sg-or-fonce);
    letter-spacing: .12em;
    text-transform: uppercase;
}

:root[data-theme="dark"] .sg-an__menu-titre { color: var(--sg-or-clair); }

body.app .sg-an__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    font-size: .84375rem;
    font-weight: 600;
    color: var(--sg-ink-muted);
    text-decoration: none;
    border-radius: 11px;
    transition: background 150ms ease, color 150ms ease;
}

body.app .sg-an__item:hover {
    color: var(--sg-ink);
    background: var(--sg-well-bg);
}

.sg-an__item-ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    font-size: 13px;
    color: var(--sg-brand-green);
    background: var(--sg-brand-green-soft);
    border-radius: 9px;
    transition: background 150ms ease, color 150ms ease;
}

.sg-an__item-titre {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
}

.sg-an__item-nb {
    flex: none;
    min-width: 26px;
    padding: 2px 7px;
    font-size: .71875rem;
    font-weight: 700;
    color: var(--sg-ink-muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
    background: var(--sg-well-bg);
    border-radius: var(--sg-radius-full);
}

body.app .sg-an__item.is-actif {
    color: var(--sg-ink);
    background: var(--sg-brand-green-soft);
    box-shadow: inset 3px 0 0 var(--sg-brand-green);
}

.sg-an__item.is-actif .sg-an__item-ico {
    color: #FFFFFF;
    background: linear-gradient(145deg, #0B6B45 0%, #06402A 100%);
}

.sg-an__item.is-actif .sg-an__item-nb {
    color: var(--sg-or-fonce);
    background: var(--sg-brand-gold-soft);
}

/* Contenu */
.sg-an__contenu {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.sg-an__entete {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 16px;
    box-shadow: var(--sg-shadow-xs);
}

.sg-an__entete-ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 50px;
    height: 50px;
    font-size: 20px;
    color: #F5A93A;
    background: linear-gradient(145deg, #0B6B45 0%, #06402A 100%);
    border-radius: 14px;
    box-shadow: 0 8px 18px -8px rgba(6, 64, 42, .7);
}

.sg-an__entete-texte {
    flex: 1 1 auto;
    min-width: 0;
}

.sg-an__entete-texte h2 {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 800;
    color: var(--sg-ink);
    letter-spacing: -.01em;
}

.sg-an__entete-texte p {
    margin: 2px 0 0;
    font-size: .8125rem;
    color: var(--sg-ink-muted);
}

.sg-an__filtres-actifs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.sg-an__filtres-actifs span {
    padding: 2px 9px;
    font-size: .71875rem;
    font-weight: 600;
    color: var(--sg-or-fonce);
    background: var(--sg-brand-gold-soft);
    border-radius: var(--sg-radius-full);
}

.sg-an__exports {
    display: flex;
    flex: none;
    gap: 8px;
}

body.app .sg-an__export {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--sg-ink);
    text-decoration: none;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 10px;
    transition: border-color 150ms ease, background 150ms ease, transform 180ms var(--sg-ease-out);
}

body.app .sg-an__export:hover { transform: translateY(-1px); color: var(--sg-ink); }
body.app .sg-an__export.is-vert svg { color: #1F9D5B; }
body.app .sg-an__export.is-rouge svg { color: #C0392B; }
body.app .sg-an__export.is-vert:hover { border-color: #1F9D5B; background: var(--sg-success-soft); }
body.app .sg-an__export.is-rouge:hover { border-color: #C0392B; background: var(--sg-danger-soft); }

/* Synthèse : quatre chiffres */
.sg-an__synthese {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.sg-an__chiffre {
    position: relative;
    padding: 14px 16px 14px 20px;
    overflow: hidden;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 14px;
    box-shadow: var(--sg-shadow-xs);
}

.sg-an__chiffre::before {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 4px;
    content: "";
    background: var(--sg-an-ton);
    border-radius: 0 4px 4px 0;
}

.sg-an__chiffre--vert { --sg-an-ton: #1F7A4A; }
.sg-an__chiffre--or { --sg-an-ton: #D4A339; }
.sg-an__chiffre--rouge { --sg-an-ton: #C0392B; }
.sg-an__chiffre--bleu { --sg-an-ton: #2B5C8A; }
.sg-an__chiffre--gris { --sg-an-ton: #7C8B82; }

.sg-an__chiffre small {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--sg-ink-muted);
}

.sg-an__chiffre strong {
    display: block;
    margin-top: 2px;
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--sg-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* Répartitions : barres horizontales ou colonnes (chronologie) */
.sg-an__repartitions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.sg-an__repartition {
    padding: 16px 18px;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 14px;
    box-shadow: var(--sg-shadow-xs);
}

.sg-an__repartition.is-large {
    grid-column: 1 / -1;
}

.sg-an__repartition h3 {
    margin: 0 0 12px;
    font-size: .875rem;
    font-weight: 700;
    color: var(--sg-ink);
}

.sg-an__barres {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sg-an__barre-tete {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
    font-size: .8125rem;
}

.sg-an__barre-tete span {
    min-width: 0;
    overflow: hidden;
    color: var(--sg-ink-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-an__barre-tete strong {
    flex: none;
    font-weight: 700;
    color: var(--sg-ink);
    font-variant-numeric: tabular-nums;
}

.sg-an__barre-tete em {
    margin-left: 4px;
    font-size: .71875rem;
    font-style: normal;
    font-weight: 600;
    color: var(--sg-ink-faint);
}

.sg-an__barre {
    height: 8px;
    overflow: hidden;
    background: var(--sg-surface-300);
    border-radius: var(--sg-radius-full);
}

.sg-an__barre > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    animation: sg-an-barre 700ms var(--sg-ease-out) both;
    transform-origin: left center;
}

.sg-an__barre > .is-vert { background: linear-gradient(90deg, #1F9D5B, #0E6B3B); }
.sg-an__barre > .is-or { background: linear-gradient(90deg, #E0B556, #9A7322); }
.sg-an__barre > .is-rouge { background: linear-gradient(90deg, #D2493D, #A6291F); }
.sg-an__barre > .is-bleu { background: linear-gradient(90deg, #3D78AE, #2B5C8A); }
.sg-an__barre > .is-gris { background: linear-gradient(90deg, #9AA79F, #6B7A71); }

@keyframes sg-an-barre {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.sg-an__colonnes {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 200px;
    padding-top: 18px;
    overflow-x: auto;
}

.sg-an__colonne {
    display: flex;
    flex: 1 0 34px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-width: 34px;
}

.sg-an__colonne-nb {
    margin-bottom: 4px;
    font-size: .71875rem;
    font-weight: 700;
    color: var(--sg-ink);
}

.sg-an__colonne-barre {
    width: 100%;
    max-width: 36px;
    background: linear-gradient(180deg, #E0B556 0%, #0B6B45 100%);
    border-radius: 8px 8px 3px 3px;
    animation: sg-an-colonne 700ms var(--sg-ease-out) both;
    transform-origin: bottom center;
}

@keyframes sg-an-colonne {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

.sg-an__colonne-lib {
    margin-top: 6px;
    font-size: .6875rem;
    color: var(--sg-ink-muted);
    white-space: nowrap;
}

.sg-an__vide {
    margin: 0;
    font-size: .8125rem;
    color: var(--sg-ink-faint);
}

/* Tableau détaillé */
.sg-an__tableau {
    overflow: hidden;
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 16px;
    box-shadow: var(--sg-shadow-xs);
}

.sg-an__tableau-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--sg-border);
}

.sg-an__tableau-tete h3 {
    margin: 0;
    font-size: .9375rem;
    font-weight: 800;
    color: var(--sg-ink);
}

.sg-an__tableau-tete h3 span {
    margin-left: 6px;
    padding: 2px 8px;
    font-size: .71875rem;
    font-weight: 700;
    color: var(--sg-or-fonce);
    background: var(--sg-brand-gold-soft);
    border-radius: var(--sg-radius-full);
}

.sg-an__tableau-tete small {
    font-size: .75rem;
    color: var(--sg-ink-faint);
}

.sg-an__defilement {
    max-height: 620px;
    overflow: auto;
}

.sg-an__table {
    width: 100%;
    font-size: .84375rem;
    border-collapse: separate;
    border-spacing: 0;
}

.sg-an__table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 11px 12px;
    font-size: .6875rem;
    font-weight: 800;
    color: color-mix(in srgb, var(--sg-brand-green) 85%, var(--sg-ink));
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
    background: color-mix(in srgb, var(--sg-brand-green-soft) 85%, var(--sg-card-bg));
    border-bottom: 1px solid var(--sg-border);
}

.sg-an__table tbody td {
    padding: 10px 12px;
    color: var(--sg-ink);
    vertical-align: middle;
    border-bottom: 1px solid color-mix(in srgb, var(--sg-border) 70%, transparent);
}

.sg-an__table tbody tr:hover td {
    background: color-mix(in srgb, var(--sg-brand-green-soft) 50%, transparent);
}

.sg-an__table .is-num {
    width: 46px;
    font-weight: 600;
    color: var(--sg-or-fonce);
    text-align: center;
}

.sg-an__table .is-droite {
    text-align: right;
    white-space: nowrap;
}

.sg-an__nom {
    display: block;
    font-weight: 700;
    white-space: nowrap;
}

.sg-an__dossier {
    font-family: var(--sg-font-mono);
    font-size: .71875rem;
    color: var(--sg-ink-faint);
}

.sg-an__puce {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 2px 8px;
    font-size: .71875rem;
    font-weight: 600;
    color: var(--sg-ink-muted);
    background: var(--sg-well-bg);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-full);
}

.sg-an__vide-cell {
    color: var(--sg-ink-faint);
}

.sg-an__table .sg-statut {
    height: 26px;
    padding: 0 10px;
    font-size: .75rem;
}

@media (max-width: 1199.98px) {
    .sg-an {
        grid-template-columns: minmax(0, 1fr);
    }

    .sg-an__menu {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sg-an__menu-titre {
        display: none;
    }

    .sg-an__synthese {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media print {
    .sg-an-filtres,
    .sg-an__menu,
    .sg-an__exports {
        display: none !important;
    }

    .sg-an {
        display: block;
    }

    .sg-an__defilement {
        max-height: none;
        overflow: visible;
    }
}

/* --------------------------------------------------------------------------
   9d. DOSSIER CLIENT : MAHRAMS, VOYAGES ET PAIEMENTS, DOCUMENTS, TRAÇABILITÉ
   -------------------------------------------------------------------------- */
/* Bandeau d'information sous les filtres (ex. : vue des archives) */
.sg-list__notice {
    display: flex;
    align-items: center;
    gap: var(--sg-space-2);
    padding: 10px var(--sg-space-5);
    font-size: .8125rem;
    color: var(--sg-info);
    background: var(--sg-info-soft);
    border-bottom: 1px solid var(--sg-border);
}

/* Mahrams : une ligne par mahram, case + lien de parenté */
.sg-mahrams {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sg-space-2);
    max-height: 180px;
    padding: var(--sg-space-3);
    overflow-y: auto;
    background: var(--sg-well-bg);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-md);
}

.sg-mahram {
    display: flex;
    align-items: center;
    gap: var(--sg-space-2);
}

body.app .sg-mahram select.sg-select {
    flex: none;
    width: 118px;
    height: 32px;
    min-height: 32px;
}

/* Voyages et paiements */
.sg-voyages {
    display: grid;
}

.sg-voyage {
    display: grid;
    gap: var(--sg-space-3);
    padding: var(--sg-space-4) var(--sg-space-5);
    border-bottom: 1px solid var(--sg-border);
}

.sg-voyage:last-child {
    border-bottom: 0;
}

.sg-voyage__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sg-space-2) var(--sg-space-3);
}

.sg-voyage__nom {
    margin: 0;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--sg-ink);
}

.sg-voyage__meta {
    margin: 2px 0 0;
    font-size: var(--sg-fs-caption);
    color: var(--sg-ink-muted);
}

.sg-voyage__badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sg-voyage__chiffres {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
    gap: var(--sg-space-3);
    margin: 0;
}

.sg-voyage__chiffres dt {
    margin-bottom: 2px;
    font-size: var(--sg-fs-label);
    font-weight: 700;
    color: var(--sg-ink-faint);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sg-voyage__chiffres dd {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
}

.sg-voyage__chiffres .sg-amount {
    text-align: left;
}

.sg-voyage__actions {
    display: inline-flex;
    gap: 2px;
}

.sg-voyage__obs {
    margin: 0;
    padding: var(--sg-space-2) var(--sg-space-3);
    font-size: .8125rem;
    color: var(--sg-ink-muted);
    background: var(--sg-well-bg);
    border-radius: var(--sg-radius-sm);
}

@media (max-width: 575.98px) {
    .sg-voyage__chiffres {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mahram avec lien de parenté */
.sg-chip__sub {
    margin-left: 6px;
    padding-left: 6px;
    font-weight: 500;
    color: var(--sg-ink-muted);
    border-left: 1px solid var(--sg-border);
}

/* Documents */
.sg-docs {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sg-doc {
    display: flex;
    align-items: center;
    gap: var(--sg-space-3);
    padding: var(--sg-space-3) var(--sg-space-5);
    border-bottom: 1px solid var(--sg-border);
    transition: background var(--sg-t-fast);
}

.sg-doc:last-child {
    border-bottom: 0;
}

.sg-doc:hover {
    background: var(--sg-well-bg);
}

.sg-doc__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 38px;
    height: 38px;
    font-size: 16px;
    color: var(--sg-brand-green);
    background: var(--sg-brand-green-soft);
    border-radius: 11px;
}

.sg-doc__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

body.app .sg-doc__nom {
    overflow: hidden;
    font-weight: 700;
    color: var(--sg-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.app .sg-doc__nom:hover {
    color: var(--sg-brand-green);
}

/* Traçabilité en pied de fiche */
.sg-trace {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: var(--sg-space-5) 0 0;
    font-size: var(--sg-fs-caption);
    color: var(--sg-ink-muted);
}

.sg-trace strong {
    color: var(--sg-ink);
}

/* --------------------------------------------------------------------------
   10. CONNEXION
   Écran partagé pleine hauteur. À gauche, le volet « scène » : vert du dôme,
   rosace géométrique dorée en rotation lente, Talbiya calligraphiée.
   À droite, le formulaire sur la surface claire de la charte.
   Page autonome, sans Bootstrap.
   -------------------------------------------------------------------------- */
body.sg-auth,
body.sg-auth *,
body.sg-auth *::before,
body.sg-auth *::after {
    box-sizing: border-box;
}

body.sg-auth {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(440px, 1fr);
    min-height: 100vh;
    margin: 0;
    background: var(--sg-surface-100);
}

@keyframes sg-rise {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

@keyframes sg-fade {
    from {
        opacity: 0;
    }
}

@keyframes sg-turn {
    to {
        transform: rotate(360deg);
    }
}

@keyframes sg-turn-back {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes sg-twinkle {
    0%, 100% { opacity: .15; }
    50% { opacity: .9; }
}

@keyframes sg-shake {
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

@keyframes sg-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== Volet scène ===== */
.sg-scene {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 36px 48px 32px;
    overflow: hidden;
    color: var(--sg-sb-text);
    background:
        radial-gradient(60% 50% at 50% 46%, var(--sg-sb-glow), transparent 72%),
        radial-gradient(50% 40% at 100% 100%, var(--sg-sb-accent-soft), transparent 70%),
        linear-gradient(160deg, var(--sg-sb-bg) 0%, var(--sg-sb-bg-deep) 78%);
}

/* Trame d'étoiles très discrète sur tout le volet */
.sg-scene::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--sg-pattern);
    background-size: 84px 84px;
    opacity: .45;
    -webkit-mask-image: radial-gradient(ellipse at 50% 45%, transparent 22%, #000 70%);
    mask-image: radial-gradient(ellipse at 50% 45%, transparent 22%, #000 70%);
    pointer-events: none;
}

/* Liseré or sur le bord droit, à la jonction des deux volets */
.sg-scene::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, transparent, var(--sg-sb-accent) 30%, var(--sg-sb-accent) 70%, transparent);
    opacity: .7;
}

.sg-scene > * {
    position: relative;
    z-index: 1;
}

/* Marque */
.sg-scene__brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    animation: sg-fade 600ms var(--sg-ease-out) both;
}

.sg-scene__medallion {
    display: grid;
    flex: none;
    place-items: center;
    width: 52px;
    height: 52px;
    background: var(--sg-sb-brand-bg);
    border-radius: 15px;
    box-shadow: 0 0 0 1px var(--sg-sb-accent), 0 0 0 5px var(--sg-sb-accent-soft), 0 10px 24px rgba(0, 0, 0, .3);
}

.sg-scene__medallion img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.sg-scene__name {
    display: block;
    font-family: var(--sg-font-sans);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.05;
    color: var(--sg-sb-text-strong);
    letter-spacing: -.01em;
}

.sg-scene__tagline {
    display: block;
    margin-top: 5px;
    font-size: .625rem;
    font-weight: 700;
    color: var(--sg-sb-accent);
    letter-spacing: .24em;
    text-transform: uppercase;
}

/* Cœur de la scène : rosace + Talbiya */
.sg-scene__heart {
    position: relative;
    display: grid;
    flex: 1 1 auto;
    place-items: center;
    padding: 24px 0;
}

.sg-rosace {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(560px, 88%);
    aspect-ratio: 1;
    color: var(--sg-sb-accent);
    transform: translate(-50%, -50%);
    /* centre estompé : les lignes s'effacent derrière la calligraphie */
    -webkit-mask-image: radial-gradient(circle, transparent 0, transparent 30%, #000 62%);
    mask-image: radial-gradient(circle, transparent 0, transparent 30%, #000 62%);
    pointer-events: none;
    animation: sg-fade 1200ms var(--sg-ease-out) both;
}

.sg-rosace svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.sg-rosace__outer {
    opacity: .3;
    animation: sg-turn 240s linear infinite;
}

.sg-rosace__inner {
    opacity: .55;
    animation: sg-turn-back 160s linear infinite;
}

/* Petites étoiles qui scintillent autour de la rosace */
.sg-stars span {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--sg-sb-accent);
    border-radius: var(--sg-radius-full);
    box-shadow: 0 0 8px var(--sg-sb-accent);
    animation: sg-twinkle 4s var(--sg-ease) infinite;
}

.sg-talbiya {
    position: relative;
    z-index: 2;  /* au-dessus des étoiles */
    max-width: 30rem;
    text-align: center;
    animation: sg-rise 800ms 200ms var(--sg-ease-out) both;
}

.sg-talbiya__ar {
    margin: 0;
    font-family: "Amiri", "Scheherazade New", "Traditional Arabic", serif;
    font-size: clamp(2.5rem, 1.4rem + 3vw, 4.25rem);
    font-weight: 700;
    line-height: 1.5;
    color: var(--sg-sb-accent);
    text-shadow: 0 6px 30px rgba(0, 0, 0, .35);
}

.sg-talbiya__fr {
    margin: 4px 0 0;
    font-family: var(--sg-font-sans);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--sg-sb-text-strong);
    letter-spacing: .04em;
    opacity: .9;
}

.sg-talbiya__rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 22px auto 0;
    color: var(--sg-sb-accent);
}

.sg-talbiya__rule::before,
.sg-talbiya__rule::after {
    content: "";
    width: 56px;
    height: 1px;
    background: currentColor;
    opacity: .6;
}

.sg-talbiya__rule svg {
    width: 14px;
    height: 14px;
}

/* Présentation du logiciel : carte de verre sous la Talbiya, mots-clés en or */
.sg-talbiya__card {
    margin: 22px auto 0;
    padding: 18px 24px 20px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--sg-sb-accent-line);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.sg-talbiya__lead {
    margin: 12px 0 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--sg-sb-text-strong);
}

.sg-talbiya__lead strong {
    font-weight: 700;
    color: var(--sg-sb-accent);
}

/* Pastille de version : point qui pulse doucement */
.sg-version {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 26px;
    padding: 0 12px;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--sg-sb-on-accent);
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--sg-sb-accent);
    border-radius: var(--sg-radius-full);
}

.sg-version__dot {
    position: relative;
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: var(--sg-radius-full);
}

.sg-version__dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 1.5px solid currentColor;
    border-radius: var(--sg-radius-full);
    opacity: 0;
    animation: sg-pulse 2.4s var(--sg-ease-out) infinite;
}

@keyframes sg-pulse {
    0% { opacity: .8; transform: scale(.6); }
    100% { opacity: 0; transform: scale(1.8); }
}

/* Pied de scène : modules en pastilles de verre */
.sg-scene__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    animation: sg-rise 700ms 400ms var(--sg-ease-out) both;
}

.sg-scene__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sg-scene__chips li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px 0 10px;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--sg-sb-text-strong);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--sg-sb-border);
    border-radius: var(--sg-radius-full);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.sg-scene__chips svg {
    width: 15px;
    height: 15px;
    color: var(--sg-sb-accent);
}

.sg-scene__copy {
    font-size: var(--sg-fs-caption);
    color: var(--sg-sb-muted);
}

/* ===== Volet formulaire ===== */
.sg-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 28px 56px;
    background: var(--sg-surface-100);
}

.sg-panel__top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

/* Marque du volet formulaire : visible seulement quand la scène est masquée */
.sg-panel__brand {
    display: none;
    align-items: center;
    gap: 12px;
    margin-right: auto;
}

.sg-panel__brand img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 0 0 1px var(--sg-brand-gold);
}

.sg-panel__brand strong {
    display: block;
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--sg-brand-green);
    line-height: 1.1;
}

.sg-panel__brand small {
    display: block;
    font-size: .5625rem;
    font-weight: 700;
    color: var(--sg-brand-gold);
    letter-spacing: .22em;
    text-transform: uppercase;
}

.sg-theme-btn {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--sg-ink-muted);
    background: var(--sg-surface-200);
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    cursor: pointer;
    transition: background var(--sg-t-fast), color var(--sg-t-fast), transform var(--sg-t-fast);
}

.sg-theme-btn:hover {
    color: var(--sg-brand-green);
    background: var(--sg-brand-green-soft);
}

.sg-theme-btn:active {
    transform: scale(.92);
}

.sg-theme-btn svg {
    width: 18px;
    height: 18px;
}

.sg-theme-btn .is-sun,
:root[data-theme="dark"] .sg-theme-btn .is-moon {
    display: none;
}

:root[data-theme="dark"] .sg-theme-btn .is-sun {
    display: block;
}

.sg-panel__body {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
}

.sg-form {
    width: 100%;
    max-width: 400px;
    animation: sg-rise 700ms 120ms var(--sg-ease-out) both;
}

.sg-form.has-error {
    animation: sg-rise 700ms 120ms var(--sg-ease-out) both, sg-shake 420ms 820ms var(--sg-ease) both;
}

.sg-form__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--sg-brand-gold);
    letter-spacing: .16em;
    text-transform: uppercase;
}

.sg-form__kicker::before {
    content: "";
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: var(--sg-radius-full);
}

.sg-form__title {
    margin: 0;
    font-family: var(--sg-font-sans);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--sg-ink);
    letter-spacing: -.025em;
}

.sg-form__sub {
    margin: 8px 0 28px;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--sg-ink-muted);
}

.sg-form__alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 22px;
    padding: 12px 14px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sg-danger);
    background: var(--sg-danger-soft);
    border: 1px solid color-mix(in srgb, var(--sg-danger) 25%, transparent);
    border-radius: 12px;
}

.sg-form__alert svg {
    flex: none;
    width: 17px;
    height: 17px;
}

.sg-form__alert.is-success {
    color: var(--sg-success);
    background: var(--sg-success-soft);
    border-color: color-mix(in srgb, var(--sg-success) 25%, transparent);
}

.sg-field {
    margin-bottom: 18px;
}

.sg-field__label {
    display: block;
    margin-bottom: 6px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--sg-ink);
}

.sg-field__control {
    position: relative;
}

.sg-field__control > svg {
    position: absolute;
    top: 50%;
    left: 16px;
    width: 18px;
    height: 18px;
    color: var(--sg-ink-faint);
    transform: translateY(-50%);
    transition: color var(--sg-t-fast);
    pointer-events: none;
}

.sg-field__input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 46px 0 44px;
    font-family: var(--sg-font-sans);
    font-size: .9375rem;
    font-weight: 500;
    color: var(--sg-ink);
    background: var(--sg-surface-200);
    border: 1.5px solid transparent;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px var(--sg-border);
    transition: border-color var(--sg-t-fast), box-shadow var(--sg-t), background var(--sg-t-fast);
}

.sg-field__input::placeholder {
    font-weight: 400;
    color: var(--sg-ink-faint);
}

.sg-field__input:hover {
    box-shadow: inset 0 0 0 1px var(--sg-ink-faint);
}

.sg-field__input:focus {
    background: var(--sg-surface-100);
    border-color: var(--sg-brand-green);
    box-shadow: 0 0 0 5px rgba(var(--sg-brand-green-rgb), .12);
    outline: 0;
}

.sg-field__input.is-invalid {
    border-color: var(--sg-danger);
    box-shadow: none;
}

.sg-field__control:focus-within > svg {
    color: var(--sg-brand-green);
}

.sg-field__reveal {
    position: absolute;
    top: 50%;
    right: 7px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--sg-ink-faint);
    background: transparent;
    border: 0;
    border-radius: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    transition: background var(--sg-t-fast), color var(--sg-t-fast);
}

.sg-field__reveal:hover {
    color: var(--sg-ink);
    background: var(--sg-surface-300);
}

.sg-field__reveal svg {
    width: 18px;
    height: 18px;
}

.sg-field__reveal .is-off,
.sg-field__reveal[aria-pressed="true"] .is-on {
    display: none;
}

.sg-field__reveal[aria-pressed="true"] .is-off {
    display: block;
}

.sg-field__caps {
    display: none;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: var(--sg-fs-caption);
    font-weight: 600;
    color: var(--sg-warning);
}

.sg-field__caps.is-on {
    display: flex;
}

.sg-field__caps svg {
    width: 14px;
    height: 14px;
}

.sg-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    margin-top: 24px;
    overflow: hidden;
    font-family: var(--sg-font-sans);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--sg-on-fill);
    letter-spacing: .01em;
    background: linear-gradient(180deg, color-mix(in srgb, var(--sg-brand-green) 88%, #FFFFFF), var(--sg-brand-green));
    border: 0;
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 20px rgba(var(--sg-brand-green-rgb), .26);
    cursor: pointer;
    transition: box-shadow var(--sg-t), transform var(--sg-t-fast), filter var(--sg-t-fast);
}

/* Reflet qui traverse le bouton au survol */
.sg-submit::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
    transform: skewX(-18deg);
    transition: left 700ms var(--sg-ease-out);
}

.sg-submit:hover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 16px 32px rgba(var(--sg-brand-green-rgb), .36);
    transform: translateY(-1px);
}

.sg-submit:hover::after {
    left: 120%;
}

.sg-submit:active {
    transform: translateY(1px);
    filter: brightness(.96);
}

.sg-submit:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 5px rgba(var(--sg-brand-green-rgb), .3);
}

.sg-submit svg {
    width: 18px;
    height: 18px;
    transition: transform var(--sg-t);
}

.sg-submit:hover svg {
    transform: translateX(4px);
}

.sg-submit__spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--sg-radius-full);
    animation: sg-spin 700ms linear infinite;
}

.sg-submit.is-loading {
    cursor: progress;
    opacity: .88;
}

.sg-submit.is-loading .sg-submit__spinner {
    display: block;
}

.sg-submit.is-loading .sg-submit__arrow {
    display: none;
}

.sg-form__help {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0 0;
    padding: 12px 14px;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--sg-ink-muted);
    background: var(--sg-surface-200);
    border: 1px solid var(--sg-border);
    border-radius: 10px;
}

.sg-form__help svg {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--sg-brand-gold);
}

.sg-panel__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 16px;
    font-size: var(--sg-fs-caption);
    color: var(--sg-ink-faint);
}

.sg-panel__foot strong {
    font-weight: 700;
    color: var(--sg-ink-muted);
}

/* Écran moyen : la scène se resserre */
@media (max-width: 1199.98px) {
    body.sg-auth {
        grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
    }

    .sg-scene {
        padding: 32px 36px 28px;
    }

    .sg-scene__chips {
        display: none;
    }

    .sg-panel {
        padding: 24px 40px;
    }
}

/* Tablette et téléphone : le formulaire seul, la marque passe en tête */
@media (max-width: 899.98px) {
    body.sg-auth {
        grid-template-columns: minmax(0, 1fr);
    }

    .sg-scene {
        display: none;
    }

    .sg-panel {
        padding: 20px 22px;
        background:
            radial-gradient(120% 60% at 50% -10%, var(--sg-brand-green-soft), transparent 60%),
            var(--sg-surface-100);
    }

    .sg-panel__brand {
        display: flex;
    }

    .sg-form__title {
        font-size: 1.875rem;
    }

    .sg-panel__foot {
        justify-content: center;
        text-align: center;
    }
}

/* ===== Scène animée : médaillon du logo, orbite de l'avion, particules ===== */
.sg-orbit {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

/* Anneau pointillé de l'orbite */
.sg-orbit__ring {
    position: absolute;
    inset: 0;
    border: 1.5px dashed var(--sg-sb-accent-line);
    border-radius: var(--sg-radius-full);
}

.sg-orbit__ring--inner {
    inset: 46px;
    border-style: solid;
    border-color: var(--sg-sb-border);
}

/* Trainée dorée + avion : tout le bras tourne, l'avion reste tangent à l'orbite */
.sg-orbit__arm {
    position: absolute;
    inset: 0;
    animation: sg-turn 9s linear infinite;
}

.sg-orbit__trail {
    position: absolute;
    inset: -1px;
    border-radius: var(--sg-radius-full);
    background: conic-gradient(from 0deg, transparent 0deg, transparent 250deg, var(--sg-sb-accent-soft) 300deg, var(--sg-sb-accent) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}

.sg-orbit__plane {
    position: absolute;
    top: -15px;
    left: 50%;
    width: 30px;
    height: 30px;
    margin-left: -15px;
    color: var(--sg-sb-accent);
    filter: drop-shadow(0 0 8px var(--sg-sb-accent));
}

.sg-orbit__plane svg {
    width: 100%;
    height: 100%;
    transform: rotate(90deg);
}

/* Médaillon central : flotte doucement, halo qui respire */
.sg-orbit__core {
    position: absolute;
    inset: 70px;
    display: grid;
    place-items: center;
    animation: sg-float 6s var(--sg-ease) infinite alternate;
}

.sg-orbit__core::before {
    content: "";
    position: absolute;
    inset: -26px;
    background: radial-gradient(circle, var(--sg-sb-accent-soft), transparent 70%);
    border-radius: var(--sg-radius-full);
    animation: sg-breathe 4s var(--sg-ease) infinite alternate;
}

.sg-orbit__medal {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: var(--sg-sb-brand-bg);
    border-radius: var(--sg-radius-full);
    box-shadow: 0 0 0 2px var(--sg-sb-accent), 0 0 0 10px var(--sg-sb-accent-soft), 0 24px 50px rgba(0, 0, 0, .4);
}

.sg-orbit__medal {
    overflow: hidden;
}

.sg-orbit__medal img {
    width: 66%;
    height: 66%;
    object-fit: contain;
}

/* La rosace est centrée sur l'orbite et la déborde largement */
.sg-orbit .sg-rosace {
    width: 560px;
    -webkit-mask-image: radial-gradient(circle, transparent 0, transparent 22%, #000 48%);
    mask-image: radial-gradient(circle, transparent 0, transparent 22%, #000 48%);
}

/* Identifiants refusés : bordure rouge sur les deux champs, le message est dans le bandeau */
.sg-field.is-flagged .sg-field__input {
    border-color: var(--sg-danger);
}

/* Trois repères fixes sur l'orbite : les étapes du pèlerin */
.sg-orbit__stop {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px 0 6px;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--sg-sb-text-strong);
    white-space: nowrap;
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--sg-sb-border);
    border-radius: var(--sg-radius-full);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    animation: sg-rise 600ms var(--sg-ease-out) both;
}

.sg-orbit__stop i {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-style: normal;
    color: var(--sg-sb-on-accent);
    background: var(--sg-sb-accent);
    border-radius: var(--sg-radius-full);
}

.sg-orbit__stop--1 { top: 18px; left: -46px; animation-delay: 500ms; }
.sg-orbit__stop--2 { top: 128px; right: -84px; animation-delay: 650ms; }
.sg-orbit__stop--3 { bottom: 14px; left: -30px; animation-delay: 800ms; }

@keyframes sg-float {
    from { transform: translateY(-6px); }
    to { transform: translateY(6px); }
}

@keyframes sg-breathe {
    from { opacity: .5; transform: scale(.94); }
    to { opacity: 1; transform: scale(1.06); }
}

/* Particules dorées qui montent lentement dans la scène */
.sg-particles span {
    position: absolute;
    bottom: -10px;
    width: 4px;
    height: 4px;
    background: var(--sg-sb-accent);
    border-radius: var(--sg-radius-full);
    box-shadow: 0 0 10px var(--sg-sb-accent);
    opacity: 0;
    animation: sg-rise-up linear infinite;
}

@keyframes sg-rise-up {
    0% { opacity: 0; transform: translateY(0) scale(.6); }
    15% { opacity: .9; }
    85% { opacity: .6; }
    100% { opacity: 0; transform: translateY(-90vh) scale(1); }
}

.sg-scene__title {
    margin: 34px 0 0;
    font-family: var(--sg-font-sans);
    font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.25rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--sg-sb-text-strong);
    text-align: center;
    letter-spacing: -.025em;
    animation: sg-rise 700ms 250ms var(--sg-ease-out) both;
}

.sg-scene__title span {
    background: linear-gradient(90deg, var(--sg-sb-accent), #F1D48A, var(--sg-sb-accent));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: sg-shine 5s linear infinite;
}

@keyframes sg-shine {
    to { background-position: -200% 0; }
}

/* ===== Messages de la page de connexion ===== */
.sg-form__alert.is-info {
    color: var(--sg-info);
    background: var(--sg-info-soft);
    border-color: color-mix(in srgb, var(--sg-info) 25%, transparent);
}

.sg-form__alert.is-lock {
    color: var(--sg-warning);
    background: var(--sg-warning-soft);
    border-color: color-mix(in srgb, var(--sg-warning) 30%, transparent);
}

.sg-form__alert {
    animation: sg-rise 360ms var(--sg-ease-out) both;
}

.sg-form__alert strong {
    font-family: var(--sg-font-mono);
}

/* Message sous un champ */
.sg-field__error {
    display: none;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: var(--sg-fs-caption);
    font-weight: 600;
    color: var(--sg-danger);
}

.sg-field__error svg {
    flex: none;
    width: 14px;
    height: 14px;
}

.sg-field.is-invalid .sg-field__error {
    display: flex;
    animation: sg-rise 260ms var(--sg-ease-out) both;
}

.sg-field.is-invalid .sg-field__input {
    border-color: var(--sg-danger);
    box-shadow: 0 0 0 4px var(--sg-danger-soft);
}

.sg-field.is-invalid .sg-field__control > svg {
    color: var(--sg-danger);
}

.sg-field.is-shaking .sg-field__control {
    animation: sg-shake 380ms var(--sg-ease) both;
}

/* Champ valide : coche verte discrète */
.sg-field__ok {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 18px;
    height: 18px;
    color: var(--sg-success);
    opacity: 0;
    transform: translateY(-50%) scale(.6);
    transition: opacity var(--sg-t), transform var(--sg-t);
    pointer-events: none;
}

.sg-field.is-valid .sg-field__ok {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.sg-submit:disabled {
    cursor: not-allowed;
}

.sg-submit.is-locked {
    background: var(--sg-ink-faint);
    box-shadow: none;
    opacity: .75;
}

@media (max-width: 1199.98px) {
    .sg-orbit__stop {
        display: none;
    }
}

@media (max-height: 760px) {
    .sg-orbit {
        transform: scale(.82);
    }

    .sg-scene__title {
        margin-top: 12px;
    }
}


/* ===== Finitions de la page de connexion ===== */

/* Sélection de texte aux couleurs de la marque */
body.sg-auth ::selection {
    color: var(--sg-ink);
    background: var(--sg-brand-gold-soft);
}

/* Remplissage automatique du navigateur : pas de fond bleu ou jaune imposé */
.sg-field__input:-webkit-autofill,
.sg-field__input:-webkit-autofill:hover,
.sg-field__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--sg-ink);
    caret-color: var(--sg-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--sg-surface-200) inset;
    transition: background-color 9999s ease-out;
}

/* Volet formulaire : halo vert très doux en haut à droite, pour ne pas laisser un blanc plat */
.sg-panel::before {
    content: "";
    position: absolute;
    top: -160px;
    right: -160px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, var(--sg-brand-green-soft), transparent 68%);
    pointer-events: none;
}

.sg-panel > * {
    position: relative;
}

/* Le formulaire se compose ligne par ligne */
.sg-form > *,
.sg-form form > * {
    animation: sg-rise 560ms var(--sg-ease-out) both;
}

.sg-form > :nth-child(1) { animation-delay: 80ms; }
.sg-form > :nth-child(2) { animation-delay: 140ms; }
.sg-form > :nth-child(3) { animation-delay: 200ms; }
.sg-form > :nth-child(4) { animation-delay: 240ms; }
.sg-form form > :nth-child(2) { animation-delay: 280ms; }
.sg-form form > :nth-child(3) { animation-delay: 340ms; }
.sg-form form > :nth-child(4) { animation-delay: 400ms; }
.sg-form > :nth-child(6) { animation-delay: 460ms; }

/* Le champ actif se détache légèrement */
.sg-field__control {
    transition: transform var(--sg-t);
}

.sg-field__control:focus-within {
    transform: translateY(-1px);
}

/* Bandeau d'accueil sur téléphone et tablette (la scène y est masquée) */
.sg-panel__hero {
    display: none;
}

@media (max-width: 899.98px) {
    .sg-panel::before {
        display: none;
    }

    .sg-panel__top {
        display: none;
    }

    .sg-panel__hero {
        position: relative;
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 0 0 8px;
        padding: 18px;
        overflow: hidden;
        color: var(--sg-sb-text);
        background:
            radial-gradient(80% 120% at 100% 0%, var(--sg-sb-accent-soft), transparent 60%),
            linear-gradient(150deg, var(--sg-sb-bg), var(--sg-sb-bg-deep));
        border-radius: 18px;
        box-shadow: 0 14px 30px rgba(6, 20, 13, .22);
        animation: sg-rise 560ms var(--sg-ease-out) both;
    }

    .sg-panel__hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: var(--sg-pattern);
        background-size: 64px 64px;
        opacity: .5;
        pointer-events: none;
    }

    .sg-panel__hero > * {
        position: relative;
    }

    .sg-panel__hero-medal {
        display: grid;
        flex: none;
        place-items: center;
        width: 54px;
        height: 54px;
        background: #FFFFFF;
        border-radius: var(--sg-radius-full);
        box-shadow: 0 0 0 1.5px var(--sg-sb-accent), 0 0 0 5px var(--sg-sb-accent-soft);
        animation: sg-float 6s var(--sg-ease) infinite alternate;
    }

    .sg-panel__hero-medal img {
        width: 38px;
        height: 38px;
        object-fit: contain;
    }

    .sg-panel__hero-text {
        flex: 1 1 auto;
        min-width: 0;
    }

    .sg-panel__hero-title {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 800;
        line-height: 1.2;
        color: var(--sg-sb-text-strong);
        letter-spacing: -.01em;
    }

    .sg-panel__hero-title span {
        color: var(--sg-sb-accent);
        white-space: nowrap; /* « S-GAHO » ne se coupe jamais au tiret */
    }

    .sg-panel__hero-sub {
        margin: 3px 0 0;
        font-size: .75rem;
        color: var(--sg-sb-muted);
    }

    .sg-panel__hero .sg-theme-btn {
        flex: none;
        color: var(--sg-sb-text);
        background: var(--sg-sb-tile);
        border-color: var(--sg-sb-border);
    }

    .sg-panel__body {
        align-items: flex-start;
        padding-top: 20px;
    }
}

/* Mouvement réduit : les animations en boucle s'arrêtent net au lieu d'être accélérées */
@media (prefers-reduced-motion: reduce) {
    .sg-orbit__arm,
    .sg-orbit__core,
    .sg-orbit__core::before,
    .sg-rosace__outer,
    .sg-rosace__inner,
    .sg-particles span,
    .sg-scene__title span,
    .sg-version__dot::after,
    .sg-panel__hero-medal,
    body.sg-auth::before {
        animation: none !important;
    }

    .sg-particles {
        display: none;
    }
}


/* --------------------------------------------------------------------------
   11. IMPRESSION, MOUVEMENT RÉDUIT
   -------------------------------------------------------------------------- */
@media print {
    .sg-sidebar,
    .sg-topbar,
    .sg-overlay,
    .sg-footer {
        display: none !important;
    }

    .sg-main {
        margin-left: 0;
        padding-top: 0;
    }
}

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

/* ===== Tableaux plus sobres et formulaires mieux aérés (retouche finale) ===== */
table.sg-table--registre thead th { height: 44px; font-size: .6875rem; letter-spacing: .07em; }
table.sg-table--registre tbody td { height: 62px; font-size: .84375rem; }
table.sg-table--registre .sg-col-num { font-size: .8125rem; }
table.sg-table--registre .sg-monogram { width: 38px; height: 38px; font-size: .78125rem; border-radius: 10px; }
table.sg-table--registre .sg-entity { gap: 11px; }
table.sg-table--registre .sg-entity__name { font-size: .8125rem; font-weight: 650; letter-spacing: .015em; }
table.sg-table--registre .sg-entity__sub,
table.sg-table--registre .sg-cell-sub { margin-top: 1px; font-size: .75rem; letter-spacing: .01em; }
table.sg-table--registre .sg-cell-main { font-size: .84375rem; font-weight: 500; letter-spacing: 0; }
table.sg-table--registre .sg-statut { height: 26px; padding: 0 10px; font-size: .75rem; }
table.sg-table--registre .sg-etat,
body.app table.sg-table--registre .sg-btn-consulter { font-size: .75rem; }
body.app table.sg-table--registre .sg-row-btn { width: 32px; height: 32px; font-size: 14px; }
.sg-sexe__ico { width: 30px; height: 30px; font-size: 13px; border-radius: 9px; }

@media (max-width: 1499.98px) {
    table.sg-table--registre tbody td { height: 58px; font-size: .8125rem; }
    table.sg-table--registre .sg-entity__name,
    table.sg-table--registre .sg-cell-main { font-size: .78125rem; }
    table.sg-table--registre .sg-entity__sub,
    table.sg-table--registre .sg-cell-sub { font-size: .71875rem; }
    table.sg-table--registre .sg-monogram { width: 34px; height: 34px; font-size: .75rem; }
    body.app table.sg-table--registre tbody .sg-row-btn { width: 30px; height: 30px; font-size: 13px; }
}

/* Champs : plus d'air entre les colonnes et entre les lignes, libellé bien détaché */
.sg-form-grid { gap: 22px 28px; }
.sg-form-grid--3 { gap: 22px 28px; }
body.app .sg-modal .sg-champ__label { margin-bottom: 8px; }
.sg-fsec__head { margin-bottom: 22px; }
.sg-fsec + .sg-fsec { margin-top: 36px; }
@media (max-width: 1199.98px) {
    .sg-form-grid,
    .sg-form-grid--3 { gap: 18px 20px; }
}
/* ===== Vue détaillée, en-têtes, indicateurs et analyses : mêmes tailles sobres que les tableaux ===== */
body.app .sg-detail .sg-detail__nom { margin: 2px 0 8px; font-size: 1.375rem; font-weight: 700; }
.sg-detail__dossier { font-size: .6875rem; }
.sg-detail__bandeau { gap: 18px; padding: 22px 26px 52px; }
.sg-detail__avatar { width: 72px; height: 72px; font-size: 1.5rem; }
.sg-detail__puce { height: 24px; padding: 0 9px; font-size: .71875rem; }
body.app .sg-detail__contact { height: 28px; padding: 0 11px; font-size: .75rem; }
.sg-detail__contacts { margin-top: 10px; }
body.app .sg-detail__btn { min-width: 36px; height: 36px; font-size: .78125rem; }
body.app .sg-detail__btn--or { padding: 0 15px; }
.sg-detail__stat { padding: 13px 15px; }
.sg-detail__tuile { width: 38px; height: 38px; font-size: 15px; }
.sg-detail__stat small { font-size: .71875rem; }
.sg-detail__stat strong { font-size: 1.0625rem; }
body.app .sg-detail__onglet { height: 44px; font-size: .8125rem; }
.sg-detail__bloc { padding: 15px 17px; }
.sg-detail__bloc h6 { font-size: .84375rem; }
.sg-detail__bloc h6 > span { width: 26px; height: 26px; font-size: 12px; }
.sg-detail__bloc dl > div { padding: 6px 0; }
.sg-detail__bloc dt { font-size: .75rem; }
.sg-detail__bloc dd { font-size: .8125rem; }
.sg-detail__table td { padding: 9px 12px; font-size: .78125rem; }
.sg-detail__table--entete thead th { padding: 9px 12px; font-size: .65625rem; }

.sg-hero__titre { font-size: 1.5rem; }
.sg-hero__sub { font-size: .8125rem; }
body.app .sg-hero__actions .btn { height: 40px; font-size: .8125rem; }
.sg-kpi__icone { width: 44px; height: 44px; font-size: 17px; }
.sg-kpi__libelle { font-size: .75rem; }
.sg-kpi__valeur { font-size: 1.5rem; }
.sg-kpi__note { font-size: .71875rem; }
.sg-registre__titre { font-size: 1rem; }
.sg-registre__desc { font-size: .78125rem; }
body.app .sg-registre .sg-seg { height: 34px; font-size: .8125rem; }
body.app .sg-registre .sg-search .form-control,
body.app .sg-registre select.sg-select,
body.app .sg-btn-filtres { min-height: 40px; height: 40px; font-size: .8125rem; }
.sg-pagination__compte,
.sg-pagination__size label { font-size: .8125rem; }
body.app .sg-pages .sg-page { min-width: 34px; height: 34px; font-size: .8125rem; }
body.app .sg-pagination__size select.sg-select { height: 34px; min-height: 34px; }

.sg-an__entete-ico { width: 44px; height: 44px; font-size: 17px; }
.sg-an__entete-texte h2 { font-size: 1.0625rem; }
.sg-an__chiffre strong { font-size: 1.1875rem; }
.sg-an__chiffre small { font-size: .71875rem; }
body.app .sg-an__item { padding: 7px 9px; font-size: .8125rem; }
.sg-an__item-ico { width: 30px; height: 30px; font-size: 12px; }
.sg-an__barre-tete { font-size: .78125rem; }.sg-an__table { font-size: .78125rem; }
.sg-an__table thead th { padding: 10px 9px; font-size: .65625rem; letter-spacing: .05em; }
.sg-an__table tbody td { padding: 8px 9px; }
.sg-an__nom { font-size: .78125rem; font-weight: 650; }
.sg-an__dossier { font-size: .6875rem; }
.sg-an__table .sg-statut { height: 24px; padding: 0 8px; font-size: .6875rem; white-space: nowrap; }
/* ===== Statut voyage par voyage (un client peut souscrire à plusieurs voyages) ===== */
.sg-statut-voyage { align-items: flex-start; gap: 3px; }
.sg-statut-voyage__pour {
    max-width: 150px;
    overflow: hidden;
    font-size: .6875rem;
    color: var(--sg-ink-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sg-statut-voyage__pour b { margin-left: 2px; font-weight: 700; color: var(--sg-or-fonce); }

.sg-vstat { display: flex; flex-direction: column; gap: 5px; }
.sg-vstat__ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 210px; }
.sg-vstat__ligne.is-annule { opacity: .55; }
.sg-vstat__ligne.is-annule .sg-vstat__voyage span { text-decoration: line-through; }
.sg-vstat__voyage { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; font-weight: 600; color: var(--sg-ink); white-space: nowrap; }
.sg-vstat__voyage i { font-size: 11px; color: var(--sg-or-fonce); }
.sg-vstat__voyage small { font-size: .6875rem; font-weight: 500; color: var(--sg-ink-faint); }
.sg-vstat .sg-statut { flex: none; }

/* Onglets de la vue détaillée : tableaux un peu plus lisibles */
.sg-detail__table td,
.sg-detail__table--entete tbody td { padding: 11px 14px; font-size: .84375rem; }
.sg-detail__table--entete thead th { padding: 10px 14px; font-size: .6875rem; }
.sg-detail__table .sg-an__nom { font-size: .84375rem; }
.sg-detail__table .sg-an__dossier { font-size: .71875rem; }
.sg-detail__table--entete .sg-statut { height: 25px; padding: 0 10px; font-size: .75rem; }
.sg-detail__table td.is-rouge { color: var(--sg-danger); }.sg-vstat > .sg-statut { align-self: flex-start; }


/* ==========================================================================
   VOYAGES : prochain départ, cartes d'embarquement, panneau de pilotage
   ========================================================================== */
:root {
    --sg-ton-hadj: #06402A;   --sg-ton-hadj-2: #0B6B45;
    --sg-ton-oumra: #1F4E79;  --sg-ton-oumra-2: #2B6CA3;
    --sg-ton-tourisme: #8A5A12; --sg-ton-tourisme-2: #C48A2C;
}

/* --- Prochain départ --- */
.sg-vg-spot {
    --ton: var(--sg-ton-hadj); --ton-2: var(--sg-ton-hadj-2);
    position: relative;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) minmax(300px, 380px);
    gap: 28px;
    align-items: center;
    margin-bottom: 22px;
    padding: 24px 28px;
    overflow: hidden;
    color: #FFFFFF;
    background: radial-gradient(120% 140% at 100% 0%, rgba(212, 163, 57, .22), transparent 55%), linear-gradient(120deg, var(--ton) 0%, var(--ton-2) 100%);
    border-radius: 20px;
    box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--ton) 80%, transparent);
}
.sg-vg-spot--oumra { --ton: var(--sg-ton-oumra); --ton-2: var(--sg-ton-oumra-2); }
.sg-vg-spot--tourisme { --ton: var(--sg-ton-tourisme); --ton-2: var(--sg-ton-tourisme-2); }
.sg-vg-spot::before {
    position: absolute; inset: 0; content: ""; pointer-events: none;
    background-image: var(--sg-pattern); background-size: 84px 84px; opacity: .35;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%); mask-image: linear-gradient(90deg, #000, transparent 70%);
}
.sg-vg-spot > * { position: relative; }
.sg-vg-spot__compte {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 18px 10px; text-align: center;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 18px;
    backdrop-filter: blur(4px);
}
.sg-vg-spot__sur { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #F2CF7E; }
.sg-vg-spot__j { display: flex; align-items: baseline; gap: 6px; }
.sg-vg-spot__j strong { font-size: 3.25rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sg-vg-spot__j small { font-size: .9375rem; font-weight: 600; opacity: .85; }
.sg-vg-spot__hms { font-size: .8125rem; opacity: .85; font-variant-numeric: tabular-nums; }
.sg-vg-spot__hms b { font-weight: 700; }
.sg-vg-spot__etiquette { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: .75rem; font-weight: 600; color: #F2CF7E; }
.sg-vg-spot__etiquette .sg-num { padding: 1px 7px; color: #FFFFFF; background: rgba(255, 255, 255, .12); border-radius: 6px; }
body.app .sg-vg-spot__nom { margin: 0 0 6px; font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; color: #FFFFFF; }
.sg-vg-spot__route { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: .9375rem; font-weight: 600; }
.sg-vg-spot__route i { font-size: 13px; color: #F2CF7E; }
.sg-vg-spot__details { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 14px; font-size: .78125rem; opacity: .9; }
.sg-vg-spot__details i { margin-right: 5px; opacity: .8; }
body.app .sg-vg-spot__btn {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px;
    font-size: .8125rem; font-weight: 700; color: #2B1D00;
    background: var(--sg-or-degrade); border: 0; border-radius: 10px;
    box-shadow: 0 8px 18px -8px rgba(212, 163, 57, .8); transition: transform 200ms var(--sg-ease-out);
}
body.app .sg-vg-spot__btn:hover { transform: translateX(3px); }
.sg-vg-spot__prep { padding: 14px 16px; background: rgba(0, 0, 0, .14); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; }
.sg-vg-spot__prep-titre { margin: 0 0 10px; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #F2CF7E; }
.sg-vg-spot__anneaux { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sg-vg-spot__prets { margin: 10px 0 0; font-size: .75rem; opacity: .9; }
.sg-vg-spot__prets strong { font-size: .9375rem; color: #F2CF7E; }

/* Anneau de progression (conic-gradient) */
.sg-anneau { --p: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.sg-anneau__rond {
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
    background: radial-gradient(closest-side, var(--anneau-fond, rgba(6, 40, 26, .92)) 76%, transparent 78% 100%),
        conic-gradient(var(--anneau-ton, #F2CF7E) calc(var(--p) * 1%), rgba(255, 255, 255, .16) 0);
    font-size: 15px; color: var(--anneau-ton, #F2CF7E);
}
.sg-anneau strong { margin-top: 4px; font-size: .8125rem; font-weight: 800; }
.sg-anneau small { font-size: .6875rem; opacity: .85; }

/* --- Barre : phases, catégories, filtres --- */
.sg-vg-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.sg-vg-phases { display: inline-flex; gap: 4px; padding: 4px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 14px; box-shadow: var(--sg-shadow-xs); }
body.app .sg-vg-phase {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
    font-size: .8125rem; font-weight: 600; color: var(--sg-ink-muted); text-decoration: none; border-radius: 10px; transition: background 160ms, color 160ms;
}
body.app .sg-vg-phase span { min-width: 22px; padding: 1px 7px; font-size: .6875rem; font-weight: 700; text-align: center; background: var(--sg-well-bg); border-radius: 999px; }
body.app .sg-vg-phase:hover { color: var(--sg-ink); background: var(--sg-well-bg); }
body.app .sg-vg-phase.is-actif { color: #FFFFFF; background: linear-gradient(145deg, #0B6B45, #06402A); box-shadow: 0 6px 14px -6px rgba(6, 64, 42, .7); }
body.app .sg-vg-phase.is-actif span { color: #2B1D00; background: #F2CF7E; }
.sg-vg-filtres { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.sg-vg-filtres .sg-search { width: 210px; }
.sg-vg-filtres select.sg-select { width: auto; min-width: 150px; height: 36px; }
.sg-vg-cats { display: inline-flex; gap: 6px; }
body.app .sg-vg-cat {
    height: 32px; padding: 0 13px; display: inline-flex; align-items: center;
    font-size: .78125rem; font-weight: 600; color: var(--sg-ink-muted); text-decoration: none;
    background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 999px;
}
body.app .sg-vg-cat:hover { color: var(--sg-ink); border-color: color-mix(in srgb, var(--sg-or-fonce) 40%, var(--sg-border)); }
body.app .sg-vg-cat.is-actif { color: var(--sg-or-fonce); background: var(--sg-brand-gold-soft); border-color: color-mix(in srgb, #D4A339 55%, transparent); }

/* --- Cartes d'embarquement --- */
.sg-billets { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 20px; }
.sg-billet {
    --ton: var(--sg-ton-tourisme); --ton-2: var(--sg-ton-tourisme-2); --trou: var(--sg-page-bg);
    position: relative; display: flex; flex-direction: column;
    background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 20, .04), 0 10px 26px -18px rgba(16, 24, 20, .35);
    cursor: pointer; outline: none;
    transition: transform 260ms var(--sg-ease-out), box-shadow 260ms var(--sg-ease-out), border-color 200ms;
    animation: sg-fade-up 480ms var(--sg-ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms);
}
.sg-billet--hadj { --ton: var(--sg-ton-hadj); --ton-2: var(--sg-ton-hadj-2); }
.sg-billet--oumra { --ton: var(--sg-ton-oumra); --ton-2: var(--sg-ton-oumra-2); }
.sg-billet:hover, .sg-billet:focus-visible {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--ton) 35%, var(--sg-border));
    box-shadow: 0 2px 4px rgba(16, 24, 20, .05), 0 22px 40px -22px color-mix(in srgb, var(--ton) 70%, transparent);
}
.sg-billet:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ton) 35%, transparent); }
.sg-billet.is-termine, .sg-billet.is-annule { filter: saturate(.55); }
.sg-billet.is-termine:hover, .sg-billet.is-annule:hover { filter: none; }
.sg-billet__tete {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px 16px; color: #FFFFFF; overflow: hidden;
    background: linear-gradient(110deg, var(--ton) 0%, var(--ton-2) 100%); border-radius: 17px 17px 0 0;
}
.sg-billet__tete::after {
    position: absolute; inset: 0; content: ""; pointer-events: none;
    background-image: var(--sg-pattern); background-size: 64px 64px; opacity: .35;
}
.sg-billet__tete > * { position: relative; z-index: 1; }
.sg-billet__cat { display: inline-flex; align-items: center; gap: 7px; font-size: .78125rem; font-weight: 700; letter-spacing: .02em; }
.sg-billet__cat i { color: #F2CF7E; }
.sg-billet__cat em { margin-left: 4px; padding: 1px 7px; font-size: .6875rem; font-style: normal; font-weight: 600; background: rgba(255, 255, 255, .16); border-radius: 6px; }
.sg-billet__phase { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; font-size: .6875rem; font-weight: 700; color: #FFFFFF; background: rgba(255, 255, 255, .16); border-radius: 999px; white-space: nowrap; }
.sg-billet__phase.is-warning { color: #2B1D00; background: #F2CF7E; }
.sg-billet__phase.is-danger { background: #C0392B; }
.sg-billet__phase.is-gold { color: #2B1D00; background: linear-gradient(135deg, #F2CF7E, #D4A339); }
.sg-billet__corps { padding: 16px 18px 14px; }
body.app .sg-billet__nom { margin: 0 0 12px; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; color: var(--sg-ink); }
.sg-billet__trajet { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-bottom: 12px; }
.sg-billet__ville { display: flex; flex-direction: column; min-width: 0; }
.sg-billet__ville.is-arrivee { align-items: flex-end; text-align: right; }
.sg-billet__ville strong { font-size: 1.625rem; font-weight: 800; line-height: 1; letter-spacing: .02em; color: var(--ton); }
:root[data-theme="dark"] .sg-billet__ville strong { color: color-mix(in srgb, var(--ton-2) 60%, #FFFFFF); }
.sg-billet__ville small { max-width: 130px; margin-top: 3px; overflow: hidden; font-size: .71875rem; color: var(--sg-ink-muted); text-overflow: ellipsis; white-space: nowrap; }
.sg-billet__ligne { position: relative; height: 2px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ton) 45%, transparent) 0 6px, transparent 6px 11px); }
.sg-billet__ligne > span {
    position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 28px; height: 28px;
    font-size: 12px; color: #FFFFFF; background: var(--ton); border: 3px solid var(--sg-card-bg); border-radius: 50%;
    transform: translate(-50%, -50%); transition: left 600ms var(--sg-ease-out);
}
.sg-billet:hover .sg-billet__ligne > span { left: 62%; }
.sg-billet__dates { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin: 0 0 12px; padding: 10px 12px; background: var(--sg-well-bg); border-radius: 12px; }
.sg-billet__dates dt { font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-ink-faint); }
.sg-billet__dates dd { margin: 1px 0 0; font-size: .8125rem; font-weight: 700; color: var(--sg-ink); white-space: nowrap; }
.sg-billet__jauges { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sg-jauge { --p: 0%; display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: 5px; }
.sg-jauge__lib { font-size: .71875rem; font-weight: 600; color: var(--sg-ink-muted); }
.sg-jauge__lib i { margin-right: 4px; font-size: 10px; color: var(--ton); }
.sg-jauge strong { font-size: .8125rem; font-weight: 800; color: var(--sg-ink); font-variant-numeric: tabular-nums; }
.sg-jauge__barre { grid-column: 1 / -1; height: 6px; overflow: hidden; background: var(--sg-surface-300); border-radius: 999px; }
.sg-jauge__barre i { display: block; width: var(--p); height: 100%; background: linear-gradient(90deg, var(--ton-2), var(--ton)); border-radius: inherit; transition: width 800ms var(--sg-ease-out); }
.sg-jauge.is-or .sg-jauge__barre i { background: linear-gradient(90deg, #E0B556, #9A7322); }
.sg-billet__talon {
    position: relative; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px;
    margin-top: auto; padding: 12px 18px 14px; border-top: 2px dashed var(--sg-border);
}
.sg-billet__talon::before, .sg-billet__talon::after {
    position: absolute; top: -11px; width: 20px; height: 20px; content: ""; background: var(--trou); border: 1px solid var(--sg-border); border-radius: 50%;
}
.sg-billet__talon::before { left: -11px; clip-path: inset(0 0 0 50%); }
.sg-billet__talon::after { right: -11px; clip-path: inset(0 50% 0 0); }
.sg-billet__talon small { display: block; font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-ink-faint); }
.sg-billet__code strong { font-size: .8125rem; color: var(--sg-ink); }
.sg-billet__prix strong { font-size: .9375rem; font-weight: 800; color: var(--sg-or-fonce); white-space: nowrap; }
:root[data-theme="dark"] .sg-billet__prix strong { color: var(--sg-or-clair); }
.sg-billet__prix em { font-size: .6875rem; font-style: normal; font-weight: 600; }
.sg-billet__prep {
    --p: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
    background: radial-gradient(closest-side, var(--sg-card-bg) 74%, transparent 76% 100%), conic-gradient(var(--ton) calc(var(--p) * 1%), var(--sg-surface-300) 0);
}
.sg-billet__prep span { font-size: .6875rem; font-weight: 800; color: var(--sg-ink); }
.sg-billet__etat { display: grid; place-items: center; width: 30px; height: 30px; font-size: 12px; border-radius: 9px; color: var(--sg-ink-muted); background: var(--sg-well-bg); }
.sg-billet__etat.is-success { color: #1F7A4A; background: color-mix(in srgb, #1F7A4A 14%, transparent); }
.sg-billet__etat.is-gold { color: #9A7322; background: var(--sg-brand-gold-soft); }
.sg-billet__etat.is-danger { color: #C0392B; background: color-mix(in srgb, #C0392B 12%, transparent); }

/* Billet d'aperçu (fenêtre de saisie) */
.sg-billet--apercu { cursor: default; animation: none; --trou: transparent; }
.sg-billet--apercu:hover { transform: none; }
.sg-billet--apercu .sg-billet__talon { grid-template-columns: 1fr auto; }
.sg-billet__infos { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .75rem; color: var(--sg-ink-muted); }
.sg-billet__infos i { width: 16px; margin-right: 6px; color: var(--ton); text-align: center; }
.sg-saisie__carte .sg-billet { margin: 10px 0 14px; color: var(--sg-ink); text-align: left; }
.sg-carte__surtitre { margin: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #F2CF7E; text-align: center; }
.sg-carte__note { margin: 0; font-size: .71875rem; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.sg-carte__note i { margin-right: 5px; color: #F2CF7E; }

/* --- Panneau de pilotage (glisse depuis la droite) --- */
html.sg-sans-defilement { overflow: hidden; }
.sg-pilote { position: fixed; inset: 0; z-index: 1060; }
.sg-pilote__voile { position: absolute; inset: 0; background: rgba(3, 20, 12, .45); backdrop-filter: blur(2px); opacity: 0; transition: opacity 300ms; }
.sg-pilote__panneau {
    position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
    width: min(920px, 100vw); background: var(--sg-page-bg); box-shadow: -24px 0 60px -20px rgba(3, 20, 12, .45);
    transform: translateX(100%); transition: transform 340ms var(--sg-ease-out); outline: none;
}
.sg-pilote.is-ouvert .sg-pilote__voile { opacity: 1; }
.sg-pilote.is-ouvert .sg-pilote__panneau { transform: none; }
.sg-pilote__tete {
    --ton: var(--sg-ton-hadj); --ton-2: var(--sg-ton-hadj-2);
    position: relative; flex: none; padding: 18px 26px 58px; color: #FFFFFF; overflow: hidden;
    background: radial-gradient(120% 120% at 100% 0%, rgba(212, 163, 57, .25), transparent 55%), linear-gradient(125deg, var(--ton), var(--ton-2));
}
.sg-pilote__tete--oumra { --ton: var(--sg-ton-oumra); --ton-2: var(--sg-ton-oumra-2); }
.sg-pilote__tete--tourisme { --ton: var(--sg-ton-tourisme); --ton-2: var(--sg-ton-tourisme-2); }
.sg-pilote__tete::before { position: absolute; inset: 0; content: ""; background-image: var(--sg-pattern); background-size: 80px 80px; opacity: .3; pointer-events: none; }
.sg-pilote__tete > * { position: relative; }
.sg-pilote__barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sg-pilote__etiquette { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .75rem; font-weight: 600; color: #F2CF7E; }
.sg-pilote__etiquette .sg-num { padding: 1px 7px; color: #FFFFFF; background: rgba(255, 255, 255, .14); border-radius: 6px; }
.sg-pilote__actions { display: flex; gap: 6px; }
.sg-pilote__actions a.sg-detail__btn { color: #FFFFFF; text-decoration: none; }
body.app .sg-pilote__nom { margin: 0 0 12px; font-size: 1.5rem; font-weight: 800; color: #FFFFFF; }
.sg-pilote__trajet { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin-bottom: 12px; }
.sg-pilote__trajet > div:not(.sg-pilote__vol) { display: flex; flex-direction: column; }
.sg-pilote__trajet .is-arrivee { align-items: flex-end; text-align: right; }
.sg-pilote__trajet strong { font-size: 2.25rem; font-weight: 800; line-height: 1; letter-spacing: .02em; }
.sg-pilote__trajet small { margin-top: 3px; font-size: .78125rem; opacity: .85; }
.sg-pilote__vol { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .71875rem; opacity: .95; }
.sg-pilote__vol::before { position: absolute; top: 50%; left: 0; right: 0; height: 2px; content: ""; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .45) 0 6px, transparent 6px 11px); }
.sg-pilote__avion { position: relative; display: grid; place-items: center; width: 34px; height: 34px; font-size: 14px; color: #2B1D00; background: #F2CF7E; border-radius: 50%; box-shadow: 0 0 0 5px rgba(255, 255, 255, .12); }
.sg-pilote__vol span { position: relative; padding: 0 6px; }
.sg-pilote__stats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: -40px 22px 0; }
.sg-pilote__stat { display: flex; align-items: center; gap: 10px; padding: 12px 13px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 14px; box-shadow: 0 10px 24px -16px rgba(3, 20, 12, .4); }
.sg-pilote__stat > div { min-width: 0; flex: 1; }
.sg-pilote__stat-ico { display: grid; flex: none; place-items: center; width: 36px; height: 36px; font-size: 14px; color: #FFFFFF; border-radius: 11px; background: linear-gradient(145deg, #0B6B45, #06402A); }
.sg-pilote__stat.is-or .sg-pilote__stat-ico { background: var(--sg-or-degrade); }
.sg-pilote__stat.is-rouge .sg-pilote__stat-ico { background: linear-gradient(145deg, #D9534F, #A93226); }
.sg-pilote__stat.is-bleu .sg-pilote__stat-ico { background: linear-gradient(145deg, #2B6CA3, #1F4E79); }
.sg-pilote__stat small { display: block; font-size: .6875rem; font-weight: 600; color: var(--sg-ink-muted); }
.sg-pilote__stat strong { display: block; font-size: .96875rem; font-weight: 800; color: var(--sg-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sg-pilote__stat-barre { --p: 0%; display: block; height: 4px; margin-top: 5px; overflow: hidden; background: var(--sg-surface-300); border-radius: 999px; }
.sg-pilote__stat-barre i { display: block; width: var(--p); height: 100%; background: #1F7A4A; border-radius: inherit; }
.sg-pilote__stat.is-or .sg-pilote__stat-barre i { background: #D4A339; }
.sg-pilote__stat.is-bleu .sg-pilote__stat-barre i { background: #2B6CA3; }
.sg-pilote__onglets { display: flex; flex: none; gap: 4px; margin-top: 10px; padding: 0 22px; border-bottom: 1px solid var(--sg-border); }
.sg-pilote__corps { flex: 1 1 auto; padding: 18px 22px 30px; overflow-y: auto; }

/* Programme : étapes du voyage */
.sg-etapes { position: relative; margin: 0 0 18px; padding: 0; list-style: none; }
.sg-etapes__item { position: relative; display: flex; gap: 14px; padding: 0 0 18px; }
.sg-etapes__item:not(:last-child)::before { position: absolute; top: 34px; bottom: 2px; left: 16px; width: 2px; content: ""; background: repeating-linear-gradient(180deg, var(--sg-border) 0 5px, transparent 5px 9px); }
.sg-etapes__pt { display: grid; flex: none; place-items: center; width: 34px; height: 34px; font-size: 13px; color: var(--sg-or-fonce); background: var(--sg-brand-gold-soft); border: 1px solid color-mix(in srgb, #D4A339 45%, transparent); border-radius: 50%; }
.sg-etapes__item.is-passe .sg-etapes__pt { color: #FFFFFF; background: #1F7A4A; border-color: #1F7A4A; }
.sg-etapes__item strong { display: block; font-size: .875rem; color: var(--sg-ink); }
.sg-etapes__date { display: block; font-size: .8125rem; font-weight: 600; color: var(--sg-or-fonce); }
:root[data-theme="dark"] .sg-etapes__date { color: var(--sg-or-clair); }
.sg-etapes__item small { font-size: .75rem; color: var(--sg-ink-muted); }
.sg-pilote__infos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sg-pilote__info { display: flex; gap: 11px; padding: 12px 14px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 14px; }
.sg-pilote__info-ico { display: grid; flex: none; place-items: center; width: 32px; height: 32px; font-size: 13px; color: var(--sg-brand-green); background: var(--sg-brand-green-soft); border-radius: 10px; }
.sg-pilote__info small { display: block; font-size: .6875rem; font-weight: 600; color: var(--sg-ink-muted); }
.sg-pilote__info strong { display: block; font-size: .84375rem; color: var(--sg-ink); }
.sg-pilote__liens { display: flex; gap: 10px; margin-top: 3px; font-size: .75rem; }
.sg-pilote__liens a { font-weight: 600; color: var(--sg-brand-green); text-decoration: none; }
.sg-pilote__liens a.is-whatsapp { color: #1E9E57; }
.sg-pilote__description { margin: 14px 0 0; padding: 12px 14px; font-size: .8125rem; line-height: 1.6; color: var(--sg-ink-muted); background: var(--sg-well-bg); border-left: 3px solid #D4A339; border-radius: 0 12px 12px 0; }

/* Pèlerins : manifeste */
.sg-pilote__outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sg-pilote__outils .sg-search { flex: 1 1 240px; max-width: 320px; }
.sg-pilote__filtre { display: inline-flex; gap: 3px; padding: 3px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 11px; }
body.app .sg-pilote__filtre button { height: 30px; padding: 0 12px; font-size: .75rem; font-weight: 600; color: var(--sg-ink-muted); background: none; border: 0; border-radius: 8px; }
body.app .sg-pilote__filtre button.is-actif { color: #FFFFFF; background: var(--sg-brand-green); }
.sg-manif { display: flex; flex-direction: column; gap: 6px; }
.sg-manif__ligne {
    display: grid; grid-template-columns: 38px minmax(0, 1.6fr) auto minmax(120px, 1fr) auto; align-items: center; gap: 12px;
    padding: 9px 12px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 12px;
}
.sg-manif__ligne.is-pret { border-left: 3px solid #1F7A4A; }
.sg-manif__av { display: grid; place-items: center; width: 38px; height: 38px; font-size: .75rem; font-weight: 800; color: var(--sg-brand-green); background: var(--sg-brand-green-soft); border-radius: 11px; }
.sg-manif__id { min-width: 0; }
.sg-manif__id strong { display: block; overflow: hidden; font-size: .84375rem; color: var(--sg-ink); text-overflow: ellipsis; white-space: nowrap; }
.sg-manif__id small { font-size: .71875rem; color: var(--sg-ink-faint); }
.sg-manif .sg-statut { height: 24px; padding: 0 9px; font-size: .71875rem; }
.sg-manif__pay small { display: block; margin-bottom: 4px; font-size: .71875rem; font-weight: 600; color: var(--sg-ink-muted); }
.sg-manif__barre { --p: 0%; display: block; height: 5px; overflow: hidden; background: var(--sg-surface-300); border-radius: 999px; }
.sg-manif__barre i { display: block; width: var(--p); height: 100%; background: linear-gradient(90deg, #E0B556, #9A7322); border-radius: inherit; }
.sg-manif__barre.is-ok i { background: #1F7A4A; }
.sg-manif__ctl { display: flex; gap: 4px; }
.sg-manif__ctl span { display: grid; place-items: center; width: 26px; height: 26px; font-size: 11px; border-radius: 8px; }
.sg-manif__ctl .is-ok { color: #1F7A4A; background: color-mix(in srgb, #1F7A4A 13%, transparent); }
.sg-manif__ctl .is-ko { color: #C0392B; background: color-mix(in srgb, #C0392B 11%, transparent); }

/* Finances */
.sg-fin__trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.sg-fin__chiffre { padding: 14px 16px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 14px; }
.sg-fin__chiffre small { display: block; font-size: .71875rem; font-weight: 600; color: var(--sg-ink-muted); }
.sg-fin__chiffre strong { font-size: 1.1875rem; font-weight: 800; color: var(--sg-ink); font-variant-numeric: tabular-nums; }
.sg-fin__chiffre.is-vert strong { color: #1F7A4A; }
.sg-fin__chiffre.is-rouge strong { color: #C0392B; }
.sg-fin__barre { --p: 0%; position: relative; height: 26px; margin-bottom: 18px; overflow: hidden; background: var(--sg-surface-300); border-radius: 10px; }
.sg-fin__barre i { display: block; width: var(--p); height: 100%; background: linear-gradient(90deg, #0B6B45, #1F7A4A 60%, #D4A339); }
.sg-fin__barre span { position: absolute; inset: 0; display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.sg-fin__bloc { margin-bottom: 16px; padding: 14px 16px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 14px; }
.sg-fin__bloc h6 { margin: 0 0 10px; font-size: .84375rem; font-weight: 700; color: var(--sg-ink); }
.sg-fin__statuts { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-fin__statuts .sg-statut b { margin-right: 2px; }
.sg-fin__reste { display: grid; grid-template-columns: minmax(0, 1fr) 140px auto; align-items: center; gap: 12px; padding: 7px 0; font-size: .8125rem; border-top: 1px dashed var(--sg-border); }
.sg-fin__reste strong { color: #C0392B; font-variant-numeric: tabular-nums; }
.sg-fin__plus { margin: 8px 0 0; font-size: .75rem; color: var(--sg-ink-faint); }

/* Préparation au départ */
.sg-prep__tete { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; padding: 16px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 16px; }
.sg-anneau--grand .sg-anneau__rond { --anneau-fond: var(--sg-card-bg); --anneau-ton: #1F7A4A; width: 76px; height: 76px; background: radial-gradient(closest-side, var(--sg-card-bg) 78%, transparent 80% 100%), conic-gradient(#1F7A4A calc(var(--p) * 1%), var(--sg-surface-300) 0); }
.sg-anneau--grand b { font-size: 1.0625rem; font-weight: 800; color: var(--sg-ink); }
.sg-prep__tete strong { display: block; font-size: .9375rem; color: var(--sg-ink); }
.sg-prep__tete small { font-size: .75rem; line-height: 1.5; color: var(--sg-ink-muted); }
.sg-prep__ligne { margin-bottom: 8px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 14px; }
.sg-prep__ligne summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.sg-prep__ligne summary::-webkit-details-marker { display: none; }
.sg-prep__ico { display: grid; flex: none; place-items: center; width: 34px; height: 34px; font-size: 13px; color: #C0392B; background: color-mix(in srgb, #C0392B 11%, transparent); border-radius: 10px; }
.sg-prep__ligne.is-complet .sg-prep__ico { color: #1F7A4A; background: color-mix(in srgb, #1F7A4A 13%, transparent); }
.sg-prep__corps { flex: 1; min-width: 0; }
.sg-prep__corps strong { display: block; margin-bottom: 5px; font-size: .8125rem; color: var(--sg-ink); }
.sg-prep__barre { --p: 0%; display: block; height: 6px; overflow: hidden; background: var(--sg-surface-300); border-radius: 999px; }
.sg-prep__barre i { display: block; width: var(--p); height: 100%; background: linear-gradient(90deg, #E0B556, #1F7A4A); border-radius: inherit; }
.sg-prep__nb { font-size: .8125rem; font-weight: 800; color: var(--sg-ink); font-variant-numeric: tabular-nums; }
.sg-prep__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin: 0; padding: 0 14px 12px 60px; list-style: none; }
.sg-prep__liste li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; font-size: .78125rem; border-top: 1px dashed var(--sg-border); }
.sg-prep__liste small { color: var(--sg-ink-faint); white-space: nowrap; }

@media (max-width: 1199.98px) {
    .sg-vg-spot { grid-template-columns: 180px minmax(0, 1fr); }
    .sg-vg-spot__prep { grid-column: 1 / -1; }
    .sg-pilote__stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
    .sg-vg-spot { grid-template-columns: 1fr; padding: 20px; }
    .sg-vg-filtres .sg-search { width: 100%; }
    .sg-manif__ligne { grid-template-columns: 38px minmax(0, 1fr) auto; }
    .sg-manif__pay, .sg-manif__ctl { grid-column: 2 / -1; }
    .sg-fin__trio, .sg-pilote__infos, .sg-prep__liste { grid-template-columns: 1fr; }
    .sg-pilote__tete { padding: 16px 16px 54px; }
    .sg-pilote__actions .sg-detail__btn--or { padding: 0 10px; }
}
.sg-billet__ligne > span svg, .sg-pilote__avion svg { width: 1em; }
@media (max-width: 1499.98px) { .sg-vg-filtres { flex-wrap: wrap; } }

/* ==========================================================================
   VISAS : choix du voyage, rail d'avancement, tableau par étape (glisser-déposer)
   ========================================================================== */
.sg-vue { display: inline-flex; gap: 3px; padding: 3px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 12px; }
body.app .sg-vue a { display: grid; place-items: center; width: 36px; height: 34px; color: var(--sg-ink-muted); border-radius: 9px; text-decoration: none; }
body.app .sg-vue a.is-actif { color: #FFFFFF; background: var(--sg-brand-green); }

.sg-vs-voyages { display: flex; gap: 10px; margin-bottom: 16px; padding: 2px 2px 8px; overflow-x: auto; scrollbar-width: thin; }
body.app .sg-vs-voyage {
    --ton: var(--sg-ton-tourisme); --ton-2: var(--sg-ton-tourisme-2);
    position: relative; display: flex; flex: none; align-items: center; gap: 10px; min-width: 210px; padding: 10px 14px 10px 10px;
    color: var(--sg-ink); text-decoration: none; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 14px;
    box-shadow: var(--sg-shadow-xs); transition: transform 200ms var(--sg-ease-out), border-color 200ms;
}
body.app .sg-vs-voyage--hadj { --ton: var(--sg-ton-hadj); --ton-2: var(--sg-ton-hadj-2); }
body.app .sg-vs-voyage--oumra { --ton: var(--sg-ton-oumra); --ton-2: var(--sg-ton-oumra-2); }
body.app .sg-vs-voyage:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ton) 40%, var(--sg-border)); }
body.app .sg-vs-voyage.is-passe { opacity: .7; }
.sg-vs-voyage__ico { display: grid; flex: none; place-items: center; width: 36px; height: 36px; font-size: 14px; color: #FFFFFF; background: linear-gradient(140deg, var(--ton), var(--ton-2)); border-radius: 11px; }
.sg-vs-voyage__texte strong { display: block; font-size: .84375rem; line-height: 1.25; }
.sg-vs-voyage__texte small { font-size: .71875rem; color: var(--sg-ink-muted); }
body.app .sg-vs-voyage.is-actif { color: #FFFFFF; background: linear-gradient(130deg, var(--ton), var(--ton-2)); border-color: transparent; box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--ton) 80%, transparent); }
body.app .sg-vs-voyage.is-actif .sg-vs-voyage__ico { color: #2B1D00; background: #F2CF7E; }
body.app .sg-vs-voyage.is-actif small { color: rgba(255, 255, 255, .8); }

.sg-vs-rail { margin-bottom: 16px; padding: 18px 20px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 18px; box-shadow: var(--sg-shadow-xs); }
.sg-vs-rail__tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 20px; margin-bottom: 14px; }
body.app .sg-vs-rail__titre { margin: 0; font-size: 1.0625rem; font-weight: 800; color: var(--sg-ink); }
.sg-vs-rail__titre .sg-num { margin-left: 6px; padding: 1px 7px; font-size: .71875rem; font-weight: 600; color: var(--sg-or-fonce); background: var(--sg-brand-gold-soft); border-radius: 6px; }
.sg-vs-rail__sous { margin: 2px 0 0; font-size: .8125rem; color: var(--sg-ink-muted); }
.sg-vs-rail__sous strong { color: #1F7A4A; }
.sg-vs-alertes { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-vs-alerte { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; font-size: .75rem; font-weight: 600; color: #8A5A12; background: var(--sg-brand-gold-soft); border-radius: 999px; }
.sg-vs-alerte.is-rouge { color: #A93226; background: color-mix(in srgb, #C0392B 11%, transparent); }
.sg-vs-rail__barre { display: flex; gap: 3px; height: 12px; margin-bottom: 12px; overflow: hidden; background: var(--sg-surface-300); border-radius: 999px; }
.sg-vs-rail__barre i { flex-basis: 0; min-width: 0; transition: flex-grow 600ms var(--sg-ease-out); }
.sg-vs-rail__etapes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.sg-vs-rail__etapes li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center; font-size: .78125rem; color: var(--sg-ink-muted); }
.sg-vs-rail__etapes li strong { font-size: 1.0625rem; font-weight: 800; color: var(--sg-ink); }
.sg-vs-rail__etapes li small { grid-column: 2; font-size: .6875rem; color: var(--sg-ink-faint); }
.sg-vs-rail__pt { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; font-size: 13px; border-radius: 10px; color: var(--t); background: color-mix(in srgb, var(--t) 13%, transparent); }
.is-gris { --t: #7C8B82; } .is-bleu { --t: #2B6CA3; } .is-or { --t: #B88A2A; } .is-vert { --t: #1F7A4A; } .is-rouge { --t: #C0392B; }
.sg-vs-rail__barre i.is-gris { background: #A9B5AE; } .sg-vs-rail__barre i.is-bleu { background: #2B6CA3; } .sg-vs-rail__barre i.is-or { background: #D4A339; }
.sg-vs-rail__barre i.is-vert { background: #1F7A4A; } .sg-vs-rail__barre i.is-rouge { background: #C0392B; }

.sg-vs-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 14px; }
.sg-vs-outils .sg-search { width: 320px; }
.sg-vs-astuce { margin: 0; font-size: .75rem; color: var(--sg-ink-muted); }
.sg-vs-astuce i { margin-right: 5px; color: var(--sg-or-fonce); }

/* Tableau par étape */
.sg-kanban { display: grid; grid-template-columns: repeat(5, minmax(230px, 1fr)); gap: 12px; padding-bottom: 6px; overflow-x: auto; align-items: start; }
.sg-kanban__col { display: flex; flex-direction: column; min-height: 220px; max-height: calc(100vh - 170px); background: color-mix(in srgb, var(--t) 6%, var(--sg-well-bg)); border: 1px solid color-mix(in srgb, var(--t) 14%, var(--sg-border)); border-radius: 16px; transition: background 160ms, box-shadow 160ms; }
.sg-kanban__tete { position: sticky; top: 0; display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px; border-bottom: 3px solid var(--t); }
.sg-kanban__tete strong { flex: 1; font-size: .8125rem; color: var(--sg-ink); }
.sg-kanban__ico { display: grid; place-items: center; width: 26px; height: 26px; font-size: 11px; color: #FFFFFF; background: var(--t); border-radius: 8px; }
.sg-kanban__nb { min-width: 26px; padding: 2px 8px; font-size: .71875rem; font-weight: 800; text-align: center; color: var(--t); background: var(--sg-card-bg); border-radius: 999px; }
.sg-kanban__liste { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 10px; overflow-y: auto; }
.sg-kanban__vide { display: none; margin: 0; padding: 18px 10px; font-size: .75rem; text-align: center; color: var(--sg-ink-faint); border: 2px dashed color-mix(in srgb, var(--t) 25%, var(--sg-border)); border-radius: 12px; }
.sg-kanban__col.is-vide .sg-kanban__vide, .sg-kanban.is-glisse .sg-kanban__vide { display: block; }
.sg-kanban__col.is-cible { background: color-mix(in srgb, var(--t) 14%, var(--sg-well-bg)); box-shadow: inset 0 0 0 2px var(--t); }

.sg-vcarte {
    padding: 11px 12px 10px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 13px;
    box-shadow: 0 1px 2px rgba(16, 24, 20, .05); cursor: grab; outline: none;
    transition: transform 180ms var(--sg-ease-out), box-shadow 180ms, opacity 160ms;
}
.sg-vcarte:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(16, 24, 20, .4); }
.sg-vcarte:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sg-brand-green) 35%, transparent); }
.sg-vcarte.is-saisie { opacity: .45; transform: rotate(-2deg); }
.sg-vcarte.is-envoi { opacity: .65; pointer-events: none; }
.sg-vcarte.is-arrivee { animation: sg-vcarte-arrivee 900ms var(--sg-ease-out); }
@keyframes sg-vcarte-arrivee { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--t, #1F7A4A) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.sg-vcarte.has-alerte { border-left: 3px solid #D4A339; }
.sg-vcarte__haut { display: flex; align-items: center; gap: 9px; }
.sg-vcarte__av { display: grid; flex: none; place-items: center; width: 34px; height: 34px; overflow: hidden; font-size: .6875rem; font-weight: 800; color: var(--sg-brand-green); background: var(--sg-brand-green-soft); border-radius: 10px; }
.sg-vcarte__av img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.sg-vcarte__id { flex: 1; min-width: 0; }
.sg-vcarte__id strong { display: block; overflow: hidden; font-size: .8125rem; color: var(--sg-ink); text-overflow: ellipsis; white-space: nowrap; }
.sg-vcarte__id small { font-size: .6875rem; color: var(--sg-ink-faint); }
.sg-vcarte__poignee { color: var(--sg-ink-faint); font-size: 11px; opacity: .6; }
.sg-vcarte__pass { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; overflow: hidden; font-size: .6875rem; color: var(--sg-ink-muted); white-space: nowrap; text-overflow: ellipsis; }
.sg-vcarte__pass span { overflow: hidden; text-overflow: ellipsis; }
.sg-vcarte__pass i { color: #1F7A4A; }
.sg-vcarte__pass.is-ko { color: #A93226; }
.sg-vcarte__pass.is-ko i { color: #C0392B; }
.sg-vcarte__infos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 8px 0 0; }
.sg-vcarte__infos:not(:has(div:not([hidden]))) { display: none; }
.sg-vcarte__infos dt { font-size: .59375rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sg-ink-faint); }
.sg-vcarte__infos dd { margin: 0; font-size: .71875rem; font-weight: 600; color: var(--sg-ink); }
.sg-vcarte__motif, .sg-vcarte__alerte { display: flex; gap: 6px; margin: 8px 0 0; padding: 6px 8px; font-size: .6875rem; line-height: 1.4; border-radius: 8px; }
.sg-vcarte__motif { color: #A93226; background: color-mix(in srgb, #C0392B 9%, transparent); }
.sg-vcarte__alerte { color: #8A5A12; background: var(--sg-brand-gold-soft); }
.sg-vcarte__pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--sg-border); }
.sg-vcarte__type { font-size: .6875rem; font-weight: 600; color: var(--sg-ink-muted); }
.sg-vcarte__type i { margin-right: 4px; color: var(--sg-or-fonce); }
body.app .sg-vcarte__suivant {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; font-size: .6875rem; font-weight: 700;
    color: var(--sg-brand-green); background: var(--sg-brand-green-soft); border: 0; border-radius: 8px; transition: background 160ms, color 160ms;
}
body.app .sg-vcarte__suivant:hover { color: #FFFFFF; background: var(--sg-brand-green); }

/* Étape dans la vue liste */
.sg-vs-etape { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; font-size: .75rem; font-weight: 700; color: var(--t); background: color-mix(in srgb, var(--t) 12%, transparent); border-radius: 999px; }
table.sg-table--registre .is-rouge { color: #C0392B; }

/* Fenêtre de la demande */
.sg-vs-qui { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 18px; padding: 12px 14px; background: var(--sg-well-bg); border-radius: 14px; }
.sg-vs-qui__ico { display: grid; place-items: center; width: 34px; height: 34px; font-size: 13px; color: #FFFFFF; background: var(--sg-brand-green); border-radius: 10px; }
.sg-vs-qui__ico.is-or { color: #2B1D00; background: #F2CF7E; }
.sg-vs-qui small { display: block; font-size: .6875rem; color: var(--sg-ink-muted); }
.sg-vs-qui strong { font-size: .84375rem; color: var(--sg-ink); }
.sg-segment--etapes { display: grid; grid-template-columns: repeat(5, 1fr); }
.sg-segment--etapes .sg-segment__option { justify-content: center; font-size: .75rem; }
.sg-segment--etapes .sg-segment__input:checked + .sg-segment__option { color: #FFFFFF; background: var(--t); }
.sg-segment--etapes + .sg-champ__erreur { display: none; }
#visaModal .sg-champ.is-wide:first-of-type { margin-bottom: 18px; }
body.app .sg-vs-retirer { margin-top: 16px; padding: 0; font-size: .78125rem; font-weight: 600; color: #C0392B; background: none; border: 0; }
body.app .sg-vs-retirer:hover { text-decoration: underline; }

@media (max-width: 991.98px) {
    .sg-vs-rail__etapes { grid-template-columns: repeat(3, 1fr); }
    .sg-vs-qui { grid-template-columns: auto 1fr; }
    .sg-segment--etapes { grid-template-columns: repeat(2, 1fr); }
}
/* Cartes de visa : ajustements */
.sg-vcarte__id small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-vcarte__pied:has([data-suivant][hidden]) { display: none; }
.sg-vcarte__pied { justify-content: stretch; }
body.app .sg-vcarte__suivant { flex: 1; justify-content: center; white-space: nowrap; }
body.app .sg-vcarte__suivant small { font-size: .6875rem; font-weight: 500; opacity: .75; }
.sg-vs-etape-champ { margin-bottom: 20px; }
/* Fenêtres d'ajout : l'aperçu vivant est à droite du formulaire */
.sg-saisie { grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 991.98px) { .sg-saisie { grid-template-columns: minmax(0, 1fr); } }
/* Couleurs supplémentaires des catégories de voyage (Paramètres > Catégories) */
:root { --sg-ton-prune: #5B2A6E; --sg-ton-prune-2: #8A4FA3; --sg-ton-terre: #8E3B24; --sg-ton-terre-2: #C2633F; }
.sg-billet--prune, .sg-vg-spot--prune, .sg-pilote__tete--prune, body.app .sg-vs-voyage--prune, .sg-cat--prune { --ton: var(--sg-ton-prune); --ton-2: var(--sg-ton-prune-2); }
.sg-billet--terre, .sg-vg-spot--terre, .sg-pilote__tete--terre, body.app .sg-vs-voyage--terre, .sg-cat--terre { --ton: var(--sg-ton-terre); --ton-2: var(--sg-ton-terre-2); }
/* ==========================================================================
   PARAMÈTRES : onglets et catégories de voyage
   ========================================================================== */
.sg-reglages { display: inline-flex; gap: 4px; margin-bottom: 18px; padding: 4px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 14px; box-shadow: var(--sg-shadow-xs); }
body.app .sg-reglages__lien { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; font-size: .8125rem; font-weight: 600; color: var(--sg-ink-muted); text-decoration: none; border-radius: 10px; }
body.app .sg-reglages__lien:hover { color: var(--sg-ink); background: var(--sg-well-bg); }
body.app .sg-reglages__lien.is-actif { color: #FFFFFF; background: linear-gradient(145deg, #0B6B45, #06402A); }

.sg-cat--hadj { --ton: var(--sg-ton-hadj); --ton-2: var(--sg-ton-hadj-2); }
.sg-cat--oumra { --ton: var(--sg-ton-oumra); --ton-2: var(--sg-ton-oumra-2); }
.sg-cat--tourisme { --ton: var(--sg-ton-tourisme); --ton-2: var(--sg-ton-tourisme-2); }

.sg-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.sg-cat {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 20, .04), 0 10px 26px -18px rgba(16, 24, 20, .35);
    animation: sg-fade-up 460ms var(--sg-ease-out) backwards; animation-delay: calc(var(--i, 0) * 50ms);
}
.sg-cat__tete {
    position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 18px 16px; color: #FFFFFF;
    background: radial-gradient(120% 140% at 100% 0%, rgba(212, 163, 57, .25), transparent 55%), linear-gradient(120deg, var(--ton), var(--ton-2));
}
.sg-cat__tete::after { position: absolute; inset: 0; content: ""; background-image: var(--sg-pattern); background-size: 64px 64px; opacity: .35; pointer-events: none; }
.sg-cat__tete > * { position: relative; z-index: 1; }
.sg-cat__ico { display: grid; flex: none; place-items: center; width: 50px; height: 50px; font-size: 21px; color: #2B1D00; background: #F2CF7E; border-radius: 15px; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .45); }
.sg-cat__titres { flex: 1; min-width: 0; }
body.app .sg-cat__nom { margin: 0; font-size: 1.125rem; font-weight: 800; color: #FFFFFF; }
.sg-cat__visa { font-size: .71875rem; opacity: .9; }
.sg-cat__visa i { margin-right: 4px; color: #F2CF7E; }
.sg-cat__ordre { display: grid; place-items: center; width: 26px; height: 26px; font-size: .71875rem; font-weight: 800; background: rgba(255, 255, 255, .16); border-radius: 8px; }
.sg-cat__desc { margin: 0; padding: 14px 18px 0; font-size: .8125rem; line-height: 1.55; color: var(--sg-ink-muted); }
.sg-cat__desc.is-vide { font-style: italic; color: var(--sg-ink-faint); }
.sg-cat__chiffres { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 8px; margin: 14px 18px 0; padding: 12px 14px; background: var(--sg-well-bg); border-radius: 12px; }
.sg-cat__chiffres dt { font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-ink-faint); }
.sg-cat__chiffres dd { margin: 2px 0 0; font-size: .9375rem; font-weight: 800; color: var(--sg-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sg-cat__chiffres dd small { font-size: .625rem; font-weight: 600; color: var(--sg-ink-muted); }
.sg-cat__prochain { margin: 12px 18px 0; font-size: .75rem; color: var(--sg-ink-muted); }
.sg-cat__prochain i { margin-right: 5px; color: var(--ton); }
:root[data-theme="dark"] .sg-cat__prochain i { color: var(--sg-or-clair); }
.sg-cat__pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 14px 18px 16px; }
body.app .sg-cat__lien { font-size: .78125rem; font-weight: 700; color: var(--sg-brand-green); text-decoration: none; }
body.app .sg-cat__lien i { margin-left: 4px; transition: transform 200ms var(--sg-ease-out); }
body.app .sg-cat__lien:hover i { transform: translateX(3px); }
.sg-cat__actions { display: flex; gap: 4px; }
body.app .sg-cat__btn { display: grid; place-items: center; width: 32px; height: 32px; font-size: 12px; color: var(--sg-ink-muted); background: var(--sg-well-bg); border: 0; border-radius: 9px; transition: background 160ms, color 160ms; }
body.app .sg-cat__btn:hover:not(:disabled) { color: #FFFFFF; background: var(--sg-brand-green); }
body.app .sg-cat__btn.is-danger:hover { background: #C0392B; }
body.app .sg-cat__btn:disabled { opacity: .35; cursor: default; }

body.app .sg-cat--ajout {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 280px;
    color: var(--sg-ink-muted); background: transparent; border: 2px dashed var(--sg-border); box-shadow: none; cursor: pointer;
    transition: border-color 200ms, background 200ms, color 200ms;
}
body.app .sg-cat--ajout:hover { color: var(--sg-brand-green); background: var(--sg-brand-green-soft); border-color: color-mix(in srgb, var(--sg-brand-green) 45%, transparent); }
.sg-cat__plus { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; font-size: 20px; color: #FFFFFF; background: var(--sg-brand-green); border-radius: 16px; }
.sg-cat--ajout strong { font-size: .9375rem; color: var(--sg-ink); }
.sg-cat--ajout small { font-size: .75rem; }

/* Aperçu dans la fenêtre */
.sg-cat--apercu { margin: 10px 0 14px; text-align: left; animation: none; }
.sg-cat--apercu .sg-cat__desc { padding-bottom: 4px; }
.sg-cat__billet { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 18px 18px; padding-top: 12px; font-size: 1.25rem; font-weight: 800; color: var(--ton); border-top: 2px dashed var(--sg-border); }
.sg-cat__billet i { font-size: 13px; color: var(--sg-ink-faint); }

/* Nuancier de couleurs et choix d'icône */
.sg-nuancier { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.sg-nuancier__input, .sg-icones__input { position: absolute; opacity: 0; pointer-events: none; }
.sg-nuancier__option { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; font-size: .71875rem; font-weight: 600; color: var(--sg-ink-muted); border: 2px solid var(--sg-border); border-radius: 12px; cursor: pointer; transition: border-color 160ms; }
.sg-nuancier__option span { width: 100%; height: 26px; background: linear-gradient(120deg, var(--ton), var(--ton-2)); border-radius: 8px; }
.sg-nuancier__input:checked + .sg-nuancier__option { color: var(--sg-ink); border-color: var(--ton); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ton) 20%, transparent); }
.sg-nuancier__input:focus-visible + .sg-nuancier__option, .sg-icones__input:focus-visible + .sg-icones__option { outline: 2px solid var(--sg-brand-green); outline-offset: 2px; }
.sg-icones { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.sg-icones__option { display: grid; place-items: center; height: 42px; font-size: 16px; color: var(--sg-ink-muted); background: var(--sg-well-bg); border: 2px solid transparent; border-radius: 11px; cursor: pointer; transition: background 160ms, color 160ms; }
.sg-icones__option:hover { color: var(--sg-ink); }
.sg-icones__input:checked + .sg-icones__option { color: #2B1D00; background: #F2CF7E; border-color: #D4A339; }
@media (max-width: 767.98px) { .sg-nuancier { grid-template-columns: repeat(3, 1fr); } .sg-icones { grid-template-columns: repeat(4, 1fr); } }
/* Numéro de section des formulaires (01, 02…) : chiffre blanc sur pastille verte pleine */
.sg-fsec__num {
    color: #FFFFFF;
    background: linear-gradient(145deg, #0B6B45 0%, #06402A 100%);
    border: 0;
    box-shadow: 0 6px 14px -6px rgba(6, 64, 42, .6), inset 0 1px 0 rgba(255, 255, 255, .18);
}
/* Fenêtre compacte (taille lg) : pas de hauteur minimale imposée par l'aperçu */
.sg-modal:not(.sg-modal--xl) .sg-saisie__carte { min-height: 0; align-self: stretch; }
.sg-note-kits { margin: 0; padding: 10px 14px; font-size: .78125rem; color: var(--sg-ink-muted); background: var(--sg-well-bg); border-radius: 12px; }
.sg-note-kits i { margin-right: 6px; color: var(--sg-or-fonce); }
/* ==========================================================================
   KITS CLIENTS : bilan, grille d'émargement, menu des tailles, catalogue
   ========================================================================== */
.sg-reglages__nb { min-width: 22px; padding: 1px 7px; font-size: .6875rem; font-weight: 700; text-align: center; background: rgba(0, 0, 0, .08); border-radius: 999px; }
body.app .sg-reglages__lien.is-actif .sg-reglages__nb { color: #2B1D00; background: #F2CF7E; }

.sg-kt-bilan { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-bottom: 16px; padding: 16px 20px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 18px; box-shadow: var(--sg-shadow-xs); }
.sg-kt-bilan__texte { flex: 1 1 320px; }
body.app .sg-kt-bilan__texte h2 { margin: 0; font-size: 1.0625rem; font-weight: 800; color: var(--sg-ink); }
.sg-kt-bilan__texte h2 .sg-num { margin-left: 6px; padding: 1px 7px; font-size: .71875rem; font-weight: 600; color: var(--sg-or-fonce); background: var(--sg-brand-gold-soft); border-radius: 6px; }
.sg-kt-bilan__texte p { margin: 3px 0 0; font-size: .8125rem; color: var(--sg-ink-muted); }
.sg-kt-bilan__texte strong { color: var(--sg-ink); }
.sg-kt-legende { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; font-size: .75rem; color: var(--sg-ink-muted); }
.sg-kt-legende li { display: flex; align-items: center; gap: 6px; }
.sg-kt-legende .sg-case { width: 22px; height: 22px; font-size: 10px; cursor: default; }

/* Grille */
.sg-kt-grille-wrap { max-height: calc(100vh - 150px); overflow: auto; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 18px; box-shadow: var(--sg-shadow-xs); }
.sg-kt-grille { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .8125rem; }
.sg-kt-grille thead th { position: sticky; top: 0; z-index: 2; padding: 12px 8px 10px; vertical-align: bottom; background: color-mix(in srgb, var(--sg-brand-green-soft) 70%, var(--sg-card-bg)); border-bottom: 1px solid var(--sg-border); }
.sg-kt-grille__pelerin { position: sticky; left: 0; z-index: 1; min-width: 240px; padding: 8px 14px !important; text-align: left; background: var(--sg-card-bg); border-right: 1px solid var(--sg-border); }
.sg-kt-grille thead .sg-kt-grille__pelerin { z-index: 3; font-size: .6875rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--sg-ink-muted); background: color-mix(in srgb, var(--sg-brand-green-soft) 70%, var(--sg-card-bg)); }
.sg-kt-grille__article { min-width: 96px; text-align: center; }
.sg-kt-art__ico { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 6px; font-size: 13px; color: #FFFFFF; background: linear-gradient(145deg, #0B6B45, #06402A); border-radius: 10px; }
.sg-kt-art__nom { display: block; font-size: .75rem; font-weight: 700; line-height: 1.2; color: var(--sg-ink); }
.sg-kt-art__public { display: block; margin-top: 1px; font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--sg-ink-faint); }
.sg-kt-art__compte { display: block; margin-top: 5px; font-size: .71875rem; color: var(--sg-ink-muted); }
.sg-kt-art__compte b { color: var(--sg-ink); }
.sg-kt-art__barre { --p: 0%; display: block; height: 4px; margin: 4px 8px 0; overflow: hidden; background: var(--sg-surface-300); border-radius: 999px; }
.sg-kt-art__barre i { display: block; width: var(--p); height: 100%; background: #1F7A4A; border-radius: inherit; transition: width 400ms var(--sg-ease-out); }
body.app .sg-kt-art__tous { margin-top: 6px; padding: 2px 8px; font-size: 10px; color: var(--sg-brand-green); background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 7px; }
body.app .sg-kt-art__tous:hover { color: #FFFFFF; background: var(--sg-brand-green); border-color: var(--sg-brand-green); }
.sg-kt-grille tbody td, .sg-kt-grille tbody th { border-bottom: 1px solid color-mix(in srgb, var(--sg-border) 70%, transparent); }
.sg-kt-grille tbody td { padding: 7px 6px; text-align: center; }
.sg-kt-grille tbody tr:hover td, .sg-kt-grille tbody tr:hover th { background: color-mix(in srgb, var(--sg-brand-green-soft) 40%, var(--sg-card-bg)); }
.sg-kt-grille tbody tr.is-complet th { box-shadow: inset 3px 0 0 #1F7A4A; }
.sg-kt-pel { display: flex; align-items: center; gap: 10px; }
.sg-kt-pel .sg-monogram { width: 34px; height: 34px; font-size: .71875rem; border-radius: 10px; }
.sg-kt-pel strong { display: block; font-size: .8125rem; font-weight: 650; color: var(--sg-ink); white-space: nowrap; }
.sg-kt-pel small { font-size: .6875rem; color: var(--sg-ink-faint); }
.sg-kt-grille__total { min-width: 92px; text-align: center; }
.sg-kt-total { font-size: .78125rem; color: var(--sg-ink-muted); }
.sg-kt-total b { color: var(--sg-ink); }
tr.is-complet .sg-kt-total b { color: #1F7A4A; }
body.app .sg-kt-total__btn { margin-left: 6px; padding: 3px 7px; font-size: 10px; color: var(--sg-ink-muted); background: var(--sg-well-bg); border: 0; border-radius: 7px; }
body.app .sg-kt-total__btn:hover { color: #FFFFFF; background: var(--sg-brand-green); }

/* Case de la grille */
.sg-case {
    position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
    font-size: 13px; vertical-align: middle; border-radius: 10px; transition: transform 160ms var(--sg-ease-out), background 160ms, border-color 160ms;
}
button.sg-case { cursor: pointer; }
body.app .sg-case.is-a { background: var(--sg-card-bg); border: 2px dashed color-mix(in srgb, var(--sg-ink-faint) 60%, transparent); }
body.app .sg-case.is-a:hover { border-color: #1F7A4A; background: color-mix(in srgb, #1F7A4A 8%, transparent); transform: scale(1.06); }
body.app .sg-case.is-remis { color: #FFFFFF; background: linear-gradient(145deg, #2E9A64, #1F7A4A); border: 0; box-shadow: 0 4px 10px -4px rgba(31, 122, 74, .6); }
body.app .sg-case.is-remis:hover { transform: scale(1.06); }
.sg-case em { position: absolute; right: -6px; bottom: -6px; min-width: 20px; padding: 1px 4px; font-size: .5625rem; font-style: normal; font-weight: 800; color: #2B1D00; background: #F2CF7E; border-radius: 6px; }
.sg-case.is-nc { width: auto; height: auto; font-size: .8125rem; color: var(--sg-ink-faint); background: none; }
.sg-case.is-envoi { opacity: .5; pointer-events: none; }
.sg-case.is-pulse { animation: sg-case-pulse 600ms var(--sg-ease-out); }
@keyframes sg-case-pulse { 0% { box-shadow: 0 0 0 0 rgba(46, 154, 100, .55); } 100% { box-shadow: 0 0 0 9px transparent; } }

/* Menu des tailles */
.sg-tailles { position: absolute; z-index: 1070; width: 214px; padding: 12px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 14px; box-shadow: 0 18px 40px -16px rgba(3, 20, 12, .45); }
.sg-tailles__titre { margin: 0 0 8px; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-ink-muted); }
.sg-tailles__choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
body.app .sg-tailles__choix button { height: 34px; font-size: .78125rem; font-weight: 700; color: var(--sg-ink); background: var(--sg-well-bg); border: 1px solid var(--sg-border); border-radius: 9px; }
body.app .sg-tailles__choix button:hover { border-color: #1F7A4A; }
body.app .sg-tailles__choix button.is-actif { color: #FFFFFF; background: #1F7A4A; border-color: #1F7A4A; }
body.app .sg-tailles__annuler { width: 100%; margin-top: 8px; padding: 6px; font-size: .75rem; font-weight: 600; color: #C0392B; background: none; border: 0; border-radius: 8px; }
body.app .sg-tailles__annuler:hover { background: color-mix(in srgb, #C0392B 9%, transparent); }

/* Catalogue */
.sg-kt-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.sg-kt-fiche {
    display: flex; flex-direction: column; overflow: hidden; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 20, .04), 0 10px 26px -18px rgba(16, 24, 20, .35);
    animation: sg-fade-up 460ms var(--sg-ease-out) backwards; animation-delay: calc(var(--i, 0) * 40ms);
}
.sg-kt-fiche.is-inactif { opacity: .6; filter: grayscale(.6); }
.sg-kt-fiche__visuel {
    position: relative; display: grid; place-items: center; height: 120px; font-size: 42px; color: #F2CF7E; overflow: hidden;
    background: radial-gradient(120% 140% at 100% 0%, rgba(212, 163, 57, .25), transparent 55%), linear-gradient(135deg, #0B6B45, #06402A);
}
.sg-kt-fiche__visuel::after { position: absolute; inset: 0; content: ""; background-image: var(--sg-pattern); background-size: 60px 60px; opacity: .3; pointer-events: none; }
.sg-kt-fiche__visuel img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.sg-kt-fiche__etat { position: absolute; top: 10px; right: 10px; z-index: 2; height: 24px; padding: 0 10px; display: inline-flex; align-items: center; font-size: .6875rem; font-weight: 700; border-radius: 999px; background: #FFFFFF; color: var(--sg-ink); }
.sg-kt-fiche__etat.is-success { color: #1F7A4A; } .sg-kt-fiche__etat.is-warning { color: #FFFFFF; background: #D4A339; }
.sg-kt-fiche__etat.is-danger { color: #FFFFFF; background: #C0392B; } .sg-kt-fiche__etat.is-info, .sg-kt-fiche__etat.is-neutre { color: var(--sg-ink-muted); }
.sg-kt-fiche__corps { flex: 1; padding: 14px 16px 4px; }
.sg-kt-fiche__sur { margin: 0; font-size: .71875rem; color: var(--sg-ink-faint); }
.sg-kt-fiche__sur .sg-num { color: var(--sg-or-fonce); font-weight: 600; }
body.app .sg-kt-fiche__nom { margin: 2px 0 8px; font-size: 1.0625rem; font-weight: 800; color: var(--sg-ink); }
.sg-kt-fiche__puces { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.sg-kt-fiche__puces span { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; font-size: .6875rem; font-weight: 600; color: var(--sg-ink-muted); background: var(--sg-well-bg); border-radius: 999px; }
.sg-kt-stock { --p: 0%; margin-bottom: 10px; }
.sg-kt-stock__barre { display: block; height: 8px; overflow: hidden; background: color-mix(in srgb, #1F7A4A 14%, var(--sg-surface-300)); border-radius: 999px; }
.sg-kt-stock__barre i { display: block; width: var(--p); height: 100%; background: linear-gradient(90deg, #E0B556, #9A7322); border-radius: inherit; }
.sg-kt-stock__chiffres { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: .71875rem; color: var(--sg-ink-muted); }
.sg-kt-stock__chiffres b { color: var(--sg-ink); }
.sg-kt-fiche__nonsuivi { margin: 0 0 10px; font-size: .75rem; color: var(--sg-ink-muted); }
.sg-kt-besoin { display: flex; gap: 7px; margin: 0 0 10px; padding: 7px 10px; font-size: .71875rem; line-height: 1.4; color: #1F4E79; background: color-mix(in srgb, #2B6CA3 10%, transparent); border-radius: 9px; }
.sg-kt-besoin.is-manque { color: #A93226; background: color-mix(in srgb, #C0392B 10%, transparent); }
.sg-kt-fiche__pied { display: flex; justify-content: flex-end; gap: 4px; padding: 0 16px 14px; }
.sg-kt-fiche--apercu { margin: 10px 0 14px; text-align: left; animation: none; }
.sg-kt-fiche--apercu .sg-kt-fiche__visuel { height: 110px; }
.sg-kt-art__tous-place { display: inline-block; margin-top: 6px; padding: 2px 8px; font-size: 10px; color: var(--sg-ink-faint); border: 1px solid transparent; }
/* ==========================================================================
   VERSEMENTS : caisse du jour, journal, soldes, encaissement (ticket), détail
   ========================================================================== */
.sg-cs { display: grid; grid-template-columns: minmax(300px, 1.05fr) minmax(0, 1.4fr) minmax(280px, 1fr); gap: 16px; margin-bottom: 18px; }
.sg-cs > * { padding: 18px 20px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 18px; box-shadow: var(--sg-shadow-xs); }
.sg-cs__jour {
    position: relative; overflow: hidden; color: #FFFFFF; border: 0;
    background: radial-gradient(120% 140% at 100% 0%, rgba(212, 163, 57, .3), transparent 55%), linear-gradient(130deg, #06402A, #0B6B45);
    box-shadow: 0 18px 36px -22px rgba(6, 64, 42, .8);
}
.sg-cs__jour::before { position: absolute; inset: 0; content: ""; background-image: var(--sg-pattern); background-size: 80px 80px; opacity: .3; pointer-events: none; }
.sg-cs__jour > * { position: relative; }
.sg-cs__sur { margin: 0; font-size: .71875rem; font-weight: 700; letter-spacing: .06em; color: #F2CF7E; }
.sg-cs__sur i { margin-right: 6px; }
.sg-cs__total { margin: 6px 0 2px; font-size: 2.25rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sg-cs__total small { font-size: .9375rem; font-weight: 600; color: #F2CF7E; }
.sg-cs__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; font-size: .78125rem; opacity: .92; }
.sg-cs__evol.is-hausse { color: #8FE3B8; } .sg-cs__evol.is-baisse { color: #FFB3AB; }
.sg-cs__modes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sg-cs__modes span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; font-size: .71875rem; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; }
.sg-cs__modes span b { color: #F2CF7E; }
.sg-cs__modes .is-vide { opacity: .8; }
body.app .sg-cs__lien { font-size: .78125rem; font-weight: 700; color: #F2CF7E; text-decoration: none; }
body.app .sg-cs__lien i { margin-left: 4px; transition: transform 200ms var(--sg-ease-out); }
body.app .sg-cs__lien:hover i { transform: translateX(3px); }
.sg-cs__courbe { display: flex; flex-direction: column; }
.sg-cs__courbe-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.sg-cs__courbe-tete strong { font-size: .875rem; color: var(--sg-ink); }
.sg-cs__courbe-tete span { font-size: .75rem; color: var(--sg-ink-muted); }
.sg-cs__barres { display: flex; flex: 1; align-items: flex-end; gap: 3px; min-height: 120px; }
body.app .sg-cs__barre { position: relative; display: flex; flex: 1; align-items: flex-end; height: 100%; text-decoration: none; }
.sg-cs__barre i { display: block; width: 100%; height: var(--h); min-height: 2px; background: linear-gradient(180deg, #2E9A64, #0B6B45); border-radius: 4px 4px 2px 2px; transition: filter 160ms, transform 160ms; transform-origin: bottom; animation: sg-cs-barre 700ms var(--sg-ease-out) both; }
@keyframes sg-cs-barre { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.sg-cs__barre.is-vide i { background: var(--sg-surface-300); }
.sg-cs__barre.is-auj i { background: linear-gradient(180deg, #F2CF7E, #D4A339); }
.sg-cs__barre:hover i { filter: brightness(1.15); }
.sg-cs__axe { display: flex; justify-content: space-between; margin-top: 6px; font-size: .6875rem; color: var(--sg-ink-faint); }
.sg-cs__recouv { display: flex; align-items: center; gap: 16px; }
.sg-cs__recouv-titre { margin: 0 0 6px; font-size: .875rem; font-weight: 800; color: var(--sg-ink); }
.sg-cs__recouv dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 0; }
.sg-cs__recouv dt { font-size: .65625rem; font-weight: 600; color: var(--sg-ink-muted); }
.sg-cs__recouv dd { margin: 0; font-size: .875rem; font-weight: 800; color: var(--sg-ink); font-variant-numeric: tabular-nums; }
.sg-cs__recouv dd.is-vert { color: #1F7A4A; } .sg-cs__recouv dd.is-rouge { color: #C0392B; }

.sg-bascule { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; margin: 0; font-size: .8125rem; font-weight: 600; color: var(--sg-ink-muted); background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 10px; cursor: pointer; }
.sg-bascule input { accent-color: #C0392B; }

/* Journal regroupé par jour */
.sg-jr { padding: 4px 0 8px; }
.sg-jr__jour { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; gap: 10px; padding: 10px 22px; background: color-mix(in srgb, var(--sg-brand-green-soft) 60%, var(--sg-card-bg)); border-top: 1px solid var(--sg-border); border-bottom: 1px solid var(--sg-border); }
.sg-jr__date { font-size: .78125rem; color: var(--sg-ink-muted); }
.sg-jr__date b { margin-right: 6px; color: var(--sg-ink); }
.sg-jr__somme { font-size: .78125rem; color: var(--sg-ink-muted); }
.sg-jr__somme b { color: #1F7A4A; }
.sg-jr__ligne {
    display: grid; grid-template-columns: 44px 38px minmax(0, 1.8fr) minmax(0, 1.1fr) 150px 150px auto; align-items: center; gap: 14px;
    padding: 11px 22px; border-bottom: 1px solid color-mix(in srgb, var(--sg-border) 70%, transparent); cursor: pointer; outline: none; transition: background 140ms;
}
.sg-jr__ligne:hover, .sg-jr__ligne:focus-visible { background: color-mix(in srgb, var(--sg-brand-green-soft) 45%, transparent); }
.sg-jr__heure { font-size: .75rem; font-weight: 600; color: var(--sg-ink-faint); font-variant-numeric: tabular-nums; }
.sg-jr__mode { display: grid; place-items: center; width: 36px; height: 36px; font-size: 14px; color: #FFFFFF; border-radius: 11px; background: linear-gradient(145deg, #2E9A64, #1F7A4A); }
.sg-jr__mode.is-mobile_money { background: linear-gradient(145deg, #E0B556, #B88A2A); }
.sg-jr__mode.is-virement { background: linear-gradient(145deg, #2B6CA3, #1F4E79); }
.sg-jr__mode.is-cheque { background: linear-gradient(145deg, #8A4FA3, #5B2A6E); }
.sg-jr__qui { min-width: 0; }
.sg-jr__qui strong { display: block; overflow: hidden; font-size: .84375rem; color: var(--sg-ink); text-overflow: ellipsis; white-space: nowrap; }
.sg-jr__qui small, .sg-jr__detail small { display: block; overflow: hidden; font-size: .71875rem; color: var(--sg-ink-faint); text-overflow: ellipsis; white-space: nowrap; }
.sg-jr__qui .sg-num { color: var(--sg-or-fonce); font-weight: 600; }
.sg-jr__detail { min-width: 0; font-size: .78125rem; color: var(--sg-ink-muted); }
.sg-jr__solde small { font-size: .6875rem; color: var(--sg-ink-muted); }
.sg-jr__barre { --p: 0%; display: block; height: 5px; margin-bottom: 4px; overflow: hidden; background: var(--sg-surface-300); border-radius: 999px; }
.sg-jr__barre i { display: block; width: var(--p); height: 100%; background: #1F7A4A; border-radius: inherit; }
.sg-jr__montant { font-size: 1rem; font-weight: 800; color: var(--sg-ink); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sg-jr__montant small { font-size: .65625rem; font-weight: 600; color: var(--sg-ink-muted); }
.sg-jr__montant em { display: block; font-size: .65625rem; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #C0392B; }
.sg-jr__actions { display: flex; gap: 4px; }
.sg-jr__ligne.is-annule { background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, #C0392B 4%, transparent) 10px 20px); }
.sg-jr__ligne.is-annule .sg-jr__qui strong, .sg-jr__ligne.is-annule .sg-jr__montant { text-decoration: line-through; color: var(--sg-ink-faint); }
.sg-jr__ligne.is-annule .sg-jr__mode { filter: grayscale(1); opacity: .5; }

/* Soldes à recouvrer */
.sg-statut-mini { display: inline-block; padding: 0 6px; margin-right: 4px; font-size: .625rem; font-weight: 700; border-radius: 5px; color: var(--sg-ink-muted); background: var(--sg-well-bg); }
.sg-statut-mini.is-success { color: #1F7A4A; background: color-mix(in srgb, #1F7A4A 12%, transparent); }
.sg-statut-mini.is-info { color: #1F4E79; background: color-mix(in srgb, #2B6CA3 12%, transparent); }
.sg-statut-mini.is-gold { color: #8A5A12; background: var(--sg-brand-gold-soft); }
.sg-solde { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.sg-solde__barre { --p: 0%; flex: 1; height: 7px; overflow: hidden; background: var(--sg-surface-300); border-radius: 999px; }
.sg-solde__barre i { display: block; width: var(--p); height: 100%; background: linear-gradient(90deg, #E0B556, #1F7A4A); border-radius: inherit; }
.sg-solde b { font-size: .75rem; color: var(--sg-ink); }
table.sg-table--registre .is-vert { color: #1F7A4A; }
body.app .sg-row-btn--wa { color: #1E9E57; }
body.app .sg-row-btn--wa:hover { color: #FFFFFF; background: #1E9E57; }
body.app table.sg-table--registre .sg-row-btn--encaisser { width: auto; padding: 0 10px; gap: 6px; font-size: .71875rem; font-weight: 700; color: var(--sg-brand-green); background: var(--sg-brand-green-soft); }
body.app table.sg-table--registre .sg-row-btn--encaisser:hover { color: #FFFFFF; background: var(--sg-brand-green); }

/* Détail d'un versement */
.sg-vd__ico { font-size: 1.75rem; color: #2B1D00; background: linear-gradient(145deg, #F2CF7E, #D4A339); }
body.app .sg-vd .sg-detail__nom small { font-size: .875rem; color: #F2CF7E; }
.sg-vd__lettres { margin: -4px 0 8px; font-size: .78125rem; font-style: italic; color: rgba(255, 255, 255, .85); }
.sg-vd__grille { grid-template-columns: 1fr 1fr; }
.sg-vd__situation { margin-top: 14px; padding: 16px 18px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 16px; }
.sg-vd__situation-tete { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: .84375rem; color: var(--sg-ink); }
.sg-vd__situation-tete span { font-weight: 800; color: #1F7A4A; }
.sg-vd__rail { display: flex; height: 12px; margin-bottom: 12px; overflow: hidden; background: var(--sg-surface-300); border-radius: 999px; }
.sg-vd__rail i { display: block; height: 100%; background: #1F7A4A; transition: width 500ms var(--sg-ease-out); }
.sg-vd__rail i.is-ici { background: repeating-linear-gradient(135deg, #D4A339 0 6px, #E0B556 6px 12px); }
.sg-vd__chiffres { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 0; }
.sg-vd__chiffres dt { font-size: .65625rem; font-weight: 600; color: var(--sg-ink-muted); }
.sg-vd__chiffres dd { margin: 2px 0 0; font-size: .875rem; font-weight: 800; color: var(--sg-ink); white-space: nowrap; }
.sg-vd__chiffres dd.is-vert { color: #1F7A4A; } .sg-vd__chiffres dd.is-rouge { color: #C0392B; }

/* Encaisser : souscriptions, montants rapides, modes de paiement */
.sg-cs-sous { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.sg-cs-sous__vide { grid-column: 1 / -1; margin: 0; padding: 14px; font-size: .8125rem; color: var(--sg-ink-faint); text-align: center; border: 2px dashed var(--sg-border); border-radius: 12px; }
.sg-cs-sous__input { position: absolute; opacity: 0; pointer-events: none; }
.sg-cs-sous__carte { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; margin: 0; background: var(--sg-card-bg); border: 2px solid var(--sg-border); border-radius: 14px; cursor: pointer; transition: border-color 160ms, box-shadow 160ms, transform 160ms; }
.sg-cs-sous__carte:hover { transform: translateY(-1px); border-color: color-mix(in srgb, #1F7A4A 40%, var(--sg-border)); }
.sg-cs-sous__input:checked + .sg-cs-sous__carte { border-color: #1F7A4A; box-shadow: 0 0 0 3px color-mix(in srgb, #1F7A4A 18%, transparent); background: color-mix(in srgb, #1F7A4A 4%, var(--sg-card-bg)); }
.sg-cs-sous__input:focus-visible + .sg-cs-sous__carte { outline: 2px solid #1F7A4A; outline-offset: 2px; }
.sg-cs-sous__carte.is-solde { opacity: .55; cursor: not-allowed; }
.sg-cs-sous__haut { display: flex; justify-content: space-between; gap: 8px; }
.sg-cs-sous__haut strong { font-size: .84375rem; color: var(--sg-ink); }
.sg-cs-sous__code { font-family: var(--sg-font-mono); font-size: .65625rem; color: var(--sg-or-fonce); }
.sg-cs-sous__reste { font-size: 1rem; font-weight: 800; color: #C0392B; }
.sg-cs-sous__carte.is-solde .sg-cs-sous__reste { color: #1F7A4A; }
.sg-cs-sous__barre { --p: 0%; display: block; height: 6px; overflow: hidden; background: var(--sg-surface-300); border-radius: 999px; }
.sg-cs-sous__barre i { display: block; width: var(--p); height: 100%; background: #1F7A4A; border-radius: inherit; }
.sg-cs-sous__carte small { font-size: .6875rem; color: var(--sg-ink-muted); }
.sg-cs-montant input { height: 52px; font-size: 1.375rem !important; font-weight: 800; }
.sg-cs-rapides { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -6px; }
body.app .sg-cs-rapide { display: inline-flex; align-items: baseline; gap: 6px; height: 34px; padding: 0 12px; font-size: .75rem; color: var(--sg-ink-muted); background: var(--sg-well-bg); border: 1px solid var(--sg-border); border-radius: 10px; transition: border-color 160ms, background 160ms, color 160ms; }
body.app .sg-cs-rapide b { font-size: .8125rem; color: var(--sg-ink); }
body.app .sg-cs-rapide:first-child { color: #FFFFFF; background: #1F7A4A; border-color: #1F7A4A; }
body.app .sg-cs-rapide:first-child b { color: #FFFFFF; }
body.app .sg-cs-rapide:hover { border-color: #1F7A4A; }
.sg-cs-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sg-cs-modes__input { position: absolute; opacity: 0; pointer-events: none; }
.sg-cs-modes__option { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 8px; margin: 0; font-size: .75rem; font-weight: 700; color: var(--sg-ink-muted); text-align: center; background: var(--sg-card-bg); border: 2px solid var(--sg-border); border-radius: 14px; cursor: pointer; transition: border-color 160ms, color 160ms; }
.sg-cs-modes__option i { font-size: 20px; color: var(--sg-ink-faint); }
.sg-cs-modes__input:checked + .sg-cs-modes__option { color: var(--sg-ink); border-color: #D4A339; background: color-mix(in srgb, #D4A339 7%, var(--sg-card-bg)); }
.sg-cs-modes__input:checked + .sg-cs-modes__option i { color: #9A7322; }
.sg-cs-modes__input:focus-visible + .sg-cs-modes__option { outline: 2px solid #1F7A4A; outline-offset: 2px; }
.sg-s2-pelerin { display: flex; align-items: center; gap: 10px; }
.sg-s2-pelerin__av { display: grid; flex: none; place-items: center; width: 30px; height: 30px; font-size: .6875rem; color: #06402A; background: #E6EFE8; border-radius: 9px; }
.sg-s2-pelerin strong { display: block; font-size: .8125rem; }
.sg-s2-pelerin small { font-size: .6875rem; opacity: .75; }

/* Ticket (reçu en préparation) */
.sg-ticket {
    --dent: 9px; position: relative; margin: 12px 0 0; color: var(--sg-ink); text-align: left; background: #FFFFFF;
    border-radius: 6px; box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .55);
    -webkit-mask: radial-gradient(circle at 50% 0, transparent 5px, #000 5.5px) top / 14px 10px repeat-x, linear-gradient(#000, #000) 0 9px / 100% calc(100% - 18px) no-repeat, radial-gradient(circle at 50% 100%, transparent 5px, #000 5.5px) bottom / 14px 10px repeat-x;
    mask: radial-gradient(circle at 50% 0, transparent 5px, #000 5.5px) top / 14px 10px repeat-x, linear-gradient(#000, #000) 0 9px / 100% calc(100% - 18px) no-repeat, radial-gradient(circle at 50% 100%, transparent 5px, #000 5.5px) bottom / 14px 10px repeat-x;
}
:root[data-theme="dark"] .sg-ticket { background: #F4F7F5; }
.sg-ticket__tete { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 20px 16px 12px; text-align: center; border-bottom: 2px dashed #DCE3DD; }
.sg-ticket__marque { font-size: .9375rem; font-weight: 800; color: #06402A; }
.sg-ticket__marque small { display: block; font-size: .5625rem; font-weight: 600; letter-spacing: .24em; color: #9A7322; }
.sg-ticket__doc { margin-top: 6px; font-size: .625rem; font-weight: 800; letter-spacing: .18em; color: #9A7322; }
.sg-ticket__num { font-family: var(--sg-font-mono); font-size: .6875rem; color: #5B6B61; }
.sg-ticket__date { font-size: .6875rem; color: #5B6B61; }
.sg-ticket__corps { padding: 12px 16px 6px; }
.sg-ticket__ligne { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: .71875rem; color: #5B6B61; }
.sg-ticket__ligne b { overflow: hidden; color: #0C1A12; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.sg-ticket__montant { margin: 10px 0 2px; font-size: 1.75rem; font-weight: 800; line-height: 1.1; text-align: center; color: #06402A; font-variant-numeric: tabular-nums; }
.sg-ticket__montant small { font-size: .75rem; color: #9A7322; }
.sg-ticket__lettres { min-height: 2.6em; margin: 0 0 8px; font-size: .6875rem; font-style: italic; line-height: 1.35; text-align: center; color: #5B6B61; }
.sg-ticket__mode { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 10px; font-size: .71875rem; font-weight: 600; color: #0C1A12; }
.sg-ticket__mode i { color: #9A7322; }
.sg-ticket__sit { margin: 0; padding-top: 8px; border-top: 1px dotted #DCE3DD; }
.sg-ticket__sit > div { display: flex; justify-content: space-between; padding: 2px 0; font-size: .71875rem; }
.sg-ticket__sit dt { font-weight: 500; color: #5B6B61; }
.sg-ticket__sit dd { margin: 0; font-weight: 700; color: #0C1A12; font-variant-numeric: tabular-nums; }
.sg-ticket__sit .is-fort { margin-top: 3px; padding-top: 5px; border-top: 1px solid #DCE3DD; font-size: .8125rem; }
.sg-ticket__sit dd.is-vert { color: #1F7A4A; } .sg-ticket__sit dd.is-rouge { color: #C0392B; }
.sg-ticket__barre { display: flex; height: 8px; margin-top: 10px; overflow: hidden; background: #E6ECE8; border-radius: 999px; }
.sg-ticket__barre i { display: block; height: 100%; background: #1F7A4A; transition: width 400ms var(--sg-ease-out); }
.sg-ticket__barre i.is-ici { background: repeating-linear-gradient(135deg, #D4A339 0 6px, #E0B556 6px 12px); }
.sg-ticket__part { margin: 4px 0 0; font-size: .65625rem; text-align: center; color: #5B6B61; }
.sg-ticket__pied { padding: 10px 16px 20px; font-size: .625rem; text-align: center; color: #8C9A91; border-top: 2px dashed #DCE3DD; margin-top: 8px; }
.sg-ticket.is-solde .sg-ticket__montant { color: #1F7A4A; }

@media (max-width: 1399.98px) {
    .sg-cs { grid-template-columns: 1fr 1fr; }
    .sg-cs__courbe { grid-column: 1 / -1; order: 3; }
    .sg-jr__ligne { grid-template-columns: 40px 36px minmax(0, 1.6fr) minmax(0, 1fr) 130px auto; }
    .sg-jr__solde { display: none; }
}
@media (max-width: 767.98px) {
    .sg-cs { grid-template-columns: 1fr; }
    .sg-jr__ligne { grid-template-columns: 36px minmax(0, 1fr) auto; }
    .sg-jr__heure, .sg-jr__detail { display: none; }
    .sg-cs-modes { grid-template-columns: 1fr 1fr; }
    .sg-vd__chiffres { grid-template-columns: 1fr 1fr; }
}
body.app table.sg-table--registre .sg-row-btn--encaisser { display: inline-flex; align-items: center; height: 32px; white-space: nowrap; }
/* Analyse : menu « Autres analyses » */
body.app .sg-hero__info--bouton { cursor: pointer; border: 1px solid var(--sg-border); }
.sg-hero__info--bouton .fa-chevron-down, .sg-hero__info--bouton svg:last-child { font-size: 9px; margin-left: 2px; }
.sg-an-autres { min-width: 240px; padding: 6px; border-radius: 12px; }
.sg-an-autres .dropdown-item { padding: 8px 12px; font-size: .8125rem; border-radius: 8px; }
/* Logo du reçu en préparation, versements successifs (itérations), fenêtre de souscription */
.sg-ticket__logo { width: 52px; height: 52px; margin-bottom: 4px; object-fit: contain; border: 1px solid #E7CF94; border-radius: 12px; }
.sg-vd__historique { margin-top: 14px; padding: 16px 18px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 16px; }
body.app .sg-vd__releve { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; font-size: .75rem; font-weight: 700; color: var(--sg-brand-green); background: var(--sg-brand-green-soft); border: 0; border-radius: 9px; }
body.app .sg-vd__releve:hover { color: #FFFFFF; background: var(--sg-brand-green); }
.sg-iter { position: relative; margin: 0; padding: 0; list-style: none; }
.sg-iter__item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; }
.sg-iter__item:not(:last-child)::after { position: absolute; top: 40px; bottom: -8px; left: 15px; width: 2px; content: ""; background: repeating-linear-gradient(180deg, var(--sg-border) 0 4px, transparent 4px 8px); }
.sg-iter__pt { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; font-size: .78125rem; font-weight: 800; color: #FFFFFF; background: linear-gradient(145deg, #2E9A64, #1F7A4A); border-radius: 50%; }
.sg-iter__item.is-ici .sg-iter__pt { color: #2B1D00; background: linear-gradient(145deg, #F2CF7E, #D4A339); box-shadow: 0 0 0 4px color-mix(in srgb, #D4A339 25%, transparent); }
.sg-iter__item.is-ici .sg-iter__corps { padding: 6px 10px; margin: -6px -10px; background: color-mix(in srgb, #D4A339 8%, transparent); border-radius: 10px; }
.sg-iter__item.is-annule .sg-iter__pt { background: #A9B5AE; }
.sg-iter__item.is-annule strong, .sg-iter__item.is-annule .sg-iter__montant { color: var(--sg-ink-faint); text-decoration: line-through; }
.sg-iter__haut { display: flex; justify-content: space-between; gap: 10px; }
.sg-iter__haut strong { font-size: .8125rem; color: var(--sg-ink); }
.sg-iter__montant { font-size: .875rem; font-weight: 800; color: #1F7A4A; white-space: nowrap; }
.sg-iter__corps small { display: block; font-size: .6875rem; color: var(--sg-ink-faint); }
.sg-iter__barre { --p: 0%; display: block; height: 5px; margin: 5px 0 3px; overflow: hidden; background: var(--sg-surface-300); border-radius: 999px; }
.sg-iter__barre i { display: block; width: var(--p); height: 100%; background: linear-gradient(90deg, #E0B556, #1F7A4A); border-radius: inherit; }
.sg-iter__cumul { color: var(--sg-ink-muted) !important; }
.sg-iter__vide { padding: 12px; font-size: .8125rem; text-align: center; color: var(--sg-ink-faint); }
.sg-sd__note { margin: 0; font-size: .78125rem; color: var(--sg-ink-muted); }
#souscriptionModal .sg-detail__avatar img { width: 100%; height: 100%; object-fit: cover; }
/* ==========================================================================
   STOCK DES KITS : période, état, journal des mouvements, historique
   ========================================================================== */
.sg-periode { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding: 10px 12px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 16px; box-shadow: var(--sg-shadow-xs); }
.sg-periode__dates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sg-periode__dates label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .78125rem; font-weight: 600; color: var(--sg-ink-muted); }
.sg-periode__dates input { width: 150px; height: 38px; }
body.app .sg-periode__ok { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; font-size: .8125rem; font-weight: 700; color: #FFFFFF; background: var(--sg-brand-green); border: 0; border-radius: 10px; }
.sg-st-ico { color: var(--sg-brand-green); background: var(--sg-brand-green-soft); font-size: 15px; }
.sg-st-cloture { font-size: .9375rem; font-weight: 800; color: var(--sg-ink); font-variant-numeric: tabular-nums; }
.sg-st-table tfoot td { padding: 12px; font-size: .8125rem; background: color-mix(in srgb, var(--sg-brand-green-soft) 50%, var(--sg-card-bg)); border-top: 2px solid var(--sg-border); }
.sg-st-table tr.is-inactif { opacity: .55; }
table.sg-table--registre .is-or { color: #9A7322; }
.sg-st-niveau i { background: #1F7A4A; }
.sg-st-niveau.is-bas i { background: #D4A339; } .sg-st-niveau.is-rupture i { background: #C0392B; } .sg-st-niveau.is-non_suivi i, .sg-st-niveau.is-inactif i { background: #A9B5AE; }
.sg-st-filtres { display: flex; gap: 8px; }
.sg-st-filtres select.sg-select { width: auto; min-width: 170px; height: 38px; }
.sg-st-ligne { display: grid; grid-template-columns: 38px minmax(0, 1.4fr) minmax(0, 1.6fr) 110px auto; align-items: center; gap: 14px; padding: 11px 22px; border-bottom: 1px solid color-mix(in srgb, var(--sg-border) 70%, transparent); }
.sg-st-ligne__ico { display: grid; place-items: center; width: 36px; height: 36px; font-size: 14px; color: #FFFFFF; border-radius: 11px; background: linear-gradient(145deg, #2B6CA3, #1F4E79); }
.sg-st-ligne.is-remise .sg-st-ligne__ico { background: linear-gradient(145deg, #E0B556, #B88A2A); }
.sg-st-ligne.is-ajustement .sg-st-ligne__ico { background: linear-gradient(145deg, #8A4FA3, #5B2A6E); }
.sg-st-ligne__qte { font-size: 1rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.sg-st-ligne__qte.is-plus { color: #1F7A4A; } .sg-st-ligne__qte.is-moins { color: #C0392B; }
.sg-case-cocher { display: inline-flex; align-items: center; gap: 8px; height: 46px; margin: 0; font-size: .8125rem; color: var(--sg-ink-muted); cursor: pointer; }
.sg-case-cocher input { accent-color: #1F7A4A; width: 16px; height: 16px; }
.sg-st-apres { margin: 14px 0 0; padding: 10px 14px; font-size: .8125rem; font-weight: 600; color: #1F4E79; background: color-mix(in srgb, #2B6CA3 9%, transparent); border-radius: 10px; }
.sg-st-apres:empty { display: none; }
.sg-st-apres.is-erreur { color: #A93226; background: color-mix(in srgb, #C0392B 10%, transparent); }
.sg-segment--motifs { display: grid; grid-template-columns: repeat(3, 1fr); }
.sg-segment--motifs .sg-segment__option { justify-content: center; font-size: .75rem; }
.sg-iter--stock .sg-iter__pt { font-size: 12px; background: linear-gradient(145deg, #2B6CA3, #1F4E79); }
.sg-iter--stock .is-remise .sg-iter__pt { background: linear-gradient(145deg, #E0B556, #B88A2A); }
.sg-iter--stock .is-ajustement .sg-iter__pt { background: linear-gradient(145deg, #8A4FA3, #5B2A6E); }
.sg-iter__montant.is-moins { color: #C0392B; }
@media (max-width: 991.98px) { .sg-st-ligne { grid-template-columns: 36px minmax(0, 1fr) auto; } .sg-st-ligne .sg-jr__detail { display: none; } .sg-segment--motifs { grid-template-columns: 1fr 1fr; } }
/* Dates précises (journal de caisse, panneau de filtres des clients), états et rapports */
.sg-jr-dates { gap: 10px; padding-top: 0; }
.sg-jr-dates label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .78125rem; font-weight: 600; color: var(--sg-ink-muted); }
.sg-jr-dates input { width: 150px; height: 38px; }
.sg-jr-dates__lib { font-size: .75rem; font-weight: 700; color: var(--sg-ink-faint); }
.sg-jr-dates__lib i { margin-right: 5px; }
.sg-panneau-filtres__dates { display: flex; gap: 6px; }
.sg-panneau-filtres__dates input { height: 36px; font-size: .78125rem; }
body.app .sg-panneau-filtres__ok { margin-top: 6px; height: 32px; padding: 0 12px; font-size: .75rem; font-weight: 700; color: #FFFFFF; background: var(--sg-brand-green); border: 0; border-radius: 8px; }

.sg-etats-filtres select.sg-select { width: auto; min-width: 200px; height: 38px; }
.sg-etats { margin-bottom: 22px; }
body.app .sg-etats__titre { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1rem; font-weight: 800; color: var(--sg-ink); }
.sg-etats__titre span { display: grid; place-items: center; width: 32px; height: 32px; font-size: 13px; color: #FFFFFF; background: linear-gradient(145deg, #0B6B45, #06402A); border-radius: 10px; }
.sg-etats__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.sg-etat-carte { display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; gap: 10px 14px; padding: 16px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 16px; box-shadow: var(--sg-shadow-xs); transition: border-color 160ms, transform 160ms; }
.sg-etat-carte:hover { transform: translateY(-2px); border-color: color-mix(in srgb, #D4A339 45%, var(--sg-border)); }
.sg-etat-carte.is-bloque { opacity: .7; }
.sg-etat__ico { display: grid; place-items: center; width: 42px; height: 42px; font-size: 16px; color: #9A7322; background: var(--sg-brand-gold-soft); border-radius: 12px; }
body.app .sg-etat-carte h3 { margin: 0 0 3px; font-size: .9375rem; font-weight: 800; color: var(--sg-ink); }
.sg-etat-carte p { margin: 0 0 8px; font-size: .78125rem; line-height: 1.45; color: var(--sg-ink-muted); }
.sg-etat__puces { display: flex; flex-wrap: wrap; gap: 5px; }
.sg-etat__puces span { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; font-size: .65625rem; font-weight: 700; color: var(--sg-ink-muted); background: var(--sg-well-bg); border-radius: 999px; }
.sg-etat__puces .is-periode { color: #1F4E79; background: color-mix(in srgb, #2B6CA3 11%, transparent); }
.sg-etat__puces .is-voyage { color: #8A5A12; background: var(--sg-brand-gold-soft); }
.sg-etat__actions { grid-column: 2; display: flex; gap: 8px; }
body.app .sg-etat__btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; font-size: .75rem; font-weight: 700; text-decoration: none; border: 1px solid var(--sg-border); border-radius: 9px; background: var(--sg-card-bg); }
body.app .sg-etat__btn.is-pdf { color: #A93226; } body.app .sg-etat__btn.is-csv { color: #1F7A4A; }
body.app .sg-etat__btn:hover { background: var(--sg-well-bg); }
.sg-etat__requis { font-size: .75rem; font-weight: 600; color: #9A7322; }
.sg-etat-carte { grid-template-columns: 42px minmax(0, 1fr); overflow: hidden; }
.sg-etat__corps { min-width: 0; }
.sg-etat-carte p { overflow-wrap: anywhere; }
.sg-etat-carte p, .sg-etat-carte h3 { white-space: normal; text-overflow: clip; }

/* ==========================================================================
   TRÉSORERIE : bilan, flux, journal, dépenses, personnel et paie
   ========================================================================== */
.sg-tr-bilan { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(260px, .9fr) minmax(0, 1.3fr); gap: 16px; margin-bottom: 18px; }
.sg-tr-bilan > * { padding: 18px 20px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 18px; box-shadow: var(--sg-shadow-xs); }
.sg-tr-bilan__solde { position: relative; overflow: hidden; color: #FFFFFF; border: 0; background: radial-gradient(120% 140% at 100% 0%, rgba(212, 163, 57, .3), transparent 55%), linear-gradient(130deg, #06402A, #0B6B45); }
.sg-tr-bilan__solde::before { position: absolute; inset: 0; content: ""; background-image: var(--sg-pattern); background-size: 80px 80px; opacity: .3; pointer-events: none; }
.sg-tr-bilan__solde > * { position: relative; }
.sg-tr-bilan__resultat { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 5px 11px; font-size: .78125rem; font-weight: 700; color: #8FE3B8; background: rgba(255, 255, 255, .1); border-radius: 999px; }
.sg-tr-bilan__resultat.is-moins { color: #FFB3AB; }
.sg-tr-flux { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.sg-tr-flux__ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sg-tr-flux__ligne span { font-size: .8125rem; font-weight: 600; color: var(--sg-ink-muted); }
.sg-tr-flux__ligne span i { margin-right: 6px; }
.sg-tr-flux__ligne strong { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.sg-tr-flux__ligne small { font-size: .6875rem; color: var(--sg-ink-muted); }
.sg-tr-flux__ligne.is-entree strong, .sg-tr-flux__ligne.is-entree i { color: #1F7A4A; }
.sg-tr-flux__ligne.is-sortie strong, .sg-tr-flux__ligne.is-sortie i { color: #C0392B; }
.sg-tr-flux__barre { display: flex; gap: 3px; height: 10px; overflow: hidden; border-radius: 999px; }
.sg-tr-flux__barre i { flex-basis: 0; background: #1F7A4A; } .sg-tr-flux__barre i.is-sortie { background: #C0392B; }
.sg-tr-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 0; padding: 0; list-style: none; align-content: center; }
body.app .sg-tr-sources a { display: flex; align-items: center; gap: 9px; padding: 6px 8px; font-size: .78125rem; color: var(--sg-ink-muted); text-decoration: none; border-radius: 10px; }
body.app .sg-tr-sources a:hover { background: var(--sg-well-bg); }
.sg-tr-sources a span { display: grid; flex: none; place-items: center; width: 28px; height: 28px; font-size: 11px; color: #FFFFFF; background: #C0392B; border-radius: 8px; }
.sg-tr-sources .is-entree a span { background: #1F7A4A; }
.sg-tr-sources a b { margin-left: auto; color: var(--sg-ink); font-variant-numeric: tabular-nums; }
.sg-tr-graphes { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; margin-bottom: 18px; }
.sg-tr-graphes > section { padding: 18px 20px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 18px; box-shadow: var(--sg-shadow-xs); }
.sg-tr-legende { display: flex; align-items: center; gap: 6px; }
.sg-tr-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: #1F7A4A; } .sg-tr-legende i.is-sortie { background: #C0392B; margin-left: 8px; }
.sg-tr-mois { display: flex; align-items: flex-end; gap: 8px; height: 170px; }
body.app .sg-tr-mois__col { display: flex; flex: 1; flex-direction: column; align-items: center; height: 100%; text-decoration: none; }
.sg-tr-mois__barres { display: flex; flex: 1; align-items: flex-end; gap: 3px; width: 100%; }
.sg-tr-mois__barres i { flex: 1; height: var(--h); background: linear-gradient(180deg, #2E9A64, #1F7A4A); border-radius: 4px 4px 1px 1px; transform-origin: bottom; animation: sg-cs-barre 700ms var(--sg-ease-out) both; }
.sg-tr-mois__barres i.is-sortie { background: linear-gradient(180deg, #E07A6E, #C0392B); }
.sg-tr-mois__col small { margin-top: 5px; font-size: .65625rem; color: var(--sg-ink-faint); text-transform: capitalize; }
.sg-tr-mois__col:hover i { filter: brightness(1.12); }
body.app .sg-tr-ligne { display: grid; grid-template-columns: 38px minmax(0, 1.5fr) minmax(0, 1.3fr) 170px 20px; align-items: center; gap: 14px; padding: 11px 22px; color: inherit; text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--sg-border) 70%, transparent); transition: background 140ms; }
body.app .sg-tr-ligne:hover { background: color-mix(in srgb, var(--sg-brand-green-soft) 45%, transparent); }
.sg-tr-ligne__ico { display: grid; place-items: center; width: 36px; height: 36px; font-size: 14px; color: #FFFFFF; border-radius: 11px; background: linear-gradient(145deg, #2E9A64, #1F7A4A); }
.sg-tr-ligne__ico.is-depense { background: linear-gradient(145deg, #D9534F, #A93226); }
.sg-tr-ligne__ico.is-salaire { background: linear-gradient(145deg, #2B6CA3, #1F4E79); }
.sg-tr-ligne__ico.is-stock { background: linear-gradient(145deg, #E0B556, #B88A2A); }
.sg-tr-ligne__ico.is-visa { background: linear-gradient(145deg, #8A4FA3, #5B2A6E); }
.sg-tr-ligne__montant { font-size: 1rem; font-weight: 800; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: #1F7A4A; }
.sg-tr-ligne.is-sortie .sg-tr-ligne__montant { color: #C0392B; }
.sg-tr-ligne__montant small { font-size: .65625rem; font-weight: 600; color: var(--sg-ink-muted); }
.sg-tr-ligne__fleche { font-size: 11px; color: var(--sg-ink-faint); opacity: 0; transition: opacity 140ms; }
.sg-tr-ligne:hover .sg-tr-ligne__fleche { opacity: 1; }
.sg-jr__somme b.is-moins { color: #C0392B; }
.sg-tr-plus { margin: 0; padding: 14px 22px; font-size: .78125rem; color: var(--sg-ink-muted); }
.sg-tr-note { margin: 0 0 14px; padding: 11px 16px; font-size: .78125rem; color: #1F4E79; background: color-mix(in srgb, #2B6CA3 9%, var(--sg-card-bg)); border: 1px solid color-mix(in srgb, #2B6CA3 18%, transparent); border-radius: 12px; }
.sg-tr-note i { margin-right: 6px; } .sg-tr-note a { font-weight: 700; }
.sg-tr-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 16px; }
body.app .sg-tr-cat { display: flex; align-items: center; gap: 11px; padding: 12px 14px; color: inherit; text-decoration: none; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 14px; transition: border-color 160ms; }
body.app .sg-tr-cat:hover, body.app .sg-tr-cat.is-actif { border-color: #C0392B; }
.sg-tr-cat small { display: block; font-size: .6875rem; color: var(--sg-ink-muted); }
.sg-tr-cat strong { display: block; font-size: .9375rem; font-weight: 800; color: var(--sg-ink); font-variant-numeric: tabular-nums; }
.sg-tr-cat em { font-size: .65625rem; font-style: normal; color: var(--sg-ink-faint); }
.sg-tr-cat__ico { display: grid; flex: none; place-items: center; width: 36px; height: 36px; font-size: 14px; color: #FFFFFF; border-radius: 11px; background: #7C8B82; }
.sg-tr-cat__ico.is-bleu { background: #2B6CA3; } .sg-tr-cat__ico.is-or { background: #B88A2A; } .sg-tr-cat__ico.is-vert { background: #1F7A4A; } .sg-tr-cat__ico.is-rouge { background: #C0392B; }
.sg-tr-paie { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-bottom: 16px; padding: 14px 18px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 16px; box-shadow: var(--sg-shadow-xs); }
.sg-tr-paie__mois { display: flex; align-items: center; gap: 10px; }
.sg-tr-paie__lib { font-size: .8125rem; font-weight: 700; color: var(--sg-ink); }
.sg-tr-paie__mois select { width: auto; min-width: 170px; height: 38px; }
.sg-tr-paie__chiffres { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
.sg-tr-paie__chiffres dt { font-size: .65625rem; font-weight: 600; color: var(--sg-ink-muted); }
.sg-tr-paie__chiffres dd { margin: 0; font-size: .9375rem; font-weight: 800; color: var(--sg-ink); }
.sg-tr-paie__chiffres dd.is-vert { color: #1F7A4A; } .sg-tr-paie__chiffres dd.is-rouge { color: #C0392B; }
.sg-tr-paie__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.sg-tr-paie__actions form { margin: 0; }
.sg-tr-employes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.sg-tr-employe { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 18px; box-shadow: var(--sg-shadow-xs); }
.sg-tr-employe.is-parti { opacity: .6; }
.sg-tr-employe header { display: flex; align-items: center; gap: 11px; }
.sg-tr-employe header div { flex: 1; min-width: 0; }
.sg-tr-employe header strong { display: block; font-size: .9375rem; color: var(--sg-ink); }
.sg-tr-employe header small { font-size: .71875rem; color: var(--sg-ink-faint); }
.sg-tr-employe dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0; }
.sg-tr-employe dt { font-size: .65625rem; font-weight: 600; color: var(--sg-ink-muted); }
.sg-tr-employe dd { margin: 0; font-size: .8125rem; font-weight: 700; color: var(--sg-ink); }
.sg-tr-fiche { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; background: var(--sg-well-bg); border-radius: 12px; }
.sg-tr-fiche.is-paye { background: color-mix(in srgb, #1F7A4A 10%, var(--sg-card-bg)); }
.sg-tr-fiche.is-apayer { background: color-mix(in srgb, #D4A339 13%, var(--sg-card-bg)); }
.sg-tr-fiche__etat { font-size: .75rem; font-weight: 600; color: var(--sg-ink-muted); }
.sg-tr-fiche.is-paye .sg-tr-fiche__etat { color: #1F7A4A; } .sg-tr-fiche.is-apayer .sg-tr-fiche__etat { color: #8A5A12; }
.sg-tr-fiche strong { font-size: .9375rem; font-weight: 800; color: var(--sg-ink); white-space: nowrap; }
.sg-tr-fiche small { font-size: .625rem; color: var(--sg-ink-muted); }
.sg-tr-employe footer { display: flex; align-items: center; gap: 6px; }
.sg-tr-employe footer form { margin: 0; }
body.app .sg-tr-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; font-size: .75rem; font-weight: 700; color: var(--sg-brand-green); background: var(--sg-brand-green-soft); border: 0; border-radius: 9px; }
body.app .sg-tr-btn.is-or { color: #2B1D00; background: var(--sg-or-degrade); }
.sg-tr-net { margin: 0; height: 46px; display: flex; align-items: center; font-size: 1.25rem; font-weight: 800; color: #1F7A4A; }
.sg-tr-net.is-erreur { color: #C0392B; }
@media (max-width: 1299.98px) { .sg-tr-bilan { grid-template-columns: 1fr 1fr; } .sg-tr-sources { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); } .sg-tr-graphes { grid-template-columns: 1fr; } }
@media (max-width: 767.98px) { .sg-tr-bilan { grid-template-columns: 1fr; } .sg-tr-sources { grid-template-columns: 1fr; } .sg-tr-ligne { grid-template-columns: 36px minmax(0, 1fr) auto; } .sg-tr-ligne .sg-jr__detail, .sg-tr-ligne__fleche { display: none; } }
/* ==========================================================================
   GROUPEMENTS D'AGENCES : organigramme, quotas, tuiles d'agences, fiche
   ========================================================================== */
.sg-gr { margin-bottom: 20px; overflow: hidden; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 20px; box-shadow: var(--sg-shadow-xs);
    animation: sg-fade-up 460ms var(--sg-ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.sg-gr__tete { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; color: #FFFFFF;
    background: radial-gradient(120% 140% at 100% 0%, rgba(212, 163, 57, .28), transparent 55%), linear-gradient(125deg, #06402A, #0B6B45); }
.sg-gr__tete::before { position: absolute; inset: 0; content: ""; background-image: var(--sg-pattern); background-size: 80px 80px; opacity: .3; pointer-events: none; }
.sg-gr__tete > * { position: relative; }
.sg-gr--libres .sg-gr__tete { color: var(--sg-ink); background: var(--sg-well-bg); }
.sg-gr--libres .sg-gr__tete::before { display: none; }
.sg-gr__ico { display: grid; flex: none; place-items: center; width: 52px; height: 52px; font-size: 21px; color: #2B1D00; background: #F2CF7E; border-radius: 15px; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .45); }
.sg-gr__ico.is-gris { color: #FFFFFF; background: #7C8B82; box-shadow: none; }
.sg-gr__titres { flex: 1; min-width: 0; }
.sg-gr__code { margin: 0; font-size: .71875rem; font-weight: 700; letter-spacing: .08em; color: #F2CF7E; }
body.app .sg-gr__titres h2 { margin: 2px 0 6px; font-size: 1.25rem; font-weight: 800; color: inherit; }
.sg-gr__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: .78125rem; opacity: .92; }
.sg-gr__meta i { margin-right: 5px; color: #F2CF7E; }
.sg-gr--libres .sg-gr__meta i { color: var(--sg-ink-faint); }
.sg-gr__desc { margin: 8px 0 0; font-size: .78125rem; opacity: .85; }
.sg-gr__actions { display: flex; gap: 6px; }
.sg-gr__quotas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; padding: 16px 22px 4px; }
.sg-gr__vide { grid-column: 1 / -1; margin: 0; padding: 10px 14px; font-size: .78125rem; color: var(--sg-ink-muted); background: var(--sg-well-bg); border-radius: 12px; }
.sg-gr__vide i { margin-right: 6px; color: var(--sg-or-fonce); }
.sg-quota { padding: 12px 14px; background: color-mix(in srgb, #D4A339 7%, var(--sg-card-bg)); border: 1px solid color-mix(in srgb, #D4A339 30%, var(--sg-border)); border-radius: 14px; }
.sg-quota__tete { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.sg-quota__tete strong { flex: 1; min-width: 0; overflow: hidden; font-size: .84375rem; color: var(--sg-ink); text-overflow: ellipsis; white-space: nowrap; }
.sg-quota__tete span { font-size: .75rem; color: var(--sg-ink-muted); white-space: nowrap; }
.sg-quota__tete b { font-size: .9375rem; color: var(--sg-ink); }
.sg-quota__suppr { margin: 0; }
body.app .sg-quota__suppr button { width: 22px; height: 22px; padding: 0; font-size: 10px; color: var(--sg-ink-faint); background: none; border: 0; border-radius: 6px; }
body.app .sg-quota__suppr button:hover { color: #C0392B; background: color-mix(in srgb, #C0392B 10%, transparent); }
.sg-quota__barre { --p: 0%; display: block; height: 8px; margin-bottom: 5px; overflow: hidden; background: var(--sg-surface-300); border-radius: 999px; }
.sg-quota__barre i { display: block; width: var(--p); height: 100%; background: linear-gradient(90deg, #E0B556, #1F7A4A); border-radius: inherit; }
.sg-quota small { font-size: .6875rem; color: var(--sg-ink-muted); }
.sg-quota.is-plein .sg-quota__barre i { background: #1F7A4A; }
.sg-quota.is-depasse { background: color-mix(in srgb, #C0392B 7%, var(--sg-card-bg)); border-color: color-mix(in srgb, #C0392B 35%, var(--sg-border)); }
.sg-quota.is-depasse .sg-quota__barre i { background: #C0392B; } .sg-quota.is-depasse small { color: #A93226; font-weight: 600; }
.sg-ag-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; padding: 16px 22px 22px; }
.sg-ag { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 16px; cursor: pointer; outline: none;
    transition: transform 180ms var(--sg-ease-out), border-color 180ms, box-shadow 180ms; }
.sg-ag:hover, .sg-ag:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, #1F7A4A 40%, var(--sg-border)); box-shadow: 0 12px 24px -16px rgba(16, 24, 20, .4); }
.sg-ag.is-suspendue { opacity: .6; }
.sg-ag__tete { display: flex; align-items: center; gap: 10px; }
.sg-ag__av { display: grid; flex: none; place-items: center; width: 40px; height: 40px; font-size: .78125rem; font-weight: 800; color: #FFFFFF; background: linear-gradient(145deg, #2B6CA3, #1F4E79); border-radius: 12px; }
.sg-ag__id { flex: 1; min-width: 0; }
.sg-ag__id strong { display: block; overflow: hidden; font-size: .875rem; color: var(--sg-ink); text-overflow: ellipsis; white-space: nowrap; }
.sg-ag__id small { font-size: .6875rem; color: var(--sg-ink-faint); }
.sg-ag__chef { display: grid; place-items: center; width: 26px; height: 26px; font-size: 11px; color: #2B1D00; background: #F2CF7E; border-radius: 8px; }
.sg-ag__susp { padding: 2px 7px; font-size: .625rem; font-weight: 700; color: #A93226; background: color-mix(in srgb, #C0392B 12%, transparent); border-radius: 6px; }
.sg-ag__chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 8px 10px; background: var(--sg-well-bg); border-radius: 10px; }
.sg-ag__chiffres dt { font-size: .59375rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sg-ink-faint); }
.sg-ag__chiffres dd { margin: 0; font-size: .84375rem; font-weight: 800; color: var(--sg-ink); white-space: nowrap; }
.sg-ag__barre { --p: 0%; display: block; height: 5px; overflow: hidden; background: var(--sg-surface-300); border-radius: 999px; }
.sg-ag__barre i { display: block; width: var(--p); height: 100%; background: linear-gradient(90deg, #E0B556, #1F7A4A); border-radius: inherit; }
.sg-ag__pied { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: .71875rem; color: var(--sg-ink-muted); }
.sg-ag__pied i { margin-right: 4px; } .sg-ag__pied span { font-weight: 700; color: #C0392B; }
body.app .sg-ag--ajout { align-items: center; justify-content: center; min-height: 150px; flex-direction: row; gap: 8px; font-size: .8125rem; font-weight: 700; color: var(--sg-ink-muted);
    background: transparent; border: 2px dashed var(--sg-border); }
body.app .sg-ag--ajout:hover { color: var(--sg-brand-green); background: var(--sg-brand-green-soft); }
.sg-ad-voyage { display: grid; grid-template-columns: minmax(0, 1.3fr) auto minmax(100px, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; font-size: .8125rem; border-top: 1px dashed var(--sg-border); }
.sg-ad-voyage:first-child { border-top: 0; }
.sg-ad-voyage span:not(.sg-solde__barre) { color: var(--sg-ink-muted); } .sg-ad-voyage small { color: var(--sg-ink-muted); white-space: nowrap; }
.sg-ad-pelerins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.sg-ad-pelerins li { padding: 6px 0; border-top: 1px dashed var(--sg-border); }
.sg-ad-pelerins strong { display: block; font-size: .8125rem; color: var(--sg-ink); } .sg-ad-pelerins small { font-size: .6875rem; color: var(--sg-ink-faint); }
@media (max-width: 767.98px) { .sg-gr__tete { flex-wrap: wrap; } .sg-ad-pelerins { grid-template-columns: 1fr; } }
.sg-ag__pied em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   Paramètres > Utilisateurs et droits (us-)
   ========================================================================== */
.us-ton--vert { --c: #1F7A4A; --c2: #06402A; } .us-ton--or { --c: #B8862B; --c2: #8A6118; } .us-ton--bleu { --c: #2B6CA3; --c2: #1F4E79; }
.us-ton--rouge { --c: #B03A2E; --c2: #7E2018; } .us-ton--prune { --c: #7A4A8C; --c2: #55306A; } .us-ton--gris { --c: #6B7A71; --c2: #46534B; }
.us-onglets { display: flex; gap: 6px; margin: 4px 0 16px; border-bottom: 1px solid var(--sg-border); }
.us-onglet { display: inline-flex; align-items: center; gap: 8px; margin-bottom: -1px; padding: 10px 14px; font-size: .84375rem; font-weight: 700; color: var(--sg-ink-muted); text-decoration: none;
    border-bottom: 2px solid transparent; transition: color 160ms, border-color 160ms; }
.us-onglet:hover { color: var(--sg-ink); }
.us-onglet.is-actif { color: var(--sg-brand-green); border-bottom-color: var(--sg-brand-green); }
.us-onglet span { padding: 1px 8px; font-size: .6875rem; color: var(--sg-ink-muted); background: var(--sg-well-bg); border-radius: 999px; }
.us-onglet.is-actif span { color: #FFFFFF; background: var(--sg-brand-green); }
.us-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.us-outils .sg-select { width: auto; min-width: 170px; }

/* Badges d'accès */
.us-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.us-badge { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 16px;
    box-shadow: var(--sg-shadow-xs); animation: sg-fade-up 380ms var(--sg-ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); transition: transform 180ms var(--sg-ease-out), box-shadow 180ms; }
.us-badge:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -18px rgba(16, 24, 20, .45); }
.us-badge__bande { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; font-size: .71875rem; font-weight: 700; letter-spacing: .03em; color: #FFFFFF;
    background: linear-gradient(120deg, var(--c), var(--c2)); }
.us-badge__bande i { margin-right: 4px; opacity: .85; }
.us-badge__bande em { padding: 1px 8px; font-style: normal; font-size: .625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c2); background: #FFFFFF; border-radius: 999px; }
.us-badge__bande em.is-ko { color: #A93226; }
.us-badge__corps { display: flex; align-items: center; gap: 12px; padding: 14px 14px 10px; }
.us-badge__av { position: relative; display: grid; flex: none; place-items: center; width: 46px; height: 46px; font-size: .875rem; font-weight: 800; color: var(--c2);
    background: color-mix(in srgb, var(--c) 14%, var(--sg-card-bg)); border: 2px solid color-mix(in srgb, var(--c) 35%, transparent); border-radius: 14px; }
.us-badge__av.is-en-ligne::after { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; content: ""; background: #2FB36A; border: 2px solid var(--sg-card-bg); border-radius: 50%; }
:root[data-theme="dark"] .us-badge__av { color: #FFFFFF; }
.us-badge__id { flex: 1; min-width: 0; }
.us-badge__id strong { display: block; overflow: hidden; font-size: .90625rem; color: var(--sg-ink); text-overflow: ellipsis; white-space: nowrap; }
.us-badge__id a { display: block; overflow: hidden; font-size: .75rem; color: var(--sg-ink-muted); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.us-badge__id a:hover { color: var(--sg-brand-green); }
.us-badge__id small { font-size: .6875rem; color: var(--sg-ink-faint); } .us-badge__id small i { margin-right: 3px; }
.us-badge__infos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 14px; padding: 8px 10px; background: var(--sg-well-bg); border-radius: 10px; }
.us-badge__infos dt { font-size: .59375rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sg-ink-faint); }
.us-badge__infos dd { margin: 0; font-size: .78125rem; font-weight: 700; color: var(--sg-ink); }
.us-badge__actions { display: flex; gap: 6px; margin-top: auto; padding: 12px 14px 14px; }
.us-badge__actions .us-btn:first-child { flex: 1; }
.us-badge.is-inactif { opacity: .62; } .us-badge.is-inactif .us-badge__bande { filter: grayscale(.85); }
.us-badge.is-moi { border-color: color-mix(in srgb, var(--c) 45%, var(--sg-border)); }
body.app .us-badge--ajout { align-items: center; justify-content: center; gap: 6px; min-height: 200px; padding: 20px; color: var(--sg-ink-muted); text-align: center; cursor: pointer;
    background: transparent; border: 2px dashed var(--sg-border); box-shadow: none; }
body.app .us-badge--ajout span { display: grid; place-items: center; width: 44px; height: 44px; font-size: 1.1rem; color: var(--sg-brand-green); background: var(--sg-brand-green-soft); border-radius: 14px; }
body.app .us-badge--ajout strong { font-size: .875rem; color: var(--sg-ink); } body.app .us-badge--ajout small { font-size: .71875rem; }
body.app .us-badge--ajout:hover { background: var(--sg-brand-green-soft); border-color: color-mix(in srgb, #1F7A4A 45%, var(--sg-border)); }
.us-vide { grid-column: 1 / -1; }
.us-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; font-size: .75rem; font-weight: 700; color: var(--sg-ink);
    background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 9px; cursor: pointer; transition: background 160ms, color 160ms, border-color 160ms; }
.us-btn:hover { color: var(--sg-brand-green); background: var(--sg-brand-green-soft); border-color: color-mix(in srgb, #1F7A4A 35%, var(--sg-border)); }
.us-btn.is-icone { width: 32px; padding: 0; }
.us-btn.is-danger:hover { color: #A93226; background: color-mix(in srgb, #C0392B 10%, transparent); border-color: color-mix(in srgb, #C0392B 35%, var(--sg-border)); }
.us-btn.is-copie { color: #FFFFFF; background: #1F7A4A; border-color: #1F7A4A; }

/* Aperçu du badge dans la fenêtre de saisie */
.us-badge--apercu { animation: none; } .us-badge--apercu:hover { transform: none; }
.us-apercu__droits { margin: 0 14px 14px; padding-top: 10px; border-top: 1px dashed var(--sg-border); }
.us-apercu__droits p { margin: 0 0 6px; font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sg-ink-faint); }
.us-apercu__droits ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.us-apercu__droits li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 6px; font-size: .75rem; color: var(--sg-ink); }
.us-apercu__droits li > i, .us-apercu__droits li > svg { grid-row: span 2; margin-top: 3px; color: var(--c); }
.us-apercu__droits li small { grid-column: 2; font-size: .6875rem; color: var(--sg-ink-muted); }
.us-apercu__droits li.is-vide { display: block; color: var(--sg-ink-faint); font-style: italic; }
.us-mdp-zone { grid-column: 1 / -1; }

/* Rôles */
.us-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 18px; }
.us-role { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-top: 4px solid var(--c); border-radius: 16px;
    animation: sg-fade-up 380ms var(--sg-ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
.us-role__tete { display: flex; align-items: center; gap: 10px; }
.us-role__ico { display: grid; flex: none; place-items: center; width: 38px; height: 38px; color: #FFFFFF; background: linear-gradient(145deg, var(--c), var(--c2)); border-radius: 12px; }
.us-role__tete h2 { margin: 0; font-size: .9375rem; font-weight: 800; color: var(--sg-ink); }
.us-role__tete small { font-size: .71875rem; color: var(--sg-ink-muted); }
.us-role__desc { flex: 1; margin: 0; font-size: .78125rem; line-height: 1.45; color: var(--sg-ink-muted); } .us-role__desc.is-vide { font-style: italic; color: var(--sg-ink-faint); }
.us-role__jauge span { --p: 0%; display: block; height: 6px; overflow: hidden; background: var(--sg-surface-300); border-radius: 999px; }
.us-role__jauge span i { display: block; width: var(--p); height: 100%; background: var(--c); border-radius: inherit; }
.us-role__jauge small { display: block; margin-top: 4px; font-size: .6875rem; font-weight: 700; color: var(--sg-ink-muted); }
.us-role__pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--sg-border); }
.us-role__avatars { display: flex; }
.us-role__avatars i { display: grid; place-items: center; width: 28px; height: 28px; margin-left: -6px; font-size: .625rem; font-style: normal; font-weight: 800; color: var(--c2);
    background: color-mix(in srgb, var(--c) 16%, var(--sg-card-bg)); border: 2px solid var(--sg-card-bg); border-radius: 50%; }
.us-role__avatars i:first-child { margin-left: 0; } .us-role__avatars i.is-plus { color: var(--sg-ink-muted); background: var(--sg-well-bg); }
:root[data-theme="dark"] .us-role__avatars i { color: #FFFFFF; }
.us-role__actions { display: flex; gap: 6px; }
body.app .us-role--ajout { align-items: center; justify-content: center; gap: 6px; min-height: 190px; color: var(--sg-ink-muted); text-align: center; cursor: pointer; background: transparent;
    border: 2px dashed var(--sg-border); animation: none; }
body.app .us-role--ajout span { display: grid; place-items: center; width: 40px; height: 40px; color: var(--sg-brand-green); background: var(--sg-brand-green-soft); border-radius: 12px; }
body.app .us-role--ajout strong { font-size: .875rem; color: var(--sg-ink); } body.app .us-role--ajout small { font-size: .71875rem; }
body.app .us-role--ajout:hover { background: var(--sg-brand-green-soft); }

/* Tableau comparatif des droits */
.us-matrice .table-responsive { padding: 0 6px 10px; }
.us-matrice__table { width: 100%; font-size: .78125rem; border-collapse: separate; border-spacing: 0; }
.us-matrice__table thead th { position: sticky; top: 0; z-index: 1; padding: 10px 8px; text-align: center; background: var(--sg-card-bg); border-bottom: 1px solid var(--sg-border); }
.us-matrice__table thead th:first-child { text-align: left; font-size: .6875rem; letter-spacing: .05em; text-transform: uppercase; color: var(--sg-ink-faint); padding-left: 16px; }
.us-matrice__table thead button { padding: 4px 10px; font-size: .71875rem; font-weight: 800; color: #FFFFFF; white-space: nowrap; background: linear-gradient(120deg, var(--c), var(--c2)); border: 0; border-radius: 999px; cursor: pointer; }
.us-matrice__table thead button:hover { filter: brightness(1.12); }
.us-matrice__module th { padding: 12px 16px 6px; font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sg-brand-green); background: transparent; }
.us-matrice__module th i, .us-matrice__module th svg { margin-right: 6px; }
.us-matrice__table tbody tr:not(.us-matrice__module) th { padding: 7px 8px 7px 30px; font-weight: 500; color: var(--sg-ink); border-top: 1px solid color-mix(in srgb, var(--sg-border) 60%, transparent); }
.us-matrice__table tbody td { padding: 7px 8px; text-align: center; border-top: 1px solid color-mix(in srgb, var(--sg-border) 60%, transparent); }
.us-matrice__table tbody tr:not(.us-matrice__module):hover > * { background: var(--sg-brand-green-soft); }
.us-oui { font-size: 15px; color: #1F7A4A; }
.us-non { display: inline-block; width: 10px; height: 2px; vertical-align: middle; background: var(--sg-border); border-radius: 2px; }

/* Fenêtre du rôle : couleurs et matrice */
.us-couleurs { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.us-couleur { position: relative; cursor: pointer; }
.us-couleur input { position: absolute; opacity: 0; }
.us-couleur span { display: block; width: 32px; height: 32px; background: linear-gradient(145deg, var(--c), var(--c2)); border: 3px solid var(--sg-card-bg); border-radius: 50%;
    box-shadow: 0 0 0 1px var(--sg-border); transition: box-shadow 160ms, transform 160ms; }
.us-couleur:hover span { transform: scale(1.08); }
.us-couleur input:checked + span { box-shadow: 0 0 0 2px var(--c); }
.us-couleur input:focus-visible + span { box-shadow: 0 0 0 2px var(--c), var(--sg-focus-ring); }
.us-perms__barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; grid-column: 1 / -1; }
.us-perms__barre strong { font-size: .8125rem; color: var(--sg-ink); }
.us-perms__raccourcis { display: flex; flex-wrap: wrap; gap: 6px; }
.us-perms__raccourcis button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; font-size: .71875rem; font-weight: 700; color: var(--sg-ink-muted);
    background: var(--sg-well-bg); border: 1px solid var(--sg-border); border-radius: 8px; cursor: pointer; }
.us-perms__raccourcis button:hover:not(:disabled) { color: var(--sg-brand-green); border-color: color-mix(in srgb, #1F7A4A 35%, var(--sg-border)); }
.us-perms__raccourcis button:disabled { opacity: .45; cursor: not-allowed; }
.us-perms__admin { grid-column: 1 / -1; margin: 0; padding: 10px 12px; font-size: .78125rem; color: #6B4A10; background: var(--sg-brand-gold-soft); border-radius: 10px; }
.us-perms__admin i, .us-perms__admin svg { margin-right: 6px; color: #B8862B; }
:root[data-theme="dark"] .us-perms__admin { color: #F2CF7E; }
.us-perms { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.us-perm { margin: 0; padding: 10px 12px 12px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 12px; transition: border-color 160ms, background 160ms; }
.us-perm.is-actif { background: color-mix(in srgb, #1F7A4A 5%, var(--sg-card-bg)); border-color: color-mix(in srgb, #1F7A4A 38%, var(--sg-border)); }
.us-perm__tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; padding: 0 0 8px; border-bottom: 1px dashed var(--sg-border); }
.us-perm__tete small { font-size: .6875rem; font-weight: 700; color: #1F7A4A; }
.us-perm__tout, .us-perm__case { display: flex; align-items: flex-start; gap: 8px; margin: 0; cursor: pointer; }
.us-perm__tout span { font-size: .8125rem; font-weight: 800; color: var(--sg-ink); } .us-perm__tout span i, .us-perm__tout span svg { margin-right: 4px; color: var(--sg-brand-green); }
.us-perm__case { padding: 4px 0; font-size: .78125rem; color: var(--sg-ink-muted); }
.us-perm__case:has(input:checked) { color: var(--sg-ink); }
.us-perm input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: #1F7A4A; cursor: pointer; }
.us-perm input:disabled, .us-perm input:disabled + span { cursor: not-allowed; }

/* Identifiants affichés une fois */
.us-cle .modal-content { overflow: hidden; }
.us-cle__tete { padding: 26px 26px 18px; text-align: center; color: #FFFFFF; background: radial-gradient(circle at 50% -40%, #2E9A64, #06402A 70%); }
.us-cle__ico { display: inline-grid; place-items: center; width: 54px; height: 54px; margin-bottom: 10px; font-size: 1.3rem; color: #2B1D00; background: #F2CF7E; border-radius: 16px; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); }
.us-cle__tete h5 { margin: 0 0 4px; font-family: var(--sg-font-display); font-size: 1.25rem; color: #FFFFFF; }
.us-cle__tete p { margin: 0; font-size: .8125rem; color: rgba(255, 255, 255, .82); } .us-cle__tete strong { color: #FFFFFF; }
.us-cle__ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--sg-well-bg); border-radius: 12px; }
.us-cle__ligne small { grid-column: 1; font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sg-ink-faint); }
.us-cle__ligne code { grid-column: 1; overflow-wrap: anywhere; font-family: var(--sg-font-mono); font-size: .9375rem; font-weight: 600; color: var(--sg-ink); }
.us-cle__ligne .us-btn { grid-column: 2; grid-row: 1 / span 2; }
.us-cle__ligne.is-mdp { background: var(--sg-brand-gold-soft); border: 1px dashed #D9B25C; }
.us-cle__ligne.is-mdp code { font-size: 1.125rem; letter-spacing: .04em; }
.us-cle__note { margin: 4px 0 0; font-size: .75rem; color: var(--sg-ink-muted); } .us-cle__note i { margin-right: 4px; }
@media (max-width: 575.98px) { .us-outils .sg-select { min-width: 0; flex: 1; } }
/* Mon compte */
.us-compte { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 18px; align-items: start; }
.us-compte__gauche { display: grid; gap: 16px; }
.us-compte__role { margin: 10px 14px 14px; font-size: .75rem; color: var(--sg-ink-muted); }
.us-compte__role:empty { display: none; }
.us-compte__modules { display: grid; gap: 2px; margin: 0; padding: 4px 14px 14px; list-style: none; }
.us-compte__modules li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--sg-border); }
.us-compte__modules li:first-child { border-top: 0; }
.us-compte__ico { display: grid; flex: none; place-items: center; width: 30px; height: 30px; font-size: 12px; color: var(--sg-brand-green); background: var(--sg-brand-green-soft); border-radius: 9px; }
.us-compte__modules strong { display: block; font-size: .8125rem; color: var(--sg-ink); } .us-compte__modules small { font-size: .6875rem; color: var(--sg-ink-muted); }
.us-compte__modules li.is-aucun { opacity: .5; } .us-compte__modules li.is-aucun .us-compte__ico { color: var(--sg-ink-faint); background: var(--sg-well-bg); }
.us-compte__form { padding: 20px 22px; }
.us-compte__form .sg-fsec + .sg-fsec { margin-top: 18px; }
.us-compte__pied { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sg-border); }
.us-force { --p: 0%; display: flex; grid-column: 1 / -1; align-items: center; gap: 10px; }
.us-force span { flex: 1; height: 6px; overflow: hidden; background: var(--sg-surface-300); border-radius: 999px; }
.us-force span i { display: block; width: var(--p); height: 100%; border-radius: inherit; transition: width 220ms var(--sg-ease-out); }
.us-force small { min-width: 70px; font-size: .71875rem; font-weight: 700; }
.us-force.is-rouge i { background: #C0392B; } .us-force.is-rouge small { color: #A93226; }
.us-force.is-or i { background: #D9A441; } .us-force.is-or small { color: #9A6B13; }
.us-force.is-vert i { background: #1F7A4A; } .us-force.is-vert small { color: #1F7A4A; }
@media (max-width: 991.98px) { .us-compte { grid-template-columns: 1fr; } }

/* Accès refusé */
.us-refus { max-width: 560px; margin: 48px auto; padding: 40px 32px; text-align: center; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 20px; box-shadow: var(--sg-shadow-md); }
.us-refus__ico { display: inline-grid; place-items: center; width: 72px; height: 72px; margin-bottom: 14px; font-size: 1.75rem; color: #FFFFFF; background: linear-gradient(145deg, #B03A2E, #7E2018); border-radius: 22px;
    box-shadow: 0 14px 30px -14px rgba(126, 32, 24, .7); }
.us-refus__code { margin: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sg-ink-faint); }
.us-refus h1 { margin: 4px 0 10px; font-family: var(--sg-font-display); font-size: 1.75rem; color: var(--sg-ink); }
.us-refus__msg { margin: 0 0 10px; color: var(--sg-ink-muted); }
.us-refus__role { font-size: .8125rem; color: var(--sg-ink-muted); }
.us-refus__role span { padding: 2px 10px; font-weight: 700; color: #FFFFFF; background: linear-gradient(120deg, var(--c), var(--c2)); border-radius: 999px; }
.us-refus__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
a.sg-sidebar__user-text { color: inherit; text-decoration: none; } a.sg-sidebar__user-text:hover .sg-sidebar__user-name { color: var(--sg-sb-accent); }
body.app .us-badge--apercu, body.app .us-badge--apercu .us-apercu__droits { text-align: left; }
body.app .us-badge--apercu .us-badge__id a { display: block; color: var(--sg-ink-muted); }
body.app .us-cle .us-cle__tete h5 { color: #FFFFFF; }
.us-role__comptes { font-size: .71875rem; font-weight: 700; color: var(--sg-brand-green); text-decoration: none; } .us-role__comptes:hover { text-decoration: underline; } .us-role__comptes i, .us-role__comptes svg { font-size: .625rem; margin-left: 2px; }

/* ==========================================================================
   Formation des pèlerins (fo-)
   ========================================================================== */
.fo-ton--vert, .is-hadj { --c: #1F7A4A; --c2: #06402A; } .fo-ton--or, .is-tourisme { --c: #B8862B; --c2: #8A6118; } .fo-ton--bleu, .is-oumra { --c: #2B6CA3; --c2: #1F4E79; }
.fo-ton--rouge { --c: #B03A2E; --c2: #7E2018; } .fo-ton--prune { --c: #7A4A8C; --c2: #55306A; } .fo-ton--gris, .is-commune { --c: #6B7A71; --c2: #46534B; }

/* Vues */
.fo-vues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 4px 0 18px; }
.fo-vue { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--sg-ink); text-decoration: none; background: var(--sg-card-bg);
    border: 1px solid var(--sg-border); border-radius: 14px; transition: border-color 160ms, box-shadow 160ms, transform 160ms var(--sg-ease-out); }
.fo-vue:hover { color: var(--sg-ink); transform: translateY(-1px); border-color: color-mix(in srgb, #1F7A4A 35%, var(--sg-border)); }
.fo-vue.is-actif { background: linear-gradient(120deg, #06402A, #0E5A3A); border-color: transparent; box-shadow: 0 12px 26px -16px rgba(6, 64, 42, .8); }
.fo-vue__ico { display: grid; flex: none; place-items: center; width: 40px; height: 40px; font-size: 16px; color: var(--sg-brand-green); background: var(--sg-brand-green-soft); border-radius: 12px; }
.fo-vue.is-actif .fo-vue__ico { color: #2B1D00; background: #F2CF7E; }
.fo-vue__txt { display: flex; flex-direction: column; min-width: 0; }
.fo-vue__txt strong { font-size: .875rem; } .fo-vue__txt small { overflow: hidden; font-size: .71875rem; color: var(--sg-ink-muted); text-overflow: ellipsis; white-space: nowrap; }
.fo-vue.is-actif strong { color: #FFFFFF; } .fo-vue.is-actif small { color: rgba(255, 255, 255, .75); }
.fo-vue__alerte { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; font-size: .6875rem; font-weight: 800;
    color: #FFFFFF; background: #C0392B; border: 2px solid var(--sg-page-bg); border-radius: 999px; }
.fo-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.fo-outils .sg-select { width: auto; min-width: 170px; }
.fo-dates { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 12px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 10px; }
.fo-dates.is-set { border-color: color-mix(in srgb, #1F7A4A 50%, var(--sg-border)); }
.fo-dates > i, .fo-dates > svg { color: var(--sg-ink-faint); } .fo-dates span { font-size: .75rem; color: var(--sg-ink-muted); }
body.app .fo-dates input { width: 138px; height: 30px; padding: 2px 6px; font-size: .78125rem; border: 0; background: transparent; }

/* Parcours */
.fo-theme { margin-bottom: 18px; padding: 16px 18px 6px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 18px; animation: sg-fade-up 380ms var(--sg-ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
.fo-theme__tete { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.fo-theme__ico { display: grid; flex: none; place-items: center; width: 42px; height: 42px; font-size: 17px; color: #FFFFFF; background: linear-gradient(145deg, var(--c), var(--c2)); border-radius: 13px; }
.fo-theme__tete h2 { margin: 0; font-size: 1rem; font-weight: 800; color: var(--sg-ink); }
.fo-theme__tete p { margin: 0; font-size: .75rem; color: var(--sg-ink-muted); }
.fo-theme__ajout { display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; color: var(--c); background: transparent; border: 1px dashed color-mix(in srgb, var(--c) 55%, var(--sg-border)); border-radius: 10px; cursor: pointer; }
.fo-theme__ajout:hover { color: #FFFFFF; background: var(--c); border-style: solid; }
.fo-chemin { position: relative; display: grid; gap: 10px; margin: 0; padding: 0 0 10px; list-style: none; }
.fo-chemin::before { position: absolute; top: 14px; bottom: 24px; left: 15px; width: 2px; content: ""; background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--c) 45%, transparent) 0 6px, transparent 6px 11px); }
.fo-mod { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; }
.fo-mod__etape { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; margin-top: 14px; font-size: .78125rem; font-weight: 800; color: var(--c2);
    background: var(--sg-card-bg); border: 2px solid var(--c); border-radius: 50%; }
:root[data-theme="dark"] .fo-mod__etape { color: #FFFFFF; }
.fo-mod__carte { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 12px 10px 10px; background: var(--sg-card-bg);
    border: 1px solid var(--sg-border); border-radius: 14px; transition: border-color 160ms, box-shadow 160ms; }
.fo-mod__carte:hover { border-color: color-mix(in srgb, var(--c, #1F7A4A) 40%, var(--sg-border)); box-shadow: 0 10px 22px -16px rgba(16, 24, 20, .45); }
.fo-mod__vignette { --t: #6B7A71; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 72px; padding: 0; font-size: 24px; color: var(--t);
    background: color-mix(in srgb, var(--t) 11%, var(--sg-card-bg)); border: 0; border-radius: 11px; cursor: pointer; transition: transform 160ms var(--sg-ease-out), background 160ms; }
.fo-mod__vignette span { font-size: .625rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.fo-mod__vignette:hover { transform: scale(1.04); background: color-mix(in srgb, var(--t) 18%, var(--sg-card-bg)); }
.fo-type--pdf .fo-mod__vignette { --t: #B03A2E; } .fo-type--video .fo-mod__vignette { --t: #2B6CA3; } .fo-type--audio .fo-mod__vignette { --t: #7A4A8C; }
.fo-type--image .fo-mod__vignette { --t: #B8862B; } .fo-type--lien .fo-mod__vignette { --t: #1F7A4A; }
.fo-mod__corps { min-width: 0; }
.fo-mod__code { margin: 0; font-size: .65625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sg-ink-faint); }
.fo-mod__code em { font-style: normal; color: #9A6B13; } .fo-mod__code em.is-ko { color: #A93226; }
.fo-mod__corps h3 { margin: 1px 0 2px; font-size: .90625rem; font-weight: 700; color: var(--sg-ink); }
.fo-mod__desc { display: -webkit-box; margin: 0 0 4px; overflow: hidden; font-size: .75rem; color: var(--sg-ink-muted); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fo-mod__desc:empty { display: none; }
.fo-mod__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; font-size: .71875rem; color: var(--sg-ink-muted); }
.fo-mod__meta i, .fo-mod__meta svg { margin-right: 3px; } .fo-mod__meta span:empty { display: none; }
.fo-public { padding: 1px 8px; font-size: .65625rem; font-weight: 700; color: var(--c2, #46534B); background: color-mix(in srgb, var(--c, #6B7A71) 12%, transparent); border-radius: 999px; }
.fo-public.is-tous { --c: #6B7A71; --c2: #46534B; }
:root[data-theme="dark"] .fo-public { color: #FFFFFF; }
.fo-mod__actions { display: flex; gap: 6px; }
.fo-mod.is-masque .fo-mod__carte { opacity: .55; border-style: dashed; }
.fo-mod.is-absent .fo-mod__vignette { filter: grayscale(1); opacity: .6; }
.fo-mod--apercu { display: block; } .fo-mod--apercu .fo-mod__carte { grid-template-columns: 76px minmax(0, 1fr); text-align: left; }
.fo-mod--apercu .fo-mod__vignette { height: 64px; cursor: default; } .fo-mod--apercu .fo-mod__vignette:hover { transform: none; }

/* Séances */
.fo-mois { margin-bottom: 18px; }
.fo-mois__titre { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-family: var(--sg-font-display); font-size: 1.125rem; color: var(--sg-ink); }
.fo-mois__titre span { font-family: var(--sg-font-sans); font-size: .71875rem; font-weight: 600; color: var(--sg-ink-faint); }
.fo-seance { --p: #2B6CA3; display: grid; grid-template-columns: 68px minmax(0, 1fr) 110px auto; gap: 16px; align-items: center; margin-bottom: 10px; padding: 12px 14px;
    background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-left: 4px solid var(--p); border-radius: 14px; animation: sg-fade-up 360ms var(--sg-ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
.fo-phase--realisee { --p: #1F7A4A; } .fo-phase--aujourdhui { --p: #D9A441; } .fo-phase--a_cloturer { --p: #C0392B; } .fo-phase--annulee { --p: #A3ADA7; }
.fo-phase--annulee { opacity: .6; } .fo-phase--annulee h3 { text-decoration: line-through; }
.fo-seance__date { display: flex; flex-direction: column; align-items: center; padding: 8px 0; text-align: center; color: var(--p); background: color-mix(in srgb, var(--p) 10%, var(--sg-card-bg)); border-radius: 12px; }
.fo-seance__date strong { font-family: var(--sg-font-display); font-size: 1.625rem; line-height: 1; }
.fo-seance__date small { font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fo-seance__sur { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .65625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sg-ink-faint); }
.fo-seance__corps h3 { margin: 2px 0 4px; font-size: .9375rem; font-weight: 700; color: var(--sg-ink); }
.fo-seance__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: .75rem; color: var(--sg-ink-muted); }
.fo-seance__meta i, .fo-seance__meta svg { margin-right: 4px; }
.fo-seance__public { font-weight: 700; color: var(--c); }
.fo-seance__modules { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; }
.fo-seance__modules li { padding: 2px 8px; font-size: .6875rem; color: var(--c2); background: color-mix(in srgb, var(--c) 10%, transparent); border-radius: 7px; }
.fo-seance__modules li.is-duree { color: var(--sg-ink-muted); background: var(--sg-well-bg); }
.fo-seance__modules i, .fo-seance__modules svg { margin-right: 3px; }
:root[data-theme="dark"] .fo-seance__modules li { color: #FFFFFF; }
.fo-seance__presence { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.fo-seance__presence small { font-size: .6875rem; color: var(--sg-ink-muted); }
.fo-attendus { font-size: 1.125rem; font-weight: 800; color: var(--sg-ink); } .fo-attendus i, .fo-attendus svg { margin-right: 4px; font-size: .875rem; color: var(--sg-ink-faint); }
.fo-seance__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 290px; }
body.app .fo-btn-appel { color: #FFFFFF; background: linear-gradient(120deg, #1F7A4A, #06402A); border-color: transparent; }
body.app .fo-btn-appel:hover { color: #FFFFFF; filter: brightness(1.12); }
.fo-pastille { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: .65625rem; font-weight: 700; letter-spacing: .02em; text-transform: none; border-radius: 999px; }
.fo-pastille.is-vert { color: #1F7A4A; background: color-mix(in srgb, #1F7A4A 12%, transparent); } .fo-pastille.is-rouge { color: #A93226; background: color-mix(in srgb, #C0392B 12%, transparent); }
.fo-pastille.is-bleu { color: #2B6CA3; background: color-mix(in srgb, #2B6CA3 12%, transparent); } .fo-pastille.is-or { color: #9A6B13; background: color-mix(in srgb, #D9A441 18%, transparent); }
.fo-pastille.is-gris { color: var(--sg-ink-muted); background: var(--sg-well-bg); }
.fo-anneau { --p: 0; display: grid; place-items: center; width: 58px; height: 58px; background: conic-gradient(#1F7A4A calc(var(--p) * 1%), var(--sg-surface-300) 0); border-radius: 50%; }
.fo-anneau b { display: grid; place-items: center; width: 46px; height: 46px; font-size: .9375rem; font-weight: 800; color: var(--sg-ink); background: var(--sg-card-bg); border-radius: 50%; }
.fo-anneau b small { font-size: .5625rem; }
.fo-anneau.is-petit { flex: none; width: 46px; height: 46px; } .fo-anneau.is-petit b { width: 36px; height: 36px; font-size: .78125rem; }

/* Suivi */
.fo-suivi { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.fo-suivi__voyages { display: grid; gap: 8px; position: sticky; top: 84px; }
.fo-vcarte { --c: #1F7A4A; position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: var(--sg-ink); text-decoration: none; background: var(--sg-card-bg);
    border: 1px solid var(--sg-border); border-left: 4px solid var(--c); border-radius: 12px; transition: box-shadow 160ms, transform 160ms var(--sg-ease-out); }
.fo-vcarte:hover { color: var(--sg-ink); transform: translateX(2px); }
.fo-vcarte.is-actif { background: color-mix(in srgb, var(--c) 8%, var(--sg-card-bg)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 45%, transparent); }
.fo-vcarte .fo-anneau { background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--sg-surface-300) 0); }
.fo-vcarte__txt { display: flex; flex-direction: column; min-width: 0; }
.fo-vcarte__txt strong { overflow: hidden; font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.fo-vcarte__txt small { font-size: .6875rem; color: var(--sg-ink-muted); } .fo-vcarte__txt small i, .fo-vcarte__txt small svg { margin-right: 3px; color: var(--c); }
.fo-vcarte__alerte { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; font-size: .625rem; font-weight: 800; color: #FFFFFF; background: #C0392B; border-radius: 999px; }
.fo-suivi__tete { --c: #1F7A4A; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--sg-border);
    background: linear-gradient(120deg, color-mix(in srgb, var(--c) 9%, var(--sg-card-bg)), var(--sg-card-bg)); border-radius: 16px 16px 0 0; }
.fo-suivi__code { margin: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.fo-suivi__tete h2 { margin: 2px 0 6px; font-family: var(--sg-font-display); font-size: 1.375rem; color: var(--sg-ink); }
.fo-suivi__resume { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: .78125rem; color: var(--sg-ink-muted); }
.fo-suivi__resume b { font-size: .9375rem; color: var(--sg-ink); } .fo-suivi__resume .is-ko b { color: #A93226; }
.fo-suivi__actions { display: flex; gap: 6px; }
.fo-suivi__filtre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 20px; }
.fo-suivi__filtre button { padding: 5px 12px; font-size: .75rem; font-weight: 700; color: var(--sg-ink-muted); background: var(--sg-well-bg); border: 1px solid transparent; border-radius: 999px; cursor: pointer; }
.fo-suivi__filtre button span { margin-left: 4px; opacity: .7; }
.fo-suivi__filtre button.is-actif { color: #FFFFFF; background: var(--sg-brand-green); }
.fo-legende { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; font-size: .6875rem; color: var(--sg-ink-muted); }
.fo-legende span { display: inline-flex; align-items: center; gap: 4px; }
.fo-point { display: inline-block; width: 12px; height: 12px; background: transparent; border: 2px solid var(--sg-border); border-radius: 50%; }
.fo-point.is-present { background: #1F7A4A; border-color: #1F7A4A; } .fo-point.is-absent { background: #C0392B; border-color: #C0392B; } .fo-point.is-excuse { background: #D9A441; border-color: #D9A441; }
.fo-points { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.fo-table { width: 100%; font-size: .8125rem; border-collapse: collapse; }
.fo-table th { padding: 8px 20px; font-size: .65625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sg-ink-faint); background: var(--sg-well-bg); }
.fo-table td { padding: 9px 20px; vertical-align: middle; border-top: 1px solid var(--sg-border); }
.fo-table tbody tr:hover td { background: var(--sg-brand-green-soft); }
.fo-pelerin { display: flex; align-items: center; gap: 10px; }
.fo-pelerin > i { display: grid; flex: none; place-items: center; width: 32px; height: 32px; font-size: .6875rem; font-style: normal; font-weight: 800; color: var(--sg-brand-green); background: var(--sg-brand-green-soft); border-radius: 10px; }
.fo-pelerin strong { display: block; color: var(--sg-ink); } .fo-pelerin small { font-size: .6875rem; color: var(--sg-ink-faint); }
.fo-tel { color: var(--sg-ink); text-decoration: none; white-space: nowrap; } .fo-tel:hover { color: var(--sg-brand-green); }
.fo-tel.is-wa { margin-left: 6px; color: #25A35A; }

/* Fenêtres */
.fo-source { display: flex; flex-wrap: wrap; gap: 8px; }
.fo-source label { position: relative; flex: 1; min-width: 150px; margin: 0; cursor: pointer; }
.fo-source input { position: absolute; opacity: 0; }
.fo-source span { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; font-size: .8125rem; font-weight: 700; color: var(--sg-ink-muted); background: var(--sg-well-bg);
    border: 1.5px solid var(--sg-border); border-radius: 11px; transition: all 160ms; }
.fo-source input:checked + span { color: var(--sg-brand-green); background: var(--sg-brand-green-soft); border-color: #1F7A4A; }
.fo-source input:focus-visible + span { box-shadow: var(--sg-focus-ring); }
.fo-zone > .sg-champ { margin: 0; }
.fo-visible { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; }
.fo-visible input[type="checkbox"] { width: 17px; height: 17px; margin-top: 2px; accent-color: #1F7A4A; }
.fo-visible strong { display: block; font-size: .8125rem; color: var(--sg-ink); } .fo-visible small { font-size: .71875rem; color: var(--sg-ink-muted); }
.fo-programme { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.fo-programme__theme { padding: 10px 12px; border: 1px solid var(--sg-border); border-top: 3px solid var(--c); border-radius: 12px; }
.fo-programme__theme p { margin: 0 0 6px; font-size: .71875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--c); }
.fo-programme__theme p i, .fo-programme__theme p svg { margin-right: 4px; }
.fo-programme__theme label { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 4px 0; font-size: .78125rem; color: var(--sg-ink); cursor: pointer; }
.fo-programme__theme label input { flex: none; width: 15px; height: 15px; margin-top: 2px; accent-color: #1F7A4A; }
.fo-programme__theme label span { flex: 1; } .fo-programme__theme label small { font-size: .6875rem; color: var(--sg-ink-faint); white-space: nowrap; }
.fo-programme__vide { grid-column: 1 / -1; margin: 0; font-size: .8125rem; color: var(--sg-ink-muted); }
.fo-convoc { padding: 16px; text-align: left; background: var(--sg-card-bg); border-radius: 14px; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .55); }
.fo-convoc__date { display: inline-flex; flex-direction: column; align-items: center; min-width: 76px; margin-bottom: 10px; padding: 8px 10px; color: #FFFFFF; background: linear-gradient(145deg, #1F7A4A, #06402A); border-radius: 12px; }
.fo-convoc__date strong { font-family: var(--sg-font-display); font-size: 1.75rem; line-height: 1; }
.fo-convoc__date small { font-size: .625rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.fo-convoc h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 800; color: var(--sg-ink); }
.fo-convoc > p { margin: 0 0 4px; font-size: .75rem; color: var(--sg-ink-muted); } .fo-convoc > p i, .fo-convoc > p svg { width: 14px; margin-right: 6px; color: #1F7A4A; }
.fo-convoc__programme { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--sg-border); }
.fo-convoc__programme p { margin: 0 0 4px; font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-ink-faint); }
.fo-convoc__programme ol { margin: 0; padding-left: 18px; font-size: .75rem; color: var(--sg-ink); }
.fo-convoc__programme li small { margin-left: 6px; color: var(--sg-ink-faint); } .fo-convoc__programme li.is-vide { margin-left: -18px; list-style: none; font-style: italic; color: var(--sg-ink-faint); }
.fo-convoc__temps { margin: 8px 0 0 !important; font-size: .71875rem !important; font-weight: 700; color: #1F7A4A !important; }
.fo-convoc__temps.is-ko { color: #A93226 !important; } .fo-convoc__temps:empty { display: none; }

/* Appel */
.fo-appel__barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 24px; background: var(--sg-well-bg); border-bottom: 1px solid var(--sg-border); }
.fo-appel__compteurs { display: flex; gap: 8px; }
.fo-compteur { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 4px 8px; background: var(--sg-card-bg); border-radius: 10px; }
.fo-compteur b { font-size: 1.0625rem; } .fo-compteur small { font-size: .625rem; font-weight: 700; color: var(--sg-ink-muted); }
.fo-compteur.is-vert b { color: #1F7A4A; } .fo-compteur.is-rouge b { color: #A93226; } .fo-compteur.is-or b { color: #9A6B13; } .fo-compteur.is-gris b { color: var(--sg-ink-faint); }
.fo-appel__outils { display: flex; gap: 8px; } .fo-appel__outils .sg-search { width: 200px; }
.fo-appel__liste { margin: 0; padding: 0; list-style: none; }
.fo-appel__charge { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 30px; color: var(--sg-ink-muted); }
.fo-appel__ligne { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-bottom: 1px solid var(--sg-border); border-left: 3px solid transparent; transition: background 160ms; }
.fo-appel__ligne[data-etat="present"] { border-left-color: #1F7A4A; } .fo-appel__ligne[data-etat="absent"] { border-left-color: #C0392B; } .fo-appel__ligne[data-etat="excuse"] { border-left-color: #D9A441; }
.fo-appel__av { display: grid; flex: none; place-items: center; width: 34px; height: 34px; font-size: .6875rem; font-style: normal; font-weight: 800; color: var(--sg-brand-green); background: var(--sg-brand-green-soft); border-radius: 10px; }
.fo-appel__id { flex: 1; min-width: 0; } .fo-appel__id strong { display: block; font-size: .84375rem; color: var(--sg-ink); }
.fo-appel__id small { display: block; overflow: hidden; font-size: .6875rem; color: var(--sg-ink-faint); text-overflow: ellipsis; white-space: nowrap; }
.fo-appel__deja { padding: 2px 8px; font-size: .625rem; font-weight: 700; color: #1F7A4A; white-space: nowrap; background: color-mix(in srgb, #1F7A4A 10%, transparent); border-radius: 999px; }
.fo-appel__choix { display: inline-flex; padding: 3px; background: var(--sg-well-bg); border-radius: 10px; }
.fo-appel__choix label { position: relative; margin: 0; cursor: pointer; }
.fo-appel__choix input { position: absolute; opacity: 0; }
.fo-appel__choix span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: .71875rem; font-weight: 700; color: var(--sg-ink-muted); border-radius: 8px; transition: all 140ms; }
.fo-appel__choix label:hover span { color: var(--sg-ink); }
.fo-appel__choix .is-present input:checked + span { color: #FFFFFF; background: #1F7A4A; } .fo-appel__choix .is-absent input:checked + span { color: #FFFFFF; background: #C0392B; }
.fo-appel__choix .is-excuse input:checked + span { color: #2B1D00; background: #F2CF7E; }
.fo-appel__choix input:focus-visible + span { box-shadow: var(--sg-focus-ring); }

/* Lecteur */
.fo-lecteur .modal-content { overflow: hidden; background: #0B1A12; border: 0; border-radius: 18px; }
.fo-lecteur__barre { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #06402A; }
.fo-lecteur__barre h5 { flex: 1; margin: 0; font-size: .9375rem; color: #FFFFFF; }
.fo-lecteur__scene { display: grid; place-items: center; min-height: 300px; max-height: 78vh; padding: 0; }
.fo-lecteur__scene video, .fo-lecteur__scene img { display: block; max-width: 100%; max-height: 76vh; }
.fo-lecteur__audio { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 24px; color: #FFFFFF; }
.fo-lecteur__audio > i, .fo-lecteur__audio > svg { font-size: 54px; color: #F2CF7E; }
.fo-lecteur__audio p { margin: 0; font-size: 1rem; font-weight: 700; } .fo-lecteur__audio audio { width: min(520px, 90%); }

@media (max-width: 991.98px) {
    .fo-vues { grid-template-columns: 1fr; } .fo-suivi { grid-template-columns: 1fr; } .fo-suivi__voyages { position: static; }
    .fo-seance { grid-template-columns: 60px minmax(0, 1fr); } .fo-seance__presence { flex-direction: row; grid-column: 2; } .fo-seance__actions { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
    .fo-mod__carte { grid-template-columns: 72px minmax(0, 1fr); } .fo-mod__actions { grid-column: 2; }
}.fo-appel__outils .us-btn { white-space: nowrap; }

/* ==========================================================================
   Démarcheurs : commissions (dû, exigible, versé, reste) et paiement (dm-)
   ========================================================================== */
.dm-com { margin-bottom: 16px; padding: 14px 16px; background: linear-gradient(135deg, color-mix(in srgb, #1F7A4A 6%, var(--sg-card-bg)), var(--sg-card-bg)); border: 1px solid var(--sg-border); border-radius: 14px; }
.dm-com__chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dm-com__chiffre { padding: 8px 10px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-top: 3px solid var(--t, #6B7A71); border-radius: 10px; }
.dm-com__chiffre.is-or { --t: #B8862B; } .dm-com__chiffre.is-bleu { --t: #2B6CA3; } .dm-com__chiffre.is-vert { --t: #1F7A4A; } .dm-com__chiffre.is-rouge { --t: #B03A2E; }
.dm-com__chiffre small { display: block; font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sg-ink-faint); }
.dm-com__chiffre strong { display: block; font-family: var(--sg-font-mono); font-size: .9375rem; color: var(--sg-ink); white-space: nowrap; }
.dm-com__chiffre.is-rouge strong { color: #A93226; }
.dm-com__chiffre em { display: block; font-size: .65625rem; font-style: normal; color: var(--sg-ink-muted); }
.dm-com__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.dm-com__barre { --p: 0%; --e: 0%; position: relative; flex: 1; min-width: 160px; height: 8px; overflow: hidden; background: var(--sg-surface-300); border-radius: 999px; }
.dm-com__barre i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; }
.dm-com__barre .is-exig { width: var(--e); background: color-mix(in srgb, #2B6CA3 35%, transparent); }
.dm-com__barre .is-verse { width: var(--p); background: linear-gradient(90deg, #2FB36A, #1F7A4A); }
.dm-com__pied > small { font-size: .71875rem; font-weight: 700; color: var(--sg-ink-muted); }
.dm-com__payer { margin-left: auto; }
.dm-com__titre { margin: 18px 0 8px; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sg-ink-muted); }
.dm-com__cell { display: inline-flex; flex-direction: column; align-items: flex-end; }
.dm-com__exig { padding: 0 6px; font-family: var(--sg-font-sans); font-size: .5625rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #2B6CA3; background: color-mix(in srgb, #2B6CA3 12%, transparent); border-radius: 999px; }
@media (max-width: 767.98px) { .dm-com__chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Fenêtre de paiement */
.dm-rapides { display: flex; flex-wrap: wrap; gap: 8px; }
.dm-rapides:empty { display: none; }
.dm-rapide { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 6px 12px; text-align: left; background: var(--sg-well-bg); border: 1px solid var(--sg-border); border-radius: 10px; cursor: pointer; transition: border-color 160ms, background 160ms; }
.dm-rapide span { font-size: .65625rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sg-ink-faint); }
.dm-rapide b { font-family: var(--sg-font-mono); font-size: .84375rem; color: var(--sg-ink); }
.dm-rapide:hover { background: var(--sg-brand-green-soft); border-color: color-mix(in srgb, #1F7A4A 40%, var(--sg-border)); }
.dm-bon { padding: 16px; text-align: left; background: var(--sg-card-bg); border-radius: 14px; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .55); }
.dm-bon__tete { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--sg-border); }
.dm-bon__ico { display: grid; place-items: center; width: 38px; height: 38px; color: #FFFFFF; background: linear-gradient(145deg, #1F7A4A, #06402A); border-radius: 12px; }
.dm-bon__tete strong { display: block; font-size: .875rem; color: var(--sg-ink); } .dm-bon__tete small { font-size: .6875rem; color: var(--sg-ink-faint); }
.dm-bon__libelle { margin: 12px 0 0; font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-ink-faint); }
.dm-bon__montant { margin: 2px 0 0; color: #1F7A4A; } .dm-bon__montant b { font-family: var(--sg-font-display); font-size: 1.875rem; }
.dm-bon__lettres { margin: 0 0 10px; font-size: .75rem; color: var(--sg-ink-muted); }
.dm-bon__lignes { display: grid; gap: 4px; margin: 0; padding: 10px 0 0; border-top: 1px dashed var(--sg-border); }
.dm-bon__lignes div { display: flex; justify-content: space-between; gap: 10px; font-size: .75rem; }
.dm-bon__lignes dt { font-weight: 500; color: var(--sg-ink-muted); } .dm-bon__lignes dd { margin: 0; font-family: var(--sg-font-mono); font-weight: 700; color: var(--sg-ink); }
.dm-bon__alerte { margin: 10px 0 0; padding: 8px 10px; font-size: .71875rem; color: #6B4A10; background: var(--sg-brand-gold-soft); border-radius: 8px; }
.dm-bon__alerte.is-ko { color: #A93226; background: color-mix(in srgb, #C0392B 10%, var(--sg-card-bg)); }
.dm-bon__alerte i, .dm-bon__alerte svg { margin-right: 4px; }
/* ==========================================================================
   Voyages : Prêt au départ (pd-)
   ========================================================================== */
.pd-departs { display: flex; gap: 10px; margin: 0 0 16px; padding-bottom: 4px; overflow-x: auto; }
.pd-depart { --c: #1F7A4A; display: flex; flex: none; align-items: center; gap: 10px; padding: 9px 14px; color: var(--sg-ink); text-decoration: none; background: var(--sg-card-bg);
    border: 1px solid var(--sg-border); border-bottom: 3px solid var(--c); border-radius: 12px; transition: transform 160ms var(--sg-ease-out); }
.pd-depart.is-oumra { --c: #2B6CA3; } .pd-depart.is-tourisme { --c: #B8862B; }
.pd-depart:hover { color: var(--sg-ink); transform: translateY(-1px); }
.pd-depart > i, .pd-depart > svg { color: var(--c); }
.pd-depart strong { display: block; font-size: .8125rem; white-space: nowrap; } .pd-depart small { font-size: .6875rem; color: var(--sg-ink-muted); }
.pd-depart.is-actif { color: #FFFFFF; background: linear-gradient(120deg, var(--c), color-mix(in srgb, var(--c) 65%, #000)); border-color: transparent; }
.pd-depart.is-actif > i, .pd-depart.is-actif > svg, .pd-depart.is-actif small { color: rgba(255, 255, 255, .85); }
.pd-bord { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 14px; margin-bottom: 16px; }
.pd-score { display: flex; align-items: center; gap: 16px; padding: 18px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 16px; }
.pd-anneau { width: 92px; height: 92px; flex: none; } .pd-anneau b { width: 74px; height: 74px; font-size: 1.375rem; } .pd-anneau b small { font-size: .75rem; color: var(--sg-ink-muted); }
.pd-score strong { display: block; font-size: .9375rem; color: var(--sg-ink); }
.pd-score small { display: block; margin-top: 4px; font-size: .75rem; color: var(--sg-ink-muted); }
.pd-score small.is-alerte { color: #9A6B13; } .pd-score small i, .pd-score small svg { margin-right: 4px; }
.pd-controles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.pd-ctl { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 10px 12px 14px; text-align: left; background: var(--sg-card-bg);
    border: 1px solid var(--sg-border); border-radius: 12px; cursor: pointer; transition: border-color 160ms, box-shadow 160ms, transform 160ms var(--sg-ease-out); }
.pd-ctl:hover:not(:disabled) { transform: translateY(-1px); border-color: color-mix(in srgb, #C0392B 40%, var(--sg-border)); }
.pd-ctl.is-actif { border-color: #C0392B; box-shadow: 0 0 0 2px color-mix(in srgb, #C0392B 25%, transparent); }
.pd-ctl:disabled { cursor: default; }
.pd-ctl__ico { display: grid; place-items: center; width: 34px; height: 34px; color: #A93226; background: color-mix(in srgb, #C0392B 10%, var(--sg-card-bg)); border-radius: 10px; }
.pd-ctl.is-complet .pd-ctl__ico { color: #1F7A4A; background: var(--sg-brand-green-soft); }
.pd-ctl__txt strong { display: block; font-size: .8125rem; color: var(--sg-ink); } .pd-ctl__txt small { font-size: .6875rem; font-weight: 700; color: #A93226; }
.pd-ctl.is-complet .pd-ctl__txt small { color: #1F7A4A; }
.pd-ctl__nb { font-family: var(--sg-font-mono); font-size: .78125rem; font-weight: 700; color: var(--sg-ink-muted); }
.pd-ctl__barre { --p: 0%; position: absolute; right: 12px; bottom: 6px; left: 12px; height: 4px; overflow: hidden; background: var(--sg-surface-300); border-radius: 999px; }
.pd-ctl__barre i { display: block; width: var(--p); height: 100%; background: #1F7A4A; border-radius: inherit; }
.pd-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--sg-border); }
.pd-filtre { padding: 0; }
.pd-filtre-ctl { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; font-size: .75rem; font-weight: 700; color: #A93226; background: color-mix(in srgb, #C0392B 10%, transparent); border-radius: 999px; }
.pd-filtre-ctl button { display: grid; place-items: center; width: 22px; height: 22px; color: inherit; background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.pd-filtre-ctl button:hover { background: color-mix(in srgb, #C0392B 18%, transparent); }
.pd-table { width: 100%; font-size: .8125rem; border-collapse: collapse; }
.pd-table th { padding: 9px 12px; font-size: .65625rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sg-ink-faint); background: var(--sg-well-bg); white-space: nowrap; }
.pd-table th:first-child, .pd-table td:first-child { padding-left: 18px; }
.pd-table td { padding: 8px 12px; vertical-align: middle; border-top: 1px solid var(--sg-border); }
.pd-table tbody tr:hover td { background: var(--sg-brand-green-soft); }
.pd-table tr.is-pret td:first-child { box-shadow: inset 3px 0 0 #1F7A4A; }
.pd-col { text-align: center; }
th.pd-col i, th.pd-col svg { display: block; margin: 0 auto 2px; font-size: 13px; color: var(--sg-ink-muted); }
.pd-case { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; font-size: 12px; border-radius: 9px; text-decoration: none; }
.pd-case.is-ok { color: #1F7A4A; background: color-mix(in srgb, #1F7A4A 12%, transparent); }
.pd-case.is-ko { color: #FFFFFF; background: #C0392B; box-shadow: 0 4px 10px -6px rgba(192, 57, 43, .9); transition: transform 140ms var(--sg-ease-out), filter 140ms; }
.pd-case.is-ko:hover { color: #FFFFFF; transform: scale(1.1); filter: brightness(1.1); }
.pd-case.is-ko small { font-family: var(--sg-font-mono); font-size: .5625rem; line-height: 1; }
.pd-case.is-ko:has(small) { height: 34px; }
.pd-case.is-na { color: var(--sg-ink-faint); }
.pd-relance { width: 44px; }
.pd-wa { color: #25A35A; } .pd-wa:hover { color: #FFFFFF; background: #25A35A; border-color: #25A35A; }
.pd-vide { margin: 0; padding: 24px; text-align: center; color: var(--sg-ink-muted); }
.pd-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0; padding: 12px 18px; font-size: .71875rem; color: var(--sg-ink-muted); border-top: 1px solid var(--sg-border); }
.pd-legende > span { display: inline-flex; align-items: center; gap: 6px; } .pd-legende .pd-case { min-width: 22px; height: 22px; font-size: 10px; box-shadow: none; }
.pd-legende__note { margin-left: auto; font-style: italic; }
.sg-prep__lien { display: inline-flex; margin-top: 8px; text-decoration: none; }
.sg-vg-spot__lien { font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 991.98px) { .pd-bord { grid-template-columns: 1fr; } }
/* ==========================================================================
   Paramètres : journal d'activité (jr-)
   ========================================================================== */
.jr-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.jr-filtres .sg-select { width: auto; min-width: 160px; }
.jr-jour { margin-bottom: 20px; }
.jr-jour__titre { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-family: var(--sg-font-display); font-size: 1.0625rem; color: var(--sg-ink); }
.jr-jour__titre span { font-family: var(--sg-font-sans); font-size: .71875rem; font-weight: 600; color: var(--sg-ink-faint); }
.jr-fil { position: relative; margin: 0; padding: 0; list-style: none; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 16px; }
.jr-ligne { --c: #6B7A71; position: relative; display: grid; grid-template-columns: 52px 30px minmax(0, 1fr); gap: 12px; padding: 12px 16px; border-top: 1px solid var(--sg-border); }
.jr-ligne:first-child { border-top: 0; }
.jr-ton--vert { --c: #1F7A4A; } .jr-ton--bleu { --c: #2B6CA3; } .jr-ton--rouge { --c: #B03A2E; } .jr-ton--or { --c: #B8862B; }
.jr-ligne__heure { padding-top: 6px; font-family: var(--sg-font-mono); font-size: .78125rem; font-weight: 700; color: var(--sg-ink-muted); }
.jr-ligne__pt { display: grid; place-items: center; width: 30px; height: 30px; font-size: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--sg-card-bg)); border-radius: 50%; }
.jr-ligne__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: .75rem; }
.jr-qui { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--sg-ink); }
.jr-qui i { display: grid; place-items: center; width: 22px; height: 22px; font-size: .5625rem; font-style: normal; font-weight: 800; color: var(--sg-brand-green); background: var(--sg-brand-green-soft); border-radius: 7px; }
.jr-module { color: var(--sg-ink-muted); } .jr-module i, .jr-module svg { margin-right: 3px; }
.jr-ip { margin-left: auto; font-family: var(--sg-font-mono); font-size: .65625rem; color: var(--sg-ink-faint); }
.jr-ligne__objet { margin: 3px 0 0; font-size: .84375rem; font-weight: 600; color: var(--sg-ink); }
.jr-details { margin-top: 6px; }
.jr-details summary { display: inline-block; font-size: .71875rem; font-weight: 700; color: var(--c); cursor: pointer; }
.jr-details dl { display: grid; gap: 3px; margin: 6px 0 0; padding: 8px 10px; background: var(--sg-well-bg); border-radius: 10px; }
.jr-details dl > div { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 10px; font-size: .75rem; }
.jr-details dt { font-weight: 600; color: var(--sg-ink-muted); }
.jr-details dd { margin: 0; color: var(--sg-ink); overflow-wrap: anywhere; }
.jr-details s { color: #A93226; text-decoration-color: color-mix(in srgb, #A93226 60%, transparent); }
.jr-details b { color: #1F7A4A; } .jr-details dd i, .jr-details dd svg { margin: 0 4px; font-size: 10px; color: var(--sg-ink-faint); }
@media (max-width: 767.98px) { .jr-ligne { grid-template-columns: 30px minmax(0, 1fr); } .jr-ligne__heure { grid-column: 2; padding: 0; } .jr-ligne__pt { grid-row: 1 / span 2; } }
/* ==========================================================================
   Calendrier de l'agence (ca-)
   ========================================================================== */
.ca-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.ca-nav { display: flex; align-items: center; gap: 8px; }
.ca-nav__mois { min-width: 170px; margin: 0; font-family: var(--sg-font-display); font-size: 1.375rem; text-align: center; color: var(--sg-ink); }
.ca-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.ca-source { --c: #6B7A71; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: .75rem; font-weight: 700; color: var(--sg-ink-faint);
    background: var(--sg-card-bg); border: 1px dashed var(--sg-border); border-radius: 999px; cursor: pointer; transition: all 160ms; }
.ca-source.is-voyages { --c: #1F7A4A; } .ca-source.is-formations { --c: #7A4A8C; } .ca-source.is-agence { --c: #2B6CA3; }
.ca-source span { padding: 0 6px; font-size: .65625rem; background: var(--sg-well-bg); border-radius: 999px; }
.ca-source.is-actif { color: var(--c); background: color-mix(in srgb, var(--c) 9%, var(--sg-card-bg)); border: 1px solid color-mix(in srgb, var(--c) 40%, var(--sg-border)); }
.ca-corps { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }

/* Tons partagés (évènements, lignes, prochains) */
.ca-ev, .ca-ligne, .ca-prochain, .ca-cote__legende span { --c: #6B7A71; }
.is-vert.ca-ev, .is-vert.ca-ligne, .is-vert.ca-prochain, .ca-cote__legende .is-vert { --c: #1F7A4A; }
.is-bleu.ca-ev, .is-bleu.ca-ligne, .is-bleu.ca-prochain, .ca-cote__legende .is-bleu { --c: #2B6CA3; }
.is-or.ca-ev, .is-or.ca-ligne, .is-or.ca-prochain, .ca-cote__legende .is-or { --c: #B8862B; }
.is-rouge.ca-ev, .is-rouge.ca-ligne, .is-rouge.ca-prochain, .ca-cote__legende .is-rouge { --c: #B03A2E; }
.is-prune.ca-ev, .is-prune.ca-ligne, .is-prune.ca-prochain, .ca-cote__legende .is-prune { --c: #7A4A8C; }

/* Mois */
.ca-mois { overflow: hidden; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 16px; }
.ca-mois__entete { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--sg-well-bg); border-bottom: 1px solid var(--sg-border); }
.ca-mois__entete span { padding: 8px 10px; font-size: .65625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-ink-faint); }
.ca-mois__grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ca-jour { position: relative; min-height: 118px; padding: 6px 6px 8px; border-right: 1px solid var(--sg-border); border-bottom: 1px solid var(--sg-border); transition: background 140ms; }
.ca-jour:nth-child(7n) { border-right: 0; }
.ca-jour:hover { background: color-mix(in srgb, #1F7A4A 3%, var(--sg-card-bg)); }
.ca-jour.is-weekend { background: color-mix(in srgb, var(--sg-well-bg) 55%, var(--sg-card-bg)); }
.ca-jour.is-hors { background: var(--sg-well-bg); } .ca-jour.is-hors .ca-jour__num { color: var(--sg-ink-faint); opacity: .6; }
.ca-jour__num { display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin-bottom: 4px; font-size: .78125rem; font-weight: 700; color: var(--sg-ink-muted); border-radius: 50%; }
.ca-jour.is-auj .ca-jour__num { color: #FFFFFF; background: var(--sg-brand-green); box-shadow: 0 4px 10px -4px rgba(6, 64, 42, .7); }
.ca-jour.is-auj { box-shadow: inset 0 0 0 2px color-mix(in srgb, #1F7A4A 35%, transparent); }
.ca-jour__evs { display: grid; gap: 3px; }
.ca-ev { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; padding: 3px 6px; font-size: .6875rem; text-align: left; color: var(--sg-ink);
    background: color-mix(in srgb, var(--c) 11%, var(--sg-card-bg)); border: 0; border-left: 3px solid var(--c); border-radius: 6px; cursor: pointer; transition: filter 140ms, transform 140ms; }
.ca-ev:hover { transform: translateX(1px); filter: brightness(.97); }
.ca-ev i, .ca-ev svg { flex: none; font-size: 10px; color: var(--c); }
.ca-ev b { flex: none; font-family: var(--sg-font-mono); font-size: .625rem; color: var(--c); }
.ca-ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-jour.is-passe:not(.is-auj) .ca-ev { opacity: .65; }
.ca-plus { padding: 2px 6px; font-size: .65625rem; font-weight: 700; text-align: left; color: var(--sg-brand-green); background: transparent; border: 0; cursor: pointer; }
.ca-plus:hover { text-decoration: underline; }

/* Agenda */
.ca-agenda { display: grid; gap: 10px; }
.ca-agenda__jour { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 14px; }
.ca-agenda__date { display: flex; flex-direction: column; align-items: center; padding: 6px 0; color: var(--sg-ink-muted); background: var(--sg-well-bg); border-radius: 12px; }
.ca-agenda__date strong { font-family: var(--sg-font-display); font-size: 1.5rem; line-height: 1; color: var(--sg-ink); }
.ca-agenda__date small { font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ca-agenda__date.is-auj { color: #FFFFFF; background: var(--sg-brand-green); } .ca-agenda__date.is-auj strong { color: #FFFFFF; }
.ca-agenda ul, .ca-jour-liste { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ca-ligne { display: grid; grid-template-columns: 32px 92px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; padding: 8px 10px; text-align: left; color: var(--sg-ink);
    background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-left: 4px solid var(--c); border-radius: 10px; cursor: pointer; transition: background 140ms; }
.ca-ligne:hover { background: color-mix(in srgb, var(--c) 6%, var(--sg-card-bg)); }
.ca-ligne__ico { display: grid; place-items: center; width: 32px; height: 32px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--sg-card-bg)); border-radius: 10px; }
.ca-ligne__heure { font-family: var(--sg-font-mono); font-size: .75rem; font-weight: 700; color: var(--sg-ink-muted); }
.ca-ligne__txt strong { display: block; font-size: .84375rem; } .ca-ligne__txt small { display: block; overflow: hidden; font-size: .71875rem; color: var(--sg-ink-muted); text-overflow: ellipsis; white-space: nowrap; }

/* Colonne « À venir » */
.ca-cote { position: sticky; top: 84px; display: grid; gap: 8px; padding: 14px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 16px; }
.ca-cote h3 { margin: 0 0 4px; font-size: .78125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sg-ink-muted); }
.ca-cote h3 i, .ca-cote h3 svg { margin-right: 6px; color: #B8862B; }
.ca-prochain { display: grid; gap: 1px; width: 100%; padding: 8px 10px; text-align: left; background: color-mix(in srgb, var(--c) 6%, var(--sg-card-bg)); border: 0; border-left: 3px solid var(--c); border-radius: 8px; cursor: pointer; }
.ca-prochain:hover { background: color-mix(in srgb, var(--c) 12%, var(--sg-card-bg)); }
.ca-prochain__quand { font-size: .625rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.ca-prochain strong { overflow: hidden; font-size: .78125rem; color: var(--sg-ink); text-overflow: ellipsis; white-space: nowrap; }
.ca-prochain strong i, .ca-prochain strong svg { margin-right: 4px; color: var(--c); }
.ca-prochain small { font-size: .6875rem; color: var(--sg-ink-muted); }
.ca-cote__vide { margin: 0; font-size: .78125rem; color: var(--sg-ink-muted); }
.ca-cote__legende { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 6px 0 0; padding-top: 10px; font-size: .6875rem; color: var(--sg-ink-muted); border-top: 1px dashed var(--sg-border); }
.ca-cote__legende span::before { display: inline-block; width: 8px; height: 8px; margin-right: 5px; content: ""; background: var(--c); border-radius: 2px; }

/* Détail */
.ca-detail .modal-content { overflow: hidden; }
.ca-detail__tete { --c: #6B7A71; display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; color: #FFFFFF; background: linear-gradient(120deg, var(--c), color-mix(in srgb, var(--c) 60%, #000)); }
.ca-detail__tete.is-vert { --c: #1F7A4A; } .ca-detail__tete.is-bleu { --c: #2B6CA3; } .ca-detail__tete.is-or { --c: #B8862B; } .ca-detail__tete.is-rouge { --c: #B03A2E; } .ca-detail__tete.is-prune { --c: #7A4A8C; }
.ca-detail__ico { display: grid; flex: none; place-items: center; width: 42px; height: 42px; font-size: 17px; background: rgba(255, 255, 255, .18); border-radius: 13px; }
.ca-detail__tete > div { flex: 1; }
.ca-detail__tete p { margin: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
body.app .ca-detail__tete h5 { margin: 2px 0 0; font-size: 1.0625rem; color: #FFFFFF; }
.ca-detail__tete .sg-modal__close { color: #FFFFFF; background: rgba(255, 255, 255, .15); }
.ca-detail__infos { display: grid; gap: 8px; margin: 0; }
.ca-detail__infos > div { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; font-size: .84375rem; }
.ca-detail__infos dt { color: var(--sg-ink-faint); } .ca-detail__infos dd { margin: 0; color: var(--sg-ink); }
.ca-jour-liste { padding: 0; }

/* Saisie */
.ca-types { display: flex; flex-wrap: wrap; gap: 8px; }
.ca-type { --c: #6B7A71; position: relative; margin: 0; cursor: pointer; }
.ca-type.is-vert { --c: #1F7A4A; } .ca-type.is-bleu { --c: #2B6CA3; } .ca-type.is-or { --c: #B8862B; } .ca-type.is-prune { --c: #7A4A8C; }
.ca-type input { position: absolute; opacity: 0; }
.ca-type span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: .78125rem; font-weight: 700; color: var(--sg-ink-muted); background: var(--sg-well-bg); border: 1.5px solid var(--sg-border); border-radius: 10px; transition: all 140ms; }
.ca-type input:checked + span { color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--sg-card-bg)); border-color: var(--c); }
.ca-type input:focus-visible + span { box-shadow: var(--sg-focus-ring); }
.ca-apercu__type { margin: 0 0 2px !important; font-size: .625rem !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-ink-faint) !important; }

@media (max-width: 1199.98px) { .ca-corps { grid-template-columns: 1fr; } .ca-cote { position: static; } }
@media (max-width: 767.98px) { .ca-jour { min-height: 74px; padding: 4px; } .ca-ev span, .ca-ev b { display: none; } .ca-ligne { grid-template-columns: 32px minmax(0, 1fr); } .ca-ligne__heure { display: none; } }
/* ==========================================================================
   Tableau de bord (ac-)
   ========================================================================== */
.ac-bienvenue { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 24px 28px; overflow: hidden;
    color: #FFFFFF; background: radial-gradient(circle at 85% -20%, rgba(212, 163, 57, .35), transparent 45%), linear-gradient(120deg, #06402A, #0E5A3A 60%, #127048); border-radius: 20px;
    box-shadow: 0 18px 40px -24px rgba(6, 64, 42, .8); }
.ac-bienvenue::after { position: absolute; right: -40px; bottom: -60px; width: 260px; height: 260px; content: ""; border: 34px solid rgba(255, 255, 255, .05); border-radius: 50%; }
.ac-bienvenue__texte { position: relative; z-index: 1; max-width: 640px; }
.ac-bienvenue__date { margin: 0; font-size: .71875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #F2CF7E; }
body.app .ac-bienvenue h1 { margin: 4px 0 6px; font-family: var(--sg-font-display); font-size: 1.875rem; color: #FFFFFF; }
.ac-bienvenue__resume { margin: 0; font-size: .875rem; color: rgba(255, 255, 255, .85); } .ac-bienvenue__resume strong { color: #FFFFFF; }
.ac-bienvenue__alerte { display: inline-block; margin-left: 4px; padding: 1px 10px; font-size: .75rem; font-weight: 700; color: #2B1D00; background: #F2CF7E; border-radius: 999px; }
.ac-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
body.app .ac-action { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 96px; padding: 12px 14px; font-size: .75rem; font-weight: 700; color: #FFFFFF; text-decoration: none;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; transition: background 160ms, transform 160ms var(--sg-ease-out); }
body.app .ac-action i, body.app .ac-action svg { font-size: 18px; }
body.app .ac-action:hover { color: #FFFFFF; background: rgba(255, 255, 255, .18); transform: translateY(-2px); }
body.app .ac-action.is-or { color: #2B1D00; background: #F2CF7E; border-color: transparent; } body.app .ac-action.is-or:hover { color: #2B1D00; background: #F7DC9C; }
.ac-tendance { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 7px; font-family: var(--sg-font-sans); font-size: .65625rem; font-style: normal; font-weight: 700;
    color: var(--sg-ink-muted); background: var(--sg-well-bg); border-radius: 999px; vertical-align: middle; }
.ac-tendance.is-hausse { color: #1F7A4A; background: color-mix(in srgb, #1F7A4A 12%, transparent); } .ac-tendance.is-baisse { color: #A93226; background: color-mix(in srgb, #C0392B 12%, transparent); }

.ac-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ac-bloc { display: flex; flex-direction: column; min-width: 0; padding: 18px 20px; background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 18px;
    animation: sg-fade-up 380ms var(--sg-ease-out) both; }
.ac-bloc--large { grid-column: span 2; } .ac-bloc--moitie { grid-column: span 1; }
.ac-bloc--plein { grid-column: 1 / -1; }
.ac-bloc__tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ac-bloc__tete h2 { margin: 0; font-size: 1rem; font-weight: 800; color: var(--sg-ink); }
.ac-bloc__tete p { margin: 2px 0 0; font-size: .75rem; color: var(--sg-ink-muted); }
.ac-bloc__lien { align-self: flex-start; margin-top: auto; padding-top: 12px; font-size: .78125rem; font-weight: 700; color: var(--sg-brand-green); text-decoration: none; }
.ac-bloc__lien:hover { text-decoration: underline; } .ac-bloc__lien i, .ac-bloc__lien svg { margin-left: 4px; font-size: 11px; }
.ac-compte { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; font-size: .78125rem; font-weight: 800; color: #FFFFFF; background: #C0392B; border-radius: 999px; }
.ac-chiffres { display: flex; gap: 18px; margin: 0; }
.ac-chiffres dt { font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sg-ink-faint); }
.ac-chiffres dd { margin: 0; font-family: var(--sg-font-mono); font-size: .9375rem; font-weight: 700; color: var(--sg-ink); }
.ac-chiffres dd.is-vert { color: #1F7A4A; } .ac-chiffres dd.is-rouge { color: #A93226; }
.ac-graphe { position: relative; height: 280px; } .ac-graphe--barres { height: 260px; } .ac-graphe--donut { width: 190px; height: 190px; flex: none; }
.ac-vide { margin: 0; padding: 18px 0; font-size: .8125rem; color: var(--sg-ink-muted); } .ac-vide i, .ac-vide svg { margin-right: 6px; color: #1F7A4A; }

/* À faire */
.ac-afaire { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ac-afaire__item { --c: #6B7A71; display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--sg-ink); text-decoration: none;
    background: color-mix(in srgb, var(--c) 6%, var(--sg-card-bg)); border-left: 3px solid var(--c); border-radius: 10px; transition: background 140ms, transform 140ms var(--sg-ease-out); }
.ac-afaire__item.is-rouge { --c: #C0392B; } .ac-afaire__item.is-or { --c: #C99A3B; } .ac-afaire__item.is-bleu { --c: #2B6CA3; }
.ac-afaire__item:hover { color: var(--sg-ink); background: color-mix(in srgb, var(--c) 12%, var(--sg-card-bg)); transform: translateX(2px); }
.ac-afaire__ico { display: grid; flex: none; place-items: center; width: 32px; height: 32px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--sg-card-bg)); border-radius: 10px; }
.ac-afaire__txt { flex: 1; min-width: 0; } .ac-afaire__txt strong { display: block; font-size: .8125rem; } .ac-afaire__txt small { display: block; overflow: hidden; font-size: .6875rem; color: var(--sg-ink-muted); text-overflow: ellipsis; white-space: nowrap; }
.ac-afaire__fleche { font-size: 11px; color: var(--sg-ink-faint); }

/* Départs */
.ac-departs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.ac-depart { --c: #1F7A4A; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; color: var(--sg-ink); text-decoration: none; background: var(--sg-card-bg);
    border: 1px solid var(--sg-border); border-top: 4px solid var(--c); border-radius: 14px; transition: transform 160ms var(--sg-ease-out), box-shadow 160ms; }
.ac-depart.is-oumra { --c: #2B6CA3; } .ac-depart.is-tourisme { --c: #C99A3B; }
.ac-depart:hover { color: var(--sg-ink); transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(16, 24, 20, .45); }
.ac-depart__quand { font-size: .65625rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--c); }
.ac-depart strong { font-size: .875rem; } .ac-depart > small { margin-bottom: 6px; font-size: .71875rem; color: var(--sg-ink-muted); }
.ac-jauge { --j: #1F7A4A; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: .6875rem; }
.ac-jauge.is-or { --j: #C99A3B; } .ac-jauge.is-bleu { --j: #2B6CA3; }
.ac-jauge b { font-weight: 600; color: var(--sg-ink-muted); }
.ac-jauge > span { height: 6px; overflow: hidden; background: var(--sg-surface-300); border-radius: 999px; }
.ac-jauge > span i { display: block; height: 100%; background: var(--j); border-radius: inherit; }
.ac-jauge em { font-family: var(--sg-font-mono); font-style: normal; font-weight: 700; color: var(--sg-ink); }

/* Agenda */
.ac-agenda { --c: #6B7A71; display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--sg-border); }
.ac-agenda:first-of-type { border-top: 0; }
.ac-agenda.is-vert { --c: #1F7A4A; } .ac-agenda.is-bleu { --c: #2B6CA3; } .ac-agenda.is-or { --c: #B8862B; } .ac-agenda.is-rouge { --c: #B03A2E; } .ac-agenda.is-prune { --c: #7A4A8C; }
.ac-agenda__date { display: flex; flex-direction: column; align-items: center; flex: none; width: 42px; padding: 3px 0; color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--sg-card-bg)); border-radius: 10px; }
.ac-agenda__date strong { font-size: 1rem; line-height: 1.1; } .ac-agenda__date small { font-size: .5625rem; font-weight: 700; text-transform: uppercase; }
.ac-agenda__txt { min-width: 0; } .ac-agenda__txt strong { display: block; overflow: hidden; font-size: .78125rem; color: var(--sg-ink); text-overflow: ellipsis; white-space: nowrap; }
.ac-agenda__txt strong i, .ac-agenda__txt strong svg { margin-right: 3px; font-size: 10px; color: var(--c); }
.ac-agenda__txt small { font-size: .6875rem; color: var(--sg-ink-muted); }

/* Modes */
.ac-donut { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.ac-legende { flex: 1; min-width: 180px; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ac-legende li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; column-gap: 8px; align-items: center; font-size: .78125rem; }
.ac-legende__pt { width: 10px; height: 10px; border-radius: 3px; }
.ac-legende strong { font-family: var(--sg-font-mono); color: var(--sg-ink); } .ac-legende small { grid-column: 2 / -1; font-size: .6875rem; color: var(--sg-ink-muted); }

/* Versements et activité */
.ac-versements { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ac-versements li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 4px; border-top: 1px solid var(--sg-border); }
.ac-versements li:first-child { border-top: 0; }
.ac-versements__av { display: grid; place-items: center; width: 34px; height: 34px; font-size: .6875rem; font-weight: 800; color: var(--sg-brand-green); background: var(--sg-brand-green-soft); border-radius: 10px; }
.ac-versements__txt strong { display: block; font-size: .8125rem; color: var(--sg-ink); } .ac-versements__txt small { font-size: .6875rem; color: var(--sg-ink-muted); }
.ac-versements__date { font-size: .71875rem; color: var(--sg-ink-muted); }
.ac-versements__montant { font-family: var(--sg-font-mono); font-size: .875rem; color: #1F7A4A; white-space: nowrap; } .ac-versements__montant small { font-size: .625rem; color: var(--sg-ink-faint); }
.ac-activite { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ac-activite li { --c: #6B7A71; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; font-size: .75rem; }
.ac-activite li.is-vert { --c: #1F7A4A; } .ac-activite li.is-bleu { --c: #2B6CA3; } .ac-activite li.is-rouge { --c: #B03A2E; } .ac-activite li.is-or { --c: #B8862B; }
.ac-activite li > i, .ac-activite li > svg { display: grid; place-items: center; width: 26px; height: 26px; padding: 7px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--sg-card-bg)); border-radius: 50%; }
.ac-activite strong { display: block; overflow: hidden; color: var(--sg-ink); text-overflow: ellipsis; white-space: nowrap; } .ac-activite small { color: var(--sg-ink-muted); }

@media (max-width: 1199.98px) { .ac-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ac-bloc--large { grid-column: 1 / -1; } }
@media (max-width: 767.98px) { .ac-grille { grid-template-columns: 1fr; } .ac-bloc--large, .ac-bloc--moitie { grid-column: auto; } .ac-bienvenue { padding: 20px; } .ac-versements li { grid-template-columns: 34px minmax(0, 1fr) auto; } .ac-versements__date { display: none; } }
/* ==========================================================================
   NAVIGATION CROISÉE : raccourcis entre écrans et liens vers les fiches
   ========================================================================== */
/* Rangée de raccourcis (panneau d'un voyage, vue détaillée d'un démarcheur) */
.sg-raccourcis { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-pilote__raccourcis { margin: 14px 22px 0; }
.sg-detail__raccourcis { justify-content: flex-end; margin-bottom: 12px; }
body.app a.sg-raccourci {
    display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
    font-size: .78125rem; font-weight: 600; color: var(--sg-ink); text-decoration: none;
    background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 999px;
    transition: color .15s, border-color .15s, background-color .15s, transform .15s;
}
.sg-raccourci > i, .sg-raccourci > svg { width: 13px; font-size: 12px; color: var(--sg-brand-green); }
.sg-raccourci b {
    min-width: 20px; height: 20px; padding: 0 6px; font-size: .6875rem; font-weight: 700; line-height: 20px; text-align: center;
    color: var(--sg-brand-green); background: var(--sg-brand-green-soft); border-radius: 999px; font-variant-numeric: tabular-nums;
}
body.app a.sg-raccourci:hover, body.app a.sg-raccourci:focus-visible {
    color: var(--sg-brand-green); border-color: color-mix(in srgb, var(--sg-brand-green) 45%, var(--sg-border));
    background: var(--sg-brand-green-soft); transform: translateY(-1px);
}

/* Nom cliquable menant à une fiche : reste dans le ton du texte, se souligne au survol */
body.app a.sg-lien-fiche { color: inherit; text-decoration: none; border-radius: 4px; }
body.app a.sg-lien-fiche:hover, body.app a.sg-lien-fiche:focus-visible { color: var(--sg-brand-green); }
body.app a.sg-lien-fiche:hover .sg-an__nom, body.app a.sg-lien-fiche:hover strong,
body.app a.sg-lien-fiche:hover { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--sg-brand-green) 45%, transparent); text-underline-offset: 3px; }
body.app a.sg-lien-fiche .sg-an__dossier { text-decoration: none; }
body.app a.sg-lien-fiche > i, body.app a.sg-lien-fiche > svg { margin-left: 2px; font-size: .75em; opacity: .7; }
:root[data-theme="dark"] body.app a.sg-lien-fiche:hover { color: var(--sg-or-clair); }

/* Puces cliquables (mahrams, kits de la fiche client) */
body.app a.sg-chip.is-lien { gap: 6px; text-decoration: none; cursor: pointer; transition: border-color .15s, background-color .15s; }
body.app a.sg-chip.is-lien:hover, body.app a.sg-chip.is-lien:focus-visible {
    color: var(--sg-brand-green); background: var(--sg-brand-green-soft); border-color: color-mix(in srgb, var(--sg-brand-green) 40%, var(--sg-border));
}
body.app a.sg-lien-badge { text-decoration: none; border-radius: 999px; }
body.app a.sg-lien-badge:hover .sg-badge, body.app a.sg-lien-badge:focus-visible .sg-badge { filter: brightness(.96); box-shadow: 0 0 0 2px var(--sg-brand-green-soft); }

/* Panneau d'un voyage : les lignes du manifeste ouvrent la fiche */
body.app a.sg-manif__ligne { color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
body.app a.sg-manif__ligne:hover, body.app a.sg-manif__ligne:focus-visible {
    border-color: color-mix(in srgb, var(--sg-brand-green) 40%, var(--sg-border)); box-shadow: 0 8px 18px -14px rgba(3, 20, 12, .55); transform: translateY(-1px);
}
body.app a.sg-manif__ligne:hover .sg-manif__id strong { color: var(--sg-brand-green); }
:root[data-theme="dark"] body.app a.sg-manif__ligne:hover .sg-manif__id strong { color: var(--sg-or-clair); }
body.app .sg-fin__reste a, body.app .sg-prep__liste a { color: inherit; text-decoration: none; }
body.app .sg-fin__reste a:hover, body.app .sg-prep__liste a:hover { color: var(--sg-brand-green); text-decoration: underline; text-underline-offset: 3px; }

/* Fil d'Ariane : niveaux cliquables bien visibles */
body.app .sg-hero__fil a, body.app .sg-page-header .breadcrumb a { text-decoration: none; transition: color .15s; }
body.app .sg-hero__fil a:hover, body.app .sg-page-header .breadcrumb a:hover { color: var(--sg-brand-green); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   RETOUCHES DU 19/10 : espacement des tableaux, colonne N°, journal de caisse
   ========================================================================== */
/* Colonnes plus aérées à toutes les largeurs (elles tombaient à 5 px sous 1400 px) */
table.sg-table--registre thead th,
table.sg-table--registre tbody td { padding-right: 16px; padding-left: 16px; }
table.sg-table--registre tbody td:first-child,
table.sg-table--registre thead th:first-child { padding-left: 22px; }
table.sg-table--registre tbody td.sg-col-actions:last-child { padding-right: 20px; }
table.sg-table--registre .sg-entity { gap: 12px; }
table.sg-table--registre .sg-cell-stack { gap: 3px; }
@media (max-width: 1499.98px) {
    table.sg-table--registre thead th,
    table.sg-table--registre tbody td { padding-right: 10px; padding-left: 10px; }
    body.app table.sg-table.sg-table--registre thead th { white-space: normal; line-height: 1.25; }
    table.sg-table--registre tbody td:first-child,
    table.sg-table--registre thead th:first-child { padding-left: 18px; }
    /* Textes longs coupés proprement (texte complet au survol) pour que les actions restent visibles */
    table.sg-table--registre .sg-entity__name { max-width: 160px; }
    table.sg-table--registre .sg-solde { min-width: 0; width: 88px; }
    table.sg-table--registre tbody td.sg-col-actions:last-child, table.sg-table--registre thead th:last-child { padding-right: 10px; }
    body.app table.sg-table--registre tbody .sg-row-btn.sg-row-btn--encaisser { width: 32px; padding: 0; font-size: 0; justify-content: center; }
    body.app table.sg-table--registre tbody .sg-row-btn--encaisser > svg { margin: 0; font-size: 14px; }
    table.sg-table--registre .sg-cell-main,
    table.sg-table--registre .sg-cell-sub,
    table.sg-table--registre .sg-entity__sub { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    table.sg-table--registre span.sg-cell-main:not(.d-block),
    table.sg-table--registre span.sg-cell-sub:not(.d-block) { display: inline-block; vertical-align: middle; }
    table.sg-table--registre .sg-statut-voyage { max-width: 150px; }
    table.sg-table--registre .sg-statut-voyage__pour { display: block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    table.sg-table--registre .sg-col-num { width: 44px; }
}
@media (max-width: 991.98px) {
    table.sg-table--registre thead th,
    table.sg-table--registre tbody td { padding-right: 9px; padding-left: 9px; }
}

/* Numéro de ligne, quel que soit le tableau (fenêtres de détail, formation, liste de départ) */
.sg-col-num { width: 56px; font-family: var(--sg-font-mono); font-size: .8125rem; font-weight: 600; white-space: nowrap; color: var(--sg-or-fonce); }
:root[data-theme="dark"] .sg-col-num { color: var(--sg-or-clair); }
.fo-table .sg-col-num, .sg-detail__table .sg-col-num { width: 48px; }

/* Journal de caisse : numéro en tête de chaque ligne */
.sg-jr__ligne { grid-template-columns: 44px 44px 38px minmax(0, 1.8fr) minmax(0, 1.1fr) 150px 150px auto; }
.sg-jr__num { font-family: var(--sg-font-mono); font-size: .8125rem; font-weight: 600; color: var(--sg-or-fonce); }
:root[data-theme="dark"] .sg-jr__num { color: var(--sg-or-clair); }
@media (max-width: 1199.98px) { .sg-jr__ligne { grid-template-columns: 40px 40px 36px minmax(0, 1.6fr) minmax(0, 1fr) 130px auto; } }
@media (max-width: 767.98px) { .sg-jr__ligne { grid-template-columns: 36px minmax(0, 1fr) auto; } .sg-jr__num { display: none; } }

/* Grille de remise des kits : numéro devant le pèlerin */
.sg-kt-num { flex: none; min-width: 26px; font-family: var(--sg-font-mono); font-size: .75rem; font-weight: 600; color: var(--sg-or-fonce); }
:root[data-theme="dark"] .sg-kt-num { color: var(--sg-or-clair); }
/* Kits : actions lisibles (libellé + icône) et modification depuis la grille de remise */
.sg-kt-fiche__pied { gap: 8px; }
body.app .sg-kt-action {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px;
    font-size: .78125rem; font-weight: 600; color: var(--sg-ink); background: var(--sg-card-bg);
    border: 1px solid var(--sg-border); border-radius: 10px; transition: color .15s, border-color .15s, background-color .15s;
}
body.app .sg-kt-action:hover { color: var(--sg-brand-green); border-color: color-mix(in srgb, var(--sg-brand-green) 45%, var(--sg-border)); background: var(--sg-brand-green-soft); }
body.app .sg-kt-action.is-danger { color: #B03A2E; }
body.app .sg-kt-action.is-danger:hover { color: #FFFFFF; background: #B03A2E; border-color: #B03A2E; }
:root[data-theme="dark"] body.app .sg-kt-action.is-danger { color: #F08A80; }
:root[data-theme="dark"] body.app .sg-kt-action.is-danger:hover { color: #FFFFFF; }
.sg-kt-grille__article { position: relative; }
body.app .sg-kt-art__modifier {
    position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
    font-size: 10px; color: var(--sg-ink-muted); background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-radius: 7px;
    opacity: .55; transition: opacity .15s, color .15s, border-color .15s;
}
.sg-kt-grille__article:hover .sg-kt-art__modifier, body.app .sg-kt-art__modifier:focus-visible { opacity: 1; }
body.app .sg-kt-art__modifier:hover { color: var(--sg-brand-green); border-color: var(--sg-brand-green); }
.sg-kt-zone-suppr {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 14px 16px;
    background: color-mix(in srgb, #B03A2E 6%, var(--sg-card-bg)); border: 1px dashed color-mix(in srgb, #B03A2E 40%, var(--sg-border)); border-radius: 12px;
}
.sg-kt-zone-suppr[hidden] { display: none; }
.sg-kt-zone-suppr strong { display: block; font-size: .84375rem; color: var(--sg-ink); }
.sg-kt-zone-suppr small { font-size: .75rem; color: var(--sg-ink-muted); }
/* Visas allégés : 5 colonnes qui tiennent dans l'écran, cartes réduites à l'essentiel
   (nom, problème éventuel, étape suivante) ; le détail s'ouvre au clic */
.sg-kanban { grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 10px; }
.sg-vs-rail { padding: 14px 18px; }
.sg-vs-rail__tete { margin-bottom: 10px; }
.sg-vcarte { padding: 10px 11px 9px; }
.sg-vcarte__pass:not(.is-ko) { display: none; }
.sg-vcarte__infos [data-i="demande"], .sg-vcarte__infos [data-i="depot"], .sg-vcarte__infos [data-i="expiration"] { display: none !important; }
.sg-vcarte__infos { grid-template-columns: 1fr; }
.sg-vcarte__poignee { opacity: .35; }
.sg-vcarte:hover .sg-vcarte__poignee { opacity: .8; }
.sg-vs-astuce { font-size: .78125rem; }
@media (max-width: 1399.98px) { .sg-kanban { grid-template-columns: repeat(5, minmax(185px, 1fr)); } }
/* ==========================================================================
   INSIGNES D'INITIALES : initiales blanches sur vert plein, sans contour
   (femmes : doré plein). Les monogrammes-icônes (stock, dépenses) gardent leur style.
   ========================================================================== */
body.app .sg-monogram:not(.sg-st-ico):not(.sg-tr-cat__ico),
body.app .sg-manif__av, body.app .sg-vcarte__av, body.app .fo-pelerin > i,
body.app .ac-versements__av, body.app .sg-ag__av, body.app .us-badge__av {
    color: #FFFFFF;
    background: linear-gradient(145deg, #1F7A4A, #0B5A36);
    border: 0;
    box-shadow: 0 4px 10px -6px rgba(6, 64, 42, .55);
    font-weight: 800;
    letter-spacing: .02em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}
body.app .sg-monogram.is-gold:not(.sg-st-ico):not(.sg-tr-cat__ico) {
    color: #FFFFFF;
    background: linear-gradient(145deg, #E0B556, #B88A2A);
    border: 0;
}
/* Avec photo : la photo remplit l'insigne */
body.app .sg-monogram img, body.app .sg-vcarte__av img { border-radius: inherit; }
:root[data-theme="dark"] body.app .sg-monogram:not(.sg-st-ico):not(.sg-tr-cat__ico),
:root[data-theme="dark"] body.app .sg-manif__av, :root[data-theme="dark"] body.app .sg-vcarte__av,
:root[data-theme="dark"] body.app .fo-pelerin > i, :root[data-theme="dark"] body.app .ac-versements__av,
:root[data-theme="dark"] body.app .sg-ag__av, :root[data-theme="dark"] body.app .us-badge__av {
    background: linear-gradient(145deg, #23935A, #0E6A40);
    border: 0;
}
/* ==========================================================================
   TABLEAUX PLUS AÉRÉS (demande du 19/10) : ~20 px entre les colonnes, lignes plus hautes.
   Pour tenir dans l'écran, les textes longs sont coupés plus tôt (texte complet au survol).
   ========================================================================== */
body.app table.sg-table.sg-table--registre thead th,
body.app table.sg-table.sg-table--registre tbody td { padding-right: 20px; padding-left: 20px; }
body.app table.sg-table.sg-table--registre tbody td:first-child,
body.app table.sg-table.sg-table--registre thead th:first-child { padding-left: 24px; }
body.app table.sg-table.sg-table--registre tbody td.sg-col-actions:last-child,
body.app table.sg-table.sg-table--registre thead th:last-child { padding-right: 20px; }
body.app table.sg-table.sg-table--registre tbody td { height: 70px; }
body.app table.sg-table.sg-table--registre .sg-entity { gap: 14px; }
@media (max-width: 1499.98px) {
    body.app table.sg-table.sg-table--registre thead th,
    body.app table.sg-table.sg-table--registre tbody td { padding-right: 16px; padding-left: 16px; }
    body.app table.sg-table.sg-table--registre tbody td:first-child,
    body.app table.sg-table.sg-table--registre thead th:first-child { padding-left: 20px; }
    body.app table.sg-table.sg-table--registre tbody td.sg-col-actions:last-child,
    body.app table.sg-table.sg-table--registre thead th:last-child { padding-right: 14px; }
    body.app table.sg-table.sg-table--registre .sg-entity__name { max-width: 135px; }
    body.app table.sg-table.sg-table--registre .sg-cell-main,
    body.app table.sg-table.sg-table--registre .sg-cell-sub,
    body.app table.sg-table.sg-table--registre .sg-entity__sub { max-width: 118px; }
    body.app table.sg-table.sg-table--registre .sg-statut-voyage { max-width: 125px; }
    body.app table.sg-table.sg-table--registre .sg-statut-voyage__pour { max-width: 120px; }
    body.app table.sg-table.sg-table--registre .sg-row-actions { gap: 0; }
    body.app table.sg-table.sg-table--registre tbody .sg-row-btn { width: 30px; }
    body.app table.sg-table.sg-table--registre .sg-col-num { width: 40px; }
}
@media (max-width: 991.98px) {
    body.app table.sg-table.sg-table--registre thead th,
    body.app table.sg-table.sg-table--registre tbody td { padding-right: 10px; padding-left: 10px; }
}@media (max-width: 1499.98px) {
    /* Tableaux à 10 colonnes ou plus (stock des kits) : un peu moins d'espace pour tout garder visible */
    body.app table.sg-table.sg-table--registre:has(thead th:nth-child(10)) thead th,
    body.app table.sg-table.sg-table--registre:has(thead th:nth-child(10)) tbody td { padding-right: 13px; padding-left: 13px; }
}
/* ==========================================================================
   JOURNAL D'ACTIVITÉ EN TABLEAU (registre d'audit) et fenêtre de détail avant / après
   ========================================================================== */
.jr-filtres.sg-registre__outils { display: flex; flex-direction: column; gap: 10px; }
.jr-total { font-size: .8125rem; color: var(--sg-ink-muted); white-space: nowrap; }
.jr-total b { color: var(--sg-ink); font-variant-numeric: tabular-nums; }
.jr-table .fo-pastille { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.jr-table .fo-pastille > svg { font-size: 11px; }
.jr-module { display: inline-flex; align-items: center; gap: 7px; font-size: .8125rem; color: var(--sg-ink); white-space: nowrap; }
.jr-module > svg { width: 14px; color: var(--sg-brand-green); }
:root[data-theme="dark"] .jr-module > svg { color: var(--sg-or-clair); }
body.app .jr-table td.jr-objet { max-width: 300px; }
.jr-objet span { display: block; overflow: hidden; font-size: .8125rem; color: var(--sg-ink); text-overflow: ellipsis; white-space: nowrap; }
body.app .jr-voir {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; font-size: .75rem; font-weight: 600; white-space: nowrap;
    color: var(--sg-brand-green); background: var(--sg-brand-green-soft); border: 0; border-radius: 8px; transition: background .15s, color .15s;
}
body.app .jr-voir:hover { color: #FFFFFF; background: var(--sg-brand-green); }
:root[data-theme="dark"] body.app .jr-voir { color: var(--sg-or-clair); }
:root[data-theme="dark"] body.app .jr-voir:hover { color: #FFFFFF; }
@media (max-width: 1499.98px) { body.app .jr-table td.jr-objet { max-width: 220px; } }

/* Fenêtre de détail */
.jr-modal .modal-header { align-items: flex-start; gap: 16px; }
.jr-modal__sur { margin: 0 0 4px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sg-ink-muted); }
.jr-modal__sur.is-vert { color: #1F7A4A; } .jr-modal__sur.is-rouge { color: #B03A2E; } .jr-modal__sur.is-bleu { color: #2B6CA3; } .jr-modal__sur.is-or { color: #9A7322; }
body.app .jr-modal .modal-title { font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--sg-ink); }
.jr-modal__infos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; padding: 14px 16px; background: var(--sg-well-bg); border-radius: 12px; }
.jr-modal__infos dt { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--sg-ink-muted); }
.jr-modal__infos dd { margin: 3px 0 0; font-size: .84375rem; font-weight: 600; color: var(--sg-ink); }
.jr-modal__table { width: 100%; }
.jr-modal__table td { padding: 9px 12px; font-size: .8125rem; vertical-align: top; overflow-wrap: anywhere; }
.jr-modal__champ { font-weight: 600; color: var(--sg-ink); }
.jr-modal__table td.is-avant { color: #B03A2E; text-decoration: line-through; text-decoration-color: color-mix(in srgb, #B03A2E 45%, transparent); }
.jr-modal__table td.is-apres { font-weight: 600; color: #1F7A4A; }
.jr-modal__table td.is-vide { color: var(--sg-ink-faint); }
:root[data-theme="dark"] .jr-modal__table td.is-avant { color: #F08A80; }
:root[data-theme="dark"] .jr-modal__table td.is-apres { color: #6FD39C; }
.jr-modal__vide { margin: 0; font-size: .8125rem; color: var(--sg-ink-muted); }
@media (max-width: 575.98px) { .jr-modal__infos { grid-template-columns: 1fr; } }.jr-filtres.sg-registre__outils { padding: 18px 22px; border-bottom: 1px solid var(--sg-border); }
.jr-filtres .sg-registre__ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; }
.jr-filtres .sg-registre__ligne > .sg-search { flex: 1 1 260px; max-width: 360px; }
.jr-filtres select.sg-select, .jr-filtres .sg-filter-select { width: auto; min-width: 170px; }
/* Visionneuse PDF agrandie (demande du 20/10) : presque plein écran, document ajusté à la largeur à l'ouverture */
@media (min-width: 576px) {
    body.app .sg-pdf .modal-dialog { --bs-modal-width: min(1400px, 96vw); max-width: min(1400px, 96vw); height: 96vh; min-height: 0; margin: 2vh auto; }
}
body.app .sg-pdf .modal-content { display: flex; flex-direction: column; height: 96vh; }
body.app .sg-pdf .sg-pdf__pages { flex: 1 1 auto; height: auto; min-height: 0; padding: 24px 28px; }
@media (max-width: 575.98px) {
    body.app .sg-pdf .modal-dialog { margin: 0; height: 100vh; }
    body.app .sg-pdf .modal-content { height: 100vh; border-radius: 0; }
}
/* ==========================================================================
   POLICE DES CHIFFRES (versements et reçus) : IBM Plex Sans, chiffres à chasse fixe, zéro sans barre.
   « SG Chiffres » ne couvre que les chiffres et leurs séparateurs (unicode-range) : dans une zone .sg-chiffres,
   les nombres sont en Plex et le texte reste en Inter, sans retoucher chaque élément.
   ========================================================================== */
@font-face { font-family: "SG Chiffres"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans/IBMPlexSans-Regular.ttf") format("truetype"); unicode-range: U+0030-0039, U+002B-002E, U+0025, U+00A0, U+202F, U+2212; }
@font-face { font-family: "SG Chiffres"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans/IBMPlexSans-Medium.ttf") format("truetype"); unicode-range: U+0030-0039, U+002B-002E, U+0025, U+00A0, U+202F, U+2212; }
@font-face { font-family: "SG Chiffres"; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans/IBMPlexSans-SemiBold.ttf") format("truetype"); unicode-range: U+0030-0039, U+002B-002E, U+0025, U+00A0, U+202F, U+2212; }
@font-face { font-family: "SG Chiffres"; font-weight: 700 900; font-display: swap; src: url("../fonts/ibm-plex-sans/IBMPlexSans-Bold.ttf") format("truetype"); unicode-range: U+0030-0039, U+002B-002E, U+0025, U+00A0, U+202F, U+2212; }
:root { --sg-font-chiffres: "SG Chiffres", var(--sg-font-sans); }

/* Page Versements et ses fenêtres (encaissement, détail d'un versement, d'une souscription) */
.sg-chiffres, .sg-chiffres *,
#caisseModal, #caisseModal *, #versementModal, #versementModal *, #souscriptionModal, #souscriptionModal *,
.select2-container--open .sg-s2-pelerin small {
    font-family: var(--sg-font-chiffres);
    font-variant-numeric: tabular-nums lining-nums;
}
/* Les icônes gardent leur police */
.sg-chiffres .fa-solid, .sg-chiffres .fa-regular, .sg-chiffres .fa-brands, .sg-chiffres svg,
#caisseModal svg, #versementModal svg, #souscriptionModal svg { font-family: inherit; }
/* ==========================================================================
   ACCUEILS PAR RÔLE (caisse, opérations) : compléments aux blocs du tableau de bord
   ========================================================================== */
body.app .ac-action--grand { padding-left: 22px; padding-right: 22px; font-size: .9375rem; }
body.app .ac-mini-btn {
    display: grid; flex: none; place-items: center; width: 32px; height: 32px; padding: 0;
    color: var(--sg-brand-green); background: var(--sg-brand-green-soft); border: 0; border-radius: 9px; text-decoration: none;
    transition: background .15s, color .15s;
}
body.app .ac-mini-btn:hover { color: #FFFFFF; background: var(--sg-brand-green); }
.ac-versements li:has(.ac-mini-btn) { grid-template-columns: 34px minmax(0, 1fr) auto auto auto; }
.ac-versements li:has(.ac-mini-btn):not(:has(.ac-versements__date)) { grid-template-columns: 34px minmax(0, 1fr) auto auto; }
.ac-versements__montant.is-rouge { color: #B03A2E; }
.ac-modes-jour { min-width: 0; gap: 10px; }
.ac-modes-jour li { grid-template-columns: 22px minmax(0, 1fr) auto; }
.ac-modes-jour li > svg, .ac-modes-jour li > i { width: 16px; color: var(--sg-brand-green); }
.ac-modes-jour li a { color: var(--sg-ink); text-decoration: none; }
.ac-modes-jour li a:hover { color: var(--sg-brand-green); text-decoration: underline; }
.ac-modes-jour strong.is-rouge { color: #B03A2E; }
.ac-total-jour { margin: 14px 0 0; padding-top: 10px; border-top: 1px dashed var(--sg-border); display: flex; justify-content: space-between; font-size: .875rem; color: var(--sg-ink-muted); }
.ac-total-jour strong { color: var(--sg-ink); }
.ac-modes-jour { align-content: start; align-self: start; }
/* ==========================================================================
   BARRE DES VUES (trésorerie) : grands boutons bien distincts, la vue ouverte en vert avec un filet doré
   ========================================================================== */
.sg-vues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 4px 0 20px; }
body.app a.sg-vue {
    position: relative; display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 18px;
    color: var(--sg-ink); text-decoration: none; background: var(--sg-card-bg);
    border: 1px solid var(--sg-border); border-radius: 14px; box-shadow: var(--sg-shadow-xs);
    transition: border-color .15s, box-shadow .15s, transform .15s, background-color .15s;
}
body.app a.sg-vue:hover { border-color: color-mix(in srgb, var(--sg-brand-green) 45%, var(--sg-border)); box-shadow: 0 10px 22px -16px rgba(6, 64, 42, .55); transform: translateY(-1px); }
.sg-vue__ico { display: grid; flex: none; place-items: center; width: 42px; height: 42px; font-size: 17px; color: var(--sg-brand-green); background: var(--sg-brand-green-soft); border-radius: 12px; }
.sg-vue__txt { min-width: 0; }
.sg-vue__txt strong { display: block; font-size: .9375rem; font-weight: 700; }
.sg-vue__txt small { display: block; font-size: .75rem; color: var(--sg-ink-muted); }
body.app a.sg-vue.is-actif { color: #FFFFFF; background: linear-gradient(135deg, #0B6B45, #06402A); border-color: transparent; box-shadow: 0 14px 28px -16px rgba(6, 64, 42, .8); }
body.app a.sg-vue.is-actif::after { position: absolute; left: 18px; right: 18px; bottom: -1px; height: 3px; content: ""; background: #D4A339; border-radius: 3px 3px 0 0; }
body.app a.sg-vue.is-actif .sg-vue__ico { color: #2B1D00; background: #F2CF7E; }
body.app a.sg-vue.is-actif .sg-vue__txt small { color: #CFE5D8; }
:root[data-theme="dark"] .sg-vue__ico { color: var(--sg-or-clair); }
@media (max-width: 767.98px) { .sg-vues { grid-template-columns: 1fr; } }

/* ==========================================================================
   Paramètres > Agence : aperçu vivant (barre du haut, en-tête des reçus)
   ========================================================================== */
.pa-apercu { padding: 14px 16px 16px; }
.pa-apercu__titre { margin: 0 0 10px; font-size: var(--sg-fs-label); font-weight: 600; letter-spacing: var(--sg-tracking-caps); text-transform: uppercase; color: var(--sg-ink-muted); }
.pa-barre { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--sg-surface-100); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-md); }
.pa-barre__medaillon { display: grid; flex: none; place-items: center; width: 46px; height: 46px; overflow: hidden; background: var(--sg-sb-brand-bg); border: 1px solid var(--sg-border); border-radius: 50%; }
.pa-barre__medaillon img { width: 80%; height: 80%; object-fit: contain; }
.pa-barre__texte { display: grid; min-width: 0; line-height: 1.15; }
.pa-barre__texte strong { font-family: var(--sg-font-display); font-size: 1.15rem; color: var(--sg-brand-green); }
.pa-barre__texte small { overflow: hidden; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sg-brand-gold); white-space: nowrap; text-overflow: ellipsis; }
.pa-recu { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: #FFFFFF; border: 1px solid #E7CF94; border-radius: var(--sg-radius-md); }
.pa-recu__logo { display: grid; flex: none; place-items: center; width: 56px; height: 56px; overflow: hidden; background: #FFFFFF; border: 1px solid #E7CF94; border-radius: 9px; }
.pa-recu__logo img { width: 100%; height: 100%; object-fit: contain; }
.pa-recu__texte { display: grid; gap: 2px; min-width: 0; font-size: .72rem; color: #5B6B61; }
.pa-recu__texte strong { font-family: var(--sg-font-display); font-size: .98rem; color: #06402A; }
.pa-recu__texte strong small { font-family: var(--sg-font-sans); font-size: .62rem; font-weight: 700; letter-spacing: .08em; color: #9A7322; }
.pa-recu__texte b { font-family: var(--sg-font-mono); font-weight: 500; color: #0C1A12; }
.pa-recu__pied { margin: 8px 2px 0; font-size: .72rem; text-align: right; color: var(--sg-ink-muted); }
.pa-note { display: flex; gap: 8px; margin: 0; padding: 12px 14px; font-size: .78rem; color: var(--sg-ink-muted); background: var(--sg-brand-gold-soft); border-radius: var(--sg-radius-md); }
.pa-note i { margin-top: 2px; color: var(--sg-brand-gold); }
@media (max-width: 991.98px) { .pa-agence { grid-template-columns: 1fr; } }