/* Exalto.Web : charte reprise d'Exalto.ExtractIA.Web (site ExtractIA), elle-même aux couleurs de
   consilio-retraite.fr — Material 3, bleu canard #24565B, orange #F0B161, rouge brique #C75252,
   police Poppins. Les jetons et composants communs sont recopiés tels quels (lignes 6 à 160 et
   les blocs Formulaires / Connexion / Compte) ; les ajouts propres à Exalto sont en fin de fichier. */

:root {
    --primary: #24565b; --on-primary: #ffffff; --primary-container: #d3e9ea; --on-primary-container: #0b3034;
    --action: #c75252; --on-action: #ffffff;
    --accent: #f0b161; --on-accent: #3d2700;
    --secondary: #4f6466; --secondary-container: #dde9ea; --on-secondary-container: #17393c;
    --tertiary: #266577; --tertiary-container: #d4e8ef; --on-tertiary-container: #0a2b35;
    --error: #b3261e; --error-container: #fbdcd9; --on-error-container: #410e0b;
    --warning: #8a5a00; --warning-container: #fde7c6; --on-warning-container: #2c1b00;
    --surface: #f5f5f5; --surface-low: #ffffff; --surface-cont: #f1f3f3; --surface-high: #eaeeee;
    --surface-highest: #e1e6e6; --surface-lowest: #fbfbfb;
    --on-surface: #2d3637; --on-surface-variant: #616161; --outline: #8e8e8e; --outline-variant: #e1e1e1;
    --inverse-surface: #24565b; --inverse-on-surface: #ffffff;
    --titre: #24565b;
    --barre: linear-gradient(100deg, #24565b 0%, #266577 100%);
  --ombre: 0 1px 2px rgb(0 0 0 / .12), 0 1px 3px 1px rgb(0 0 0 / .06);
  --ombre-2: 0 1px 2px rgb(0 0 0 / .2), 0 2px 6px 2px rgb(0 0 0 / .1);
  --rayon: 16px;
  --police: "Poppins", "Segoe UI", system-ui, sans-serif;
  --police-mono: "Roboto Mono", Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #8fd0d6; --on-primary: #00363b; --primary-container: #1d4a4f; --on-primary-container: #c8eef1;
    --action: #dc6b6b; --on-action: #ffffff;
    --accent: #f0b161; --on-accent: #3d2700;
    --secondary: #b3cbcd; --secondary-container: #2c4447; --on-secondary-container: #d3e8ea;
    --tertiary: #9cd0e2; --tertiary-container: #1d4c5a; --on-tertiary-container: #cfeaf3;
    --error: #ffb4ab; --error-container: #8c1d18; --on-error-container: #ffdad6;
    --warning: #f5bf48; --warning-container: #5c4200; --on-warning-container: #ffdea6;
    --surface: #0f1617; --surface-low: #161f20; --surface-cont: #1b2526; --surface-high: #243031;
    --surface-highest: #2e3a3b; --surface-lowest: #0b1112;
    --on-surface: #e0e6e6; --on-surface-variant: #bcc6c7; --outline: #87908f; --outline-variant: #34403f;
    --inverse-surface: #d3e9ea; --inverse-on-surface: #0b3034;
    --titre: #8fd0d6;
    --barre: linear-gradient(100deg, #16393c 0%, #1a4652 100%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --primary: #8fd0d6; --on-primary: #00363b; --primary-container: #1d4a4f; --on-primary-container: #c8eef1;
    --action: #dc6b6b; --on-action: #ffffff;
    --accent: #f0b161; --on-accent: #3d2700;
    --secondary: #b3cbcd; --secondary-container: #2c4447; --on-secondary-container: #d3e8ea;
    --tertiary: #9cd0e2; --tertiary-container: #1d4c5a; --on-tertiary-container: #cfeaf3;
    --error: #ffb4ab; --error-container: #8c1d18; --on-error-container: #ffdad6;
    --warning: #f5bf48; --warning-container: #5c4200; --on-warning-container: #ffdea6;
    --surface: #0f1617; --surface-low: #161f20; --surface-cont: #1b2526; --surface-high: #243031;
    --surface-highest: #2e3a3b; --surface-lowest: #0b1112;
    --on-surface: #e0e6e6; --on-surface-variant: #bcc6c7; --outline: #87908f; --outline-variant: #34403f;
    --inverse-surface: #d3e9ea; --inverse-on-surface: #0b3034;
    --titre: #8fd0d6;
    --barre: linear-gradient(100deg, #16393c 0%, #1a4652 100%);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; }
body {
  background: var(--surface);
  color: var(--on-surface);
  font: 400 14px/1.5 var(--police);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  transition: background-color .2s, color .2s;
}
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }

.ms {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  flex: none;
  overflow: hidden;
  width: 1em;
  user-select: none;
}
.ms.remplie { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.espace { flex: 1; }

/* ----- Barre d'application ----- */
.barre-app {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 24px;
  background: var(--barre);
  color: #ffffff;
}
.logo {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: #ffffff; color: #24565b;
}
.logo .ms { font-size: 24px; }
.titre-app h1 { font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: .5px; }
/* FocusOnNavigate (Routes.razor) place le focus sur le h1 à chaque page, pour les lecteurs
   d'écran : focus programmé (tabindex="-1"), donc sans cadre visible. */
h1:focus, [tabindex="-1"]:focus { outline: none; }
.titre-app p { font-size: 11px; text-transform: uppercase; letter-spacing: 3px; color: var(--accent); }
.barre-app .btn-icone { color: #ffffff; }
.barre-app .puce-assist { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .35); color: #ffffff; }
.barre-app .puce-assist .ms { color: var(--accent); }

/* ----- Boutons (avec couche d'état Material) ----- */
.btn, .btn-icone, .onglet, .depot, .btn-retirer {
  position: relative; overflow: hidden; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn::after, .btn-icone::after, .onglet::after, .depot::after, .btn-retirer::after {
  content: ""; position: absolute; inset: 0;
  background: currentColor; opacity: 0; transition: opacity .15s;
  pointer-events: none;
}
.btn:hover::after, .btn-icone:hover::after, .onglet:hover::after, .btn-retirer:hover::after { opacity: .08; }
.btn:active::after, .btn-icone:active::after, .onglet:active::after, .btn-retirer:active::after { opacity: .12; }
.btn:focus-visible, .btn-icone:focus-visible, .onglet:focus-visible, .depot:focus-visible {
  outline: 3px solid var(--primary); outline-offset: 2px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 24px; border-radius: 20px; border: 0;
  font-weight: 500; font-size: 14px; letter-spacing: .1px; white-space: nowrap;
  transition: box-shadow .15s;
}
.btn .ms { font-size: 18px; margin-left: -8px; }
.btn-plein { background: var(--action); color: var(--on-action); }
.btn-plein:hover { box-shadow: var(--ombre); }
.btn-tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.btn-texte { background: transparent; color: var(--primary); padding: 0 12px; }
.btn-erreur { background: var(--error); color: var(--on-primary); }
.btn:disabled {
  cursor: default; box-shadow: none;
  background: color-mix(in srgb, var(--on-surface) 12%, transparent);
  color: color-mix(in srgb, var(--on-surface) 38%, transparent);
}
.btn-texte:disabled { background: transparent; }
.btn:disabled::after { display: none; }

.btn-icone {
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  display: grid; place-items: center;
  background: transparent; color: var(--on-surface-variant);
}
.btn-icone .ms { font-size: 24px; }
/* ----- Compte dans la barre d'application ----- */
.zone-utilisateur { display: flex; align-items: center; gap: 4px; margin-left: 4px; padding-left: 12px; border-left: 1px solid rgb(255 255 255 / .25); }
.utilisateur {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 18px;
  color: #ffffff; text-decoration: none; font-weight: 500; white-space: nowrap;
}
a.utilisateur:hover { background: rgb(255 255 255 / .12); }
.utilisateur .ms { font-size: 22px; color: var(--accent); }
a.btn-icone { text-decoration: none; }
@media (max-width: 600px) { #libUtilisateur { display: none; } .zone-utilisateur { padding-left: 4px; } }

/* ----- Formulaires (champs façon Material, libellé au-dessus) ----- */
.texte-secondaire { color: var(--on-surface-variant); margin-top: 6px; }
.formulaire { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.formulaire-ligne { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.formulaire-ligne .champ { flex: 1 1 220px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ-libelle { font-size: 12px; font-weight: 500; color: var(--on-surface-variant); }
.champ input {
  height: 48px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--outline); background: var(--surface-lowest); color: var(--on-surface);
  font: inherit; font-size: 15px; transition: border-color .15s, box-shadow .15s;
}
.champ input:hover { border-color: var(--on-surface); }
.champ input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.case { display: inline-flex; align-items: center; gap: 8px; height: 48px; cursor: pointer; }
.case input { width: 18px; height: 18px; accent-color: var(--primary); }
.lib-erreur {
  padding: 10px 14px; border-radius: 8px;
  background: var(--error-container); color: var(--on-error-container); font-size: 13px;
}

/* ----- Page de connexion ----- */
.page-centree { min-height: calc(100vh - 65px); display: grid; place-items: center; padding: 24px 16px; }
.carte-connexion { width: min(420px, 100%); text-align: center; padding: 32px 28px; }
.carte-connexion .formulaire { text-align: left; }
.carte-connexion h2::after { content: ""; display: block; width: 48px; height: 3px; margin: 10px auto 0; background: var(--accent); }
.connexion-icone {
  width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 16px;
  display: grid; place-items: center; background: var(--primary-container); color: var(--on-primary-container);
}
.connexion-icone .ms { font-size: 32px; }

/* ----- Page des comptes ----- */
.page-colonne { max-width: 960px; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 960px) { .page-colonne { padding: 16px; gap: 16px; } }
.page-colonne .table-cadre { margin-top: 20px; }
.titre-ajout { margin-top: 28px; }
.actions-ligne { white-space: nowrap; }
.actions-ligne .btn-icone { display: inline-grid; width: 36px; height: 36px; color: var(--on-surface-variant); }
.btn-icone.btn-danger { color: var(--error); }

.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.puce {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--outline-variant);
  background: var(--surface-low); color: var(--on-surface-variant);
  font-size: 13px; font-weight: 500; white-space: nowrap;
}
.puce .ms { font-size: 18px; color: var(--primary); }
.puce-petite { height: 24px; padding: 0 8px; font-size: 12px; border-radius: 6px; }
.puce-assist { background: var(--surface-low); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =====================================================================================
   Ajouts propres à Exalto.Web
   ===================================================================================== */

/* ----- Cartes et titres (repris d'ExtractIA) ----- */
.carte { background: var(--surface-low); border-radius: 24px; padding: 24px; border: 1px solid var(--outline-variant); }
.carte h2 { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--titre); }
.titre-section { font-size: 14px; font-weight: 500; color: var(--on-surface-variant); margin: 4px 0 12px; }
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ----- Bandeau d'environnement (LIB_ENV du desktop : DEV vert, TEST jaune, masqué en PROD) ----- */
.bandeau-env {
  box-sizing: border-box; height: 20px; padding: 2px 16px; text-align: center;
  font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: #1d1d1d; /* Fond clair et vif (couleurs du desktop) dans les deux thèmes. */
}
/* Hauteur au-dessus du cadre : barre d'application (65 px) + bandeau d'environnement (20 px,
   absent en PROD). Les pages à hauteur d'écran s'en servent pour ne pas dépasser l'écran. */
:root { --hauteur-entete: 65px; }
body:has(.bandeau-env) { --hauteur-entete: 85px; }

/* ----- Logo cliquable ----- */
a.logo { text-decoration: none; }

/* ----- Cadre : menu latéral + contenu ----- */
.cadre-app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: calc(100vh - var(--hauteur-entete)); }
.rail {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 12px; border-right: 1px solid var(--outline-variant); background: var(--surface-low);
}
.rail-groupe {
  margin: 14px 12px 4px; font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--on-surface-variant);
}
.rail-entree {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border-radius: 20px;
  color: var(--on-surface); text-decoration: none; font-weight: 500; white-space: nowrap;
}
.rail-entree:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); }
.rail-entree.actif { background: var(--secondary-container); color: var(--on-secondary-container); }
.rail-entree.actif .ms { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.rail-entree.inactive { color: color-mix(in srgb, var(--on-surface) 45%, transparent); cursor: default; }
.rail-entree.inactive:hover { background: transparent; }
.contenu { min-width: 0; }
@media (max-width: 960px) {
  /* Menu en bandeau au-dessus de la page : sa ligne garde sa hauteur (sans « auto 1fr », la
     grille étirait le menu pour remplir la hauteur minimale, d'où un grand blanc). */
  .cadre-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .rail { flex-direction: row; overflow-x: auto; scrollbar-width: thin; border-right: 0; border-bottom: 1px solid var(--outline-variant); padding: 8px 12px; }
  .rail-groupe { display: none; }
  .lib-utilisateur { display: none; }
}

/* ----- Accueil ----- */
.entete-accueil { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.grille-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.module {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px; border-radius: var(--rayon);
  background: var(--surface-low); border: 1px solid var(--outline-variant);
}
.module h3 { font-size: 16px; font-weight: 600; color: var(--titre); }
.module p { margin-top: 4px; color: var(--on-surface-variant); }
.module .puce-petite { margin-top: 10px; }
.module-icone {
  width: 48px; height: 48px; border-radius: 14px; flex: none;
  display: grid; place-items: center;
  background: var(--primary-container); color: var(--on-primary-container);
}
.module-icone .ms { font-size: 26px; }
.module.inactif { cursor: default; }

/* ----- Reconnexion (Blazor Server) ----- */
.reconnexion { display: none; }
.reconnexion.components-reconnect-show,
.reconnexion.components-reconnect-failed,
.reconnexion.components-reconnect-rejected {
  display: flex; align-items: center; gap: 10px;
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30;
  padding: 14px 18px; border-radius: 8px;
  background: var(--inverse-surface); color: var(--inverse-on-surface); box-shadow: var(--ombre-2);
}

/* ----- Validation des formulaires Blazor ----- */
ul.lib-erreur { margin: 0; padding: 10px 14px 10px 30px; }
.champ input.invalid { border-color: var(--error); }

/* ----- Pages de gestion (étape 2) ----- */
.page-large { max-width: 1440px; }
.page-etroite { max-width: 600px; }
/* Mot de passe provisoire (gestion des utilisateurs) : affiché une seule fois, à recopier. */
.mdp-provisoire { display: flex; gap: 8px; align-items: center; margin: 12px 0; }
.mdp-provisoire input {
  flex: 1; min-width: 0; height: 48px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--outline); background: var(--surface-low); color: var(--on-surface);
  font-family: ui-monospace, Consolas, monospace; font-size: 20px; letter-spacing: 2px;
}
.page-colonne .carte > h2 { margin-bottom: 16px; }
.lien-retour { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); text-decoration: none; font-weight: 500; }
.lien-retour:hover { text-decoration: underline; }
a.btn { text-decoration: none; }
.btn-erreur { background: var(--error); color: var(--on-primary); }
.bandeau-erreur-page { margin-bottom: 16px; background: var(--error-container); color: var(--on-error-container); }

/* Table : recherche, tri, ligne sélectionnée (tables FEN_Xxx_Table). */
.barre-table { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.recherche {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 20px;
  background: var(--surface-cont); color: var(--on-surface-variant); min-width: min(320px, 100%);
}
.recherche input { border: 0; background: transparent; color: var(--on-surface); font: inherit; outline: none; flex: 1; min-width: 0; }
.recherche:focus-within { box-shadow: 0 0 0 2px var(--primary); }
.table-cadre { overflow-x: auto; border: 1px solid var(--outline-variant); border-radius: var(--rayon); }
.table-modeles { width: 100%; border-collapse: collapse; }
.table-modeles th, .table-modeles td { padding: 10px 14px; text-align: left; vertical-align: top; white-space: nowrap; }
.table-modeles th {
  position: sticky; top: 0; cursor: pointer; user-select: none;
  font-size: 12px; font-weight: 500; color: var(--on-surface-variant); background: var(--surface-cont);
}
.table-modeles th:hover { color: var(--on-surface); }
.th-contenu { display: inline-flex; align-items: center; gap: 4px; }
.ms.tri { font-size: 16px; width: 16px; }
.table-modeles td { border-top: 1px solid var(--outline-variant); }
.table-modeles tbody tr { cursor: pointer; }
.table-modeles tbody tr:hover { background: color-mix(in srgb, var(--on-surface) 5%, transparent); }
.table-modeles tbody tr.selection { background: var(--secondary-container); color: var(--on-secondary-container); }
.table-modeles tr.vide td { text-align: center; color: var(--on-surface-variant); cursor: default; padding: 28px 14px; }
.table-modeles .nombre { text-align: right; font-variant-numeric: tabular-nums; }
.total { margin-top: 10px; font-size: 13px; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; }

/* Fiches : champs en grille, groupes, cases à cocher. */
.grille-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.champ-large { grid-column: 1 / -1; }
.titre-groupe { font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--on-surface-variant); }
.champ select, .champ textarea {
  padding: 0 14px; border-radius: 8px; border: 1px solid var(--outline);
  background: var(--surface-lowest); color: var(--on-surface); font: inherit; font-size: 15px;
}
.champ select { height: 48px; }
.champ textarea { padding: 12px 14px; resize: vertical; }
.champ select:focus, .champ textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.cases { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.case input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); }
.code-script {
  width: 100%; padding: 14px; border-radius: 8px; border: 1px solid var(--outline);
  background: var(--surface-lowest); color: var(--on-surface);
  font: 13px/1.6 var(--police-mono); tab-size: 4; resize: vertical;
}
.onglets { display: flex; border-bottom: 1px solid var(--outline-variant); }
.onglet {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px;
  border: 0; background: transparent; color: var(--on-surface-variant); font-weight: 500; cursor: pointer;
}
.onglet.actif { color: var(--primary); }
.onglet.actif::before { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); }

/* Traçabilité (Créé par / le, Modifié par / le). */
.tracabilite { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 4px 0 0; }
.tracabilite dt { font-size: 12px; color: var(--on-surface-variant); }
.tracabilite dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }

/* Dialogue modal (fiches). */
.voile { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / .4); }
.dialogue {
  position: fixed; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
  padding: 24px; border-radius: 28px; background: var(--surface-high); color: var(--on-surface); box-shadow: var(--ombre-2);
}
.dialogue-large { width: min(860px, calc(100vw - 32px)); }
.dialogue h2 { font-size: 22px; font-weight: 500; color: var(--titre); margin-bottom: 8px; }
.dialogue-corps .formulaire { margin-top: 12px; }
.dialogue-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.dialogue .tracabilite { border-top: 1px solid var(--outline-variant); padding-top: 12px; }
.snackbar {
  position: fixed; left: 50%; bottom: 24px; z-index: 50; transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 8px;
  background: var(--inverse-surface); color: var(--inverse-on-surface); box-shadow: var(--ombre-2);
}

/* ----- Gestion de trames (étape 3) ----- */
.ged { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
.ged-droite { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ged-groupes { position: sticky; top: 16px; }
.ged-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.liste-groupes { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }
.groupe {
  width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px;
  border: 0; border-radius: 16px; background: transparent; color: var(--on-surface); text-align: left; cursor: pointer;
}
.groupe .badge { flex: none; }
.groupe:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); }
.groupe.actif { background: var(--secondary-container); color: var(--on-secondary-container); }
.groupe.systeme .groupe-nom { font-style: italic; }
/* Nom complet, sur plusieurs lignes au besoin (les noms des groupes sont longs). */
.groupe-nom { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.pastille-etat { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.actions-groupe { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--outline-variant); }
.champ-compact select { height: 36px; }
.texte-danger { color: var(--error); }
.puce-extrait { background: var(--warning-container); color: var(--on-warning-container); border-color: transparent; }
.puce-extrait .ms { color: inherit; }
.aide { display: flex; align-items: center; gap: 8px; color: var(--on-surface-variant); margin-top: 8px; }
fieldset.grille-champs { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset:disabled input, fieldset:disabled select, fieldset:disabled textarea { background: var(--surface-cont); color: var(--on-surface-variant); }
.apercu { width: 100%; height: 70vh; border: 1px solid var(--outline-variant); border-radius: var(--rayon); background: #ffffff; margin-top: 8px; }
.apercu-plein { flex: 1; height: auto; min-height: 0; }
.apercu-image { max-width: 100%; max-height: 70vh; border: 1px solid var(--outline-variant); border-radius: var(--rayon); margin-top: 8px; }
.fichier-choisi { display: flex; align-items: center; gap: 8px; font-weight: 500; }
label.btn { cursor: pointer; }
@media (max-width: 960px) { .ged { grid-template-columns: minmax(0, 1fr); } .ged-groupes { position: static; } }
/* Liste des documents : recherche rétrécissable, seul « Ajouter » dans la barre (les actions sur
   le document sont dans sa fiche). */
.page-ged .ged-liste > .ged-entete { margin-bottom: 10px; }
.page-ged .ged-liste > .ged-entete .texte-secondaire { margin: 0; font-size: 13px; }
.page-ged .ged-liste .barre-table { margin-bottom: 8px; }
.page-ged .ged-liste .recherche { flex: 1 1 160px; min-width: 0; }
.page-ged .ged-liste .barre-table .espace { display: none; }
.page-ged .ged-liste .table-cadre { max-height: 50vh; overflow-y: auto; }
.page-ged .ged-liste .total { margin-top: 4px; }
/* Fiche du document : titre, actions, informations en résumé (champs seulement une fois le
   document extrait), puis l'aperçu. */
.fiche-document { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fiche-document > .ged-entete { gap: 6px 12px; }
.fiche-document h2 { margin: 0; }
.fiche-document > .texte-secondaire { margin-top: 0; font-size: 13px; }
.fiche-document .actions { gap: 4px 6px; }
.fiche-document .actions .btn { padding: 0 16px; }
.fiche-document .grille-champs { gap: 10px; }
.fiche-resume { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; margin: 0; font-size: 14px; }
.fiche-resume dt { color: var(--on-surface-variant); }
.fiche-resume dd { margin: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.fiche-apercu { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.fiche-apercu .titre-groupe { margin: 0; }
.fiche-apercu .apercu { height: 70vh; margin-top: 0; }
.fiche-apercu .apercu-image { max-height: 70vh; margin-top: 0; }
/* Grand écran : page à hauteur d'écran, trois colonnes (groupes | documents sur toute la hauteur
   | fiche et aperçu) ; seules la table et l'aperçu défilent. */
@media (min-width: 1400px) {
  .page-ged { box-sizing: border-box; height: calc(100vh - var(--hauteur-entete)); gap: 16px; max-width: none; }
  .page-ged .ged { flex: 1 1 0; min-height: 420px; align-items: stretch; gap: 16px; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
  .page-ged .ged-groupes { display: flex; flex-direction: column; min-height: 0; padding: 16px 20px; }
  .page-ged .liste-groupes { max-height: none; flex: 1 1 0; min-height: 0; }
  .page-ged .ged-droite { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); gap: 16px; min-height: 0; }
  .page-ged .ged-droite > .carte { padding: 16px 20px; min-height: 0; }
  .page-ged .ged-liste:only-child { grid-column: 1 / -1; }
  .page-ged .ged-liste { display: flex; flex-direction: column; }
  .page-ged .ged-liste .table-cadre { max-height: none; flex: 0 1 auto; min-height: 0; }
  .page-ged .ged-liste .table-modeles th, .page-ged .ged-liste .table-modeles td { padding: 8px 10px; }
  .page-ged .ged-liste .table-modeles td:nth-child(2) { white-space: normal; min-width: 220px; }
  /* Colonne Jetons masquée à côté d'une fiche (les jetons sont dans la fiche ; la recherche les
     trouve toujours) : la table tient sans défilement horizontal. */
  .page-ged .ged-liste:has(+ .fiche-document) .table-modeles :is(th, td):nth-child(3) { display: none; }
  .page-ged .fiche-apercu { flex: 1 1 0; }
  .page-ged .fiche-apercu .apercu { flex: 1 1 0; height: auto; min-height: 0; }
  .page-ged .fiche-apercu .apercu-image { flex: 1 1 0; min-height: 0; max-height: none; width: 100%; object-fit: contain; object-position: top left; }
}

/* ----- Extraction ConsilioFX (étape 4) ----- */
.etape-titre { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.etape-titre h2 { margin: 0; }
.etape-numero {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--primary); color: var(--on-primary); font-weight: 600;
}
.etape-inactive { opacity: .6; }
.depot {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; cursor: pointer;
  padding: 28px 16px; border: 2px dashed var(--outline); border-radius: var(--rayon); background: var(--surface-lowest);
}
.depot:hover { border-color: var(--primary); background: var(--primary-container); }
.depot.inactif { cursor: default; opacity: .6; }
.depot-icone { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--primary-container); color: var(--on-primary-container); margin-bottom: 8px; }
.depot-icone .ms { font-size: 28px; }
.depot-titre { font-size: 16px; font-weight: 600; color: var(--titre); }
.depot-texte { color: var(--on-surface-variant); font-size: 13px; }
.progression { margin-top: 16px; }
.barre-lineaire { height: 4px; border-radius: 2px; overflow: hidden; position: relative; background: var(--secondary-container); }
.barre-lineaire span { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: var(--primary); border-radius: 2px; animation: barre 1.4s cubic-bezier(.4, 0, .2, 1) infinite; }
.lib-attente { display: block; margin-top: 8px; font-size: 13px; color: var(--on-surface-variant); }
@keyframes barre { 0% { left: -40%; width: 40%; } 60% { left: 60%; width: 30%; } 100% { left: 100%; width: 10%; } }
.releve-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 16px 0 12px; }
.releve-resume p { display: flex; align-items: center; gap: 8px; margin: 0; }
.etapes-export { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 16px; }
.etapes-export li { display: flex; align-items: center; gap: 8px; color: var(--on-surface-variant); }
.etapes-export li.faite { color: var(--on-surface); }
.etapes-export li.faite .ms { color: var(--primary); }
.etapes-export li.en-cours { color: var(--primary); font-weight: 600; }
.etapes-export li.en-cours .ms { animation: tourne 1s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.bandeau { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--rayon); }
.bandeau-attention { margin-top: 16px; background: var(--warning-container); color: var(--on-warning-container); }

/* Organiser la carrière (dialogue presque plein écran). */
.dialogue-plein { width: calc(100vw - 32px); max-width: 1600px; height: calc(100vh - 32px); max-height: none; display: flex; flex-direction: column; }
.dialogue-plein .dialogue-corps { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rapprochement { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.rapprochement-entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.completion { font-size: 28px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.barre-rapprochement { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.champ-nouvelle-valeur { flex: 1 1 260px; }
.separateur-vertical { width: 1px; align-self: stretch; background: var(--outline-variant); margin: 0 4px; }
.rapprochement-tables { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; flex: 1; min-height: 0; }
.rapprochement-tables section { display: flex; flex-direction: column; min-height: 0; }
.table-defilante { flex: 1; min-height: 240px; overflow: auto; }
.table-compacte th, .table-compacte td { padding: 6px 10px; font-size: 13px; }
.table-compacte td.texte-long { white-space: normal; min-width: 180px; }
.col-case { width: 32px; }
.table-modeles tbody tr.agregee { background: #d7e8d3; color: #1d2a1a; }
.table-modeles tbody tr.groupe-periode { background: #ffe167; color: #2c2400; }
.table-modeles tbody tr.groupe-periode.selection, .table-modeles tbody tr.agregee.selection { outline: 2px solid var(--primary); outline-offset: -2px; }
.legende { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.pastille-legende { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.pastille-legende.groupe-periode { background: #ffe167; }
.pastille-legende.agregee { background: #d7e8d3; }
@media (max-width: 960px) { .rapprochement-tables { grid-template-columns: minmax(0, 1fr); } }

/* ----- Étude stratégique (étape 5) ----- */
/* Page compacte : les deux colonnes occupent la hauteur restante de l'écran ; seules leurs listes
   défilent, les boutons « Ajouter au rapport » et « Générer le rapport » restent visibles en pied. */
.etude-entete { padding: 16px 24px; }
.etude-entete h2 { margin: 0 0 8px; }
.aide-ligne { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.champ-double { display: flex; gap: 8px; }
.champ-double input { flex: 0 0 130px; min-width: 0; }
.champ-double select { flex: 1; min-width: 0; }
.page-etude { box-sizing: border-box; height: calc(100vh - var(--hauteur-entete)); gap: 16px; }
.etude {
  display: grid; grid-template-columns: minmax(280px, 2fr) minmax(0, 3fr); gap: 16px;
  flex: 1 1 0; min-height: 420px;
}
.etude > .carte { padding: 16px 20px; min-height: 0; }
.etude-gauche, .etude-droite { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.etude .titre-groupe { margin: 0; }
.etude-gauche > .actions, .etude-droite > .actions { margin-top: auto; padding-top: 6px; }
.liste-cases { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; max-height: 30%; overflow-y: auto; flex-shrink: 0; }
.liste-cases .case { height: auto; min-height: 28px; padding: 2px 6px; border-radius: 8px; width: 100%; }
.liste-cases .case:hover { background: color-mix(in srgb, var(--on-surface) 6%, transparent); }
.liste-documents { max-height: none; flex: 1 1 0; min-height: 80px; }
.rapport { list-style: none; margin: 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 4px; flex: 1 1 0; min-height: 80px; overflow-y: auto; }
.rapport li {
  display: flex; align-items: center; gap: 10px; padding: 4px 10px; cursor: pointer; flex-shrink: 0;
  border: 1px solid var(--outline-variant); border-radius: 10px; background: var(--surface-lowest);
}
.rapport li:hover { border-color: var(--outline); }
.rapport li.selection { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: var(--secondary-container); color: var(--on-secondary-container); }
.rapport li.lien { background: #fde4ec; color: #3d1020; }
.rapport-ordre { min-width: 24px; text-align: right; font-variant-numeric: tabular-nums; color: var(--on-surface-variant); }
.rapport-ordre.retenu { font-weight: 700; color: inherit; }
.rapport-contenu { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.rapport-titre { flex: 1; min-width: 0; font-weight: 500; font-size: 14px; }
.rapport-source { flex: 0 0 40%; min-width: 0; height: 28px; font: inherit; font-size: 12px; border-radius: 6px; border: 1px solid var(--outline-variant); background: var(--surface-low); color: var(--on-surface-variant); }
.etude .progression { margin-top: 6px; }

/* ----- Simulateurs du client (fiche client et dialogue de l'étude) ----- */
.simulateurs { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.simulateurs label.desactive { opacity: .5; pointer-events: none; }
.liste-simulateurs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.liste-simulateurs li {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 8px 8px 12px; border-radius: 10px;
  border: 1px solid var(--outline-variant); background: var(--surface-lowest);
}
.liste-simulateurs li.principal { border-color: var(--primary); background: var(--secondary-container); color: var(--on-secondary-container); }
.simulateur-icone { color: var(--primary); }
.simulateur-texte { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; }
.simulateur-titre { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.simulateur-texte .texte-secondaire { margin-top: 0; font-size: 12px; }
.puce-principal .ms { font-size: 16px; }
.liste-simulateurs .actions-ligne { display: flex; align-items: center; }
.liste-simulateurs label.btn-icone { cursor: pointer; }
.simulateur-confirmation { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.simulateur-confirmation span { flex: 1 1 220px; }
.jauge { height: 8px; border-radius: 4px; background: var(--secondary-container); overflow: hidden; }
.jauge span { display: block; height: 100%; background: var(--primary); transition: width .3s; }
/* Attente sans durée connue (aperçu en préparation) : un segment qui défile. */
.jauge-attente span { width: 30%; animation: jauge-defile 1.2s ease-in-out infinite; }
@keyframes jauge-defile { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.grille-champs .champ input[type="search"] { height: 40px; }
@media (max-width: 1100px) {
  .page-etude { height: auto; }
  .etude { grid-template-columns: minmax(0, 1fr); flex: none; }
  .liste-documents, .rapport { max-height: 60vh; flex: none; }
}

/* Modules de l'accueil disponibles sur le web : tuiles cliquables. */
a.module.actif { text-decoration: none; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.module.actif:hover { border-color: var(--primary); box-shadow: var(--ombre); transform: translateY(-1px); }
a.module.actif:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.module.inactif { opacity: .65; }