/* ==========================================================================================================
   SOCLE COMMUN — apparence « Nouvelle » du portail (29/10/2026)
   Référence de design : C:\DEV\docs\design\socle_ece_20261029.html (FactureX + intranet ECEGROUPE + Pilotage
   HBI de PSM). Toutes les règles sont sous [data-apparence="socle"], posé sur <html> de chaque page : à l'essai
   au choix de l'utilisateur le 29/10/2026, seule apparence du portail depuis le soir même (core/themes.py).

   Principe : les composants ne lisent que des RÔLES (--s-bg, --s-surface, --s-ink, --s-fort, --s-accent…),
   déduits des variables de chaque thème (variables.css, themes.css). Un thème ne change que des valeurs.
   Contrastes AA vérifiés pour chaque thème par core/tests/test_apparence.py.
   Polices servies par le portail (CSP : aucun CDN) — copies de MEGPSM, licence SIL OFL 1.1.
   ========================================================================================================== */

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../vendor/polices/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../vendor/polices/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../vendor/polices/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

/* ----------------------------------------------------------------------------------------------------------
   1. RÔLES — charte ECE et thèmes Océan / Forêt (déduits de leurs variables)
   ---------------------------------------------------------------------------------------------------------- */
[data-apparence="socle"] {
    /* Fond du portail classique (retour user 04/08, redit le 29/10 sur le socle) : sur un gris à 2 % du blanc,
       les cartes blanches ne se détachaient plus. */
    --s-bg: var(--theme-fond, #eceef3);
    --s-surface: #ffffff;
    --s-sunk: var(--theme-teinte, #f1f1f5);
    --s-ink: var(--ece-purple-dark);
    --s-muted: #4f4f63;
    --s-line: #e3e3ec;
    --s-line-soft: color-mix(in srgb, var(--s-line) 70%, transparent);
    /* Sélection forte (page, onglet de segment, puce) et action principale : bleu nuit, texte or */
    --s-fort: var(--ece-purple-dark);
    --s-fort-ink: var(--theme-accent-sur-fonce, var(--ece-gold));
    --s-pr-bg: var(--ece-purple-dark);
    --s-pr-ink: var(--theme-accent-sur-fonce, var(--ece-gold));
    /* Survols : le fond fonce (principal) ou s'éclaircit (validation), le contraste ne baisse jamais
       (Forêt : or sur --ece-purple = 4,0:1, texte sur --ece-gold-hover = 4,4:1). */
    --s-pr-hover: color-mix(in srgb, var(--ece-purple-dark) 85%, #000000);
    /* Validation, enregistrement : or, texte foncé */
    --s-valider-bg: var(--ece-gold);
    --s-valider-ink: var(--theme-encre-accent, var(--ece-purple-dark));
    --s-valider-hover: color-mix(in srgb, var(--ece-gold) 85%, #ffffff);
    --s-accent: var(--ece-gold);
    --s-accent-soft: var(--theme-teinte-accent, #fbf7e1);
    --s-anneau: var(--ece-gold-dark);
    --s-focus: var(--ece-purple-dark);
    --s-lien: var(--bs-link-color);
    --s-serie: var(--ece-purple);
    /* États : une couleur = un sens, sur tous les écrans */
    --s-good: #146c43; --s-good-soft: #e8f5e9;
    --s-warn: #8a5200; --s-warn-soft: #fff3e0;
    --s-bad: #b02a37; --s-bad-soft: #fdecea;
    --s-info: var(--ece-purple-light); --s-info-soft: color-mix(in srgb, var(--ece-purple-light) 10%, #ffffff);
    --s-neutre: #495057; --s-neutre-soft: #f1f1f4;
    --s-ombre: 0 1px 2px rgb(0 0 0 / .04), 0 4px 16px rgb(0 0 0 / .05);
    --s-ombre-forte: 0 18px 48px rgb(0 0 0 / .18);
    --s-r-ctl: 8px;
    --s-r-bloc: 12px;
    /* 29/10/2026 (retour user) : une seule police pour tous les thèmes, celle de MEGPSM ; les thèmes ne
       changent que des couleurs. Montants en IBM Plex Mono partout. */
    --s-f-body: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --s-f-mono: "IBM Plex Mono", Consolas, "Cascadia Code", ui-monospace, monospace;
    /* Barre latérale (section 15) : la couleur foncée du thème, comme la barre de Pilotage HBI */
    --s-side: var(--ece-purple-dark);
    --s-side-2: var(--ece-purple);
    --s-side-ink: #f4f4f6;
    --s-side-muted: color-mix(in srgb, var(--ece-purple-dark) 30%, #ffffff);
    --s-side-accent: var(--ece-gold);
    /* Titres de section (non cliquables), en retrait des liens */
    --s-side-titre: color-mix(in srgb, var(--s-side-ink) 55%, var(--s-side));
}

/* MEGPSM : règles de Pilotage HBI — action principale rouge, sélection anthracite à texte blanc,
   coins plus ronds (la police, Plus Jakarta Sans, est commune à tous les thèmes). L'orange d'HBI (#a85d00,
   4,45:1) est assombri. */
:root[data-theme="megpsm"][data-apparence="socle"] {
    --s-bg: var(--theme-fond, #ededf1);
    --s-sunk: #f1f1f4;
    --s-ink: #16161d;
    --s-muted: #4f4f5c;
    --s-line: #e6e6ec;
    --s-fort: #16161d;
    --s-fort-ink: #ffffff;
    --s-pr-bg: var(--ece-gold);
    --s-pr-ink: #ffffff;
    --s-pr-hover: var(--ece-gold-hover);
    --s-valider-bg: var(--ece-gold);
    --s-valider-ink: #ffffff;
    --s-valider-hover: var(--ece-gold-hover);
    /* M2 (revue, 01/11/2026) : rouge réservé aux actions — icônes de blocs, survols et repères en anthracite, séries
       des graphiques en anthracite (le focus clavier reste rouge, bien visible). */
    --s-anneau: #4f4f5c;
    --s-focus: var(--ece-gold);
    --s-serie: #3a3a44;
    --s-good: #16794a; --s-good-soft: #e3f5ea;
    --s-warn: #985200; --s-warn-soft: #fdf0dc;
    --s-bad: #b4161f; --s-bad-soft: #fde8e9;
    --s-info: #3a3a44; --s-info-soft: #ececf1;
    --s-neutre: #4f4f5c; --s-neutre-soft: #f1f1f4;
    --s-r-ctl: 10px;
    --s-r-bloc: 14px;
}

/* ----------------------------------------------------------------------------------------------------------
   2. BASE
   ---------------------------------------------------------------------------------------------------------- */
[data-apparence="socle"] body {
    background-color: var(--s-bg);
    color: var(--s-ink);
    font-family: var(--s-f-body);
}
[data-apparence="socle"] :focus-visible {
    outline: 2px solid var(--s-focus);
    outline-offset: 2px;
}
[data-apparence="socle"] .num,
[data-apparence="socle"] .table-modern tbody td.num,
[data-apparence="socle"] .table-modern tfoot td.num,
[data-apparence="socle"] .table-modern tfoot th.num {
    font-family: var(--s-f-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.92em;
}
/* En-tête d'une colonne de montants, bouton dans la colonne, libellé de carte sur téléphone : police courante,
   seuls les chiffres sont en chasse fixe */
[data-apparence="socle"] th.num { font-family: inherit; font-size: inherit; }
[data-apparence="socle"] .num .btn { font-family: var(--s-f-body); font-size: 0.875rem; }
[data-apparence="socle"] .facturation table.cartes td[data-label]::before { font-family: var(--s-f-body); }
/* 01/11/2026 : codes et numéros de compte dans la police des montants, partout. Le backoffice (Compta, Révision)
   les écrivait en Cascadia Code (.compte-num, scanx.css) ou en SFMono / Consolas (code et .font-monospace de
   Bootstrap). Au portail, seul <code> était concerné (variables des relances). IBM Plex Mono n'est servie qu'en
   400 et 500 : .compte-num (600) passe à 500, sans faux gras. Le !important répond à celui de .font-monospace. */
[data-apparence="socle"] code,
[data-apparence="socle"] kbd,
[data-apparence="socle"] samp,
[data-apparence="socle"] pre,
[data-apparence="socle"] .compte-num { font-family: var(--s-f-mono); }
[data-apparence="socle"] .font-monospace { font-family: var(--s-f-mono) !important; }
[data-apparence="socle"] .compte-num { font-weight: 500; }
[data-apparence="socle"] .text-muted { color: var(--s-muted) !important; }
[data-apparence="socle"] .footer {
    background: transparent;
    color: var(--s-muted);
    border-top: 1px solid var(--s-line);
}

/* ----------------------------------------------------------------------------------------------------------
   3. EN-TÊTE : barre de navigation, dossier, utilisateur, menus
   ---------------------------------------------------------------------------------------------------------- */
[data-apparence="socle"] .navbar-ece {
    background: color-mix(in srgb, var(--s-surface) 90%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: none;
    border-bottom: 1px solid var(--s-line);
}
[data-apparence="socle"] .navbar-brand-portail .brand-portail { color: var(--s-ink); font-weight: 800; }
[data-apparence="socle"] .navbar-brand-portail .brand-groupe { color: var(--s-muted); }
/* layout.css pose la couleur des liens en !important (or foncé au survol et sur l'onglet actif) */
[data-apparence="socle"] .navbar-ece .nav-link { color: var(--s-ink) !important; white-space: nowrap; }
/* Barre sur une ligne entre 992 et 1500 px : les icônes s'effacent, les libellés restent (Plus Jakarta Sans,
   plus large que la police système, faisait passer « Tableau de bord » sur deux lignes en MEGPSM). */
@media (min-width: 992px) and (max-width: 1499.98px) {
    [data-apparence="socle"] .navbar-ece .nav-link .bi { display: none; }
    [data-apparence="socle"] .navbar-ece .nav-link { padding-left: 0.5rem; padding-right: 0.5rem; }
}
[data-apparence="socle"] .navbar-ece .nav-link:hover { color: var(--s-ink) !important; border-bottom-color: var(--s-line); }
[data-apparence="socle"] .navbar-ece .nav-link.active { color: var(--s-ink) !important; font-weight: 700; border-bottom-color: var(--s-anneau); }
/* Retour user 29/10 : plus de halo doré au clic (utilities.css, .nav-link:focus) qui débordait des cases puis
   disparaissait ; seul le soulignement reste. Au clavier, le soulignement passe en bleu nuit. */
[data-apparence="socle"] .navbar-ece .nav-link:focus,
[data-apparence="socle"] .navbar-ece .nav-link:focus-visible { box-shadow: none; outline: none; }
[data-apparence="socle"] .navbar-ece .nav-link:focus-visible { border-bottom-color: var(--s-focus); }
[data-apparence="socle"] .navbar-ece .nav-link .bi { color: var(--s-muted); }
[data-apparence="socle"] .navbar-ece .nav-link.active .bi { color: var(--s-anneau); }
[data-apparence="socle"] .navbar-dossier-select {
    border: 1px solid var(--s-line);
    border-radius: var(--s-r-ctl);
    background: var(--s-surface);
    color: var(--s-ink);
}
[data-apparence="socle"] a.navbar-dossier-select:hover,
[data-apparence="socle"] a.navbar-dossier-select:focus {
    background: var(--s-accent-soft);
    border-color: var(--s-anneau);
    color: var(--s-ink);
    box-shadow: none;
}
[data-apparence="socle"] .navbar-dossier-select .bi { color: var(--s-muted); }
[data-apparence="socle"] .user-avatar { background: var(--s-pr-bg); color: var(--s-pr-ink); }
[data-apparence="socle"] .dropdown-menu {
    border: 1px solid var(--s-line);
    border-radius: 12px;
    box-shadow: var(--s-ombre-forte);
    padding: 6px;
}
[data-apparence="socle"] .dropdown-item { border-radius: 8px; color: var(--s-ink); }
[data-apparence="socle"] .dropdown-item:hover,
[data-apparence="socle"] .dropdown-item:focus { background: var(--s-sunk); color: var(--s-ink); }
[data-apparence="socle"] .dropdown-item.active,
[data-apparence="socle"] .dropdown-item:active,
[data-apparence="socle"] .dropdown-item[aria-current="true"],
[data-apparence="socle"] .dropdown-item[aria-pressed="true"] { background: var(--s-accent-soft); color: var(--s-ink); font-weight: 600; }
[data-apparence="socle"] .navbar-dossier-menu .dropdown-item.active { background: var(--s-accent-soft); color: var(--s-ink); }

/* ----------------------------------------------------------------------------------------------------------
   4. EN-TÊTE DE PAGE : plus de bandeau violet, un titre net sur le fond
   ---------------------------------------------------------------------------------------------------------- */
[data-apparence="socle"] .page-header {
    background: none;
    color: var(--s-ink);
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    min-height: 0;
    margin: 0 0 1.25rem;
    align-items: flex-end;
}
[data-apparence="socle"] .page-header .page-title {
    color: var(--s-ink);
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    text-shadow: none;
}
[data-apparence="socle"] .page-header .page-title i { color: var(--s-anneau); font-size: 0.8em; }
[data-apparence="socle"] .page-header .page-subtitle { color: var(--s-muted); }
[data-apparence="socle"] .facturation .page-retour { color: var(--s-muted); }
[data-apparence="socle"] .facturation .page-retour:hover,
[data-apparence="socle"] .facturation .page-retour:focus { color: var(--s-ink); }
@media (max-width: 768px) {
    [data-apparence="socle"] .page-header { padding: 0; margin-bottom: 1rem; }
    [data-apparence="socle"] .page-header .page-title { font-size: 1.35rem; }
}

/* ----------------------------------------------------------------------------------------------------------
   5. BLOCS : cartes à en-tête clair (plus de bandeau violet), une seule ombre douce
   ---------------------------------------------------------------------------------------------------------- */
[data-apparence="socle"] .card,
[data-apparence="socle"] .modern-card,
[data-apparence="socle"] .chart-card {
    background: var(--s-surface);
    border: 1px solid var(--s-line);
    border-radius: var(--s-r-bloc);
    box-shadow: var(--s-ombre);
}
[data-apparence="socle"] .card.shadow,
[data-apparence="socle"] .card.shadow-sm,
[data-apparence="socle"] .card.shadow-lg { box-shadow: var(--s-ombre) !important; }
[data-apparence="socle"] .modern-card:hover,
[data-apparence="socle"] .chart-card:hover { box-shadow: var(--s-ombre); transform: none; }
[data-apparence="socle"] .card-header,
[data-apparence="socle"] .modern-card .card-header,
[data-apparence="socle"] .chart-card .card-header {
    background: var(--s-surface);
    color: var(--s-ink);
    border-bottom: 1px solid var(--s-line-soft);
    border-radius: var(--s-r-bloc) var(--s-r-bloc) 0 0 !important;
    font-weight: 700;
    padding: 0.8rem 1rem;
}
[data-apparence="socle"] .modern-card .card-header i,
[data-apparence="socle"] .chart-card .card-header h2 i { color: var(--s-anneau) !important; }
[data-apparence="socle"] .chart-card .card-header h2 { color: var(--s-ink); }
[data-apparence="socle"] .modern-card .card-header .text-muted { color: var(--s-muted) !important; }
[data-apparence="socle"] .facturation .intertitre { color: var(--s-muted); }
[data-apparence="socle"] .facturation .note-carte,
[data-apparence="socle"] .facturation .detail-ligne { color: var(--s-muted); }

/* ----------------------------------------------------------------------------------------------------------
   6. TUILES CHIFFRÉES : blanches, libellé discret, chiffre net (plus d'aplats en dégradé ni d'icône géante)
   ---------------------------------------------------------------------------------------------------------- */
[data-apparence="socle"] .kpi-card,
[data-apparence="socle"] .kpi-card[class*="gradient-"] {
    background: var(--s-surface);
    color: var(--s-ink);
    border: 1px solid var(--s-line);
    border-radius: var(--s-r-bloc);
    box-shadow: var(--s-ombre) !important;
}
[data-apparence="socle"] .kpi-card:hover { transform: none; }
[data-apparence="socle"] .kpi-card .card-body,
[data-apparence="socle"] .kpi-card[class*="gradient-"] .card-body { color: var(--s-ink); padding: 1rem 1.1rem; }
/* 29/10/2026 au soir (revue des écrans, M7) : libellé en casse normale partout — les tuiles en petites capitales grises
   (components.css) côtoyaient celles du tableau de bord et des synthèses en casse normale. */
[data-apparence="socle"] .kpi-card .kpi-label {
    color: var(--s-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    opacity: 1;
}
/* Montants des tuiles en mono, comme les tableaux et les synthèses (seules les graisses 400 et 500 de la mono sont
   servies : 500, pas de faux gras). */
[data-apparence="socle"] .kpi-card .kpi-value,
[data-apparence="socle"] .facturation .kpi-card .kpi-value {
    color: var(--s-ink);
    font-family: var(--s-f-mono);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin: 0.2rem 0;
    font-variant-numeric: tabular-nums;
}
/* 02/11/2026 : valeur faite de mots (« Payée », « Actif », « Équilibrée » en Compta) en police courante, la mono est
   pour les chiffres. Classe kpi-texte posée par le gabarit ; après la règle ci-dessus, de même poids. */
[data-apparence="socle"] .kpi-card .kpi-value.kpi-texte,
[data-apparence="socle"] .facturation .kpi-card .kpi-value.kpi-texte { font-family: var(--s-f-body); letter-spacing: 0; }
[data-apparence="socle"] .kpi-card .kpi-detail,
[data-apparence="socle"] .facturation .kpi-detail,
[data-apparence="socle"] .kpi-card .kpi-compare { color: var(--s-muted); opacity: 1; }
[data-apparence="socle"] .kpi-card .kpi-detail a { color: var(--s-lien); }
[data-apparence="socle"] .kpi-card .kpi-icon { display: none; }
/* Téléphone (deux tuiles par rangée) : un montant à 6 chiffres tient sur une ligne, « € » compris */
@media (max-width: 575.98px) {
    [data-apparence="socle"] .kpi-card .kpi-value,
    [data-apparence="socle"] .facturation .kpi-card .kpi-value { font-size: 1.15rem; white-space: nowrap; }
}
/* Petit téléphone (~134 px utiles par tuile) : « 1 234 567,89 € » tient encore sur une ligne */
@media (max-width: 399.98px) {
    [data-apparence="socle"] .kpi-card .kpi-value,
    [data-apparence="socle"] .facturation .kpi-card .kpi-value { font-size: 1rem; }
}
/* Tuile cliquable (lien vers la liste filtrée, Achats) : pas de soulignement, survol pâle et anneau */
[data-apparence="socle"] a:has(> .kpi-card) { display: block; height: 100%; text-decoration: none; border-radius: var(--s-r-bloc); }
[data-apparence="socle"] a:hover > .kpi-card,
[data-apparence="socle"] a:focus-visible > .kpi-card,
[data-apparence="socle"] a[aria-current="page"] > .kpi-card {
    background: var(--s-accent-soft);
    border-color: var(--s-anneau);
    box-shadow: inset 0 0 0 1px var(--s-anneau) !important;
}
[data-apparence="socle"] .kpi-chip { background: var(--s-sunk); color: var(--s-ink); }

/* Tuiles à jauge du tableau de bord */
[data-apparence="socle"] .kpi-section { border-bottom-color: var(--s-line); }
[data-apparence="socle"] .kpi-section-titre {
    color: var(--s-muted);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}
[data-apparence="socle"] .kpi-section-titre::before { display: none; }
[data-apparence="socle"] .kpi-jauge { border-color: var(--s-line); }
[data-apparence="socle"] .kpi-jauge-libelle { color: var(--s-muted); }
[data-apparence="socle"] .kpi-jauge-valeur { color: var(--s-ink); font-family: var(--s-f-mono); font-weight: 500; letter-spacing: -0.02em; }
[data-apparence="socle"] .kpi-jauge-favorable { color: var(--s-good); }
[data-apparence="socle"] .kpi-jauge-defavorable { color: var(--s-bad); }
[data-apparence="socle"] .kpi-jauge-fond { fill: var(--s-sunk); }
[data-apparence="socle"] .kpi-jauge-niveau { fill: var(--s-serie); }
[data-apparence="socle"] .kpi-jauge-repere { stroke: var(--s-ink); }

/* ----------------------------------------------------------------------------------------------------------
   7. BOUTONS : neutre pour tout, une seule action pleine (bleu nuit), validation or, destructeur rouge
   ---------------------------------------------------------------------------------------------------------- */
[data-apparence="socle"] .btn {
    border-radius: var(--s-r-ctl);
    font-weight: 600;
    box-shadow: none;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
[data-apparence="socle"] .btn:focus-visible { outline: 2px solid var(--s-focus); outline-offset: 2px; box-shadow: none; }
[data-apparence="socle"] .btn-ece-primary,
[data-apparence="socle"] .btn-primary,
[data-apparence="socle"] .btn-auth {
    background: var(--s-pr-bg);
    border: 1px solid var(--s-pr-bg);
    color: var(--s-pr-ink);
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--s-pr-bg) 55%, transparent);
}
[data-apparence="socle"] .btn-ece-primary:hover,
[data-apparence="socle"] .btn-ece-primary:focus,
[data-apparence="socle"] .btn-primary:hover,
[data-apparence="socle"] .btn-auth:hover {
    background: var(--s-pr-hover);
    border-color: var(--s-pr-hover);
    color: var(--s-pr-ink);
}
[data-apparence="socle"] .btn-ece-success {
    background: var(--s-valider-bg);
    border: 1px solid var(--s-valider-bg);
    color: var(--s-valider-ink);
}
[data-apparence="socle"] .btn-ece-success:hover,
[data-apparence="socle"] .btn-ece-success:focus {
    background: var(--s-valider-hover);
    border-color: var(--s-valider-hover);
    color: var(--s-valider-ink);
}
[data-apparence="socle"] .btn-ece-outline-primary,
[data-apparence="socle"] .btn-ece-outline-success,
[data-apparence="socle"] .btn-ece-outline-info,
[data-apparence="socle"] .btn-ece-outline-warning,
[data-apparence="socle"] .btn-outline-primary,
[data-apparence="socle"] .btn-outline-secondary,
[data-apparence="socle"] .btn-secondary,
[data-apparence="socle"] .btn-light,
[data-apparence="socle"] .btn-exercice {
    background: var(--s-surface);
    border: 1px solid var(--s-line);
    color: var(--s-ink);
    padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
}
[data-apparence="socle"] .btn-sm.btn-ece-outline-primary,
[data-apparence="socle"] .btn-sm.btn-outline-secondary,
[data-apparence="socle"] .btn-sm.btn-outline-primary,
[data-apparence="socle"] .btn-sm.btn-secondary { padding-top: calc(0.25rem + 1px); padding-bottom: calc(0.25rem + 1px); }
[data-apparence="socle"] .btn-ece-outline-primary:hover,
[data-apparence="socle"] .btn-ece-outline-success:hover,
[data-apparence="socle"] .btn-ece-outline-info:hover,
[data-apparence="socle"] .btn-ece-outline-warning:hover,
[data-apparence="socle"] .btn-outline-primary:hover,
[data-apparence="socle"] .btn-outline-secondary:hover,
[data-apparence="socle"] .btn-secondary:hover,
[data-apparence="socle"] .btn-light:hover,
[data-apparence="socle"] .btn-exercice:hover {
    background: var(--s-accent-soft);
    border-color: var(--s-anneau);
    color: var(--s-ink);
}
[data-apparence="socle"] .btn-ece-danger,
[data-apparence="socle"] .btn-danger {
    background: var(--s-bad);
    border: 1px solid var(--s-bad);
    color: #ffffff;
}
[data-apparence="socle"] .btn-ece-danger:hover,
[data-apparence="socle"] .btn-danger:hover {
    background: color-mix(in srgb, var(--s-bad) 82%, #000000);
    border-color: color-mix(in srgb, var(--s-bad) 82%, #000000);
    color: #ffffff;
}
[data-apparence="socle"] .btn-ece-outline-danger,
[data-apparence="socle"] .btn-outline-danger {
    background: var(--s-surface);
    border: 1px solid var(--s-line);
    color: var(--s-bad);
}
[data-apparence="socle"] .btn-ece-outline-danger:hover,
[data-apparence="socle"] .btn-outline-danger:hover {
    background: var(--s-bad-soft);
    border-color: var(--s-bad);
    color: var(--s-bad);
}
[data-apparence="socle"] .btn-ece-warning {
    background: var(--s-warn-soft);
    border: 1px solid color-mix(in srgb, var(--s-warn) 45%, transparent);
    color: var(--s-warn);
}
[data-apparence="socle"] .btn-ece-warning:hover { background: var(--s-warn); border-color: var(--s-warn); color: #ffffff; }
[data-apparence="socle"] .btn:disabled,
[data-apparence="socle"] .btn.disabled {
    background: var(--s-sunk);
    border-color: var(--s-line);
    color: color-mix(in srgb, var(--s-muted) 65%, var(--s-surface));
    box-shadow: none;
    opacity: 1;
}
/* Sélection forte : exercice choisi, segment SIG actif */
[data-apparence="socle"] .btn-exercice.actif,
[data-apparence="socle"] .btn-exercice.actif:hover {
    background: var(--s-fort);
    border-color: var(--s-fort);
    color: var(--s-fort-ink);
}
[data-apparence="socle"] .btn-exercice.actif .btn-exercice-statut { color: var(--s-fort-ink); opacity: .85; }
[data-apparence="socle"] .sig-segment a.actif { background: var(--s-fort); color: var(--s-fort-ink); }

/* ----------------------------------------------------------------------------------------------------------
   8. CHAMPS : contour bleu nuit doublé au focus (le halo doré seul faisait 1,5:1)
   ---------------------------------------------------------------------------------------------------------- */
[data-apparence="socle"] .form-control,
[data-apparence="socle"] .form-select {
    border-color: var(--s-line);
    border-radius: var(--s-r-ctl);
    color: var(--s-ink);
}
[data-apparence="socle"] .form-control:hover,
[data-apparence="socle"] .form-select:hover { border-color: var(--s-anneau); }
[data-apparence="socle"] .form-control:focus,
[data-apparence="socle"] .form-select:focus {
    border-color: var(--s-focus);
    box-shadow: 0 0 0 1px var(--s-focus), 0 0 0 4px color-mix(in srgb, var(--s-accent) 30%, transparent);
    outline: none;
}
[data-apparence="socle"] .form-control:focus-visible,
[data-apparence="socle"] .form-select:focus-visible { outline: none; }
[data-apparence="socle"] .form-label { color: var(--s-muted); font-weight: 600; font-size: 0.85rem; }
[data-apparence="socle"] .form-text { color: var(--s-muted); }
[data-apparence="socle"] .form-check-input:checked { background-color: var(--s-fort); border-color: var(--s-fort); }
/* 29/10/2026 au soir (M3) : interrupteur à l'arrêt presque invisible (contour et pastille gris pâle) — contour et
   pastille de la couleur du texte secondaire. Image en data: (CSP img-src 'self' data:), comme celle de Bootstrap. */
[data-apparence="socle"] .form-check-input { border-color: var(--s-muted); }
[data-apparence="socle"] .form-switch .form-check-input:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%234f4f5c'/%3e%3c/svg%3e");
}
[data-apparence="socle"] .form-check-input:focus {
    border-color: var(--s-focus);
    box-shadow: 0 0 0 1px var(--s-focus), 0 0 0 4px color-mix(in srgb, var(--s-accent) 30%, transparent);
}
[data-apparence="socle"] .is-invalid,
[data-apparence="socle"] .form-control.is-invalid { border-color: var(--s-bad); background-color: var(--s-bad-soft); }

/* ----------------------------------------------------------------------------------------------------------
   9. TABLEAUX : en-tête clair, filets fins, survol pâle, totaux sur fond creux
   ---------------------------------------------------------------------------------------------------------- */
[data-apparence="socle"] .table-modern thead th,
[data-apparence="socle"] .modern-card .card-header + .card-body > .table-defile:first-child > .table > thead th,
[data-apparence="socle"] .modal-header + .modal-body > .table-defile:first-child > .table > thead th,
[data-apparence="socle"] .modal-header + .modal-body > div:first-child > .table-defile:first-child > .table > thead th {
    background: var(--s-surface);
    color: var(--s-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-top: 0;
    border-bottom: 1px solid var(--s-line);
}
[data-apparence="socle"] .table-modern tbody td { border-bottom: 1px solid var(--s-line-soft); }
[data-apparence="socle"] .table-modern tbody tr,
[data-apparence="socle"] .table-modern tbody tr td { background: var(--s-surface); }
[data-apparence="socle"] .table-modern tbody tr:hover td,
[data-apparence="socle"] .table-hover tbody tr:hover td,
[data-apparence="socle"] .facturation .table-modern tbody tr.click[data-href]:hover td {
    background: color-mix(in srgb, var(--s-accent-soft) 60%, var(--s-surface));
}
[data-apparence="socle"] .table-modern tfoot th,
[data-apparence="socle"] .table-modern tfoot td,
[data-apparence="socle"] .facturation .table-modern tfoot th,
[data-apparence="socle"] .facturation .table-modern tfoot td { background: var(--s-sunk); font-weight: 700; }
[data-apparence="socle"] .facturation table.cartes tr { border-bottom-color: var(--s-line); }
[data-apparence="socle"] .table-defile + .small { margin-top: 0.75rem; }

/* Balance et écritures (grand livre, détail d'un compte) sur téléphone : une carte par ligne. En tableau, les
   montants sortaient de l'écran (défilement horizontal caché). Ordre des colonnes fixe : balance = compte,
   libellé, débit, crédit, solde ; écritures = date, journal, pièce, libellé, débit, crédit, solde. */
@media (max-width: 767.98px) {
    [data-apparence="socle"] .table-defile > #table-balance,
    [data-apparence="socle"] .table-defile > .table-ecritures { min-width: 0; }
    [data-apparence="socle"] #table-balance thead,
    [data-apparence="socle"] .table-ecritures thead { display: none; }
    [data-apparence="socle"] #table-balance tbody tr,
    [data-apparence="socle"] .table-ecritures tbody tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px 12px;
        padding: 10px 16px;
        border-bottom: 1px solid var(--s-line-soft);
    }
    /* padding en !important : les cellules de bord des cartes et des fenêtres reprennent 1,5 rem (portail.css) */
    [data-apparence="socle"] #table-balance tbody td,
    [data-apparence="socle"] .table-ecritures tbody td { display: block; padding: 0 !important; border: 0; background: none; white-space: nowrap; }
    [data-apparence="socle"] #table-balance td:nth-child(2),
    [data-apparence="socle"] .table-ecritures td:nth-child(4) { white-space: normal; }
    [data-apparence="socle"] #table-balance td:nth-child(1) { grid-column: 1 / 3; grid-row: 1; font-weight: 700; }
    [data-apparence="socle"] #table-balance td:nth-child(5) { grid-column: 3; grid-row: 1; font-weight: 700; }
    [data-apparence="socle"] #table-balance td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; color: var(--s-muted); }
    [data-apparence="socle"] #table-balance td:nth-child(3),
    [data-apparence="socle"] #table-balance td:nth-child(4) { grid-row: 3; font-size: 0.8125rem; }
    [data-apparence="socle"] #table-balance td:nth-child(3) { grid-column: 1; }
    [data-apparence="socle"] #table-balance td:nth-child(4) { grid-column: 2; }
    [data-apparence="socle"] .table-ecritures td:nth-child(-n+3) { grid-row: 1; color: var(--s-muted); font-size: 0.8125rem; }
    [data-apparence="socle"] .table-ecritures td:nth-child(4) { grid-column: 1 / -1; grid-row: 2; font-weight: 600; }
    [data-apparence="socle"] .table-ecritures td:nth-child(n+5) { grid-row: 3; }
    [data-apparence="socle"] #table-balance td:nth-child(3)::before,
    [data-apparence="socle"] .table-ecritures td:nth-child(5)::before { content: "Débit"; }
    [data-apparence="socle"] #table-balance td:nth-child(4)::before,
    [data-apparence="socle"] .table-ecritures td:nth-child(6)::before { content: "Crédit"; }
    [data-apparence="socle"] .table-ecritures td:nth-child(7)::before { content: "Solde"; }
    [data-apparence="socle"] #table-balance td:nth-child(3)::before,
    [data-apparence="socle"] #table-balance td:nth-child(4)::before,
    [data-apparence="socle"] .table-ecritures td:nth-child(n+5)::before {
        display: block;
        font-family: var(--s-f-body);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--s-muted);
    }
}

/* Immobilisations, emprunts, crédit-bail (29/10/2026) : sous-totaux de catégorie, échéanciers repliables, et sur
   téléphone une carte par ligne, libellé de chaque montant tiré de data-label (tableaux .table-cartes-portail). */
[data-apparence="socle"] .table-modern tbody tr.ligne-categorie th,
[data-apparence="socle"] .table-modern tbody tr.ligne-categorie td { background: var(--s-sunk); color: var(--s-ink); font-weight: 700; }
[data-apparence="socle"] .details-echeancier > summary { background: var(--s-surface); color: var(--s-ink); font-weight: 600; }
[data-apparence="socle"] .details-echeancier > summary:hover { background: var(--s-sunk); }
[data-apparence="socle"] .details-echeancier > summary:focus-visible { outline-color: var(--s-focus); }
/* 01/11/2026 : organisme du prêteur ou du loueur sur une ligne (il passait sur deux). Écran large seulement : sur
   téléphone, la carte de la ligne lui laisse la place de passer à la ligne. */
@media (min-width: 768px) {
    [data-apparence="socle"] .table-cartes-portail .une-ligne { white-space: nowrap; }
}
/* Synthèse en tête des trois écrans (29/10/2026 soir, portail.css § 13) : rôles du socle, montants en mono */
[data-apparence="socle"] .synthese-titre,
[data-apparence="socle"] .synthese-libelle,
[data-apparence="socle"] .synthese-montant { color: var(--s-ink); }
[data-apparence="socle"] .synthese-montant { font-family: var(--s-f-mono); font-weight: 500; letter-spacing: -0.02em; }
[data-apparence="socle"] .synthese-statut { background: var(--s-info-soft); color: var(--s-info); }
[data-apparence="socle"] .synthese-terme { background: var(--s-surface); border-color: var(--s-line); border-radius: var(--s-r-ctl); }
[data-apparence="socle"] .synthese-total { background: var(--s-sunk); border-color: var(--s-ink); }
[data-apparence="socle"] .synthese-signe,
[data-apparence="socle"] .synthese-aide,
[data-apparence="socle"] .synthese-legende { color: var(--s-muted); }
[data-apparence="socle"] .synthese-pied { color: var(--s-ink); border-top-color: var(--s-line); }
[data-apparence="socle"] .synthese-jauge,
[data-apparence="socle"] .synthese-jauge::-webkit-progress-bar { background: var(--s-sunk); }
[data-apparence="socle"] .synthese-jauge { color: var(--s-info); box-shadow: inset 0 0 0 1px var(--s-line); }
[data-apparence="socle"] .synthese-jauge::-webkit-progress-value { background: var(--s-info); }
[data-apparence="socle"] .synthese-jauge::-moz-progress-bar { background: var(--s-info); }
[data-apparence="socle"] .synthese-puce { background: var(--s-sunk); border-color: var(--s-muted); }
[data-apparence="socle"] .synthese-puce-pleine { background: var(--s-info); border-color: var(--s-info); }
@media (max-width: 767.98px) {
    [data-apparence="socle"] .table-defile > .table-cartes-portail { min-width: 0; }
    [data-apparence="socle"] .table-cartes-portail thead { display: none; }
    [data-apparence="socle"] .table-cartes-portail tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 12px;
        padding: 10px 16px;
        border-bottom: 1px solid var(--s-line-soft);
    }
    [data-apparence="socle"] .table-cartes-portail tbody td,
    [data-apparence="socle"] .table-cartes-portail tbody th { display: block; padding: 0 !important; border: 0; }
    [data-apparence="socle"] .table-cartes-portail tbody tr > :first-child { grid-column: 1 / -1; }
    [data-apparence="socle"] .table-cartes-portail td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-family: var(--s-f-body);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--s-muted);
    }
}

/* ----------------------------------------------------------------------------------------------------------
   10. PASTILLES : fond pâle, texte foncé (AA) ; rouge refus, orange à faire, vert abouti, violet en cours /
       information, gris clos, doré catégorie
   ---------------------------------------------------------------------------------------------------------- */
[data-apparence="socle"] .badge {
    /* 30/10/2026 (relecture de la flotte) : 0,75 em du texte voisin donnait 9,6 px dans les tableaux en cartes sur
       téléphone ; 11 px au moins. */
    font-size: max(0.75em, 0.6875rem);
    border-radius: 8px;
    font-weight: 600;
    padding: 0.32em 0.7em;
    border: 0;
}
[data-apparence="socle"] .badge-ece-success,
[data-apparence="socle"] .badge-integree,
[data-apparence="socle"] .badge-traite,
[data-apparence="socle"] .badge.bg-success { background: var(--s-good-soft) !important; color: var(--s-good) !important; }
[data-apparence="socle"] .badge-ece-warning,
[data-apparence="socle"] .badge-doublon,
[data-apparence="socle"] .badge.bg-warning { background: var(--s-warn-soft) !important; color: var(--s-warn) !important; }
[data-apparence="socle"] .badge-rejete,
[data-apparence="socle"] .badge-rejetee,
[data-apparence="socle"] .badge.bg-danger { background: var(--s-bad-soft) !important; color: var(--s-bad) !important; }
[data-apparence="socle"] .badge-ece-info,
[data-apparence="socle"] .badge-ece-purple,
[data-apparence="socle"] .badge-ece-purple-dark,
[data-apparence="socle"] .badge-recuperee,
[data-apparence="socle"] .badge-recupere,
[data-apparence="socle"] .badge.bg-info,
[data-apparence="socle"] .badge.bg-primary { background: var(--s-info-soft) !important; color: var(--s-info) !important; }
[data-apparence="socle"] .badge-ece-neutral,
[data-apparence="socle"] .badge-saisie,
[data-apparence="socle"] .badge-depose,
[data-apparence="socle"] .badge.bg-secondary,
[data-apparence="socle"] .badge.bg-light { background: var(--s-neutre-soft) !important; color: var(--s-neutre) !important; }
[data-apparence="socle"] .badge-vente,
[data-apparence="socle"] .badge-achat,
[data-apparence="socle"] .badge-cabinet,
[data-apparence="socle"] .badge-client {
    background: var(--s-accent-soft) !important;
    color: var(--s-ink) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s-anneau) 35%, transparent);
}

/* ----------------------------------------------------------------------------------------------------------
   11. ALERTES : fond teinté, texte foncé, icône de la couleur de l'état
   ---------------------------------------------------------------------------------------------------------- */
[data-apparence="socle"] .alert { border-radius: var(--s-r-bloc); color: var(--s-ink); border: 1px solid; }
[data-apparence="socle"] .alert-danger,
[data-apparence="socle"] .alert-ece-danger { background: var(--s-bad-soft); border-color: color-mix(in srgb, var(--s-bad) 35%, transparent); color: var(--s-ink); }
[data-apparence="socle"] .alert-danger .bi,
[data-apparence="socle"] .alert-ece-danger .bi { color: var(--s-bad); }
[data-apparence="socle"] .alert-warning,
[data-apparence="socle"] .alert-ece-warning { background: var(--s-warn-soft); border-color: color-mix(in srgb, var(--s-warn) 35%, transparent); color: var(--s-ink); }
[data-apparence="socle"] .alert-warning .bi,
[data-apparence="socle"] .alert-ece-warning .bi { color: var(--s-warn); }
[data-apparence="socle"] .alert-success,
[data-apparence="socle"] .alert-ece-success { background: var(--s-good-soft); border-color: color-mix(in srgb, var(--s-good) 35%, transparent); color: var(--s-ink); }
[data-apparence="socle"] .alert-success .bi,
[data-apparence="socle"] .alert-ece-success .bi { color: var(--s-good); }
[data-apparence="socle"] .alert-info,
[data-apparence="socle"] .alert-ece-info { background: var(--s-info-soft); border-color: color-mix(in srgb, var(--s-info) 30%, transparent); color: var(--s-ink); }
[data-apparence="socle"] .alert-info .bi,
[data-apparence="socle"] .alert-ece-info .bi { color: var(--s-info); }
[data-apparence="socle"] .erreur-champ { color: var(--s-bad); }

/* ----------------------------------------------------------------------------------------------------------
   12. PAGINATION, ÉTATS VIDES, CARTES DE DOSSIER, BARRE D'ACTIONS DE LA FACTURATION
   ---------------------------------------------------------------------------------------------------------- */
[data-apparence="socle"] .pagination .page-link,
[data-apparence="socle"] .pagination-modern .page-link {
    min-width: 34px;
    margin: 0 3px;
    border: 1px solid var(--s-line);
    border-radius: var(--s-r-ctl) !important;
    background: var(--s-surface);
    color: var(--s-ink);
    font-weight: 600;
    text-align: center;
    transform: none;
}
[data-apparence="socle"] .pagination .page-link:hover,
[data-apparence="socle"] .pagination-modern .page-link:hover { background: var(--s-accent-soft); border-color: var(--s-anneau); color: var(--s-ink); transform: none; }
[data-apparence="socle"] .pagination .page-item.active .page-link,
[data-apparence="socle"] .pagination-modern .page-item.active .page-link { background: var(--s-fort); border-color: var(--s-fort); color: var(--s-fort-ink); }
[data-apparence="socle"] .pagination .page-item.disabled .page-link { background: var(--s-sunk); color: color-mix(in srgb, var(--s-muted) 60%, var(--s-surface)); }

[data-apparence="socle"] .empty-state { padding: 2.5rem 1.25rem; animation: none; }
[data-apparence="socle"] .empty-state-icon i { color: var(--s-muted); opacity: 1; font-size: 2.5rem; }
[data-apparence="socle"] .empty-state h5,
[data-apparence="socle"] .empty-state-title { color: var(--s-ink); font-weight: 700; }
[data-apparence="socle"] .empty-state p,
[data-apparence="socle"] .empty-state-text { color: var(--s-muted); }

[data-apparence="socle"] .carte-dossier {
    background: var(--s-surface);
    border: 1px solid var(--s-line);
    border-radius: var(--s-r-bloc);
    box-shadow: var(--s-ombre);
    color: var(--s-ink);
}
[data-apparence="socle"] .carte-dossier:hover,
[data-apparence="socle"] .carte-dossier:focus {
    background: var(--s-accent-soft);
    border-color: var(--s-anneau);
    transform: none;
}
[data-apparence="socle"] .carte-dossier .dossier-siren { color: var(--s-muted); font-family: var(--s-f-mono); }

[data-apparence="socle"] .facturation .barre-actions-texte { color: var(--s-muted); }

/* ----------------------------------------------------------------------------------------------------------
   13. FENÊTRES ET MESSAGES
   ---------------------------------------------------------------------------------------------------------- */
[data-apparence="socle"] .modal-content {
    border: 1px solid var(--s-line);
    border-radius: 16px;
    box-shadow: var(--s-ombre-forte);
}
[data-apparence="socle"] .modal-header-ece-primary,
[data-apparence="socle"] .modal-header-ece-info { background: var(--s-fort); color: var(--s-fort-ink); }
[data-apparence="socle"] .modal-header-ece-success { background: var(--s-valider-bg); color: var(--s-valider-ink); }
[data-apparence="socle"] .modal-header-danger { background: var(--s-bad); color: #ffffff; }
[data-apparence="socle"] .modal-footer { border-top: 1px solid var(--s-line-soft); }
/* Messages : sombres et sobres pour un succès ; une erreur garde le rouge. */
[data-apparence="socle"] .toast-ece-success,
[data-apparence="socle"] .toast-ece-info,
[data-apparence="socle"] .toast-ece-warning {
    background: var(--s-ink) !important;
    color: var(--s-surface) !important;
    border-radius: 12px;
    box-shadow: var(--s-ombre-forte);
}
[data-apparence="socle"] .toast-ece-error,
[data-apparence="socle"] .toast-ece-danger {
    background: var(--s-bad) !important;
    color: #ffffff !important;
    border-radius: 12px;
    box-shadow: var(--s-ombre-forte);
}
[data-apparence="socle"] .toast-ece-success .btn-close,
[data-apparence="socle"] .toast-ece-info .btn-close,
[data-apparence="socle"] .toast-ece-warning .btn-close,
[data-apparence="socle"] .toast-ece-error .btn-close,
[data-apparence="socle"] .toast-ece-danger .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ----------------------------------------------------------------------------------------------------------
   14. CONNEXION
   ---------------------------------------------------------------------------------------------------------- */
[data-apparence="socle"] body.auth-page { background: var(--s-bg); display: block; }
/* 30/10/2026 : structure de l'intérieur du portail — colonne sombre de la marque (couleurs de la barre latérale) à
   gauche, formulaire sur le fond gris ; sur téléphone, la marque en bandeau au-dessus. */
[data-apparence="socle"] .auth-split { display: grid; grid-template-columns: minmax(320px, 2fr) 3fr; min-height: 100vh; }
[data-apparence="socle"] .auth-marque {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 32px 40px;
    background: var(--s-side);
    color: var(--s-side-ink);
}
[data-apparence="socle"] .auth-marque-corps { margin-top: auto; margin-bottom: auto; max-width: 420px; }
[data-apparence="socle"] .auth-marque-titre { font-size: 1.6rem; font-weight: 800; line-height: 1.25; margin: 0 0 24px; }
[data-apparence="socle"] .auth-marque-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
[data-apparence="socle"] .auth-marque-liste li { display: flex; gap: 12px; align-items: flex-start; color: var(--s-side-ink); }
[data-apparence="socle"] .auth-marque-liste .bi { color: var(--s-side-accent); font-size: 1.15rem; line-height: 1.35; }
[data-apparence="socle"] .auth-marque-note,
[data-apparence="socle"] .auth-marque-pied { color: var(--s-side-muted); font-size: 0.8125rem; margin: 18px 0 0; }
[data-apparence="socle"] .auth-marque-pied { margin: 0; }
[data-apparence="socle"] .auth-container {
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
}
[data-apparence="socle"] .auth-carte {
    width: 100%;
    max-width: 440px;
    padding: 32px;
    background: var(--s-surface);
    border: 1px solid var(--s-line);
    border-radius: var(--s-r-bloc);
    box-shadow: var(--s-ombre);
}
[data-apparence="socle"] .auth-etape {
    margin: 0 0 6px;
    color: var(--s-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}
[data-apparence="socle"] .auth-titre { margin: 0 0 10px; color: var(--s-ink); font-size: 1.6rem; font-weight: 800; }
[data-apparence="socle"] .auth-aide { margin: 0 0 22px; color: var(--s-muted); }
[data-apparence="socle"] .auth-carte .form-label { color: var(--s-ink); font-weight: 600; }
[data-apparence="socle"] .auth-pied {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--s-line);
    color: var(--s-muted);
    font-size: 0.8125rem;
}
[data-apparence="socle"] .auth-pied a { color: var(--s-lien); }
@media (max-width: 991.98px) {
    [data-apparence="socle"] .auth-split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    [data-apparence="socle"] .auth-marque { gap: 0; padding: 14px 16px; }
    /* La marque de la barre latérale est masquée sur téléphone (§ 15) ; ici, elle EST le bandeau. */
    [data-apparence="socle"] .auth-marque .socle-marque { display: flex; }
    [data-apparence="socle"] .auth-marque-corps,
    [data-apparence="socle"] .auth-marque-pied { display: none; }
    [data-apparence="socle"] .auth-container { align-items: flex-start; padding: 24px 16px; }
    [data-apparence="socle"] .auth-carte { padding: 24px 20px; }
}
[data-apparence="socle"] .auth-card {
    border: 1px solid var(--s-line);
    border-top: 1px solid var(--s-line);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgb(0 0 0 / .08);
}
[data-apparence="socle"] .auth-card .auth-card-header { background: var(--s-fort); color: var(--s-fort-ink); }
[data-apparence="socle"] .auth-card .auth-card-footer { background: var(--s-sunk); }
[data-apparence="socle"] .auth-card .auth-card-footer small { color: var(--s-muted); }
[data-apparence="socle"] .auth-icon-gold { color: var(--s-fort-ink); }

/* ----------------------------------------------------------------------------------------------------------
   15. BARRE LATÉRALE ET BARRE DES MODULES (29/10/2026) — structure de Pilotage HBI : modules du dossier en haut,
   pages du module à gauche (base.html, core/navigation.py). Sur téléphone, deux rangées qui défilent.
   ---------------------------------------------------------------------------------------------------------- */
/* Le fond de la grille prolonge la colonne sombre sous la barre collante (pages plus hautes que l'écran, impression). */
[data-apparence="socle"] .socle-app {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    min-height: 100vh;
    background: linear-gradient(to right, var(--s-side) 236px, transparent 236px);
}
/* z-index : une barre collante forme son propre contexte d'empilement ; sans lui, le menu des dossiers
   (z-index 1000) restait SOUS le contenu de la page (bandeau d'exercice, tuiles) et les noms étaient coupés
   (retour user 29/10, capture en production). Au-dessus du contenu, sous les fenêtres (1055) et les messages. */
[data-apparence="socle"] .socle-barre {
    position: sticky;
    top: 0;
    z-index: 1025;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 14px 16px 16px;
    background: var(--s-side);
    color: var(--s-side-ink);
}
[data-apparence="socle"] .socle-marque { display: flex; align-items: center; gap: 10px; color: var(--s-side-ink); text-decoration: none; }
[data-apparence="socle"] .socle-marque:hover { color: var(--s-side-ink); }
[data-apparence="socle"] .socle-marque-logo {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--s-r-bloc);
    background: var(--s-side-2);
}
[data-apparence="socle"] .socle-marque-logo img { width: 24px; height: 24px; }
[data-apparence="socle"] .socle-marque-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
[data-apparence="socle"] .socle-marque-nom { font-size: 0.95rem; font-weight: 800; }
[data-apparence="socle"] .socle-marque-groupe { font-size: 0.75rem; color: var(--s-side-muted); }
[data-apparence="socle"] .socle-dossier { display: flex; flex-direction: column; gap: 4px; }
[data-apparence="socle"] .socle-dossier-choix {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--s-side-ink) 16%, var(--s-side));
    border-radius: var(--s-r-ctl);
    background: var(--s-side-2);
    color: var(--s-side-ink);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
}
[data-apparence="socle"] button.socle-dossier-choix:hover { border-color: var(--s-side-muted); }
/* Un seul dossier : le nom en texte, sans cadre (rien à choisir, pas d'air de bouton) */
[data-apparence="socle"] span.socle-dossier-choix { padding: 0 2px; border-color: transparent; background: none; font-size: 0.9375rem; }
/* Menu des dossiers : un nom long passe à la ligne au lieu de déborder de l'écran (téléphone) */
[data-apparence="socle"] .socle-dossier .dropdown-menu { max-width: min(520px, calc(100vw - 24px)); }
[data-apparence="socle"] .socle-dossier .dropdown-item { white-space: normal; }
[data-apparence="socle"] .socle-dossier-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-apparence="socle"] .socle-dossier-siren { padding-left: 2px; font-size: 0.75rem; color: var(--s-side-muted); font-family: var(--s-f-mono); }
[data-apparence="socle"] .socle-pages { position: relative; display: flex; flex-direction: column; gap: 2px; }
[data-apparence="socle"] .socle-section {
    padding: 14px 12px 4px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--s-side-titre);
    cursor: default;
}
[data-apparence="socle"] .socle-pages a {
    position: relative;
    display: block;
    padding: 8px 12px;
    border-radius: var(--s-r-ctl);
    color: var(--s-side-ink);
    font-weight: 500;
    text-decoration: none;
}
[data-apparence="socle"] .socle-pages a:hover { background: var(--s-side-2); color: var(--s-side-ink); }
[data-apparence="socle"] .socle-pages a[aria-current="page"] { background: var(--s-side-2); color: #ffffff; font-weight: 600; }
[data-apparence="socle"] .socle-pages a[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background: var(--s-side-accent);
}
[data-apparence="socle"] .socle-barre :focus-visible { outline: 2px solid var(--s-side-ink); outline-offset: 1px; }
/* Retour user 30/10/2026 : titres de section et liens avaient la même couleur, on ne voyait pas ce qui se clique. Liens
   clairs, titres en retrait, et un filet au-dessus de chaque section (sur téléphone, le filet est vertical : § plus bas). */
@media (min-width: 992px) {
    [data-apparence="socle"] .socle-section {
        margin-top: 10px;
        padding-top: 14px;
        border-top: 1px solid color-mix(in srgb, var(--s-side-ink) 14%, var(--s-side));
    }
    [data-apparence="socle"] .socle-section:first-child { margin-top: 0; padding-top: 4px; border-top: 0; }
}

[data-apparence="socle"] .socle-colonne { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
[data-apparence="socle"] .socle-colonne > .contenu { flex: 1 0 auto; }
[data-apparence="socle"] .socle-modules {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 12px 24px;
    padding: 12px 24px;
    background: color-mix(in srgb, var(--s-surface) 92%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--s-line);
}
[data-apparence="socle"] .socle-modules-liste { position: relative; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
[data-apparence="socle"] .socle-module {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--s-r-bloc);
    background: var(--s-sunk);
    color: var(--s-ink);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
[data-apparence="socle"] .socle-module:hover { border-color: color-mix(in srgb, var(--s-ink) 22%, #ffffff); color: var(--s-ink); }
[data-apparence="socle"] .socle-module.actif { background: var(--s-pr-bg); color: var(--s-pr-ink); }
[data-apparence="socle"] .socle-modules .navbar-user { margin-left: auto; }
[data-apparence="socle"] .socle-modules .user-avatar-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px 4px 4px;
    border: 1px solid var(--s-line);
    border-radius: 22px;
    background: var(--s-surface);
    color: var(--s-ink);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
[data-apparence="socle"] .socle-modules .user-avatar-btn:hover { background: var(--s-sunk); color: var(--s-ink); }
[data-apparence="socle"] .socle-modules .user-nom { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 991.98px) {
    [data-apparence="socle"] .socle-app { display: flex; flex-direction: column; background: none; }
    [data-apparence="socle"] .socle-colonne { display: contents; }
    [data-apparence="socle"] .socle-modules {
        order: 0;
        position: relative;
        gap: 10px;
        padding: 10px 14px;
        background: var(--s-side);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-bottom: 0;
    }
    [data-apparence="socle"] .socle-modules-liste,
    [data-apparence="socle"] .socle-pages {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000000 86%, transparent);
        mask-image: linear-gradient(to right, #000000 86%, transparent);
    }
    [data-apparence="socle"] .socle-modules-liste { flex: 1 1 auto; flex-wrap: nowrap; gap: 6px; padding-right: 24px; }
    [data-apparence="socle"] .socle-module { height: 36px; padding: 0 14px; background: var(--s-side-2); color: var(--s-side-ink); }
    [data-apparence="socle"] .socle-module:hover { border-color: var(--s-side-muted); color: var(--s-side-ink); }
    [data-apparence="socle"] .socle-module.actif { background: var(--s-valider-bg); color: var(--s-valider-ink); }
    [data-apparence="socle"] .socle-module:focus-visible,
    [data-apparence="socle"] .socle-modules .user-avatar-btn:focus-visible { outline: 2px solid var(--s-side-ink); outline-offset: 1px; }
    [data-apparence="socle"] .socle-modules .user-avatar-btn { padding: 0; border: 0; border-radius: 50%; background: none; }
    [data-apparence="socle"] .socle-modules .user-avatar { background: var(--s-valider-bg); color: var(--s-valider-ink); }
    [data-apparence="socle"] .socle-modules .user-nom { display: none; }
    [data-apparence="socle"] .socle-barre {
        order: 1;
        position: sticky;
        top: 0;
        z-index: 1010;
        height: auto;
        overflow: visible;
        gap: 8px;
        padding: 8px 14px 10px;
        border-top: 1px solid color-mix(in srgb, var(--s-side-ink) 12%, var(--s-side));
    }
    [data-apparence="socle"] .socle-marque,
    [data-apparence="socle"] .socle-dossier-siren { display: none; }
    /* Titre de section dans la rangée (29/10/2026 au soir) : masqué, « Déposer » et « Mini-saisie » se mêlaient à la
       consultation — petit intertitre séparé par un filet. */
    [data-apparence="socle"] .socle-section {
        flex: none;
        display: flex;
        align-items: center;
        margin: 0 0 0 6px;
        padding: 0 4px 0 10px;
        border-left: 1px solid color-mix(in srgb, var(--s-side-ink) 25%, var(--s-side));
        white-space: nowrap;
    }
    [data-apparence="socle"] button.socle-dossier-choix { padding: 6px 10px; }
    [data-apparence="socle"] span.socle-dossier-choix { font-size: 0.8125rem; color: var(--s-side-muted); }
    [data-apparence="socle"] .socle-pages { flex-direction: row; gap: 4px; padding-right: 24px; }
    [data-apparence="socle"] .socle-pages a { flex: none; padding: 6px 12px; white-space: nowrap; }
    [data-apparence="socle"] .socle-pages a[aria-current="page"] { background: var(--s-valider-bg); color: var(--s-valider-ink); }
    [data-apparence="socle"] .socle-pages a[aria-current="page"]::before { display: none; }
    [data-apparence="socle"] .socle-colonne > .contenu { order: 2; }
    [data-apparence="socle"] .socle-colonne > .footer { order: 3; }
}
/* Petit téléphone : modules plus serrés, « Achats » tient avant l'avatar */
@media (max-width: 399.98px) {
    [data-apparence="socle"] .socle-module { padding: 0 10px; font-size: 0.875rem; }
}